@font-face{
font-family:"Font Awesome 4";
src: url("FontAwesome.otf");
font-display: swap;
}
@font-face{
font-family:"Font Awesome 6";
src: url("fa-brands-400.ttf");
font-display: swap;
}
*{
margin:0;
border:0;
padding:0;
box-sizing:border-box;
}
html{
width:100%;
height:100%;
scroll-behavior:smooth;
background:#f7f7f7;
}
body{
width:100%;
height:auto;
font-family:"roboto";
}
img{
width:100%;
height:auto;
}
a{
cursor:pointer;
}
ul{
list-style:none;
}
#header{
font-size:17px;
}
#encabezado{
position:absolute;
display:inline.block;
float:left;
margin:1% auto auto 1%;
width:98%;
height:auto;
color:#363636;
font-family:"roboto";
font-weight:100;
word-break:break-word;
background: transparent;
}
#encabezado h1{
font-family:"roboto";
font-size: 10.5vw;
font-weight:300;
line-height:1;
}
#encabezado h2{
margin-bottom:5px;
width:auto;
max-width:29%;
height:auto;
font-family:"roboto";
font-size: 5vw;
font-weight:300;
line-height:1;
background-color: rgba(255,255,255,0.6) ;
}

/*********** Menu ***********/

#menu{
display:;
position:relative;
float:right;
margin:1% 1% 0 0;
padding:0px;
justify-content: ;
align-items:right;
width:40%;
height:0px;
font-size: 10vw;
line-height:1;
cursor:pointer;
background: #ff0000;
}

/* Son las tres lineas */
.lbl-menu{
float:right;
width:40px;
height:30px;
margin:10px 10px;
right:0%;
position:relative;
cursor: pointer;
transform:scale(1.2);
}
.lbl-menu #spn1,#spn2,#spn3{
position:absolute;
content:'';
background:#363636;
width:40px;
height:5px;
border-radius:5px;
transition:all 400ms ease;
}
#spn2{
top:12px;
}
#spn3{
top:23px;
}
#btn-menu{
display:none;
}
#btn-menu:checked ~ .lbl-menu #spn1{
transform:rotate(140deg);
top: 10px;
}
#btn-menu:checked ~ .lbl-menu #spn2{
opacity: 0;
}
#btn-menu:checked ~ .lbl-menu #spn3{
transform: rotate(-140deg);
top: 10px;
}
#btn-menu:checked ~ .screen-menu #submenu{
display:block;
}
/* FIN de las tres lineas */


/* Abre el menú desplegable */
.screen-menu{
display:inline-block;
float:right;
top:50px;
margin:0px;
width:auto;
height:0px;
}
#submenu{
display:none;
float:left;
width:auto;
margin:50px 0px 0px 0px;
height:400px;
font-size:3vw;
line-height:1.5;
background:rgba(255,255,255,0.6);
}
#submenu p{
margin:5px 0px 10px 10px;
line-height:1;
}
#submenu a{
width:100%;
margin:3px 0px;
color:#363636;
text-decoration:none;
}
#submenu li{
width:100%;
margin:10px 0px;
line-height:1;
}
#submenu li:hover{
background-color: rgba(255,255,255,0.7);
}

/* FIN del menú desplegable */

/*********** FIN Menu ***********/

#article{
padding:10px;
color:#000000;
font-family:"roboto" !important;
font-size:18px;
font-weight:100;
letter-spacing:1pt;
line-height:1.7;
}
#article h3{
color:#333333;
font-weight:500;
line-height:1;
}
#article a{
color:#008f39;
}
#article a:hover{
background-color:#b8daba;
}
.button2 {
width:86%;
padding:15px 25px;
font-size:4vw;
text-align:center;
cursor:pointer;
outline:none;
color:#fff;
background-color: #04AA6D;
border: none;
border-radius: 7px;
box-shadow:0 9px #999;
}
.button2:hover{
background-color:#3e8e41
}
.button2:active {
background-color:#3e8e41;
box-shadow:0 5px #666;
transform:translateY(4px);
}
#flecha{
width:20px;
height:20px;
border-left:5px solid;
border-bottom:5px solid;
border-color:#333333;
border-radius:3px;
transform: rotate(-45deg);
}
#redes{
display:inline-block;
margin-bottom:30px;
width:100%;
}
.icons{
font-family:"Font Awesome 4";
}
.social-icon{
Display:inline-block;
float:left;
text-align:center;
vertical-align: middle !important;
margin:0px 7px 7px 0px;
border:1px solid #363636;
border-radius:50%;
width:50px;
height:50px;
cursor:pointer;
font-family:"Font Awesome 6";
font-size:30px;
color:#363636;
}
.social-icon:hover{
color:#ffffff;
background:#363636;
}
.social-icon-facebook{
margin:1px 1px 0px 1px;
}
.social-icon-instagram{
margin:0px 1px 0px 2px;
}
.social-icon-youtube{
margin:0px 0px 0px 0px;
font-family:"Font Awesome 4";
}
.social-icon-twitter{
margin:0px 0px 0px 2px;
}
.social-icon-pinterest{
margin:2px 0px 0px 0px;
}
.social-icon-linkedin{
margin:0px 0px 2px 2px;
}
.social-icon-whatsapp{
margin:0px 0px 0px 2px;
}
.social-icon-telegram{
margin:0px 2px 1px 0px;
font-family:"Font Awesome 4";
}
.social-icon-email{
margin:0px 0px 0px 1px;
font-family:"Font Awesome 4";
}
.social-icon-rss{
margin:5px 0px 0px 4px;
}
.social-icon-discord{
margin:0px 0px 0px 0px;
}

.social-icon-tiktok{
margin:0px 0px 0px 4px;
}
#compartir{
display:inline-block;
float:left;
margin-bottom:30px;
}
#compartir a{
margin-bottom:4px;
}
#contacto{
display:inline-block;
margin:10px 0px 30px 0px;
}
#footer{
clear:both;
margin-top:10px;
padding:10px;
font-family:"roboto" !important;
background:#999999;
}
#subir{
position:fixed;
bottom:20px;
right:20px;
width:20px;
height:20px;
border-left:5px solid;
border-bottom:5px solid;
border-color:#333333;
border-radius:3px;
transform:rotate(135deg);
}
#top{
position:fixed;
bottom:14px;
right:10px;
width:40px;
height:40px;
border-radius:50%;
margin:0px;
padding:0px;
background:transparent;
}
@media only screen and (max-width:780px){
#encabezado{
color:#222222;
font-weight:900;
}
#menu{
width:100%;
margin:0px;
line-height:1;
}
.screen-menu{
width:100%;
margin:0px;
}
#submenu{
width:100%;
height:auto;
margin:0px;
color:#000000;
font-size:6vw;
font-weight:300;
background: rgba(255,255,255,0.9);
}
#submenu a:hover{
background:#ffffff;
}
#article{
font-family:"roboto" !important;
color:#000000 !important;
font-weight:300 !important;
padding:3px;
}
.button2{
width:85%;
font-weight:500 !important;
}
#icons{
color:#363636;
font-weight:100;
}
}