/* INTROWORKS */

@charset "UTF-8";
@font-face{
	font-family:"OPPO S";
	src:url(fonts/OPPOSans-H.woff) format("woff"),
	url(fonts/OPPOSans-H.woff2) format("woff2"),
	url(fonts/OPPOSans-H.ttf) format("truetype"),
	url(fonts/OPPOSans-H.svg) format("svg"),
	url(fonts/OPPOSans-H.eot) format("embedded-opentype");
	font-weight:900;
	font-style:normal;
}
@font-face{
	font-family:"OPPO S";
	src:url(fonts/OPPOSans-B.woff) format("woff"),
	url(fonts/OPPOSans-B.woff2) format("woff2"),
	url(fonts/OPPOSans-B.ttf) format("truetype"),
	url(fonts/OPPOSans-B.svg) format("svg"),
	url(fonts/OPPOSans-B.eot) format("embedded-opentype");
	font-weight:600;
	font-style:normal;
}
@font-face{
	font-family:"OPPO S";
	src:url(fonts/OPPOSans-M.woff) format("woff"),
	url(fonts/OPPOSans-M.woff2) format("woff2"),
	url(fonts/OPPOSans-M.ttf) format("truetype"),
	url(fonts/OPPOSans-M.svg) format("svg"),
	url(fonts/OPPOSans-M.eot) format("embedded-opentype");
	font-weight:400;
	font-style:normal;
}
@font-face{
	font-family:"OPPO S";
	src:url(fonts/OPPOSans-L.woff) format("woff"),
	url(fonts/OPPOSans-L.woff2) format("woff2"),
	url(fonts/OPPOSans-L.ttf) format("truetype"),
	url(fonts/OPPOSans-L.svg) format("svg"),
	url(fonts/OPPOSans-L.eot) format("embedded-opentype");
	font-weight:300;
	font-style:normal;
}

body {font-family: 'OPPO S', sans-serif; font-size: 20px; margin: 0; background-color: white; font-weight: 400; color: #282828; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; background-repeat: no-repeat repeat; background-size: contain; background-size: 100%; background-position: center top; overflow-x: hidden; max-width: 1920px; margin: auto;
	-webkit-transition: background-position linear 10ms;
    -moz-transition: background-position linear 10ms;
    -o-transition: background-position linear 10ms;
	transition: background-position linear 10ms;
}

img, picture, svg {width: auto; height: auto; max-width: 100%; position: relative; vertical-align: middle;}
/*ul {list-style: none; padding: 0 0 0 30px;}
li {line-height: 1.3em; margin-bottom: 1em; position:relative;}
/*li:before {content: "+"; position: absolute; top: 0; left: -20px;}*/
p, .p {margin: 0 0 0 0; line-height: 1.2em; font-size: 1em;}
p.big, .p.big {font-size: 1.5em; line-height: 1.3em; font-weight: 100;}
p.small, .p.small {font-size:0.7em;}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {margin: 0 0 0 0; line-height: 1.2em; font-family: 'OPPO S', sans-serif;}
h1, .h1 {font-size: 75px;}
h2, .h2 {font-size: 45px;}
h3, .h3 {font-size: 28px;}
h4, .h4 {font-size: 24px;}
h5, .h5 {font-size: 16px;}

hr {clear: both;  display: block; margin: 3em 0;}
a {color: inherit; text-decoration:none;/* vertical-align: middle;*/}
a:hover, a:focus {/*color: currentColor;*/ text-decoration:none}
:focus {outline: none;}
.pointer {cursor:pointer;}
.underline {text-decoration:underline;}
p > a {position: relative; opacity: 0.9;}
p > a:before {content: ""; position: absolute; top:100%; left:0; height: 2px; width: 0; background-color: currentColor; opacity:1;
	-webkit-transition: all cubic-bezier(0.8, 0, 0.2, 1) 500ms;
    -moz-transition: all cubic-bezier(0.8, 0, 0.2, 1) 500ms;
    -o-transition: all cubic-bezier(0.8, 0, 0.2, 1) 500ms;
	transition: all cubic-bezier(0.8, 0, 0.2, 1) 500ms;
}
p > a:hover:before {width:100%}

