html,body{
    margin:0;
    padding:0;
    font-size:0;
    font-family: "Red Hat Display", sans-serif;
    z-index:1;
    overflow-x:hidden;
    background:#20222E;
}
._desktop{
    display:block;
}
._mobile{
    display:none;
}
h1{
    font-size:48px;
    font-weight:700;
    margin:0;
}
a{
    color:#5D0090;
}
p{
    line-height:1.8;
    font-size:18px;
    font-weight:400;
    margin:0;
    margin-top:1%;
}
img{
    width:100%;
    max-width:100%;
}
.img_height{
    position:relative;
    display:block;
}
.img_height img{
    width:auto;
    max-width:unset;
    height:100%;
    max-height:100%;
}


.bar{
    position:absolute;
    opacity:0.4;
    background: red;
    background: rgb(173,173,173);
    background: linear-gradient(90deg, rgba(173,173,173,0.5) 0%, rgba(173,173,173,1) 35%, rgba(173,173,173,1) 65%, rgba(173,173,173,0.5) 100%);
    width:100%;
    height:23px;
    bottom:0;
    margin-bottom:2px;
    clip-path: polygon(0 0, calc(50% - 200px) 0, calc(50% - 184px) calc(100% - 2px),calc(50% + 184px) calc(100% - 2px),calc(50% + 200px) 0, 100% 0, calc(50% + 200px) calc(100% - 20px), 100% calc(100% - 20px), calc(50% + 200px) calc(100% - 20px), calc(50% + 185px) 100%, calc(50% - 185px) 100%, calc(50% - 200px) calc(100% - 20px), 0 0);
}

.section_holder{

}
.section_holder .holder{
    padding:10% 5%;
    margin:auto;
}
.section_holder .holder .divider{
    background:#ffca7b;
    height:5px;
    width:100px;
}
.section_holder .holder h1{
    color:#ffca7b;
}
.section_holder .holder p{
    font-size:16px;
    color:#FFFFFF;
}
.section_holder .holder ol,.section_holder .holder ul{
    font-size:16px;
    color:#FFFFFF;
}
.section_holder .holder li{
    margin-top:1%;
}
@media screen and (max-width: 1280px) {
    .section_holder .holder{
        padding:10% 5%;
        margin:auto;
    }
    .section_holder .holder p{
        font-size:14px;
    }
    .section_holder .holder ol,.section_holder .holder ul{
        font-size:14px;
    }
}
@media screen and (max-width: 1000px) {
    .section_holder .holder{
        padding:100px 5%;
    }
}


.section1_holder{
    position:relative;
    z-index:10;
    margin-top:6%;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(50% + 200px) calc(100% - 20px), calc(50% + 185px) 100%, calc(50% - 185px) 100%, calc(50% - 200px) calc(100% - 20px), 0 calc(100% - 20px));
}
.section1_holder .logo img{
    width: 100%;
}
.section1_holder .holder{
    /*https://bennettfeely.com/clippy/*/
    /*clip-path: polygon(0 0, 100% 0, 100% 94%, 63% 94%, 60% 100%, 40% 100%, 37% 94%, 0 94%);*/
    position:absolute;
    width:100%;
    z-index:2;
    margin-top:31%;
}
.section1_holder .holder .play{
    position:relative;
    display:block;
    width:100px;
    margin:auto;
}
.section1_holder .holder .bg{
    z-index:1;
}


.section2_holder{
    position:relative;
    margin-top:-20px;
    z-index:9;
    width: 100%;
    background: url(../images/bg2.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(50% + 200px) calc(100% - 20px), calc(50% + 185px) 100%, calc(50% - 185px) 100%, calc(50% - 200px) calc(100% - 20px), 0 calc(100% - 20px));
}
.section2_holder .holder{
    max-width:1200px;
    padding:10% 5%;
    text-align:center;
    margin:auto;
}
.section2_holder .holder .title{
    display:inline-block;
    height:48px;
}
.section2_holder .holder p{
    color:#FFFFFF;
}


.section3_main_holder{
    position:relative;
}

