*{ padding: 0px;
    margin: 0px;
    list-style: none;
    box-sizing: border-box;
}

a{text-decoration: none;}
h3{font: lighter 30px Verdana;color: #666;padding: 20px;}
h2{font: lighter 18px Verdana;color: #555;padding: 20px 10px 20px 10px;}

header{
    width: 100%;background: #fff;box-shadow: 1px 1px 5px #000;
    height: 100vh;
}
.menu-fixed{
        position: fixed;
        z-index: 500;
        top: 0;
        width: 100%;
        box-shadow: 0px 4px 3px rgba(0,0,0,.5);
}
.contenedor{
    width: 100%;
    max-width: 3000px;
    margin: auto;
}
.menu{
    
    display: flex;
    justify-content: space-between;
    background: #666;
    height: 52px;
}
#menu-pantalla .logo{
    color: #fff;
    margin-top: 11px;
    margin-left: 30px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 25px;
}
#menu-pantalla nav ul{
    display: flex;
    justify-content: space-between;
}
#menu-pantalla nav ul li{
    margin-right: 50px;
    list-style: none;
    color: #fff;
    margin-top: 20px;
}
#menu-pantalla nav ul li a{
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
}

#menu-movil .logo{
    color: #fff;
    margin-top: 15px;
    margin-left: 15px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
}
.menu-icon{
    display: block;
    background: url(../imagenes/menu.png) no-repeat;
    background-size: contain;
    float: right;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 60px;
}
#menu-movil nav{
    position: absolute;
    top: 52px;
    left: 0;
    height: 100vh;
    background: rgba(0,0,0,.5);
    width: 100%;
    display: none;
}
#menu-movil nav ul{
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    background: #87ceeb;
    width: 40%;
    margin-left: auto;
    height: 250px;
    padding-bottom: 10px;
}
#menu-movil nav ul li{
    margin: 0px;
    list-style: none;
    color: #fff;
    height: 30px;
    text-align: left;
    padding: 0px;
}
#menu-movil nav ul li a{
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 10px 0px 0px 20px;
}
/*Slider*/
#slider{
    width:100%;
    margin: auto;
    overflow: hidden;
    height: 92%;
}
#slider ul{
    display: flex;
    padding: 0;
    width: 300%;
    height: 100%;
    animation: cambio 15s infinite alternate;
    animation-timing-function:linear;
}
#slider li{
    width: 100%;
    list-style: none;
    height: 100%;
    background: url(../imagenes/fondo.png) no-repeat top;
    background-size: cover;
    padding: 5px;
}
#slider ul li div{
    width:100%;
    height:100%;
    background-size:contain;
    position: relative;
}
#slider ul li div .botonInicio{
    width: 100px;
    height: 130px;
    background: url(../imagenes/logoW.png) no-repeat top;
    background-size: contain;
    text-align: center;
    margin: auto;
    padding-top: 105px;
}
#slider ul li div .botonInicio a{
    font: 15px Verdana; 
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 6px 16px 6px 16px; 
    border-radius: 8px;
    text-align: center;
    width: 100%;
}
#slider ul li div .botonInicio a:hover{background: #87ceeb;}

@keyframes cambio{
    0% {margin-left: 0;}
    25% {margin-left: 0;}
    
    30% {margin-left:-100%;}
    70% {margin-left:-100%;}
    
    75% {margin-left:-200%;}
    100% {margin-left:-200%;}
}

#inicio{
    background: url(../imagenes/inicio2.jpg) no-repeat top;
    padding-top: 10%;
}

#inicio2{
    background: url(../imagenes/inicio4.jpg) no-repeat top;
}
#inicio2 .botonInicio{
    position: absolute;
    bottom: 10px;
    left: 10px;
}

#inicio3{
    background: url(../imagenes/inicio3.jpg) no-repeat top;
}
#inicio3 .botonInicio{
    position: absolute;
    bottom: 10px;
    right: 10px;
}

#nosotros section{padding:30px 60px 0px 60px;}
#nosotros section h2{margin-left: 5%;margin-right: 5%;}

#servicios{width: 100%;background: #666;padding: 20px 0px;}
#servicios h3{color: #fff;}
#servicios section{width: 1000px;padding:0px;width: 80%;}
#servicios section:hover article{opacity: .6;transform: scale(0.60);}
#servicios section article{height: 200px;display: inline-block;color: #fff;border: 4px solid #fff; font: 22px Verdana;padding: 0px;}
#servicios section article:hover{opacity: 1;background: #fff;color: #666;transform: scale(1.35,1.40);}
#servicios section article:hover a{height: 30%;color: blue;}
#servicios section article a{color: #fff;padding: 0px;float: left;font: 25px Verdana;background-size: 100%;width: 100%;height: 100%;}
#servicios section article:hover div{height: 70%;font-size: 11px;opacity: 1;text-align: left;}
#servicios section article div{height: 0%;opacity: 0;font-size: 1px;}
#servicios section article:hover p{padding: 3px;}
#servicios section article p{font-size: 11px;}

/*Servicio2*/

#servicios2{
    width: 100%;
    padding: 40px 0px;
    background: #666;
/*    background: rgba(102,102,102,0.50);*/
}
#servicios2 h3{
    text-align: center;
    color: #fff;
}
.section-servicios{
    width: 85%;
    margin: auto;
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
    padding: 20px;
}

