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

.conteiner {
   max-width: 1200px;
   height: 100%;
   margin: 0 auto;
   position: relative;
}

/* header */
.header {
   width: 100%;
   height: 60px;
   position: absolute;
}

/* footer */
.footer {
   width: 100%;
   background: #333 repeating-linear-gradient(90deg,
         rgba(30, 15, 140, 0.36), rgba(37, 124, 201, 0.37) 5px,
         rgba(10, 26, 89, 0.38) 5px, rgba(123, 159, 225, 0.37) 10px);
}

/* page */
.main {
   width: 100%;
   flex: 1 1 auto;
   background-image: url('../img/site_fon.jpg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.page {
   width: 100%;
   margin: 60px auto 20px;
   padding: 20px;
}

.title_page {
   font-size: 70px;
   font-weight: 700;
   text-align: center;
   color: #0c2e5e;
   text-shadow: 1px 0 #fff, 0 -1px #fff, -1px 0 #fff, 0 1px #fff;
   letter-spacing: 7px;
   z-index: 20;

   transform: translate(0px, -120%);
   opacity: 0;
   transition: all 0.3s ease 0s;
}

.title_page.anim_on {
   transform: translate(0px, 0px);
   opacity: 1;
   transition: all 1.8s ease 0s;
}

.topic_title {
   color: #fff;
   font-size: 28px;
   font-style: italic;
   text-align: center;
   padding: 20px 10px 10px;
}

.topic_text {
   width: 100%;
   color: #fff;
   font-size: 18px;
   font-style: italic;
   text-align: justify;
   border-left: 3px solid rgb(102, 102, 166);
   padding: 10px;
}

/* вехняя картинка */
.biz_conteiner {
   width: 100%;
   margin: 10px;
   text-align: center;
}

.biz_image {
   width: 80%;
}

.biz_text {
   font-family: 'Pattaya', sans-serif;
   font-size: 36px;
   text-align: center;
   color: #0c2e5e;
   text-shadow: 1px 0 #fff, 0 -1px #fff, -1px 0 #fff, 0 1px #fff;
}

/* боксы заголовков */
.box_conteiner {
   width: 100%;
   margin: 20px auto;
   padding: 10px;
   border: double rgb(73, 194, 36);
   display: flex;
   align-items: center;
   gap: 20px;
}

.box_image {
   width: 35%;
   border: 3px solid rgb(73, 194, 36);
}

.box_title {
   text-align: center;
   position: relative;
   margin: 0;
   box-sizing: border-box;
   padding: 20px 10px;
   font-family: Verdana, sans-serif;
   font-weight: bold;
   color: #FFF;
   font-size: 40px;
   line-height: 56px;
   background: #BFE2FF;
   border: 20px solid #337AB7;
   z-index: 1;
   text-shadow: 0 0 12px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.7);
   text-transform: uppercase;
   transition: font-size 250ms cubic-bezier(0.59, 0.04, 0.3, 1.43);
}

.box_title::after {
   content: attr(data-heading);
   position: absolute;
   padding: 20px 10px;
   box-sizing: border-box;
   left: 0;
   z-index: 2;
   overflow: hidden;
   white-space: wrap;
   width: 100%;
   height: 100%;
   top: 0;
   text-align: center;
   color: #BFE2FF;
   text-shadow: 0 0 12px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.7);
   background: #337AB7;
   clip-path: polygon(0 0, 100% 0, 100% 10%, 0 90%);
}

/* типы сайтов с формой */
.site_description_conteiner {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
}

.site_description_content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
}

.site_description_box {
   width: 400px;
   border: 2px solid #fff;
   border-bottom-right-radius: 20px;
   border-top-left-radius: 20px;
   background-color: #0c2e5e;
   display: flex;
   align-items: center;
   padding: 10px 20px;
   margin: 10px;
   gap: 20px;
}

.site_description_icon {
   width: 64px;
   height: 64px;

   transform: scale(0);
   opacity: 0;
   transition: all 0.3s ease 0s;
}

.site_description_text {
   font-family: Verdana, sans-serif;
   font-size: 18px;
   color: #fff;
}

.site_description_icon.anim_on {
   transform: scale(1);
   opacity: 1;
   transition: all 0.8s ease 0s;
}

/* форма */
.task_conteiner {
   width: 500px;
   padding: 20px;
   box-shadow:
      inset rgba(0, 0, 0, .6) 0 -3px 8px,
      inset rgba(252, 255, 255, .7) 0 3px 8px,
      rgba(0, 0, 0, .8) 0 3px 8px -3px;
   background-color: #0c2e5e;
}

