@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=PT+Sans+Narrow:wght@700&display=swap');
/* #020126 #05F2AF #BFB304 #F2E307 #A68B03 #010010 #fc0ff5 */
/* font-family: 'Advent Pro', sans-serif;
font-family: 'PT Sans Narrow', sans-serif; */
/* https://colizeumarena.com/wp-content/themes/colizeum/images/foil-bottom.svg */

@font-face {
  font-family: "Furore";
  src: url('fonts/Furore.otf');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "PT Sans Narrow";
  src: url('fonts/PTSans-Bold.ttf');
  font-style: normal;
  font-weight: normal;
}

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    font-family: 'PT Sans Narrow', sans-serif;
    scroll-behavior: smooth;
  }
body{
  background: url('images/body.jpg');
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
/* h2{
  font-family: 'Furore';
  font-size: 25px;
} */
  a{
    text-decoration: none;
  }
  .link{
    color: #fc0ff5;
  }
  .link:hover{
    color: #05F2AF;
    transition: 0.2s;
  }
  .menu{
    width: 100%;
    height: 110px;
    background: #f2e207f7; 
    position: fixed;
    /* border-bottom: 3px solid #020126; */
    margin-top: -110px;
    z-index: 999;
  }
  .menu_box{
    width: 80%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
  } 
  .box_box{
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .menu_link{
    display: block;
    /* border: #010010 1px solid; */
    background: #010010;
    width: 15%;
    height: 45%;
    color: #F2E307;
    text-align: center;
    line-height: 49px;
    clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px), calc(100% - 10px) 100%,0 100%,0 10px);
    font-size: 18px;
    font-family: "Furore";
  }
  .menu_link:hover{
    color: #05F2AF;
    text-shadow: 3px 0px #fc0ff5;
    transition: 0.1s;
  }
  .banner{
    width: 100%;
    height: 110%;
    background: url("images/banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 110px;
    /* 1100px */
  }
  .sec_1{
    width: 100%;
    height: 700px;
    background: #010010;
    color: #F2E307;  
    /* position: relative; */
  }
  .sec_1::before{
    content: "";
    width: 750px;
    height: 19px;
    background-image: url('images/decor.png');
    position: absolute;
    margin-top: 682px;
    margin-left: -12px;
    transform: rotate(180deg);
  }
  .text_container{
    width: 80%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    position: relative;
    /* justify-content: space-around; */
  }
  .sec1_cont{
    width: 820px;
    height: 350px;
    background: #010010;
    display: flex;
    align-items: center;
    border: 1px solid #F2E307;
    z-index: 2;
    box-shadow: 12px 12px ;
  }
/*   .sec1_pod{
    width: 700px;
    height: 310px;
    background: #fc0ff5;
    position: absolute;
    left: 150px;
    top: 220px;
  } */
  .inner{
    width: 80%;
    height: 65%;
    margin: auto;
    font-size: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    z-index: 2;
    position: relative;
  }
  .Cp{
    font-size: 35px;
  }
  .zag1{
    display: block;
    width: 300px;
    height: 70px;
    background: #F2E307;
    text-align: center;
    line-height: 70px;
    color: #010010;
    z-index: 4;
}
  .zag1_pod{
    width: 200px;
    height: 55px;
    background: #05F2AF;
    position: absolute;
    left: 110px;
    top: -12px;
    /* z-index: -3; */
}
  .sec_2{
    width: 100%;
    height: 950px;
    background: #F2E307;
    color: #F2E307;
  }
  .sec2_textcont{
    display: flex;
    flex-direction: row-reverse;
    position: relative;
  }
  .sec2_cont{
    width: 920px;
    height: 600px;
    display: flex;
    align-items: center;
    background: #010010;
    z-index: 2;
  }
  /* .sec2_cont::after{
    content: '';
    width: 563px;
    height: 480px;
    background: #010010;
    margin-left: 380px;
    margin-top: -140px;
    position: absolute;
    z-index: 1;
  } */
  .zag2{
    display: block;
    width: 200px;
    height: 70px;
    background: #05F2AF;
    text-align: center;
    line-height: 70px;
    color: #010010;
    z-index: 1;
    position: relative;
}
  .zag2_pod{
    width: 140px;
    height: 55px;
    background: #fc0ff5;
    position: absolute;
    left: -10px;
    top: 2px;
    z-index: -1;
}
  .sec2_pod{
    width: 563px;
    height: 480px;
    background: #05F2AF;
    top: 160px;
    right: -28px;
    position: absolute;
    z-index: 1;
}
  .inner_row{
    width: 80%;
    height: 65%;
    margin: auto;
    font-size: 26px;
    display: flex;
    justify-content: space-evenly;
    z-index: 2;
    position: relative;
    border: 1px solid #F2E307;
}
  .sec_3{
    width: 100%;
    height: 750px;
    background: black;
    position: relative;
}
  .sec_3::before{
    content: '';
    width: 100%;
    height: 39px;
    position: absolute;
    transform: rotate(180deg);
    background: url('images/razor.svg');
    top: -30px;
}
  .sec_3::after{
    content: '';
    width: 100%;
    height: 39px;
    position: absolute;
    background: url('images/razor.svg');
    top: 745px;
  }
  .sec3_cont{
    width: 1000px;
    height: 400px;
    display: flex;
    align-items: center;
    flex-direction: row;
    border: #F2E307 solid 1px;
}
  .photo{
    width: 40%;
    height: 100%;
    background: url('images/Mike.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
  .photo::after{
    content: 'Майкл Пондсмит';
    position: absolute;
    display: block;
    width: 170px;
    height: 25px;
    background: #F2E307;
    line-height: 25px;
    text-align: center;
    font-size: 20px;
    top: 562px;
    left: 20px;
}
  .info{
    width: 70%;
    height: 100%;
    background: black;
    display: flex;
    align-items: center;
    border-left: #F2E307 1px solid;
}
  .inner_info{
    width: 80%;
    height: 90%;
    margin: auto;
    font-size: 26px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    z-index: 2;
    position: relative;
    color: #F2E307;
}
  .zag3{
    display: block;
    width: 200px;
    height: 70px;
    background: #F2E307;
    text-align: center;
    line-height: 70px;
    color: #010010;
    z-index: 1;
    position: relative;
  }
  .zag3_pod{
    width: 160px;
    height: 55px;
    background:#05F2AF;
    position: absolute;
    left: 53px;
    top: 22px;
    z-index: -1;
}

/*   .sec1_cont{
    width: 820px;
    height: 350px;
    background: #010010;
    display: flex;
    align-items: center;
    border: 1px solid #F2E307;
    z-index: 2;
    box-shadow: 12px 15px ;
  }
  .sec1_pod{
    width: 700px;
    height: 310px;
    background: #fc0ff5;
    position: absolute;
    left: 150px;
    top: 220px;
  } */

  .sec_4{
    width: 100%;
    height: 900px;
    /* background: url('https://sun9-43.userapi.com/85VHmE4vlYxtVh5TTxx2ITjk7XQ7L3miNtkcIw/wrmvEmWZ8mk.jpg');
    background-size: cover; */
  }
  .blur{
    width: 100%;
    height: 100%;
    background: #fc0ff547;
  }
  .sec4_cont{
    width: 900px;
    height: 550px;
    background: #010010;
    color: #F2E307;
    display: flex;
    align-items: center;
    box-shadow: 170px 161px 0px -151px #fc0ff5,  -222px -212px 0px -200px #05F2AF;  
  }
  /* .sec4_cont::after{
    content: '';
    width: 550px;
    height: 450px;
    position: absolute;
    border-bottom: #F2E307 3px solid;
    border-right: #F2E307 3px solid;
    left: 750px;
    top: 250px;     
  } */
  .zag4_pod{
    width: 140px;
    height: 55px;
    background: #fc0ff5;
    position: absolute;
    left: -10px;
    top: -46px;
    z-index: -1;
  }
  .sec_5{
    width: 100%;
    height: 800px;
    background: #F2E307;
    position: relative;
    z-index: -2;
  }
  /* .sec_5::before{
    content: '';
    width: 651px;
    height: 19px;
    position: absolute;
    background: #F2E307;
    top: -19px;
  }
  .sec_5::after{
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    background: #F2E307;
    top: -9px;
    left: 626px;
    transform: rotate(45deg);
  } */
  .sec5_cont{
    width: 800px;
    height: 450px;
    border: #010010 1px solid;
    /* box-shadow: 110px -110px 0px -100px; */
    display: flex;
    align-items: center;
    background: #F2E307;
  }
  .sec5_cont::before{
    content: '';
    width: 180px;
    height: 120px;
    position: absolute;
    background: #010010;
    left: -10px;
    top: 515px;
    z-index: -1;
  }
  .sec5_cont::after{
    content: '';
    width: 250px;
    height: 180px;
    position: absolute;
    background: #010010;
    left: 560px;
    top: 165px;
    z-index: -1;
  }
  .zag5{
    display: block;
    width: 180px;
    height: 70px;
    background: #010010;
    line-height: 70px;
    text-align: center;
    box-shadow: 27px -18px 0px -11px #05F2AF, 27px -18px 0px -11px #fc0ff5;

  }
  .sec5_color{
    color: #F2E307;
  }
  .footer{
    width: 100%;
    height: 200px;
    /* border-top: #010010 1px solid; */
    background: #F2E307;
  }
  .footer_stripe{
    width: 100%;
    height: 28px;
    background: url('images/separator.svg');
    position: absolute;
    margin-top: -15px;
    background-size: cover;
    /* background-repeat: no-repeat; */
  }
  .footer_cont{
    width: 45%;
    display: flex;
    justify-content: space-between;
  }
  .footer_link{
    width: 300px;
    height: 80px;
    background: #010010;
    clip-path: polygon(0 0, 92% 0%, 100% 30%, 100% 100%, 0 100%);
    display: flex;
    align-items: center;
    color: #F2E307;
  }
  .footer_link:hover{
    text-shadow: 3px 0px #fc0ff5;
    transition: 0.1s;
    color: #05F2AF;
  }
  /* .logo_cont{
    width: 52px;
    height: 100%;
    background: #F2E307;
    clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
  }
  .logo{
    background-size: cover;
    width: 100%;
    height: 100%;
  } */
  .logo_zag{
    font-size: 17px;
    font-family: "Furore";
  }
  .inner_row2{
    width: 60%;
    height: 65%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 30px;
}
  @media(max-width: 1300px){
    .menu_link{
      font-size: 15px;
    }
  }
  @media(max-width: 1600px){
    .footer_link{
      width: 250px;
    }
  }
  @media(max-width: 1700px){
    .footer_cont{
      width: 50%;
    }
    .banner{
      height: 100%;
    }
  }
  @media(max-width: 1900px){
    .banner{
      height: 100%;
    }
  }