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

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {margin:0; background:url(img/byt_gradient_wallpaper_1920x1080.webp) 50% 50% fixed no-repeat; background-size:cover; /*linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00));*/ }
h1{color:rgba(0,0,0,1.00); font-family: "Montserrat", serif; font-size:3.8em; font-weight:800; line-height: 135%; margin-bottom:10px; text-align: left;}
h1.slogan{font-family: 'Montserrat', serif; color:#FFF; font-weight:800; font-size:4.5em; text-align:center;line-height: 90%;}
h2{color:rgba(0,160,255,1.00); font-family: "Montserrat", serif; font-size:1.8em; font-weight:800; line-height:100%; margin:50px 0px 20px; text-align:left;}
h3{display:none;}
h2.quote{color:#FFF; font-family: "Montserrat", serif; font-size:3.8em; font-weight:800; line-height:100%; text-align: left; text-shadow:none;}

p{color:#000; font-family: "Montserrat", serif; font-size:1.0em; font-weight:300; line-height:150%;}
p.medium{color:#444; font-family: "Montserrat", serif; font-size:1.4em; font-weight:600; line-height:150%;}
p.quote{color:#FFF; font-family:'Montserrat', serif; font-size:1.5em; font-weight:600; line-height:135%; text-shadow:none; text-align: justify;}
p.home{color:#FFF; font-family: "Montserrat", serif; font-size:1.0em; font-weight:300; line-height:135%; text-shadow:none; text-align: justify;}
p.curso{color:#444; font-family: "Montserrat", serif; font-size:1.2em; font-weight:300; line-height:135%; }
/*p.curso{color:#FFF; font-family: "Montserrat", serif; font-size:1.2em; font-weight:300; line-height:135%; text-shadow:#000 1px 1px 1px; }*/
p.footermenutitle{color:rgb(0,160,255); font-family: "Montserrat", serif; font-size:1.0em; text-shadow:none; font-weight:600; text-transform:uppercase;}

b{font-weight: 800;}

a:link, a:active, a:visited{color:rgba(255,255,255,1.00); font-family: "Montserrat", serif; font-weight:300; text-decoration:none; border-bottom:dotted 1px; background:none; }
a:hover{background:rgba(80,140,250,1.00); border-radius: 0px; }

a.footer:link, a.footer:active, a.footer:visited{color:#FFF; font-family: "Montserrat", serif; font-weight:300; text-shadow:none; text-decoration:none; border:none; font-size:0.9em;}
a.footer:hover{background:rgba(80,140,250,1.00);}

ul, li{color:rgba(100,100,100); font-family: "Montserrat", serif; font-size:1.0em; font-weight:300; line-height:135%; margin:0px;}

ul.hosting, li.hosting{color:#FFF;}

ol, li{color:rgba(100,100,100); font-family: "Montserrat", serif; font-size:1.0em; font-weight:300; line-height:135%; margin:5px;}

legend{color:rgb(255,255,255); font-family: "Montserrat", serif; font-size:1.6em; font-weight:800; line-height:135%; }

input, textarea {background:none; border:rgba(80,140,250,1.00) 2px solid; color:rgba(255,255,255,1.00); font-family: "Montserrat", serif; font-size:1.2em; font-weight:300; line-height:110%; text-align:left; padding:15px; border-radius: 15px;}

input.boton{background:rgba(255,155,0,1.00); border:none; border-radius:10px; color:#FFF; font-family: "Montserrat", serif; font-size:1.5em; font-weight:400; line-height:100%; text-align:center; padding:10px 25px; margin:10px auto; width:100%; max-width:320px;}
input.boton:hover{background:rgba(45,52,62,1.00); color: rgba(101,183,229,1.00);}

input.botonyellow{background:rgba(0,160,255,1.00); border:outset; border-radius:3px; color:#FFF; font-family: "Montserrat", serif; font-size:1.0em; font-weight:400; line-height:135%; text-align:left; padding:5px 10px; margin:10px 5px; width:auto; text-transform:uppercase;}

/* TABLAS */
table{overflow-x:auto; width:100%; max-width:980px;}
table thead th{font-family:'Montserrat', serif; font-size:1.20em; font-weight:500; color:#FFF; background:rgba(0,160,255,1.00); border:none; padding:5px 15px; text-align:center; border-radius:5px;}
table tr td{font-family:'Montserrat', serif; font-size:1.00em; font-weight:300; color:rgba(255,255,255,1.00); border:none; vertical-align:top; padding:10px; text-align:center; border-radius:5px; }
table tfoot td{font-family:'Montserrat', serif; background:rgba(0,0,0,1.00); border:none; color:#FFF; font-weight:300; font-size:1em; padding:5px; }
tr:nth-child(even) {background:rgba(34,34,34,0.10);}
tr:nth-child(odd) {background:rgba(0,34,34,0.05);}

.producto{background:linear-gradient(150deg, rgba(255,0,150,1.00) 0%, rgba(255,155,0,1.00) 65%); color:#FFF; font-family: "Montserrat", serif; font-size:1.0em; font-weight:800; line-height:100%; text-align:center; float:left; transition:0.8s; width:100%; max-width:175px; margin:10px; padding:10px; box-shadow: rgba(0,0,0,0.30) 3px 3px 5px; border-radius: 10px;}
.producto:hover{background:rgba(45,52,62,1.00); color: rgba(101,183,229,1.00); transition:0.8s; box-shadow: rgba(0,0,0,0.50) 2px 2px 8px;}

.video_thumb{background:url(academy/cursos/img/video_thumb.png); background-size:300px; float:left; font-family:'Montserrat', serif; font-size:0.95em; font-weight:300; margin:5px; border:rgb(255,255,255) solid 3px; width:165px; height:110px; padding:40px 20px 20px 115px; text-align: center;}
.video_thumb:hover{background:url(academy/cursos/img/video_thumb_hover.png); background-size:300px;}
.cursobox{background:rgba(0,0,0,0.65); border:#FFF solid 2px; border-radius:10px; color:#FFF; font-family: "Montserrat", serif; text-align:left; text-shadow:#000 2px 2px 2px; padding:5px 2%; width:95%; max-width:480px; margin:10px 10px 10px 0px; float:left;}
.img_box{background:#a79a0c url(img/box_bkgd.jpg) 50% 50%; background-size:cover; /*width:94%; max-width:270px;*/ width:200px; height:200px; margin:10px 3%; border:#FFF solid 2px; border-radius:50%; float:right; text-align:center;}
.img_inside{heigth:100%; max-width:300px; max-height:250px;}

/* MENÚ RESPONSIVO */
ul.topnav li {float:left; font-family: "Montserrat", serif; font-weight:800;}
ul.topnav li.icon {display: none;}
ul.topnav li a {display:inline-block; color:#FFF; text-align: center; padding:12px 16px; text-decoration:none; transition:0.8s; font-size: 1em; border:none; border-radius:0px;}
ul.topnav li a:hover {color:rgba(80,140,250,1.00); background:rgba(45,52,62,1.00); }

/* MENÚ DESPLEGABLE */
ul.menu{ padding:25px 20px 0px; list-style: none; }
ul li.menu{display:inline-block; margin:0px; position:relative; font-family: 'Montserrat', sans-serif; font-weight:300; font-size:1.0em; text-align:left; }
ul li.menu a{display:block; text-decoration:none; margin:0px; padding:12px 25px; transition: all 0.5s ease-in 0s; color:rgba(255,255,255,1.00); border:none; }
ul li.menu a:hover{color:rgba(255,255,255,1.00); background:rgba(80,140,250,1.00);}

ul li.menu ul.dropdown{width:max-content; /*Set width of the dropdown*/ margin:0px; padding:0px; display:none; position:absolute; z-index:999; left:0; text-align:left; color:rgba(255,255,255,1.00); background:rgb(80,140,250); transition:0.8s; }
ul li.menu:hover ul.dropdown{display: block; /* Display the dropdown */ border:rgba(100,100,100,0.35);}
ul li.menu ul.dropdown li{display: block; color:rgba(255,255,255,1.00); font-size: 1.0em; padding:0px; margin:0px; transition:0.8s; }
ul li.menu ul.dropdown li a {padding:10px 20px; text-align:left; background:none;} 
ul li.menu ul.dropdown li a:hover{display: block; color:rgba(255,255,255,1.00); background:rgba(45,52,62,1.00); }

ul.list li.list{font-family: 'Montserrat', sans-serif; }
ol.list li.list{font-family: 'Montserrat', sans-serif; list-style:inside; list-style-type:square; display:inherit;}

/* HEADER CHANGING */
header{width:100%; position:fixed; z-index:10; transition:0.8s; }
header.large{height:90px; background:linear-gradient(0deg, rgba(45,52,62,0.00), rgba(45,52,62,1.00)); transition:1.8s; }
header.large img{height:70px; transition:1.8s;}
header.large h2.logo{color:#FFF; font-family: "Montserrat", serif; font-size:1.4em; font-weight:lighter; margin:28px 8px 0px; transition:1.8s; }  
header.large #logo_box{display:block; float:left; margin:10px 50px 0px 20px;}
header.large ul.topnav{list-style-type:none; padding:5px; margin-top:15px; overflow:hidden; z-index:1000; float:right; }
header.large ul.menu{ padding:25px 20px 0px; list-style: none; transition:1.8s; }

header.small{height:60px; background:linear-gradient(78deg, rgba(101,183,229,1.00) 0%, rgba(80,140,250,1.00) 25%, rgba(0,80,125,1.00) 100%); transition:1.8s; box-shadow: rgba(0,0,0,0.78) 0px 0px 10px; }
header.small img{height:50px; margin-top:-18px; transition:1.8s;}
header.small h2.logo{color:#FFF; font-family: "Montserrat", serif; font-size:1.2em; font-weight:lighter; margin:0px; transition:1.8s;}
header.small #logo_box{display:block; float:left; margin:5px 10px 0px 0px;}
header.small ul.topnav{list-style-type:none; padding:5px; margin-top:2px; overflow:hidden; z-index:1000; float: right;}
header.small ul.menu{ padding:10px 0px; list-style: none; transition:1.8s; }

#responsive{ display:none; }
#scrolldown-menu{ display:block; width: 100%; }

#logo_img{float:left; margin:0px 15px;}
#logo_txt{float:left;}
#box_video{left:0%; margin-left:0px; width:100%; position:fixed; top:0; height:100%; overflow:hidden; z-index:-100; background:rgba(19,47,63,0.25);}
#box_text{top:0; z-index:-99; padding:15%; width:70%; height:70%;}
#scrolldown{background:url('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(255,155,0,1.00) url('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:90%; max-width: 980px; min-height:800px; padding:70px 15%; margin: auto; background:#FFF; }
#menu-servicios{width:90%; max-width:645px; padding:15px 5%; margin:30px 0px; background:rgba(0,0,0,0.0); border-radius:5px;}

#nosotros{width:70%; min-height:800px; padding:70px 15%; /*background:url(img/contacto.jpg) 50% 50% fixed; background-size:cover;*/ text-align:justify; }
#nosotros-txt{/*background:linear-gradient(135deg, rgba(80,140,250,1.00), rgba(125,0,150,1.00));*/ padding: 20px 50px; width: 90%; max-width: 720px; margin: 50px auto;}

#servicios{width:70%; min-height:800px; padding:70px 15%; /*background:url(img/servicios.jpg) 50% 50% fixed; background-size:cover;*/ text-align:center;}
#servicios-txt{/*background:linear-gradient(135deg, rgba(255,0,150,1.00), rgba(255,155,0,1.00));*/ padding: 20px 50px; width: 90%; max-width: 720px; margin: 50px auto;}

#proyectos{width:70%; min-height:800px; padding:70px 15%; background:url(img/proyectos.jpg) 50% 50% fixed; background-size:cover; text-align:center;}
#proyectos-txt{background:linear-gradient(135deg, rgba(125,0,150,1.00), rgba(255,0,150,1.00)); padding: 20px 50px; width: 90%; max-width: 720px; margin: 50px auto;}

#contacto{width:70%; min-height:800px; padding:70px 15%; /*background:url(img/contacto.jpg) 50% 50% fixed; background-size:cover;*/ text-align:center;}
#contacto-txt{/*background:linear-gradient(-45deg, rgba(80,140,250,1.00), rgba(125,0,150,1.00));*/  padding: 20px 50px; width: 90%; max-width: 720px; margin: 50px auto;}

#academy{width:70%; min-height:450px; padding:100px 15%; background:rgb(255,255,255); text-align:justify;}
/*#academy{width:70%; min-height:450px; padding:70px 15%; background:url(https://byt.mx/img/academy.jpg) 50% 50% fixed; background-size:cover; text-align:justify;}*/
#blog{width:85%; min-height:450px; padding:70px 7.5%; background:#FFF; text-align:justify;}
#footer{width:95%; padding:35px 2.5% 50px; background:rgba(45,52,62,1.00); text-align:left;}
#mapa{display:block;}
#whatsapp{display:none;}
#intro_web{display:block; margin-top: 10px;}
#intro_movil{display:none;}
#instructor{margin:20px 0px 25px 25px; border-radius:50%; border:rgba(255,255,255,1.00) solid 2px; width:100%; max-width:180px;}

@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;}
  
  header.large{height:70px;}
  header.large img{height:50px; width:50px; transition:0.8s;}
  header.large h2.logo{font-size:0.8em; margin:18px 0px 0px 0px;}
  header.large #logo_box{display:block; float:left; margin:15px 20px 0px 10px;}
  
  header.small{height:60px;}
  header.small img{height:40px; width:40px; margin-top:-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:25px 20px 0px 10px;}
      
  #box_text{width:90%; height:100%; padding:135px 5%; background:url(img/bkgd_movil.jpg) 50% 0%; text-align:center;}
	/*
  #nosotros{width:90%; height:100%; padding:60px 5% 10px; background:#444; text-align:center;}
  #servicios{width:90%; height:100%; padding:60px 5% 10px; background:#444; text-align:center;}
  #proyectos{width:90%; min-height:300px; padding:60px 5% 10px; background:#FFF; text-align:center;}
  #contacto{width:90%; height:100%; padding:60px 5% 10px; background:#444; text-align:left;}
  #academy{width:90%; padding:60px 5% 10px; background:rgb(255,255,255); text-align:justify;}
  #blog{width:90%; padding:65px 5% 10px; background:#FFF; text-align:justify;}
  #footer{width:90%; padding:10px 5%; background:rgb(0,0,0); text-align:left;}*/
  #mapa{display:none}
  
  .img_box{float:none;}

}

@media screen and (max-width:760px) {
	h1.slogan{font-family:'Montserrat', serif; color:#FFF; font-weight:800; font-size:3.2em; text-align:center; line-height:90%;}
	h2.quote{font-size:2.3em; font-weight:800;}
	p.quote{font-size:1.2em; text-align: left;}
	
	#responsive{ display:block; }
	#scrolldown-menu{ display:none; }
	
	#box_video{display:none;}
	#whatsapp{display:block; padding:15px 4px 12px 42px; color:rgb(255,255,255); background:url(images/whatsapp.png) 50% 50%; height:28px; width:160px; font-family: "Montserrat", serif; font-weight:300;}
	#whatsapp:hover{opacity:0.8; transition:0.8;}
	#intro_web{display:none;}
	#intro_movil{display:block;}
	
	#menu-servicios{width:98%; max-width:435px; padding:10px 1%; margin:auto;}
	
	#nosotros{width:90%; padding:10px 5%; height: auto;  background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	#nosotros-txt{padding:15px 5%; width: 90%; max-width: 720px; margin:20px auto;}
	
	#servicios{width:90%; padding:10px 5%; height: auto; background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	#servicios-txt{padding:15px 5%; width: 90%; max-width: 720px; margin:20px auto;}
	
	#proyectos{width:90%; padding:10px 5%; background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	#proyectos-txt{padding:15px 5%; width: 90%; max-width: 720px; margin:20px auto;}
	
	#contacto{width:90%; padding:10px 5%; background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	#contacto-txt{padding:15px 5%; width: 90%; max-width: 720px; margin:20px auto;}
	
	#academy{width:90%; padding:10px 5%; background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	
	#blog{width:90%; padding:10px 5%; background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	
	.producto{font-size:0.8em; font-weight:600; max-width:125px; margin:5px; padding:5px;}
	
	header.large ul.topnav{list-style-type:none; padding:0px; margin-top:0px; overflow:hidden; z-index:1000; width: 165px;}
	header.small ul.topnav{list-style-type:none; padding:0px; margin-top:0px; overflow:hidden; z-index:1000; width: 165px;}
 
	h1{font-size:2.1em;}
	h2{font-size:1.5em;}
	h3{font-size:1.2em; }
	
	ul.topnav.responsive{position:relative;}
	ul.topnav.responsive li.icon{position: unset; right:0; top:0;}
	ul.topnav.responsive li{float:none; display:inline; margin:0px;}
	ul.topnav.responsive li a{display: block; text-align:left; background:rgba(80,140,250,1.00); color:rgba(255,255,255,1.00); }
	ul.topnav.responsive li a:hover{background:rgba(45,52,62,1.00); color: rgba(80,140,250,1.00); }
	
	ul, li { color:rgb(34,34,34); }
	ol, li { color:rgb(34,34,34); }
}

@media screen and (max-width:480px) {
    body {background-size:1300px; background-position:top;}
    
    #box_text{width:90%; height:100%; padding:165px 5%; background:url(img/bkgd_movil.jpg) 50% 0%; text-align:center;}
	#whatsapp{display:block; padding:15px 4px 12px 42px; color:rgb(255,255,255); background:url(images/whatsapp.png) 50% 50%; height:28px; width:160px; font-family: "Montserrat", serif; font-weight:300;}
	#whatsapp:hover{opacity:0.8; transition:0.8;}
	#intro_web{display:none;}
	#intro_movil{display:block;}
	#instructor{margin:5px 15%; border-radius:50%; border:rgba(255,255,255,1.00) solid 2px; width:70%; max-width:480px;}
	#menu-servicios{width:98%; max-width:290px; padding:10px 1%; margin:auto;}

}