@font-face {
 font-family: CeraPRO-Regular;
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
}

@font-face {
 font-family: CeraPRO-Black;
 font-weight: bold;
 font-style: normal;
 font-variant: normal;
}

@font-face {
 font-family: "TrashHand";
 src : url('fonts/TrashHand.ttf');
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
}

body {
padding: 0;
margin: 0;
background: #020e08;
transition-property: background-position;
}


.mobilewebkit {
display: none;
}

textarea,
input.text,
input[type="text"],
input[type="email"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

#cloud1 {
    margin-top: 180px;
    width: 1200px;
    height: 400px;
    background-repeat: no-repeat;
    background-image: url(/pictures/cloud2.png);
    animation:cloud1 320s infinite;
animation-timing-function: linear;
}

#cloud2 {
/*    width: 1200px;
    height: 700px;*/
    margin-top: 160px;
    background-repeat: no-repeat;
    background-image: url(/pictures/cloud1.png);
/*    transform: translate3d(0,0,0);*/
    animation:cloud2 210s infinite;
  animation-timing-function: linear;
}


@-moz-document url-prefix() {
  .chrome {
    display:none;
  }
}  

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .firefox {
    display:none;
  }
}

@keyframes cloud2 {
    0% {
        transform: translateX(800px);
    }

    50% {
        transform: translateX(-200px);
    }

    100%{ 
        transform: translateX(800px);
    }
}


#layer1 {
    background-color: #32c0fa;
/*    height: 750px;*/
}

#layer2 {
    background-image: url(/pictures/layer2.png);
}

#layer3c {
    background-image: url(/pictures/layer3C.png);
    margin-top: 240px;
    background-size: 100%;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

#layer25d {
    background-image: url(/pictures/layer25D.png);
}

#layer25g {
    background-image: url(/pictures/layer25G.png);
}

#layer3g {
    background-image: url(/pictures/layer3G.png);
    transition: opacity 0.5s ease-in-out;
}

#layer3d {
    background-image: url(/pictures/layer3D.png);
    transition: opacity 0.3s ease-in-out;
}

#headermobile {
    display:none;
}

#headermobile img {
    width: 100%;
    margin-top: -130px;
}

.scrolling {

}

.mobile {
     display: none;
     width:100%;
   }

.desktop {
     width:100%;
   }



#header {
    font-family: CeraPRO-Regular;
    color: #ffffff;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    font-size: 25px;
    font-weight: normal;
}


#logo {
    background-image: url(/pictures/logo.png);
        background-size:auto;

}

#layer4g {
    background-image: url(/pictures/layer4g.png);
}

#layer4d {
    background-image: url(/pictures/layer4d.png);
}

/*#layer5g {
    background-image: url(/pictures/layer5g.png);
}*/

#layer5c {
    background-image: url(/pictures/layer5c.png);
}

/*#layer5d {
    background-image: url(/pictures/layer5d.png);
}*/

#layer6d {
    background-image: url(/pictures/layer6d.png);
}

#layer6g {
    background-image: url(/pictures/layer6g.png);
}

#layer7g {
    background-image: url(/pictures/layer7g.png);
}

#layer7d {
    background-image: url(/pictures/layer7d.png);
}

#warius {
    background-image: url(/pictures/warius.png);
}

#magnuspicture {
    background-image: url(/pictures/magnuspicture.png);
    position: relative;
    height: 285px;
    width: 540px;
    background-repeat: no-repeat;
    margin: 0 auto;
/*        margin-top: -100px;*/
}

#magnusbubble {
    background-image: url(/pictures/bubble.png);
    font-family: TrashHand;
    width: 320px;
    margin-left: 240px;
    color: #000000;
    height: 240px;
    margin-top: 0px;
    display: inline-block;
    text-align: center;
}

#magnusbubbletext {
    width: 240px;
    line-height: 40px;
    font-size: 40px;
    margin-left: 50px;
    margin-top: 63px;
}

#magnussignature {
    font-size: 19px;
    line-height: 22px;
    margin-top: -6px;
    font-family: CeraPRO-Black;
    color: #ffffff;
    float: right;
    text-align: center;
    margin-right: 5px;
    width: 255px;
}

#greenmask {
    background-color: #9acd00;
    height: 500px;
    margin-top: 750px;
}

