@font-face {
    font-family: "IntroRustBook-BaseG";
    src: url("../../fonts/blackFriday/fonts/IntroRustBook-BaseG.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "IntroRustG-Base";
    src: url("../../fonts/blackFriday/fonts/IntroRustG-Base.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: inherit;
}
p {
    margin: 0;
}
img {
    pointer-events: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #4B79A1 url("/catalog/view/theme/default/image/mail-foto/background.svg") no-repeat center;
    -webkit-background-size:cover;
    background-size:cover;

    font-family: 'Neucha', cursive;

    -webkit-transition: background 15s;
    -moz-transition: background 15s ;
    -ms-transition: background 15s ;
    -o-transition: background 15s ;
    transition: background 15s ;

    /*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#8AD9E9', endColorStr='#60B7D9', GradientType=0);
    /*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#8AD9E9', endColorStr='#60B7D9', GradientType=0)";
    /*background: #0A2342;*/
    /*background: -webkit-linear-gradient(to bottom, #60B7D9, #8AD9E9);*/
    /*background: linear-gradient(to bottom, #60B7D9, #8AD9E9);*/
    /*background: -olinear-gradient(to bottom, #60B7D9, #8AD9E9);*/
}
body.night {
    -webkit-transition: background 15s;
    -moz-transition: background 15s ;
    -ms-transition: background 15s ;
    -o-transition: background 15s ;
    transition: background 15s ;

    /*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#8AD9E9', endColorStr='#60B7D9', GradientType=0);
    /*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#8AD9E9', endColorStr='#60B7D9', GradientType=0)";
    background: #4B79A1;
    background: -webkit-linear-gradient(to top, #283E51, #0A2342);
    background: linear-gradient(to top, #283E51, #0A2342);
    background: -olinear-gradient(to top, #283E51, #0A2342);
}
.big-scene {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.small-cloud {
    background: url("/catalog/view/theme/default/image/mail-foto/cloud-small.png") no-repeat center;
    -webkit-background-size: contain;
    background-size: contain;
    position: fixed;
}
#mobileScene {
    display: none;
}

/*хмаринки знизу екрана*/
.cloud-wrapp {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 350px;
}
.cloud-wrapp .cloud-1 {
    position: fixed;
    width: 110vw;
    margin-left: -55vw;
    left: 50%;
}
.cloud-wrapp .cloud-2 {
    position: fixed;
    width: 120vw;
    margin-left: -60vw;
    left: 50%;
}
.cloud-wrapp .cloud-3 {
    position: fixed;
    width: 100%;
    /*margin-left: -70vw;*/
    left: 0;
}
.cloud-1 img,
.cloud-2 img,
.cloud-3 img {
    width: 100%;
    max-height:100%;
}
.cloud-1 {
    bottom: -90%;
    z-index: 2;
}
.cloud-2 {
    bottom: -80%;
    z-index: 4;
}
.cloud-3 {
    bottom: -50%;
    z-index: 99;
}
/*End хмаринки знизу екрана*/

/*cонечко*/
.sun-wrapp {
    width: 250px;
    height: 505px;
    position: absolute;
    top: -550px;
    z-index: 9;
}
#sun img,
#moon img{
    width: 100%;
}
.sun-wrapp div {
    position: absolute;
}
.small-cloud-1 {
    top: -50px;
    left: 0;
    width: 160px;
    height: 400px;
    z-index: 10;
}
.small-cloud-2 {
    z-index: 1;
    top: -60px;
    left: 300px;
    width: 105px;
    height: 350px;
}
.small-cloud-3 {
    top: -240px;
    left: -300px;
    width: 200px;
    height: 465px;
}
.small-cloud-4 {
    top: -60px;
    left: -300px;
    width: 95px;
    height: 216px;
}
.small-cloud-5 {
    top: -15px;
    right: -300px;
    width: 190px;
    height: 435px;
}
.small-cloud-6 {
    top: -10px;
    right: -300px;
    width: 110px;
    height: 303px;
}
/*End cонечко*/

/*логотип на кульках */
#sceneLotto { 
    position: fixed;
    bottom: -200px;
    left: 70%;
    width: 280px;
    height: 230px;
    margin-left: -140px;
    z-index: 10;
}
#sceneLotto div {
    position: absolute;
}
#sceneLotto .letter img {
    width: 50px;
}
.l {
    left: 76px;
    top: 70px;

    -webkit-transform: rotate(-28deg);
    -moz-transform: rotate(-28deg);
    -ms-transform: rotate(-28deg);
    -o-transform: rotate(-28deg);
    transform: rotate(-28deg);
}
.o {
    left: 101px;
    top: 50px;

    -webkit-transform: rotate(-22deg);
    -moz-transform: rotate(-22deg);
    -ms-transform: rotate(-22deg);
    -o-transform: rotate(-22deg);
    transform: rotate(-22deg);
}
.t {
    left: 112px;
    top: 46px;
}
.t2 {
    left: 140px;
    top: 34px;

    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
}
.o2 {
    left: 171px;
    top: 50px;

    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}
