@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');
@charset "utf-8";

/* Reset */

*{margin:0;padding:0;box-sizing:border-box;font-family: 'Raleway', sans-serif;}
*, body, h1, h2, h3, h4, h5, h6,p , span, a,nav, ul, li, img,section{padding:0 auto;margin:0 auto;box-sizing:border-box;}
.contenedor{width:90%;height:auto;background:none;} 

.scroll-top {width:40px;height:40px;opacity:0.3;position:fixed;bottom:50px;right:30px;display:none;text-indent:-9999px;z-index:9999;background: url('../Img/arriba.png') no-repeat;}
.scroll-top:hover{opacity: 0.8;transition: 0.3s all;}

.share a{width:70px;height:70px;position:fixed;top:50px;right:30px;text-indent:-9999px;z-index:9999;background: url('../Img/share.png') no-repeat;}
.share a:hover{opacity: 0.8;transition: 0.3s all;}
.oculto{height:60px;width:100%;}

section{width:100%;box-sizing:border-box;position:relative;display:block;padding:5% 0;text-align:center;}
section h1{font-size:30px;}
section p{margin-bottom:3%;}
.service{width:100%;display:inline-block;vertical-align:top;}
.service img{width:100%;height:auto;display:block;}

.hover{display:none;background:white;border-radius:5px;overflow-x:hidden;overflow-y:hidden;width:100%;padding:0 0 3% 0}
.hover img{width:100%;height:auto;display:block;}
.hover .service{padding:2% 3%;}
.hover .content{width:90%;height:auto;}
.hover h1{font-size:20px;margin:3% 0 1% ;}
.hover p{text-align:left;}
.hover p a{color:black;text-decoration:none;font-weight:bold;}

/* Social */

.social.large{ opacity:0;}
.social.small{ opacity:1;}

