@font-face {
    font-family: 'MuseoSansCyrl-500';
    src: url('fonts/MuseoSansCyrl-500.eot');
    src: url('fonts/MuseoSansCyrl-500.eot?#iefix') format('embedded-opentype'),
        url('fonts/MuseoSansCyrl-500.woff2') format('woff2'),
        url('fonts/MuseoSansCyrl-500.woff') format('woff'),
        url('fonts/MuseoSansCyrl-500.ttf') format('truetype'),
        url('fonts/MuseoSansCyrl-500.svg#MuseoSansCyrl-500') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MuseoSansCyrl-300';
    src: url('fonts/MuseoSansCyrl-300.eot');
    src: url('fonts/MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'),
        url('fonts/MuseoSansCyrl-300.woff2') format('woff2'),
        url('fonts/MuseoSansCyrl-300.woff') format('woff'),
        url('fonts/MuseoSansCyrl-300.ttf') format('truetype'),
        url('fonts/MuseoSansCyrl-300.svg#MuseoSansCyrl-300') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Museo Slab';
    src: url('fonts/MuseoSlab-700.eot');
    src: url('fonts/MuseoSlab-700.eot?#iefix') format('embedded-opentype'),
        url('fonts/MuseoSlab-700.woff2') format('woff2'),
        url('fonts/MuseoSlab-700.woff') format('woff'),
        url('fonts/MuseoSlab-700.ttf') format('truetype'),
        url('fonts/MuseoSlab-700.svg#MuseoSlab-700') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Museo Slab';
    src: url('fonts/MuseoSlab-500.eot');
    src: url('fonts/MuseoSlab-500.eot?#iefix') format('embedded-opentype'),
        url('fonts/MuseoSlab-500.woff2') format('woff2'),
        url('fonts/MuseoSlab-500.woff') format('woff'),
        url('fonts/MuseoSlab-500.ttf') format('truetype'),
        url('fonts/MuseoSlab-500.svg#MuseoSlab-500') format('svg');
    font-weight: 500;
    font-style: normal;
}
body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
#surfing{
    position: relative;
    background: #191919;
}
.white #surfing{
    background-color: #ffffff;
}
.surfingWrap{
    display: flex;
    flex-direction: row;
    min-height: -webkit-fill-available;
    min-height: 100vh;
}
.surfingWrap .picture{
    background: url(images/main_bg300.jpg);
    background-size: cover;
    width: 100%;
    display: flex;
    position: relative;
}
.surfingWrap .offerWrap{
    padding: 0 4.688vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #0e0d0d;
    align-items: baseline;
}

