/*@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@300;400&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
  font-family: 'Fyne';
   src: url('../fonts/fyne.ttf') format('ttf'),
        url('../fonts/fyne.woff') format('woff');
 }

 @font-face {
  font-family: 'Roboto';
   src: url('../fonts/Roboto.ttf') format('ttf');        
 }



body{      
    background-color: #fff;
    padding: 0;
    margin: 0;     
    font-style: normal;    
    font-family: 'Roboto';
    font-style: normal;
}

h1, ul{
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}




p{
  font-family: 'Roboto' !important;
}



.container{
    max-width: 1200px;
    margin: 0 auto;
    
}

.row{
    display: flex;
    flex-wrap: nowrap;
}

header{    
    background-color: #96C63F;    
    background-image:url('../img/bg.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    

}

header .row{
  justify-content: center;
}


header .logo img{
  width: 100x;
  height: 116px;
}

header .logo{
  margin: 39px 70px 0;
}

header nav{
  margin-top: 80px;  
  max-width: 500px;
  display: flex;
  justify-content: space-between;
}

header nav ul{
  width: 500px;
  display: flex;  
  justify-content: space-between;
  list-style-type: none;
  
}



header nav ul a{
  color: #CBCBCB;  
  font-size: 18px;  
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}

header nav ul a:hover {
  color: #96c63f;
}



.main_title h1{
  color: #96C63F;
  font-family: 'Fyne';
  font-size: 110px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 59px;
  
}


header iframe{
  width: 1000px;
  height: 500px;
  margin: 0 auto;
  display: block;
  margin-top: 40px;
  margin-bottom: 40px;
}



/* page */ 

header#page{
  height: 75px;  
  background-color: #4B0001;
  background-image: none;
}


header#page .logo{
  margin-top: 26px;
}


header#page nav{margin-top: 28px;}


/*
#header_title{
  background-image: url('../img/bg_characters.jpg');
  background-size: cover;
  background-position: center;
  height: 500px;
  
}

#header_title_actors{
  background-image: url('../img/bg_actors.jpg');
  background-size: cover;
  background-position: center;
  height: 500px;
  
}

#header_title_episode{
  background-image: url('../img/bg_episode.jpg');
  background-size: cover;
  background-position: top;
  height: 500px;
  
}


#header_title_episode h1{
  text-align: center;
  color: #4298FE;
  font-family: Baloo Tamma;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  padding-top: 327px;
}

#header_title_actors h1{
  text-align: center;
  color: #4298FE;
  font-family: Baloo Tamma;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  padding-top: 327px;
}

#header_title h1{
  text-align: center;
  color: #4298FE;
  font-family: Baloo Tamma;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  padding-top: 327px;
}



.photo_actors{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 700px;
}

#content .photo_actors img{
  width: 488px;
  height: 315px;  
}
#content .photo_actors img:first-child{
  width: 692px;
  height: 650px;
  margin-right: 20px;
}

#content .photo_actors img:last-child{
  margin-top: 20px;
}



.actors_page{
  background-image: none;
}

#content iframe{
  width: 100%;
  height: 500px;
  margin: 0 auto;
  display: block;
  margin-top: 20px;
  margin-bottom: 40px;
  
}

*/














#characters .row{
  flex-wrap: wrap;
  justify-content: space-between;
}


 h2, .h2{
  color: #262626;
  font-family: 'Fyne';
  font-size: 50px;
  line-height: 80px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  text-align: center; 
  margin-top: 70px; 
}

header h2{
  color: #82B12F;
  margin: 10px auto;
}

 h3, .h3{
  color: #82B12F;
  font-family: 'Fyne';
  font-size: 55px;
  line-height: 80px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 15px;
  margin-top: 30px;
}

#characters .item{
  width: 285px;  
  margin-top: 20px
}

#characters .card{
  width: 285px;
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  
}


.card span{
  display: block;
  color: #9DD931;  
  font-size: 25px;
  line-height: normal;
  font-style: normal;
  font-weight: 700;  
  text-transform: uppercase;
  margin-top: 39px;
  text-align: center;
  
}

.card a{
  color: #BCBCBC;  
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 138.889% */
  text-decoration: none;
  text-align: center;
  border-radius: 50px;
  border: 1px solid #BCBCBC;
  display: block;
  padding: 10px 15px;
  width: 150px;margin: 0 auto 30px;
}



#characters .item p{
  color: #5F5F5F;
  font-family: Sofia Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 138.889% */
}

#characters .item p em {
  color: #5e8d0a;
}

#episode article p em {
  color: #5e8d0a;
}

blockquote {
  font-size: 20px;
    color: #cd4500;
}

ul {
  font-size: 18px;
  line-height: 35px;
  color: #472425;
}