.task_title {
   font-family: 'Pattaya', sans-serif;
   font-size: 28px;
   text-align: center;
   color: #fff;
   padding-bottom: 10px;
}

.task_content {
   padding: 10px;
   border-radius: 7px;
   background: #e6e3df;
   text-align: center;
   box-shadow:
      inset rgba(0, 0, 0, .6) 0 -3px 8px,
      inset rgba(252, 255, 255, .7) 0 3px 8px,
      rgba(0, 0, 0, .8) 0 3px 8px -3px;
}

.task_info {
   visibility: hidden;   
   font-size: 14px;   
   font-style: italic;
   text-align: center;
   margin: 10px;
   padding: 5px 20px;   
   border: 2px solid #e6e3df;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1),
      0px 2px 4px rgba(0, 0, 0, 0.1),
      0px 4px 8px rgba(0, 0, 0, 0.1),
      0px 8px 16px rgba(0, 0, 0, 0.1);
}

.task_body {
   display: flex;
   flex-flow: column;
   align-items: center;
   text-align: center;
}

.task_name,
.task_email {
   width: 90%;
   height: 40px;
   font-style: italic;
   color: #151515;
   padding-left: 10px;
   margin: 5px;
   border: none;
   background-color: #f7f3ef;
   box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}

.task_message {
   width: 90%;
   height: 60px;
   font-style: italic;
   color: #151515;
   padding: 10px;
   margin: 5px;
   background-color: #f7f3ef;
   box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}

.task_name::placeholder,
.task_email::placeholder {
   font-size: 14px;
   padding: 10px 20px;
   font-style: italic;
   color: #151515;
}

.task_message::placeholder {
   font-size: 14px;
   padding: 10px 20px;
   font-style: italic;
   color: #151515;
}

.task_btn_submit {
   width: 90%;
   height: 40px;
   margin: 5px;
   font-size: 14px;
   color: #151515;
   cursor: pointer;
   background: #e6e3df;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1),
      0px 2px 4px rgba(0, 0, 0, 0.1),
      0px 4px 8px rgba(0, 0, 0, 0.1),
      0px 8px 16px rgba(0, 0, 0, 0.1);
}

.task_btn_submit:hover {
   background: #e6e3df;
   box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}

/* этапы */
.slider_conteiner {
   width: 100%;
   padding: 10px;
   display: flex;
   align-items: center;
   gap: 20px;
}

.slide_content {
   width: 48%;
   display: inline-block;
}

.slide_conteiner {
   margin: 20px auto;
   padding: 5px 20px;
   background-color: #0c2e5e;
   border: 5px groove #0c2e5e;
   display: flex;
   align-items: center;
   gap: 20px;
   cursor: pointer;
   overflow-x: hidden;
}

.slide {
   width: 64px;
   height: 64px;

   transform: scale(0);
   opacity: 0;
   transition: all 0.3s ease 0s;
}

.slide_text {
   color: #fff;
   font-size: 17px;
   font-style: italic;
   text-align: center;
}

.slide.anim_on {
   transform: scale(1);
   opacity: 1;
   transition: all 0.8s ease 0s;
}

/* текст */
.plain_text_site_conteiner {
   width: 48%;
   margin: 10px auto;
   padding: 15px;
   text-align: justify;
   color: #fff;
   line-height: 35px;
   background: linear-gradient(to right, #0c2e5e, #3160a3);
   border: 5px groove #0c2e5e;
}

.plain_text_site {
   font-size: 12px;
   text-indent: 5%;
}

.list {
   font-size: 12px;
   list-style-type: circle;
   margin-left: 25px;
}

/* интересный список */
.btn_num_conteiner {
   width: 100%;
   margin: 20px auto;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
}

.btn_num {
   width: 500px;
   height: 40px;
   font-family: Verdana, sans-serif;
   font-size: 15px;
   color: #fff;
   padding: 5px 20px;
   background-color: #0c2e5e;
   border: 2px solid #fff;
   box-shadow:
      inset rgba(0, 0, 0, .6) 0 -3px 8px,
      inset rgba(252, 255, 255, .7) 0 3px 8px,
      rgba(0, 0, 0, .8) 0 3px 8px -3px;
}

.btn_num:hover {
   background-color: #6c9ce0;
   font-weight: 700;
   color: #000;
}

.btn_ip {
   transform: translate(80%, 0px);
   opacity: 0;
   transition: all 0.3s ease 0s;
}

.btn_ip.anim_on {
   transform: translate(0px, 0px);
   opacity: 1;
   transition: all 0.8s ease 0s;
}

.btn_num1 {
   transform: translate(80%, 0px);
   opacity: 0;
   transition: all 0.3s ease 0s;
}

.btn_num1.anim_on {
   transform: translate(0px, 0px);
   opacity: 1;
   transition: all 1.2s ease 0s;
}

.btn_num2 {
   transform: translate(80%, 0px);
   opacity: 0;
   transition: all 0.3s ease 0s;
}

.btn_num2.anim_on {
   transform: translate(0px, 0px);
   opacity: 1;
   transition: all 1.6s ease 0s;
}

.btn_num3 {
   transform: translate(80%, 0px);
   opacity: 0;
   transition: all 0.3s ease 0s;
}

.btn_num3.anim_on {
   transform: translate(0px, 0px);
   opacity: 1;
   transition: all 2.0s ease 0s;
}

/* ip адресс */
#ip_conteiner {
   display: none;
}

