@font-face {
    font-family: 'Helen LC Bold';
    src: url('../fonts/helen/HSDBGCBL.TTF');
    src: url('../fonts/helen/HSDBGCBL.TTF') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Helen BOLD';
    src: url('../fonts/helen/HS05990.TTF');
    src: url('../fonts/helen/HS05990.TTF') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Helen Light';
    src: url('../fonts/helen/HS05930.TTF');
    src: url('../fonts/helen/HS05930.TTF') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Helen Regular';
    src: url('../fonts/helen/HS05940.TTF');
    src: url('../fonts/helen/HS05940.TTF') format('truetype');

    font-style: normal;
}
@font-face {
    font-family: 'Helen Regular1';
    src: url('../fonts/helen/HS05990.TTF');
    src: url('../fonts/helen/HS05990.TTF') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Helen Bold italic';
    src: url('../fonts/helen/HSDBGCBX.TTF');
    src: url('../fonts/helen/HSDBGCBX.TTF') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Helen LC Regular';
    src: url('../fonts/helen/HSDBGCL.TTF');
    src: url('../fonts/helen/HSDBGCL.TTF') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Helen LC italic';
    src: url('../fonts/helen/HSDBGCLI.TTF');
    src: url('../fonts/helen/HSDBGCLI.TTF') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Helen PRO Regular';
    src: url('../fonts/helen/HELENPRO-REGULAR.OTF');
    src: url('../fonts/helen/HELENPRO-REGULAR.OTF') format('truetype');
}

@font-face {
    font-family: 'Myriad Pro Regular';
    src: url('../fonts/Myriad Pro Regular.ttf');
    src: url('../fonts/Myriad Pro Regular.ttf') format('truetype');

    font-style: normal;
}


body {
    background-color: #e6e6e6;
}



.template-background {
    margin: 50px 50px 0 50px;
    background-color: #ffffff;
    position: relative;
}
@media only screen and (min-width: 992px) {
    .under-head-logo-992 {
        display: none;
    }
}

@media only screen and (max-width: 992px) {
    .template-background {
        margin: 0;
    }
    .top-head {
        display: none;
    }
    .under-head-logo-992 {
        position: relative;
        text-align: center;
    }
    .under-head-logo-992 img {
        padding-top: 5%;
        width: 30%;
    }

}

.top-head {
    text-align: center;
    font-size: 7vw;
    position: absolute;
    top: -4vw;
    left: 0vw;
    width: 100%;
/*    width: calc( 100% - 30px );*/
    color: #e6e6e6;
    font-weight: 900;
    font-family: 'Helen BOLD', Sans-serif;
    /*transform: scale(1.05,1);*/

}


ul.nav {
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 12vw 0 5vw 1.5vw;
    text-transform: uppercase!important;

    background-color: #ffffff;
    font-size: 1.05vw;
    font-weight: 600!important;
/*    margin-bottom: 5vw;*/



}

/*Езици БГ ENG*/

ul.nav-lang {
    padding: 0;
    margin: 0;
    list-style-type: none;
/*    overflow: hidden;*/
    background-color: #ffffff;
    color: #666677;
}
ul.nav-lang li{
    padding: 0;
    margin: 0;

    background-color: #ffffff;
    color: #666677;
}
ul.nav-lang a{
    padding-left: 0!important;
    margin: 0;

    background-color: #ffffff;
    color: #666677;
}
li {
    float: left;
    padding: 0 0.53965vw 0 0.53965vw;
}
li a {
    display: block;
    color: #0f0d0f;
    padding: 1px 0.53965vw!important;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Helen PRO Regular', Sans-serif!important;
}
li a:focus {
    color: #2e7199;
    border-bottom: 0px solid #2e7199;
    background-color: white!important;
}
li a:hover {
    color: #2e7199;
    border-bottom: 3px solid #2e7199;
    background-color: white!important;
}
.lang a:focus {
    color: #2e7199;
    border-bottom: 0 solid #2e7199!important;
    background-color: white!important;
}
.lang a:hover {
    color: #2e7199;
    border-bottom: 0 solid #2e7199!important;
    background-color: white!important;
}
/*Клиника София*/
.case1 {
    width: 15.5vw;
}
.case1 a {
    top: -1.2vw;
    padding: 13px 25px 7px 25px!important;
    background-color: #d5d5d5;
    border: 1px solid transparent;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 0px 2px 1px #b4b4b4;
    font-family: "Myriad Pro Regular", Sans-serif!important;
}

