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

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

body{margin: 0; background:url(img/bkgd-light.webp) 50% 50% fixed no-repeat; background-size:cover;}
h1{font-family: 'Montserrat', sans-serif; font-weight: 900; color: rgb(30,43,110); text-align: left; line-height: 100%; }
h2{font-family: 'Montserrat', sans-serif; font-weight: 700; color: rgba(40,15,92,1.00); font-size: 1.5em; text-align:left;}
h3{font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 1.1em; color: rgb(30,43,110); text-align:left;}
p{font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1.0em; color: rgba(30,43,110,1.00); line-height: 150%; text-align:left;}
p.related{font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9em; color:rgb(30,43,110); line-height: 120%; text-align:left; }
p.handlee{font-family: "Handlee", cursive; font-weight: 400; font-style: normal; font-size:1.2em; text-align:left;}
ul, li{font-family: 'Montserrat', sans-serif; font-weight:300; font-size: 1.0em; color: rgb(30,43,110); text-align:left; }

b{font-weight:700;}

img.bannerhome{width:100%; max-width:380px; margin-top:-295px; box-shadow:rgba(0,0,0,0.35) 5px 5px 5px;}

a:link, a:hover, a:visited {text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight:400; color: rgb(0,70,100);}

button{background:rgba(175,0,125,1.00); color:rgb(255,255,255,1.00); border: none; font-family: 'Montserrat', sans-serif; font-size:1.2em; font-weight:500; text-transform:uppercase; padding:10px 25px; boder:none; margin:5px auto; width: 100%;}
button:hover{background:rgba(35,170,240,1.00); color:rgba(38,37,158,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;}

#banner{width:100%; background:url(img/cover.webp) 50% 80% fixed no-repeat; min-height:500px; background-size:cover; }
#slogan{background:rgba(0,185,241,0.75); height: 120px; width: 640px; float: left; margin-top: 210px;  font-family: 'Montserrat', sans-serif; color: rgb(255,255,255); font-size:2.8em; padding: 28px; text-align: right; z-index: 1000;}
#home_txt{float:right; width:90%; max-width:460px; padding:0px 20px; margin:auto;}
#contenido{float:right; width: 100%; max-width: 600px; padding: 0px 20px;}
#banners{float:right; margin:0px 0px 0px 40px; text-align: center; width: 100%; max-width: 300px;}

#whatsapp{background:rgb(5,215,85); padding:2px; font-family:'Patua One', cursive; font-size:1.0em; font-weight:lighter; color:rgb(255,255,255); margin:10px auto; display:block; width:165px; border-radius:5px; transition:0.8s; }
#whatsapp:hover{background:rgba(4,175,69,1.00); box-shadow:rgb(5,215,85) 0px 0px 3px; }

#messenger{background:rgb(0,132,255); padding:2px; font-family:'Patua One', cursive; font-size:1.0em; font-weight:lighter; color:rgb(255,255,255); margin:10px auto; display:block; width:165px; border-radius:5px; transition:0.8s; }
#messenger:hover{background:rgba(0,103,200,1.00); box-shadow:rgb(0,132,255) 0px 0px 3px;}

.botonServicio__box{display:block; float:left; padding:10px 35px;}
.botonServicio__box:hover{background:rgba(144,17,104,1.00); transition:1.2s;}
.botonServicio_txt{font-family: 'Patua One', cursive; font-weight:400; color:rgb(255,255,255); float:left; margin:0px 10px; padding:5px 0px;}

.related_article{width: 80%; max-width: 250px; margin:30px auto; text-align: justify; text-decoration: none; font-size: 1.0em; }

.publicacion{width:100%; max-width:485px; margin:10px; background:url(img/cover.webp) top center no-repeat; background-size:680px; border-radius:10px; box-shadow:rgba(16,0,46,0.5) 5px 5px 5px; padding:30px 60px 30px 30px; font-family: 'Montserrat', sans-serif; font-weight:300; font-size: 1.2em; display:block; text-align:left; color:rgb(255,255,255); float: left;}

/* TABLAS */
table{overflow-x:auto; width:100%; max-width:980px;}
table thead th{font-family: 'Patua One', cursive; font-size:1.0em; font-weight:lighter; color:rgb(255,255,255); background:rgba(248,117,26,1.00); border:none; padding:5px 15px; text-align:center; border-radius:5px;}
table tr td{font-family: 'Montserrat', sans-serif; font-size:0.8em; font-weight:300; color:rgba(0,70,100,1.00); border:none; vertical-align:top; padding:10px; text-align:left; border-radius:5px; }
table tfoot td{font-family: 'Patua One', cursive; font-size:1.0em; font-weight:lighter; background:rgba(0,70,100,1.00); border:none; color:#FFF; padding:5px; text-align: center; }
tr:nth-child(even) {background:rgba(100,150,178,0.50); }
tr:nth-child(odd) {background:rgba(100,150,178,0.30); }


/* 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; }
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(0,185,241,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(40,15,92); transition:0.8s; }
ul li.menu:hover ul.dropdown{display: block; /* Display the dropdown */ ;}
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(0,185,241,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:60px; background:linear-gradient(65deg, rgba(16,0,46,0.00) 30%, rgba(89,53,129,1.00) 50%, rgb(40,15,92,1.00) 100%); transition:1.8s; }
header.large img{height:100px; transition:1.8s;}
header.large h2.logo{color:#FFF; font-family: "Montserrat", serif; font-size:1.4em; font-weight:lighter; margin:0px; transition:1.8s; }  
header.large #logo_box{display:block; float:left; margin:0px;}
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:10px 0px; list-style: none; transition:1.8s; }

header.small{height:60px; background:linear-gradient(78deg, rgba(89,53,129,1.00) 30%, rgba(16,0,46,1.00) 45%, rgb(40,15,92,1.00) 100%); transition:1.8s; box-shadow: rgba(0,0,0,0.78) 0px 0px 10px; }
header.small img{height:105px; margin-top:0px; 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%; margin-top:-16px; }
#logo_img{float:left; margin:0px 15px;}
#logo_txt{float:left;}

@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.logo{height:80px; transition:0.8s;}
	
	header.small{height:60px;}
	header.small img.logo{height:70px; transition:0.8s;}
	
	ul.topnav.responsive{position:relative; background:#FFF;}
	ul.topnav.responsive li.icon{position: absolute; 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(63,133,178,0.80); margin:0px; }	
	ul.topnav.responsive li a:hover{background:rgba(63,133,178,1.00); }
}

@media screen and (max-width:1090px) {
	header.large ul.topnav{list-style-type:none; padding:0px; overflow:hidden; z-index:1000; width: 170px; margin:10px; }
	header.small ul.topnav{list-style-type:none; padding:0px; overflow:hidden; z-index:1000; width: 170px; margin:10px; }
	img.bannerhome{width:100%; max-width:380px; margin-top:0px; box-shadow:rgba(0,0,0,0.35) 5px 5px 5px;}
}

@media screen and (max-width:800px) {
	#banner{width:100%; background:url(img/cover.webp) top center fixed; background-size:cover; min-height:350px; }
	#slogan{background:rgba(0,185,241,0.75); height:70px; width:50%; float: left; margin-top:120px;  font-family: 'Montserrat', sans-serif; color: rgb(255,255,255); font-size:1.5em; padding: 28px; text-align: right;}
	#barra_gris{display:none;}
	#home_txt{width:90%; padding:0px; margin:auto; float: none; }
	#contenido{width:90%; padding: 0px; margin: auto; float: none; }
	#banners{float:none; margin:auto; text-align:center; width:90%;}

	#responsive{ display:block; }
	#scrolldown-menu{ display:none; }
	
	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); }
	
}

@media screen and (max-width:540px) {
	#banner{width:100%; background:url(img/cover.webp) top center; background-size:cover; height:300px; }
	#slogan{background:rgba(0,185,241,0.75); height:80px; width:50%; float: left; margin-top:120px;  font-family: 'Montserrat', sans-serif; color: rgb(255,255,255); font-size:1.3em; padding:18px; text-align: right;}
}