@import url('https://fonts.googleapis.com/css?family=Montserrat|Montserrat+Alternates|Ubuntu');
* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    font-family: 'Montserrat';
    font-weight: 400;
    line-height: 1.5;
    background: url(../img/background-img.sv);
    background-position: center;
    background-size: cover;
}

header {
    height: 66px;
}

nav {
    padding: 8px;
}

.act {
    border-bottom: 1px solid rgba(238,99,99,0.95);
}

.cross {
    color: rgba(200, 70, 70, 1);
    text-decoration: none;
    border-bottom: 1px dotted #EE6363;
}

.logo {
    float: left;
    margin: 4px 10px 0 16px;
}

.logo a {
    color: #EE6363;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0px;
    text-decoration: none;
}

.logo a img {
    width: 150px;
}

.info-header {
    display: table;
    float: right;
    margin: 0 10px 0 0;
}

.info-header img {
    width: 50px;
    height: 50px;
}

.info-phone-link {
    display: table-row;
}

.info-phone-link li {
    list-style: none;
    padding: 0 5px 0 10px;
}

.info-header-studio {
    display: table-cell;
    vertical-align: middle;
    font-weight: 900;
}

.info-header-studio a {
    text-decoration: none;
    color: rgba(100,0,0,0.7);
}

.info-header-address {
    display: table-cell;
    vertical-align: middle;
    font-size: 0.8em;
}

.info-header-address a {
    text-decoration: none;
    color: rgba(0,0,0,0.8);
}

.info-phone-number {
    display: table-cell;
    vertical-align: middle;
    color: rgba(100,0,0,0.7);
    font-weight: 900;
}

.info-phone-icon {
    display: table-cell;
    vertical-align: middle;
}

.nav-wrapper ul {
    float: right;
}

.nav-wrapper ul li {
    display: inline-block;
}

.nav-wrapper ul li:not(:first-child) {
    margin-left: 48px;
}

.nav-wrapper ul li:last-child {
    margin-right: 24px;
}

.nav-wrapper ul li a {
    display: inline-block;
    outline: none;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1.2px;
    font-weight: 600;
}

.topbar-nav {
    background-color: rgba(238,110,110,1);
    border-top: 4px solid rgba(250,190,190);
    border-bottom: 4px solid rgba(250,190,190);
}
.topbar-nav ul {
    margin: 0;
    padding: 0;
    text-align: center;
}
.topbar-nav li {
    margin: 0;
    list-style: none;
    display: inline-block;
    *display:inline; /* ie7 */
}
.topbar-nav a {
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    line-height: 100%;
}
.topbar-nav a:hover {
    color: #000;
}

    .topbar-btn {
        display: none;
}

/* Кнопка Вверх страницы */
.toTop {
    width: 40px;
    border: 2px solid rgba(238,99,99,1);
    border-radius: 10px;
    text-align: center;
    padding: 5px 10px 5px 10px;
    position: fixed;
    z-index: 9900;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
    color: rgba(238,99,99,1);
}

section {
    display: block;
	padding: 0;
	margin: 0;
    background: #fff;
    border-top: 1px solid rgba(200, 155, 155, 0.3);
    border-bottom: 1px solid rgba(200, 155, 155, 0.3);
}

.strike {
    text-decoration: line-through;
}

.p-center {
    text-align: center;
    color: rgba(70,0,0,0.7);
    font-weight: 900;
}

.spoiler_menu {
    border: 1px solid rgba(238,99,99,1);
    padding: 1.04%;
    cursor: pointer;
}

.spoiler_menu summary {
    text-align: center;
    color: rgba(208,99,99,1);
    font-weight: 900;
}

.faq-spoiler {
    border: 1px solid rgba(238,99,99,0.2);
    margin-bottom: 1%;
    cursor: pointer;
}

.faq-spoiler[open] {
    transition: all 0.8s ease;
    margin: 5% 0 5% 0;
    border: 2px solid rgba(238,99,99,0.5);
}

summary::-webkit-details-marker{display:none;}
summary::marker{display:none;}

.faq-spoiler summary {
    border-bottom: 1px solid rgba(238,99,99,0.3);
    padding: 1%;
    list-style-type:none;
    transition: all 0.8s ease;
    color: rgba(130,70,70,1);
    font-weight: 400;
}

