html {
    scroll-behavior: smooth;
}
* {font-family: 'Oswald', sans-serif; color: #616161; margin: 0;}

h1{font-size: 80px; color: #FFFFFF; letter-spacing: 10%; padding: 1em 0 1.2em 0; margin: 0;}
h2{font-size: 40px; color: #D07D00; letter-spacing: 10%; margin: 0;}
h3{font-size: 30px; color: #D07D00; letter-spacing: 10%; margin-top: 1em;}
h4{font-size: 40px; color: #FFFFFF; letter-spacing: 10%; padding-top: 2em; margin: 0;}
p{font-family: 'Open Sans', sans-serif; font-size: 20px; margin: 1.5em 0;}
.emphazis{font-size: 40px; color: #D07D00; letter-spacing: 5%;}
.phrase{color: #616161; font-size: 50px; letter-spacing: 5%; margin: 1em 0;}
.info{font-size: 20px; text-align: center;}
.cont h3{color: #000000;}
.nav-item{margin: 0 1em;}

a {text-decoration: none;  cursor: pointer; color: #FFFFFF;  font-size: 20px;}
a:hover{color: #616161;}
a:active{color: #616161;}

/* .text{display: none; color: #FFFFFF; font-size: 45px; z-index: 1;}
.centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px;} */

.marg-r{margin-right: 7em; margin-left: 1em;}
.marg-l{margin-left: 7em; margin-right: 1em;}
.map{margin: 1.5em 0; padding: 0;}
.padd-l{padding: 0 0 4em 4em ;}
.top-sep{padding-top: 2em;}


#services{ background: rgba(217, 217, 217, 0.48); margin-top: 2em;}
.dark{background-color: #000000; margin-top: 2em;}

.logo {width: 50px; height: 50px; margin-left: 1em;}
.icon2{width: 50px; margin: 0 2em;}
.logos{width: 250px; margin-top: 1em;}
/* .cards{width:270px; height:409px;} */
.radial-gray{width: 100px; background-color: #616161; border-radius: 100%;}
.radial-white{width: 100px; background-color: #FFFFFF; border-radius: 100%; }
.radial-orange{width: 80px; height: 80px; background-color: #D07D00; border-radius: 100%;}
.radial-orange img{padding: 0.2em; width: 60px;height: 60px;}

.navbar {position: sticky; top: 0; z-index: 100; background-color: #D07D00;}
.navbar-toggler-icon {background-image: url("images/icons/logo.png");}
.navbar-toggler{border: none;}

.home {
    background-image: url("images/pictures/home.jpg"); background-repeat: no-repeat; 
    background-position: center; background-size: 100%; height: 100%; overflow: hidden;
}

.cont{
    display: flex; display: inline-block; text-align: center; font-weight: bold; padding: 30px;
    transition: .2s all; cursor: pointer; background-color:#FF9900;
}
.contraste:hover .cont{
    filter: blur(3px); opacity: 1; transform: scale(.98); box-shadow: none; transition: .2s;
}
.contraste:hover .cont:hover{
    transform: scale(1); filter: blur(0px); opacity: 1; box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125);    
}
.contraste:hover .cont:hover .texto{
    display: block;
}
.contraste:hover .cont:hover img{
    filter: brightness(80%);
}

.flag{
    position: relative; width: 180px; height: 180px; margin: 2em; background: #FF9900;
}
.flag:after {
    position: absolute; top: 100%; width: 100%; height: 60px;
    background: #FF9900;
    content: "";
    clip-path: polygon(0 0, 48% 100%, 100% 0);
}

footer{
    background-color: #D07D00; position: sticky; bottom: 0; z-index: 100; 
}

@media screen and (max-width:767px) {
    .dodi {
      display: none;
    }
}
@media screen and (min-width: 320px) and (max-width:424px) {  
    .navbar-nav{display: flex; flex-direction: row;}
    h1{font-size: 20px;  padding: 1em 0 2em 0;}
    h2{font-size: 20px; color: #D07D00; letter-spacing: 10%; margin: 0;}
    h3{font-size: 18px; color: #D07D00; letter-spacing: 10%; margin-top: 1em;}
    h4{font-size: 18px; }
    p{font-family: 'Open Sans', sans-serif; font-size: 18px; margin: 1.5em 0;}
    .emphazis{font-size: 20px; color: #D07D00; letter-spacing: 5%;}
    .phrase{color: #616161; font-size: 30px; letter-spacing: 5%; margin: 1em 0;}
    .info{font-size: 14px; text-align: center;}
    .nav-item{margin: 0 0.3em;}
    a {text-decoration: none;  cursor: pointer; color: #FFFFFF;  font-size: 14px;}

    .padd-l{padding: 0 0 1em 1em ;}
    .top-sep{padding-top: 1em;}

    .map{margin: 1em 0; padding: 0;}
    iframe{width: 300px; height: 225px;}
    .logo {width: 50px; height: 50px;}
    .icon2{width: 30px; margin: 0 0.5em;}
    .logos{width: 100px; margin-top: 1em;}
    .radial-gray{display: none;}
    .radial-white{width: 80px; background-color: #FFFFFF; border-radius: 100%; }
    .radial-orange{width: 40px; height: 40px; background-color: #D07D00; border-radius: 100%;}
    .radial-orange img{padding: 0.1em; width: 30px;height: 30px;}

    .flag{
        position: relative; width: 160px; height: 160px; margin: 2em; background: #FF9900;
    }
    .flag:after {
        position: absolute; top: 100%; width: 100%; height: 40px;
        background: #FF9900;
        content: "";
        clip-path: polygon(0 0, 48% 100%, 100% 0);
    }

    .cont{padding: 20px;}
    .contraste{margin: 0.5em 0;}

    footer a{display:none;}
}

@media screen and (min-width: 425px) and (max-width:767px) {  
    .navbar-nav{display: flex; flex-direction: row;}
    h1{font-size: 30px; padding: 1em 0 2em 0;}
    h2{font-size: 30px; color: #D07D00; letter-spacing: 10%; margin: 0;}
    h3{font-size: 20px; color: #D07D00; letter-spacing: 10%; margin-top: 1em;}
    h4{font-size: 20px; }
    p{font-family: 'Open Sans', sans-serif; font-size: 20px; margin: 1.5em 0;}
    .emphazis{font-size: 20px; color: #D07D00; letter-spacing: 5%;}
    .phrase{color: #616161; font-size: 30px; letter-spacing: 5%; margin: 1em 0;}
    .info{font-size: 14px; text-align: center;}
    .nav-item{margin: 0 0.3em;}
    a {text-decoration: none;  cursor: pointer; color: #FFFFFF;  font-size: 14px;}

    .padd-l{padding: 0 0 1em 1em ;}
    .top-sep{padding-top: 1.5em;}

    .map{margin: 1em 0; padding: 0;}
    iframe{width: 300px; height: 225px;}
    .logo {width: 50px; height: 50px;}
    .icon2{width: 40px; margin: 0 0.5em;}
    .logos{width: 120px; margin-top: 1em;}
    .radial-gray{display: none;}
    .radial-white{width: 100px; background-color: #FFFFFF; border-radius: 100%; }
    .radial-orange{width: 40px; height: 40px; background-color: #D07D00; border-radius: 100%;}
    .radial-orange img{padding: 0.1em; width: 30px;height: 30px;}

    .cont{padding: 20px;}
    .contraste{margin: 0.5em 0;}

    footer a{display:none;}
}

@media screen and (min-width: 768px) and (max-width:1023px) {  
    h1{font-size: 50px; color: #FFFFFF; letter-spacing: 10%; padding: 0.8em 0 1.2em 0; margin: 0;}
    h2{font-size: 30px; color: #D07D00; letter-spacing: 10%; margin: 0;}
    h3{font-size: 20px; color: #D07D00; letter-spacing: 10%; margin-top: 1em;}
    h4{font-size: 20px; color: #FFFFFF; letter-spacing: 10%; padding-top: 1.5em; margin: 0;}
    .emphazis{font-size: 30px; color: #D07D00; letter-spacing: 5%;}
    .phrase{color: #616161; font-size: 30px; letter-spacing: 5%; margin: 1em 0;}
    .info{font-size: 16px; text-align: center;}
    .nav-item{margin: 0 0.5em;}
    a {text-decoration: none;  cursor: pointer; color: #FFFFFF;  font-size: 18px;}

    .padd-l{padding: 0 0 1.5em 1.5em ;}
    .top-sep{padding-top: 1.5em;}
    .marg-r{margin-right: 3em; margin-left: 1em;}
    .marg-l{margin-left: 3em; margin-right: 1em;}

    .map{margin: 1em 0; padding: 0;}
    .icon2{width: 40px; margin: 0 0.5em;}
    .logos{width: 150px; margin-top: 1em;}
    .radial-gray{width: 80px; background-color: #616161; border-radius: 100%;}
    .radial-white{width: 80px; background-color: #FFFFFF; border-radius: 100%; }
    .radial-orange{width: 70px; height: 70px; background-color: #D07D00; border-radius: 100%;}
    .radial-orange img{padding: 0.2em; width: 50px;height: 50px;}

    .flag{
        position: relative; width: 170px; height: 170px; margin: 1.8em; background: #FF9900;
    }
    .flag:after {
        position: absolute; top: 100%; width: 100%; height: 50px;
        background: #FF9900;
        content: "";
        clip-path: polygon(0 0, 50% 100%, 100% 0);
    }
}

@media screen and (min-width: 1024px) and (max-width: 1043px){
    h1{font-size: 60px; color: #FFFFFF; letter-spacing: 10%; padding: 1em 0 1.2em 0; margin: 0;}
    h4{font-size: 30px; color: #FFFFFF; letter-spacing: 10%; padding-top: 2em; margin: 0;}
    .phrase{color: #616161; font-size: 40px; letter-spacing: 5%; margin: 1em 0;}
    .emphazis{font-size: 30px; color: #D07D00; letter-spacing: 5%;}
    .cont h3{color: #000000; font-size: 25px;}
    .info{font-size: 18px; text-align: center;}

    .marg-r{margin-right: 5em; margin-left: 1em;}
    .marg-l{margin-left: 5em; margin-right: 1em;}

    .logos{width: 200px; margin-top: 1em;}
}