.section3_main_holder .element{
    position:absolute;
    z-index:10;
    right:-3%;
    width:43%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


.section3_holder{
    position:relative;
    margin-top:-20px;
    z-index:8;
    width: 100%;
    background: url(../images/bg3.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(50% + 200px) calc(100% - 20px), calc(50% + 185px) 100%, calc(50% - 185px) 100%, calc(50% - 200px) calc(100% - 20px), 0 calc(100% - 20px));
}
.section3_holder .holder{
    max-width:1200px;
    padding:10% 5%;
    text-align:left;
    margin:auto;
}
.section3_holder .holder .text_holder{
    width:60%;
}
.section3_holder .holder .title{
    display:inline-block;
    height:48px;
}
.section3_holder .holder p{
    color:#FFFFFF;
}
@media screen and (max-width: 1300px) {
    .section3_main_holder .element{
        width:50%;
    }
    .section3_holder .holder .text_holder{
        width:50%;
    }
}
@media screen and (max-width: 1000px) {
    .section3_main_holder .element{
        right:-5%;
        width:60%;
    }
    .section3_holder .holder .text_holder{
        width:50%;
    }
}
@media screen and (max-width: 768px) {
    .section3_main_holder .element{
        top:-15%;
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        right:-10%;
        width:120%;
    }
    .section3_holder .holder .text_holder{
        margin-top:55%;
        width:100%;
        text-align:center;
    }
}



.section4_holder{
    position:relative;
    margin-top:-20px;
    z-index:7;
    width: 100%;
    background: url(../images/bg4.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(50% + 200px) calc(100% - 20px), calc(50% + 185px) 100%, calc(50% - 185px) 100%, calc(50% - 200px) calc(100% - 20px), 0 calc(100% - 20px));
}
.section4_holder .holder{
    position:relative;
    max-width:1200px;
    padding:5% 5%;
    text-align:center;
    margin:auto;
    left:0;
    right:0;
}
.section4_holder .holder .title{
    position:absolute;
    display:block;
    height:32px;
    margin-top:7%;
    margin-left:5%;
    z-index:20;
}
.section4_holder .desktop_swiper{
    display:block;
}
.section4_holder .mobile_swiper{
    display:none;
    width:114%;
    margin-left:-7%;
}
.section4_holder .swiper{
    width:calc(100% - 100px);
    z-index:9;
}
.section4_holder .swiper-prev{
    position:absolute;
    display:inline-block;
    cursor:pointer;
    width:40px;
    left:5%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index:10;
}
.section4_holder .swiper-next{
    position:absolute;
    display:inline-block;
    cursor:pointer;
    width:40px;
    right:5%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index:10;
}




.section5_holder{
    position:relative;
    margin-top:-20px;
    z-index:6;
    width: 100%;
    background: url(../images/bg5.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(50% + 200px) calc(100% - 20px), calc(50% + 185px) 100%, calc(50% - 185px) 100%, calc(50% - 200px) calc(100% - 20px), 0 calc(100% - 20px));
}
.section5_holder .holder{
    max-width:1200px;
    padding:5% 5%;
    text-align:center;
    margin:auto;
}
.section5_holder .holder .title{
    display:block;
    height:48px;
}
.section5_holder .holder .link{
    display:inline-block;
    margin:5px;
    width:48px;
}

@media screen and (max-width: 1350px) {
    h1{
        font-size:32px;
    }
    p{
        font-size:16px;  
    }
}
@media screen and (max-width: 1200px) {
    .section1_holder{
        margin-top:75px;
    }

    .section4_holder .holder .title{
        height:4%;
    }
}
@media screen and (max-width: 1000px) {
}
@media screen and (max-width: 768px) {
    ._desktop{
        display:none;
    }
    ._mobile{
        display:block;
    }
    h1{
        font-size:24px;
    }
    p{
        font-size:14px;
    }

    .section1_holder{
        margin-top:55px;
    }
    .section1_holder .holder{
        margin-top:57%;
    }

    .section2_holder .holder{
        padding:75px 5%;
        padding-bottom:calc(10% + 75px);
    }
    .section2_holder .holder .title{
        height:36px;
    }

    .section4_holder .holder{
        padding:75px 5%;
    }
    .section4_holder .desktop_swiper{
        display:none;
    }
    .section4_holder .mobile_swiper{
        display:block;
    }
    .section4_holder .holder .title{
        height:3%;
        margin-top:0%;
        margin-left:10%;
    }

    .section5_holder .holder{
        padding:75px 5%;
    }
    .section5_holder .holder .title{
        height:36px;
    }
}
@media screen and (max-width: 400px) {
    .section5_holder .holder .title{
        height:auto;
        width:100%;
    }
    .section5_holder .holder .title img{
        width:100%;
        max-width:100%;
        height:auto;
        max-height:unset;
    }
}