#greenmask, #cloud2, #layer1, #layer2, #layer25d, #layer25g, #layer3g, #layer3d, #layer4g, #layer4d, #layer5g, #layer5c, #layer5d, #layer6g, #layer6d, #layer7g, #layer7d, #warius, #logo,#logofade, #cloudparallax, #footer2, #header {
	position: absolute;
	top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-repeat: no-repeat;
    width: 100%;

/*    background-position: 50% 0%;*/
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#warius, #footer2 {
-webkit-transform: translate3d(0,0,0);
}
}

#footer {
    height: 450px;
    bottom: 0;
    position: relative;
    font-family: CeraPRO-Black;
    margin-top: -130px;
    background-color: #69a71f;
}

#signup {
text-align: center;
margin-top: -20px;
}

input[type=email] {
    background: #ffffff;
    height: 70px;
    width: 335px;
    margin-right: 10px;
    margin-bottom: 15px;
    padding-left: 20px;
    color: #000000;
    border: none;
    border-radius: 18px;
    font-family: CeraPRO-Regular;
    font-size: 15px;
}

input[type=submit] {
    background: #3f6141;
    color: #ffffff;
    border: none;
    padding: 27px 36px 27px 36px;
    border-radius: 20px;
    font-family: CeraPRO-Regular;
    font-size: 15px;
}

input[type=submit]:hover {
    box-shadow: 0px 7px #030;
    transform: translateY(-5px);
    cursor: pointer;
}

input[type=submit]:active  {
    box-shadow: 0px -3px #030;
    transform: translateY(0px);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.storesbutton {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 17px 26px 17px 26px;
    border-radius: 15px;
    font-family: CeraPRO-Regular;
    font-size: 15px;
}

.storesbutton:hover {
    box-shadow: 0px 7px #2d362c;
    transform: translateY(-5px);
    cursor: pointer;
}

.storesbutton:active {
    box-shadow: 0px -3px #2d362c;
    transform: translateY(0px);
}



::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #000000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #000000;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #000000;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #000000;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #000000;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #000000;
}

:focus::-webkit-input-placeholder {
   color:transparent;
}
:focus::-moz-placeholder { /* Firefox 18- */
   color:transparent; 
}
:focus::-moz-placeholder {  /* Firefox 19+ */
   color:transparent; 
}
:focus::-ms-input-placeholder {  
   color:transparent;
}

.logotext {
vertical-align: sub;
height:22px;
transition: all 0.2s ease-in-out;
cursor: pointer;
}

.logotext:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
margin-left: 7px;
margin-right: 7px;
cursor: pointer;
}

.storelogo {
margin-right: 10px;
}

#stores {
margin: 0 auto;
    color: #ffffff;
    line-height: 23px;
    text-align: center;
    font-size: 15px;
    font-weight: normal;
    width: 90%;
}

#footer1 {
    background-image: url(/pictures/footer1.png);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 130px;
    padding-top: 200px;
    background-position: center;
}

#footer2 {
    background-image: url(/pictures/footer2.png);
}

#parallaxcontent{
    height:1080px;
    overflow: hidden;
    position: relative;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.video-wrapper-3 {
  width: 60%;
  margin: 0 auto;
  margin-top: -10px;
  background: #3f6141;
  padding: 15px;
  border-radius: 15px;
  text-align: center;
  margin-top: -10px;
}

/*#buynow {
margin-top: -40px;
}*/

#content2 {
    margin-top: -40px;
    background: rgba(154,205,0,1);
    background: -moz-linear-gradient(top, rgba(154,205,0,1) 0%, rgba(154,205,0,1) 55%, rgba(99,162,31,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(154,205,0,1)), color-stop(55%, rgba(154,205,0,1)), color-stop(100%, rgba(99,162,31,1)));
background: -webkit-linear-gradient(top, rgba(154,205,0,1) 0%, rgba(154,205,0,1) 55%, rgba(99,162,31,1) 100%);
background: -o-linear-gradient(top, rgba(154,205,0,1) 0%, rgba(154,205,0,1) 55%, rgba(99,162,31,1) 100%);
background: -ms-linear-gradient(top, rgba(154,205,0,1) 0%, rgba(154,205,0,1) 55%, rgba(99,162,31,1) 100%);
background: linear-gradient(to bottom, rgba(154,205,0,1) 0%, rgba(154,205,0,1) 55%, rgba(99,162,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9acd00', endColorstr='#63a21f', GradientType=0 );
}

#content {
    position: relative;
    color: #ffffff;
    font-family: CeraPRO-Regular;
    margin-top: -850px;
}
 
