@font-face {
    font-family: 'Aquarelle';
    src: url('../Fonts/Aquarelle.eot');
    src: url('../Fonts/Aquarelle.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Aquarelle.woff') format('woff'),
         url('../Fonts/Aquarelle.ttf') format('truetype'),
         url('../Fonts/Aquarelle.svg#Aquarelle') format('svg');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bline-h: 15%;
    --main-h: 85%;
    --left-w: 20%;
    --main-w: 60%;
    --right-w: 20%;
    --mweight:1200px;
}

  /*
  @font-face{
    font-family: Izhitsa; 
    src: url("/Fonts/cyrillicold.eot");
    src: local('☺'), 
     url("/Fonts/cyrillicold.eot?#iefix") format("embedded-opentype"), 
     url("/Fonts/cyrillicold.woff") format("woff"),
     url("/Fonts/cyrillicold.ttf") format("truetype"), 
     url("/Fonts/cyrillicold.svg#PT Serif") format("svg");
    font-weight: normal;
    font-style: normal;
}
  */

body {
    background-image: url('../Images/SFEarth.svg');
    background-size: 100% 100%;
    background-attachment: fixed;
    overflow: hidden;
}

a
{
    font-weight: bold;
}

a:active
{
    text-shadow: #2E156F 0 0 16px;
    color: #FFFFFF;
}


li
{
    text-align: left;
}

p
{   left:10px;
    right:10px;
    text-align: left;
}

h4
{
    font-size: 100%;
}

h5
{
    font-size: 90%;
}

                                  /*главная форма*/

    #SContent {   
    width: 90%;
    height: 90%; 
    min-width:var(--mweight);
    min-height:600px;
    position: absolute;
    left: 5%;
    top: 5%;
    background-image: url('../Images/BFon.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 10px; 
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 20px;
    overflow: hidden;
    text-align: center;
    z-index:3;
}


    #BlueLine { /*синяя линия сверху*/
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--bline-h);
        background-color: rgb(75,162,229);
        box-shadow: inset 0 0 20px #3A1A8B;
        z-index: 4;
    }

    #SLogo {
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url('../Images/SLabel.svg');
        background-size: auto 80%;
        width: 17%;
        height: 90%;
        position: absolute;
        left: 0;
        top: 0;
        border-top-right-radius: 10px;
        z-index: 50;
    }

    #MLogo {
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url('../Images/MLabel.svg');
        background-size: auto 260%;
        width: 11%;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border-top-right-radius: 10px;
        z-index: 50;
    }

    #midText {
        position: absolute;
        left: 17%;
        width: 72%;
        height: 100%;
    }

    #BLText { /*ЦЕНТР ТВОРЧЕСТВА */
        top: 18%;
        position: absolute;
        width: 100%;
        height: 40%;
        font-family: Calibri;
        font-weight: bolder;
        color: #FAB700;
        font-size: 230%;
        line-height: 100%;
        text-shadow: -1px -1px #3A1A8B;
    }

#SLozung {
    position: absolute;
    top: 37%;
    width: 100%;
    height: 30%;
    font-family: 'Aquarelle';
    color: #761B18;
    font-size: 170%;
    line-height: 190%;
    text-shadow: #FAB700 0 0 12px;
}

#SRMenu /*ГЛАВНОЕ МЕНЮ*/ {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    border-spacing:12px 0;
}