figure, iframe {max-width: 100%;}
main {position: relative; z-index: 3;}
label {display: inline-block;}
.wrapper {width: 100%; max-width:1300px; margin: auto;}
.mini-wrapper {max-width: 900px; margin: auto;}
.flex {display:flex; flex-flow: wrap;}
.flex.center {justify-content: center;}
.flex.between {justify-content: space-between;}
.flex.around {justify-content: space-around;}
.flex.vcenter {align-items: center;}
.flex.stretch {align-items: stretch;}
.flex.inline {display:inline-flex;}
.flex.reverse {flex-direction: row-reverse;}
.overflow, .row, .content-area {overflow:hidden;}
.relative {position:relative}
.absolute {position:absolute}
.uppercase {text-transform:uppercase;}
.bold, .strong, strong, b {font-weight:900}
.italic, i {font-style: italic;}
.light {font-weight: 100;}
.btn {padding:1em 3em; display:inline-block; cursor:pointer; text-align: center;
	-webkit-transition: background-color ease-in-out 150ms;
    -moz-transition: background-color ease-in-out 150ms;
    -ms-transition: background-color ease-in-out 150ms;
    -o-transition: background-color ease-in-out 150ms;
	transition: background-color ease-in-out 150ms;
}
.btn.small {font-weight: bold; font-size: 13px; text-transform: uppercase; padding: 12px 24px}
.btn.big {font-size: 1.6em; border-radius: 5px; font-weight: 300; padding: 0.7em 3em;}

.align-c {text-align:center}
.align-l {text-align:left}
.align-r {text-align:right}
.left {float:left}
.right {float:right !important}

.yt-container, .video-container {position: relative; width: 100%; height: 0; padding-bottom: 56.4%;}
.yt-container iframe, .video-container iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.displaynone, .hidden {display:none}
.blur {filter:blur(5px);}
.shadow {
    -webkit-box-shadow: 2px 2px 15px -2px rgb(0 0 0 / 50%);
    -moz-box-shadow: 2px 2px 15px -2px rgb(0 0 0 / 50%);
    box-shadow: 2px 2px 15px -2px rgb(0 0 0 / 50%);
}
.bg-img {background-position: center; background-repeat: no-repeat; background-size: cover;}

/* COLUMNS */
[class*="col1-"],[class*="col2-"], [class*="col3-"], [class*="col4-"], [class*="col5-"], [class*="col6-"] {float:left; box-sizing: border-box;}
.col1-1 {width: 100%;}
.col1-2, .col2-4, .col3-6 {width: 50%;}
.col1-3, .col2-6 {width: 33.33%;}
.col2-3, .col4-6 {width: 66.66%;}
.col1-4 {width: 25%;}
.col3-4 {width: 75%;}
.col1-5 {width: 20%;}
.col2-5 {width: 40%;}
.col3-5 {width: 60%;}
.col4-5 {width: 80%;}
.col1-6 {width: 16.66%;}
.col5-6 {width: 83.33%;}
.col1-2:nth-child(2n+1), .col1-3:nth-child(3n+1), .col1-4:nth-child(4n+1), .col1-5:nth-child(5n+1), .col1-6:nth-child(6n+1) {clear: both;}
.auto-width > [class*="col1-"], .auto-width > [class*="col2-"], .auto-width > [class*="col3-"], .auto-width > [class*="col4-"], .auto-width > [class*="col5-"], .auto-width > [class*="col6-"] {width: auto;}