.faq-spoiler span {
    display: flow-root;
}

.faq-spoiler summary:before {
    float: left;
    clear: left;
    padding: 0 2% 0 1%;
    content: url(../img/icons/details_icon_after_open.svg);
}

.faq-spoiler[open] > summary:before {
    content: url(../img/icons/details_icon_after_close.svg);
}

.faq-spoiler[open] > summary {
    border-left: 3px solid rgba(238,99,99,1.0);
    font-weight: 900;
}

.faq-spoiler p {
    margin: 10px;
}

.faq-spoiler ul {
    margin: 0 10px 0 0;
}

.faq-spoiler ul li {
    background: url(../img/icons/ul_li.svg) no-repeat;
    background-position: left; 
    margin-bottom: 10px;
    padding: 0 0 0 25px;
    text-align: justify;
}

summary:focus {
    outline: 0;
    outline: none;
}

.modal-window {
    position: absolute;
    width: 100%;
    max-width: 864px;
    left: 50%;
    transform: translate(-50%);
    padding: 30px 10px 40px 10px;
    margin: 20px auto;
    z-index: 9900;
    text-align: justify;
    background: rgba(250,250,250,1);
    border-radius: 4px;
    box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.65);    
}

.modal-window-overlay {
    position: absolute;
    visibility: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    z-index: 9900;
    background: rgba(0,0,0,0.5);
}

.modal-window-overlay:target {
    display: block;
    visibility: visible;
}

.modal-window-close-top {
    display: block;
    position: absolute;
    top: -10px;
    right: 60px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-weight: 900;
    background: rgba(238,99,99,1);
}

.modal-window-close-bottom {
    display: block;
    position: absolute;
    right: 50px;
    margin-top: 10px;
    padding: 15px 20px 15px 20px;
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-weight: 900;
    background: rgba(238,99,99,1);
}

.modal-img {
    margin: 20px 0 5px 0;
}

.modal-img img {
    display: block;
    width: 100%;
    height: 80vh;
    object-fit: cover;
}

.modal-img figcaption {
    display: block;
    font-size: 0.8em;
    text-align: center;
    padding: 0;
    margin: 0;
}

.modal-video {
    height: 80vh;
}

section h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 10px;
    font-weight: 900;
    color: rgba(100,0,0,0.7);
    line-height: 1.2;
	text-align: center;
}

section h1 {
    font-size: 1.6em;
}

section h2 {
    font-size: 1.4em;
}

section h3 {
    font-size: 1.2em;
}

section p {
	text-align: justify;
}

section p img {
    width: 100%;
}

.note {
    font-size: 0.8em;
    padding: 10px 0 0 0;
    border-top: 1px solid rgba(200, 155, 155, 0.3);
}

section ul {
    list-style: none;
}

.std {
    padding: 0 0 0 15px;
}

.std li {
    background: url(../img/icons/ul_li.svg) no-repeat;
    background-position: left; 
    margin-bottom: 10px;
    padding: 0 0 0 25px;
    text-align: justify;
}

.resume {
    margin-top: 5px;
    padding: 0 0 0 10px;
}

.vidy-table {
    display: table;
    padding: 0 0 0 10px;
}

.vidy-table li {
    display: table-row;
    height: 62px;
    margin-bottom: 15px;
    
}

.table-row {
    display: table-row;
    height: 62px;
    margin-bottom: 15px;
    
}

.vidy-table li span {
    display: table-cell;
    padding: 0 0 0 62px;
    vertical-align: middle;
    background-position: left;
}

.vidy-table span i {
    display: table-cell;
    padding: 0 10px 0 52px;
    vertical-align: middle;
    background-position: left;
}

.vidy-table a {
    color: rgba(200, 70, 70, 1);
    text-decoration: none;
    font-weight: 900;
    border-bottom: 1px dotted #EE6363;
}

.test {
    background: url(../img/icons/icon_test.svg) no-repeat;
}

.offer-20 {
    background: url(../img/icons/icon_offer_20.svg) no-repeat;
}

.garantii {
    background: url(../img/icons/icon_garantii.svg) no-repeat;
}

.volumeFast {
    background: url(../img/icons/icon_fastD.svg) no-repeat;
}

.volume2-4 {
    background: url(../img/icons/icon_3D.svg) no-repeat;
}

