:root {
    --animated: all .3s ease-in-out;
    --mainColor:#042947;
    --altColor: #0467b1;
    --darkColor: ;
    --whiteColor: #818181 ;
    --darkGray: #1b1c20 ;
    --lightGray: #2d2e32;
    --mainFont: 'Poppins', sans-seriff;
    --textFont: 'Roboto', sans-seriff;
}

.mainColor{ color:var(--mainColor); }
.altColor{ color:var(--altColor); }
.darkColor{ color:var(--darkColor); }
.whiteColor{ color:var(--whiteColor); }
.darkGray{ color:var(--darkGray); }
.lightGray{ color:var(--lightGray); }
.mainFont{ font-family:var(--mainFont); }
.textFont{ font-family:var(--textFont); }
.white {color: white;}

body {font-family: var(--mainFont);}

a {color: var(--altColor);}
.noSpace, .noSpace p {padding: 0px; margin: 0px;}

.sidenav {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: #00192c;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 0px;
    text-align: center;
    font-family: var(--mainFont);
}

.navbar-toggler {background: var(--mainColor);}
.navbar-toggler-icon {background: none;width: auto; height: auto; padding: 5px;}
.navbar-toggler:hover, .navbar-toggler:active, .navbar-toggler:focus {background: var(--altColor);}
.sidenav .navMenu li {margin: 5px 0px;}
.sidenav .navMenu li a {text-decoration: none;font-size: 22px;font-weight: 300; color: white;}
.closebtn {text-decoration: none; }
.closebtn i {color: #4dc6fc;}




.side-titulo { font-size: 20px;color: var(--altColor);font-family: var(--mainFont);font-weight: 500; padding-left: 5px;}

.header {filter: drop-shadow(2px 4px 6px rgb(0, 0, 0, .5));background: white;z-index: 2;position: sticky;top: 0;}
.logo {width: 80px;}
.textLogo {font-size: 25px;font-weight: 900;font-family: var(--textFont);letter-spacing: 1px;}

#menu-principal li a {color: var(--whiteColor); margin: 0px 20px; font-size: 18px; font-weight: 600; transition: var(--animated);text-decoration: none;}
#menu-principal li:hover a {color: var(--altColor);}
#menu-principal li:after {content: ''; display: block; width: 0%; height: 3px; background: transparent; margin: 0 auto; transition: var(--animated);}
#menu-principal li:hover:after {width: 80%; background: var(--altColor);}

.menuButton {background: linear-gradient(315deg, #042947 0%, #0467B1 100%);border: none;color: white;font-weight: 600; border-radius: 10px; padding: 10px 25px; transition: var(--animated);font-size:18px; }
.menuButton:hover {background: linear-gradient(0deg, #0467B1 0%, #0467B1 100%);color: white; padding: 10px 35px;border-radius: 100px;}

.homeCont {width: fit-content; position: relative; top: 75px;}
.boldHome {font-size: 30px; }

.lightText {font-weight: 400;}

.footer {background: var(--mainColor); color: white;}

.formContacto {padding: 15px;}
.formContacto p {color: white; font-size: 18px;}
.formContacto input, .formContacto textarea {border: none; border-radius: 15px; margin: 10px 0px;}
.formContacto input[type="submit"] {background: white; color: var(--mainColor); font-weight: 600; font-size: 20px; letter-spacing: 1px; font-family: var(--mainFont);transition: var(--animated);}
.formContacto input[type="submit"]:hover {background: var(--mainColor);color: white; letter-spacing: 2px;}



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .boldHome {font-size: 35px;}
    .logo {width: 110px;}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .homeCont {width: 500px; top:100px;}}
    .boldHome {font-size: 25px;}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .homeCont {width: 550px;top:450px; }
    .boldHome {font-size: 35px;}

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .homeCont {width: 660px;top:110px; left: 320px;}
    .boldHome {font-size: 40px;}
    .formContacto {padding: 25px;}
 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    .homeCont {width: 660px;top:0px; left: 200px;}


}

/* No Bootstrap Class (larger desktops, 1900px and up) */
@media (min-width: 1900px) { 

    .homeCont {top:110px; left: 320px;}

}