@import url('https://fonts.googleapis.com/css2?family=Montserrat: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&display=swap');

html{
    font-family: 'Montserrat', sans-serif;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%
}
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body{
    margin:0;
    font-family: 'Montserrat', sans-serif;
    color: rgb(50,50,50);
    font-size: 16px;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
    display:block
}
audio,canvas,progress,video{
    display:inline-block;
    vertical-align:baseline
}
audio:not([controls]){
    display:none;
    height:0
}
[hidden],template{
    display:none
}
a{
    background-color:transparent;
    text-decoration: none;
}
a:active,a:hover{
    outline:0
}
abbr[title]{
    border-bottom:1px dotted
}
b,strong{
    font-weight:700
}
dfn{
    font-style:italic
}
h1{
    margin:.67em 0;
    font-size:2em
}
mark{
    color:#000;
    background:#ff0
}
small{
    font-size:80%
}
sub,sup{
    position:relative;
    font-size:75%;
    line-height:0;
    vertical-align:baseline
}
sup{
    top:-.5em
}
sub{
    bottom:-.25em
}
img{
    border:0;
    max-width: 100%;
}
svg:not(:root){
    overflow:hidden
}
figure{
    margin:1em 40px
}
hr{
    height:0;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box
}
pre{
    overflow:auto
}
code,kbd,pre,samp{
    font-family:monospace,monospace;
    font-size:1em
}
button,input,optgroup,select,textarea{
    margin:0;
    font:inherit;
    color:inherit
}
button{
    overflow:visible
}
button,select{
    text-transform:none
}
button,html input[type=button],input[type=reset],input[type=submit]{
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled],html input[disabled]{
    cursor:default
}
button::-moz-focus-inner,input::-moz-focus-inner{
    padding:0;
    border:0
}
input{
    line-height:normal
}
input[type=checkbox],input[type=radio]{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
    height:auto
}
input[type=search]{
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-appearance:textfield
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
fieldset{
    padding:.35em .625em .75em;
    margin:0 2px;
    border:1px solid silver
}
legend{
    padding:0;
    border:0
}
textarea{
    overflow:auto
}
optgroup{
    font-weight:700
}
table{
    border-spacing:0;
    border-collapse:collapse
}
td,th{
    padding:0
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.absoluteCenter{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.sectionContent{
    position: absolute;
    top: 0;
    left: 0;
}

.fullVideo{
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.videoOverlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0);
    z-index: 150;
}

.logoWrap{
    position: absolute;
    /*top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);*/
    top: 20px;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    -o-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    z-index: 200;
}


.logoWrap img{
    width: 75px;
    display: block;
    margin: 0 auto;
    margin-bottom: 7px;
}

.logoWrap .button{
    background-color: rgb(252,175,24);
    color: rgb(196,22,27);
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s;
    text-align: center;
    border-radius: 20px;
    padding: 3px 16px;
    font-size: 16px;
}

.logoWrap .button:hover{
    background-color: rgb(196,22,27);
    color: rgb(252,175,24);
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s;
    text-align: center;
    border-radius: 4px;
    font-size: 18px;
}

#main-video-wrap{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0,0,0);
    z-index: 1000;
    display: none;
}

#main-video-wrap .pauseButton{
    color: rgb(255,255,255);
    background-color: rgb(0,0,0);
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 1100;
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
}

#main-video-wrap .mainVideo{
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    -webkit-transform: translate(-50%,-50%) rotate(0deg);
    -moz-transform: translate(-50%,-50%) rotate(0deg);
    -ms-transform: translate(-50%,-50%) rotate(0deg);
    -o-transform: translate(-50%,-50%) rotate(0deg);
    transform: translate(-50%,-50%) rotate(0deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

#main-video-wrap .rotated{
    -webkit-transform: translate(-50%,-50%) rotate(90deg);
    -moz-transform: translate(-50%,-50%) rotate(90deg);
    -ms-transform: translate(-50%,-50%) rotate(90deg);
    -o-transform: translate(-50%,-50%) rotate(90deg);
    transform: translate(-50%,-50%) rotate(90deg);
}

#main-video-wrap .pauseButtonRotated{
    top: 10px;
    left: 10px;
    bottom: auto;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translate(0%,50%) rotate(90deg);
    -moz-transform: translate(0%,50%) rotate(90deg);
    -ms-transform: translate(0%,50%) rotate(90deg);
    -o-transform: translate(0%,50%) rotate(90deg);
    transform: translate(0%,50%) rotate(90deg);
}

.section{
    overflow: hidden;
}

.logoSection{
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.logoSection img{
    width: 250px;
    margin: 0 auto;
    display: block;
}

.section .middle{
    bottom:0;
    width:5vw;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    background-color:rgba(0,0,0,0.4);
    z-index:100;
}

.redSection{
    background-color:rgb(196,22,27);
    color:rgb(252,175,24)
}

.yellowSection{
    background-color:rgb(252,175,24);
    color:rgb(196,22,27)
}

.section .third{
    position:relative;
    z-index:100;
}


.section .thirdLeft .contentWrap{
    position:absolute;
    width:100%;
    top:50%;
    left:5vw;
    width:40vw;
    transform: translateY(-50%);
}

.section .thirdLeft .iconWrap{
    width:50vw;
    margin-left:50vw;
    padding:100px 0;
}

.section .third .iconWrapSmall{
    padding:30px 0 !important;
}

.section .iconWrap img{
    display:block;
    width:100px;
    margin:0 auto;
}

.section .third .iconWrapSmall img{
    width:60px;
}


.section .thirdRight .contentWrap{
    position:absolute;
    width:100%;
    top:50%;
    right:5vw;
    width:40vw;
    transform: translateY(-50%);
}

.section .third .title{
    font-size:26px;
    font-weight:600;
    margin-bottom:5px;
}

.section .third .text{
    font-size:16px;
}

.redSection .separator{
    width:100;
    height:2px;
    background-color:rgb(252,175,24);
    position:relative;
    z-index:200;
}

.yellowSection .separator{
    width:100;
    height:2px;
    background-color:rgb(196,22,27);
    position:relative;
    z-index:200;
}

.section .separator .circle{
    width:30px;
    height:30px;
    border-radius:30px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.redSection .separator .circle{
    background-color:rgb(252,175,24);
    
}

.yellowSection .separator .circle{
    background-color:rgb(196,22,27);
    
}



.section .thirdRight .iconWrap{
    width:50vw;
    padding:75px 0;
}


@media screen and (max-width: 700px) {
   .section .separator .circle{
    width:10px;
    height:10px;
    border-radius:10px;
   } 

   .section .third .title{
        font-size:16px;
    }

    .section .third .text{
        font-size:12px;
    }

    .section .thirdLeft .iconWrap{
        padding:20px 0;
    }

    .fullVideo{
        min-width: 200vw;
    }
}