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

@import url('https://fonts.googleapis.com/css?family=Roboto:900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700');

@font-face {
  font-family:'Gotham Black';
  src: url('fonts/Gotham-Black.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family:'Gotham Medium';
  src: url('fonts/Gotham-Medium.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family:'Gotham Book';
  src: url('fonts/Gotham-Book.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family:'Tusker';
  src: url('fonts/TuskerGrotesk-6600Semibold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

body{ background:url(img/bkgd-cloud.png) 50% 50% fixed; background-size:cover;  margin:0px 0px 100px;}

h1{font-family:'Gotham Black', sans-serif; font-style:italic; color:rgb(24,50,125); font-size:1.8em; text-align:left; text-transform:uppercase; line-height:120%; }
h2{font-family:'Gotham Black', sans-serif; font-style:italic; color:rgba(8,62,157,1.00); font-size:1.3em; text-align:left; }
h3{font-family:'Gotham Black', sans-serif; font-style:italic; color:rgb(50,50,50); font-size:0.9em; letter-spacing:0px; line-height:110%; margin:10px 0px; text-transform:uppercase; }
h3.focus3{font-family:'Gotham Black', sans-serif; font-style:italic; color:rgb(0,0,0); font-weight:900; font-size:1.5em; border-left:5px solid rgba(0,254,254,1.00); padding-left: 10px;}
p{font-family: 'Gotham Book', sans-serif; color: rgba(0,0,0,1.00); font-size:1.0em; line-height: 150%; }
b{font-family:'Gotham Black', sans-serif;}
p.etiqueta{font-size:0.9em; margin:15px 0px 0px; color:rgb(100,100,100); }
label{font-family:'Gotham Medium', sans-serif; font-size:0.8em; color:rgb(150,150,150); }
p.txt-tip{color:white; font-size:1.2em; font-style:italic; font-weight:800; line-height:100%; text-align:center;}

span.alert{background:rgb(255,199,3); color:rgb(24,50,125); font-weight:bolder; padding:0px 5px;}

legend{font-family:'Gotham Black', sans-serif; font-style:italic; color:rgba(8,62,157,1.00); font-size:1.2em; font-weight:700; background:rgb(255,255,255); padding:5px 15px;  border-radius:10px; text-align:left; }
fieldset{background:linear-gradient(-78deg, rgba(252,255,255,1.00) 20%, rgba(255,255,255,1.00) 63%, rgba(250,255,255,1.00) 100%); padding:20px 5%; border-radius:15px; width:90%; margin:20px auto; }

fieldset.login{width:90%; max-width:500px; float:right; background:rgba(255,255,255,1.00); margin:30px 2.5%; box-shadow:rgba(0,0,0,0.35) 5px 5px 5px; padding:10px 2.5%; }

ul li{font-family:'Gotham Book', sans-serif; font-style:italic; color: rgba(0,0,0,1.00); font-size:1.0em; line-height: 165%; }
ol li{font-family:'Gotham Book', sans-serif; font-style:italic; rgba(0,0,0,1.00); font-size:1.0em; line-height: 165%; }

a:link, a:active, a:visited{font-family:'Gotham Black', sans-serif; font-style:italic; color:rgba(53,131,255,1.00); text-transform:uppercase; text-decoration:none;}

a.footer:link, a.footer:active, a.footer:visited{font-family: 'Montserrat', sans-serif; color:rgba(255,255,255,0.65); font-size: 0.8em;}

input, textarea, select{background:rgba(235,235,235,1.00); color: rgba(0,0,0,1.00); font-family: 'Gotham Book', sans-serif; font-size:1.3em; padding:15px; margin:5px 0px; border:none; width:90%; max-width:500px; border-radius:10px;}
input:hover, textarea:hover{background:rgba(255,255,255,1.00); box-shadow:rgba(100,100,100,0.5) 0px 0px 5px;}
input.boton{background:rgba(8,62,157,1.00); color:rgb(255,255,255,1.00); border: none; font-family: 'Gotham Book', sans-serif; font-size:1.2em; text-transform:uppercase; padding:10px 25px; boder:none; margin:5px auto; width: 100%;}
input.boton:hover{background:rgba(255,255,255,1.00); color:rgba(38,37,158,1.00);}
input.answer{width:auto;}

button{background:rgba(34,136,228,1.00); color:rgb(255,255,255,1.00); border: none; font-family:'Gotham Black', sans-serif; font-size:1.2em; text-transform:uppercase; padding:10px 25px; boder:none; margin:5px auto; width: 100%;}
button.inscrito{background:rgba(0,191,0,1.00);}
button:hover{background:rgba(255,255,255,1.00); color:rgba(38,37,158,1.00);}

/* TABLAS */
table{overflow-x:auto; width:100%;}
table thead th{font-family: 'Gotham Book', sans-serif; font-size:1.2em; color:#FFF; background:rgba(25,75,200,1.00); border:none; padding:10px 20px; text-align:center; }
table tr td{font-family: 'Gotham Book', sans-serif; font-size:1.00em; color:rgba(0,0,0,1.00); border:none; vertical-align:top; padding:10px; text-align:left; }
table tfoot td{font-family: 'Gotham Book', sans-serif; background:rgba(25,75,200,1.00); border:none; color:rgba(255,255,255,1.00); font-size:1em; padding:5px; }
tr:nth-child(even) {background:rgba(51,51,51,0.15);}
tr:nth-child(odd) {background:rgba(51,51,51,0.05);}

/* MENÚ RESPONSIVO */
ul.topnav li {float:left; font-family: 'Gotham Book', sans-serif; }
ul.topnav li.icon {display: none;}
ul.topnav li a {display:inline-block; padding:10px; font-size:0.9em; text-align:center; text-decoration:none;}
ul.topnav li a:hover {padding:10px;}

/* MENÚ DESPLEGABLE */
ul.menu{padding:0px; list-style: none; margin-top:10px; text-align:right;}
ul li.menu{display:inline-block; margin:0px; position:relative; font-family:'Gotham Medium', sans-serif; font-style:italic; font-weight:800; font-size:0.9em; 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(1,1,1,0.85); }
ul li.menu a:hover{color:rgba(255,255,255,1.00); background:rgba(15,28,56,1.00);}

ul li.menu ul.dropdown{min-width:300px; /*Set width of the dropdown*/ margin:0px; padding:0px; display:none; position: absolute; z-index: 999; left: 0; text-align:left; color:rgba(0,0,0,1.00); background:rgba(255,255,255,0.85); box-shadow:rgba(0,0,0,0.65) 3px 3px 3px;}
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(1,1,1,1.00); font-size: 1.0em; padding:0px; margin:0px; }
ul li.menu ul.dropdown li a {padding:5px; text-align:left; background:rgba(255,255,255,1.00);} 
ul li.menu ul.dropdown li a:hover{display: block; color:rgba(255,255,255,1.00); background:rgba(15,28,56,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; margin:0px;}

header.large{height:65px; background:rgba(255,255,255,0.95); backdrop-filter:saturate(180%) blur(20px); box-shadow: rgba(0,0,0,0.75) 0px 0px 10px; transition:1.2s;}
header.large img.logo{margin:0px; float: left; height:50px; transition:1.2s;}
header.large ul.topnav{list-style-type:none; padding:5px; margin-top:0px; overflow:hidden; z-index:1000; float:left; transition:1.2s;}
header.large ul.topnav li a {color:rgba(1,1,1,0.85); border:rgba(1,1,1,0.0) solid 1px; transition:1.2s;}
header.large ul.topnav li a:hover {color:rgba(1,1,1,1.00); background:rgba(255,255,255,1.00); border:rgba(1,1,1,1.00) solid 1px; transition:1.2s;}

header.small{height:60px; background:rgba(255,255,255,1); transition:1.2s; box-shadow:rgba(0,0,0,0.5) 0px 0px 5px; }
header.small img.logo{margin:7px 15px; float: left; height:35px; transition:1.2s;}
header.small ul.topnav{list-style-type:none; padding:5px; margin-top:5px; overflow:hidden; z-index:1000; float:left; transition:1.2s;}
header.small ul.topnav li a {color:rgba(1,1,1,0.85); border:rgba(1,1,1,0.0) solid 1px; transition:1.2s;}
header.small ul.topnav li a:hover {color:rgba(1,1,1,1.00); background:rgba(255,255,255,1.00); border:rgba(1,1,1,1.00) solid 1px; transition:1.2s;}

/* CLASSES CURSOS */
.temarioitem{font-size:0.85em; font-family:'Montserrat', sans-serif; color: rgba(0,0,0,1.00); font-weight:400; line-height:120%; text-align:left; margin:8px 0px; padding:5px 10px; border-left:rgb(8,62,157) solid 15px; border-bottom:rgb(50,50,50) dotted 1px; }
.temarioitemactive { font-size:0.85em; font-family:'Montserrat', sans-serif; color: rgba(255,255,255,1.00); font-weight:400; line-height:120%; text-align:left; margin:8px 0px; padding:5px 10px; background:rgba(8,62,157,0.50); border-left:rgb(8,62,157) solid 15px; border-bottom:rgb(50,50,50) dotted 1px; }

.categoria_tile{width:300px; margin:5px; padding:5px; float:left; display:block; background:rgb(255,255,255); border-radius:10px; box-shadow:rgba(0,0,0,0.5) 5px 5px 5px;}
.categoria_tile_inside{width:240px; height:270px; margin:10px; padding:10px 20px; float:left; display:block; background:rgb(255,255,255); border:rgba(24,50,125,0.85) solid 2px; border-radius:10px; }
.elemento_desk{display:block;}
.elemento_mobi{display:none;}

video.bienvenida{background:rgb(0,0,0); border-radius:5px; box-shadow:rgba(0,0,0,0.5) 5px 5px 5px; width:640px; float:left; margin:auto; display:block;}

#contenido{margin:0px auto 50px; padding-top:100px; width:1280px; text-align:left;}
#banner{background:linear-gradient(100deg, rgba(24,72,192,1.00) 0%, rgba(24,50,125,1.00) 100%); border-radius:10px; width:480px; float:right; margin:0px auto; padding:10px 5%; box-shadow:rgba(0,0,0,0.5) 5px 5px 5px;}
#logo-tip{width:310px; margin:35px auto;}

#texto{width:96%; max-width:1440px; text-align:justify; background:rgba(255,255,255,1.00); box-shadow: rgba(100,100,100,0.65) 0px 0px 5px; transition:1.2s; padding:20px 2%; border-radius:10px;}

#portada-curso{width:40%; max-width:500px; float:left; margin:20px 5% 0px 0px; }
#introduccion-curso{width:55%; max-width:950px; float:left;}

#temario{width:40%; max-width:500px; float:left; margin-left:5%;}
#contenido-unidad{width:55%; max-width:950px; float:left; margin-top:-20px;}
#youtube{border-radius:10px; box-shadow:rgba(100,100,100,0.5) 5px 5px 5px; width:100%; height:465px;}

#footer{width:90%; padding:30px 5%; margin-top:50px; background:rgb(47,47,47); text-align:left;}

#responsive{ display:none; }
#scrolldown{ display:block; width: 90%; max-width: 1440px; }

@media screen and (max-width:1400px) {
    #contenido{margin:0px auto 50px; padding-top:100px; width:1080px; text-align:left;}
    #banner{width:430px;}
    #logo-tip{width:240px; margin:20px auto;}
    .categoria_tile{width:340px;}
    video.bienvenida{width:520px;}
    p.txt-tip{font-size:1.1em; line-height:100%;}
}

@media screen and (max-width:1280px) {
    #contenido{width:1020px;}
	#banner{width:410px;}
	#logo-tip{width:210px; margin:20px auto;}
	.categoria_tile{width:320px;}
	video.bienvenida{width:480px;}
	p.txt-tip{font-size:1.0em; line-height:100%;}
}

@media screen and (max-width:1080px) {
    #contenido{margin:0px auto 50px; padding-top:100px; width:700px; text-align:left;}
    #banner{width:650px; padding:25px;}
    #logo-tip{width:380px; margin:50px auto;}
    video.bienvenida{width:700px; margin-bottom:35px;}
    p.txt-tip{font-size:1.2em; line-height:100%;}
}

@media screen and (max-width:720px) {
	/* MENÚ MOVIL */
	#responsive{ display:block; }
	#scrolldown{ display:none; }
    
    #contenido{margin:0px auto 50px; padding-top:100px; width:340px; text-align:left;}
    #banner{width:290px;}
    #logo-tip{width:290px; margin:10px auto;}
    
	#portada-curso{width:90%; float:none; margin:10px auto;}
	#introduccion-curso{width:90%; float:none; margin:10px auto;}
	#temario{width:90%; float:none; margin:10px auto;}
	#contenido-unidad{width:90%; float:none; margin:auto;}
	
    .elemento_desk{display:none;}
    .elemento_mobi{display:block;}
    .categoria_tile{width:320px;}
	
	body{background:url(img/bkgd-cloud-movil.jpg) fixed; background-size:1080px; }
	
	header.large img.logo{margin:5px; float: left; height:65px; transition:1.2s;}
	header.small img.logo{margin:17px 5px 5px; float: left; height:35px; transition:1.2s;}
	
	fieldset.login{width:80%; max-width:500px; float:right; background:rgba(255,255,255,1.00); margin:30px 5%; box-shadow:rgba(0,0,0,0.35) 5px 5px 5px; padding:10px 5%; }    
    
    video.bienvenida{width:340px;}

    h1{font-size:1.2em; line-height:110%; }
    h2{font-size:1.0em; line-height:110%; }
    button{font-size:1.0em;}
    
    p.txt-tip{font-size:1.0em; line-height:100%;}
    
	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 ul.topnav{list-style-type:none; padding:5px; margin:5px; overflow:hidden; z-index:1000; float: right; width:160px; }
	header.large img.logo{margin:10px; float: left; height:50px; transition:1.2s;}
	
	header.small{height:60px;}
	header.small ul.topnav{list-style-type:none; padding:0px; margin-top:0px; overflow:hidden; z-index:1000; float: right; width:160px;}
		
	ul.topnav.responsive{position:relative; background:rgba(255,255,255,0.85); border-radius:15px; box-shadow:rgba(0,0,0,0.65) 0px 0px 8px; }
	ul.topnav.responsive li.icon{position: unset; right:0; top:0;}
	ul.topnav.responsive li{float: none; display: inline; font-size:1em;}
	ul.topnav.responsive li a{display: block; text-align:left; background:rgba(255,255,255,1.00); margin:5px; }	
	ul.topnav.responsive li a:hover{background:rgba(255,255,255,1.00); border:#000 solid 1px; }
}