:root {
    --cl-orange:#f76116;
    --cl-violet:#6d4895;
    --cl-violet:#53088c;
    --cl-fon-gray:#f7f7f7;
}

@font-face {
    font-family: 'OpenSans';
    font-style: normal;
    font-weight:400;
    src: local('OpenSans'),
        url(../fonts/OpenSans.ttf) format('truetype');}

a {
    text-decoration:none;
    color:var(--cl-orange);}
    
a:hover{
    color:var(--cl-violet);}

.content h1{
    font-size:22pt;
    color:var(--cl-orange);
    margin:10px 0 20px;
    line-height:1;}
    
.content h2{
    font-size:20pt;
    color:var(--cl-violet);
    margin:20px 0 15px;
    line-height:1.2;}
    
.content h3{
    font-size:18pt;
    color:var(--cl-violet);
    margin:20px 0 15px;
    line-height:1.2;}
    
.content p{
    line-height:1.5;}
    
.content strong{
    font-weight:600;}

.content .item-page .item-image{
    width:100%;
    max-width:400px;
    float:right;
    padding: 5px 0 5px 20px;}
    
.content .item-page .item-image img{
    width:100%;}

@media screen and (max-width:700px) {
    
    .content .item-image{
        width:100%;
        max-width:100%;
        padding: 0 0 10px;}
}

*{
    box-sizing:border-box;
}
html {
    height:100%;}
    
body{
    min-width:320px;
    font-family: 'OpenSans';
    line-height:1.3;
    height:100%;
    background:#fff;

}
.wrapper {
    min-width:100%;
	display: flex;
	flex-direction: column;
	height:100%;
	min-height: 100%;
}

header {
    background:var(--cl-fon-gray);
    width:100%;
    box-shadow:0 2px 10px #6d4895;
    display:table;
    //max-height:180px;
    z-index:2;
    position:relative;
    padding:0 20px;
    //flex: 1 0 auto;
}

header .header{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    border-bottom: 1px solid var(--cl-violet);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;}

header .header .logo{
    padding:10px 50px 10px 0;
    max-width:220px;
}

header .header .logo img{
    width:100%;}


/***** ***** ***** Версия для слабовидящих ***** ***** *****/

.templates {
    //padding:25px 20px 0 50px;
    //border:1px solid #ccc;
    
}

.templates  #CG_TS_Select {
    padding:30px 10px 0 50px;
    border:none;
    overflow: hidden;
    background:var(--cl-fon-gray);
    outline:none;}
    
.templates  #CG_TS_Select option{
    font-size:12pt;
    cursor:pointer;
    background:var(--cl-fon-gray);
    background-image:url(../images/eye_um.png);
    background-repeat:no-repeat;
    background-size:55px;
    background-position:left top;
    color:var(--cl-violet);
    padding:10;
    outline:none;
    border:none;
    padding: 8px 0 8px 65px;
    font-weight:600;}
    
.templates #CG_TS_Select option[selected="selected"]{
    display:none;}

header .menu{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:10px 0;}

header .menu ul{
    display:flex;
    flex-wrap:wrap;
    gap: 7px 20px;}
    
header .menu a{
    font-size:11pt;
    color:var(--cl-violet);
    text-decoration:none;
    text-transform:uppercase;
    padding:3px 0;}

header .menu a:hover{
    color:var(--cl-orange);}

header .contact {
    padding:15px 0 5px 20px;
    text-align:right;}

header .contact a{
    font-size:16pt;
    font-weight:600;
    line-height:1.4;}
    
header .contact a.email{
    color:var(--cl-violet);
    font-size:12pt;}
    
header .contact a.email:hover{
    color:var(--cl-orange);}
    
@media screen and (max-width:900px) {
    
    header .header .logo{
        order:1;}
        
    header .contact {
        order:2;}
        
    header .templates {
        order:3;
        min-width:100%;
        padding:0 0 10px;}
        
    .templates  #CG_TS_Select {
        padding:10px 10px 0 50px;}
}
@media screen and (max-width:500px) {
    header .contact {
    width:100%;
    padding:10px 0;
    text-align:left;}
    
    .templates  #CG_TS_Select {
        padding:30px 0 0 0;}
        
    .templates  #CG_TS_Select option{
        font-size:11pt;}
}

/***** ***** ***** НАВИГАЦИЯ ***** ***** *****/

.navigation {
    width:100%;
    padding:15px 20px 20px;}
    
.navigation > nav{
    width:100%;
    margin:0 auto;
    max-width:1280px;}

.navigation > nav li{
    float:left;
    margin: 0 10px 0 0;
    border-right: 1px solid #000;
    padding: 0 10px 0 0;}
    
.navigation > nav li:last-child{
    border-right:none;}


/* Слайдер */

