*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: Arial;
    color: #330000;
}
section{
    padding: 1% 0;
}
div.wrapper{
     padding: 1% 0;
    }
div.content{
    width:80%;
    margin: 0 auto;
    text-align: center;
    padding: 1%;
    overflow: hidden;
}

/*Настройка шапки сайта */
header .wrapper{
     background-color: #f7e8e3;
    }
header .content{
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:0;
}
.content .logo img{ 
    height: 75px;
}
.content nav {
    color: #333333;
    font-size:16pt;
}
.content nav a{
    text-decoration: none;
    color:#333333;
}
.content nav a:hover{
    text-decoration:underline;
    cursor: pointer;
}

/*Настройки блока Алгоритма */
.alg {
     background-color: #04323a; 
    }
h1{
    font-size: 32pt;
    color:#ffffff;
}
section.alg div.steps {
    margin-top: 3% ;
    display: flex;
    justify-content: space-between;
}
section.alg div.step{
    font-size:16pt;
    background-color: #d1dcde;
    width:15%;
    padding: 10px 20px;
    border-radius: 20px;
}

/*Настройки блока о компании */
div.comment{
    width:33%;
    float:left;
    padding: 2%;
}
div.comment img.comment_foto{
    width:60%;
    margin:0 auto;
    border-radius: 50%; 
}
div.comment div.comment_text{
    padding:2%;
}

/*Настройки блока Поиск */
section.search {
    background-color: #573625;
}
select, input{
    width:100%;
    height: 50px;
    margin-top: 1%;
    padding: 1%;
    font-size:16pt;
}

/*Настройки блока Акции */
section.promos{
    background-color: #d1dcde;
}
section.promos .content{
    display: flex;
    flex-wrap: wrap;
}
div.promo{
    width:30%;
    margin:1%;
    padding: 2%;
    border: 2px solid #04323a;
    border-radius: 5px;
}
div.promo img{
     width:100%;
    margin:0 auto;
}
div.promo div.promo_text{
    padding:2%;
}
section.promos button{
    height: 30px;
    width: 100%;
}

/*Настройки блока Подписки */
section.sub{
    background-color:#04323a;
}
section.sub button{
    width: 100%;
    height: 30px;
    margin-top: 10px;
}
/*Настройки блока Подвал */
footer{
    background-color: #f7e8e3;
}
footer h2{
    font-size: 32pt;
}
footer nav{
    padding-top: 20px;
}

 /*оформление страницы Результаты поиска*/
      h1{
        text-align:center;
      }

 /*оформление страницы Выбора зон*/
 .content img{
    width: 80%;
    margin: 0 auto;
 }
 .wrapper .link{
     width: 80%;
    margin: 0 auto;
 }

 /*оформление страницы Выбора зон*/
 .content img{
    width: 80%;
    margin: 0 auto;
 }
  .wrapper .link{
     width: 80%;
    margin: 0 auto;
 }

 /*оформление страницы Бронирования*/
 section.booking{
    background-color: #04323a;
 }
 .booking .content{ 
font-size: 16pt;
padding: 1%;
text-align: left;
 }
 .booking .content p{ padding-top: 2%;}

 .info, .dop, .other{ background-color: #c0c0c0;
     padding: 3%;
    margin: 3%;
    overflow:hidden;
 }

 h2{ 
    text-align: center;
}

ul{
    list-style-position: inside;
    padding-left: 1%;
}

.dop input[type=checkbox]{
    height: 30px;
}

.dop_check{
display:flex;
justify-content: space-between;
text-align: center;
}

/*Шаги с анимацией*/
section.alg div.steps {
    margin-top:3%;
    overflow: hidden;
    position: relative;
}

section.alg div.step{
    font-size: 16pt;
    background-color: #d1dcde;
    padding: 10px 20px;
    border-radius: 20px;

    /*position: absolute; абсолютное позиционирование*/
    animation: round 24s infinite; /*настройки анимации*/
    opacity: 0; /*прозрачность*/
    width: 100%;
    height: 80%;
}
@keyframes round{
    12.5% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
}
/*время задержки перед стартом анимации*/
div.steps div:nth-child(6) {animation-delay:24s ;}
div.steps div:nth-child(5) {animation-delay:20s ;}
div.steps div:nth-child(4) {animation-delay:16s ;}
div.steps div:nth-child(3) {animation-delay:12s ;}
div.steps div:nth-child(2) {animation-delay:8s ;}
div.steps div:nth-child(1) {animation-delay:4s ;}

/*офомление блока баннер*/
section.banner{
    min-height: 80vh;
background-image: url("../media/image/banner.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

section.banner div.wrapper{
    display: flex;
    align-items: center;
    width: 50%;
    min-height: 90vh;
    margin-left: 2%;
    background-color: rgba(255,255,255,0.7);
}

section.banner div.wrapper h1{
    font-size:8em;
    color:#04323a;
    font-weight: bold;
}
section.banner .ytp{
    font-size: 48pt;
    font-weight: bold;
}
section.banner p{
    font-size: 24pt;
    text-align: left;
}

@media screen and (max-device-width: 480px) {
/*настройка шапки*/
.content .logo img{ height:100%;}

.content nav{
    font-size: 12pt;
}
/*настройка блока с баннером*/
section.banner{
    max-height: 40vh;
    background-size: auto;
}
sention.banner div.wrapper h1{ font-size: 3em;}

/*Настройка заголовков*/
h1{font-size: 20pt;}

content h2{ font-size: 16pt;} 

/*настройка слайдера*/
section.alg div.step{
    font-size:22pt;
    padding: 1% 2%;
}
/*Настройка блока отзывы*/
.div.comment{width: 100%;}
}
/*Настройка страницы Управление бронированием*/
.dop h2, footer h2{
    font-size: 18pt;
}
.dop_check{
    display:block;
    font-size: 10pt;
}
.dop_check p{float:none;}
.other textarea{
    height: 100px;
}
.other button{
    height: 100px;
}

@media screen and (max-device-width:768px) {
    /*настройка блока с баннером*/
    section.banner{max-height: 40vh;}
    section.banner div.wrapper{
        width:96%;
        background-color: rgba(255,255,255,0.5);
    }
    section.banner div.wrapper h1{font-size:4em}

    /*Настройка блока Акции*/
    div.promo{ width: 100%;}
    div.promo img{
        width: 50%;
        margin: 0 auto;
        float: left;
    }
}

/*Настройка страницы Управление бронированием*/
.dop .dop_check{ font-size: 11pt;}

@media screen and(max-device-width: 1200px){
    section.banner div.wrapper h1{font-size: 6em;}
}
@media screen and(max-device-width: 960px){
    section.banner div.wrapper h1{font-size: 5em;}
}