/* CLASSES IN FILE
div.headerLogo
div.headerTitle
div.headerTitleFirst h1
div.headerTitleSecond h4
div.headerButtons
div.headerButtonsInfo
div.headerButtonsFlag 
header select */



/*
Code Sections:
 1.LOGO
2.TITLE
3.BUTTONS */



/* mobile */
@media(min-width:320px) , (max-width:320px)  {

    /* 1.LOGO */

    div.headerLogo {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px;
        margin-bottom: auto;
        width: 60px;
    }


    /* 2.TITLE */

    div.headerTitle {
        /* margin-left: 0; */
        /* margin-right: 0; */
        margin-top: 10px;
        margin-bottom: 10px;
    }

    div.headerTitleFirst h1 {
        /* LINE-> font size: 27px to 42px, viewport: 230px to 578px */
        font-size: clamp(27px, 8px + 0.058vw*100, 42px);
        line-height: 27px;
        padding-right: 5px;
        padding-top: 10px;
        padding-bottom: 11px;

        text-shadow:
            1.8px 1.8px 2.8px #f1f8b3,
            -1.8px -1.8px 2.8px #f1f8b3,
            1.8px -1.8px 2.8px #f1f8b3,
            -1.8px 1.8px 2.8px #f1f8b3;
    }

    div.headerTitleSecond h4 {
        /* LINE-> font size: 11px to 18px, viewport: 230px to 578px */
        font-size: clamp(13px, 2px + 0.027vw*100, 18px);
        line-height: 15px;
        padding-left: 7px;
        padding-right: 22px;
        padding-top: 3px;
        padding-bottom: 3px;
    }


    /* 3.BUTTONS */

    div.headerButtons {
        flex-direction: column;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: auto;
        margin-bottom: 10px;
    }

    div.headerButtonsInfo {
        margin-left: auto;
        margin-right: auto;
        /* margin-top:0;
        margin-bottom:0; */
        width: 50px;
    }

    div.headerButtonsFlag {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        /* margin-bottom: 0px; */
    }

    header select {
        /* flag size 24px*16px */
        width: 45px;
        height: 21px;
    }

}