.RMenuItem {
    font-family: Calibri;
    font-size: 130%;
    line-height: 100%;
    color: #F2FAFE;
    text-decoration: none;
    font-weight: bold;
}

        .RMenuItem:hover {
            text-shadow: 0 0 16px #FFFFFF;
            color: #4E3599;
        }

        .RMenuItem:active {
            -moz-transform: scale(0.92);
            -ms-transform: scale(0.92);
            -webkit-transform: scale(0.92);
            -o-transform: scale(0.92);
            transform: scale(0.92);
        }

    /*ОСНОВНОЕ СОДЕРЖИМОЕ*/
    #SMainKeep {
        position: absolute;
        left: var(--left-w);
        width: var(--main-w);
        height: var(--main-h);
        top: var(--bline-h);
        z-index: 1;
        border-style: none none solid solid;
        border-color: #DCF2FC #DCF2FC #AADFF7 #DCF2FC;
        overflow: auto;
    }

    #SMainText {
        margin: 0;
        font-family: Calibri;
        color: #3A1A8B;
        font-size: 120%;
        padding: 2%;
    }


    /*ЛЕВОЕ МЕНЮ*/

    #SLMenu {
        position: absolute;
        left: 0;
        top: var(--bline-h);
        width: var(--left-w);
        height: var(--main-h);
        z-index: 0;
        background: linear-gradient(45deg, rgba(253,226,150,0), rgba(250,183,0,0.8));
        text-align: left;
        overflow: auto;
    }

    .LMenuItem {
        width: 80%;
        margin-top: 5%;
        margin-left: 10%;
        text-decoration: none;
        font-size: 130%;
        color: #761B18;
        font-family: Calibri;
        font-weight: bold;
        display: list-item;
        list-style-type: disc;
    }

        .LMenuItem:hover {
            text-shadow: #2E156F 0 0 16px;
            color: #F5F7FA;
            cursor: pointer;
        }

        .LMenuItem:active {
            -moz-transform: scale(0.95);
            -ms-transform: scale(0.95);
            -webkit-transform: scale(0.95);
            -o-transform: scale(0.95);
            transform: scale(0.95);
        }

.lmenuLittle {
    width: 80%;
    margin-top: 2%;
    margin-left: 14%;
    text-decoration: none;
    font-size: 110%;
    color: #761B18;
    font-family: Calibri;
    font-weight: bold;
    display: list-item;
    list-style-type:circle;
}

    .lmenuLittle:hover {
        text-shadow: #2E156F 0 0 16px;
        color: #F5F7FA;
        cursor: pointer;
    }

    .lmenuLittle:active {
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -o-transform: scale(0.95);
        transform: scale(0.95);
    }

.difText {
    display: none;
}

/*ПРАВЫЙ БЛОК*/
#RPart {
    position: absolute;
    top: var(--bline-h);
    left: 80%;
    width: var(--right-w);
    height: var(--main-h);
    border-style: none none solid solid;
    border-width: 3px;
    border-color: #AADFF7;
    overflow: auto;
}

    #RSText {
        width: 100%;
        z-index: 1;
        font-family: Calibri;
        font-size: 120%;
        color: #3A1A8B;
    }