.social{position:fixed;left:0;top:300px;z-index:999;display:block;transition: all 1s;}
.social ul{list-style:none;}
.social ul li a{display: inline-block;color:#fff;background:#000;padding:10px 10px;text-decoration:none;transition:all 500ms ease;width:35px;}
 
.social ul li .fa-facebook-f{background:#3b5998;}
.social ul li .fa-instagram{background:#125688;}
.social ul li .fa-youtube{background:#bb0000;}
.social ul li .fa-share-alt{background:#400090;}
.social ul li .fa-address-book{background:#0051be;}
.social ul li a:hover{background: #000;padding: 10px 15px;width:45px;}

.compartir{display:none;background:white;border-radius:5px;overflow-x:hidden;overflow-y:hidden;width:95%;}
.compartir h1{font-size:20px;margin-bottom:3%;padding-bottom:3%;border-bottom:1px solid gray;}
.compartir p{width:90%;padding:1% 3%;border-radius:5px;display:block;margin:2% auto;transition:all 500ms ease;}
.compartir p a{color:white;text-decoration:none;}

.whatsapp{background:#25d366;} .whatsapp:hover{background:#075e54;}
.facebook{background:#4c66a4} .facebook:hover{background:#374974}
.twitter{background:#55acee} .twitter:hover{background:#4582b1}
.pinterest{background:#d9534f} .pinterest:hover{background:#9d403e}
.google{background:#d9534f} .google:hover{background:#a7413e}
.linkedin{background:#0077b5} .linkedin:hover{background:#005988}
.email{background:#9A9A9A} .email:hover{background:#696969}
.telegram{background:#38aee4} .telegram:hover{background:#2b7da2}

/* Menu */

header{height:60px;padding:0;background:#202728;justify-content:flex-end;align-items:center;position:fixed;width:100%;z-index:1000}
#btn-menu{display:none;}
header .fa-bars{font-size:35px;cursor:pointer;display:block;float:right;margin-top:10px;color:white;}

.menu{position:absolute;width:60%;top:60px;left:0;transform:translateX(-100%);transition:all 0.3s;}
#btn-menu:checked ~ .menu{transform:translateX(0%);}

.logo{display:block;position:absolute;}
.logo img{width:170px;height:auto;margin-top:5px;}

.img_logo{display:none;} 
.menu ul{display:block;background:rgba(0,0,0,.9);padding:5px;height:100vh;}
.menu ul li{padding:10px;}
.menu a{display:block;text-decoration:none;color:white;}
.menu ul li:hover{background:#0051be;}

/* Slide/ Banner */

#videobg{position:relative;height:0;padding-bottom:56.25%;}
#videobg video{position:absolute;width:100%;height:100%;left:0}
.ytplayer{pointer-events:none;position:absolute;}

/* Empresa */

#empresa .p1{font-size:40px;padding:0% 2%}
#empresa .p2{font-size:16px;padding:2%;margin-bottom:0;}

/* Hosting */

#hosting{background:#3498db;color:white;}

/* Servicios */

#servicios, #clientes{background:#2c87c3;color:white;}
#servicios .service{padding:2% 0%}
#servicios .service h1{font-size:18px;padding:1%}
#servicios .service img{width:40%;height:auto;}
#servicios .service p{font-size:16px;padding:1% 2%;}
#servicios .service a{color:white;padding:1% 3%;border:1px solid white;text-decoration:none;transition:all .5s;}
#servicios .service a:hover{background:white;border:1px solid white;color:black;}

/* Portfolio */

#portfolio .service{overflow:hidden;position:relative;}
#portfolio .service img {transition:all .9s ease;}
#portfolio .service:hover img {position:relative;transform:scale(1.25);}

#portfolio .service .over{display:none;width:100%;height:100%;position:absolute;top:0;left:0;bottom:0;
z-index:10;background: rgba(0,0,0,.5);padding:17% 0%}
#portfolio .service:hover .over{display:block;text-align:center;color:white;}
.over h2, .over p, .redes a{padding:1% 0%}
.over h2{font-size:20px;}
.redes a{color:white;text-decoration:none}

/* Paquetes */

#paquetes ul{display:block;border:1px solid black;margin:0 4%;background:white;border-radius:10px;}
#paquetes .service{margin:2% 0;}
#paquetes ul li{display:block;text-align:Center;}
#paquetes ul li h1{background:#3498db;color:white;border-radius:10px 10px 0px 0px;font-size:20px;}
#paquetes ul li h2{background:#2c87c3;color:white;font-size:19px;}
#paquetes ul li h1, #paquetes ul li h2, #paquetes ul li p {padding:4% 2%;}
#paquetes ul li h2 a{text-decoration:none;color:white;}
#paquetes ul li p a{text-decoration:none;color:black;}

/* Clientes */

.content-slider li img{width:80%;height:auto;display:block;margin:0 auto;} 
ul{list-style: none outside none;padding-left: 0;margin: 0;}
.demo{width: 100%;}

/* Contacto */

#contacto{background:#3498db;}
#contacto p{margin-bottom:0;}
form{width:90%;height:auto;color:white;margin-top:2%;}
form a{color:white;text-decoration:none;}
form input,form textarea{padding:2% 4%;font-size:16px;outline:none;display:block;margin:0 auto;width:100%;text-align:left;}
form textarea{max-width:100%;width:100%;max-height:200px;height:200px;}
form input[type="submit"]{background:rgba(0,0,0,.6);border:none;color:white;cursor:pointer;transition:all .5s ease;text-align:center;}
form input[type="submit"]:hover{background:rgba(0,0,0,.8);}

/* Footer */

footer{width:100%;padding:3%;}
footer p{text-align:center;font-size:13px;}
footer p a{color:black;outline:none;text-decoration:none;font-size:12px;}

/* Firma Digital */

.parallax{background-repeat:no-repeat;background-position:center center;background-size:cover;background-attachment:fixed;}
.firma{background-image: url("../Img/Banner/firma.jpg");height:auto;padding:150px 0px;}

#firma{padding:0;}
#firma #contacto{display:none;}
#firma ul li{list-style:none;margin:2% auto;width:100%;}
#firma ul li a{display:block;text-decoration:none;color:white;background:#3498db;padding:2% 0;}

@media only screen and (min-width: 800px) {
.service{width:49.5%;}
.service2{width:50%;}
section h1{font-size:40px;}

#empresa .p1{text-align:right;}
#empresa .p2{text-align:left;}

.compartir{width:50%;}
.compartir p{width:45%;display:inline-block;margin:1%}

form{width:60%;}
}

@media only screen and (min-width: 980px) {
.service1{width:33%;}
#firma ul li{width:75%;}
}

@media only screen and (min-width: 1024px) {
.contenedor{width:1024px;}	
.service2{width:25%;}

header{padding:1% 0%;position:fixed;width:100%;margin:0 auto;}
header img{width:170px; height:auto;}
header .fa-bars{display:none;}
.oculto2{width:100%;height:0px;}

.logo{display:none;}
.img_logo{display:block;margin-top:-10px;} 

.menu{width:100%;position:relative;top:0;transform:translateX(0%);}
.menu ul{display:flex;list-style:none;background:none;height:0px;}
.menu ul li{padding:0px;}
.menu a{color:white;-webkit-transition:all .9s ease;-moz-transition:all .9s ease;-o-transition:all .9s ease;-ms-transition:all .9s ease;}
.menu a:hover{color:#2c87c3;}
.menu ul li:hover{background:none;}	

#empresa .p1{font-size:52px;}
#paquetes ul li h1{font-size:25px;}

}

@media only screen and (min-width: 1280px) {
	.contenedor{width:1280px;}
}