.slider {
    width:100%;
    min-height:700px;
    min-height:calc(100vh - 180px);
    background:url(../images/fon1.jpg);
    background-position:center;
    background-size:cover;}

.slider > div{
    width:100%;
    min-height:700px;
    min-height:calc(100vh - 180px);
    background-image: -webkit-linear-gradient(top, rgba(71, 71, 71, 0), rgb(83, 8, 140));
    position:relative;}
    
.slider > div p{
    color:#fff;
    font-size:19pt;
    position:absolute;
    bottom:100px;
    width:100%;
    text-align:center;
    padding:0 20px;}
    
.slider > div .next{
    width:34px;
    height:34px;
    display:block;
    border-top:2px solid #fff;
    border-left:2px solid #fff;
    position:absolute;
    bottom:40px;
    left:calc(50% - 17px);
    transform:rotate(-135deg);
    animation-duration: 2s;
    animation-name: slider_next;
    animation-iteration-count: infinite;}

@keyframes slider_next {
  0% {
    bottom:55px;}

  50% {
    bottom:45px;}
    
  100%{
    bottom:55px;}
}

@media screen and (max-width:700px) {
    .slider {
        min-height:500px;}
    .slider > div{
        min-height:500px;}
}

/***** ***** ***** Цель школы «Умное поколение» ***** ***** *****/

.cell {
    width:100%;
    background:#fff;
    padding:0 20px;
    display:table;}
    
.cell #cell{
    display:table;
    width:100%;
    padding:80px 0;}

.cell #cell > div {
    margin:0 auto;
    width:100%;
    max-width:800px;
    background:var(--cl-orange);
    color:#fff;
    text-align:center;
    padding:30px 50px 50px;
    line-height:2;}

.cell > div h2{
    font-size:22pt;
    margin:15px 0 20px;
    font-weight:600;
    line-height:1.3;}
    
@media screen and (max-width:700px) {
    
    .cell #cell{
        padding:30px 0 20px;}
        
    .cell #cell > div {
        padding:30px 20px;}
        
    .cell > div h2{
    font-size:18pt;}
}
    
/***** ***** ***** Миссия ***** ***** *****/

.missia {
    width:100%;
    background:#fff;
    padding:10px 20px;}
    
.missia > div {
    margin:0 auto;
    width:100%;
    max-width:1280px;
    line-height:2;}
    
.missia > div table tr{
    width:100%;
    display:flex;
    flex-wrap:wrap;}

.missia > div table tr td:first-child{
    width:46%;
    padding: 10px 15px 0 0;}
    
.missia > div table tr td:last-child{
    width:54%;
    padding: 0 0 0 35px;}

.missia img{
    width:100%;}
    
.missia h3 {
    color:var(--cl-orange);
    font-size:22pt;
    text-align:center;
    font-weight:600;
    position:relative;}
    