@media only screen and (max-width: 1546px) {
    .case1 a {
        padding-left: 10px!important;
        padding-right: 10px!important;
    }
}

.case1 a:hover {
    color: #2e7199;
    background-color: #e4e4e4 !important;
    border-bottom: 0;
}
.case1 a:focus {
    color: white;
    background-color: #2e7199 !important;
    border-bottom: 0;
    box-shadow: 0px 2px 1px #2c6586
}
/*Клиника София край*/

/*Клиника Благоевград*/
.case2 {
    width: 15.5vw;
    box-shadow: 0px 0px 14px white
}
.case2 a {
    top: -1.2vw;
    padding: 13px 25px 7px 25px!important;

    border: 1px solid transparent;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0px 2px 1px #b4b4b4;
    font-family: "Myriad Pro Regular", Sans-serif!important;
}
.case2 a:hover {
    color: #2e7199;
    background-color: #e4e4e4 !important;
    border-bottom: 0;
}
.case2 a:focus {
    color: white;
    background-color: #2e7199 !important;
    border-bottom: 0;
    box-shadow: 0px 2px 1px #2c6586
}
@media only screen and (max-width: 1546px) {
    .case2 a {
        padding-left: 10px!important;
        padding-right: 10px!important;
    }
}
/*Клиника Благоевград край*/
.under-head {
    text-align: center;
    position: relative;
    z-index: 2;
    top: -4.5vw;
    font-size: 1.7vw;
    color: #31739b;
    font-family: 'Helen Regular', Sans-serif;
    font-weight: normal!important;
}
.under-head-logo {
    text-align: center;
    position: relative;
    z-index: 2;
    top: -4.4vw;
    font-size: 1.7vw;
    color: #31739b;
    font-family: 'Helen Regular', Sans-serif;
    font-weight: normal!important;
}
.under-head-logo img {
    width: 12vw;
}
.under-head-logo-mobile {
    text-align: center;
    position: relative;
    z-index: 2;
    top: 5.6vw;
    font-size: 1.7vw;
    color: #31739b;
    font-family: 'Helen Regular', Sans-serif;
    font-weight: normal!important;
    transform: scale(1.1,1.1);
}
.under-head-logo-mobile img {
    width: 20vw;
}
.red-phone {
    position: absolute;
    top: 2vw;
    right: -50px;
    width: 25%;
}
.navbutton {
    display: contents;
}

.bluelist {
    background-color: #31739b;
    padding: 0;
    text-align: left!important;
    margin-top: 0!important;
    border: 0!important;
}
.bluelist li {
    width: 100%;
    padding: 0;
    text-align: left!important;
    text-transform: uppercase;

}


.bluelist a {
    color: white!important;
    font-family: 'Helen PRO Regular', Sans-serif!important;
    text-transform: uppercase;
    text-align: left!important;
    padding-left: 5px;
}
.bluelist a:focus {
    color: #31739b!important;
    background-color: #00DDFC!important;
    border-bottom: 0!important;
}
.bluelist a:hover {
    color: #31739b!important;
    background-color: #00DDFC!important;
    border-bottom: 0!important;
}
@media only screen and (max-width: 768px) {
    /*shows elements in a column*/
    ul{
        flex-direction: column;
    }

    /* deletes margin on top or bottom of the a tag*/
    li{
        margin: 0;
    }
    /* makes sure that the a tag will take the entire screen*/
    a{
        display: block;
    }
    .navbutton{
        /*makes the button visible*/
        display: block;
        /*since we are here, we can style it a little bit!*/
        padding: 2vw;
        font-size: 3vh;
        background-color: #AFE0FF;
        border: none;
        align-self: flex-start;
        /*outline none removes the default blue border that appears anytime you click on the button*/
        outline: none;

        cursor: pointer;
    }
    .red-phone {
        position: absolute;
        top: 2vw;
        right: 0;
        width: 25%;
    }
}
@media screen and (max-width: 768px){
    body {
        background-color: white;
    }
}
a {
    text-decoration: none;
}

.container {
    position: relative;
    margin: 35px auto 0;
    width: 300px;
    height: 534px;
    background-color: #533557;
    overflow: hidden;
}

/* Toggle Functionality */

#toggle {
    display: none; //hides the checkbox
}