#episode .img{
  display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 1200px;
      margin: 10px auto;
}


#episode  .img a{
  margin: 10px;
}

#episode img{
  max-width: 275px;
}

#episode article p{
  font-size: 18px;
  line-height: 30px;
  color: #5F5F5F;
  
}





/*
#episodes{
  background-color: #4B0001;
  background-image: url('../img/episodes.jpg');
  height: 673px;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}




#episodes .row, #all_episodes .row{
  flex-wrap: wrap;
  justify-content: space-between;
}

#episodes h2, #all_episodes h2{
  color: #4298FE;
  font-family: Cherry Bomb;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
  text-align: center;
  padding-top: 60px;
}


#episodes .item, #all_episodes .item{margin-top: 20px;}

#episodes .item img, #all_episodes .item img{
  width: 285px;
  height: 180px;
  border-radius: 10px;
}

#episodes .item span, #all_episodes .item span{
  color: #ABABAB;
  font-family: Sofia Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  display: block;
  text-align: center;
  margin-top: 19px;
}

#all_episodes .item span{  
  color: #5F5F5F;
}
#all_episodes .item a{text-decoration: none;}
*/

#content{margin-top: 40px;}

#content h2{
  color: #005CC9;
  font-family: Cherry Bomb;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  text-align: center;
  margin: 30px 0;
}



#content h3{
  color: #A30001;
  font-family: Sofia Sans;
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: 25px; /* 100% */
}

#content img{width: 100%;}

#content article{
  padding-left: 20px;
  padding-right: 20px;  
}

#content p{
  color: #5F5F5F;
  font-family: Sofia Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 138.889% */
}

#content ul{
  margin-left: 35px;
  list-style: none;
}

#content ul li{
  color: #404040;
  font-family: Sofia Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 35px; /* 194.444% */
}

#content ul li::before{
  content: url('../img/li.png');
  margin-left: -28px;
  margin-top: 7px;
  position: absolute;
}


table{
  padding: 0;
  border-collapse: collapse;
  margin-top: 40px;
}

th{
  color: #FFF4F4;
  font-family: Sofia Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  height: 61px;
}

.th_1{
  background-color: #C0090A;
}

.th_2{
background-color: #D4B200;
}

.th_3{
background-color: #0057BD;
}

.first_td{
  color: #C0090A;
  text-align: center;
  font-family: Sofia Sans;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px; /* 192.857% */
  text-transform: uppercase;
  
}


td{
  color: #5F5F5F;
  font-family: Sofia Sans;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  text-transform: capitalize;
  border: 1px solid #D9D9D9;
  padding: 18px 15px;
}





/*
#actors{
  height: 980px;
  background-image: url('../img/actors.jpg');
  background-size: cover;
}

#other_actors{
  height: auto;
}


#actors h2, #other_actors h2{
  color: #4298FE;
  font-family: Cherry Bomb;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
  text-align: center;
  padding-top: 61px;
}
#actors .row, #other_actors .row{
  flex-wrap: wrap;
  justify-content: space-between;
}

#actors img, #other_actors img{
  height: 285px;
  border-radius: 285px;
  border: 1px solid transparent;
  background: #D9D9D9;
  margin-bottom: 24px;

}

#actors .item, #other_actors .item{
  margin-top: 20px;  
  width: 285px;
}

#actors .item a, #other_actors .item a{
  display: flex;
  flex-direction: column;
  justify-content: space-between;


  color: #D4B200;
  font-family: Sofia Sans;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 25px; 
  text-decoration: none;
  text-align: center;
  
}


#actors .item a span, #other_actors .item a span{
  color: #ABABAB;
  font-family: Sofia Sans;
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; 
  text-transform: uppercase;
  margin-top: 22px;
}



#reviews .row{
  flex-wrap: wrap;
  justify-content: space-between;

}

#reviews h2{
  color: #005CC9;
  font-family: Cherry Bomb;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: 10px;
  text-transform: uppercase;
  text-align: center;
  padding-top: 30px;
}

#reviews .item{
  border-radius: 10px;
  border: 1px solid #BC9D00;
  width: 387px;
  height: 400px;
  margin-top: 20px;
  background-image: url('../img/reviews.jpg');  
  
  background-position: bottom right;
  background-repeat: no-repeat;  
  display: flex;  
  flex-wrap: wrap;

}


#reviews h4{
  color: #A30001;
  font-family: Sofia Sans;
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px; 
  margin-bottom: -10px;
  margin-left: 20px;
  
}
#reviews p{
  color: #1F1F1F;
  font-family: Sofia Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; 
  margin-left: 20px;
  margin-right: 20px;
}

#reviews a{
  color: #005CC9;
  font-weight: 600;
}

#reviews span{
  color: #0057BD;
  font-family: Sofia Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; 
  text-transform: uppercase;
  display: block;
  align-self: flex-end;
  margin-bottom: 25px;
  margin-left: 20px;
  
}


*/
































