* { margin: 0; padding: 0; }

html{
  height: 100%;
}
body {
  min-height: 100%;
}

.cover{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.placeholder{position: relative; left: 0;
    position: relative;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;}
.hidden{display: none;}

.first_g {
    background: #28c2bd; /* Old browsers */
    background: -moz-linear-gradient(left,  #28c2bd 0%, #0060ff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #28c2bd 0%,#0060ff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #28c2bd 0%,#0060ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28c2bd', endColorstr='#0060ff',GradientType=1 ); /* IE6-9 */
    z-index: 100;
}

.second_g{
    z-index: 200;
    background: #28c2bd; /* Old browsers */
    background: -moz-linear-gradient(left,  #28c2bd 0%, #883fc5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #28c2bd 0%,#883fc5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #28c2bd 0%,#883fc5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28c2bd', endColorstr='#883fc5',GradientType=1 ); /* IE6-9 */
}


body{font-family: lifesumRegular;}

h1{
    color: #FFF;
    font-family: lifesumBold;
    font-style: italic;
    font-size: 120px;
    line-height: 98px;
    letter-spacing: -0.03em;
    font-kerning: normal;
}

p{color: #FFF;font-size: 23px;margin: 30px 0 0 0;font-style: italic;}

p > span{
    font-family: lifesumMedium;
}

.logo{
    background: url('img/short_logo.png') no-repeat;
    width: 84px;
    height: 84px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 500;
    background-size: 84px;
}

.app_icon{
    z-index: 2000;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -126.5px;
}
.app_icon a{
    background: url('img/download.png');
    width: 126.5px;
    height: 38px;
    background-size: 252.5px;
    text-indent: -9999px;
    display: block;
    float: left;
}
.app_icon .apple{}
.app_icon .google{
    background-position: -127px 0;
}

.wrapper{
    z-index: 500;
    position: relative;
}

.left, .right{position: relative;}

.left{
    float: left;
    width: 590px;
}
.right{
    float: right;
}

.phone{
    width: 350.5px;
    height: 616.5px;
    background: url('img/mobile.png') no-repeat;
    background-size: 350.5px;
    position: relative;
}


.phone .inner_els{
    background: url('img/bars_n_stuff.png') no-repeat top left;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 450;
}

.phone .gradient_1{
    background: url('img/graradient_1.png') no-repeat top left;
    position: absolute;
    top: 0;
    left: 0;
}
.phone .gradient_2{
    background: url('img/graradient_2.png') no-repeat top left;
    position: absolute;
    top: 0;
    left: 0;
}

.phone .inner_els, .phone .gradient_1, .phone .gradient_2 {
    background-size: 350.5px;
    width: 350.5px;
    height: 596.5px;
    position: absolute;
    top: 0;
    left: 0;
}

.screen_cover{width: 237px;height: 420px;top: 91px;z-index: 20000;position: relative;left: 57px;overflow: hidden;}

.toggle_screen{z-index: 500; position: absolute;top: 6px;left: 0;}

.toggle_screen.first{
    background: url('img/banana.png') no-repeat top left;
    background-size: 235.5px;
    width: 235.5px;
    height: 418.5px;
}

.toggle_screen.second{
    background: url('img/beer.png') no-repeat top left;
    background-size: 235.5px;
    width: 235.5px;
    height: 418.5px;
}

.toggle_screen.third{
    background: url('img/burger.png') no-repeat top left;
    background-size: 235.5px;
    width: 235.5px;
    height: 418.5px;
}

.toggle_screen.fourth{
    background: url('img/fries.png') no-repeat top left;
    background-size: 235.5px;
    width: 235.5px;
    height: 418.5px;
}


@media screen and (min-width: 950px) {
    .wrapper{
        width: 960px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 945px) {
    h1{
    font-size: 90px;
    line-height: 70px;
    padding: 0 0 0 20px;
}
    p{
    padding: 0;
    font-size: 23px;
    padding: 0 0 0 20px;
}
    .left{
    width: 60%;
}
    .right{
    width: 40%;
}
}

@media screen and (max-width: 680px) {
    .left{
    width: 50%;
}
    .right{
    width: 50%;
    right: 30px;
}
    h1{
    font-size: 57px;
    line-height: 43px;
    margin: 0;
    padding: 0 10px;
    }
    p{
        font-size: 20px;
    }

}

@media screen and (max-width: 550px) {
    h1{
    padding: 0 30px;
    font-size: 75px;
    line-height: 60px;
}
    p{
    font-style: italic;
    margin: 16px 0 0 0;
    font-size: 16px;
    padding: 0 30px;
}
    .app_icon{display: block;position: relative;float: left;}

    .logo{width: 42px;height: 42px;background-size: 42px;left: 30px;top: 30px;}

    .left{
        width: 100%;
        top: initial!important;
        margin: 100px 0 20px 0;
    }
    .right{
        width: 100%;
        margin: 0;
        right: auto;
        top: initial!important;
    }

    .phone{
        width: 226.25px;
        background-size: 225.25px;
        margin: 0 auto;
        height: 430px;
    }

    .phone .inner_els, .phone .gradient_1, .phone .gradient_2{
        background-size: 225.25px;
        width: 225.25px;
        height: 348.25px;
        position: absolute;
    }

    .screen_cover{
        top: 59px;
        left: 37px;
        width: 152px;
        height: 270px;
    }

    .toggle_screen{z-index: 500; position: absolute;top: 6px;left: 0;}

.toggle_screen.first{
    background-size: 151.5px;
    width: 151.5px;
    height: 263.5px;
}

.toggle_screen.second{
    background-size: 151.5px;
    width: 151.5px;
    height: 263.5px;
}

.toggle_screen.third{
    background-size: 151.5px;
    width: 151.5px;
    height: 263.5px;
}

.toggle_screen.fourth{
    background-size: 151.5px;
    width: 151.5px;
    height: 263.5px;
}

.cover{
    padding-bottom: 250px;
}

}