/* Your custom CSS here */

.bg-extra-dark-gray {
    background-color: #ff9933;
}

.sidebar-nav .logo-holder {
    padding: 5px 0;
}

.navbar .padding-top-60px {
    padding-top: 10px;
}

.navbar a, .navbar a:visited {
    color: #636363;
}

.navbar a:hover {
    color: #ff6600;
}

.header-typography .h-color-1 {
    color: #ffffff!important;
}

.bg-white-opacity {
    background-color: rgb(255, 136, 0);
}

.padding-seven-all {
    padding: 3% 7%;
}

.title-large {
    font-size: 18px;
    line-height: 20px;
}

.schoolheader {
    margin: -120px -50px 40px -60px;
    background: url(/wa-data/public/site/img/schoolback1.jpg) no-repeat right;
    background-size: 100%;
    padding-left:70px;
    padding-top:10px;
    height:100px;
}

.schoolheadertext1 {
    color:#fff;
    font-size:calc(12px + 1.5vw);
    line-height: normal;
}

.schoolheadertext2 {
     font-size:calc(12px + 0.5vw);
     line-height: normal;
}

.schooltd1 {
    border:none!important;
    vertical-align: top;
    padding: 0px 20px 0px 0px!important;
} 

.schooltd2 {
    border:none!important;
    background-color: #4382ab; 
    color:#fff; 
    font-weight:bold; 
    text-align:center;
    border-right: 20px solid #fff!important;
} 

.schooltd3 {
   border:none!important;
   background-color: #4382ab;
   color:#fff; 
   font-weight:bold; 
   text-align:center; 
} 

.schooltd4 {
    border:none!important;
    background-color: #e1e8eb;
    border-right: 20px solid #fff!important;
} 

.schooltd5 {
    border:none!important;
    background-color: #e1e8eb;
} 
 

@media (min-width: 320px) {
.title-large {
    font-size: 26px;
    line-height: 36px;
}
.header-groups, .header-groups2 {
    font-size: 18px;
}
.schoolheader {
    height: 160px;
    margin-top:-120px;
    margin-bottom:20px;
    padding-top:40px;
}

.schooltd1 {
    border:none!important;
    vertical-align: top;
    padding: 0px 0px 0px 0px!important;
} 

.schooltd2 {
    border:none!important;
    background-color: #4382ab; 
    color:#fff; 
    font-weight:bold; 
    text-align:center;
    border-right: 3px solid #fff!important;
} 

.schooltd3 {
   border:none!important;
   background-color: #4382ab;
   color:#fff; 
   font-weight:bold; 
   text-align:center; 
} 

.schooltd4 {
    border:none!important;
    background-color: #e1e8eb;
    border-right: 3px solid #fff!important;
} 

.schooltd5 {
    border:none!important;
    background-color: #e1e8eb;
} 

}

@media (min-width: 480px) {
.title-large {
    font-size: 40px;
    line-height: 48px;
}
.schoolheader {
    height: 230px;
    margin-top:-160px;
    margin-bottom:20px;
    padding-top:80px;
}

.schooltd1 {
    border:none!important;
    vertical-align: top;
    padding: 0px 20px 0px 0px!important;
} 

.schooltd2 {
    border:none!important;
    background-color: #4382ab; 
    color:#fff; 
    font-weight:bold; 
    text-align:center;
    border-right: 20px solid #fff!important;
} 

.schooltd3 {
   border:none!important;
   background-color: #4382ab;
   color:#fff; 
   font-weight:bold; 
   text-align:center; 
} 

.schooltd4 {
    border:none!important;
    background-color: #e1e8eb;
    border-right: 20px solid #fff!important;
} 

.schooltd5 {
    border:none!important;
    background-color: #e1e8eb;
} 

}

@media (min-width: 768px) {
.title-large {
    font-size: 50px;
    line-height: 62px;
}
.header-groups, .header-groups2 {
    font-size: 22px;
}
.schoolheader {
    height: 300px;
    margin-top:-160px;
    margin-bottom:20px;
    padding-top:100px;
}
}

@media (min-width: 992px) {
.title-large {
    font-size: 44px;
    line-height: 60px;
}
.header-groups, .header-groups2 {
    font-size: 18px;
}
.schoolheader {
    height: 350px;
    margin-top:-186px;
    margin-bottom:10px;
    padding-top:120px;
}
}

@media (min-width: 1200px) {
.title-large {
    font-size: 50px;
    line-height: 62px;
}
.header-groups, .header-groups2 {
    font-size: 22px;
}
.schoolheader {
    height: 400px;
    margin-top:-188px;
    margin-bottom:20px;
    padding-top:120px;
}
}