footer{
  height: 300px;
  background: #081100; 
  margin-top: 50px;
  background: 
  url('../img/footer_1.png') center bottom no-repeat,
  url('../img/footer_2.png') center bottom no-repeat,
  #081100; 
  background-position: 
  calc(50% - 560px) bottom,  /* 50% - (ширина_изображения + отступ/2) */
  calc(50% + 560px) bottom;   /* 50% + (ширина_изображения + отступ/2) */
}


footer .row{
  justify-content: center;
}


footer .logo img{
  width: 100px;
  height: 116px;
}

footer .logo{
  margin: 26px 70px 0;
}

footer nav{
  margin-top: 67px;  
  max-width: 500px;
  display: flex;
  justify-content: space-between;
}

footer nav ul{
  width: 500px;
  display: flex;  
  justify-content: space-between;
  list-style-type: none;
  
}



footer nav ul a{
  color: #CBCBCB;  
  font-size: 18px;  
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}

footer nav ul a:hover {
  color: #96c63f;
}


footer h3{
  margin-top: 20px;
  margin-bottom: 0;
}

footer p{  
  color: #828282;
  font-family: Sofia Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  
  text-align: center;
  }




/* menu */
/* скрываем чекбокс */
.hamburger-menu{display: none;}
#menu__toggle {
    opacity: 0;
  }
  /* стилизуем кнопку */
  .menu__btn {
    display: flex; /* используем flex для центрирования содержимого */
    align-items: center;  /* центрируем содержимое кнопки */
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1;
  }
  /* добавляем "гамбургер" */
  .menu__btn > span,
  .menu__btn > span::before,
  .menu__btn > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #A0A0A0;
  }
  .menu__btn > span::before {
    content: '';
    top: -8px;
    
  }
  .menu__btn > span::after {
    content: '';
    top: 8px;
    
  }
  /* контейнер меню */
.menu__box {
    display: block;
    position: fixed;
    visibility: hidden;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 30px 53px 20px 37px;
    list-style: none;
    text-align: center;
    background-color: #05559f;
    box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  }
  /* элементы меню */
  .menu__item {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    text-align: left;
  }
  .menu__item:hover {
    
  }
  #menu__toggle:checked ~ .menu__btn > span {
    transform: rotate(45deg);
    
  }
  #menu__toggle:checked ~ .menu__btn > span::before {
    top: 0;
    transform: rotate(0);
    background-color: #fff;
  }
  #menu__toggle:checked ~ .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
    background-color: #fff;
  }
  #menu__toggle:checked ~ .menu__box {
    visibility: visible;
    left: 0;
  }

  .menu__box{
    overflow: auto;
  }

.menu__box li{
    list-style-type: none;
}
.menu__box ul li a{
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 19px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.menu__box ul li a:hover{
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 19px;
    text-transform: uppercase;
    color: #001726;
}

.menu__box span{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 200%;
    text-transform: uppercase;
    color: #373737;
    font-weight: 600;
}

.menu__box{
    z-index: 998;
}
.menu__btn{z-index: 999;}

.menu_logo{width: 50vw; margin-bottom: 30px;}
.menu_logo img{width: 100%;}
/* end mobile*/





.hamburger-menu{ display:none; }

@media screen and (max-width: 1290px) {
header nav ul{width: 400px;}
}

@media screen and (max-width: 1240px) {
  header .row{justify-content: start;}
  header .row:first-child{justify-content: space-evenly;}

  .main_title{
    margin-left: 95px;
  }

  header {
    background-position: top;
}

#characters .row {
  margin: 5px;
}

#episodes .row, #all_episodes .row {
  margin: 5px;
}

#actors .row, #other_actors .row {
  margin: 5px;
}

#reviews .row {
  margin: 5px;
}

footer {
  height: 300px;
  
  
  background-repeat: no-repeat;
  margin-top: 50px;
}

#content .photo_actors img:first-child {
  width: 665px;
}

#content .photo_actors img {
  width: 473px;
  height: 315px;
}





}



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

    .row{
      flex-wrap: wrap;      
    }
    
    #characters .row{justify-content: space-evenly;}
    
    #episodes, #all_episodes{height: auto;}
    #episodes .item, #all_episodes .item{margin-left:10px; margin-right: 30px;}
    #episodes .row, #all_episodes .row{justify-content: center; padding-bottom: 20px;}

    #content img {
      width: 100%;
    }
    
  .table{
    overflow-x: scroll;
  }


  #actors{
    height: auto;    
  }

  #actors .item, #other_actors .item{margin-left:50px; margin-right: 50px;}
  #actors .row, #other_actors .row{justify-content: center; padding-bottom: 20px;}

  #reviews .row{
    justify-content: center;
  }

  #reviews .item{
    margin-left: 20px;
    margin-right: 20px;
  }

  #characters .row {
    margin: 0;
  }
  
  #episodes .row, #all_episodes .row {
    margin: 0;
  }
  
  #actors .row, #other_actors .row {
    margin: 0;
  }
  
  #reviews .row {
    margin: 0;
  }

  #characters .item{
    width: 375px;
  }
  #characters .card {
    width: 375px;
    height: 375px;
}