.volume5-7 {
    background: url(../img/icons/icon_5D.svg) no-repeat;
}

.bottom {
    background: url(../img/icons/icon_bottom.svg) no-repeat;
}

.other {
    background: url(../img/icons/icon_other.svg) no-repeat;
}

.lami {
    background: url(../img/icons/icon_lami.svg) no-repeat;
}

.procedura {
    background: url(../img/icons/icon_procedura.svg) no-repeat;
}

.faq {
    background: url(../img/icons/icon_faq.svg) no-repeat;
}

.cena {
    background: url(../img/icons/icon_cena.svg) no-repeat;
}

.kursy_narashivanie {
    background: url(../img/icons/icon_kursy_narashivanie.svg) no-repeat;
}

.kursy_vybor {
    background: url(../img/icons/icon_kursy_vybor.svg) no-repeat;
}

.kursy_lami {
    background: url(../img/icons/icon_kursy_lami.svg) no-repeat;
}

.kachestvo {
    background: url(../img/icons/icon_kachestvo.svg) no-repeat;
}

.uhod {
    background: url(../img/icons/icon_uhod.svg) no-repeat;
}

.snyatie {
    background: url(../img/icons/icon_snyatie.svg) no-repeat;
}

.protivopokazaniya {
    background: url(../img/icons/icon_protivopokazaniya.svg) no-repeat;
}

.blog-trend {
    background: url(../img/icons/icon_blog_trend.svg) no-repeat;
}

.blog-industri {
    background: url(../img/icons/icon_blog_industri.svg) no-repeat;
}

.blog-story {
    background: url(../img/icons/icon_blog_story.svg) no-repeat;
}

.blog-material {
    background: url(../img/icons/icon_blog_material.svg) no-repeat;
}

.blog-instrument {
    background: url(../img/icons/icon_blog_instrument.svg) no-repeat;
}

.contact-details {
    background: url(../img/icons/icon_contact_details.svg) no-repeat;
}

.contact-karta {
    background: url(../img/icons/icon_contact_map.svg) no-repeat;
}

.contact-resume {
    background: url(../img/icons/icon_contact_resume.svg) no-repeat;
}

.contact-obrazovanie {
    background: url(../img/icons/icon_contact_obrazovanie.svg) no-repeat;
}

.volume1 {
    background: url(../img/icons/icon_1D.svg) no-repeat;
}

.volume2 {
    background: url(../img/icons/icon_2D.svg) no-repeat;
}

.volume3 {
    background: url(../img/icons/icon_3D.svg) no-repeat;
}

.volume4 {
    background: url(../img/icons/icon_4D.svg) no-repeat;
}

.volume5 {
    background: url(../img/icons/icon_5D.svg) no-repeat;
}

.number1 {
    background: url(../img/icons/icon_number_1.svg) no-repeat;
}

.number2 {
    background: url(../img/icons/icon_number_2.svg) no-repeat;
}

.number3 {
    background: url(../img/icons/icon_number_3.svg) no-repeat;
}

.number4 {
    background: url(../img/icons/icon_number_4.svg) no-repeat;
}