.missia h3:before {
    display:block;
    width:50px;
    left:calc(50% - 22px);
    bottom:-10px;
    position:absolute;
    content:"";
    border-bottom: 3px solid #826353;}

.missia p,
.missia ol{
    font-size: 12pt;
    color:#826353;
    margin:15px 0;}

.missia ol li {
    list-style-type:decimal;
    margin:0 0 0 20px;}
    
.missia strong {
    color:var(--cl-orange);}
    
@media screen and (max-width:700px) {
    
    .missia > div table tr td:first-child,
    .missia > div table tr td:last-child{
        width:100%;
        padding: 10px 0;
        line-height:1.5;
    }
    .missia p{
        line-height:1.5;
    }
}
 

/***** ***** ***** Творческие и интеллектуальные студии частной школы ***** ***** *****/

.studii {
    width:100%;
    background:#fff;
    padding:30px 20px;
    line-height:2;}

.studii > div {
    margin:0 auto;
    width:100%;
    max-width:1280px;}
    
.studii > div table{
    margin:40px 0;}

.studii > div table td{
    display:flex;
    flex-wrap:wrap;
    gap:20px 40.5px;}

.studii > div table td img{
    width:calc(33.33% - 27px);
    margin:10px 0 20px;}
    
.studii p{
    color:var(--cl-violet);
    text-align:center;
    font-size:13pt;}
    
.studii p strong{
    font-weight:600;}
    
.studii a.readmore{
    display:table;
    padding:12px 40px;
    color:var(--cl-violet);
    border:2px solid var(--cl-violet);
    border-radius:30px;
    font-weight:600;
    margin:0 auto;}
    
.studii a.readmore:hover{
    color:var(--cl-orange);
    border:2px solid var(--cl-orange);}
    
@media screen and (max-width:700px) {
    
    .studii > div table td img{
        width:calc(50% - 27px);}
    
    .studii p{
        line-height:1.5;
    }
}

@media screen and (max-width:500px) {
    
    .studii > div table td img{
        width:100%;
        margin:5px 0;}
}

/***** ***** ***** История создания ***** ***** *****/

.history {
    width:100%;
    background:#fff;
    padding:30px 20px;
    text-align:center;}
    
.history > div {
    margin:0 auto;
    width:100%;
    max-width:1280px;
    line-height:2;}
    
.history > div table tr{
    width:100%;
    display:flex;
    flex-wrap:wrap;}

.history > div table tr td:first-child{
    width:46%;
    padding: 10px 15px 0 0;}
    
.history > div table td:last-child{
    width:54%;
    padding: 15px 0 0 35px;}

.history img{
    width:100%;}
    
.history h3 {
    color:var(--cl-violet);
    font-size:22pt;
    text-align:center;
    font-weight:600;
    position:relative;}
    
.history p,
.history ol{
    font-size: 12pt;
    color:#826353;
    margin:15px 0;}

.history ol li {
    list-style-type:decimal;
    margin:0 0 0 20px;}
    
.history strong {
    color:var(--cl-orange);}

@media screen and (max-width:700px) {
    
    .history {
        padding:0px 20px;}
    
    .history > div table tr td:first-child{
        width:100%;
        padding:10px 0 0;}
    
    .history > div table td:last-child{
        width:100%;
        padding:0;}
    .history p{
        line-height:1.5;
    }
}    


/***** ***** ***** Наши гости - Известные люди в образовании ***** ***** *****/

.guest {
    width:100%;
    background:#fff;
    padding:30px 20px 0;
    text-align:center;}

.guest > div {
    margin:0 auto;
    width:100%;
    max-width:1280px;
    line-height:2;}

.guest > div h3{
    color:var(--cl-orange);
    font-size:42pt;
    font-weight:600;
    line-height:1.3;}
    
.guest > div h4{
    color:var(--cl-orange);
    font-size:22pt;
    font-weight:600;
    line-height:1.3;}
    
.guest > div strong{
    font-weight:600;
    color:var(--cl-violet);}

.guest > div table{
    width:100%;
    margin:50px 0 0px;}

.guest > div table tr{
    width:100%;}
    
.guest > div table td{
    padding:0 15px;
    width:33.33%;}

.guest > div table p {
    line-height:1.5;
    margin:15px 0;}
    
.guest > div table p:nth-child(3) {
    font-style: italic;
    font-size:11pt;
    color:#826353;}

.guest > div img{
    width:70%;}
    
@media screen and (max-width:700px) {
    .guest > div table td{
        min-width:100%;
        max-width:100%;
        display:block;
        clear:both;
        padding:0 0 10px;}
        
    .guest > div table td img{
        border:1px solid #f3f3f3;
        border-radius:49%;}
        
    .guest > div table{
        margin:20px 0 0px;}
}

@media screen and (max-width:500px) {
    .guest > div h3{
        font-size:32pt;

    }
        
    .guest > div h4{
        font-size:18pt;

    }    
}

.content{
    width:100%;
    max-width:1320px;
    padding:0 20px 30px;
    margin:0 auto;
    flex: 1 0 auto;}
    
/***** ***** ***** Министерство умных дел ***** ***** *****/
    
.modul-pedsostav{
    width:100%;
    background:#fff;
    padding:30px 20px;
    text-align:center;}

.modul-pedsostav > div {
    margin:0 auto;
    width:100%;
    max-width:1280px;
    line-height:2;
    display:flex;
    flex-wrap:wrap;
    gap:40px;
    justify-content:center;}

.modul-pedsostav > div > div{
    width:calc(25% - 30px);
    text-align:center;
    display:flex;
    flex-direction:column;}
    
.modul-pedsostav h3{
    font-size:22pt;
    color:var(--cl-violet);
    margin:15px 0 30px;
    font-weight:600;}
    
.modul-pedsostav > div > div figure{
    order:1;}
    
.modul-pedsostav > div > div h4{
    order:2;
    margin:10px 0;}
    
.modul-pedsostav > div > div h4 a{
    font-weight:600;
    color:var(--cl-violet);}
    
.modul-pedsostav > div > div h4 a:hover{
    color:var(--cl-orange);}
    
.modul-pedsostav > div > div p{
    order:3;
    line-height:1.3;}
    
.modul-pedsostav > div img{
    width:100%;
    object-fit: cover;}
    
@media screen and (max-width:1024px) {
    
    .modul-pedsostav > div > div{
        width:calc(33.33% - 27px);}
        
    .modul-pedsostav > div > div h4{
        margin:5px auto;
        line-height:1.3;}
}

@media screen and (max-width:700px) {
    
    .modul-pedsostav > div > div{
        width:calc(50% - 20px);}    
}

@media screen and (max-width:500px) {
    
    .modul-pedsostav > div > div{
        width:100%;}    
}

.content .pedsostav {
    display:flex;
    flex-wrap:wrap;
    gap:40px;}

.content .pedsostav > div{
    width:calc(25% - 30px);
    text-align:center;}

.content .pedsostav > div h2{
    margin:15px 0;
    font-size:12pt;}
    
.content .pedsostav > div h2 a{
    font-weight:600;
    color:var(--cl-violet);}
    
.content .pedsostav > div h2 a:hover{
color:var(--cl-orange);}

.content .pedsostav > div img{
    width:100%;
    object-fit: cover;}
    
@media screen and (max-width:1024px) {
    
    .content .pedsostav > div{
        width:calc(33.33% - 27px);}
}

@media screen and (max-width:700px) {
    
    .content .pedsostav > div{
        width:calc(50% - 20px);}    
}

@media screen and (max-width:500px) {
    
    .content .pedsostav > div{
        width:100%;}    
}

footer {
    background:var(--cl-violet);
    width:100%;
    padding:20px 20px 10px;
    flex: 0 0 auto;}
    
footer .footer{
    margin:0 auto;
    width:100%;
    max-width:1280px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;}

footer a{
    color:#fff;
    font-size:11pt;
    text-decoration:none;
    padding:3px 0;}

footer a:hover{
    color:var(--cl-orange);}
    
footer p{
    color:#f3f3f3;
    line-height:1.3;
    margin:5px 0;
}

footer .menu{
    width:100%;
    max-width:1280px;
    margin:0 auto;}

footer .menu ul{
    width:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px 20px;
    padding:10px 0;
    border-bottom: 1px dotted #fff;}

footer .contact{
    max-width:70%;
    padding:25px 0;}    

footer .contact2{
    min-width:30%;
    padding: 0 0 20px;
    text-align:right;
    align-self: flex-end;}

footer .contact2 p{
    margin:5px 0;}
    
footer .contact2 a{
    font-size:18pt;}

footer .contact2 a.email{
    font-size:14pt;}

footer .contact img{
    width:110px;
    margin:0 15px;
    float:left;}
    
footer .menu a{
    text-transform:uppercase;}
    
footer .footer-autor{
    border-top:1px dotted #fff;
    width:100%;
    padding:10px 0 10px;
    flex: 0 0 auto;}
    
footer .footer-autor{
    margin:0 auto;
    width:100%;
    max-width:1280px;
    display:flex;
    flex-wrap:wrap;
    gap:0 40px;
    justify-content:space-between;
}
@media screen and (max-width:800px) {
    footer .contact,
    footer .contact2{
        max-width:100%;
        min-width:100%;
        text-align:left;
    }
}
@media screen and (max-width:500px) {

    footer .contact img{
        display:none}
    footer .menu ul{
        justify-content:flex-start;}
}

/***** ***** ***** ***** Кнопка ВВЕРХ ***** *****/

#toTop {
    width:50px;
    height:50px;
    display:block;
    border-radius:5px;
    position:fixed;
    top:calc(90% - 25px);
    right:20px;
    cursor:pointer;
    background:var(--cl-violet);
    mix-blend-mode: multiply;
    z-index:99;}
    
#toTop:before {
    content:"";
    position:absolute;
    width:24px;
    height:24px;
    border-top:2px solid #fff;
    border-left:3px solid #fff;
    transform:rotate(45deg);
    top:20px;
    left:12px;}
    
#toTop:hover {
    background:var(--cl-orange)}