.photo_actors{
  flex-direction: row;
  height: auto;
}

#content .photo_actors img:first-child,
#content .photo_actors img:last-child,
#content .photo_actors img
{
  max-width: 692px;  
  height: auto;
  margin: 10px auto;
}

footer .row{margin-left: 0;}

footer .logo{margin: 0 auto}
footer nav ul{
  columns: 2;
  margin: 0 auto;
}
footer p{text-align: center;}
}


@media screen and (max-width: 1060px) {
  header nav{margin-top: 20px;}
  header .logo, footer .logo{
    width: 100%;
    text-align: center;    
  }
  
    .logo {order: 1;}
    .nav_left {order: 2;}
    .nav_right {order: 3;}

    header iframe{
      width: 80%;
      min-height: 300px;
    }


    footer{height: auto;}


    header iframe{  
      height: 350px;
    }

}

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

  header{      
    background-image:url('../img/bg2.webp');
  }

header nav{display: none;}

header iframe{  
  height: 300px;
}

header .row:first-child {
  justify-content: flex-start;
  padding-left: 30px;
}

.main_title {
  margin-left: 30px;
}

#episodes h2, #all_episodes h2 {
  padding-top: 55px;
  font-size: 45px;
  }

  #episodes .row, #all_episodes .row {
    padding-bottom: 35px;
}

#characters h2 {
  margin-top: 32px;
  font-size: 45px;
}

#content h2 {
  margin-top: 28px;
  margin-bottom: 30px;
  font-size: 45px;
}

#actors h2, #other_actors h2 {
  font-size: 45px;
  padding-top: 50px;
}

#content {
  margin-top: 35px;
}

#actors, #other_actors {
  background-position: bottom;
}

#reviews h2 {
  font-size: 45px;
  padding-top: 22px;
}

#reviews .item {
  width: 374px;
}

.main_title h1 {
  font-size: 70px;
}

.main_title h1 span {
  font-size: 75px;
}


#content .photo_actors img:first-child,
#content .photo_actors img:last-child,
#content .photo_actors img
{
  width: 95%;  
}

footer ul{
  display: block;
  columns: 2;
}



}



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

    #episode h2, #episode .h2{
      font-size: 35px;
      margin-top: 40px;
    }
   
    #episode h3, #episode .h3{
      font-size: 30px;
      margin: 20px;
    }
    
    header .row:first-child {
      justify-content: flex-start;
      padding-left: 20px;
  }

  header .logo{margin-top: 29px;}

  header iframe{
    width: 80%;
    height: 200px;
  }


  .main_title {
    margin-left: 20px;
}

.main_title h1 span {
  font-size: 70px;
  line-height: 1;
}

.main_title h1 {
  font-size: 65px;
  margin-top: 29px;
}

header {
  background-image: url(../img/bg.jpg);
}

#characters h2 {
  margin-top: 25px;
  font-size: 40px;
  margin-bottom: 18px;
}

#episodes h2, #all_episodes h2 {
  padding-top: 50px;
  font-size: 40px;
  line-height: 1.3;
}

#characters .item {
  width: 386px;
  margin-top: 10px;
}

article{margin:0 20px;}
article ul{margin-left: 30px;}

#content h2 {
  font-size: 40px;
  line-height: 1.3;
  }

  #content h3 {
    font-size: 22px;
}

#actors h2, #other_actors h2 {
  font-size: 40px;
  line-height: 1.3;
  margin-top: 30px;
  padding-top: 40px;
  margin-bottom: 20px;
}

#reviews h2 {
  font-size: 40px;
  padding-top: 25px;
}

#reviews h4 {
  font-size: 23px;
}

#header_title_episode h1 {
  padding-top: 280px;
  line-height: 1.1;
}

#header_title_episode {
  background-position: unset;
}

#header_title_actors h1 {
  padding-top: 280px;
  line-height: 1.1;
}

footer nav ul{  
  columns: 1;
  flex-direction: column;
  margin-left: 100px;
}


footer{
  height: auto;
  padding-bottom: 40px;
}
footer nav{
  width: 100%;
  margin-top: 20px;  
}

footer .h3{
  font-size: 30px;
}


}