.logo {
    bottom: 0;
    left: 50%;

    -webkit-transform: translateX(-50%);
    -moz-transform:  translateX(-50%);
    -ms-transform:  translateX(-50%);
    -o-transform:  translateX(-50%);
    transform:  translateX(-50%);
}
.logo img {
    width: 140px;
}

#sceneBaloons {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
}

/*night scen*/
#moon {
    position: fixed;
    top: -650px;
    width: 250px;
    height: 505px;
    z-index: 9;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.star-big,
.star-norm,
.star-smal {
    position: fixed;
    top: -400px;
}
#star-sky {
    position: absolute;
    top: 20%;
    left: 50%;
    opacity: 0;

    -webkit-transform: translate(-50%, -20%);
    -moz-transform: translate(-50%, -20%);
    -ms-transform: translate(-50%, -20%);
    -o-transform: translate(-50%, -20%);
    transform: translate(-50%, -20%);
}
#star-sky img {
    width: 100%;
}
.star-big {
    width: 50px;
    height: 250px;
    background: url('/catalog/view/theme/default/image/mail-foto/big-star.png') no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
}
.star-norm {
    width: 40px;
    height: 200px;
    background: url('/catalog/view/theme/default/image/mail-foto/norm-star.png') no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
}
.star-smal {
    width: 22px;
    height: 325px;
    background: url('/catalog/view/theme/default/image/mail-foto/smal-star.png') no-repeat center;
    -webkit-background-size:contain;
    background-size:contain;
}
#star-smal {
    left: 30%;
}
#star-smal2 {
    left: 40%;
}
#star-smal3 {
    left: 70%;
}
#star-smal4 {
    left: 80%;
}
#star-norm {
    left: 45%;
}
#star-norm2 {
    left: 90%;
}

/*сцена на земле */
#earthScene {
    /*width: 100vw;*/
    /*height: 100vh;*/
    /*overflow: hidden;*/
    /*background-color: green;*/
}
.confetti {
    width:100%;
    height:100vh;
}
.happy-woomen-1 {
    position: fixed;
    width: 210px;
    bottom: -100%; 
}
.happy-woomen-1 img {
    width: 100%;
}

.happy-man-1 {
    position: fixed;
    left: 240px;
    bottom: -300px;
}
.happy-man-1 .man-1 {
    width: 140px;
}
.man-1_hand {
    position: absolute;
    right: 25px;
    top: 91px;
    width: 76px;
}
.happy-man-1 .bag-1 {
    width: 110px;
    position: absolute;
    left: -45px;
    top: 33px;
}
.happy-baby-1 {
    width: 60px;
    position: fixed;
    bottom: -300px;
    left: 120px;
}
.baby-1 {
    width: 100%;
}

/*опис акції*/
.scen-description {
    position: fixed;
    /*right: -75%;*/
    /*top: 0;*/
    z-index: 9;
    width: 800px;
    height: 475px;
    bottom: -100%;
    left: 50%;

    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.scen-description_text {
    padding:80px 100px 20px;
    width: 800px;
    height: 475px;
    background: url("/catalog/view/theme/default/image/mail-foto/dirigible.png") no-repeat center;
    background-size: contain;
    position: relative;
    text-align: center;
    color: #4EB9F3;

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.scen-description_text .title {
    font-size: 45px;
    margin-bottom: 10px;
}
.scen-description_text .description {
    font-size: 29px;
    margin-bottom: 25px;
    font-family: 'Neucha Latin', cursive;
}

    /*aeroplane*/
.aeroplane {
    position: absolute;
    /*right: 50%;*/
    bottom: 0;
    height: 170px;
    width: 1100px;
    opacity:0;

    align-items: center;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
.aeroplane-propeller {
    position: absolute;
    width: 130px;
    height: 130px;
    top: 2px;
    z-index: 2;
}
.aeroplane-body {
    z-index: 1;
}
.aeroplane-propeller img {
    width: 100%;
    height: 100%;
}
.airplane-banner-right,
.airplane-banner-left {
    width: 705px;
    height:165px;
    overflow: hidden;
    display: none;
    margin-top: -72px;
}
.airplane-banner-right img,
.airplane-banner-left img {
    width: 100%;
    height: auto;
}
.aeroplane.reverse {
    z-index: -1;

    -moz-transform: rotate3d(0, 1, 0, 180deg);
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
}

/*скали*/
#rock1 {
    position: fixed;
    bottom: -100%;
    right: 0;
}
#rock2 {
    position: fixed;
    bottom: -100%;
    left: 10%;
    z-index: 3;
}
#rock3 {
    position: fixed;
    bottom: -100%;
    left: 40%;
    z-index: 5;
}

