:root{
    --default-radius: 25px;
    --default-shadow: 0px 8px 30px rgba(0, 0, 0, 0.16);
}
#header-container-pc{
    background-color: white;
    height: 70px;
    width: 92%;
    top: 75px;
    border-radius: 100px;
    transition: 250ms all;
    box-shadow: var(--default-shadow);
}

#header-container-mobile{
    --top-space: 145px;
    transition: 250ms all;
    height: calc(100vh - var(--top-space));
    width: 300px;
    top: 135px;
    right: -350px;
    border-radius: var(--rounded-defualt);
}

#header-logo{
    width: 8%;
}

#header-logo img{
    transition: var(--default-ms) all;
}

#header-company-name{
    width: 17%;
}

#header-nav-buttons{
    width: 75%;
}

#header-mobile-button{
    width: 10%;
    display: none;
}

.header-nav-btn:hover{
    color: var(--site-secondary) !important
}

#index-circles-container{
    width: 400px;
    height: 400px;
    top: -100px;
    left: -50px;
}

#index-first-circle{

}

#index-second-circle{
    width: 60%;
    height: 60%;
}

#index-first-circle, #index-second-circle{
    box-shadow: inset 0px 0px 3px #000000,0px 0px 3px #000000;
}

.extension-chevron{
    transition: 250ms transform;
}
:root{
    --ext-space:15px;
    --ext-top: 100%;
    --def-ms: 250ms;

}
.extension-container{
    top: calc(var(--ext-top) + var(--ext-space)) !important;
    transition: var(--def-ms) height, var(--def-ms) min-height, var(--def-ms) opacity !important;
    box-shadow: var(--default-shadow);
    border-radius: var(--default-radius);
}

.extension-space{
    top: var(--ext-top) !important;
    height: var(--ext-space);
}

#header-mobile-button{
    display: none;
}

.header-nav-mobile-buttons{
    display: none;
    align-items: center !important;
}

.header-nav-mobile-buttons a{

}


.extension-link:hover, .extension-link a:hover{
    color: var(--site-secondary) !important;
    transition: var(--default-ms);
}

.extension-link div{
    font-size: 10px;
}
.extension-link span, .extension-link a{
    font-size: 20px;
}

.header-nav-pc-buttons{
    cursor: default;
}
.header-nav-pc-buttons a:hover{
    color: var(--site-secondary) !important;
}

.extension-image-icon{
    border-radius: var(--rounded-defualt);
    font-size: 100px;
}

@media screen and (min-width:  1120px) and (max-width: 1300px){

    .header-nav-pc-buttons:nth-child(5){
        display: none !important;
    }
    .header-nav-mobile-buttons:nth-child(5){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(4){
        display: none !important;
    }
    .header-nav-mobile-buttons:nth-child(4){
        display: flex !important;
    }
    .header-nav-pc-buttons{
        width: 25%;
    }
    #header-nav-container{
        display: flex;
    }
    #header-nav-pc-container{
        width: 90%;
    }
    #header-nav-mobile-container{
        width: 10%;
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #header-mobile-button{
        display: flex;
    }


    #header-logo{
        width: 8%;
    }

    #header-company-name{
        width: 22%;
    }

    #header-nav-buttons{
        width: 70%;

        /*border: 1px solid red;*/
    }

    #header-mobile-button{
        display: flex;
        width: 10%;
    }

}

@media screen and (min-width: 800px) and (max-width: 1120px){
    .extension-container{
        width: 140% !important;
        height: 250px !important;
    }
    .extension-links-container{
        width: 100% !important;
        height: 250px !important;
    }
    .extension-image-icon{
        display: none;
    }

    .extension-links-container{
        width: 100%;
    }
    /*.extension-link{*/
    /*    display: none;*/
    /*}*/
    .header-nav-pc-buttons:nth-child(5){
        display: none !important;
    }
    .header-nav-mobile-buttons:nth-child(5){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(4){
        display: none !important;
    }
    .header-nav-mobile-buttons:nth-child(4){
        display: flex !important;
    }

    #header-logo{
        width: 8%;
    }

    #header-company-name{
        width: 25%;
    }
    #header-nav-buttons{
        width: 60%;
    }

    #header-mobile-button{
        display: flex;
        width: 10%;
    }

}

@media screen and (min-width: 660px) and (max-width: 800px){

    .extension-links-container{
        width: 100%;
    }
    .extension-image-icon{
        display: none;
    }

    .header-nav-pc-buttons:nth-child(5){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(5){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(4){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(4){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(3){
        display: none !important;
    }
    .header-nav-mobile-buttons:nth-child(3){
        display: flex !important;
    }

    #header-logo{
        width: 15%;
    }

    #header-company-name{
        width: 30%;
    }
    #header-nav-buttons{
        width: 50%;
    }

    #header-mobile-button{
        display: flex;
        width: 15%;
    }


}

@media screen and (min-width: 500px) and (max-width: 660px){

    .extension-links-container{
        width: 100%;
    }
    .extension-image-icon{
        display: none;
    }

    .header-nav-pc-buttons:nth-child(5){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(5){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(4){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(4){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(3){
        display: none !important;
    }
    .header-nav-mobile-buttons:nth-child(3){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(2){
        display: none !important;
    }
    .header-nav-mobile-buttons:nth-child(2){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(1){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(1){
        display: flex !important;
    }

    #header-logo{
        width: 20%;
    }

    #header-company-name{
        width: 60%;
    }
    #header-nav-buttons{
        width: 0%;
    }

    #header-mobile-button{
        display: flex;
        width: 20%;
    }

}

@media screen and (min-width: 0px) and (max-width: 500px){

    #header-container-pc{
        width: 100%;
    }

    .header-nav-pc-buttons:nth-child(6){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(6){
        display: flex !important;
    }

    .header-nav-pc-buttons:nth-child(5){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(5){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(4){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(4){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(3){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(3){
        display: flex !important;
    }
    .header-nav-pc-buttons:nth-child(2){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(2){
        display: flex !important;
    }

    .header-nav-pc-buttons:nth-child(1){
        display: none !important;
    }

    .header-nav-mobile-buttons:nth-child(1){
        display: flex !important;
    }


    #header-logo{
        width: 20%;
    }

    #header-company-name{
        width: 60%;
    }
    #header-nav-buttons{
        width: 0%;
    }

    #header-mobile-button{
        display: flex;
        width: 20%;
    }
}