.menu_level1 {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.menu_level1 li {
    margin: 0 0 10px 0;
}

.menu_level1 a {
    color: rgba(238,80,80,1);
    text-decoration: none;
    font-size: 1.2em;
}

.menu_level1 a:visited {
    color: rgba(215,80,80,1)
}

.menu_level2 {
    margin: 0 0 0 0;
    padding: 0 0 10px 20px;    
}

.menu_level2 li {
    margin: inherit;
    padding: 5px 0 5px 0;
}

.menu_level2 a {
    color: rgba(238,110,110,1);
    text-decoration: none;
    font-size: 1em;
    margin: 10px 0 10px 0;
} 

section table {
    border-collapse: collapse;
    border-style: solid;
    border-color: #c8c8c8;
    border-width: 1px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
}

section th {
    background-color: #dcdcdc;
    border-style: solid;
    border-color: #c8c8c8;
    border-width: 1px;
    padding: 5px;
    text-align: center;
}

section td {
    border-style: solid;
    border-color: #c8c8c8;
    border-width: 1px;
    padding: 3px 10px 3px 10px;
}

.bold-red70 {
    font-weight: 900;
    color: rgba(70,0,0,0.7);
}

.faq-lami {
    display: block;
    font-weight: 900;
    color: rgba(80,0,0,0.7);
}

.otz-nav {
    padding: 0;
    text-align: center;
}

.otz-nav li {
    display: inline-block;
    width: 85px;
    margin: 5px 10px 5px 10px;
    padding: 10px 0 10px 0;
    background-color: rgba(238,110,110,1);
    text-align: center;
}

.otz-nav a {
    padding: 10px 20px 10px 20px;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    font-weight: 900;
}

.otz-name {
    font-weight: 900;
    color: rgba(70,0,0,0.7);
    margin: 0 10px 0 5px;
}

.otz-date {
    font-size: 0.8em;
}

.otz-note {
    font-weight: initial;
    font-size: 0.8em;
}

.contact {
    text-align: center;
    font-size: 1.4em;
}

.contact img {
    width: 60px;
    height: 60px;
    margin: 15px 5px 0 5px;
    object-fit: contain;
}

.std_link {
    margin-left: 5px;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: 900;
    color: rgba(238,80,80,1);
}

.down {
    text-align: center;
    border-bottom-width: 2px;
}

.non-caption {
    display: block;
    padding: 0;
    margin: 0;
}

.non-caption img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caption {
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
}

.caption img {
    display: block;
    width: 100%;
    height: 93%;
    object-fit: cover;
}

.caption figcaption {
    display: block;
    padding: 0 0 10px 0;
    margin: 10px 0 0 0;
    border-bottom: 1px solid rgba(238,99,99,0.6);
    border-radius: 10px;
}

video {
    
   width: 100%;
   margin: auto; 
   object-fit: cover;
    /* height: 100%; */
}

.link {
    padding: 15px 0;
    text-align: center;
}

.info-link {
    padding: 10px 20px 10px 20px;
    border: 4px solid rgba(238,99,99,1);
    border-radius: 20px;
    text-decoration: none;
    font-family: "Montserrat Alternates";
    font-weight: 900;
    font-size: 1.2em;
    color: rgba(238,99,99,1);

}

.nextpage {
    text-align: center;
}

.nextpage a {
    display: inline-block;
    color: rgba(238,80,80,1);
    text-decoration: none;
    font-weight: 900;
}

footer {
    display: block;
    margin: 0;
    padding: 10px;
    font-size: 0.8em;
    text-align: center;
}

.footer_link a {
    display: inline-block;
    padding: 5px 5px 5px 5px;
    font-weight: 600;
    color: rgba(238,80,80,1);
    text-decoration: none;
}

.footer_link a:visited {
    display: inline-block;
    padding: 5px 5px 5px 5px;
    font-weight: 600;
    color: rgba(215,80,80,1);
}

@media screen and (min-width: 1310px){

    main {
        display: block;
        margin: 0 auto;
        padding: 15px 15px 0 15px;
        max-width: 1680px;

        position: relative;
        display: grid;
        grid-row-gap: 15px;
        grid-column-gap: 25px;
        grid: 1fr / repeat(3, 1fr);
    }

}

@media screen and (max-width: 1309px){

    main {
        display: block;
        margin: 0 auto;
        padding: 15px 15px 0 15px;
        max-width: 1309px;

        position: relative;
        display: grid;
        grid-row-gap: 15px;
        grid-column-gap: 25px;
        grid: 1fr / repeat(2, 1fr);
    }
}

@media screen and (max-width: 959px) {
    .info-header-studio {
        display: none;
    }
}

@media screen and (max-width: 864px) {
    .logo {
        padding: 0;
    }
    

    .nav-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: #fff;
        opacity: 0;
    }
    .nav-wrapper ul {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
    }
    .nav-wrapper ul li {
        display: block;
        float: none;
        width: 100%;
        text-align: right;
        margin-bottom: 10px;
    }
    
    .nav-wrapper ul li:nth-child(1) a {
        transition-delay: 0.2s;
    }
    
    .nav-wrapper ul li:nth-child(2) a {
        transition-delay: 0.3s;
    }
    
    .nav-wrapper ul li:nth-child(3) a {
        transition-delay: 0.4s;
    }
    
    .nav-wrapper ul li:nth-child(4) a {
        transition-delay: 0.5s;
    }
    
    .nav-wrapper ul li:not(:first-child){
        margin-left: 0;
    }
    
    .nav-wrapper ul li a {
        padding: 10px 24px;
        opacity: 0;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1.2px;
        transform: translateX(-20px);
        transition: all 0.2s ease;
    }
    
    .nav-btn {
        position: fixed;
        right: 10px;
        top: 10px;
        display: block;
        width: 48px;
        height: 48px;
        cursor: pointer;
        z-index: 9899;
        border-radius: 50%;
    }
    
    .nav-btn i {
        display: block;
        width: 20px;
        height: 2px;
        background: #000;
        border-radius: 2px;
        margin-left: 14px;
    }
    
    .nav-btn i:nth-child(1) {
        margin-top: 16px;
    }
    
    .nav-btn i:nth-child(2) {
        margin-top: 4px;
        opacity: 1;
    }
    
    .nav-btn i:nth-child(3) {
        margin-top: 4px;
    }

    .topbar-wrapper {
        position: absolute;
        top: 120px;
        left: 0;
        border-bottom: solid 1px rgba(238,99,99,0.4);
        margin: 0;
        padding: 20px 0 10px 0;
        width: 100%;
        z-index: -1;
        background: #fff;
        opacity: 0;
        transition: all 0.4s ease;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.6);
    }
  
    .topbar-wrapper ul li {
        display: block;
        padding: 5px 0 5px 0;
    }

    .topbar-nav a {
        color: rgba(200, 70, 70, 1);
        font-weight: 900;
    }
    
    .topbar-btn {
        display: block;
        color: rgb(255, 255, 255);
        text-align: center;
        font-weight: 900;
        cursor: pointer;
        z-index: 9899;
        border-radius: 50%;
    }

    .topbar-btn:before {
        margin-right: 5px;
        content: url(../img/icons/navigation_icon_before.svg);
    }

    #topbar:checked + .topbar-btn:before {
        margin-right: 5px;
        content: url(../img/icons/navigation_icon_after.svg);
    }

    #topbar:checked ~ topbar-nav {
        border-bottom: 0;
    }


    main {
        margin: 0 auto;
        padding: 15px 10px 0 10px;


        display: grid;
        grid-gap: 15px;
        grid: 1fr / 1fr;
    }

    section h1 {
    font-size: 1.3em;
    }

    section h2 {
    font-size: 1.2em;
    }

    section h3 {
    font-size: 1.1em;
    }
}