#RMHeader {
    right: 0;
    top: 0;
    border-color: #FFFFFF;
    width: 100%;
    line-height: 160%;
    height: 5%;
    /* background-color: #7877B6;*/
    font-family: Calibri;
    color: #FAB700;
    font-size: 150%;
    text-shadow: -1px -1px #3A1A8B;
    z-index: 2;
    font-weight: bold;
}



    /*КАРТА*/
    #SMap {
        margin-top: 25%;
        margin-left: 25%;
        width: 50%;
        height: 6%;
        font-weight: bold;
        font-family: Calibri;
        color: #761B18;
        background-image: url('../Images/SArrow.svg');
        background-repeat: no-repeat;
        -moz-background-size: 100%;
        -webkit-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100% 100%;
        padding-top: 9%;
        padding-left: 3%;
        text-align: center;
        line-height: 120%;
        font-size: 120%;
    }


        #SMap:hover {
            text-shadow: #3A1A8B 0 0 16px;
            color: #E1E2F1;
        }

        #SMap:active {
            -moz-transform: scale(0.95);
            -ms-transform: scale(0.95);
            -webkit-transform: scale(0.95);
            -o-transform: scale(0.95);
            transform: scale(0.95);
        }

    #SFMap {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }



    /*счетчик посещений*/

    .Metrics {
        position: absolute;
        bottom: 3px;
        right: 3px;
        width: 80px;
        height: 15px;
        border: 0;
    }

    .SVideo {
        text-align: center;
    }

    .qErrors {
        color: red;
    }

    .questDate {
        display: inline-block;
        margin-left: 2px;
        margin-right: 2px;
        height: 40px;
        width: 92px;
        margin-top: 5px;
        font-family: Calibri;
        font-weight: bold;
        color: #761B18;
        background-color: rgb(227, 216, 151);
        border: 3px solid rgb(207, 162, 51);
        border-radius: 10px;
    }

        .questDate:focus, .questTime:focus, .isDisabled:focus, .wasDisabled:focus, .questAdmin:focus {
            outline: none;
        }

    #daysBlock {
    }

    #timeBlock {
    }

    .questDate:hover, .questTime:hover, .isDisabled:hover, .wasDisabled:hover {
        text-shadow: #2E156F 0 0 16px;
        color: #F5F7FA;
        cursor: pointer;
    }

    .questTime {
        display: inline-block;
        margin-left: 2px;
        margin-right: 2px;
        height: 25px;
        width: 92px;
        margin-top: 5px;
        font-family: Calibri;
        font-weight: bold;
        color: #761B18;
        background-color: rgb(227, 216, 151);
        border: 3px solid rgb(207, 162, 51);
        border-radius: 10px;
    }

    .questAdmin {
        display: inline-block;
        margin-left: 2px;
        margin-right: 2px;
        height: 25px;
        width: 92px;
        margin-top: 5px;
        font-family: Calibri;
        font-weight: bold;
        color: #761B18;
        background-color: rgb(227, 216, 151);
        border: 3px solid rgb(207, 162, 51);
        border-radius: 10px;
    }

    .questTime:disabled {
        -moz-transform: scale(0.93);
        -ms-transform: scale(0.93);
        -webkit-transform: scale(0.93);
        -o-transform: scale(0.93);
        transform: scale(0.93);
        color: #345185;
        background-color: rgb(167, 203, 228);
        border-color: rgb(98, 130, 168);
    }

    .isDisabled {
        -moz-transform: scale(0.93);
        -ms-transform: scale(0.93);
        -webkit-transform: scale(0.93);
        -o-transform: scale(0.93);
        transform: scale(0.93);
        color: #345185;
        background-color: rgb(167, 203, 228);
        border-color: rgb(98, 130, 168);
        cursor: pointer;
    }

    .wasDisabled {
        border-color: rgb(98, 130, 168);
    }

    .questTime:disabled:hover {
        text-shadow: none;
        color: #345185;
        cursor: default;
    }

    .activeButton {
        -moz-transform: scale(0.93);
        -ms-transform: scale(0.93);
        -webkit-transform: scale(0.93);
        -o-transform: scale(0.93);
        transform: scale(0.93);
        text-shadow: #2E156F 0 0 16px;
        color: #F5F7FA;
    }

    .socialEm {
        margin-top: 4px;
        margin-right:8px;
        width: 30px;
    }

    .addrText {
        margin-top: 6px;
        margin-bottom: 6px;
        text-align: center
    }

    /*Ввертикальное фото*/

    .SPhoto {
        width: 20%;
        margin-top: 30px;
    }

    /*Горизонтальное фото*/
    .SHPhoto {
        width: 40%;
        margin-top: 30px;
    }
    /*Фото в тексте*/
    .contentPhoto {
        width: 400px;
        margin-top: 20px;
        margin-left: -50px;
    }

    .BTable {
        font-weight: bold;
        line-height: 2;
    }

    /*Форма ввода текста*/

    .AInputForm {
        left: 200px;
        width: 440px;
        font-family: Calibri;
        font-size: 17px;
        color: #3A1A8B;
    }
    /*Фотогалерея*/

    .PhotoGallery {
        height: 80px;
        list-style-type: none;
        padding-left: 120px;
        margin-top: 20px;
        font-size: 90%;
        color: #761B18;
        font-family: Calibri;
        font-weight: bold;
        text-decoration: none;
    }

        .PhotoGallery:active {
            -moz-transform: scale(0.98);
            -ms-transform: scale(0.98);
            -webkit-transform: scale(0.98);
            -o-transform: scale(0.98);
            transform: scale(0.98);
        }

    .GalHPhoto {
        width: 100%;
        margin-top: 20px;
    }