@media (min-width: 1440px) {
.title-large {
    font-size: 60px;
    line-height: 70px;
}
.schoolheader {
    height: 400px;
    margin-top:-160px;
    padding-top:120px;
}
}



.header-groups {
    width: 50%;
    float: left;
    display: block;
    text-align: center;
    padding: 15px 10px;
    color: #fff;
    font-size: x-large;
    margin: 20px 0px 0px 0px;
}

.header-groups2 {
    width: 100%;
    float: left;
    display: block;
    text-align: center;
    padding: 15px 10px;
    color: #fff;
    font-size: x-large;
    margin: 0px 0px 20px 0px;
}

.color-green {
   background-color:#99cc33; 
}

.color-green:hover {
   background-color:#99cc33ad; 
}

.color-blue {
   background-color:#0099ff; 
}

.color-blue:hover {
   background-color:#0099ffad; 
}

.color-orange {
   background-color:#ff6600; 
}

.color-orange:hover {
   background-color:#ff6600ad; 
}

#whywe {
    padding:50px 0px;
}

.hellotext {
    text-align: center;
    font-size: x-large;
    color: #fff;
}

.hellopic {
    display: none;
}

/* новый баннер с медиазапросом для разных устройств*/
@media only screen and (min-width: 600px) {
    .hellopic.pc {
        display: block;
    }
}

@media only screen and (max-width: 600px) {
    .hellopic.mobile {
        display: block;
    }
}

.features-icon {
    width: 60px;   
}

#services {
    padding-bottom: 0px;
}

#about .text-colored {
    color: #000000;
}

.feature-box.feature-box-7 .box .content {
    top: calc(50% - 80px);
}

.greencolor {
    color:#99cc33!important;
}

.bluecolor {
    color:#33ccff!important;
}

.orangecolor {
    color:#ff9933!important;
}

.btn.btn-dark-gray {
    background: #fff;
    border-color: #fff;
    color: #232323;
}

.header-typography .text-color-1 {
    color: #fff;
}

.feature-content .h-color-1 {
    text-align:center!important;
}

.whywetop {
    width: 100%;
    height: 40px;
    margin: -30px 0 30px 0;
    padding: 0 20px;
}

.phonetop {
    background: #86c431;
    width: 55%;
    padding: 5px;
    text-align: center;
    color: #ffffff!important;
    font-weight: bold;
    border-radius: 20px;
    max-width: 250px;
    cursor: pointer;
    display: block;
    float: left;
}

.phonetop a{
    color: #ffffff!important;
}

.school {
    background: #01adf2;
    width: 40%;
    padding: 5px;
    text-align: center;
    color: #ffffff!important;
    font-weight: bold;
    border-radius: 20px;
    max-width: 300px;
    cursor: pointer;
    display: block;
    float: right;
    font-size: larger;
    min-width: 80px;
}

.whyweadress {
    margin: 30px 0 -30px 0;
    color: #fff;
    padding: 0 20px;
    font-weight: bold;
}

/* новые стили для кнопок адреса */
    .adress {
    display: block;
    color: white;
    border-color: white;
    float: left;
    border: 1px solid;
    border-radius: 20px;
    padding: 5px 20px;
    text-align: center;
    width: 48%;
    transition: color 0.3s, background-color 0.3s; /* Плавное изменение цвета текста и фона */
    outline: none; /* Убираем красное очертание */
    }

    .adress:hover {
        background-color: #86c431; 
        color: white; 
        border-color: #86c431;
    }
    
    
    @media only screen and (max-width: 600px) {
        .adress {
            width: calc(100% - 40px); /* Ширина кнопки как 100% ширины экрана минус 40px отступов слева и справа */
            margin-left: 20px; /* Отступ слева */
            margin-right: 20px; /* Отступ справа */
            margin-bottom: 15px; 
        }
    }
    
     @media only screen and (min-width: 601px) {
        .adress {
            width: calc(50% - 40px); /* Ширина кнопки как 50% ширины экрана минус 40px отступов слева и справа */
            margin-left: 20px; /* Отступ слева */
            margin-right: 20px; /* Отступ справа */
        }
        /* Дополнительный отступ слева для первой кнопки */
        .adress:first-child {
            margin-left: 10;
        }
        /* Дополнительный отступ справа для второй кнопки */
        .adress:last-child {
            margin-right: 10;
        }
    }
    
.adress1 {
    display: block;
    float:left;
    border: 1px solid;
    border-radius: 20px;
    padding: 5px 20px;
    text-align: center;
    width: 48%;
}

.adress2 {
    display: block;
    float:right;
    border: 1px solid;
    border-radius: 20px;
    padding: 5px 20px;
    text-align: center;
    width: 48%;
}

section.animate-fade-in.bg-light-gray.py-5.page-title-small.animated.fadeIn {
  display: none;
}