@media screen and (max-width: 689px) {
   
    .info-header-address {
        display: none;
    }
}

@media screen and (max-width: 419px) {
    
    .info-phone-number {
        display: none;
    }
}

@media screen and (max-width: 340px) {
    
    main {
        padding: 15px 5px 0 5px;
        width: 100%;
        display: grid;
        grid-gap: 15px;
        grid: 1fr / 1fr;
        font-size: 0.9em;
    }
    
    section h1 {
    font-size: 1.3em;
    }

    section h2 {
    font-size: 1.2em;
    }

    section h3 {
    font-size: 1.1em;
    }

    section p {
        line-height: 1.3;
    }

    .vidy {
    padding: 0 0 0 10px;
    }
}

@media screen and (max-width: 279px) {
    
    .info-phone-icon {
        display: none;
    }

    main {
        font-size: 0.8em;
    }
}

#nav:checked + .nav-btn {
    transform: rotate(45deg);
}

#nav:checked + .nav-btn i {
    background: #000;
    transition: transform 0.2s ease;
}

#nav:checked + .nav-btn i:nth-child(1) {
    transform: translateY(6px) rotate(180deg);
}

#nav:checked + .nav-btn i:nth-child(2) {
    opacity: 0;
}

#nav:checked + .nav-btn i:nth-child(3) {
    transform: translateY(-6px) rotate(90deg);
}

#nav:checked ~ .nav-wrapper {
    z-index: 9890;
    opacity: 1;
}

#nav:checked ~ .nav-wrapper ul li a {
    opacity: 1;
    transform: translateX(0);
}

#topbar:checked ~ .topbar-wrapper {
    z-index: 9889;
    opacity: 1;
}

#topbar:checked ~ .topbar-wrapper ul li a {
    opacity: 1;
    transform: translateX(0);
}

.hidden {
    display: none;
}