/* PADDINGS MARGINS BORDERS */
.pd-0 {padding:0px}
.pd-10 {padding:10px}
.pd-20 {padding:20px}
.pd-50 {padding:50px}
.pd-100 {padding:100px}
.pd-150 {padding:150px}
.pd-200 {padding:200px}
.pd-t-0 {padding-top:0px}
.pd-t-10 {padding-top:10px}
.pd-t-20 {padding-top:20px}
.pd-t-50 {padding-top:50px}
.pd-t-100 {padding-top:100px}
.pd-t-150 {padding-top:150px}
.pd-t-200 {padding-top:200px}
.pd-b-0 {padding-bottom:0px}
.pd-b-10 {padding-bottom:10px}
.pd-b-20 {padding-bottom:20px}
.pd-b-50 {padding-bottom:50px}
.pd-b-100 {padding-bottom: 100px;}
.pd-b-150 {padding-bottom: 150px;}
.pd-b-200 {padding-bottom: 200px;}
.pd-l-0 {padding-left: 0px;}
.pd-l-10 {padding-left: 10px;}
.pd-l-20 {padding-left: 20px;}
.pd-l-50 {padding-left: 50px;}
.pd-r-0 {padding-right: 0px;}
.pd-r-10 {padding-right: 10px;}
.pd-r-20 {padding-right: 20px;}
.pd-r-50 {padding-right: 50px;}
.mg-0 {margin:0px}
.mg-10 {margin:10px}
.mg-20 {margin:20px}
.mg-50 {margin:50px}
.mg-100 {margin:100px}
.mg-150 {margin:150px}
.mg-200 {margin:200px}
.mg-t-0 {margin-top:0px}
.mg-t-10 {margin-top:10px}
.mg-t-20 {margin-top:20px}
.mg-t-50 {margin-top:50px}
.mg-t-100 {margin-top:100px}
.mg-t-150 {margin-top:150px}
.mg-t-200 {margin-top:200px}
.mg-t--10 {margin-top:-10px}
.mg-t--20 {margin-top:-20px}
.mg-t--50 {margin-top:-50px}
.mg-t--100 {margin-top:-100px}
.mg-t--150 {margin-top:-150px}
.mg-t--200 {margin-top:-200px}
.mg-b-0 {margin-bottom:0px}
.mg-b-10 {margin-bottom:10px}
.mg-b-20 {margin-bottom:20px}
.mg-b-50 {margin-bottom:50px}
.mg-b-100 {margin-bottom:100px}
.mg-b-150 {margin-bottom:150px}
.mg-b-200 {margin-bottom:200px}
.mg-b--10 {margin-bottom:-10px}
.mg-b--20 {margin-bottom:-20px}
.mg-b--50 {margin-bottom:-50px}
.mg-b--100 {margin-bottom:-100px}
.mg-b--150 {margin-bottom:-150px}
.mg-b--200 {margin-bottom:-200px}
.mg-l-0 {margin-left:0px}
.mg-l-10 {margin-left:10px}
.mg-l-20 {margin-left:20px}
.mg-l-50 {margin-left:50px}
.mg-l--10 {margin-left:-10px}
.mg-l--20 {margin-left:-20px}
.mg-l--50 {margin-left:-50px}
.mg-r-0 {margin-right:0px}
.mg-r-10 {margin-right:10px}
.mg-r-20 {margin-right:20px}
.mg-r-50 {margin-right:50px}
.mg-r--10 {margin-right:-10px}
.mg-r--20 {margin-right:-20px}
.mg-r--50 {margin-right:-50px}
.bd-1 {border:solid 1px currentColor}
.bd-2 {border:solid 2px currentColor}
.bd-3 {border:solid 3px currentColor}
.bd-4 {border:solid 4px currentColor}
.bd-5 {border:solid 5px currentColor}
.bd-r-10 {border-radius: 10px;}
.bd-r-20 {border-radius: 20px;}
.bd-r-50 {border-radius: 50px;}
.bd-r, .rounded {border-radius: 100%;}