.GalVPhoto {
    width: 49%;
    margin-top: 20px;
}

    /*Фотографии преподавателей*/
    .PhExperts {
        height: 50px;
        line-height: 50px;
        list-style-type: none;
        padding-left: 70px;
        margin-top: 20px;
        font-size: 15px;
        color: #761B18;
        font-family: Calibri;
        font-weight: bold;
        text-decoration: none;
    }

        .PhExperts:active {
            -moz-transform: scale(0.98);
            -ms-transform: scale(0.98);
            -webkit-transform: scale(0.98);
            -o-transform: scale(0.98);
            transform: scale(0.98);
        }
    /*Сcылки*/
    .ReDir {
        font-size: 100%;
        color: #3A1A8B;
        font-weight: bold;

    }

        .ReDir:hover {
            text-shadow: #2E156F 0 0 16px;
            color: #FFFFFF;
            cursor:pointer;
        }

    .EReDir {
        font-size: 125%;
        color: #3A1A8B;
        font-weight: bold;
    }

        .EReDir:hover {
            text-shadow: #2E156F 0 0 16px;
            color: #FFFFFF;
        }

    /*Изменение обычной ссылки при нажатии*/
    .UReDir:active {
        -moz-transform: scale(0.985);
        -ms-transform: scale(0.985);
        -webkit-transform: scale(0.985);
        -o-transform: scale(0.985);
        transform: scale(0.985);
    }


    /*Сcылки - заголовки*/
    .HReDir {
        font-family: 'Aquarelle';
        text-decoration: none;
        font-size: 110%;
        color: #3A1A8B;
    }

        .HReDir:hover {
            text-shadow: #2E156F 0 0 16px;
            color: #FFFFFF;
        }

    /*Заголовки в тексте*/
    .THead {
        font-family: 'Aquarelle';
        font-size: 138%;
        color: #3A1A8B;
    }

    /*кнопка подтверждения*/

    .SFButton {
        font-family: Calibri;
        font-size: 15px;
        color: #3A1A8B;
    }
    /*Маленькая эмблема Софии для заголовков*/
.PhotoMini {
    background-size: 20%;
} 

@media (max-width: 1000px) and (orientation:portrait) { /*В СЛУЧАЕ МОБИЛЬНОГО ТЕЛЕФОНА*/

    #SContent {
        width: 100%;
        height: 100%;
        left: 0;
        margin-left: 0;
    }

    #SLogo {
        display:none;
    }

    #MLogo {
        display: none;
    }


    #BLText {
        top: 10%;
        position: absolute;
        width: 100%;
        height: 40%;
        font-family: Calibri;
        font-weight: bolder;
        color: #FAB700;
        font-size: 260%;
        line-height: 100%;
        text-shadow: -1px -1px #3A1A8B;
    }


    #midText {
        left: 0;
        width: 100%;
        height: 100%;
    }

    .RMenuItem {
        font-size: 190%;
    }

    .LMenuItem {
        font-size: 160%;
    }

    .lmenuLittle {
        
        font-size: 150%;
     
    }

    #RMHeader {
        font-size: 210%;
    }

    #RSText {
        font-size: 180%;
    }

    #SMap {
        line-height: 140%;
        font-size: 150%;
        padding-top: 17%;
    }

    .PhotoGallery {
        font-size: 60%;
        margin-top: 50px;
    }
}

@media (max-width: 1000px) and (orientation:landscape) { /*В СЛУЧАЕ МОБИЛЬНОГО ТЕЛЕФОНА*/


    #SContent {
        min-height: 550px;
        height: 100%;
        left: -6.1%;
    }

    #SLogo {
        display: none;
    }

    #MLogo {
        display: none;
    }

    #SLozung {
        display:none;
    }

    #BlueLine { /*синяя линия сверху*/
        min-height: 5px;
    }

    #BLText {
        font-size: 150%;
    }

    #midText {
        left: 0;
        width: 100%;
        height: 100%;
    }

    .RMenuItem {
        font-size: 150%;
    }

    .LMenuItem {
        font-size: 110%;
    }

    #RMHeader {
        font-size: 120%;
    }

    #RSText {
        font-size: 110%;
    }

    #SMap {
        line-height: 120%;
        font-size: 120%;
        padding-top: 3%;
    }

    .PhotoGallery {
        font-size: 80%;
        margin-top: 50px;
    }
 
 }

@media (max-width: 1500px) and (orientation:landscape) {

    #SContent {
        top: 2%;
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -o-transform: scale(0.9);
        transform: scale(0.9);
    }
 }

@media (max-height: 830px) {
    #SLozung {
        display: none;
    }

    #BLText {
        font-size: 170%;
    }
}
.vertMenu {
    position: absolute;
    width: 75%;
    display: none;
    top: 80%;
    background-color: rgb(250,210,80);
    padding: 12px 20px;
    font-size: 86%;
    text-align: center;
    white-space: nowrap;
    opacity: 1;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 5px;
}


.RMenuItem:hover + .vertMenu {
    display: block;
}

.vertMenu:hover {
    display: block;
    opacity: 1;
}

.leftImg {
    float: left;
    margin-right: 20px;
    margin-top:0;
}