@font-face {
    font-family: 'Roboto';
    font-weight: 900;
    src: url('roboto/roboto-black-webfont.woff2') format('woff2'),
        url('roboto/roboto-black-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    src: url('roboto/roboto-bold-webfont.woff2') format('woff2'),
        url('roboto/roboto-bold-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 500;
    src: url('roboto/roboto-medium-webfont.woff2') format('woff2'),
        url('roboto/roboto-medium-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: url('roboto/roboto-regular-webfont.woff2') format('woff2'),
        url('roboto/roboto-regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    src: url('roboto/roboto-light-webfont.woff2') format('woff2'),
        url('roboto/roboto-light-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 100;
    src: url('roboto/roboto-thin-webfont.woff2') format('woff2'),
        url('roboto/roboto-thin-webfont.woff') format('woff');
}

*{
    margin: 0;
    padding: 0;
}

:root{
    --npa: 2em;
    --spa: 1em;
    --nma: 2em;
    --sma: 1em;
    --nbo: 1px;

    --npax: 10px;
    --spax: 5px;

    --def-color: #444;
    --gray-color: #ccc;
    --grayb-color: #aaa;
    --shadow-1: 0px 5px 4px -4px #aaa;
    --shadow-2: 0px 3px 2px -1px #aaa;
    --blu-br: #437DC0;
    --yel-br: #F3EC19;
    --gre-br: #1E954D;
    --red-br: #ED1F24;
    --whi-br: #FEFEFE;

    
}

.default{color: var(--def-color); }
.active-tab{ color: var(--blu-br);}

body{
    font-family: 'Roboto', 'sans-serif';
    background: var(--whi-br);
}

.top-nav{
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--spa);
    border-bottom: solid var(--nbo) var(--gray-color);
    box-shadow: var(--shadow-1);
}

.nosha{ box-shadow: none !important;}

.logo{ width: 160px; }

.top-nav ul{
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sma);
    align-items: center;
    padding: var(--npa);
}

.top-nav li{ list-style-type: none; }

.top-a{
    text-decoration: none;
    font-weight: 500;
    /* opacity: .8; */
}

.hero{
    width: 100%;
    position: relative;
    box-sizing: border-box;
    height: 600px;
    padding: var(--npa);    
    background-image: 
    linear-gradient(to bottom , rgba(157, 157, 255, 0.4), rgba(42, 42, 46, 0.5)),
    url('../imgs/arch.jpg');
    background-repeat: no-repeat;
    background-size: cover;    
    background-attachment: fixed;
    background-position: top;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spa);
    box-shadow: var(--shadow-1);
    
}

.hero h1{
    font-weight: 900;
    font-size: 3rem;
    color: var(--whi-br);
    display: block;
    -webkit-text-stroke: .5px #3f53c2;
}

.hero h2{
    font-weight: 700;
    font-size: 2rem;
    color: var(--whi-br);
    display: block;
    -webkit-text-stroke: .5px #3f53c2;
}

.s1{
    position: relative;
    height: auto;
    box-sizing: border-box;
    padding: var(--npa);
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sma);    
}

.s1 div{
    width: 45%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--sma);
}

.s1 div img{
    box-shadow: var(--shadow-1);
    position: relative;
    max-width: 80%;
    border-radius: 5px;
}

.s1 div h2, .s2 div h2{
    color: var(--def-color);
    font-weight: 500;
}

.s1 div p{
    color: var(--def-color);
    font-weight: 300;
    
}

.s2{
    position: relative;
    min-height: 400px;
    box-sizing: border-box;
    padding: var(--npa);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--npa);
}

.s2 div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spa);
}

.s2 .mcard{
    box-sizing: border-box;
    width: 300px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sma);
    border: solid 1px var(--gray-color);
    box-shadow: var(--shadow-1);
    padding: var(--spa);
    border-radius: 5px;
}

.s2 .mcard img, .timg{
    border: solid 3px #f3f3f388;
    border-radius: 5px;
    outline: solid 1px var(--grayb-color);
    box-shadow: var(--shadow-1);
    opacity: .9;
    position: relative;
    width: 100%;

}

.lite{ font-weight: 200; }

.s2 .mcard span{ font-weight: 200; }

.s2 .mcard a{
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    align-items: center;
    padding: 3px 30px;
    background: var(--blu-br);
    color: var(--whi-br);
    border: solid 1px var(--gray-color);
    box-shadow: var(--shadow-2);
    font-weight: 300;
    border-radius: 5px;


}

.cta1{
    text-decoration: none;
    background: var(--yel-br);
    padding: var(--spax) var(--npax);
    font-weight: 500;
    box-shadow: var(--shadow-1);
    border-radius: 5px;
    color: var(--blu-br);
    max-width: 130px;
    text-align: center;
}