@media screen and (max-width:1500px){
    #toTop {mix-blend-mode: normal;}   
}
    
@media screen and (max-width:1000px){
    #toTop,
    #toTop:before {
        display:none;
        z-index:-2;
        opacity:0;}   
}

.cookie {
    z-index:2;
    position:fixed;
    z-index:99999;
    display:table;
    bottom:15px;
    left:30px;
    width:calc(50vw - 60px);
    max-width:500px;
    background:rgb(255,255,255,1);
    -webkit-box-shadow:5px 5px 10px #000;
            box-shadow:5px 5px 10px #000;
    padding:20px 30px;
    line-height:1.2;
    border-radius:5px;
    font-size:11pt}
    
.cookie p{
    margin:5px 0 10px;
    float:left;}
    
.cookie a#cookie-agreement-button{
    display:table;
    color:#fff;
    margin:0px 0 0;
    font-weight:100;
    float:left;
    font-size: 11pt;
    border-radius: 3px;
    background: var(--cl-orange);
    padding: 9px 20px 8px;
    text-transform:uppercase;
    border: none;
    outline: none;
    cursor: pointer;}
    
.cookie a#cookie-agreement-button:hover{
    background: var(--cl-violet);}


    @media screen and (max-width:1024px){
        .cookie {
            width:calc(100vw - 60px);}
            
        .cookie p{
            width:100%;}
            
        .cookie a#cookie-agreement-button{
            float:left;}
    }