/*aerostat*/
.aerostat {
    position: fixed;
    bottom: -100%;
}
.aerostat img {
    display: block;
    width: 100%;
    height: auto;
}
#aerostat1 {
    right: 5%;
    width: 135px;
    z-index: 9;
}
#aerostat2 {
    left: 15%;
    width: 89px;
}
#aerostat3 {
    left: 45%;
    width: 75px;
}
#aerostat5 {
    left: 65%;
    width: 105px;
}
.button {
    background-image: linear-gradient(to right, #f25763 0%, #ff0b30 100%);
    width: auto;
    padding: 0;
    line-height:50px;
    position: absolute;
    left: 50%;
    top: 50%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
.button p {
    text-align: center;
    text-transform: uppercase;
    color: #FFF;
    letter-spacing: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    vertical-align: middle;
}
.button:after {
    content: '';
    width: 15px;
    height: 15px;
    display: inline-block;
    background-color: #fff;
    vertical-align: middle;
    margin-left:10px;
    margin-right: 20px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.button:before {
    content: '';
    width: 15px;
    height: 15px;
    display: inline-block;
    background-color: #fff;
    vertical-align: middle;
    margin-right:10px;
    margin-left: 20px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

@media screen and (max-width: 1200px) {
    #bigScene {
        display: none;
    }
    body {
        background: #4B79A1 url("/catalog/view/theme/default/image/mail-foto/background-mob.svg") no-repeat center;
        -webkit-background-size:cover;
        background-size:cover;

        font-family: "OpenSansRegular", sans-serif;
    }
   #mobileScene {
       display: block;
       width: 100vw;
       height: 100vh;
       overflow: hidden;
       position: relative;
   }
   .stars-mob,
   .confetty-mob,
   .balloons-mob {
       position: fixed;
       top: -100%;
       right: -5vw;
       left: -5vw;
       width: 110vw;

       -webkit-transform: scale(10);
       -moz-transform: scale(10);
       -ms-transform: scale(10);
       -o-transform: scale(10);
       transform: scale(10);
   }
    .stars-mob img,
    .confetty-mob img,
    .balloons-mob img {
        width: 100%;
        display: block;

        -webkit-transition: all .5s;
        -moz-transition: all .5s ;
        -ms-transition: all .5s ;
        -o-transition: all .5s ;
        transition: all .5s ;
    }
    .confetty-mob {
        z-index: 4;
    }
    .stars-mob {
        z-index: 4;
    }
    .balloons-mob {
        z-index: 3;
    }
    .desc-mob {
        /*width:100%;*/
        width: 600px;
        /*height: 100%;*/
        height:480px;
        position: fixed;
        background: url("/catalog/view/theme/default/image/mail-foto/text-bg.png")no-repeat center;
        background-size: contain;
        padding:50px;
        z-index: 9;
        opacity: 0;

        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);

        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;

        -webkit-box-pack: justify;
        -webkit-justify-content: center;
        -ms-flex-pack: justify;
        justify-content: center;
    }
    .desc-mob_wrapp {
        position: relative;
        padding-top: 60px;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;

        -webkit-box-pack: justify;
        -webkit-justify-content: center;
        -ms-flex-pack: justify;
        justify-content: center;

        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .mob-title {
        font-size: 29px;
        margin-bottom: 25px;
        font-family: "OpenSansExtraBold",  sans-serif;
    }
    .mod-desc {
        font-size: 25px;
        margin-bottom: 25px;
        font-family: "OpenSansRegular",  sans-serif;
    }
    .mob-btn {
        display: inline-block;
        width: 175px;
        height: 45px;
        line-height: 45px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: bold;

        background: url("/catalog/view/theme/default/image/mail-foto/btn-bg.png") no-repeat center;
        -webkit-background-size: contain;
        background-size: contain;
    }
    #capHappy {
        position: fixed;
        right: 45px;
        top: -22px;
    }
    #logoMob {
        width: 60px;
        position: absolute;
        top: 0;
    }
    #bagL {
        position: fixed;
        left: -40px;
        bottom: -40px;
        z-index: 1;
    }
    #bagR {
        position: fixed;
        right: -40px;
        bottom: -40px;
        z-index: 1;
    }

}
@media screen and (max-width: 620px) {
    .desc-mob {
        width: 510px;
    }
    .desc-mob_wrapp {
        width: 300px;
        max-height: 100%;
        overflow-y: auto;
    }
}