.cta1:hover{
    color: var(--yel-br);
    background: var(--blu-br);
}

.cta2{
    text-decoration: none;
    background: var(--blu-br);
    padding: var(--spax) var(--npax);
    font-weight: 500;
    box-shadow: var(--shadow-1);
    border-radius: 5px;
    color: var(--whi-br);
    max-width: 130px;
    text-align: center;
}

.cta2:hover{
    color: var(--blu-br);
    background: var(--yel-br);
}

.ft-container{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--sma);    
    background-image: 
    linear-gradient(to bottom , rgba(157, 157, 255, 0.4), rgba(42, 42, 46, 0.5)),
    url('../imgs/arch.jpg');
    background-repeat: no-repeat;
    background-size: cover;    
    background-attachment: fixed;
    background-position: top;
}

footer{
    background: linear-gradient(to bottom, #437DC0, #2d5583);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--sma);
    padding: var(--npa);
}

.flags-main{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: var(--npa) 0rem;
}

.flags-main div{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: .5em;
    align-items: center;
    margin: 1em;
}

.flags-main img{ border-radius: 100%; }

.flags-main span{
    color: var(--whi-br);
    font-weight: 400;
    font-size: .9rem;
}

.links{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.links h2{ color: var(--gray-color); font-weight: 500; font-size: 1.3rem; padding-bottom: var(--spa); }

.links ul{
   
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--sma);
    align-items: center;
    margin-bottom: var(--nma);
}

.links li{ list-style-type: none; }

.links a{ text-decoration: none; color: var(--gray-color); font-weight: 300; }

.socials a:hover, .clika:hover{ color: var(--yel-br); }

.socials{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--sma);
    align-items: center;
}

.socials h3{ color: var(--grayb-color); font-weight: 500; font-size: 1.3rem; padding-bottom: var(--spa); }

.socials ul{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sma);
}

.socials li{ list-style-type: none}

.socials a{ text-decoration: none; color: var(--gray-color); font-weight: 100}
.credits{
    box-sizing: border-box;
    padding: var(--npa) 0rem;
    width: 100%;
}

.credits ul{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.credits li{ list-style-type: none; color: var(--gray-color); font-weight: 300; font-size: 0.9em;}

.credits li a{ color: var(--grayb-color); text-decoration: none; font-weight: 400;}

.credits li a:hover{ color: var(--whi-br); }

.timg{ width: 250px; }

.co-form{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sma);
    padding: var(--npa);
}


.co-form h1{
    font-weight: 500;
    color: var(--def-color);
}

.co-form label{ font-weight: 200; margin-bottom: 3px; font-size: .9em; }
.co-form span{ font-weight: 500; margin-top: -16px; font-size: 1em; color: var(--blu-br); }

.co-form form{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--sma);
    min-width: 333px;
    padding: var(--npa);    
}

.co-form form div{
    display: flex;
    flex-direction: column;
}

.co-form input, .co-form button{ padding: 8px; box-shadow: var(--shadow-2); }

.co-form button{
    background-color: var(--blu-br);
    color: var(--whi-br);
    font-weight: 500;
    font-size: 1.2em;
    border-color: var(--blu-br);
    border-radius: 5px;
    cursor: pointer;
}

.co-form button:hover{
    background: var(--yel-br);
    color: var(--blu-br);
}

.co-form textarea{
    min-height: 112px;
    resize: vertical;
    padding: 5px;
    box-shadow: var(--shadow-2);
    
}



/*MEDIA QUERIES*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    .top-nav ul{
        display: none;
      }
    
      .top-nav ul.active {
        display: flex;
        flex-direction: column;
      }
    

    .menutoggle {
        display: block;
        width: 40px;
        height:40px;
        margin: 10px;
        float: right;
        cursor: pointer;
        text-align: center;
        font-size: 30px;
        position: relative;
      }

      .menutoggle:before {
        content: url('../imgs/mb-op.svg');
      }
    
      .menutoggle.active:before {
        content: url('../imgs/mb-cl.svg');
        line-height: 3em;
      }    

    .hero h1{
        font-weight: 500;
        font-size: 2em;
        text-align: center;        
    }
    
    .hero h2{
        font-weight: 300;
        font-size: 1em;
        text-align: center;        
    }

    .s1, .links, .top-nav{ flex-direction: column;}

    .s1 div{ width: 100%; }

    .credits ul, .s1r{ flex-direction: column-reverse;}

    .credits ul{
        align-items: center;
        gap: var(--sma);
     } 

}