@font-face {
	font-family: 'archia';
	src: url("archia.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

html{width:100%;
	height:100%;
}

body{width:100%;height:100%;background-color:#edeef4;font-family: 'archia';}


* { margin: 0px;
padding: 0px; outline: 0;
}
iframe { display:block; border:none; }

.os-animation{
            opacity:0;
 }  

.os-animation.animated{
            opacity: 1.5;
 }  
 
 *:focus { 
    outline: none; 
} 

h1,h2,h3,h4,h5,h6{ display:inline !important;}


#elheader{ width:100%; height:84px; top:0px; left:0; position:fixed;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s; z-index:9998; background-color: #004d61;}

#home{width:100%; height:900px; text-align:center; background:url(../imagenes/home.jpg) no-repeat center center ;background-size:cover;}

.invi{ width:100%; height:84px;}

.smooth{ font-size:16px;color:#ffffff;font-weight:400; text-decoration: none; -moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; }
.smooth:hover{color:#f98b4a;}

.smooth2{ font-size:16px;color:#ffffff;font-weight:400; text-decoration: none; -moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; }
.smooth2:hover{color:#f98b4a;}

.redes{opacity:1;transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; cursor:pointer;}
.redes:hover{ opacity: .5;}

.texto1{color:#ffffff; font-size:18px; line-height: 150%; font-weight:400; text-decoration:none;font-optical-sizing: auto;}
.texto2{color:#ffffff; font-size:75px; line-height: 100%;  text-decoration:none;font-optical-sizing: auto;}
.texto3{color:#0e0e11; font-size:75px; line-height: 110%;  text-decoration:none;font-optical-sizing: auto;}
.texto4{color:#f9711f; font-size:18px; line-height: 100%;  text-decoration:none;font-optical-sizing: auto;}
.texto5{color:#0e0e11; font-size:15px; line-height: 150%;  text-decoration:none;font-optical-sizing: auto;}
.texto6{color:#f9711f; font-size:15px; line-height: 150%;  text-decoration:underline;font-optical-sizing: auto;}
.texto7{color:#f9711f; font-size:15px; line-height: 150%;  text-decoration:none;font-optical-sizing: auto;}
.texto8{color:#f9711f; font-size:40px; line-height: 150%;  text-decoration:none;font-optical-sizing: auto;}
.texto9{color:#FFFFFF; font-size:75px; line-height: 110%;  text-decoration:none;font-optical-sizing: auto;}
.texto10{color:#0e0e11; font-size:18px; line-height: 140%;  text-decoration:none;font-optical-sizing: auto;}
.texto11{color:#FFFFFF; font-size:18px; line-height: 140%;  text-decoration:none;font-optical-sizing: auto;}
.texto12{color:#0e0e11; font-size:40px; line-height: 110%;  text-decoration:none;font-optical-sizing: auto;}
.texto13{color:#FFFFFF; font-size:18px; line-height: 150%; font-weight: 300;  text-decoration:none;font-optical-sizing: auto;}
.texto14{color:#f9711f; font-size:22px; line-height: 150%;  text-decoration:none;font-optical-sizing: auto;}
.texto15{color:#0e0e11; font-size:22px; line-height: 150%;  text-decoration:none;font-optical-sizing: auto;}
.texto16{color:#ffffff; font-size:40px; line-height: 110%;  text-decoration:none;font-optical-sizing: auto;}
.texto16a{color:#ffffff; font-size:32px; line-height: 110%;  text-decoration:none;font-optical-sizing: auto;}
.texto17{color:#f9711f; font-size:16px; line-height: 150%;  text-decoration:none;font-optical-sizing: auto;}
.texto18{color:#0e0e11; font-size:16px; line-height: 150%;  text-decoration:none;font-optical-sizing: auto;}

#arriba, #arriba1,#arriba2,#arriba3,#arriba4{display:inline-block;vertical-align:top;}
#arriba{ width:100%;  vertical-align:middle; text-align:center; position:fixed; z-index:9999;}
#arriba1{width:15%; height: 84px; margin-left:-4px; text-align:center; background-color: #ffffff;   }
#arriba2{width:70%; height: 84px; margin-left:-4px;text-align:center; }
#arriba3{width:15%; margin-left:-4px; margin-top: 27px; text-align:left; }
#arriba4{ display: none;}

.textosgrales{ width: 90%; max-width: 950px; text-align: center; display: inline-block;}


#conocenos{ width: 100%; text-align: center;}
.textosgrales2{ width:300px; text-align: left; display: inline-block;}

#conoce, #conoce1{display:inline-block;vertical-align:top;}
#conoce{ width:97%;  vertical-align:middle; text-align:left;}
#conoce1{width:20%; margin-left:-4px; text-align:center;  }



#ventajas, #ventajas1, #ventajas2, #ventajas3{display:inline-block;vertical-align:top;}
#ventajas{ width:97%;  vertical-align:middle; text-align:left;}
#ventajas1{width:40%; margin-left:-4px; text-align:left; margin-top: 57px; }
#ventajas2{width:20%; margin-left:-4px; text-align:center;  }
#ventajas3{width:60%; margin-left:-4px; text-align:center; }

.textosgrales3{ width:300px; text-align: left; display: inline-block;}

.lali{ width: 100%; background-color: #cdcdcd; height: 1px;}

.boto2{ text-align:center; font-size:18px; line-height: 60px; text-transform: uppercase; width: 95%; max-width: 1050px; height: 60px; border:1px solid #0e0e11;color:#0e0e11; background-color: transparent; text-decoration:none;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; font-weight:400; cursor: pointer; display: inline-block;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.boto2:hover{border:1px solid #f9711f;}


.boto3{ text-align:center; font-size:18px; line-height: 60px; text-transform: uppercase; width: 98%; height: 60px; border:1px solid #0e0e11;color:#0e0e11; background-color: transparent; text-decoration:none;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; font-weight:400; cursor: pointer; display: inline-block;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.boto3:hover{border:1px solid #f9711f;}


.boto4{ text-align:center; font-size:18px; line-height: 60px; text-transform: uppercase; width: 98%; height: 60px; border:1px solid #ffffff;color:#ffffff; background-color: transparent; text-decoration:none;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; font-weight:400; cursor: pointer; display: inline-block;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.boto4:hover{border:1px solid #f9711f;}


#separador{width:100%; height: 700px; background: url("../imagenes/separador.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}

#separador2{width:100%; height: 700px; background: url("../imagenes/separador2.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}

#separador3{width:100%; height: 700px; background: url("../imagenes/separador3.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}

#experiencia{ width: 100%; background-color: #f9711f; text-align: center;}
.textosgrales4{ width: 90%; max-width: 560px; text-align: center; display: inline-block;}


#porque{ width: 100%; text-align: center;}

#por, #por1, #por2, #por3{display:inline-block;vertical-align:top;}
#por{ width:97%;  vertical-align:middle; text-align:center; }
#por1{width:25%; margin-left:-4px; text-align:left; }
#por2{width:25%; margin-left:-4px; text-align:center; }
#por3{width:25%; margin-left:-4px; text-align:right; }

.textosgrales5{ width:85%; text-align: left; display: inline-block;}


#fotos, #fotos1, #fotos2, #fotos3, #fotos4, #fotos5, #fotos6{display:inline-block;vertical-align:top;}
#fotos{ width:97%;  vertical-align:middle; text-align:left; }
#fotos1{width:20%; height: 415px; margin-left:-4px; text-align:left;background: url("../imagenes/i1.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; }
#fotos2{width:20%; height: 415px;  margin-left:-4px; text-align:left;background: url("../imagenes/i2.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  }
#fotos3{width:20%; height: 415px;  margin-left:-4px; text-align:right;background: url("../imagenes/i3.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  }
#fotos4{width:20%; height: 415px;  margin-left:-4px; text-align:right; background: url("../imagenes/i4.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; }
#fotos5{width:6.3%;   margin-left:-4px;  }
#fotos6{width:100%;   margin-left:0px; text-align: center;  }


#fundador{ width: 100%; background-color: #0f4e60; text-align: center;}


#funda, #funda1, #funda2, #funda3, #funda4, #funda5, #funda6, #funda7, #funda8, #funda9, #funda0{display:inline-block;vertical-align:top;}
#funda{ width:90%;  vertical-align:middle; text-align:left; }
#funda1{width:30%; height: 500px; margin-left:-4px; text-align:left;background: url("../imagenes/fundador.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; }
#funda2{width:10%; margin-left:-4px; text-align:left;}
#funda3{width:60%; margin-left:-4px; text-align:left;}
#funda4{width:25%; margin-left:-4px; text-align:left; margin-top: 60px;}
#funda5{width:15%; margin-left:-4px; text-align:left; margin-top: 60px;  }
#funda6{width:9%; margin-left:-4px; text-align:left; margin-top: 60px;  }
#funda7{width:19%; margin-left:-4px; text-align:left; margin-top: 60px;  }
#funda8{width:12%; margin-left:-4px; text-align:left; margin-top: 60px;  }
#funda9{width:10%; margin-left:-4px; text-align:right; margin-top: 60px;}
#funda0{width:10%; margin-left:-4px; text-align:right; margin-top: 60px;}


#subfunda, #subfunda1,#subfunda2,#subfunda3,#subfunda4{display:inline-block;vertical-align:top;}
#subfunda{ width:100%;  vertical-align:middle; text-align:center;  }
#subfunda1{width:100%;  margin-left:0px; text-align:left;   }
#subfunda2{width:50%;  margin-left:-4px; text-align:left;   }
#subfunda3{width:50%;  margin-left:-4px; text-align:right;   }
#subfunda4{ display: none;}

.textosgrales6{ width:85%; text-align: left; display: inline-block;}

#servicios{ width: 100%; background-color: #f9711f; text-align: center;}

#invi{ width: 100%; height: 150px;}

#serviciosdos{ width: 100%;  text-align: center;}

#servi, #servi1, #servi2, #servi3, #servi4{display:inline-block;vertical-align:top;}
#servi{ width:90%;  vertical-align:middle; text-align:center;margin-top: -95px; }
#servi1{width:21.25%;margin-left:-4px; text-align:center;}
#servi2{width:5%;margin-left:-4px; text-align:center; }
#servi3{width:5%;  margin-left:-4px; text-align:center;   }


#espe, #espe1, #espe2, #espe3, #espe4{display:inline-block;vertical-align:top;}
#espe{ width:90%;  vertical-align:middle; text-align:center;}
#espe1{width:21.25%;margin-left:-4px; text-align:center;}
#espe2{width:5%;margin-left:-4px; text-align:center; }
#espe3{width:5%;  margin-left:-4px; text-align:center;   }

.textosgrales7{ width:90%; text-align: left; display: inline-block;}

.subse{ width:351px ; height:190px ; background: url("../imagenes/servicios1.png") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; display: inline-block;}

#contacto{ width: 100%; background-color: #ffffff; text-align: center;}

#contacta, #contacta1, #contacta2, #contacta3, #contacta4{display:inline-block;vertical-align:top;}
#contacta{ width:90%;  vertical-align:middle; text-align:center; }
#contacta1{width:100%;margin-left:0px; text-align:left;}
#contacta2{width:100%;margin-left:0px; text-align:left;}
#contacta3{width:20%;  margin-left:-4px; text-align:left;   }
#contacta4{width:20%;  margin-left:-4px; text-align:right;   }

::placeholder{color:#0e0e11;}

.forma2{text-align:left;HEIGHT:50px;width:100%;border:1; border:0; font-size:15PX;font-weight:400; background-color: transparent;  font-family: 'Poppins', sans-serif; color:#0e0e11;
border-top: 0px solid red;
  border-right: 0px solid red;
  border-bottom: 1px solid #cdcdcd;
  border-left: 0px solid red; opacity:1;
}

.boto5{ text-align:center; font-size:14px; line-height: 50px; text-transform: uppercase; width: 90%; max-width: 1050px; height: 50px; border:1px solid #0e0e11;color:#0e0e11; background-color: transparent; text-decoration:none;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; font-weight:400; cursor: pointer; display: inline-block;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.boto5:hover{border:1px solid #f9711f;}

#footer{ width:100%; height:84px;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s; z-index:9998; background-color: #004d61;}
#abajo, #abajo1,#abajo2,#abajo3,#abajo4{display:inline-block;vertical-align:top;}
#abajo{ width:100%;  vertical-align:middle; text-align:center;  z-index:9999;}
#abajo1{width:15%; height: 84px; margin-left:-4px; text-align:center; background-color: #ffffff;   }
#abajo2{width:70%; height: 84px; margin-left:-4px;text-align:center; }
#abajo3{width:15%; margin-left:-4px; margin-top: 27px; text-align:left; }

@media screen and (max-width:1800px)
 {
.texto13{font-size:17px;}
}

@media screen and (max-width:1720px)
 {
#funda4{width:25%; margin-left:-4px; text-align:left; margin-top: 60px;}
#funda5{width:16%; margin-left:-4px; text-align:left; margin-top: 60px;  }
#funda6{width:10%; margin-left:-4px; text-align:left; margin-top: 60px;  }
#funda7{width:20%; margin-left:-4px; text-align:left; margin-top: 60px;  }
#funda8{width:13%; margin-left:-4px; text-align:left; margin-top: 60px;  }
#funda9{width:10%; margin-left:-4px; text-align:right; margin-top: 60px;}
#funda0{width:5%; margin-left:-4px; text-align:right; margin-top: 60px;}     
}

@media screen and (max-width:1780px)
 {
#servi{ width:800px;  vertical-align:middle; text-align:center; }
#servi1{width:375px;margin-left:-4px; text-align:center;}
#servi2{width:50px;margin-left:-4px; text-align:center; }
#servi3{ display: none; }

}


@media screen and (max-width:1650px)
 {
.texto13{font-size:16px;}

#separador,#separador2{ height:650px;}
     
#conoce{ text-align:center;}
  #conoce1{width:350px; text-align:center;  } 
 .textosgrales2{text-align: center;}
     
#ventajas{text-align:center;}     
#ventajas1{width:100%; margin-left:0px; text-align:center; margin-top: 0px; }
#ventajas2{width:350px; margin-left:-4px; text-align:center; margin-top: 0px;  }
#ventajas3{width:100%; margin-left:0px; text-align:center; }     

.textosgrales3{text-align: center;}     
     
}

@media screen and (max-width:1510px)
 {
#funda4{width:100%; margin-left:0px; text-align:left; margin-top: 60px;}
#funda5{width:20%; margin-left:-4px; text-align:center; margin-top: 60px;  }
#funda6{width:15%; margin-left:-4px; text-align:center; margin-top: 60px;  }
#funda7{width:30%; margin-left:-4px; text-align:center; margin-top: 60px;  }
#funda8{width:15%; margin-left:-4px; text-align:center; margin-top: 60px;  }
#funda9{width:20%; margin-left:-4px; text-align:center; margin-top: 60px;}
#funda0{ display: none;}     
}


@media screen and (max-width:1480px)
 {
#funda1{ height: 550px;}  
}
     
@media screen and (max-width:1420px)
 {
.boto5{ width:100%; }
    
#fotos1,#fotos2,#fotos3,#fotos4{height: 400px;}
#separador,#separador2,#separador3{ height:600px;}
}

@media screen and (max-width:1280px)
 {
#funda1{width:35%; height: 550px;}
#funda2{ width: 5%;}

#subfunda2{width:100%;  margin-left:0px; text-align:left;   }
#subfunda3{width:100%;  margin-left:0px; text-align:left;   }
 
.textosgrales6{ width:100%;}
}
    
@media screen and (max-width:1200px)
 {
#espe1{width:47.5%;margin-left:-4px; text-align:center;}
#espe2{width:5%;margin-left:-4px; text-align:center; }
#espe3{ display: none;}
     
#fotos1,#fotos2,#fotos3,#fotos4{ width:23.5% ; height: 380px;}
#fotos5{width:2%;}
     
#por1{width:50%; text-align:center; }
#por3{width:50%; text-align:center; }
     
#separador,#separador2,#separador3{ height:600px;}
     
#arriba1{width:25%;}
#arriba2{width:60%;}
}

@media screen and (max-width:1180px)
 {
#funda5{width:33%; margin-left:-4px; text-align:center; margin-top: 60px;  }
#funda6{width:33%; margin-left:-4px; text-align:center; margin-top: 60px;  }
#funda7{width:33%; margin-left:-4px; text-align:center; margin-top: 60px;  }
#funda8{width:33%; margin-left:-4px; text-align:center; margin-top: 60px;  }
#funda9{width:33%; margin-left:-4px; text-align:center; margin-top: 60px;}
}


@media screen and (max-width:1150px)
 {
#contacta3{width:50%;  margin-left:-4px; text-align:left;   }
#contacta4{width:100%;  margin-left:0px; text-align:right; margin-top:20px;   }     
}


@media screen and (max-width:1080px)
 {
#abajo{ width:100%;  vertical-align:middle; text-align:left; }
#abajo1{width:35%;}
#abajo2{ display: none;}
#abajo3{width:63%; text-align: right;}
     
#abajo2{ display: none;}
     
#fotos1,#fotos2,#fotos3,#fotos4{height: 360px;}
     
#separador,#separador2,#separador3{ height:550px;}     
     
#arriba1{width:35%;}
#arriba2,#arriba3{ display: none;}
#arriba4{ display: inline-block;width:65%; margin-left:-4px;  text-align:left; }
}

@media screen and (max-width:1000px)
 {
#funda1{ display: none;}
#funda2{ display: none;}
#funda3{width:100%; margin-left: 0; }

 
#subfunda1{text-align:center;   }
#subfunda4{ display: inline-block; text-align: center; width: 100%;}
.textosgrales6{ text-align: center;}
}
     
@media screen and (max-width:970px)
 {
#separador{width:100%; height:450px; background: url("../imagenes/separador.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
     
#separador2{width:100%; height:450px; background: url("../imagenes/separador2.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
     
#separador3{width:100%; height:450px; background: url("../imagenes/separador3.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; }
     
#home{ height:800px;}
.texto2,.texto3,.texto9{font-size:65px;}
}


@media screen and (max-width:920px)
 {
#funda5{width:50%; margin-left:-4px; text-align:center; margin-top: 40px;  }
#funda6{width:50%; margin-left:-4px; text-align:center; margin-top: 40px;  }
#funda7{width:50%; margin-left:-4px; text-align:center; margin-top: 40px;  }
#funda8{width:50%; margin-left:-4px; text-align:center; margin-top: 40px;  }
#funda9{width:50%; margin-left:-4px; text-align:center; margin-top: 40px;}
}


@media screen and (max-width:850px)
 {
#servi{ width:375px;  vertical-align:middle; text-align:center; }
#servi1{width:375px;margin-left:0px; text-align:center;}
#servi2{ display: none; }

}


@media screen and (max-width:800px)
 {
#espe1{width:100%;margin-left:0px; text-align:center;}
#espe2{ display: none;}
.textosgrales7{ width:90%; text-align: center; display: inline-block;}
     
#contacta3{width:100%;  margin-left:0px; text-align:left;   }


#fotos1,#fotos2,#fotos3,#fotos4{ width:24.2% ;height: 360px;}
#fotos5{width:1%;}
     
#por1{width:100%;margin-left:0px; text-align:center; }
#por3{width:100%;margin-left:0px; text-align:center; }
 
.textosgrales5{ width:85%; text-align: center; display: inline-block;}     
     
#separador,#separador2,#separador3{height:400px;}
    
#home{ height:700px;}
.texto2,.texto3,.texto9{font-size:60px;}
}
 


@media screen and (max-width:600px)
 {
#funda5{width:100%; margin-left:0px; text-align:center; margin-top: 20px;  }
#funda6{width:100%; margin-left:0px; text-align:center; margin-top: 20px;  }
#funda7{width:100%; margin-left:0px; text-align:center; margin-top: 20px;  }
#funda8{width:100%; margin-left:0px; text-align:center; margin-top: 20px;  }
#funda9{width:100%; margin-left:0px; text-align:center; margin-top: 20px;}
 
#fotos1,#fotos2,#fotos3,#fotos4{height: 340px;}
     
#separador,#separador2,#separador3{height:350px;}
     
#home{ height:600px;}
.texto2,.texto3,.texto9{font-size:50px;}
}


@media screen and (max-width:500px)
 {
#fotos1,#fotos2,#fotos3,#fotos4{height: 320px;}
     
#separador,#separador2,#separador3{height:300px;}
     
#home{ height:600px;}
.texto2,.texto3,.texto9{font-size:45px;}
}



#menumovil{ display:none;}
@media screen and (max-width:1120px)
 {
    #menumovil{ z-index:9999;position: absolute;
  right: 30px;
  height: 27px;
        top: 31px;
  width: 35px; display:block;}
}


.button_container {
  position: absolute;
  top: -2px;
  right: 0px;
  height: 0px;
  width: 35px;
  cursor: pointer;
  z-index: 9999;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  -moz-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #ffffff;
}
.button_container.active .middle {
  opacity: 0;
  background: #ffffff;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #ffffff;
}
.button_container span {
  background: #ffffff;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;z-index: 9999;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
	background-color:rgba(0,77,97,.9);  position: fixed;
    top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  -moz-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInUp .8s ease forwards;
  -moz-animation: fadeInUp .8s ease forwards;
          animation: fadeInUp .8s ease forwards;
  -webkit-animation-delay: .35s;
  -moz-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .45s;
  -moz-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .55s;
  -moz-animation-delay: .55s;
          animation-delay: .55s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .65s;
  -moz-animation-delay: .65s;
          animation-delay: .65s;
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .75s;
  -moz-animation-delay: .75s;
          animation-delay: .75s;
}
.overlay.open li:nth-of-type(6) {
  -webkit-animation-delay: .85s;
  -moz-animation-delay: .85s;
          animation-delay: .85s;
}
.overlay.open li:nth-of-type(7) {
  -webkit-animation-delay: .95s;
  -moz-animation-delay: .95s;
          animation-delay: .95s;
}
.overlay nav {
  position: relative;
  top: 40%; left:5%;
  -webkit-transform: translateY(-35%);
  -moz-transform: translateY(-35%);
          transform: translateY(-35%);
  text-align: center;
  margin-right:52px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%; width:100%;
}
.overlay ul li {
  display: inline-block;
  position: relative;
  opacity: 0;
  min-width:18%; text-align:center;
}
.overlay ul li a {
  display: inline-block;
  position: relative;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  font-size: 40px;
  opacity:1; line-height: 150%; 
}
.overlay ul li a:hover,a:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
  opacity:1;-webkit-transition: .25s;
  transition: .25s;opacity:.8;color:#f9711f;
}

 .ball{-moz-animation:spin 1.5s infinite linear;-webkit-animation:spin 1.5s infinite linear;-0-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear;}
@-moz-keyframes spin{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(10px);}
}
@-webkit-keyframes spin{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(10px);}
}
@-o-keyframes spin{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(10px);}
}
@-moz-keyframes spin{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(10px);}
} 


 .ball2{-moz-animation:spin2 1.5s infinite linear;-webkit-animation:spin2 1.5s infinite linear;-0-animation:spin 1.5s infinite linear;animation:spin2 1.5s infinite linear;}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateX(10px);}
}
@-webkit-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateX(10px);}
}
@-o-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-0-transform:translateX(10px);}
}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateX(10px);}
}