.white .surfingWrap .offerWrap{
    background: #f4f4f4;
    z-index: 10;
}
.numOffer, .titleText{
    color: #ffffff;
    font-family: "Museo Slab";
    font-weight: 700;
    display: block;
}
.white .numOffer,.white .titleText{
    color: #000000;
}
.numOffer{
    font-size: 140px;
    line-height: 180px;
}
.titleText{
    font-size: 40px;
}
.freeSpins, .deposit{
    color: #776A60;
    font-family: "MuseoSansCyrl-300";
    font-size: 16px;
}
.freeSpins span{
    color: #fff;
    font-weight: normal;
}
.freeSpins{
    font-size: 40px;
    font-weight: 700;
    line-height: 30px;
    font-family: "Museo Slab";
    margin: 35px 0;
}
.white .freeSpins span{
    color: #F15330;
    font-family: "MuseoSansCyrl-300";
    font-weight: normal;
}
.freeSpins span{
    font-size: 16px;
}
.deposit{
    text-align: center;
}
.white .freeSpins{
    color: #F15330;
}
.copyCode{
    width: 320px;
    height: 55px;
    background: #282828;
    text-align: center;
    box-sizing: border-box;
    color: #FFCA00;
    font-size: 18px;
    font-family: "MuseoSansCyrl-500";
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #353535;
    border-radius: 3px;
    cursor: pointer;
    transition: all .7s;
    z-index: 10;
    position: relative;
    margin-bottom: 25px;
}
.white .copyCode{
    background: #ffffff;
    color: #000000;
    border: 1px solid #E1E1E1;
}
.copyCode.copied{
    display: none;
}
.copied .copyCode{
    display: none;
}
.copied .copyCode.copied{
    display: flex;
    color: #ffffff;
    background: #2CC414;
    border: 1px solid #29B613;
}
.claimWrap{
    border: 1px solid #F15330;
    border-radius: 36px;
    width: 320px;
    height: 72px;
    display: flex;
    align-items: center;
}
.claimWrap a{
    color: #ffffff;
    font-size: 16px;
    font-family: "MuseoSansCyrl-500";
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 308px;
    height: 60px;
    box-sizing: border-box;
    background: #F15330;
    border-radius: 30px;
    margin: 0 auto;
}
.logo{
    margin-bottom: 6.29629vh;
}
.white .logo .b{
    fill: #000000;
}
.codeWrap{
    margin-top: 8.98vh;
    position: relative;
    z-index: 10;
}
.shadow{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent linear-gradient(180deg, #000000 0%, #00000000 50%) 0% 0% no-repeat padding-box;
    display: none;
    pointer-events: none;
}
.logoMob{
    display: none;
    width: 27.188vw;
}
.termsBtn{
    color: #F15330;
    font-family: "MuseoSansCyrl-500";
    font-size: 12px;
    position: absolute;
    z-index: 10;
    right: 48px;
    bottom: 48px;
    background: #F4F4F4;
    box-shadow: 0px 16px 24px #00000033;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 500;
    transition: all .4s;
}
.termsBtn.active{
    background: #F15330;
    color: #ffffff;
}
.terms p{
    margin: 0;
}
.terms{
    max-width: 372px;
    position: absolute;
    right: 72px;
    bottom: 72px;
    display: none;
    padding: 24px;
    color: #ffffff;
    font-family: "MuseoSansCyrl-500";
    border-radius: 8px;
    line-height: 18px;
    background: #0e0d0d;
}
.terms p:last-child{
    color: #737A82;
}
.white .terms{
    background: #ffffff;
    color: #000000;
}
.white .terms p:last-child{
    color: #737A82;
}
.palm{
    position: absolute;
    max-width: 19.896vw;
    left: 0;
    transform: translate(-32.6%, -50%);
    top: 50%;
}
.white .picture .palm .z{
    fill: #f4f4f4;
}
.offer{
    position: relative;
    z-index: 10;
}
.logoNight{
    display: inline-block;
}
.logoDay{
    display: none;
}
.white .logoNight{
    display: none;
}
.white .logoDay{
    display: inline-block;
}
.white .terms p:last-child a,
.white .terms p:last-child a:hover,
.white .terms p:last-child a:focus,
.white .terms p:last-child a:visited{
    color: #737A82;
}
@media screen and (max-width: 1460px) and (orientation: landscape){
    .surfingWrap .picture{
        background-position-x: 75%;
    }
    .palm{
        max-width: 100%;
    }
}
@media screen and (max-width: 1100px) and (orientation: landscape){
    .palm{
        max-width: 32.896vw;
    }
}
@media (max-width: 1024px) and (orientation: portrait),(max-width: 1023px) {
    .white .surfingWrap .offerWrap{
        padding: 40px 0;
    }
    .surfingWrap{
        flex-direction: column;
    }
    .offerWrap{
        order: 2;
    }
    .numOffer{
        line-height: 90px;
    }
    .picture{
        order: 1;
        min-height: 53vh;
        position: relative;
    }
    .shadow{
        display: block;
    }
    .logoMob{
        display: inline-block;
        position: absolute;
        top: 3vh;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
    .logo{
        display: none;
    }
    .numOffer, .titleText{
        font-size: 9.5vw;
        display: inline-block;
    }
    .numOffer{
        margin-right: 10px;
    }
    .offer{
        margin: 0 auto;
    }
    .freeSpins, .deposit{
        text-align: center;
        font-size: 3.375vw;
    }
    .codeWrap{
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }
    .claimWrap{
        margin: 0 auto;
    }
    .surfingWrap .offerWrap{
        min-height: 43vh;
    }
    .termsBtn{
        display: none;
    }
    .terms{
        width: auto;
        position: relative;
        display: block !important;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        max-width: initial;
    }
    .palm {
        position: absolute;
        max-width: 36.896vw;
        left: -11%;
        transform: translate(-32.6%, -50%);
        top: inherit;
        transform: translateY(5%);
    }
    .offer{
        text-align: center;
    }
}
@media screen and (max-width: 1100px) and (max-height: 450px) and (orientation: landscape){
    .surfingWrap{
        flex-direction: column;
    }
    .offerWrap{
        order: 2;
    }
    .picture{
        order: 1;
        min-height: 265px;
        position: relative;
    }
    .surfingWrap .picture{
        background-position-y: 44%;
    }
    .shadow{
        display: block;
    }
    .logoMob{
        display: inline-block;
        position: absolute;
        top: 3vh;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 20vw;
    }
    .logo{
        display: none;
    }
    .numOffer, .titleText{
        font-size: 6.5vw;
        display: inline-block;
    }
    .numOffer{
        margin-right: 10px;
    }
    .offer{
        margin: 0 auto;
    }
    .freeSpins, .deposit{
        text-align: center;
        font-size: 2.375vw;
    }
    .freeSpins{
        font-size: 6.5vw;
    }
    .codeWrap{
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.98vh;
    }
    .claimWrap{
        margin: 0 auto;
    }
    .surfingWrap .offerWrap{
        min-height: 60vh;
    }
    .termsBtn{
        display: none;
    }
    .terms{
        width: auto;
        position: relative;
        display: block !important;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        max-width: initial;
    }
    .palm {
        position: absolute;
        max-width: 28.896vw;
        left: -8%;
        transform: translate(-32.6%, -50%);
        top: inherit;
        transform: translateY(-13%);
    }
    .numOffer{
        line-height: 100px;
    }
    .codeWrap{
        margin-bottom: 60px;
    }
    .white .freeSpins{
        margin-top: 0;
    }
    .terms{
        font-size: 14px;
    }
}
@media screen and (max-width: 470px){
    .numOffer{
        margin-right: 5px;
        line-height: 55px;
    }
    .titleText{
        font-size: 32px;
    }
    .numOffer{
        font-size: 50px;
    }
    .freeChip{
        white-space: nowrap;
    }
    .freeSpins{
        max-width: 245px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }
    .freeSpins{
        font-size: 32px;
    }
    .freeSpins span{
        font-size: 14px;
    }
    .copyCode{
        font-size: 15px;
        width: 283px;
        height: 48px;
    }
    .claimWrap{
        width: 284px;
        height: 62px;
    }
    .claimWrap a{
        width: 274px;
        height: 52px;
    }
    .claimWrap a{
        font-size: 13px;
    }
    .freeSpins{
        margin-bottom: 26px;
    }
    .codeWrap{
        margin-top: 0;
    }
    .codeWrap{
        margin-top: 7px;
        margin-bottom: 25px;
    }
    .terms{
        font-size: 14px;
    }
    .palm {
        left: -11%;
        transform: translate(-32.6%, -50%);
        transform: translateY(-18%);
    }
    .surfingWrap .picture{
        background-position-x: center;
    }
    .picture{
        min-height: calc(57vh - 50px);
    }
    .surfingWrap{
        min-height: auto;
    }
    .white .surfingWrap .offerWrap{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .deposit, .freeSpins span{
        font-size: 14px;
    }
    .offer{
        padding-top: 20px;
        max-width: 390px;
    }
}
@media screen and (max-width: 470px) and (min-height: 650px){
    .surfingWrap{
        min-height: 79vh;
    }
    .surfingWrap .offerWrap{
        min-height: 36vh;
    }
    .picture{
        min-height: 41vh;
    }
}
@media screen and (max-width: 600px) and (max-height: 330px) and (orientation: landscape){
    .numOffer{
        line-height: 70px;
    }
}