.ip_conteiner {
   width: 70%;
   background-color: #fff;
   background-color: #FAEBD7;
   border-radius: 7px;
   padding: 20px;
   margin: auto;
   display: flex;
   justify-content: center;
   gap: 30px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 1),
      -23px 0 20px -23px rgba(0, 0, 0, .8),
      23px 0 20px -23px rgba(0, 0, 0, .8),
      0 0 40px rgba(0, 0, 0, .1) inset;
}

.ip_conteiner_one {
   display: flex;
   flex-direction: column;
   padding: 10px;
}

.ip_conteiner_two {
   font-size: 20px;
   padding: 5px;
   font-style: italic;
   font-weight: 700;
   color: #0c2e5e;
}

/* Вопросы и Ответы */
.questions_answers_conteiner {
   width: 95%;
   margin: 20px auto;
   background-color: #eee;
   border-radius: 17px;
   display: flex;
   justify-content: space-between;
   gap: 20px;
   padding: 20px;
}

.questions_answers_title {
   font-size: 2rem;
   font-weight: 700;
   color: #0c2e5e;
   padding: 20px;
   text-align: left;
}

.questions_answers_content {
   display: flex;
   flex-direction: column;
}

.questions_answers_btn {
   margin: 10px 0;
   color: #0c2e5e;
   cursor: pointer;
   border: 5px inset #fff;
   padding: 10px;
   text-align: left;
   outline: none;
   font-size: 18px;
   transition: 0.4s;
}

.active,
.questions_answers_btn:hover {
   background-color: #ccc;
}

.questions_answers_text {
   background-color: #eee;
   color: #000;
   font-size: 18px;
   text-align: justify;
   padding: 0 20px;
   text-indent: 5%;
   line-height: 30px;
   font-style: italic;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
}

/* Адаптация */
@media(max-width:1200px) {
   .conteiner {
      max-width: 970px;
   }
}

@media(max-width:992px) {
   .conteiner {
      max-width: 750px;
   }

   .title_page {
      font-size: 65px;
   }   
}

@media(max-width:767px) {
   .conteiner {
      max-width: none;
   }

   .title_page {
      font-size: 55px;
   }

   .box_image {
      display: none;
   }

   .site_description_conteiner {
      flex-direction: column;
   }

   .slider_conteiner {
      flex-direction: column;
   }

   .slide_content {
      width: 90%;
   }

   .plain_text_site_conteiner {
      width: 90%;
   }

   .btn_num3,
   .btn_num2,
   .btn_num1,
   .btn_ip {
      transform: translate(0px, 0px);
      opacity: 1;
   }

   .ip_conteiner {
      width: 90%;
      flex-direction: column;
   }

   .ip_conteiner_two {
      font-size: 15px;
   }
}

@media(max-width:550px) {
   /*до 340px*/

   .title_page {
      font-size: 35px;
   }

   .topic_title {
      font-size: 22px;
   }

   .topic_text {
      font-size: 16px;
   }

   .biz_text {
      font-size: 26px;
   }

   .box_title {
      font-size: 26px;
      line-height: 36px;
   }

   .site_description_box {
      width: 300px;
   }

   .site_description_icon {
      width: 48px;
      height: 48px;
   }

   .site_description_text {
      font-size: 16px;
   }

   .task_conteiner {
      width: 300px;
   }

   .slide {
      width: 48px;
      height: 48px;
   }

   .slide_text {
      font-size: 16px;
   }

   .btn_num {
      width: 300px;
      height: 50px;
   }

   .questions_answers_conteiner {
      width: 90%;
      flex-direction: column;
   }

   .questions_answers_title {
      font-size: 1rem;
   }

   .questions_answers_btn {
      font-size: 15px;
   }

   .questions_answers_text {
      font-size: 15px;
   }
}