/* mobile landscape */
@media(min-width:578px) {

    /* 1.LOGO */

    div.headerLogo {
        margin-left: 15px;
        margin-right: 15px;
        margin-top: auto;
        /* margin-bottom: auto; */
        width: 80px;
    }


    /* 2.TITLE */

    /* div.headerTitle {
        margin-left: 0;
        margin-right:0;
        margin-top:10px;
        margin-bottom: 10px;
    } */

    div.headerTitleFirst h1 {
        /* LINE-> font size: 42px to 50px, viewport: 578px to 768px */
        font-size: clamp(42px, 18px + 0.042vw*100, 50px);
        line-height: 34px;
        /* padding-right:5px; */
        padding-top:13px;
        padding-bottom:14px;

        text-shadow:
            1.9px 1.9px 2.9px #f1f8b3,
            -1.9px -1.9px 2.9px #f1f8b3,
            1.9px -1.9px 2.9px #f1f8b3,
            -1.9px 1.9px 2.9px #f1f8b3;
    }

    div.headerTitleSecond h4 {
        /* LINE-> font size: 18px to 20px, viewport: 578px to 768px */
        font-size: clamp(18px, 11.9px + 0.0105vw*100, 20px);
        line-height: 18px;
        padding-left: 10px;
        padding-right: 12px;
        /* padding-top:3px; */
        /* padding-bottom:3px; */
    }


    /* 3.BUTTONS */

    div.headerButtons {
        /* flex-direction: column; */
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    div.headerButtonsInfo {
        /* margin-left:auto; 
        margin-right: auto;
        margin-top:0;
        margin-bottom:0; */
        width: 70px;
    }

    div.headerButtonsFlag {
        /* margin-left:auto;
        margin-right:auto; */
        margin-top: auto;
        /* margin-bottom: 0; */
    }

    header select {
        /* flag size 33px*22px */
        width: 54px;
        height: 27px;
    }

}


/* tablet */
@media(min-width:768px) {

    /* 1.LOGO */

    div.headerLogo {
        /* margin-left: 15px; */
        /* margin-right: 15px; */
        /* margin-top: auto; */
        /* margin-bottom: auto; */
        width: 90px;
    }


    /* 2.TITLE */

    div.headerTitle {
        /* margin-left:10px;*/
        /* margin-right:0;   */
        margin-top: 8px;
        margin-bottom:8px; 
    }

    div.headerTitleFirst h1 {
        /* LINE-> font size: 50px to 64px, viewport: 768px to 1200px */
        font-size: clamp(50px, 25px + 0.032vw*100, 60px);
        line-height:50px;
        /* padding-right:5px */
        padding-top: 11px;
        padding-bottom: 13px;

        text-shadow:
            2px 2px 3px #f1f8b3,
            -2px -2px 3px #f1f8b3,
            2px -2px 3px #f1f8b3,
            -2px 2px 3px #f1f8b3;

    }


    div.headerTitleSecond h4 {
        /* LINE-> font size: 20px to 24px, viewport: 768px to 1200px */
        font-size: clamp(20px, 13px + 0.009vw*100, 22px);
        line-height: 20px;
        padding-left: 13px;
        /* padding-right: 12px*/
        /* padding-top: 3px; */
        /* padding-bottom: 3px; */
    }


    /* 3.BUTTONS */

    div.headerButtons {
        flex-direction: row;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: auto;
        margin-bottom: 10px;
    }

    div.headerButtonsInfo {
        /* margin-left:auto; */
        margin-right: 15px;
        margin-top: auto;
        /* margin-bottom: 0; */
        width: 85px;
    }

    div.headerButtonsFlag {
        /* margin-left:auto;
        margin-right:auto;
        margin-top: auto; */
        margin-bottom: 10px;
    }

    header select {
        /* flag size 42px*28px */
        width: 63px;
        height: 33px;
    }

}


/* screen */
@media(min-width:1200px) {

    /* 1.LOGO */

    div.headerLogo {
        margin-left: 30px;
        margin-right: 20px;
        /* margin-top: auto; */
        /* margin-bottom: auto; */
        width: 100px;
    }


    /* 2.TITLE */

    div.headerTitle {
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    div.headerTitleFirst h1 {
        font-size: 64px;
        line-height:64px;
        /* padding-right:5px;  */
        padding-top: 8px;
        padding-bottom: 8px;

        /* text-shadow:
            2px 2px 3px #f1f8b3,
            -2px -2px 3px #f1f8b3,
            2px -2px 3px #f1f8b3,
            -2px 2px 3px #f1f8b3; */
    }

    div.headerTitleSecond h4 {
        font-size: 24px;
        line-height:24px;
        padding-left: 17px;
        /* padding-right:12px; */
        /* padding-top: 3px; */
        /* padding-bottom: 3px; */
    }


    /* 3.BUTTONS */

    div.headerButtons {
        /* flex-direction: row; */
        margin-left: 30px;
        margin-right: 30px;
        /* margin-top: auto; */
        margin-bottom: auto;
    }

    div.headerButtonsInfo {
        margin-left:0;
        margin-right: 25px;
        /* margin-top:auto; */
        /* margin-bottom:0; */
        width: 100px;
    }

    div.headerButtonsFlag {
        /* margin-left:auto;
        margin-right:auto;
        margin-top: auto; */
        margin-bottom: 10px;
    }

    header select {
        /* flag size 48px*32px */
        width: 69px;
        height: 37px;
    }

}








/* big screen */
@media(min-width:1600px) {


    /* 1.LOGO */

    /* div.headerLogo {
        margin-left: 30px;
        margin-right: 20px;
        margin-top: auto;
        margin-bottom: auto;
        width: 100px;
    } */



    /* 2.TITLE */

    /* div.headerTitle {
        margin-left:15px;
        margin-right:15px;
        margin-top:0px;
        margin-bottom:0px;
    } */


    /* div.headerTitleFirst h1 {
        font-size: 64px;
        line-height:64px;
        padding-right:5px; 
        padding-top: 8px;
        padding-bottom: 8px;

        text-shadow:
            2px 2px 3px #f1f8b3,
            -2px -2px 3px #f1f8b3,
            2px -2px 3px #f1f8b3,
            -2px 2px 3px #f1f8b3;
    } */

    /*div.headerTitleSecond h4 {
        font-size: 24px;
        line-height:24px;
        padding-left: 17px;
        padding-right:12px; 
        padding-top: 3px;
        padding-bottom: 3px;
    }*/


        

    /* 3.BUTTONS */

    /* div.headerButtons {
        flex-direction: row;
        margin-left: 30px;
        margin-right: 30px;
        margin-top: auto;
        margin-bottom: auto;
    }  */

    /* div.headerButtonsInfo {
        margin-left:0;
        margin-right: 25px;
        margin-top:auto;
        margin-bottom:0;
        width: 100px;
    } */

    /* div.headerButtonsFlag {
        margin-left:auto;
        margin-right:auto;
        margin-top: auto;
        margin-bottom: 10px;
    } */

    /* header select {
        width: 69px;
        height: 37px;
    } */

}