/* COLORS */
.blanco {color:#ffffff;}
.gris-claro {color:#eaecf1}
.gris-medio {color:#c2c2c2}
.gris-oscuro {color:#454545}
.negro {color:#000000}
.verde {color:#0c6b39}
.amarillo {color:#fbbd33}

.bg-blanco {background-color:#ffffff;}
.bg-gris-claro {background-color:#eaecf1}
.bg-gris-medio {background-color:#c2c2c2}
.bg-gris-oscuro {background-color:#454545}
.bg-negro {background-color:#000000}
.bg-verde {background-color:#0c6b39}
.bg-amarillo {background-color:#fbbd33}

.overlay-negro, .overlay-blanco, .overlay-negro > *, .overlay-blanco > * {position:relative; z-index: 3;}
.overlay-negro:before, .overlay-blanco:before {content:""; position: absolute; top:0;bottom:0;left:0;right:0; opacity:0.8; z-index: 2;}
.overlay-negro:before {background-color: #000000;}
.overlay-blanco:before {background-color:#ffffff}

.loading {position: fixed; top:0; left:0; width: 100%; height:100%; z-index: 15;}

.centered {
	-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.animation1 {
	-webkit-transition: all ease-in-out 1000ms;
    -moz-transition: all ease-in-out 1000ms;
	-ms-transition: all ease-in-out 1000ms;
    -o-transition: all ease-in-out 1000ms;
	transition: all ease-in-out 1000ms;
}
.animation2 {
	-webkit-transition: all cubic-bezier(0.5, 0, 0.2, 0.8) 1200ms;
    -moz-transition: all cubic-bezier(0.5, 0, 0.2, 0.8) 1200ms;
	-ms-transition: all cubic-bezier(0.5, 0, 0.2, 0.8) 1200ms;
    -o-transition: all cubic-bezier(0.5, 0, 0.2, 0.8) 1200ms;
	transition: all cubic-bezier(0.5, 0, 0.2, 0.8) 1200ms;
}
.animation3 {
	-webkit-transition: all cubic-bezier(0.77, 2.8, 0.93, 0.6) 500ms;
    -moz-transition: all cubic-bezier(0.77, 2.8, 0.93, 0.6) 500ms;
	-ms-transition: all cubic-bezier(0.77, 2.8, 0.93, 0.6) 500ms;
    -o-transition: all cubic-bezier(0.77, 2.8, 0.93, 0.6) 500ms;
	transition: all cubic-bezier(0.77, 2.8, 0.93, 0.6) 500ms;
}

section {background-size: cover; background-position: center; background-repeat: no-repeat;}
.bg-img svg * {stroke-dasharray: 100%; stroke-dashoffset: 100%;
	-webkit-transition: stroke-dashoffset ease-in-out 1500ms;
    -moz-transition: stroke-dashoffset ease-in-out 1500ms;
	-ms-transition: stroke-dashoffset ease-in-out 1500ms;
    -o-transition: stroke-dashoffset ease-in-out 1500ms;
	transition: stroke-dashoffset ease-in-out 1500ms;
}
.bg-img svg.visible *, .bg-img svg *.visible {stroke-dashoffset: 0%;}
.bg-img svg defs * {stroke-width: 8;}

.underbg {position: relative; padding: 5px 10px; display: inline-block;}
.underbg:before {content: ""; position: absolute; background-color: #fbbd33; top: 0; width: 0%; height: 100%; z-index: -1;
	-webkit-transition: width ease-in-out 500ms;
    -moz-transition: width ease-in-out 500ms;
	-ms-transition: width ease-in-out 500ms;
    -o-transition: width ease-in-out 500ms;
	transition: width ease-in-out 500ms;
}
.underbg.visible:before {width: 100%;}
.underbg-1:before  {left: 0; clip-path: polygon(0% 20%, 100% 10%, 100% 80%, 0% 100%);}
.underbg-2:before  {right: 0; clip-path: polygon(0% 20%, 100% 30%, 100% 100%, 0% 90%);}

.circlein {clip-path: circle(0%);}
.circlein.visible {clip-path: circle(100%);}

.opacityin {opacity: 0}
.opacityin.visible {opacity: 1;}

.leftin {
	-webkit-transform: translate(-1000px, 0);
    -moz-transform: translate(-1000px, 0);
	-ms-transform: translate(-1000px, 0);
    -o-transform: translate(-1000px, 0);
	transform: translate(-1000px, 0);
}
.rightin {
	-webkit-transform: translate(1000px, 0);
    -moz-transform: translate(1000px, 0);
	-ms-transform: translate(1000px, 0);
    -o-transform: translate(1000px, 0);
	transform: translate(1000px, 0);
}
.bottomin {
	-webkit-transform: translate(0, 1000px);
    -moz-transform: translate(0, 1000px);
	-ms-transform: translate(0, 1000px);
    -o-transform: translate(0, 1000px);
	transform: translate(0, 1000px);
}
.zoomin {
	-webkit-transform: translate(0, 0) scale(0);
    -moz-transform: translate(0, 0) scale(0);
	-ms-transform: translate(0, 0) scale(0);
    -o-transform: translate(0, 0) scale(0);
	transform: translate(0, 0) scale(0);
}
.leftin.visible, .rightin.visible, .visible > .bottomin, .zoomin.visible {
	-webkit-transform: translate(0, 0) scale(1);
    -moz-transform: translate(0, 0) scale(1);
	-ms-transform: translate(0, 0) scale(1);
    -o-transform: translate(0, 0) scale(1);
	transform: translate(0, 0) scale(1);
}

div.circulo {padding-top: 50%; padding-bottom: 50%; height: 0; border-radius: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.circulo.bordered {position: relative;}
.circulo.bordered .border {position: absolute; border: solid 7px currentColor; left: 50%; top: 50%; width: 120%; height: 120%; border-radius: 100%; z-index: -1;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.circulo.bordered.animated .border {animation: pulse 3s cubic-bezier(0, 0.7, 0.6, 1) infinite;}
@keyframes pulse {
	0% {width:90%;height:90%;}
	100% {width:110%;height:110%;}
}

.floating {animation:float 10s infinite  ;}
@keyframes float {
	0% {
		-webkit-transform: translate(0px, 0px) rotate(0deg);
		-moz-transform: translate(0px, 0px) rotate(0deg);
		-ms-transform: translate(0px, 0px) rotate(0deg);
		-o-transform: translate(0px, 0px) rotate(0deg);
		transform: translate(0px, 0px) rotate(0deg);
		animation-timing-function: ease-in-out;
	}
	25% {
		-webkit-transform: translate(10px, 10px) rotate(-3deg);
		-moz-transform: translate(10px, 10px) rotate(-3deg);
		-ms-transform: translate(10px, 10px) rotate(-3deg);
		-o-transform: translate(10px, 10px) rotate(-3deg);
		transform: translate(10px, 10px) rotate(-3deg);
		animation-timing-function: ease-in-out;
	}
	50% {
		-webkit-transform: translate(0px, 20px) rotate(3deg);
		-moz-transform: translate(0px, 20px) rotate(3deg);
		-ms-transform: translate(0px, 20px) rotate(3deg);
		-o-transform: translate(0px, 20px) rotate(3deg);
		transform: translate(0px, 20px) rotate(3deg);
		animation-timing-function: ease-in-out;
	}
	75% {
		-webkit-transform: translate(-10px, -10px) rotate(-3deg);
		-moz-transform: translate(-10px, -10px) rotate(-3deg);
		-ms-transform:translate(-10px, -10px) rotate(-3deg);
		-o-transform: translate(-10px, -10px) rotate(-3deg);
		transform: translate(-10px, -10px) rotate(-3deg);
		animation-timing-function: ease-in-out;
	}
	100% {
		-webkit-transform: translate(0px, 0px) rotate(0deg);
		-moz-transform: translate(0px, 0px) rotate(0deg);
		-ms-transform: translate(0px, 0px) rotate(0deg);
		-o-transform: translate(0px, 0px) rotate(0deg);
		transform: translate(0px, 0px) rotate(0deg);
		animation-timing-function: ease-in-out;
	}
}
.scrolling {animation:scroll 2s infinite alternate-reverse ;}
@keyframes scroll {
	0% {
		-webkit-transform: translate(0px, 0px);
		-moz-transform: translate(0px, 0px);
		-ms-transform: translate(0px, 0px);
		-o-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		animation-timing-function: ease-in-out;
	}
	100% {
		-webkit-transform: translate(0px, 20px);
		-moz-transform: translate(0px, 20px);
		-ms-transform: translate(0px, 20px);
		-o-transform: translate(0px, 20px);
		transform: translate(0px, 20px);
		animation-timing-function: ease-in-out;
	}
}

#anima1 {height: 0; overflow: visible; margin: 0;}
#anima2 {height: 0; overflow: visible; margin: 0; opacity: 0;}
.visible #anima1 {animation: appear 5s infinite alternate-reverse 1s;}
.visible #anima2 {animation: appear 5s infinite alternate 1s;}
@keyframes appear {
	0% {opacity: 0;}
	45% {opacity: 0;}
	55% {opacity: 1;}
	100% {opacity: 1;}
}

.bg-rotation {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#multicons {animation: rotate 40s linear infinite; overflow: visible;}
#multicons .rotate-inverse {animation: rotate 40s linear infinite reverse; transform-origin: center; transform-box: fill-box;}
@keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.loading {position:fixed; z-index: 9999; top:0; left:0; width: 100%; height: 100%;}

/* POSICION ELEMENTOS */
#element1 {top:58%; left:50%}
#element2 {top: 70%; left: -5vw; width: 33vw;}
#element3 {top: 10%; right: -5vw; width: 33vw;}
#element4 {top: 6%; left: 32vw;width: 70px; }
#element5 {top: 50%; left: 5vw; width: 60px;}
#element6 {top: 80%; right: 28vw; width: 80px;}
#element7 {top: 50%; right: 5vw; width: 90px;}
#element8 {bottom: -50px; left: 50%; width: 30px;}
#element9 {top: 22%; left: 4vw; width: 85px;}
#element10 {bottom: 22%; left: 6vw; width: 225px;}
#element11 {bottom: 14%; right: 47vw; width: 95px;}
#element12 {top:8%; left:0}
#element13 {top:28%; left:14vw; font-size: 28px; width:340px; z-index: 1;}
#element14 {top: 53%; right: 18vw; width: 310px;}
#element15 {top: 46%; right: 6vw; width: 225px;}
#element16 {top: 50%; left: 50%; }
#element17 {top: 11%; left: 23vw; width: 21%;}
#element18 {top: 13%; left: 13vw; width: 27%;}
#element19 {top: 53%; right: 23vw; width: 420px; z-index: 1;}
#element20 {top: 60px; left: 8vw; width: 600px; font-size: 28px; z-index: 1;}
#element21 {top: 130px; right: 14vw; width: 370px; font-size: 24px; z-index: 1;}
#element22 {top: 150px; right: -20px; width: 290px; z-index: 2;}
#element23 {top: 610px; left: 43vw; width: 380px; font-size: 24px; z-index: 1;}
#element24 {top: 380px; left: 43vw; width: 300px; font-size: 24px; z-index: 2;}
#element25 {top: 800px; left: 7vw; width: 370px; z-index: 1;}
#element26 {top: 720px; left: 11vw; width: 170px; z-index: 2;}
#element27 {top: 980px; right: 10vw; width:470px; font-size: 24px; z-index: 1;}
#element28 {top: 880px; right: 7vw; width: 410px; z-index: 2;}
#element29 {top: 1200px; left: 27vw; width: 340px; z-index: 1;}
#element30 {top: 1200px; left: 3vw; width: 25vw; z-index: 2;}
#element31 {top: 1730px; left: 6vw; width: 310px; z-index: 1;}
#element32 {top: 1950px; left: 5vw; width: 330px; z-index: 2;}
#element33 {top: 1640px; right: 10vw; width: 370px; z-index: 1;}
#element34 {top: 1515px; right: 11vw; width: 313px;z-index: 2;}
#element35 {top: 1870px; left: 36vw; width: 430px; z-index: 1;}
#element36 {top: 2200px; left: 34vw; width: 435px; z-index: 2;}
#spects {height:2750px;}
/* POSICION ELEMENTOS */

@media only screen and (max-width: 1500px) {
	.bg-img svg {min-width: 1500px; left: 50%;
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		-o-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
	}
	#element15 {top: 44%; right: 2vw;}
	#element20 {left: 6vw; width: 520px;}
	#element21 {top: 60px; right: 15vw; width: 360px; font-size: 22px;}
	#element22 {width: 240px;}
	#element23 {width: 350px;}
	#element25 {top: 780px; left: 5vw; width: 340px;}
	#element27 {top: 1150px; width: 410px;}
	#element28 {top: 1050px;}
	#element29 {top: 1490px; left: 30vw;}
	#element30 {width: 35vw}
	#element31 {top: 1860px;}
	#element32 {top: 2110px;}
	#element33 {top: 1820px;}
	#element34 {top: 1690px;}
	#element35 {top: 2320px;}
	#element36 {top: 2660px;}
	#spects {height: 3230px;}
}

@media only screen and (max-width: 1200px) {
	h2, .h2 {font-size: 40px;}
	
	/* POSICION ELEMENTOS */
	#element2 {left: -9vw; width: 42vw; }
	#element3 {right: -9vw; width: 42vw; }
	#element4 {left: 24vw;}
	#element6 {right: 25vw;}
	#element7 {top: 63%;}
	#element9 {top: 22%; left: 74vw;}
	#element11 {bottom: 10%; right: 67vw; }
	#element13 {top: 17%; left: 6vw;}
	#element14 {top: 49%; right: 15vw;}
	#element15 {top: -28%; right: 2vw; width: 185px;}
	#element16 {top: 50%; left: 50%; width: 80%;}
	#element17 {top: 16%; left: 25vw; width: 23%;}
	#element18 {top: 14%; left: 5vw; width: 34%;}
	#element19 {top: 50%; right: 13vw; width: 400px;}
	#element20 {left: 5vw; width: 540px; font-size: 24px;}
	#element21 {top: 460px;}
	#element22 {top: 550px; width: 200px;}
	#element23 {top: 920px; left: 12vw; width: 310px; font-size: 18px;}
	#element24 {top: 680px; left: 14vw; width: 260px;}
	#element25 {top: 1110px; left: 57vw;}
	#element26 {top: 1030px; left: 63vw; }
	#element27 {top: 1368px; right: 50vw; width: 380px; font-size: 20px;}
	#element28 {top: 1490px; right: 26vw; width: 370px;}
	#element29 {top: 1880px; left: 50vw; width: 260px;}
	#element30 {top: 1830px; left:9vw; width: 38%; }
	#element31 {top: 2260px;}
	#element32 {top: 2485px;}
	#element33 {top: 2470px;}
	#element34 {top: 2330px;}
	#element35 {top: 2910px; left: 18vw; width: 380px;}
	#element36 {top: 2998px; left: 51vw; width: 37vw;}
	/* POSICION ELEMENTOS */
	#spects {height: 3750px;}
}

@media only screen and (max-width: 1000px) {
	h2, .h2 {font-size: 30px;}
	h4, .h4 {font-size: 20px;}
	.btn {padding:1em 2em;}
	/* POSICION ELEMENTOS */
	#element4 {left: 14vw; width: 50px;}
	#element5 {top: 58%; width: 50px;}
	#element6 {right: 15vw; width: 70px;}
	#element7 {width: 60px;}
	#element9 {top: 29%;}
	#element13 {width: 270px; font-size: 20px;}
	#element20 {top:30px; width: 450px; font-size: 20px;}
	#element21 {right: 9vw; width: 310px; font-size: 20px;}
	#element22 {top: 320px; width: 180px;}
	#element23 {top: 840px; left: 10vw; width: 260px;}
	#element24 {top: 620px; left: 12vw; width: 230px; }
	#element25 {top: 1000px; left: 54vw; width: 300px; font-size: 20px;}
	#element26 {top: 940px;}
	#element27 {top: 1300px; right: 48vw; width: 350px;}
	#element28 {top: 1440px; right: 9vw; width: 49vw;}
	#element30 {top: 1730px; left: 6vw; width: 48%;}
	#element31 {left: 5vw; width: 290px;}
	#element32 {left: 9vw; width: 30vw;}
	#element33 {right: 5vw; width: 350px;}
	#element34 {right: 7vw; width: 37vw;}
	#element35 {top: 2870px; left: 9vw; width: 350px;}
	#element36 {top: 2998px; left: auto; right: 5vw; width: 47vw;}
	/* POSICION ELEMENTOS */
	#element14 .bordered .border, #element19 .bordered .border, #element23 .bordered .border, #element29 .bordered .border, #element35 .bordered .border {border-width: 30px !important;}
}
/*
@media only screen and (max-width: 900px) {
	body {font-size: 17px;}
	h1 {font-size: 50px;}
	[class*="col"] [class*="col1-"], [class*="col"] [class*="col2-"], [class*="col"] [class*="col3-"], [class*="col"] [class*="col4-"], [class*="col"] [class*="col5-"], [class*="col"] [class*="col6-"] {width:100%;}
}
*/
@media only screen and (max-width: 770px) {
	body {font-size: 15px;}
	h1, .h1 {font-size: 38px;}
	h2, .h2 {font-size: 20px;}
	h3, .h3 {font-size: 19px;}
	h4, .h4 {font-size: 16px;}
	.pd-50 {padding: 30px;}
	.mg-b-50 {margin-bottom: 20px;}
	.mg-b-20 {margin-bottom: 10px;}
	[class*="col1-"],[class*="col2-"], [class*="col3-"], [class*="col4-"], [class*="col5-"], [class*="col6-"] {width:100%}
	.bg-img svg {min-width: 1100px;}
	/* POSICION ELEMENTOS */
	#element1 {top: 56%;}
	#element2 {}
	#element3 {}
	#element4 {}
	#element5 {}
	#element6 {}
	#element7 {}
	#element8 {}
	#element9 {top: 16%; width: 50px; left: auto; right: 6vw;}
	#element10 {top: 260px; bottom: auto; left: auto; right: 16vw; width: 140px;}
	#element11 {width: 50px;}
	#element12 {}
	#element13 {width: 220px; font-size: 15px;}
	#element14 {top: 50%; right: 24vw; width: 260px;}
	#element15 {width: 150px;}
	#element16 {width: 90%;}
	#element16 img {width: 58px !important;}
	#element17 {}
	#element18 {}
	#element19 {top: 43%; right: 21vw; width: 58vw;}
	#element20 {top: 63px; left: 5vw; width: 84vw; padding: 3vw; font-size: 4vw;}
	#element21 {right: 29vw; width: 60vw; font-size: 3vw; top: 108vw;}
	#element22 {top: 100vw; width: 30vw;}
	#element23 {top: 202vw; left: 25vw; width: 50vw; font-size: 3vw;}
	#element24 {top: 178vw; left: 31vw; width: 34vw;}
	#element25 {top: 272vw; left: 25vw; width: 50vw; font-size: 3vw;}
	#element26 {top: 265vw; left: 35vw; width: 30vw;}
	#element27 {top: 327vw; right: auto; left: 6vw; width: 60vw; font-size: 3vw;}
	#element28 {top: 360vw; right: 6vw; width: 50vw;}
	#element29 {top: 436vw; left: auto; right: 10vw; width: 52vw; font-size: 3vw;}
	#element30 {top: 399vw; left: 4vw; width: 60vw;}
	#element31 {top: 517vw; left: 30vw; width: 60vw;}
	#element32 {top: 500vw; width: 40vw;}
	#element33 {top: 582vw; right: auto; left: 5vw; width: 61vw;}
	#element34 {top: 627vw; right: 7vw; width: 57vw;}
	#element35 {top: 678vw; left: 20vw; width: 60vw;}
	#element36 {top: 720vw; left: auto; right: 10vw; width: 70vw;}
	/* POSICION ELEMENTOS */
	#spects {height: 810vw;}
	#products {text-align: center;}
	#footer > div {padding-top:0}
	#element14 .bordered .border, #element19 .bordered .border, #element23 .bordered .border, #element29 .bordered .border, #element35 .bordered .border {border-width: 4vw !important; background-color: #fff;}
}

@media only screen and (max-width: 500px) {
	body {font-size: 15px;}
	h2, .h2 {font-size: 17px;}
	h3, .h3 {font-size: 16px;}
	h4, .h4 {font-size: 15px;}
	#element4, #element5, #element6, #element7 {width: 30px;}
	#element10 {right: 10vw; width: 120px;}
	#element36 {top: 727vw;}

}