.par{
    width: 250px;
    height: 250px;
    border-radius: 10px;
    margin: 10px;
    padding: 15px;
    border: 5px solid #87ceeb;
    box-shadow: 11px 15px 15px -6px rgba(0,0,0,0.75);
    background: linear-gradient(to bottom, #fff,#3c96fa);
    position: relative;
    overflow: hidden;
}
.par:hover{
    height:500px;
}
.par:hover div{
    display: none;
}
.par h4{
/*    color: #fff;*/
    font: 25px Verdana;
    text-align: center;
}
.par ul{
    margin-top: 10px;
}
.par ul li{
    margin-bottom: 10px;
    margin-left: 10px;
    list-style-type: disc;
    text-align: left;
    font: 14px Verdana;
}
.par img{
    width: 50px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.par div{
    background: #7db9fa;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    padding-left: 15px;
    padding-top: 10px;
    color: rgba(256,256,256,0.85);
}
.impar{
    width: 250px;
    height: 250px;
    border-radius: 10px;
    margin: 10px;
    padding: 15px;
    border: 5px solid #87ceeb;
    box-shadow: 11px 15px 15px -6px rgba(0,0,0,0.75);
    background:linear-gradient(to bottom,#fff,#64d7fa);
    position: relative;
    overflow: hidden;
}
.impar:hover{
    height:500px;
}
.impar:hover div{
    display: none;
}
.impar h4{
/*    color: #fff;*/
    font: 25px Verdana;
    text-align: center;
}
.impar ul{
    margin-top: 10px;
}
.impar ul li{
    margin-bottom: 10px;
    margin-left: 10px;
    list-style-type: disc;
    text-align: left;
    font: 14px Verdana;
}
.impar img{
    width: 50px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.impar div{
    background: #8ce1fa;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    padding-left: 15px;
    padding-top: 10px;
    color: rgba(256,256,256,0.85);
}
/**/
#articulos{width: 100%;background: #fff;padding: 20px 0px;}

#articulo center{
    
}


#articulos section{
    width: 80%;
    padding:30px 0px 30px 0px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
#articulos section:hover article{opacity: .6;}
#articulos section article{
/*    display: inline-block; */
    width: 300px;height: 280px;margin: 5px;}
#articulos section article:hover{opacity: 1;}
#articulos section article img{width: 100%;height: 220px;}
#articulos section article video{width: 100%;height:auto;margin-top: 15px;}
#articulos section article a{color: #666;padding: 5px;float: left;font: 14px Verdana;}
#articulos section article p{color: #666;padding: 5px;float: left;font: 14px Verdana;}

/*Section Emprender*/

#emprender{
    width: 100%;
    padding: 40px 30px;
}
#emprender h3{
    text-align: center;
}
#emprender img{
    transform: scale(.8);
}
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
    display: block !important;
}
.owl-nav button{
    color: #87ceeb !important;
    margin: 0 100px !important;
    font-size: 50px !important;
}
.owl-dots{
    display: none;
}
.owl-nav button:hover{
    background: none !important;
}

/*Section Contacto*/

#contacto{
    width: 100%;
    padding: 30px 0px 20px 0px;
}
#contacto div{
    padding: 5px;
}
#contacto div form{
    color:darkcyan;
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: azure;
    padding-bottom: 20px;
    border-radius: 5px;
}
#contacto div form h3{
    padding: 10px 10px 20px 20px;
    text-align: left;
    color: darkcyan;
    font-size: 28px;
}
#contacto div form p{
    padding-bottom: 20px;
}
#contacto div form textarea{
    width: 95%;
    height: 250px;
    font: 14px Verdana;
    border: 1px solid cian;
    margin-bottom: 15px;
    border-radius: 3px;
}
.formulario{
    width: 95%;
    height: 35px;
    font: 14px Verdana;
    border: 1px solid cian;
    margin-bottom: 15px;
    border-radius: 3px;
    padding: 10px;
}
#send{
    cursor: pointer;
    width: 100px;
    height: 40px;
    font-size: 17px;
    font-style: bold;
    border-radius: 5px;
    background-color: darkturquoise;
    color: #fff;
}
#contacto p{
    text-align:left;
    font: 14px verdana;
    height: auto;
    padding: 0px 30px 5px 30px;
    color: darkcyan;
}
#contacto div h2{
    padding: 10px 10px 20px 20px;
    text-align: left;
    color: darkcyan;
    font-size: 22px;
}
#mapa{
    text-align: center;
}
.button-face{
    background: url(../imagenes/rsf.png) no-repeat top;background-size:contain;
    
}
.button-twitter{
    background: url(../imagenes/rst.png) no-repeat top;background-size:contain;
    
}
.button-inst{
    background: url(../imagenes/rsi.png) no-repeat top;background-size:contain;
    
}
[class*="button-"]{
    border-radius: 10px;
    width: 50px;
    height: 50px;
    margin: 0px;
    margin-left: 20px;
    margin-right: 20px;
    cursor: pointer;
}

/*Section footer*/
footer{width: 100%;background: #666;text-align: center;}
footer p{color: #fff;padding: 0px 10px 0px 10px;font: lighter 14px Verdana;}
footer p a{color: #fff;}


#servicios section a,#articulos section,#articulos section article,header section #menu a, header section #menu,#inicio section a,#inicio section h2,#inicio section p{transition: border .7s, color .7s, width .7s,background .7s,margin .7s,font .7s,opacity .7s;}
 
.main{
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
}
.fila{
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
    clear: both;
    display: table;
}
[class*="col-"]{
    float:left;
	border:0px;
	padding:20px;
}

.col-12{width:100%;}
.col-11{width:91.66666667%;}
.col-10{width:83.33333333%;}
.col-9{width:75%;}
.col-8{width:66.66666667%;}
.col-7{width:58.33333333%;}
.col-6{width:50%;}
.col-5{width:41.66666667%;}
.col-4{width:33.33333333%;}
.col-3{width:25%;}
.col-2{width:16.66666667%;}
.col-1{width:8.33333333%;}