@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Lora');

body {margin:0; background:rgb(240,240,240) url(img/bare-concrete-wall-textures-plain.jpg) 50% 50% fixed; background-size:cover;}
h1{color:rgb(50,165,200); font-family: 'Lora', serif; font-size:2.5em; margin-bottom:10px; text-align:left;}
h2{color:rgb(50,50,50); font-family: 'Lora', serif; font-size:1.6em; text-align: left;}
h2.quote{color:rgb(255,255,255); font-family:'Nunito', sans-serif; font-size:2.5em; font-weight:300; text-shadow:#000 2px 2px 2px; line-height:100%;}
h2.footer{color:rgb(50,165,200); font-size:1.5em;}
h3{color:rgb(50,65,100); font-family:'Nunito', sans-serif; font-size:1.4em; font-weight:500; line-height:120%; text-align: left;}
p{color:rgb(50,50,50); font-family:'Nunito', sans-serif; font-size:1.1em; line-height:135%; }
p.footer{color:#FFF; font-size:1.0em;}

a:link, a:active, a:visited{color:rgba(50,165,200,0.85); font-family:'Nunito', sans-serif; font-weight:300; text-decoration:none; border-bottom:dotted 1px;}
a:hover{color:rgba(50,165,200,1.00);}

a.footer:link, a.footer:active, a.footer:visited{color:#FFF; font-family:'Nunito', sans-serif; text-decoration:none; border:none; font-size:1.00em;}
a.footer:hover{color:rgb(50,165,200);}

ul, li{color:rgba(50,50,50); font-family:'Nunito', sans-serif; font-size:1.1em; line-height:135%;}

input, textarea{background:rgba(50,165,200,1.00); border:none; border-radius:5px; color:rgba(255,255,255,1.00); font-family:'Nunito', sans-serif; font-size:1.2em; line-height:135%; padding:5px; margin:10px auto;}
input.boton{background:rgba(5,10,70,0.85); border-radius:5px; color:rgb(255,255,255); font-family:'Nunito', sans-serif; font-size:1.3em; text-align:center; text-shadow:rgba(0,0,0,0.65) 1px 1px 2px; padding:20px 35px; width:auto; margin:10px; }
input.boton:hover{background:rgba()5,10,70,1.00;}

/* MENÚ RESPONSIVO */
ul.topnav li {float:left; font-family:'Nunito', sans-serif; font-weight:300;}
ul.topnav li.icon {display: none;}
ul.topnav li a {display:inline-block; color:rgb(5,10,70); text-align: center; padding:12px 16px; text-decoration:none; transition:0.8s; font-size: 1em; border:none; font-family: 'Lora', serif;}
ul.topnav li a:hover {border-bottom:rgb(50,165,200) solid 1px; color:rgb(255,255,255); background:rgba(50,165,200,1.00);}

/* HEADER CHANGING */
header{width:100%; position:fixed; z-index:10;}
header.large{height:100px; background:rgb(255,255,255,1.00); transition:0.8s; box-shadow:rgba(0,0,0,0.5) 0px 0px 5px;}
header.large img{height:80px; transition:0.8s;}
header.large h2.logo{color:#FFF; font-family:'Nunito', sans-serif; font-size:1.4em; font-weight:lighter; margin:40px 8px 0px; transition:0.8s;}  
header.large #logo_box{display:block; float:left; margin:-20px 50px 0px 20px;}
header.large ul.topnav{list-style-type:none; padding:5px; margin-top:20px; overflow:hidden; z-index:1000;}

header.small{height:60px; background:rgba(255,255,255,1.00); transition:0.8s; box-shadow:rgba(0,0,0,0.8) 0px 0px 5px;}
header.small img{height:40px; margin-top:-22px; transition:0.8s;}
header.small h2.logo{color:#FFF; font-family:'Nunito', sans-serif; font-size:1.2em; font-weight:lighter; margin:0px; transition:0.8s;}
header.small #logo_box{display:block; float:left; margin:18px 50px 0px 20px;}
header.small ul.topnav{list-style-type:none; padding:5px; margin-top:2px; overflow:hidden; z-index:1000;}

#logo_img{float:left; margin:10px;}
#logo_txt{float:left;}
#box_video{left:0%; margin-left:0px; width:100%; position:fixed; top:0; height:100%; overflow:hidden; z-index:-100;}
#box_text{top:0; z-index:-99; padding:15%; width:70%; height:70%;}
#scrolldown{background:url('http://www.byt.mx/img/click.png') 50% 50% no-repeat; background-size:40px; height:40px; width:40px; padding:15px; margin:5px; border-radius:50%; border:#FFF solid 3px; margin-top:50px; opacity:0.5; filter: alpha(opacity=50); display:block; }
#scrolldown:hover{background:rgba(50,165,200,0.65) url('http://www.byt.mx/img/click.png') 50% 50% no-repeat; background-size:40px; height:50px; width:50px; padding:20px; margin:5px; border-radius:50%; border:#FFF solid 5px; margin-top:40px; opacity:0.8; filter: alpha(opacity=80); display:block; transition:0.8s;}

#contenido{width:60%; margin:0px 10%; padding:120px 10% 50px; background:rgba(255,255,255,0.9); text-align:justify; min-height:700px; }
#footer{width:95%; padding:10px 2.5% 50px; background:rgb(3,11,68); text-align:left; border-top:rgba(50,165,200,1.00) solid 2px;}

.servicio{padding:0px 35px; margin:10px 15px; background:rgb(255,255,255); border:rgba(50,65,100,0.8) solid 1px;}

@media screen and (max-width:1090px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li{display: none;}
  ul.topnav li.icon {float:right; display: inline-block;}
	
  h2.quote{font-size:1.6em; line-height:135%;}
  
  header.large img{height:50px; transition:0.8s;}
  header.large h2.logo{font-size:0.8em; margin:0px;}
  header.large #logo_box{display:block; float:left; margin:0px;}
  header.large #logo_img{float:left; margin:5px;}
  header.large #logo_txt{float:left; margin:25px 10px 0px 5px;}
  
  header.small img{height:40px; margin:10px; transition:0.8s;}
  header.small h2.logo{font-size:0.7em; margin:4px 0px 0px 0px; transition:0.8s;}
  header.small #logo_box{display:block; float:left; margin:0px;}
  header.small #logo_img{float:left; margin:5px;}
  header.small #logo_txt{float:left; margin:25px 10px 0px 5px;}
	
  #contenido{width:80%; margin:0px 5%; padding:120px 5% 50px; background:rgba(255,255,255,0.9); text-align:justify; min-height:700px; }
  
}

@media screen and (max-width:1090px) {
  header.large ul.topnav{list-style-type:none; padding:0px; margin-top:0px; overflow:hidden; z-index:1000; float: right; max-width: 180px;}
  header.small ul.topnav{list-style-type:none; padding:0px; margin-top:0px; overflow:hidden; z-index:1000;}
 
  ul.topnav.responsive{position:relative;}
  ul.topnav.responsive li.icon{position: absolute; right:0; top:0;}
  ul.topnav.responsive li{float: none; display: inline;}
  ul.topnav.responsive li a{display: block; text-align:left; background:rgba(255,255,255,0.85);}
  ul.topnav.responsive li a:hover{background:rgba(255,255,255,1.00); color:rgb(0,0,0); }
}