body {
background:url(images/fond-page.jpg) no-repeat center top;
font-family: 'Montserrat', sans-serif;
overflow-x:hidden;
font-weight:400;
padding:0px;
margin:0px;
color:#FFF;
}
a, a:hover {
-webkit-transition:all 0.2s linear; transition:all 0.2s linear; 
}


/*---  GENERAL  -------------------------------------------------------------*/


.marco {
position:relative;
margin:110px auto;
max-width:1450px;

display:flex;
clear:both;
}
.izq {
width:calc(100% - 450px);
float:left;
}
.der {
width:450px;
float:right;
}
.logo {
display:inline-block;
margin:88px 0 0 56px;
}
h3 {
letter-spacing:-0.04em;
margin:35px 0 0 25px;
line-height:90px;
font-weight:900;
font-size:132px;
padding:0px;
}
h3 span {
padding-left:42px;
}
.encontranos {
letter-spacing:-0.03em;
margin-bottom:40px;
margin-top:154px;
line-height:48px;
font-weight:500;
font-size:43px;
}
.encontranos:after {
border-radius:3px 0 0 3px;
width:100%; height:6px;
background:#01E9FF;
margin-top:10px;
display:block;
content:'';
}
.der ul {
list-style-type:none;
padding:0px;
margin:0px;
}
.der li {
letter-spacing:-0.03em;
margin-bottom:32px;
line-height:57px;
font-weight:500;
min-height:61px;
font-size:30px;
}
.der li i {
font-size:27px;
}
.der li span {
-webkit-transition:all 0.2s linear; transition:all 0.2s linear; 
display:flex; flex-direction:column; flex-wrap:wrap;
justify-content:space-around;
align-content:space-around;
border:3px solid #01E9FF;
height:55px; width:55px;
border-radius:61px;
margin-right:20px;
float:left;
}
.der li:hover span {
-webkit-transition:all 0.2s linear; transition:all 0.2s linear; 
background:#01E9FF;
margin-right:25px;
color:#005FAF;
}
.der li a {
text-decoration:none;
color:#FFF;
}
.tram01 {
position:absolute;
left:-132px;
top:107px;
}
.tram02 {
position:absolute;
left:-80px;
top:684px;
}
.tram03 {
position:absolute;
right:-79px;
top:43px;
}


/*---  ANIMACION  -------------------------------------------------------------*/


#contenedor {
background:rgb(80,240,255); background:linear-gradient(90deg, rgba(80,240,255,1) 0%, rgba(255,253,254,1) 100%);
margin:73px 0 0 60px;
border-radius:19px;
width:765px;
height:19px;
}
#barra {
background:rgb(17,11,83); background:linear-gradient(90deg, rgba(17,11,83,1) 0%, rgba(4,177,211,1) 100%);
width:0; height:100%;
border-radius:19px;
position:relative;
}
#texto {
text-align:center;
line-height:20px;
font-weight:500;
font-size:18px;
width:765px;
height:19px;
color:#FFF;
}
#texto:after {
content:'0%';
}
@keyframes progreso {
0% {width:0;} 100% {width:100%;}
}
@keyframes porcentaje {
0% {content:'0%';} 25% {content:'25%';} 50% {content:'50%';} 75% {content:'75%';} 100% {content:'100%';}
}
#barra {
animation:progreso 5s linear infinite;
}
#texto:after {
animation:porcentaje 5s linear infinite;
}
.tram04 {
width:94px; height:94px;
position:absolute;
right:-30px;
top:-37px;
}


/*---  RESPONSIVE  -------------------------------------------------------------*/


@media (max-width:1365px) {
.der li {margin-bottom: 21px; line-height:62px; font-size:24px;}
.marco {max-width:100%; width:100%;}
.izq {width:calc(100% - 370px);}
.der {width:370px;}
}

@media (max-width:1259px) {
h3 {margin:63px 0 0 25px; line-height:80px; font-size:110px;}
#contenedor {width:600px;}
#texto {width:600px;}
}

@media (max-width:1139px) {
h3 {margin:80px 0 0 25px; line-height:65px; font-size:80px;}
.tram03 img {width:300px; height:auto;}
.logo img {width:500px; height:auto;}
.encontranos {margin-top:136px;}
.tram03 {right:0px; top:35px;}
.der li {margin-bottom:13px;}
h3 span {padding-left:22px;}
#contenedor {width:500px;}
#texto {width:500px;}
.tram01 {top:95px;}
}

@media (max-width:959px) {
body {background:url(images/fond-page.jpg) no-repeat center -50px;}
.marco {display:block; margin:60px auto; overflow:hidden;}
.der {width:100%; float:none; padding-left:50px;}
#contenedor {width:600px; margin:60px 0 0 54px;}
h3 {margin:50px 0 0 55px; font-size:60px;}
.der li {width:50%; float:left;}
.tram03 {right:-60px; top:50px;}
.encontranos {margin-top:52px;}
.izq {width:100%; float:none;}
.logo {margin:50px 0 0 56px;}
h3 span {padding-left:0px;}
.tram02 {display:none;}
h3 br {display:none;}
#texto {width:600px;}
.tram01 {top:55px;}
}

@media (max-width:849px) {
.tram03 {right:-175px;}
h3 {font-size:48px;}
}

@media (max-width:699px) {
body {background:url(images/fond-page.jpg) no-repeat center top; background-size:cover;}
.logo {margin:100px 0 0 56px;}
#contenedor {width:500px;}
h3 {margin:30px 0 0 55px;}
.logo img {width:320px;}
.tram03 {display:none;}
#texto {width:500px;}
.der li {width:100%;}
h3 {font-size:70px;}
.tram01 {top:92px;}
}

@media (max-width:589px) {
h3 {font-size:60px; line-height:54px;}
#contenedor {width:400px;}
#texto {width:400px;}
}

@media (max-width:499px) {
.encontranos {font-size:36px; margin-top:42px;}
h3 {font-size:48px; line-height:48px;}
#contenedor {width:300px;}
#texto {width:300px;}
}

@media (max-width:409px) {
.der li:last-child {letter-spacing:-0.05em; font-size:22px;}
#contenedor {margin:60px 0 0 39px;}
h3 {margin:30px 30px 0 40px;}
.logo {margin:14px 0 0 41px;}
.der {padding-left:35px;}
.logo img {width:250px;}
.tram01 {top:2px;}
}

@media (max-width:379px) {
.der li:last-child {font-size:20px;}
.der li span {margin-right:15px;}
.encontranos {font-size:32px;}
.logo {margin:14px 0 0 41px;}
#contenedor {width:240px;}
#texto {width:240px;}
}

@media (max-width:329px) {
h3 {font-size:40px; line-height:40px;}
}