#content-privacy {
    background: rgba(154,205,0,1);
    background: -moz-linear-gradient(top, rgba(154,205,0,1) 0%, rgba(154,205,0,1) 55%, rgba(99,162,31,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(154,205,0,1)), color-stop(55%, rgba(154,205,0,1)), color-stop(100%, rgba(99,162,31,1)));
    background: -webkit-linear-gradient(top, rgba(154,205,0,1) 0%, rgba(154,205,0,1) 55%, rgba(99,162,31,1) 100%);
    background: -o-linear-gradient(top, rgba(154,205,0,1) 0%, rgba(154,205,0,1) 55%, rgba(99,162,31,1) 100%);
    background: -ms-linear-gradient(top, rgba(154,205,0,1) 0%, rgba(154,205,0,1) 55%, rgba(99,162,31,1) 100%);
    background: linear-gradient(to bottom, rgba(154,205,0,1) 0%, rgba(154,205,0,1) 55%, rgba(99,162,31,1) 100%);
    color: #ffffff;
    font-family: CeraPRO-Regular;
    padding: 100px;
}

.title-privacy {
    font-family: CeraPRO-Black;
    margin: 0 auto;
    font-size: 35px;
    text-align: left;
}

.text-privacy {
    margin: 0 auto;
    line-height: 23px;
    font-size: 17px;        
    text-align: left;
}

.title {
    font-family: CeraPRO-Black;
    width: 560px;
        margin: 0 auto;
        text-align: center;
        font-size: 35px;
}

#tagline {
    font-weight: bold;
    width: 560px;
        margin: 0 auto;
        text-align: center;
        font-size: 35px;
        margin-top: -50px;
}

.text {
    width :520px;
        margin: 0 auto;
        line-height: 23px;
        font-size: 17px;        
         text-align: center;
}

.monster {
    display: inline-block;
    margin-top: -40px;

}

#mce-responses {
    color: #294850;
    font-size: 20px;
    width: 520px;
    position: absolute;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }

.smallmobile {
display: none;
}   

.bigmobile {
display: block;
}  

@media only screen and (max-width: 900px) {

.video-wrapper-3 {
  width: 70%;
}

#headermobile {
    margin-top: -410px;
}


#logo {
    background-size:auto;
}

#content {
    margin-top: -300px;
}

.desktop {
     display: none;
   }

    .mobile{
     display: block;
   }  

#parallaxcontent{
    height:650px;
}

/*#layer3g {
    opacity: 0;
}

#layer3d {
    opacity: 0;
}
*/
}


@media only screen and (max-width: 500px) {

.video-wrapper-3 {
  width: 75%;
}

.storesbutton {
    width: 35%;
    border-radius: 12px;
 padding: 10px 15px 10px 15px;
}

#content2 {
margin-top: 0;
}

#mce-responses {
    font-size: 13px;
    width: 90%;
}

    .monster {
    display: none;

}

#parallaxcontent{
    height:600px;
}

#headermobile {
    margin-top: -360px;
}

#headermobile img {
/*    margin-top: -170px;*/
        margin-bottom: 0px;
}

#footer1 {
    background-image: url(/pictures/footer1mobile.png);
    height: 130px;
    padding-top: 310px;
}

.smallmobile {
display: block;
}   

.bigmobile {
display: none;
}  

.storelogo {
width:40%;
margin-top: -15px;
}

input[type=email] {
    width: 45%;
}

input[type=submit] {
    padding: 26px 16px 27px 18px;
 }
    
#stores {
    width: 80%;
    padding-top: 15px;
}

#layer5g, #layer5d, #layer4g, #layer4d, #layer6d, #layer6g {
display: none;
}

#content {
    margin-top: -190px;
}

#logo {
    background-size: 90%;
    margin: 0 auto;
}

#header {
font-size:13px;
}

#header img {
width:30%;
}

#signup {
    text-align: center;
}

#magnuspicture {
    background-image: url(/pictures/magnuspicturemobile.png);
    height: 480px;
    width: 310px;
    margin-top: -70px;
    margin-bottom: 60px;
}

#magnusbubble {
    background:none;
    margin-left: 0px;
    margin-top: 0px;
}

#magnusbubbletext {
    margin-left: 36px;
}

#magnussignature {
    margin-right: 30px;
    margin-top: 250px;
}

.title {
width: 90%;
padding-left: 10px;
padding-right: 10px;
line-height: 40px;
}

.text {
width: 80%;
padding-left: 20px;
padding-right: 20px;
}

#greenmask {
margin-top: 550px;
}

}