.cmma {
    margin-top: 70px;
}

#badurSection1 img {
    width: 100%;
    max-width: 461px
}

#badurSection2 img {
    width: 100%;
    max-width: 600px
}

.badurRed {
    color: #FFF;
    background: #c03924 url(../img//badur-bg.jpg) top center no-repeat
}

.badurRed h1 {
    font-size: 48px;
    margin-bottom: 10px;
    letter-spacing: -1px
}

.badurRed p {
    font-weight: normal;
    font-size: 21px
}

#badurLogo {
    padding: 125px 0 160px
}

#badurImac {
    margin-top: -70px
}

.badurRed div {
    position: relative;
    top: -60px;
    padding-bottom: 40px
}

.badurBtn {
    background: #c03924;
    color: #FFF;
    transition: background-color .2s ease-in-out
}

.badurBtn:hover, .badurBtn:focus {
    background: #d9533f
}

#badurSection3 {
    background: #f1efef
}

#badurScreensDiv {
    width: 845px
}

#badurScreen1 {
    float: left;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 782px
}

#badurScreen2 {
    float: right;
    position: relative;
    top: -280px;
    right: 0;
    margin-bottom: -240px
}

#badurUl {
    float: left;
    text-align: left;
    padding: 10px 0 0 30px
}

#badurUl li {
    color: #696262;
    font-size: 16px;
    margin-bottom: 20px
}

#badurUl li:last-of-type {
    margin-bottom: 0
}

.badurEnd {
    margin: 30px 0 50px 0
}

@media screen and (max-width: 845px) {
    #badurScreensDiv {
        width: auto
    }

    #badurScreen2 {
        display: none
    }

    #badurUl {
        padding-bottom: 40px
    }
}

@media screen and (max-width: 720px) {
    #badurLogo {
        padding: 60px 0 140px
    }

    .badurRed h1 {
        font-size: 36px
    }

    .badurRed p {
        font-size: 18px
    }

    .badurBtn {
        font-size: 30px;
        margin: 45px 70px
    }
}

@media screen and (max-width: 540px) {
    .badurRed div {
        top: -40px
    }

    .badurRed h1 {
        font-size: 30px
    }

    .badurRed p {
        font-size: 16px
    }

    .badurBtn {
        font-size: 24px;
        margin: 35px 60px;
        padding: 14px 30px
    }

    #badurUl {
        padding: 20px 0 40px 0
    }
}

@media screen and (max-width: 400px) {
    .badurBtn {
        font-size: 18px;
        padding: 14px 18px
    }
}

.youtube-csata-1 {
    background: #000;
    padding: 3em 0
}

.work .youtube-csata-1 img {
    max-width: 340px;
    margin: 2em 0
}

.work .youtube-csata-2 img {
    max-width: 183px;
    margin: -68px 0 1em 0
}

.work .youtube-csata-3 img {
    max-width: 600px;
    margin: -90px 0 0 0
}

.youtube-csata-3 {
    background: #000 url(../img/work/youtube-csata-bg.jpg) no-repeat;
    background-size: 100%
}

.youtube-csata-2 {
    padding: 0 0 7em 0
}

.ing-finance-1 {
    background: #fff;
    height: 180px
}

.work .ing-finance-2 img {
    max-width: 905px;
    margin: -100px 0 0 0
}

#ing-mfp-video iframe {
    width: 90%;
    margin: 0 auto;
    max-width: 640px
}

@media screen and (min-width: 540px) {
    .work .ing-finance-2 img {
        max-width: 905px;
        margin: -170px 0 0 0
    }
}

.ing-finance-3 {
    background: #fff
}

@media screen and (min-width: 1000px) {
    .ing-finance-3 {
        background: url(../img/work/ing-finance-characters.png) center bottom repeat-x
    }
}

.ing-finance-3 {
    animation: animatedBackgroundX 40s linear infinite;
    -webkit-animation: animatedBackgroundX 40s linear infinite
}

.work .ing-finance-3 img {
    margin: -60px 0 0 0;
    max-width: 800px
}

.ing-finance-2 {
    color: #fff;
    padding: 0 0 5em 0;
    background: #f60
}

.ing-finance-4 {
    background: #000;
    padding: 6em 0
}

#scbt-1 img, #scbt-1 img {
    max-width: 100%
}

#scbt-1 h1 {
    font-size: 48px;
    margin-bottom: 40px;
    color: #6e6767
}

#scbt-1 h2 {
    font-size: 21px;
    line-height: 36px;
    color: #6e6767;
    margin-bottom: 40px
}

#scbt-2 {
    background: url(../img/work/ilcsi-scbt-bg.jpg) top center
}

.scbtPlakat {
    margin-bottom: 120px;
    width: 100%;
    max-width: 407px
}

.scbtPlakat:first-of-type {
    margin-right: 20px
}

@media screen and (max-width: 900px) {
    scbt-1h1 {
        font-size: 34px
    }

    .scbtPlakat {
        margin-bottom: 40px;
        width: 100%;
        max-width: 407px
    }
}

#ilcsiLogosDiv {
    width: 480px;
    height: 410px;
    margin: 0 auto
}

#ilcsiLogo {
    float: left;
    position: relative;
    top: 40px;
    left: 0
}

#ilcsiParadicsom {
    float: right;
    position: relative;
    top: -150px;
    right: 5px;
    margin-bottom: -150px
}

#ilcsi-2 {
    background: #006a35;
    color: #FFF
}

#ilcsiKepek {
    width: 840px;
    height: 470px;
    margin: 0 auto
}

#ilcsiFacebook {
    float: left;
    position: relative;
    top: 50px;
    left: 0
}

#ilcsiKrem {
    float: right;
    position: relative;
    top: -200px;
    right: 0;
    margin-bottom: -200px
}

#ilcsi-2 h1 {
    font-size: 48px;
    font-weight: bold;
    letter-spacing: -1px;
    margin-bottom: 20px
}

#ilcsi-2 h2 {
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 50px
}

#ilcsi-2 p {
    padding-bottom: 60px;
    font-size: 21px;
    line-height: 36px
}

#ilcsiGif {
    padding: 90px 0 30px
}

#ilcsi-4 {
    height: 230px;
    background: url(../img/work/ilcsi-footer.png) bottom center no-repeat
}

#ilcsi-5 {
    display: none
}

#ilcsi-5 img, #ilcsi-4 img, #ilcsi-3 img, #ilcsi-2 img, #ilcsi-1 img {
    max-width: 100%
}

@media screen and (max-width: 1000px) {
    #ilcsi-2 p {
        width: auto
    }

    #ilcsi-4 {
        display: none
    }

    #ilcsi-5 {
        display: block
    }

    #ilcsiGif {
        padding: 50px 0 30px
    }
}

@media screen and (max-width: 840px) {
    #ilcsiKepek {
        width: auto;
        height: auto
    }

    #ilcsiFacebook {
        margin-bottom: 73px
    }

    #ilcsiKrem {
        display: none
    }

    #ilcsi-2 h1 {
        font-size: 40px
    }
}

@media screen and (max-width: 600px) {
    #ilcsi-2 p {
        font-size: 18px;
        line-height: 28px
    }

    #ilcsi-2 h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 35px
    }

    #ilcsi-2 h1 {
        font-size: 30px
    }

    #ilcsiGif {
        padding: 30px 0
    }
}

@media screen and (max-width: 518px) {
    #ilcsiLogosDiv {
        width: auto;
        height: auto
    }

    #ilcsiLogo {
        float: none;
        margin-bottom: 73px
    }

    #ilcsiParadicsom {
        display: none
    }
}

#wwf-1 img, #wwf-2 img {
    max-width: 100%
}

#wwf-1 h1 {
    font-size: 48px;
    margin-top: 60px;
    color: #6e6767
}

#wwf-1 h2 {
    font-size: 21px;
    line-height: 36px;
    color: #6e6767;
    margin-bottom: 80px
}

#wwf-2 {
    background: url(../img/work/ilcsi-scbt-bg.jpg) top center
}

.wwfPlakat {
    margin-bottom: 120px
}

.wwfLogo1 {
    margin-right: 20px
}

@media screen and (max-width: 900px) {
    #wwf-1 h1 {
        font-size: 34px
    }

    #wwf-1 h2 {
        font-size: 20px;
        line-height: 30px;
        margin-top: 20px
    }

    .wwfPlakat {
        margin-bottom: 40px
    }
}

@media screen and (max-width: 540px) {
    .wwfLogo1 {
        margin-right: 0;
        padding-top: 20px;
        position: relative;
        z-index: 2000
    }

    .wwfLogo2 {
        margin-top: -120px
    }
}

.work .seo-ilcsi-1 {
    background: #fff url(../img/work/seo-ilcsi-bg.jpg) repeat-x;
    height: 420px
}

.work .seo-ilcsi-1 img {
    max-width: 280px;
    margin-top: 200px
}

.work .seo-ilcsi-2 {
    padding: 4em 0
}

.work .seo-ilcsi-2 p {
    display: block;
    max-width: 620px;
    text-align: center;
    margin: 2em auto
}

.work .seo-ilcsi-2 .growth {
    font-size: 2em;
    color: #166539
}

.work .seo-ilcsi-2 .growth div {
    font-size: 4em;
    letter-spacing: -0.1em
}

.work .seo-ilcsi-3, .work .seo-ilcsi-5 {
    background: #dbbb0d;
    color: white;
    text-align: left;
    padding: 8em 0
}

.work .seo-ilcsi-4 {
    background: url(../img/seo-graph-bg.png) center center no-repeat #166539;
    color: white;
    text-align: left;
    padding: 8em 0
}

.work .seo-ilcsi-3 img, .work .seo-ilcsi-4 img, .work .seo-ilcsi-5 img {
    max-width: 197px;
    margin: 0 auto;
    display: block
}

@media only screen and (max-width: 480px) {
    .work .seo-ilcsi-2 .growth {
        font-size: 1.5em
    }
}

.aida-1 {
    background: #242934 url(../img/work/aida-logo.png);
    background-position: center 37%;
    background-repeat: no-repeat;
    height: 280px
}

@media screen and (min-width: 720px) {
    .aida-1 {
        height: 280px
    }
}

.work .aida-2 img {
    max-width: 838px;
    padding-bottom: 3em;
    margin-top: -6em
}

.aida-2 {
    background: #2e3442;
    padding: 3em 0;
    color: #fff
}

.aida-3 {
    background: #ebedf0;
    padding: 3em 0;
    color: #2e3442
}

.aida-5 .grid-container {
    width: 100%;
    margin: 6em auto
}

.aida-5 {
    padding: 4em 0
}

.cta.aida {
    color: #fff;
    background-color: #e9674b
}

.cta.aida:hover {
    background-color: #f28269
}

.viasatplay-1 {
    background: #242934 url(../img/work/viasat-play-mobile-bg.jpg);
    background-position: center center;
    padding: 3em 0;
    color: #fff
}

.work .viasatplay-1 img {
    width: 204px;
    margin: 2em 0
}

.work .viasatplay-2 img {
    max-width: 707px
}

.viasatplay-2 {
    background: #dedfe3;
    padding: 3em 0
}

.viasatplay-2 a img {
    width: 164px;
    margin: 1.5em
}

.viasatplay-5 .grid-container {
    width: 100%;
    margin: 6em auto
}

.viasatplay-5 {
    padding: 4em 0
}

.cta.viasatplay {
    color: #fff;
    background-color: #e9674b
}

.cta.viasatplay:hover {
    background-color: #f28269
}

.hyundai-before-after-1 {
    background: url(../img/work/hyundai-before-after-bg1.jpg);
    background-position: center center;
    padding: 3em 0;
    background-size: cover
}

.work .hyundai-before-after-1 img {
    width: 204px;
    margin: 2em 0
}

.work .hyundai-before-after-2 img {
    max-width: 809px
}

.work .hyundai-before-after-3 img {
    max-width: 600px;
    margin: -50px 0 5em 0
}

.hyundai-before-after-3 {
    background: #ececec url(../img/work/hyundai-before-after-bg3.jpg) no-repeat center bottom;
    background-size: 100%
}

.hyundai-before-after-2 {
    background: url(../img/work/hyundai-before-after-bg2.jpg);
    background-size: cover;
    padding: 5em 0;
    color: #fff
}

.rumble-1 {
    background-image: url(../img/rumble-1.png);
    background-position: top center;
    background-repeat: no-repeat;
    height: 228px;
    margin-top: -30px;
    position: relative;
    z-index: 20
}

.rumble-bg {
    background-color: #1b1919
}

.rumble-2 {
    background-color: #1b1919
}

.rumble-2 img {
    margin-bottom: -70px;
    z-index: 10;
    position: relative
}

.rumble-3 {
    background-color: #aa3211;
    padding-top: 100px
}

.work section.rumble-3 img {
    max-width: 604px
}

.rumble-3 img {
    margin: 50px 0
}

.rumble-4 {
    background: #2a2727
}

.rumble-4 p {
    margin-bottom: 70px
}

.work section.rumble-4 .screen {
    max-width: 450px;
    margin: 30px auto 0;
    display: block
}

.rumble-5 {
    background: #3b5999;
    background-position: center bottom;
    background-image: url(../img/rumble-5.png);
    background-repeat: repeat-x;
    height: 560px;
    padding-top: 2em
}

.rumble-3, .rumble-4, .rumble-5 {
    color: white
}

@media only screen and (max-width: 500px) {
    .rumble-5 {
        background-size: 150%
    }
}

#salud_top {
    background-image: url('../img/salud_bg.jpg');
    min-height: 500px;
    background-size: cover
}

#salud_top {
    color: #000
}

.salud-text {
    margin: 50px 0
}

#salud_logo {
    margin: 0 auto
}

#salud_coctails {
    margin-top: -40px
}

#salud_middle {
    background: url('../img/salud_app_image.jpg') #000 60% no-repeat;
    background-position: top;
    min-height: 700px;
    color: #fff;
    padding: 3em 0;
    overflow: hidden
}

#salud_middle img {
    margin: 7px 0 40px 0
}

#salud_bottom {
    background: url('../img/salud_bottom.png') #d9d7d8 60% no-repeat;
    min-height: 500px;
    padding-top: 100px;
    padding-bottom: 100px
}

#salud_bottom img {
    width: 100%
}

#salud_bottom .grid-50:nth-child(1) img {
    padding-top: 50px
}

#herlitz-top {
    background-color: #fff;
    background: url('../img/herlitz-top-bg.jpg') #fff repeat-x;
    min-height: 200px;
    padding: 0;
    font-size: 1.2em;
    line-height: 2em;
    text-align: center
}

#herlitz-top h2 {
    text-align: center;
    margin-top: 40px
}

#herlitz-top p {
    text-align: center;
    padding: 10px 0 100px 0
}

#herlitz-top img:nth-child(1) {
    margin-top: 150px;
    max-width: 313px
}

#herlitz-top img:nth-child(2) {
    display: block;
    width: 100%;
    max-width: 915px;
    margin: 0 auto;
    margin-top: 90px
}

#herlitz-middle table {
    margin: 0 auto;
    width: 100%;
    max-width: 580px
}

#herlitz-middle table img {
    width: 100%
}

#herlitz-bottom {
    background: url('../img/herlitz-middle.jpg');
    background-position: center;
    min-height: 300px;
    padding: 50px 0
}

#herlitz-bottom img {
    max-width: 800px;
    margin: 1em 0
}

#herlitz-bottom .grid-container {
    position: relative
}

#herlitz-bottom .grid-50:nth-child(1) img {
    padding-top: 50px;
    width: 100%
}

#herlitz-bottom img {
    width: 100%
}

.memory_card_container {
    position: relative;
    z-index: 1
}

.memory_card_container {
    perspective: 1000
}

.memory_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all .5s linear
}

.memory_card_container:hover .memory_card {
    transform: rotateY(180deg);
    box-shadow: -5px 5px 5px #aaa
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden
}

.face.back {
    display: block;
    transform: rotateY(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #aaa
}

#cezanne-top {
    background-color: #fff;
    background: url('../img/cezanne-top-bg.jpg') #fff repeat-x;
    min-height: 200px;
    padding: 0 0 50px 0
}

@media screen and (max-width: 550px) {
    #cezanne-top {
        background: none #fff repeat-x
    }
}

#cezanne-top p, #cezanne-top h2 {
    text-align: center
}

#cezanne-top img {
    display: block;
    width: 100%;
    max-width: 1227px;
    margin: 0 auto
}

#cezanne-top .cezanne-frame img {
    width: 100%;
    margin-top: 30px
}

.cezanne-frame {
    margin-top: -35%;
    margin-bottom: 20px;
    position: relative;
    z-index: 10
}

@media screen and (min-width: 1680px) {
    .cezanne-frame {
        margin-top: -600px
    }
}

#cezanne-top .cezanne-frame img {
    max-width: 340px
}

#cezanne-middle {
    background-color: #0d0d6d;
    padding-top: 50px;
    color: #fff;
    min-height: 200px;
    font-size: 1.2em;
    text-align: left;
    padding: 50px 0
}

#cezanne-middle .grid-35 {
    padding-top: 10%
}

#cezanne-middle .cezanne-pc img {
    max-width: 610px;
    margin: 30px auto 30px auto;
    display: block;
    width: 100%
}

.cezanne-choose {
    margin: 0 auto;
    display: block;
    margin-bottom: 20px
}

.work img.cezanne-choose {
    max-width: 620px
}

#cezanne-bottom {
    margin: 0 auto;
    padding: 0;
    background-color: #0d0d6d
}

.cezanne-painting-container {
    display: inline-block;
    position: relative
}

.cezanne-painting-container:after {
    padding-top: 83.460317%;
    display: block;
    content: ''
}

.cezanne-painting {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-size: contain;
    cursor: pointer
}

.cezanne-painting-container:nth-child(1) .cezanne-painting {
    background-image: url('../img/cezanne-painting-1.jpg')
}

.cezanne-painting-container:nth-child(2) .cezanne-painting {
    background-image: url('../img/cezanne-painting-2.jpg')
}

.cezanne-painting-container:nth-child(3) .cezanne-painting {
    background-image: url('../img/cezanne-painting-3.jpg')
}

.cezanne-painting-container:nth-child(4) .cezanne-painting {
    background-image: url('../img/cezanne-painting-4.jpg')
}

.cezanne-painting-container:nth-child(5) .cezanne-painting {
    background-image: url('../img/cezanne-painting-5.jpg')
}

.cezanne-painting-container:nth-child(6) .cezanne-painting {
    background-image: url('../img/cezanne-painting-6.jpg')
}

.cezanne-painting-container:nth-child(7) .cezanne-painting {
    background-image: url('../img/cezanne-painting-7.jpg')
}

.cezanne-painting-container:nth-child(8) .cezanne-painting {
    background-image: url('../img/cezanne-painting-8.jpg')
}

.cezanne-painting-container:nth-child(9) .cezanne-painting {
    background-image: url('../img/cezanne-painting-9.jpg')
}

.cezanne-painting-container:nth-child(10) .cezanne-painting {
    background-image: url('../img/cezanne-painting-10.jpg')
}

.cezanne-painting-container:nth-child(11) .cezanne-painting {
    background-image: url('../img/cezanne-painting-11.jpg')
}

.cezanne-painting-container:nth-child(12) .cezanne-painting {
    background-image: url('../img/cezanne-painting-12.jpg')
}

.cezanne-painting-container:nth-child(13) .cezanne-painting {
    background-image: url('../img/cezanne-painting-13.jpg')
}

.cezanne-painting-container:nth-child(14) .cezanne-painting {
    background-image: url('../img/cezanne-painting-14.jpg')
}

.cezanne-painting-container:nth-child(15) .cezanne-painting {
    background-image: url('../img/cezanne-painting-15.jpg')
}

.cezanne-painting-container:nth-child(16) .cezanne-painting {
    background-image: url('../img/cezanne-painting-16.jpg')
}

.cezanne-painting-container:nth-child(17) .cezanne-painting {
    background-image: url('../img/cezanne-painting-17.jpg')
}

.cezanne-painting-container:nth-child(18) .cezanne-painting {
    background-image: url('../img/cezanne-painting-18.jpg')
}

.cezanne-painting-container:nth-child(19) .cezanne-painting {
    background-image: url('../img/cezanne-painting-19.jpg')
}

.cezanne-painting-container:nth-child(20) .cezanne-painting {
    background-image: url('../img/cezanne-painting-20.jpg')
}

.reboot-1, .reboot-2, reboot-4 {
    background-color: #fdfd00
}

section.reboot-2 img {
    margin-bottom: 16%;
    z-index: 10;
    position: relative;
    width: 50%;
    display: inline-block
}

.reboot-1 {
    background: #fdfd00 url(../img/reboot_logo_205.png) center 20px no-repeat;
    height: 200px
}

.reboot-2 div {
    max-width: 950px;
    margin: 0 auto
}

.reboot-3 {
    background-color: #1e1e1e;
    padding: 100px 0 50px 0
}

.reboot-3 p {
    margin-bottom: 70px;
    color: #ccc
}

.work section.reboot-3 .screen {
    max-width: 450px;
    margin: -20px auto 30px auto;
    display: block
}

.reboot-2, .reboot-3 {
    color: #fafafa
}

.reboot-4 {
    padding: 4em 0;
    background: black
}

.reboot-4 iframe {
    max-width: 100%
}

.reboot-5 {
    background: black;
    background-position: center center;
    background-image: url(../img/reboot-4.jpg);
    background-repeat: repeat-x;
    height: 545px;
    padding-top: 2em
}

.reboot-5 p {
    background: black;
    padding: .5em;
    display: inline-block;
    color: white;
    margin-top: 20%
}

@media screen and (min-width: 540px) {
    section.reboot-2 img {
        margin-bottom: 10%
    }

    .reboot-2 {
        background: #fdfd00 url(../img/reboot-desk.jpg) center bottom repeat-x
    }
}

@media screen and (min-width: 720px) {
    section.reboot-2 img {
        margin-bottom: 3%
    }
}

.reboot-5 {
    animation: animatedBackgroundX 40s linear infinite;
    -webkit-animation: animatedBackgroundX 40s linear infinite
}

.highlights-1, .highlights-2, .highlights-3 {
    color: white
}

.highlights-1 {
    height: 200px;
    background: #33363f;
    position: relative;
    overflow: hidden
}

.highlights-2 {
    background: #262525;
    padding: 3em 20px
}

.highlights-3 {
    background: #131417;
    padding: 6em 20px
}

.highlights-3 span {
    font-size: 2em;
    line-height: 1.4em;
    font-weight: 700
}

@media screen and (min-width: 540px) {
    .highlights-3 span {
        font-size: 4em;
        line-height: 1.4em;
        font-weight: 700
    }
}

.highlights-4 {
    background: #131417;
    padding-bottom: 6em
}

.highlights-4 img {
    margin-top: 4em;
    max-width: 843px
}

.highlights-4 center {
    margin-top: 1em
}

.highlights-1 .clothtips {
    position: relative;
    z-index: 3
}

.highlights-1 .cloth {
    margin: 83px 0 0 0;
    position: relative;
    float: left
}

.cloth.batman-undies {
    margin-left: -50px
}

.cloths {
    position: absolute;
    cursor: pointer;
    left: 2%
}

.clothtip {
    background: url(../img/clothtips.png) center top no-repeat;
    height: 12px;
    position: relative;
    margin-top: -8px;
    background-size: 100%;
    width: 40px
}

.clothtip-single {
    background: url(../img/clothtip.png) center top no-repeat;
    height: 12px;
    position: relative;
    margin-top: -8px;
    width: 5px
}

.highlights-1 .cloth img {
    width: 50%;
    height: 50%;
    margin-top: -4px
}

.highlights-1 .clothline {
    background: url(../img/clothline.png) center center repeat-x;
    height: 2px;
    width: 100%;
    position: absolute;
    height: 82%;
    z-index: 1
}

.highlights-1 .alfred {
    height: auto;
    width: 90px;
    margin: 5px -170px 0 0
}

.batman-mask .clothtip {
    margin-left: 5px
}

.batman-undies .clothtip, .robin-undies .clothtip {
    margin-left: 45px
}

.batman-mask .clothtip {
    margin-left: 28px
}

.robin-mask .clothtip-single {
    margin-left: 25px
}

.cloth.batman-undies, .cloth.robin-undies {
    margin-left: -50px
}

.cloth.robin-mask {
    margin-left: -40px
}

.cloth.robin-undies, .cloth.robin-mask {
    display: none;
    visibility: hidden
}

@media screen and (min-width: 400px) {
    .highlights-1 .alfred {
        margin: 5px -260px 0 0
    }

    .cloth.robin-undies, .cloth.robin-mask {
        display: inline-block;
        visibility: visible
    }
}

@media screen and (min-width: 540px) {
    .cloths {
        left: 5%
    }

    .highlights-1 .alfred {
        margin: 5px -380px 0 0
    }
}

@media screen and (min-width: 720px) {
    .highlights-2 {
        padding: 8em 0
    }

    .cloths {
        left: 7%
    }

    .highlights-1 {
        height: 400px
    }

    .highlights-1 .alfred {
        width: 180px;
        margin: 10px -580px 0 0
    }

    .highlights-1 .cloth {
        margin: 166px 0 0 0
    }

    .batman-mask .clothtip {
        margin-left: 10px
    }

    .batman-undies .clothtip, .robin-undies .clothtip {
        margin-left: 30px
    }

    .batman-mask .clothtip {
        margin-left: 12px
    }

    .robin-mask .clothtip-single {
        margin-left: 24px
    }

    .cloth.batman-undies, .cloth.robin-undies, .cloth.robin-mask {
        margin-left: 12px
    }

    .clothtip {
        background: url(../img/clothtips.png) center top no-repeat;
        background-size: 100%;
        width: 80px;
        height: 24px;
        position: relative;
        margin-top: -17px
    }

    .clothtip-single {
        background: url(../img/clothtip.png) center top no-repeat;
        width: 9px;
        height: 22px;
        margin-top: -16px
    }

    .highlights-1 .cloth img {
        width: auto;
        height: auto;
        margin-top: -8px
    }
}

@media screen and (min-width: 1024px) {
    .cloths {
        left: 20%
    }
}

@media screen and (min-width: 1280px) {
    .cloths {
        left: 24%
    }
}

@media screen and (min-width: 1920px) {
    .cloths {
        left: 32%
    }
}

#acne-top {
    background: linear-gradient(to bottom, #00703c 50%, #fdfeff 50%);
    padding-bottom: 2em
}

#acne-top img:nth-of-type(1) {
    width: 100%;
    max-width: 375px
}

#acne-top img:nth-of-type(2) {
    width: 100%;
    margin-left: 10%;
    max-width: 620px
}

#acne-top p {
    margin: 15px 0
}

#acne-middle {
    background-color: #4a9a75;
    min-height: 300px;
    color: #fff;
    padding: 60px 0
}

#acne-middle img {
    margin-top: 30px;
    width: 100%;
    max-width: 775px
}

#acne-bottom {
    background: url('../img/acne-face-bg.jpg') #fff no-repeat;
    background-position: top center;
    min-height: 300px;
    padding-bottom: 100px
}

#acne-bottom .acne-timer {
    margin-top: 100px;
    width: 100%;
    max-width: 598px
}

#acne-bottom .acne-game {
    margin-bottom: 400px;
    max-width: 500px;
    width: 100%
}

#euroball-top {
    background-image: url('../img/euroball-top-bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px
}

#euroball-top img {
    margin-top: 70px;
    width: 100%;
    max-width: 305px
}

canvas {
    display: block;
    margin: 20px auto;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    z-index: 10
}

#euroball-middle {
    position: relative;
    padding-bottom: 20px
}

#euroball-middle img {
    width: 100%;
    max-width: 622px
}

#euroball-middle2 {
    background-color: #01488a;
    padding: 50px 0;
    color: #fff
}

#euroball-middle2 img {
    width: 100%;
    max-width: 622px
}

#euroball-middle2 h2 {
    margin-top: 25%;
    margin-bottom: 10%;
    text-align: left
}

#euroball-middle2 p {
    margin-bottom: 20%;
    text-align: left
}

#euroball-bottom {
    background-image: url('../img/euroball-bottom-bg.jpg');
    background-position: center;
    background-size: cover;
    padding: 50px 0;
    position: relative;
    margin-bottom: 250px
}

#euroball-bottom iframe {
    max-width: 100%
}

#euroball-bottom img {
    position: absolute;
    bottom: -30%;
    right: 10%;
    width: 100%;
    max-width: 522px
}

#whatabout-top {
    background-color: #f60;
    position: relative
}

#whatabout-top img:nth-of-type(2) {
    width: 100%;
    position: absolute;
    max-width: 363px;
    left: 35%;
    bottom: -15%
}

#whatabout-top img:nth-of-type(1) {
    width: 100%;
    max-width: 1050px
}

#whatabout-middle .grid-50 img {
    width: 100%
}

#whatabout-middle img:nth-of-type(1) {
    margin: 30px 0
}

#whatabout-middle .grid-50:nth-of-type(1) img {
    max-width: 315px
}

#whatabout-middle .grid-50:nth-of-type(2) img {
    max-width: 360px
}

#whatabout-middle {
    padding: 50px 0
}

#whatabout-middle p {
    line-height: 2em
}

#whatabout-middle2 {
    background-color: #f60;
    padding-bottom: 150px
}

#whatabout-middle2 p {
    padding-top: 20px;
    line-height: 2em;
    color: #fff
}

#whatabout-middle2 img {
    margin-top: -7%;
    width: 100%;
    max-width: 970px
}

#whatabout-bottom {
    margin-top: -100px;
    background-position: center bottom;
    background-image: url('../img/whatabout-kids.png');
    background-repeat: repeat-x;
    height: 268px;
    padding-bottom: 20px
}

#soccerapp-top {
    min-height: 200px;
    background-image: -ms-linear-gradient(top, #b10f0d 0, #6a0807 100%);
    background-image: -moz-linear-gradient(top, #b10f0d 0, #6a0807 100%);
    background-image: -o-linear-gradient(top, #b10f0d 0, #6a0807 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b10f0d), color-stop(1, #6a0807));
    background-image: -webkit-linear-gradient(top, #b10f0d 0, #6a0807 100%);
    background-image: linear-gradient(to bottom, #b10f0d 0, #6a0807 100%)
}

#soccerapp-top img {
    margin: 20px auto;
    width: 95%;
    max-width: 462px
}

.soccerapp-bg {
    background-image: url('../img/442-field.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    pos
}

#soccerapp-middle {
    color: #fff;
    padding: 4em 0
}

#soccerapp-middle2 {
    min-height: 300px
}

#soccerapp-middle img {
    margin: 2em 0;
    width: 100%;
    max-width: 500px
}

#soccerapp-middle2 img {
    width: 100%;
    max-width: 1151px;
    margin-bottom: 1em
}

.bravebook-1 {
    background: url(../img/bator-hero.jpg);
    background-position: center;
    background-size: cover;
    height: 240px
}

.work .bravebook-2 img {
    max-width: 786px;
    padding: 3em 0
}

.bravebook-2 {
    background: #eeeef0;
    padding: 3em 0
}

.bravebook-3 {
    background: #90aa39;
    padding: 3em 0;
    color: white
}

.bravebook-4 {
    background: #33411e;
    padding: 3em 0;
    color: white
}

.bravebook-5 .grid-container {
    width: 100%;
    margin: 6em auto
}

.bravebook-5 {
    padding: 4em 0
}

.cta.bravebook {
    color: #fff;
    background-color: #90aa39
}

.cta.bravebook:hover {
    background-color: #a2bf40
}

.work .bravebook-2 p {
    text-align: left
}

.work .bravebook-2 a {
    font-weight: 700
}

.bravebook-vid iframe {
    width: 100%
}

.work .bravebook-3 img {
    margin-bottom: 1em
}

.cta {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    display: block;
    margin: 1em auto;
    padding: 1em 1.5em;
    max-width: 300px;
    font-size: 1.5em;
    font-weight: 700
}

@media screen and (min-width: 720px) {
    .bravebook-1 {
        height: 480px
    }
}

.cta.vinvin {
    background: #bf0d3e;
    color: white
}

.cta.vinvin:hover {
    background: #d70f46
}

.work .vinvin-1 {
    background: #bf0c3e;
    height: 200px
}

.work .vinvin-1 img {
    max-width: 250px
}

.work .vinvin-2 img {
    max-width: 270px;
    margin-top: -2em
}

.work .vinvin-3 {
    background: #d9d7d7;
    padding: 6em 0;
    margin: 4em 0
}

.work .vinvin-3 img {
    margin: 0;
    max-width: 608px
}

.work .vinvin-3 .grid-container {
    position: relative
}

.work .vinvin-4 img {
    max-width: 200px;
    margin: -64px 0 64px 0
}

.work .vinvin-4 {
    margin: 4em 0
}

.work .vinvin-5 {
    background: #29282c;
    padding: 3em 0;
    color: #fff
}

.work .vinvin-5 img, .work .vinvin-5 img {
    margin: 2em 0
}

.work .vinvin-6 {
    background: #fafafa;
    padding: 3em 0
}

.work .vinvin-3 img.vinvin-leaves {
    position: absolute;
    bottom: -30px;
    right: 0;
    max-width: 120px
}

@media screen and (min-width: 540px) {
    .work .vinvin-1 {
        background: #bf0c3e;
        height: 400px
    }

    .work .vinvin-1 img {
        max-width: 294px
    }

    .work .vinvin-2 img {
        max-width: 950px;
        margin-top: -7em
    }

    .work .vinvin-2 {
        margin: 1em
    }

    .work .vinvin-3 .grid-40 {
        text-align: left
    }

    .work .vinvin-4 .grid-70 {
        text-align: left
    }

    .work .vinvin-3 img.vinvin-leaves {
        position: absolute;
        bottom: -30px;
        right: 0;
        max-width: 300px
    }

    .work .vinvin-4 {
        margin: 10em 0 5em 0
    }

    .work .vinvin-5 {
        padding: 4em 0
    }

    .work .vinvin-5 img {
        max-width: 875px
    }
}

.cta.footballfactor {
    background: #e85907;
    color: white
}

.cta.footballfactor:hover {
    background: #f86a19
}

.work .footballfactor-1 {
    background: #f86a19 url(../img/footballfactor_flame.jpg) repeat-x;
    height: 200px
}

.work .footballfactor-1 img {
    max-width: 140px
}

.work .footballfactor-3 img {
    position: relative;
    max-width: 950px;
    z-index: 10;
    margin-bottom: -10em
}

.work .footballfactor-2, .work .footballfactor-3 {
    background: #000;
    color: #fff;
    position: relative
}

.work .footballfactor-2 img {
    max-width: 270px;
    margin: -2em 0 3em 0
}

.work .footballfactor-2 .footballfactor-title {
    visibility: hidden;
    display: none
}

.work .footballfactor-2 .grid-container, .work .footballfactor-3 .grid-container {
    position: relative
}

.work .footballfactor-3 .footballfactor-ball {
    visibility: hidden;
    display: none;
    z-index: 0;
    position: absolute;
    top: 60px;
    right: 20px;
    max-width: 400px
}

.work .footballfactor-4 {
    background: #26262c;
    padding: 12em 0;
    color: #fff
}

@media screen and (min-width: 540px) {
    .work .footballfactor-1 {
        height: 400px
    }

    .work .footballfactor-1 img {
        max-width: 294px
    }

    .work .footballfactor-2 img {
        max-width: 834px;
        margin-top: -5em
    }

    .work .footballfactor-3 img {
        width: 135%
    }
}

@media screen and (min-width: 795px) {
    .work .footballfactor-2 .footballfactor-title {
        visibility: visible;
        display: block;
        position: absolute;
        top: 150px;
        left: 20px;
        max-width: 342px;
        z-index: 10
    }

    .work .footballfactor-3 .footballfactor-ball {
        visibility: visible;
        display: block
    }
}

#citilife-top {
    background-image: -ms-linear-gradient(top, #056bb6 0, #24528d 100%);
    background-image: -moz-linear-gradient(top, #056bb6 0, #24528d 100%);
    background-image: -o-linear-gradient(top, #056bb6 0, #24528d 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #056bb6), color-stop(1, #24528d));
    background-image: -webkit-linear-gradient(top, #056bb6 0, #24528d 100%);
    background-image: linear-gradient(to bottom, #056bb6 0, #24528d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#056BB6', endColorstr='#24528D')
}

#citilife-top img:nth-of-type(1) {
    margin: 0 auto;
    display: block;
    padding: 2em 0
}

#citilife-top img:nth-of-type(2) {
    width: 100%;
    max-width: 1815px;
    margin-bottom: -1%;
    margin-top: -2em
}

#citilife-top2 {
    background-image: -ms-linear-gradient(top, #00b6f0 0, #005499 100%);
    background-image: -moz-linear-gradient(top, #00b6f0 0, #005499 100%);
    background-image: -o-linear-gradient(top, #00b6f0 0, #005499 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00b6f0), color-stop(1, #005499));
    background-image: -webkit-linear-gradient(top, #00b6f0 0, #005499 100%);
    background-image: linear-gradient(to bottom, #00b6f0 0, #005499 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00B6F0', endColorstr='#005499');
    min-height: 200px;
    color: #fff;
    padding-bottom: 5%
}

#citilife-top2 h2 {
    margin-top: 10%
}

#citilife-middle {
    background-color: #32353c;
    min-height: 200px;
    padding: 50px 0;
    color: #fff
}

#citilife-middle iframe {
    width: 100%
}

#citilife-middle h2 {
    margin-top: 35px
}

#citilife-bottom {
    min-height: 300px;
    background-image: -ms-linear-gradient(top, #00b6f0 0, #00559a 100%);
    background-image: -moz-linear-gradient(top, #00b6f0 0, #00559a 100%);
    background-image: -o-linear-gradient(top, #00b6f0 0, #00559a 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00b6f0), color-stop(1, #00559a));
    background-image: -webkit-linear-gradient(top, #00b6f0 0, #00559a 100%);
    background-image: linear-gradient(to bottom, #00b6f0 0, #00559a 100%);
    padding-bottom: 10%;
    color: #fff
}

#citilife-bottom p {
    margin-top: 10%;
    padding: 20px
}

.citilife-bottom-fg {
    background-position: center bottom;
    background-image: url('../img/citi-bottom-fg.png');
    background-repeat: repeat-x;
    height: 350px
}

#citilife-bottom img {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation-name: hang;
    animation-name: hang;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    margin-top: -6%;
    width: 100%;
    max-width: 359px
}

.work .seo-arena-1 {
    background: #fff url(../img/seo-arena-bg.png) repeat-x;
    height: 411px
}

.work .seo-arena-1 img {
    max-width: 411px
}

.work .seo-arena-2 {
    padding: 4em 0
}

.work .seo-arena-2 p {
    display: block;
    max-width: 620px;
    text-align: center;
    margin: 2em auto
}

.work .seo-arena-2 .growth {
    font-size: 2em;
    color: #009bdb
}

.work .seo-arena-2 .growth div {
    font-size: 4em;
    letter-spacing: -0.1em
}

.work .seo-arena-3, .work .seo-arena-5 {
    background: #1f1f21;
    color: white;
    text-align: left;
    padding: 8em 0
}

.work .seo-arena-4 {
    background: url(../img/seo-graph-bg.png) center center no-repeat #019cde;
    color: white;
    text-align: left;
    padding: 8em 0
}

.work .seo-arena-3 img, .work .seo-arena-4 img, .work .seo-arena-5 img {
    max-width: 197px;
    margin: 0 auto;
    display: block
}

.cta.seo-arena {
    color: #fff;
    background-color: #019cda
}

.cta.seo-arena:hover {
    background-color: #02b0f4
}

@media only screen and (max-width: 480px) {
    .work .seo-arena-2 .growth {
        font-size: 1.5em
    }

    .work .seo-arena-1 {
        height: 200px
    }
}

.work .seo-fressnapf-1 {
    background: #fff url(../img/seo-fressnapf-bg.jpg) repeat-x;
    padding-bottom: 2em;
    min-height: 400px
}

.work .seo-fressnapf-1 img {
    max-width: 400px
}

.work .seo-fressnapf-2 {
    padding: 4em 0
}

.work .seo-fressnapf-2 p {
    display: block;
    max-width: 620px;
    text-align: center;
    margin: 1em auto
}

.work .seo-fressnapf-2 .growth {
    font-size: 1.5em;
    color: #e7001f;
    text-align: center
}

.work .seo-fressnapf-2 .growth div {
    font-size: 4em;
    letter-spacing: -0.1em;
    margin-top: 20px
}

.work .seo-fressnapf-3, .work .seo-fressnapf-5 {
    background: #495b2b;
    color: white;
    text-align: left;
    padding: 8em 0
}

.work .seo-fressnapf-4 {
    background: url(../img/seo-graph-bg.png) no-repeat center #92b12a;
    color: white;
    text-align: left;
    padding: 8em 0
}

.work .seo-fressnapf-3 img, .work .seo-fressnapf-4 img, .work .seo-fressnapf-5 img {
    max-width: 197px;
    margin: 0 auto;
    display: block
}

.work .seo-fressnapf-dog-bowl {
    position: absolute;
    top: 367px;
    right: 15px
}

.work .grid-container {
    position: relative
}

.cta.seo-fressnapf {
    color: #fff;
    background-color: #92b12a
}

.cta.seo-fressnapf:hover {
    background-color: #aed132
}

.cta.seo-ilcsi {
    color: #fff;
    background-color: #166539
}

.cta.seo-ilcsi:hover {
    background-color: #1c8248
}

.work .seo-olcsobbat-1 {
    background: #fff url(../img/seo-olcsobbat-bg.jpg) center;
    padding-bottom: 2em;
    min-height: 224px
}

.work .seo-olcsobbat-1 img {
    max-width: 400px
}

.work .seo-olcsobbat-2 {
    padding: 4em 0
}

.work .seo-olcsobbat-2 p {
    display: block;
    max-width: 620px;
    text-align: center;
    margin: 1em auto
}

.work .seo-olcsobbat-3, .work .seo-olcsobbat-5 {
    background: #009bdb;
    color: white;
    text-align: left;
    padding: 8em 0
}

.work .seo-olcsobbat-4 {
    background: url(../img/seo-graph-bg.png) no-repeat center #0072a1;
    color: white;
    text-align: left;
    padding: 8em 0
}

.work .seo-olcsobbat-3 img, .work .seo-olcsobbat-4 img, .work .seo-olcsobbat-5 img {
    max-width: 197px;
    margin: 0 auto;
    display: block
}

.work .seo-olcsobbat-dog-bowl {
    position: absolute;
    top: 367px;
    right: 15px
}

.work .grid-container {
    position: relative
}

.work .seo-olcsobbat-2 .growth {
    font-size: 2em;
    color: #009bdb
}

.work .seo-olcsobbat-2 .growth div {
    font-size: 4em;
    letter-spacing: -0.1em
}

@media only screen and (max-width: 480px) {
    .work .seo-olcsobbat-2 .growth {
        font-size: 1.5em
    }
}

#kiltix-1 {
    height: 410px;
    background: url(../img//kiltix-bg-top.jpg) top center no-repeat;
    position: relative
}

#kiltix-1 img {
    position: absolute;
    left: 50%
}

.kiltix-logo-1 {
    margin-left: -200px;
    top: 150px
}

.kiltix-logo-2 {
    margin-left: -59px;
    top: 280px
}

#kiltix-2 {
    color: #a7aaa8
}

h1 {
    margin-bottom: 15px
}

#kiltix-2 p {
    font-size: 21px;
    line-height: 36px
}

.kiltix-products {
    margin: 20px auto
}

#kiltix-3 {
    background: #8b0209;
    margin-top: 100px
}

.kiltix-slogan {
    padding: 15px 0
}

#kiltix-4 {
    background: url(../img//kiltix-bg-bottom.jpg) bottom center no-repeat;
    height: 847px;
    padding-top: 20px
}

.kiltix-screen-1 {
    position: relative;
    z-index: 2000;
    left: 30px
}

.kiltix-screen-2 {
    position: relative;
    z-index: 1990;
    right: 20px
}

@media only screen and (max-width: 885px) {
    .kiltix-screen-2 {
        display: none
    }

    .kiltix-screen-1 {
        left: 0
    }

    #kiltix-4 {
        height: auto;
        padding-top: 5px
    }
}

@media only screen and (max-width: 480px) {
    #kiltix-2 p {
        font-size: 16px;
        line-height: 26px
    }

    #kiltix-3 {
        margin-top: 50px
    }

    #kiltix-1 img:first-of-type {
        position: relative;
        left: 0
    }

    .kiltix-logo-1 {
        display: block;
        margin: 0 auto
    }

    .kiltix img {
        max-width: 100%
    }
}

.yara img {
    max-width: 100%
}

#yara-1 {
    background: url(../img/yara-header-bg.jpg) top center no-repeat
}

.yara-logo {
    margin: 116px auto 106px
}

#yara-2 {
    background: url(../img/yara-bg-2.png) top center no-repeat
}

.yara-logo-2 {
    margin: 50px auto 106px
}

.yara h1 {
    color: #6a6363;
    margin: 10px 0
}

#yara-2 p {
    color: #6a6363;
    font-size: 21px;
    line-height: 36px;
    margin-bottom: 50px
}

#yara-3 {
    background: #7ea831
}

.yara .btn {
    display: inline-block;
    margin: 60px 0 65px;
    background: #f7941e;
    padding: 16px 33px;
    border-radius: 7px;
    font-weight: bold;
    font-size: 44px;
    letter-spacing: -1px;
    color: #FFF;
    transition: background-color .2s ease-in-out
}

.yara .btn:hover, .yara .btn:focus {
    background: #de861b
}

.yara-devices {
    width: 800px;
    height: 545px;
    margin: 0 auto 60px;
    position: relative
}

.yara-device1 {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -306px
}

.yara-device2 {
    position: absolute;
    left: 0;
    bottom: 10px;
    margin-left: -50px
}

.yara-device3 {
    position: absolute;
    left: 0;
    bottom: 10px;
    margin-left: 670px
}

@media only screen and (max-width: 920px) {
    .yara-devices {
        width: auto
    }

    .yara-device2, .yara-device3 {
        display: none
    }

    .yara-device1 {
        position: relative;
        left: 0;
        margin: auto
    }

    .yara-devices, #yara-2 {
        height: auto
    }

    #yara-2 h1 {
        margin-top: 60px
    }
}

@media only screen and (max-width: 700px) {
    .yara .btn {
        font-size: 28px;
        padding-top: 12px;
        padding-bottom: 12px;
        margin: 30px 0
    }
}

@media only screen and (max-width: 455px) {
    .yara .btn {
        font-size: 21px;
        padding-left: 14px;
        padding-right: 14px
    }
}

#bxr-1 {
    background: #f0f0f0
}

.bxr #logo {
    padding: 76px 0 82px;
    width: 100%;
    max-width: 378px
}

#bxr-2 {
    background: #0e5c94 url(../img/bxr-bg.jpg) top center no-repeat;
    padding: 320px 0 285px;
    color: #FFF
}

#bxr-2 h1 {
    margin-bottom: 12px
}

.bxr-device {
    margin-top: -173px;
    margin-bottom: -83px
}

.bxr img {
    max-width: 100%
}

.bxr .btn {
    display: inline-block;
    margin: 65px 0 210px;
    background: #7daadb;
    padding: 14px 33px;
    border-radius: 7px;
    font-weight: bold;
    font-size: 44px;
    letter-spacing: -1px;
    color: #FFF;
    transition: background-color .2s ease-in-out
}

.bxr .btn:hover, .bxr .btn:focus {
    background: #065c91
}

#bxr-4 {
    background: #065c91
}

.bxr-screens {
    position: relative;
    width: 824px;
    height: 660px;
    margin: -145px auto 145px
}

.bxr-screen1 {
    position: absolute;
    left: 0;
    z-index: 2000
}

.bxr-screen2 {
    position: absolute;
    right: 0;
    z-index: 1990
}

@media only screen and (max-width: 920px) {
    #bxr-2 {
        background-position-x: 85%
    }

    .bxr-device {
        margin-top: -75px
    }

    .bxr-screens {
        margin: -185px auto 55px
    }
}

@media only screen and (max-width: 864px) {
    .bxr-screens {
        width: auto;
        height: auto
    }

    .bxr-screen2 {
        display: none
    }

    .bxr-screen1 {
        position: relative;
        left: 0
    }
}

@media only screen and (max-width: 440px) {
    .bxr .btn {
        font-size: 28px;
        padding: 14px 24px
    }
}

.bszk img {
    max-width: 100%
}

.bszk-logo {
    margin: 85px auto 160px
}

#bszk-2 {
    background: #843336;
    height: 695px
}

.bszk-devices {
    width: 800px;
    height: 595px;
    margin: -79px auto 0;
    position: relative
}

.bszk-device1 {
    max-width: 611px
}

.bszk-device1 {
    position: absolute;
    margin-left: -255px;
    left: 50%;
    top: 0
}

.bszk-device2 {
    position: absolute;
    left: 0;
    bottom: 0
}

.bszk-device3 {
    position: absolute;
    right: 0;
    bottom: 0
}

#bszk-2 h1, #bszk-2 p {
    color: #FFF
}

#bszk-2 h1 {
    margin-bottom: 10px
}

.bszk .btn {
    display: inline-block;
    margin: 58px 0 90px;
    background: #6f7072;
    padding: 16px 33px;
    border-radius: 7px;
    font-weight: bold;
    font-size: 44px;
    letter-spacing: -1px;
    color: #FFF;
    transition: background-color .2s ease-in-out
}

.bszk .btn:hover, .bszk .btn:focus {
    background: #4a4b4d;
    cursor: pointer
}

#bszk-3 {
    background: #e3e3e3 url(../img/bszk-bg.jpg) top center no-repeat
}

.bszk-screens {
    padding-top: 120px;
    width: 850px;
    margin: 0 auto
}

.bszk-screen1 {
    float: left;
    position: relative;
    left: 0;
    z-index: 2000
}

.bszk-screen2 {
    float: right;
    position: relative;
    right: 0;
    z-index: 1900;
    top: -495px;
    margin-bottom: -365px
}

@media only screen and (max-width: 850px) {
    .bszk-devices {
        width: auto
    }

    .bszk-device2, .bszk-device3 {
        display: none
    }

    .bszk-device1 {
        position: relative;
        left: 0;
        margin: auto
    }

    .bszk-devices, #bszk-2 {
        height: auto
    }

    .bszk .btn {
        margin-bottom: -40px
    }

    .bszk-screens {
        width: auto
    }

    .bszk-screen2 {
        display: none
    }

    .bszk-screen1 {
        float: none;
        margin-bottom: 60px
    }
}

@media only screen and (max-width: 500px) {
    .bszk .btn {
        font-size: 28px;
        padding-top: 12px;
        padding-bottom: 12px;
        margin-bottom: -28px
    }
}

.opera img {
    max-width: 100%
}

#opera-1 {
    height: 407px;
    background: #aa1b19;
    padding: 0
}

.opera-fuggony {
    width: 963px;
    height: 545px;
    margin: 0 auto;
    background: url(../img/opera-fuggony.png) top center no-repeat;
    position: relative;
    z-index: 2000
}

#opera-logo {
    margin-top: 150px
}

#opera-2 {
    height: 311px;
    margin-top: 200px;
    overflow: hidden
}

#opera-2 h1 {
    margin-bottom: 45px
}

#opera-2 p {
    line-height: 32px
}

.opera-likes {
    width: 1200px;
    height: 315px;
    position: relative;
    margin: 0 auto
}

.opera-like-1, .opera-like-2, .opera-like-3, .opera-like-4 {
    position: absolute
}

.opera-like-1 {
    right: 0
}

.opera-like-2 {
    left: 0
}

.opera-like-3 {
    left: 380px;
    bottom: 0
}

.opera-like-4 {
    left: 330px;
    bottom: 40px
}

.opera-2-text {
    margin-top: -315px
}

#opera-3 {
    background: #e8e8e8 url(../img/opera-vertSep.png) top center repeat-y
}

.opera-screens {
    width: 840px;
    margin: 0 auto
}

.opera-screen-1 {
    float: left;
    display: block;
    position: relative;
    top: -30px;
    z-index: 1500
}

.opera-screen-2 {
    float: right;
    display: block;
    position: relative;
    top: -685px;
    margin-bottom: -620px;
    z-index: 1499
}

.opera-opera {
    display: block;
    position: relative;
    left: 50%;
    margin-left: -28px;
    margin-bottom: 250px
}

.opera-erkel {
    display: block;
    position: relative;
    left: 50%;
    margin-left: -12px;
    margin-bottom: 60px
}

.opera-figaro {
    position: relative;
    top: -350px;
    margin-left: -500px;
    margin-bottom: -120px;
    color: #c22c0d;
    font-family: Arial;
    font-weight: 900;
    font-size: 16px;
    line-height: 30px;
    text-transform: uppercase
}

.opera-figaro p {
    text-align: center
}

@media only screen and (max-width: 970px) {
    .opera-fuggony {
        width: auto
    }
}

@media only screen and (max-width: 880px) {
    .opera-screen-2 {
        display: none
    }

    .opera-screen-1 {
        float: none
    }

    .opera-figaro {
        margin-left: 0;
        background: #e8e8e8;
        padding: 10px 0
    }
}

@media only screen and (max-width: 500px) {
    .opera-screen-1 {
        width: 320px
    }

    #opera-2 {
        margin-top: 40px
    }

    #opera-2 p {
        font-size: 16px;
        line-height: 22px
    }

    .opera-opera {
        width: 50%;
        margin-left: -17px
    }
}

@media only screen and (max-width: 370px) {
    .opera-screen-1 {
        width: 280px
    }
}

.fres .grid-25 img, .fres .grid-50 img {
    display: block;
    margin: 0 auto
}

.fres img {
    max-width: 100%
}

#fres-1 {
    background: url(../img/fres-bg.jpg) top center no-repeat
}

#fres-2 {
    background: #fffef0
}

#fres-3 {
    padding: 50px 0 25px;
    background: #92b12a
}

#fres-4 {
    padding: 40px 0 45px;
    background: #fffef0
}

#fres-5 {
    padding: 30px 0 20px;
    background: #495b2b
}

#fres-6 {
    padding: 15px 0;
    background: #92b12a
}

#fres-7 {
    padding: 75px 0;
    background: #fffef0
}

#fres-8 {
    padding: 45px 0 80px;
    background: #495b2b
}

.fres-logo {
    padding: 100px 0 90px
}

img.fres-graph {
    padding: 10px 0;
    width: 100%;
    max-width: 812px
}

#fres-2 h1 {
    font-size: 48px
}

#fres-2 p {
    font-size: 21px;
    line-height: 36px;
    margin-top: 10px
}

.fres-tools {
    padding: 100px 0 30px
}

#fres-3 p, #fres-5 p, #fres-6 p, #fres-8 p {
    color: #FFF;
    font-size: 21px;
    line-height: 36px
}

#fres-4 p, #fres-7 p {
    font-size: 21px;
    line-height: 36px
}

@media only screen and (max-width: 768px) {
    #fres-1 p:first-of-type, #fres-2 p:first-of-type, #fres-3 p:first-of-type, #fres-4 p:first-of-type, #fres-5 p:first-of-type, #fres-6 p:first-of-type, #fres-7 p:first-of-type, #fres-8 p:first-of-type {
        padding: 30px 0 0
    }

    #fres-1 p:last-of-type, #fres-2 p:last-of-type, #fres-3 p:last-of-type, #fres-4 p:last-of-type, #fres-5 p:last-of-type, #fres-6 p:last-of-type, #fres-7 p:last-of-type, #fres-8 p:last-of-type {
        padding: 0 0 30px
    }
}

#vk-1 {
    background: url(../img/vk-bg.jpg) top center no-repeat
}

.vk-logo {
    padding: 95px 0 70px;
    width: 100%;
    max-width: 419px
}

#vk-2 {
    background: #f2f0eb
}

.vk-screen {
    position: relative;
    top: -70px;
    margin-bottom: -50px;
    width: 100%;
    max-width: 700px
}

#vk-2 h1 {
    font-size: 48px;
    margin-bottom: 40px
}

#vk-2 p {
    font-size: 21px;
    line-height: 36px;
    margin-bottom: 80px
}

#vk-3 {
    background: #0078a3 url(../img/vk-bg2.jpg) top center no-repeat;
    height: 638px;
    margin-bottom: 120px
}

.vk-btn {
    margin: 50px auto 26px;
    display: block
}

.vk-kepek {
    position: relative;
    width: 884px;
    margin: 0 auto
}

.vk-kep1 {
    position: absolute;
    left: 0;
    top: 100px
}

.vk-kep3 {
    width: 100%;
    max-width: 657px
}

.vk-kep2 {
    position: absolute;
    right: 0;
    margin-bottom: 100px;
    width: 100%;
    max-width: 453px
}

@media only screen and (max-width: 910px) {
    .vk-kepek {
        width: auto
    }

    .vk-kep1 {
        display: none
    }

    .vk-kep2 {
        position: relative;
        margin: 0 auto 50px
    }
}

.vla img {
    max-width: 100%
}

#vla-1 {
    background: #ffe615
}

.vla-logo1 {
    display: block;
    margin: 46px auto 12px
}

.vla-logo2 {
    display: block;
    margin: 0 auto 40px
}

#vla-2 {
    background: #14143e
}

.vla-kepek {
    padding: 70px 0 45px;
    height: 370px
}

.vla-lookalike-1 {
    position: absolute;
    left: 50%;
    margin-left: -250px
}

.vla-lookalike-2 {
    position: absolute;
    left: 50%;
    margin-left: 10px
}

.vla-hal {
    position: absolute;
    left: 50%;
    margin-left: -443px;
    margin-top: 203px
}

#vla-3 {
    background: url(../img/vla-bg3.png) top left repeat-x
}

.vla-app {
    display: block;
    margin: 0 auto
}

#vla-2 h1 {
    font-size: 48px;
    color: #FFF;
    margin-bottom: 15px
}

#vla-2 p {
    font-size: 21px;
    line-height: 36px;
    color: #FFF;
    margin-bottom: 60px
}

@media only screen and (max-width: 880px) {
    .vla-hal {
        display: none
    }
}

@media only screen and (max-width: 540px) {
    .vla-kepek {
        height: 230px
    }

    .vla-lookalike-1 {
        width: 160px;
        margin-left: -170px
    }

    .vla-lookalike-2 {
        width: 160px
    }
}

#bankracio img {
    max-width: 100%
}

#bankracio-1 {
    background: #FFF;
    padding-bottom: 50px
}

#bankracio-2 {
    background: #006ca8;
    padding: 70px 0 25px
}

.bankracio-logo {
    padding: 150px 0 60px
}

#bankracio p, #bankracio h2 {
    color: #a7aaa8
}

.bankracio-screens {
    width: 710px;
    height: 490px;
    margin: 0 auto 60px;
    position: relative
}

.bankracio-screen-1 {
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0
}

.bankracio-screen-2 {
    position: absolute;
    z-index: 1000;
    bottom: 20px;
    right: 0
}

.bankracio-mobiles {
    width: 940px;
    height: 610px;
    margin: 0 auto;
    position: relative
}

.bankracio-mobile-1 {
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0
}

.bankracio-mobile-2 {
    position: absolute;
    z-index: 3000;
    top: 20px;
    left: 230px
}

.bankracio-mobile-3 {
    position: absolute;
    z-index: 1000;
    bottom: 35px;
    right: 0
}

@media only screen and (max-width: 719px) {
    .bankracio-logo {
        padding-top: 75px
    }

    .bankracio-screen-2 {
        display: none
    }

    .bankracio-screen-1 {
        position: relative;
        margin: 0 auto
    }

    .bankracio-screens {
        width: auto
    }

    .bankracio-mobile-3, .bankracio-mobile-2 {
        display: none
    }

    .bankracio-mobile-1 {
        position: relative;
        margin: 0 auto
    }

    .bankracio-mobiles {
        width: auto
    }
}

#fft img {
    max-width: 100%
}

#fft .btn {
    display: inline-block;
    margin: 65px 0 75px;
    background: #FFF;
    padding: 14px 33px;
    border-radius: 7px;
    font-weight: bold;
    font-size: 44px;
    letter-spacing: -1px;
    color: #c2442b;
    transition: background-color .2s ease-in-out, color .2s ease-in-out
}

#fft .btn:hover, #fft .btn:focus {
    background: #222;
    color: #FFF
}

#fft #logo {
    padding: 153px 0 115px
}

#fft-1 {
    background: #c1432a
}

#fft-2 {
    background: #311309 url(../img/fft-bg.jpg) top center no-repeat;
    color: #FFF
}

#fft-3 {
    background: #c2442b
}

.fft-screen {
    padding: 15px 0 40px
}

#fft-2 p {
    margin: 10px 0 124px
}

@media screen and (max-width: 540px) {
    #fft #logo {
        padding: 60px 0
    }

    #fft-2 p {
        margin-bottom: 60px
    }

    #fft .btn {
        font-size: 26px;
        padding: 16px 20px
    }
}

#ilcsicosm-1 img {
    max-width: 100%
}

#ilcsicosm-1 {
    background: #9ac194 url(../img/ilcsicosm-header.png) top center no-repeat
}

.ilcsicosm-header {
    height: 760px
}

.ilcsicosm-logo {
    padding-top: 125px
}

.ilcsicosm-kozm-1 {
    position: absolute;
    top: 320px;
    left: 50%;
    margin-left: -40px
}

.ilcsicosm-kozm-2 {
    position: absolute;
    top: 415px;
    left: 50%;
    margin-left: -307px
}

.ilcsicosm-kozm-3 {
    position: absolute;
    top: 520px;
    left: 50%;
    margin-left: -164px
}

.ilcsicosm-kozm-4 {
    position: absolute;
    top: 500px;
    left: 50%;
    margin-left: 188px
}

.ilcsicosm-1-text {
    color: #FFF;
    padding: 35px 0 100px
}

#ilcsicosm-2 {
    background: #dae9d3;
    padding: 70px 0
}

.ilcsicosm-screens {
    width: 1000px;
    height: 974px;
    position: relative;
    margin: auto
}

.ilcsicosm-screen-1 {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0
}

.ilcsicosm-screen-2 {
    position: absolute;
    z-index: 2000;
    top: 0;
    right: 0
}

.ilcsicosm-flower {
    position: absolute;
    z-index: 3000;
    left: 39%;
    top: -150px
}

@media only screen and (max-width: 1000px) {
    .ilcsicosm-screen-2 {
        display: none
    }

    .ilcsicosm-screen-1 {
        position: relative;
        margin: 0 auto
    }

    .ilcsicosm-screens {
        width: auto
    }

    .ilcsicosm-flower {
        left: auto;
        right: 0;
        margin-left: 0
    }
}

@media only screen and (max-width: 700px) {
    .ilcsicosm-flower {
        display: none
    }
}

#ingFashion img {
    max-width: 100%
}

#ing-1 {
    background: url(../img/ing-bg1.png) repeat-x;
    height: 408px
}

.ing-logo1 {
    text-align: center;
    margin-top: 180px
}

#ing-2 {
    background: #f60;
    padding-bottom: 100px
}

.ing-logo2 {
    display: block;
    margin: 0 auto;
    position: relative;
    top: -170px;
    margin-bottom: -110px
}

.ing-logo3 {
    display: block;
    margin: 0 auto 70px
}

#ing-2 h1 {
    margin-bottom: 16px;
    color: #FFF
}

#ing-2 p {
    font-size: 21px;
    line-height: 36px;
    color: #FFF
}

.ing-divider {
    position: relative;
    top: -69px
}

#lando img {
    max-width: 100%
}

#lando-1 {
    background: #333a8b
}

.lando-logo {
    padding: 170px 0 140px
}

#lando-2 {
    position: relative;
    padding: 0 0 45px;
    background: #1dcec1
}

.lando-kamion {
    margin-top: 100px
}

.lando-2-text {
    padding-top: 50px;
    color: #FFF
}

#lando-3 {
    background: #FFF;
    padding: 15px 0;
    height: 283px;
    overflow: hidden;
    text-align: center
}

.lando-slider-2 {
    background-position: center bottom;
    background-image: url('../img/lando_bg.jpg');
    background-repeat: repeat-x;
    height: 253px;
    animation: animatedBackgroundX 40s linear infinite;
    -webkit-animation: animatedBackgroundX 40s linear infinite
}

.lando-slider {
    max-width: 800px;
    margin: 20px auto;
    width: 100%
}

#lando-4 {
    background: #efdd30 url(../img/lando-bg.png) repeat-x
}

.lando-toooot {
    padding: 55px 0
}

#lando-4 iframe {
    margin-bottom: 100px
}

#pulltherope img {
    max-width: 100%
}

#ptr-1 {
    background: #82c2cc url(../img/ptr-topbg.png) top center no-repeat
}

#logo {
    padding: 54px 0 70px
}

#ptr-2 {
    background: #d54808;
    color: #FFF;
    padding: 125px 0 145px
}

#pulltherope h1 {
    margin-bottom: 15px
}

#ptr-3 {
    background: #88bec6 url(../img/ptr-bottombg.png) top center no-repeat
}

.ptr-bridge {
    position: relative;
    top: -92px;
    margin-bottom: -92px
}

#ptr-3 p {
    margin: 35px 0 70px;
    font-family: Tahoma, Arial, sans-serif;
    text-align: center
}

#pulltherope span.p1 {
    font-size: 49px;
    color: #262e3b;
    font-weight: bold
}

#pulltherope span.p2 {
    font-size: 49px;
    color: #d96600;
    font-weight: bold;
    line-height: 80px;
    text-transform: uppercase
}

#pulltherope span.p3 {
    font-size: 18px;
    color: #262e3b;
    font-weight: normal;
    line-height: 0
}

#ptr-4 {
    padding: 85px 0 80px
}

#ptr-5 {
    background: #2b0e03
}

#ptr-5 p {
    margin: 60px 0 75px;
    color: #FFF
}

.ptr-cup {
    display: block;
    margin: 0 auto;
    position: relative;
    top: -105px;
    margin-bottom: -120px
}

#pulltherope iframe {
    background: #FFF
}

#sberbank img {
    max-width: 100%
}

#sberbank-1 {
    background: #FFF
}

.sberbank-logo {
    padding: 165px 0 120px
}

#sberbank-2 {
    color: #FFF;
    background: #7cc145;
    padding-top: 40px
}

.sberbank-screens {
    margin: 110px auto 0;
    width: 840px;
    height: 900px;
    position: relative
}

.sberbank-screen {
    position: absolute;
    z-index: 1000;
    bottom: 0;
    left: 0;
    margin-bottom: 80px
}

.sberbank-girl {
    position: absolute;
    z-index: 2000;
    bottom: 0;
    right: 0
}

.sberbank-bg-1 {
    position: absolute;
    z-index: 500;
    top: 270px;
    left: 50%;
    margin-left: -620px
}

.sberbank-bg-2 {
    position: absolute;
    z-index: 500;
    top: 660px;
    left: 50%;
    margin-left: -520px
}

.sberbank-bg-3 {
    position: absolute;
    z-index: 500;
    top: -80px;
    left: 50%;
    margin-left: 170px
}

.sberbank-bg-4 {
    position: absolute;
    z-index: 500;
    top: 165px;
    left: 50%;
    margin-left: 320px
}

.sberbank-bg-5 {
    position: absolute;
    z-index: 500;
    top: 270px;
    left: 50%;
    margin-left: 230px
}

.sberbank-bg-6 {
    position: absolute;
    z-index: 500;
    top: 700px;
    left: 50%;
    margin-left: 355px
}

@media only screen and (max-width: 900px) {
    .sberbank-girl {
        display: none
    }

    .sberbank-screen {
        position: relative;
        margin: 0 auto
    }

    .sberbank-screens {
        width: auto
    }
}

#teqball img {
    max-width: 100%
}

#teqball {
    background: #202020;
    color: #FFF
}

#teqball .share a {
    background-color: transparent
}

#teqball-1 {
    background: #ed1b24
}

.teqball-logo {
    padding: 170px 0 150px
}

#teqball-2 {
    background: url(../img/teqball-bg-1.png) top center no-repeat;
    padding: 175px 0 150px;
    margin-top: -65px
}

.teqball-headings {
    height: 200px;
    margin-bottom: 150px
}

.teqball-ball {
    background: url(../img/teqball-ball.png);
    height: 180px;
    width: 180px;
    position: absolute;
    left: 50%;
    top: 70px;
    margin-left: -90px
}

#teqball-3 {
    background: #282828
}

.teqball-screens {
    width: 790px;
    height: 925px;
    margin: -100px auto 50px;
    position: relative
}

.teqball-screen-1 {
    position: absolute;
    z-index: 1000;
    top: 10px;
    left: 0
}

.teqball-screen-2 {
    position: absolute;
    z-index: 2000;
    top: 0;
    right: 0
}

#teqball-4 {
    padding: 60px 0
}

.teqball-phone {
    margin-top: 40px
}

.mi-a-teqball {
    position: relative;
    z-index: 5000;
    width: 330px;
    float: left;
    margin-left: 160px
}

.mi-a-teqball h2 {
    text-align: left
}

.mi-a-teqball ul {
    margin-top: 30px;
    padding-left: 135px;
    background: url(../img/teqball-1x-1.png) 20px 15px no-repeat
}

.mi-a-teqball ul li {
    font-size: 18px;
    line-height: 36px;
    text-align: left
}

.mi-a-teqball .btn {
    margin-top: 28px
}

.mi-kell-hozza {
    position: relative;
    z-index: 5000;
    float: right;
    margin-right: 160px;
    margin-top: -20px;
    width: 360px
}

.mi-kell-hozza ul {
    margin-top: 15px;
    padding-left: 70px;
    background: url(../img/teqball-1x-2.png) 5px 10px no-repeat
}

.mi-kell-hozza ul li {
    font-size: 18px;
    line-height: 36px;
    text-align: left
}

h2.mini-title {
    font-size: 28px;
    letter-spacing: -1px
}

#li-labda {
    background: url(../img/li-labda-bg.png) center center no-repeat;
    width: 56px;
    height: 27px;
    position: relative;
    left: -6px;
    padding-left: 6px;
    padding-top: 2px;
    padding-bottom: 9px
}

@media only screen and (max-width: 1050px) {
    .teqball-ball {
        display: none
    }

    .mi-a-teqball {
        margin-left: 20px
    }

    .mi-kell-hozza {
        margin-right: 20px
    }

    .mi-kell-hozza {
        margin-top: 0
    }

    .mi-kell-hozza ul {
        margin-top: 30px
    }
}

@media only screen and (max-width: 780px) {
    .teqball-headings {
        height: auto;
        margin-bottom: 70px
    }

    .mi-a-teqball, .mi-kell-hozza {
        float: none;
        margin: 0 auto 60px
    }
}

@media only screen and (max-width: 800px) {
    .teqball-logo {
        padding-top: 90px
    }

    .teqball-screens {
        width: auto;
        height: auto
    }

    .teqball-screen-1 {
        position: relative;
        margin: 0 auto
    }

    .teqball-screen-2 {
        display: none
    }
}

#viasat-sales img {
    max-width: 100%
}

#viasat-1 {
    height: 330px;
    background: #1e395f
}

#viasat-1 img {
    margin-top: 50px
}

#viasat-2 {
    background: #FFF url(../img/viasat-bg.jpg) bottom center no-repeat
}

#viasat-2 img {
    position: relative;
    top: -50px
}

#viasat-2 h1 {
    margin-top: 50px
}

#viasat-2 p {
    color: #6e6767;
    font-size: 21px;
    line-height: 36px
}

#viasat-sales .button {
    display: inline-block;
    margin: 65px 0 160px;
    background: #1e395f;
    padding: 12px 24px 16px;
    border-radius: 7px;
    font-weight: bold;
    font-size: 44px;
    letter-spacing: -1px;
    color: #FFF;
    transition: background-color .2s ease-in-out
}

#viasat-sales .button:hover {
    background: #254878
}

#viasat-3 {
    height: 570px;
    background: #091627
}

#viasat-macs {
    width: 940px
}

.viasat-mac1 {
    display: block;
    position: absolute;
    top: -50px;
    z-index: 2000
}

.viasat-mac2 {
    float: right;
    position: relative;
    top: -95px
}

@media only screen and (max-width: 990px) {
    #viasat-macs {
        width: auto
    }

    .viasat-mac2 {
        display: none
    }

    .viasat-mac1 {
        position: relative;
        display: inline
    }
}

@media only screen and (max-width: 540px) {
    #viasat-sales .button {
        font-size: 30px
    }

    #viasat-3 {
        height: 400px
    }
}

@media only screen and (max-width: 380px) {
    #viasat-sales .button {
        font-size: 24px
    }

    #viasat-2 p {
        font-size: 16px;
        line-height: 26px
    }

    #viasat-3 {
        height: 260px
    }
}

#party-calendar {
    font-family: 'Open Sans', sans-serif;
    line-height: 36px;
    color: #FFF
}

#party-calendar img {
    max-width: 100%
}

#party-calendar .sect-1 {
    position: relative;
    background: #dededf url(../img/pc-bg-1.jpg) top center no-repeat;
    color: #6a6363;
    z-index: 1000
}

#party-calendar .center-logo {
    margin: 0 auto;
    display: block
}

#party-calendar h1 {
    font-size: 48px;
    margin: 300px 0 50px
}

#party-calendar h2 {
    font-size: 21px;
    line-height: 40px;
    font-weight: bold
}

#party-calendar .sect-1 h2 {
    margin-bottom: 35px
}

#party-calendar .sect-1 .button {
    margin-bottom: 70px;
    display: inline-block;
    background-color: #001149;
    color: #fff
}

#party-calendar .sect-3 p {
    font-size: 21px;
    padding-top: 73px;
    padding-bottom: 60px;
    max-width: 700px;
    margin: 0 auto
}

#party-calendar .first {
    padding: 50px 0 100px
}

#party-calendar .sect-2 {
    position: relative;
    background: #05153c url(../img/pc-bg-2.jpg) top center no-repeat;
    margin-top: -42px;
    z-index: 2000
}

#party-calendar .drinks {
    padding: 40px 0 30px
}

#party-calendar .drink-cont {
    height: 430px
}

#party-calendar .drink-1 {
    position: absolute;
    left: 50%;
    margin-left: -287px;
    bottom: 33px
}

#party-calendar .bottle-1 {
    position: absolute;
    left: 50%;
    margin-left: -106px;
    bottom: 29px
}

#party-calendar .bottle-2 {
    position: absolute;
    left: 50%;
    margin-left: -13px;
    bottom: 40px
}

#party-calendar .drink-2 {
    position: absolute;
    left: 50%;
    margin-left: 150px;
    bottom: 35px
}

#party-calendar .sect-3 {
    position: relative;
    background: #8a498a url(../img/pc-bg-3.jpg) top center no-repeat
}

#party-calendar .page-cont {
    height: 930px
}

#party-calendar .page-1 {
    position: absolute;
    left: 50%;
    margin-left: -450px;
    bottom: 36px
}

#party-calendar .page-2 {
    position: absolute;
    left: 50%;
    margin-left: -153px;
    bottom: 222px
}

#party-calendar .footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -478px
}

@media only screen and (max-width: 930px) {
    #party-calendar .page-cont {
        height: auto
    }

    #party-calendar .page-1 {
        display: none
    }

    #party-calendar .page-2 {
        position: relative;
        left: auto;
        bottom: auto;
        margin-left: auto;
        padding-bottom: 60px
    }

    #party-calendar .footer {
        display: none
    }
}

@media only screen and (max-width: 750px) {
    #party-calendar .drink-1, #party-calendar .drink-2 {
        display: none
    }
}

#grinzball {
    color: #fff
}

#grinzball img {
    max-width: 100%
}

#grinzball .work {
    color: #FFF;
    line-height: 36px
}

#grinzball .sect-1 {
    background: #5dc9ed url(../img/gb-bg-1.png) top center no-repeat;
    height: 458px
}

#grinzball .sect-1 img {
    margin: 105px -142px 0 0
}

#grinzball .sect-2 {
    clear: both;
    position: relative;
    background: #51732c url(../img/gb-bg-2.png) top center no-repeat;
    padding-top: 195px;
    padding-bottom: 70px
}

#grinzball .dog {
    position: absolute;
    left: 50%;
    top: -238px;
    margin-left: -150px
}

#grinzball .ball-1 {
    position: absolute;
    left: 50%;
    top: -52px;
    margin-left: -359px
}

#grinzball .ball-2 {
    position: absolute;
    left: 50%;
    top: 95px;
    margin-left: 310px
}

#grinzball .ball-3 {
    position: absolute;
    left: 50%;
    top: -334px;
    margin-left: -410px
}

#grinzball .Fn-logo {
    position: absolute;
    left: 50%;
    top: 57px;
    margin-left: -160px
}

#grinzball h1 {
    font-size: 48px;
    margin: 0 auto 20px
}

h3 {
    font-size: 21px;
    font-weight: bold
}

#grinzball .sect-2 p {
    font-size: 21px;
    width: 760px;
    margin: 50px auto 68px
}

#grinzball .game-cont {
    position: relative;
    height: 1080px
}

#grinzball .dog-2 {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -434px
}

#grinzball .dog-1 {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -5px
}

#grinzball .game {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -282px
}

#grinzball .sect-3 {
    padding: 40px 0 60px;
    clear: both;
    position: relative;
    background-color: #8dae2e
}

#grinzball .fb-cont {
    height: 280px;
    padding-bottom: 25px
}

#grinzball .fb-1 {
    position: absolute;
    left: 50%;
    top: 43px;
    margin-left: -400px
}

#grinzball .fb-2 {
    position: absolute;
    left: 50%;
    top: 44px;
    margin-left: -30px
}

#grinzball .sect-3 p {
    font-size: 21px;
    width: 760px;
    margin: 0 auto
}

#grinzball .sect-4 {
    padding: 55px 0 80px;
    clear: both;
    position: relative;
    background-color: #51732c
}

#grinzball .fb2-cont {
    height: 460px;
    padding-bottom: 50px
}

#grinzball .fb-3 {
    position: absolute;
    left: 50%;
    top: 58px;
    margin-left: -400px
}

#grinzball .fb-4 {
    position: absolute;
    left: 50%;
    top: 210px;
    margin-left: -87px
}

@media only screen and (max-width: 900px) {
    #grinzball .ball-1, #grinzball .ball-2, #grinzball .ball-3 {
        display: none
    }

    #grinzball .sect-2 p, #grinzball .sect-3 p {
        width: auto
    }

    #grinzball .fb-2, .fb-3 {
        display: none
    }

    #grinzball .fb-1, #grinzball .fb-4 {
        position: relative;
        top: auto;
        left: auto;
        margin-left: auto
    }

    #grinzball .fb-cont, #grinzball .fb2-cont {
        height: auto
    }

    #grinzball .dog-1, #grinzball .dog-2 {
        display: none
    }

    #grinzball .game-cont {
        height: auto
    }

    #grinzball .game {
        position: relative;
        left: auto;
        bottom: auto;
        margin-left: auto
    }
}

@media only screen and (max-width: 620px) {
    #grinzball .sect-1 img {
        margin-right: auto
    }

    #grinzball .sect-4 h1 {
        font-size: 40px;
        line-height: 52px
    }
}

#givepaw img {
    max-width: 100%
}

#givepaw {
    color: #FFF;
    background: #51732c url(../img/fgp-bg.png) top center no-repeat;
    line-height: 36px
}

#givepaw h1 {
    font-size: 48px
}

#givepaw h3 {
    font-size: 21px;
    font-weight: bold;
    margin: 20px 0 50px
}

#givepaw p {
    font-size: 21px;
    margin: 0 auto
}

#givepaw h2 {
    font-size: 24px;
    line-height: 48px;
    margin-top: 30px;
    margin-bottom: 0
}

#givepaw .main {
    padding: 50px 0 65px
}

#givepaw .cont-1 {
    position: relative;
    height: 390px;
    margin: 65px 0 20px
}

img.dog {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -240px;
    transition: 1s
}

#givepaw img.cloud {
    position: absolute;
    left: 50%;
    margin-left: -320px
}

.cont-1:hover > img.dog {
    top: -135px
}

#givepaw .cont-2 {
    position: relative;
    height: 490px;
    margin-bottom: 45px
}

#givepaw .youtube {
    position: relative
}

#givepaw .badge-1 {
    position: absolute;
    left: 50%;
    margin-left: -447px;
    top: -58px
}

#givepaw .badge-2 {
    position: absolute;
    left: 50%;
    margin-left: -34px;
    top: -8px
}

#givepaw .badge-3 {
    position: absolute;
    left: 50%;
    margin-left: 205px;
    bottom: -50px
}

@media only screen and (max-width: 740px) {
    #givepaw .badge-1, #givepaw .badge-2, #givepaw .badge-3 {
        display: none
    }
}

#freemium img {
    max-width: 100%
}

#freemium .genertel-logo {
    padding: 100px 0 60px
}

#freemium .freemium-screens {
    margin: 0 auto;
    position: relative;
    max-width: 1626px
}

#freemium h1, #freemium small {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    z-index: 2000;
    font-family: Arial;
    font-weight: bold;
    left: 0
}

#freemium h1 {
    top: 0;
    font-size: 4em
}

#freemium small {
    top: 10px;
    font-size: 2em
}

.freemium-cta-big {
    background-image: url(../img/freemium-cta-big.png);
    width: 100%;
    height: 430px;
    background-position: center;
    background-size: cover
}

.freemium-cta-left {
    width: 50%;
    float: left;
    background-image: url(../img/freemium-cta-left.jpg);
    height: 398px;
    max-width: 813px;
    background-size: contain;
    background-repeat: no-repeat
}

.freemium-cta-right {
    width: 50%;
    float: right;
    background-image: url(../img/freemium-cta-right.jpg);
    height: 398px;
    max-width: 813px;
    background-size: contain;
    background-repeat: no-repeat
}

#freemium .freemium-screens .slide {
    background-image: url(../img/freemium-slide.png);
    width: 18px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2000;
    background-position: center
}

#freemium h2 {
    clear: both;
    margin-top: 60px;
    float: left;
    width: 100%
}

#freemium .p1 {
    padding-bottom: 50px
}

#freemium-2 {
    background-image: url(../img/freemium-wood-bg.jpg);
    padding-top: 120px;
    height: 629px;
    margin-top: 50px;
    background-position: top center
}

#freemium-2 .computers {
    margin: 0 auto;
    position: relative
}

#freemium-2 .computers .cloud-1 {
    position: absolute;
    top: 99px;
    left: 0
}

#freemium-2 .computers .cloud-2 {
    position: absolute;
    top: -30px;
    left: 100px
}

#freemium-2 .computers .cloud-3 {
    position: absolute;
    top: 100px;
    left: 0
}

#freemium-2 .computers .cloud-4 {
    position: absolute;
    top: -50px;
    left: 450px
}

#freemium-2 .computers .cloud-5 {
    position: absolute;
    top: 80px;
    right: 100px
}

#freemium-2 .computers .cloud-6 {
    position: absolute;
    top: -15px;
    right: 20px
}

#freemium-2 .computers .macbook {
    position: absolute;
    top: 120px;
    left: 10%;
    z-index: 1000
}

#freemium-2 .computers .imac {
    position: absolute;
    right: 15%
}

#freemium-3 {
    background-image: url(../img/freemium-green-bg.jpg);
    height: 700px;
    background-position: top center
}

#freemium-3 .devices {
    position: relative;
    width: 68%;
    margin: 0 auto;
    margin-top: 35px
}

#freemium-3 .devices .iphone-1 {
    position: absolute;
    top: 425px;
    left: 0;
    z-index: 1000
}

#freemium-3 .devices .iphone-2 {
    position: absolute;
    top: 255px;
    left: 23%;
    z-index: 100
}

#freemium-3 .devices .ipad {
    position: absolute;
    top: 220px;
    right: 15%
}

#freemium-3 .devices .mechanic {
    position: absolute;
    top: 0;
    right: 0
}

#freemium-4 {
    background-image: url(../img/freemium-article-bg.jpg);
    background-position: top center;
    height: 1236px
}

#freemium-4 .articles {
    position: relative;
    margin: 0 auto;
    width: 960px;
    display: table;
    clear: both
}

#freemium-4 .articles .palm-tree {
    position: absolute;
    top: 800px;
    left: 0;
    z-index: 300
}

#freemium-4 .articles .article-1 {
    position: absolute;
    top: 570px;
    left: 290px;
    z-index: 500
}

#freemium-4 .articles .article-2 {
    position: absolute;
    top: 345px;
    left: 340px;
    z-index: 300
}

#freemium-4 .articles .article-3 {
    position: absolute;
    top: 365px;
    left: 10px;
    z-index: 200
}

#freemium-4 .articles .article-4 {
    position: absolute;
    top: 375px;
    left: 495px;
    z-index: 100
}

#freemium-4 .articles .article-5 {
    position: absolute;
    top: 120px;
    left: 240px
}

#freemium-4 .articles .article-6 {
    position: absolute;
    top: 145px;
    left: 390px
}

#freemium-5 {
    background-image: url(../img/freemium-youtube-bg.jpg);
    height: 648px
}

#freemium-5 .youtube {
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    width: 740px;
    display: block
}

#freemium-5 .youtube .wrench {
    position: absolute;
    z-index: 100;
    top: 380px;
    left: -75px
}

#freemium-5 .youtube .youtube {
    position: absolute
}

#freemium .cloud {
    -webkit-animation: clouds 60s infinite linear;
    -moz-animation: clouds 60s infinite linear;
    -ms-animation: clouds 60s infinite linear;
    -o-animation: clouds 60s infinite linear;
    animation: clouds 60s infinite linear
}

@-webkit-keyframes clouds {
    0% {
        left: -100%
    }
    100% {
        left: 120%
    }
}

@-moz-keyframes clouds {
    0% {
        left: -100%
    }
    100% {
        left: 120%
    }
}

@-ms-keyframes clouds {
    0% {
        left: -100%
    }
    100% {
        left: 120%
    }
}

@keyframes clouds {
    0% {
        left: -100%
    }
    100% {
        left: 120%
    }
}

.cloud-1 {
    -webkit-animation-duration: 263s;
    -moz-animation-duration: 263s;
    -ms-animation-duration: 263s;
    -o-animation-duration: 263s;
    animation-duration: 263s;
    margin-left: 20%;
    width: 131px;
    height: 54px
}

.cloud-2 {
    -webkit-animation-duration: 99s;
    -moz-animation-duration: 99s;
    -ms-animation-duration: 99s;
    -o-animation-duration: 99s;
    animation-duration: 99s;
    margin-left: 90%;
    width: 182px;
    height: 88px
}

.cloud-3 {
    -webkit-animation-duration: 142s;
    -moz-animation-duration: 142s;
    -ms-animation-duration: 142s;
    -o-animation-duration: 142s;
    animation-duration: 142s;
    margin-left: 50%;
    width: 182px;
    height: 88px
}

.cloud-4 {
    -webkit-animation-duration: 152s;
    -moz-animation-duration: 152s;
    -ms-animation-duration: 152s;
    -o-animation-duration: 152s;
    animation-duration: 152s;
    margin-left: 43%;
    width: 127px;
    height: 52px
}

.cloud-5 {
    -webkit-animation-duration: 215s;
    -moz-animation-duration: 215s;
    -ms-animation-duration: 215s;
    -o-animation-duration: 215s;
    animation-duration: 215s;
    margin-left: 83%;
    width: 181px;
    height: 87px
}

.cloud-6 {
    -webkit-animation-duration: 139s;
    -moz-animation-duration: 139s;
    -ms-animation-duration: 139s;
    -o-animation-duration: 139s;
    animation-duration: 139s;
    margin-left: 73%;
    width: 131px;
    height: 54px
}

@media only screen and (max-width: 1400px) {
    .freemium-cta-big {
        height: 350px
    }
}

@media only screen and (max-width: 1300px) {
    .freemium-cta-big {
        height: 320px
    }
}

@media only screen and (max-width: 1200px) {
    .freemium-cta-big {
        height: 290px
    }
}

@media only screen and (max-width: 960px) {
    .freemium-cta-big {
        height: 220px
    }

    .mechanic {
        display: none
    }

    #freemium-3 .devices {
        width: 90%;
        margin-left: 5%;
        margin-top: 0
    }

    #freemium-4 .articles {
        width: 770px;
        margin: 0 auto;
        display: table
    }

    #freemium-4 .articles .article-1 {
        left: 150px
    }

    #freemium-4 .articles .article-2 {
        left: 310px
    }

    #freemium-4 .articles .article-5 {
        left: 50px
    }

    #freemium-4 .articles .article-6 {
        left: 100px
    }

    #freemium-4 .article-3, #freemium-4 .article-4 {
        display: none
    }

    #freemium-5 {
        height: 640px
    }
}

@media only screen and (max-width: 770px) {
    .freemium-cta-big {
        height: 170px
    }

    #freemium .genertel-logo {
        padding-top: 70px
    }

    #freemium-2 .computers .macbook {
        left: 0;
        position: relative
    }

    #freemium-2 .computers .imac {
        display: none
    }

    #freemium-3 {
        height: 570px
    }

    #freemium-3 .devices .ipad {
        top: 145px
    }

    #freemium-3 .devices .iphone-2 {
        right: 0;
        left: auto
    }

    #freemium-4 .articles {
        width: 600px;
        margin: 0 auto;
        display: table
    }

    #freemium-4 .articles .article-2 {
        display: none
    }

    #freemium-5 .youtube {
        width: 90%
    }

    #freemium-5 .youtube .youtube {
        position: relative
    }

    #freemium-5 .youtube .wrench {
        display: none
    }
}

@media only screen and (max-width: 600px) {
    .freemium-cta-big {
        height: 130px
    }

    #freemium-2, #freemium-3 {
        height: 400px;
        padding-top: 20px
    }

    #freemium-2 .computers .macbook {
        top: 50px
    }

    #freemium-2 .cloud {
        display: none
    }

    #freemium-3 .devices {
        margin-left: 10%
    }

    #freemium-3 .devices .iphone-1 {
        top: 225px
    }

    #freemium-3 .devices .iphone-2 {
        top: 55px
    }

    #freemium-3 .devices .ipad {
        top: 20px
    }

    #freemium-4 {
        height: auto;
        padding-bottom: 50px
    }

    #freemium-4 .articles {
        width: 90%;
        margin: 0 auto
    }

    #freemium-4 .palm-tree {
        display: none
    }

    #freemium-4 .articles .article-1, #freemium-4 .articles .article-6 {
        display: none
    }

    #freemium-4 .articles .article-5 {
        left: 0;
        top: 30px;
        position: relative
    }

    #freemium-5 {
        height: auto;
        padding-bottom: 50px
    }
}

@media only screen and (max-width: 400px) {
    .freemium-cta-big {
        height: 90px
    }

    #freemium-2 {
        height: 250px;
        padding-top: 10px
    }

    #freemium-2 .computers .macbook {
        top: 20px
    }

    #freemium-3 .devices {
        margin-left: 15%
    }
}

@media only screen and (max-width: 320px) {
    .freemium-cta-big {
        height: 50px
    }

    #freemium-2 {
        height: 200px;
        padding-top: 10px
    }

    #freemium-2 .computers .macbook {
        top: 10px
    }
}

#balabit-1 {
    background-image: url(../img/work/balabit/balabit-top-bg.jpg);
    height: 407px;
    background-position: center
}

#balabit-1 .balabit-logo {
    margin: 0 auto;
    display: table
}

#balabit-1 .eCSI {
    background-image: url(../img/work/balabit/balabit-eCSI-logo.png);
    width: 370px;
    height: 163px;
    display: block;
    margin-top: 100px;
    background-size: cover
}

#balabit-1 .balabit {
    background-image: url(../img/work/balabit/balabit-logo.png);
    width: 142px;
    height: 63px;
    display: block;
    margin-top: 30px;
    background-size: cover
}

#balabit-2 {
    background-image: url(../img/work/balabit/balabit-top-content-bg.jpg);
    width: 100%;
    height: 1414px;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    padding-top: 70px
}

#balabit-2 .page-container {
    width: 95%;
    max-width: 895px;
    height: 640px;
    margin: 0 auto;
    margin-top: 65px;
    position: relative
}

#balabit-2 .monitor {
    background-image: url(../img/work/balabit/balabit-monitor.png);
    width: 72%;
    max-width: 620px;
    height: 357px;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat
}

#balabit-2 h2 {
    color: #fff;
    margin-top: 55px
}

#balabit-2 p {
    color: #fff;
    font-size: 1.2em;
    width: 74%;
    margin: 0 auto
}

#balabit-2 .page-container div {
    position: absolute
}

#balabit-2 .page-1 {
    background-image: url(../img/work/balabit/balabit-info1.png);
    width: 428px;
    height: 526px;
    top: 60px;
    left: 50px
}

#balabit-2 .page-2 {
    background-image: url(../img/work/balabit/balabit-info2.png);
    width: 428px;
    height: 527px;
    top: 10px;
    right: 50px
}

#balabit-2 .icon-1 {
    background-image: url(../img/work/balabit/icon-1.png);
    width: 82px;
    height: 82px;
    top: 245px;
    left: 0
}

#balabit-2 .icon-2 {
    background-image: url(../img/work/balabit/icon-2.png);
    width: 81px;
    height: 86px;
    top: 0;
    left: 46%
}

#balabit-2 .icon-3 {
    background-image: url(../img/work/balabit/icon-3.png);
    width: 90px;
    height: 89px;
    top: 190px;
    right: 0
}

#balabit-2 .icon-4 {
    background-image: url(../img/work/balabit/icon-4.png);
    width: 85px;
    height: 74px;
    bottom: 5px;
    left: 50%
}

@media only screen and (max-width: 770px) {
    #balabit-1 {
        height: auto;
        padding: 20px 0
    }

    #balabit-1 .balabit-logo {
        display: block;
        width: 90%
    }

    #balabit-2 .icon, #balabit-2 .page, #balabit-2 .monitor, #balabit-1 .balabit-logo div {
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        background-position: center
    }

    #balabit-1 .eCSI {
        height: 100px;
        margin-top: 0
    }

    #balabit-1 .balabit {
        height: 50px
    }

    #balabit-2 {
        height: auto
    }

    #balabit-2 .page-container {
        width: 90%;
        height: 1150px;
        margin-top: 0
    }

    #balabit-2 .monitor {
        width: 90%
    }

    #balabit-2 h2 {
        margin-top: 30px;
        margin-bottom: 20px
    }

    #balabit-2 .icon {
        width: 30%
    }

    #balabit-2 .page-1 {
        left: 0;
        height: 435px
    }

    #balabit-2 .page-2 {
        top: 550px;
        left: 0;
        height: 435px
    }

    #balabit-2 .icon-1, #balabit-2 .icon-3 {
        display: none
    }

    #balabit-2 .icon-2 {
        top: 30px;
        left: 0;
        width: 100%
    }

    #balabit-2 .icon-4 {
        left: 0;
        width: 100%;
        top: 949px
    }
}

@media only screen and (max-width: 600px) {
    #balabit-2 {
        padding-top: 40px
    }

    #balabit-2 .monitor {
        height: 300px
    }
}

@media only screen and (max-width: 400px) {
    #balabit-2 {
        padding-top: 30px
    }

    #balabit-2 .monitor {
        height: 200px
    }

    #balabit-2 .page-1 {
        height: 416px
    }

    #balabit-2 .page-2 {
        top: 510px;
        height: 416px
    }

    #balabit-2 .icon-4 {
        top: 885px
    }
}

@media only screen and (max-width: 380px) {
    #balabit-2 .page-1 {
        height: 400px
    }

    #balabit-2 .page-2 {
        height: 400px;
        top: 475px
    }

    #balabit-2 .icon-4 {
        top: 820px
    }
}

@media only screen and (max-width: 320px) {
    #balabit-2 {
        padding-top: 30px
    }

    #balabit-2 .page-container {
        width: 260px;
        height: 760px
    }

    #balabit-2 .monitor {
        height: 156px
    }

    #balabit-2 .page-1 {
        width: 260px;
        top: 30px;
        height: 320px
    }

    #balabit-2 .page-2 {
        width: 260px;
        top: 370px;
        height: 320px
    }

    #balabit-2 .icon {
        width: 50px;
        height: 50px
    }

    #balabit-2 .icon-1 {
        top: 465px;
        left: -15px
    }

    #balabit-2 .icon-2 {
        top: 15px;
        left: 100px
    }

    #balabit-2 .icon-3 {
        top: 465px;
        right: -15px
    }

    #balabit-2 .icon-4 {
        top: 660px;
        left: 100px
    }
}

#granit-1 {
    height: 105px;
    width: 100%;
    margin: 0 auto;
    display: table;
    background-image: url(../img/work/granit_bank/header-bg.jpg)
}

#granit-1 .granit-logo {
    background-image: url(../img/work/granit_bank/granit-logo.png);
    width: 276px;
    height: 47px;
    display: block;
    margin: 0 auto;
    margin-top: 30px;
    background-repeat: no-repeat
}

#granit-2 {
    background-image: url(../img/work/granit_bank/granit-top-bg.jpg);
    width: 100%;
    height: 667px;
    background-position: center;
    margin: 0 auto;
    margin-top: 7px;
    background-size: cover;
    background-repeat: no-repeat
}

#granit-2 .monitor {
    background-image: url(../img/work/granit_bank/granit-monitor.png);
    width: 90%;
    max-width: 659px;
    height: 380px;
    margin: 0 auto;
    margin-top: 45px;
    position: relative;
    z-index: 100
}

#granit-2 p, #granit-2 h2 {
    color: #fefefe;
    position: relative;
    z-index: 100
}

#granit-2 h2 {
    margin-top: 50px
}

#granit-2 p {
    width: 63%;
    margin: 0 auto
}

#granit-2 .triangle-container {
    margin: 0 auto;
    display: table;
    max-width: 1298px
}

#granit-2 .triangle {
    background-image: url(../img/work/granit_bank/triangle.png);
    width: 100%;
    max-width: 1310px;
    height: 603px;
    position: absolute;
    top: 176px;
    background-repeat: no-repeat;
    background-position: center
}

#granit-3 {
    background-image: url(../img/work/granit_bank/granit-scnd-bg.jpg);
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: table;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

#granit-3 .page-container {
    width: 67%;
    max-width: 900px;
    margin: 0 auto;
    height: 1236px;
    position: relative;
    margin-top: 70px
}

#granit-3 .page-1 {
    background-image: url(../img/work/granit_bank/granit-landing1.png);
    width: 462px;
    height: 754px;
    position: absolute;
    top: 90px;
    left: 0;
    background-repeat: no-repeat
}

#granit-3 .page-2 {
    background-image: url(../img/work/granit_bank/granit-landing2.png);
    width: 478px;
    height: 552px;
    position: absolute;
    top: 190px;
    right: 0;
    background-repeat: no-repeat
}

#granit-3 .granit-pr {
    background-image: url(../img/work/granit_bank/granit-product.png);
    width: 605px;
    height: 446px;
    position: absolute;
    bottom: 5px;
    left: 13%;
    background-repeat: no-repeat
}

@media only screen and (max-width: 770px) {
    #granit-2 .monitor {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center
    }

    #granit-3 {
        background-size: cover
    }

    #granit-3 .page-container {
        height: 1750px;
        width: 80%
    }

    #granit-3 .page-1 {
        width: 100%;
        background-position: center;
        background-repeat: no-repeat
    }

    #granit-3 .page-2 {
        width: 100%;
        background-position: center;
        background-repeat: no-repeat
    }

    #granit-3 .page-2 {
        left: 0;
        top: 785px
    }

    #granit-3 .granit-pr {
        width: 89%;
        background-size: contain;
        background-repeat: no-repeat;
        bottom: -65px
    }
}

@media only screen and (max-width: 600px) {
    #granit-2 .monitor {
        height: 302px
    }

    #granit-3 .page-container {
        width: 90%
    }

    #granit-3 .page-1, #granit-3 .page-2 {
        background-size: contain
    }
}

@media only screen and (max-width: 500px) {
    #granit-3 .page-container {
        height: 1540px;
        margin-top: 40px
    }

    #granit-3 .page-1 {
        height: 695px
    }

    #granit-3 .page-2 {
        height: 492px;
        top: 715px
    }

    #granit-3 .granit-pr {
        height: 280px;
        bottom: 20px
    }
}

@media only screen and (max-width: 400px) {
    #granit-2 .monitor {
        height: 198px
    }

    #granit-3 .page-container {
        height: 1245px;
        margin-top: 30px
    }

    #granit-3 .page-1 {
        height: 555px
    }

    #granit-3 .page-2 {
        height: 394px;
        top: 575px
    }

    #granit-3 .granit-pr {
        height: 220px
    }
}

@media only screen and (max-width: 320px) {
    #granit-1 .granit-logo {
        background-size: 90%;
        background-repeat: no-repeat;
        background-position: center
    }

    #granit-2 .monitor {
        height: 148px
    }

    #granit-2 h2 {
        margin-top: 20px
    }

    #granit-3 .page-container {
        height: 1015px
    }

    #granit-3 .page-1 {
        height: 440px
    }

    #granit-3 .page-2 {
        height: 312px;
        top: 470px
    }

    #granit-3 .granit-pr {
        height: 178px
    }
}

#flagella-1 {
    background-image: url(../img/work/flagella/flagella-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 170px;
    padding-bottom: 50px
}

#flagella-1 .flagella-logo {
    background-image: url(../img/work/flagella/flagella-logo.png);
    width: 465px;
    height: 40px;
    display: block;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

#flagella-1 span {
    background-image: url(../img/work/flagella/dei.png);
    width: 195px;
    height: 15px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: 40px
}

#flagella-1 .bow-monitor-container {
    width: 90%;
    max-width: 840px;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: table
}

#flagella-1 .monitor {
    background-image: url(../img/work/flagella/monitor.png);
    width: 92%;
    max-width: 477px;
    height: 464px;
    margin: 0 auto;
    margin-top: 90px;
    background-size: contain;
    background-repeat: no-repeat
}

#flagella-1 .bow {
    background-image: url(../img/work/flagella/bow.png);
    width: 83%;
    max-width: 373px;
    height: 300px;
    position: absolute;
    right: 0;
    bottom: -45px;
    background-size: contain;
    background-repeat: no-repeat
}

#flagella-1 .bow-shadow {
    background-image: url(../img/work/flagella/bow-shadow.png);
    width: 66%;
    max-width: 295px;
    height: 190px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat
}

#flagella-1 h2 {
    padding-top: 50px
}

#flagella-1 p, #flagella-1 h2 {
    color: #fff;
    margin: 0 auto
}

#flagella-1 .text {
    margin: 0 auto;
    max-width: 846px;
    width: 90%
}

#flagella-1 .first-p {
    margin-top: 55px;
    margin-bottom: 35px
}

#flagella-2 {
    background-image: url(../img/work/flagella/pages-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 50px;
    padding-bottom: 30px;
    clear: both;
    height: auto
}

#flagella-2 .page-container {
    width: 68%;
    max-width: 805px;
    margin: 0 auto;
    position: relative;
    height: 776px
}

#flagella-2 .page-1 {
    background-image: url(../img/work/flagella/page1.png);
    width: 64%;
    max-width: 501px;
    height: 649px;
    position: absolute;
    top: 65px;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat
}

#flagella-2 .page-2 {
    background-image: url(../img/work/flagella/page2.png);
    width: 64%;
    max-width: 508px;
    height: 774px;
    position: absolute;
    top: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat
}

@media only screen and (max-width: 770px) {
    #flagella-1 {
        padding-top: 50px
    }

    #flagella-1 .monitor {
        margin-top: 45px
    }

    #flagella-1 .bow, #flagella-1 .bow-shadow {
        display: none
    }

    #flagella-2 {
        background-size: cover
    }

    #flagella-2 .page-container {
        height: 1460px
    }

    #flagella-2 .page-1, #flagella-2 .page-2 {
        background-size: contain;
        background-position: center;
        width: 100%
    }

    #flagella-2 .page-1 {
        top: 0
    }

    #flagella-2 .page-2 {
        left: 0;
        top: 670px
    }
}

@media only screen and (max-width: 600px) {
    #flagella-1 .flagella-logo {
        width: 80%
    }

    #flagella-2 {
        background-size: cover
    }

    #flagella-2 .page-container {
        height: 1060px
    }

    #flagella-2 .page-1 {
        height: 452px
    }

    #flagella-2 .page-2 {
        height: 532px;
        top: 480px
    }
}

@media only screen and (max-width: 500px) {
    #flagella-1 .monitor {
        height: 384px
    }
}

@media only screen and (max-width: 400px) {
    #flagella-1 span {
        width: 40%
    }

    #flagella-1 .monitor {
        height: 308px
    }

    #flagella-2 .page-container {
        height: 770px
    }

    #flagella-2 .page-1 {
        height: 334px
    }

    #flagella-2 .page-2 {
        height: 394px;
        top: 360px
    }
}

@media only screen and (max-width: 320px) {
    #flagella-1 .monitor {
        height: 260px
    }

    #flagella-2 .page-container {
        height: 620px
    }

    #flagella-2 .page-1 {
        height: 264px
    }

    #flagella-2 .page-2 {
        height: 312px;
        top: 290px
    }
}

#eszbontok-1 {
    background-color: #f4f3f3;
    padding-bottom: 235px
}

#eszbontok-1 .eszbontok-logo {
    background-image: url(../img/work/eszbontok/eszbontok-logo.png);
    width: 100%;
    max-width: 1037px;
    height: 236px;
    display: block;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat
}

#eszbontok .container {
    width: 80%;
    max-width: 855px;
    margin: 0 auto;
    position: relative
}

#eszbontok-1 .monitor {
    background-image: url(../img/work/eszbontok/imac.png);
    width: 95%;
    max-width: 477px;
    height: 439px;
    margin: 0 auto;
    margin-top: 15px;
    position: relative;
    z-index: 100;
    background-size: contain;
    background-repeat: no-repeat
}

#eszbontok-1 .ball {
    position: absolute
}

#eszbontok-1 .ball-1 {
    background-image: url(../img/work/eszbontok/ball1.png);
    width: 59px;
    height: 58px;
    top: 15px;
    left: 25px
}

#eszbontok-1 .ball-2 {
    background-image: url(../img/work/eszbontok/ball2.png);
    width: 59px;
    height: 56px;
    top: 80px;
    left: 90px
}

#eszbontok-1 .ball-3 {
    background-image: url(../img/work/eszbontok/ball3.png);
    width: 64px;
    height: 56px;
    top: 210px;
    left: 50px
}

#eszbontok-1 .ball-4 {
    background-image: url(../img/work/eszbontok/ball4.png);
    width: 66px;
    height: 56px;
    top: 275px;
    left: 40px
}

#eszbontok-1 .ball-5 {
    background-image: url(../img/work/eszbontok/ball5.png);
    width: 64px;
    height: 57px;
    top: 255px;
    left: 110px
}

#eszbontok-1 .ball-6 {
    background-image: url(../img/work/eszbontok/ball6.png);
    width: 64px;
    height: 56px;
    top: 340px;
    left: 85px
}

#eszbontok-1 .ball-7 {
    background-image: url(../img/work/eszbontok/ball7.png);
    width: 58px;
    height: 56px;
    top: 305px;
    left: 160px
}

#eszbontok-1 .ball-8 {
    background-image: url(../img/work/eszbontok/ball8.png);
    width: 61px;
    height: 57px;
    top: 325px;
    left: 245px;
    z-index: 100
}

#eszbontok-1 .ball-9 {
    background-image: url(../img/work/eszbontok/ball9.png);
    width: 64px;
    height: 61px;
    top: -90px;
    right: 85px
}

#eszbontok-1 .ball-10 {
    background-image: url(../img/work/eszbontok/ball10.png);
    width: 61px;
    height: 58px;
    top: -55px;
    right: 103px
}

#eszbontok-1 .ball-11 {
    background-image: url(../img/work/eszbontok/ball11.png);
    width: 60px;
    height: 61px;
    top: 100px;
    right: 0
}

#eszbontok-1 .ball-12 {
    background-image: url(../img/work/eszbontok/ball12.png);
    width: 58px;
    height: 57px;
    top: 120px;
    right: 90px;
    z-index: 100
}

#eszbontok-1 .ball-13 {
    background-image: url(../img/work/eszbontok/ball13.png);
    width: 54px;
    height: 55px;
    top: 150px;
    right: 115px
}

#eszbontok-1 .ball-14 {
    background-image: url(../img/work/eszbontok/ball14.png);
    width: 55px;
    height: 55px;
    top: 285px;
    right: 145px
}

#eszbontok-1 .ball-15 {
    background-image: url(../img/work/eszbontok/ball15.png);
    width: 63px;
    height: 57px;
    top: 340px;
    right: 60px
}

#eszbontok-1 p, #eszbontok-1 h2 {
    color: #6a6363
}

#eszbontok-1 h2 {
    margin-bottom: 5px
}

#eszbontok-1 .first-p {
    font-weight: bold
}

#eszbontok-1 .second-p {
    padding: 55px 0
}

#eszbontok-1 .ball-container {
    width: 100%;
    margin: 0 auto;
    display: block;
    float: left;
    position: relative
}

#eszbontok-1 .balls {
    background-image: url(../img/work/eszbontok/balls.png);
    width: 100%;
    height: 313px;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat
}

#eszbontok-2 {
    background-image: url(../img/work/eszbontok/game-bg.jpg);
    height: 905px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

#eszbontok-2 .container {
    width: 740px;
    padding-top: 95px
}

#eszbontok-2 .container div {
    position: absolute
}

#eszbontok-2 .page-1 {
    background-image: url(../img/work/eszbontok/page1.png);
    width: 377px;
    height: 630px;
    left: 0;
    z-index: 100
}

#eszbontok-2 .page-2 {
    background-image: url(../img/work/eszbontok/page2.png);
    width: 377px;
    height: 630px;
    top: 105px;
    right: 0;
    z-index: 10
}

#eszbontok-2 .aron {
    background-image: url(../img/work/eszbontok/aron.png);
    width: 299px;
    height: 434px;
    z-index: 100;
    top: 455px;
    left: 260px
}

#eszbontok-2 .tree {
    background-image: url(../img/work/eszbontok/tree.png);
    width: 624px;
    height: 637px;
    position: absolute;
    top: 268px;
    right: -324px
}

#eszbontok-3 {
    background-image: url(../img/work/eszbontok/fb-ads-bg.png);
    padding-top: 60px;
    padding-bottom: 165px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 640px
}

#eszbontok-3 .container {
    width: 92%;
    max-width: 815px;
    margin-top: 30px;
    position: relative
}

#eszbontok-3 .container div {
    position: absolute
}

#eszbontok-3 span {
    color: #fff
}

#eszbontok-3 .facebook {
    font-size: 2.5em
}

#eszbontok-3 .view {
    position: absolute;
    top: 580px;
    left: 120px;
    font-size: 2.5em;
    z-index: 40
}

#eszbontok-3 .bold {
    font-weight: bold
}

#eszbontok-3 .page-1 {
    background-image: url(../img/work/eszbontok/page-1.png);
    width: 465px;
    height: 246px;
    top: 215px;
    left: 0;
    z-index: 40
}

#eszbontok-3 .page-2 {
    background-image: url(../img/work/eszbontok/page-2.png);
    width: 500px;
    height: 325px;
    left: 190px;
    z-index: 30
}

#eszbontok-3 .page-3 {
    background-image: url(../img/work/eszbontok/page-3.png);
    width: 496px;
    height: 314px;
    top: 130px;
    right: 0;
    z-index: 20
}

#eszbontok-3 .page-4 {
    background-image: url(../img/work/eszbontok/page-4.png);
    width: 283px;
    height: 280px;
    top: 385px;
    right: 40px;
    z-index: 30
}

#eszbontok-3 .brain {
    background-image: url(../img/work/eszbontok/brain.png);
    width: 104px;
    height: 88px;
    top: 485px;
    left: 365px;
    z-index: 40
}

@media only screen and (max-width: 770px) {
    #eszbontok-1 .eszbontok-logo {
        height: 185px
    }

    #eszbontok-2, #eszbontok-3 {
        float: left;
        clear: both;
        width: 100%;
        height: auto
    }

    #eszbontok-1 .monitor {
        margin-top: 0
    }

    #eszbontok-2 .container {
        width: 90%;
        height: 1350px
    }

    #eszbontok-3 .container {
        height: 580px
    }

    #eszbontok-2 .page-1, #eszbontok-2 .page-2 {
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        background-size: contain
    }

    #eszbontok-2 .page-2 {
        top: 765px
    }

    #eszbontok-2 .aron {
        display: none
    }

    #eszbontok-2 .tree {
        display: none
    }

    #eszbontok-3 .container {
        height: 1300px
    }

    #eszbontok-3 .container div {
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        left: 0
    }

    #eszbontok-3 .page-1 {
        top: 0
    }

    #eszbontok-3 .page-2 {
        top: 265px
    }

    #eszbontok-3 .page-3 {
        top: 612px
    }

    #eszbontok-3 .page-4 {
        top: 955px
    }

    #eszbontok-3 .brain {
        top: 1270px
    }

    #eszbontok-3 .view {
        top: 1385px;
        left: 0;
        width: 100%
    }
}

@media only screen and (max-width: 600px) {
    #eszbontok-1 .eszbontok-logo {
        height: 160px
    }

    #eszbontok-1 .monitor {
        height: 420px
    }

    #eszbontok-3 .container div {
        background-size: contain
    }

    #eszbontok-3 .brain {
        background-size: cover
    }
}

@media only screen and (max-width: 480px) {
    #eszbontok-1 .eszbontok-logo {
        height: 130px
    }

    #eszbontok-1 .monitor {
        height: 335px
    }

    #eszbontok-1 .ball {
        display: none
    }

    #eszbontok-3 .container {
        height: 1210px
    }

    #eszbontok-3 .page-1 {
        height: 225px
    }

    #eszbontok-3 .page-2 {
        height: 276px;
        top: 245px
    }

    #eszbontok-3 .page-3 {
        height: 270px;
        top: 540px
    }

    #eszbontok-3 .page-4 {
        top: 830px
    }

    #eszbontok-3 .brain {
        top: 1155px
    }

    #eszbontok-3 .view {
        top: 1275px
    }
}

@media only screen and (max-width: 430px) {
    #eszbontok-2 .container {
        height: 1270px
    }

    #eszbontok-2 .page-1 {
        height: 620px
    }

    #eszbontok-2 .page-2 {
        height: 620px;
        top: 710px
    }
}

@media only screen and (max-width: 380px) {
    #eszbontok-2 .container {
        height: 1150px
    }

    #eszbontok-2 .page-1, #eszbontok-2 .page-2 {
        height: 550px
    }

    #eszbontok-1 .monitor {
        height: 270px
    }

    #eszbontok-2 .page-2 {
        top: 650px
    }

    #eszbontok-3 .container {
        height: 1090px
    }

    #eszbontok-3 .page-1 {
        height: 175px
    }

    #eszbontok-3 .page-2 {
        height: 216px;
        top: 200px
    }

    #eszbontok-3 .page-3 {
        height: 210px;
        top: 445px
    }

    #eszbontok-3 .page-4 {
        top: 690px
    }

    #eszbontok-3 .brain {
        top: 1020px
    }

    #eszbontok-3 .view {
        top: 1140px
    }
}

@media only screen and (max-width: 360px) {
    #eszbontok-2 .container {
        height: 1080px
    }

    #eszbontok-2 .page-1 {
        height: 510px
    }

    #eszbontok-2 .page-2 {
        height: 510px;
        top: 620px
    }
}

@media only screen and (max-width: 320px) {
    #eszbontok-1 .eszbontok-logo {
        height: 100px
    }

    #eszbontok-1 .monitor {
        height: 225px
    }

    #eszbontok-2 .container {
        height: 930px
    }

    #eszbontok-2 .page-1, #eszbontok-2 .page-2 {
        height: 430px
    }

    #eszbontok-2 .page-2 {
        top: 550px
    }

    #eszbontok-3 .container {
        height: 950px
    }

    #eszbontok-3 .page-1 {
        height: 145px
    }

    #eszbontok-3 .page-2 {
        height: 175px;
        top: 170px
    }

    #eszbontok-3 .page-3 {
        height: 174px;
        top: 370px
    }

    #eszbontok-3 .page-4 {
        top: 565px
    }

    #eszbontok-3 .view {
        top: 1020px
    }

    #eszbontok-3 .brain {
        top: 890px
    }
}

#jateknet .max-container {
    max-width: 1000px;
    margin: 0 auto
}

#jateknet-1 {
    width: 100%;
    margin: 0 auto;
    display: table;
    padding-top: 90px;
    padding-bottom: 125px
}

#jateknet-1 .jateknet-logo {
    background-image: url(../img/work/jateknet/jateknet-logo.png);
    width: 342px;
    height: 199px;
    display: block;
    margin: 0 auto
}

#jateknet-2 {
    width: 100%;
    margin: 0 auto;
    display: table;
    background-color: #ec1eaf;
    padding-top: 65px;
    padding-bottom: 95px
}

#jateknet-2 span, #jateknet-2 p, #jateknet-2 h2 {
    color: #fefefe
}

#jateknet-2 p {
    width: 64%;
    margin: 0 auto
}

#jateknet-2 .percent {
    font-size: 12em;
    margin-top: 125px;
    display: block
}

#jateknet-2 .visits {
    display: block;
    font-size: 4em
}

#jateknet-5, #jateknet-4, #jateknet-3 {
    width: 100%;
    margin: 0 auto;
    display: table;
    background-color: #09f;
    padding-top: 75px;
    padding-bottom: 80px
}

#jateknet .container {
    width: 75%;
    margin: 0 auto;
    position: relative
}

#jateknet .icon {
    background-image: url(../img/work/jateknet/jateknet-seo-crosshair.png);
    width: 197px;
    height: 197px;
    float: left;
    background-repeat: no-repeat
}

#jateknet .right {
    float: right;
    width: 73%
}

#jateknet .right h2, #jateknet .right p {
    color: #fefefe;
    text-align: left
}

#jateknet-4 {
    background-color: #86c440
}

#jateknet-4 .pen {
    background-image: url(../img/work/jateknet/jateknet-seo-pen.png)
}

#jateknet-4 .graph-container {
    width: 80%;
    margin: 0 auto
}

#jateknet-4 .graph {
    background-image: url(../img/work/jateknet/jateknet-seo-graph.png);
    width: 98%;
    height: 459px;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

#jateknet-5 {
    background-color: #dd4b39
}

#jateknet-5 .grow {
    background-image: url(../img/work/jateknet/jateknet-seo-grow.png)
}

#jateknet-6 {
    padding-top: 65px;
    padding-bottom: 75px
}

#jateknet-6 a {
    color: #fff;
    background-color: #09f;
    padding: 25px 65px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px
}

#jateknet-6 a:hover {
    background-color: #69bdf5
}

@media only screen and (max-width: 770px) {
    #jateknet-1 {
        padding-top: 30px;
        padding-bottom: 30px
    }

    #jateknet-2 {
        padding-top: 40px;
        padding-bottom: 60px
    }

    #jateknet-2 .percent {
        margin-top: 35px
    }

    #jateknet-5, #jateknet-4, #jateknet-3 {
        padding-top: 40px;
        padding-bottom: 50px
    }

    #jateknet .icon {
        width: 100px;
        height: 100px;
        background-size: contain
    }

    #jateknet-4 .graph {
        display: none
    }
}

@media only screen and (max-width: 600px) {
    #jateknet-2 .percent {
        font-size: 5em
    }

    #jateknet-2 .visits {
        font-size: 2em
    }

    #jateknet .icon {
        width: 80px;
        height: 80px
    }

    #jateknet .right {
        clear: both;
        float: left;
        width: 100%;
        margin-top: 10px
    }
}

@media only screen and (max-width: 400px) {
    #jateknet-1 .jateknet-logo {
        width: 257px;
        height: 150px;
        background-size: contain
    }
}

@media only screen and (max-width: 320px) {
    #jateknet-6 a {
        padding: 25px 50px
    }
}

#profession .max-container {
    max-width: 1000px;
    margin: 0 auto
}

#profession-1 {
    width: 100%;
    margin: 0 auto;
    display: table;
    background-color: #4b5f83;
    padding-top: 90px;
    padding-bottom: 125px
}

#profession-1 .profession-logo {
    background-image: url(../img/work/profession/profession-logo.png);
    width: 461px;
    height: 106px;
    display: block;
    margin: 0 auto
}

#profession-2 {
    width: 100%;
    margin: 0 auto;
    display: table;
    background-color: #9a0c6a;
    padding-top: 65px;
    padding-bottom: 95px
}

#profession-2 span, #profession-2 p, #profession-2 h2 {
    color: #fefefe
}

#profession-2 p {
    width: 64%;
    margin: 0 auto
}

#profession-2 .percent {
    font-size: 12em;
    margin-top: 125px;
    display: block
}

#profession-2 .visits {
    display: block;
    font-size: 4em
}

#profession-5, #profession-4, #profession-3 {
    width: 100%;
    margin: 0 auto;
    display: table;
    padding-top: 75px;
    padding-bottom: 80px
}

#profession .container {
    width: 75%;
    margin: 0 auto;
    position: relative
}

#profession .icon {
    background-image: url(../img/work/profession/profession-seo-crosshair.png);
    width: 197px;
    height: 197px;
    float: left;
    background-repeat: no-repeat
}

#profession .right {
    float: right;
    width: 73%
}

#profession .right h2, #profession .right p {
    color: #fefefe;
    text-align: left
}

#profession-3 {
    background-color: #2e3a52
}

#profession-4 {
    background-color: #1a8996
}

#profession-4 .pen {
    background-image: url(../img/work/profession/profession-seo-pen.png)
}

#profession-4 .graph-container {
    width: 80%;
    margin: 0 auto
}

#profession-4 .graph {
    background-image: url(../img/work/profession/jateknet-seo-graph.png);
    width: 98%;
    height: 459px;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

#profession-5 {
    background-color: #35a0ad
}

#profession-5 .grow {
    background-image: url(../img/work/profession/profession-seo-grow.png)
}

#profession-6 {
    padding-top: 65px;
    padding-bottom: 75px
}

#profession-6 a {
    color: #fff;
    background-color: #4b5f83;
    padding: 25px 65px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px
}

#profession-6 a:hover {
    background-color: #657ba3
}

@media only screen and (max-width: 770px) {
    #profession-1 {
        padding-top: 30px;
        padding-bottom: 30px
    }

    #profession-2 {
        padding-top: 40px;
        padding-bottom: 60px
    }

    #profession-2 .percent {
        margin-top: 35px
    }

    #profession-5, #profession-4, #profession-3 {
        padding-top: 40px;
        padding-bottom: 50px
    }

    #profession .icon {
        width: 100px;
        height: 100px;
        background-size: contain
    }

    #profession-4 .graph {
        display: none
    }
}

@media only screen and (max-width: 600px) {
    #profession .profession-logo {
        width: 252px;
        height: 58px;
        background-size: contain
    }

    #profession-2 .percent {
        font-size: 5em
    }

    #profession-2 .visits {
        font-size: 2em
    }

    #profession .icon {
        width: 80px;
        height: 80px
    }

    #profession .right {
        clear: both;
        float: left;
        width: 100%;
        margin-top: 10px
    }
}

@media only screen and (max-width: 320px) {
    #profession-6 a {
        padding: 25px 50px
    }
}

#kfc-keddvaro-1 {
    background: url(../img/work/kfc-keddvaro/kfc-header.jpg) center;
    background-size: cover;
    height: 410px;
    padding-top: 30px
}

#kfc-keddvaro-2 {
    background: url(../img/work/kfc-keddvaro/kfc-bg-pattern.gif);
    height: 3420px;
    position: relative
}

.kfc-keddvaro-container {
    max-width: 960px;
    margin: 0 auto;
    position: relative
}

#kfc-keddvaro-logo {
    background: url(../img/work/kfc-keddvaro/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 437px;
    height: 187px;
    margin: 0 auto
}

#kfc-keddvaro-mac {
    background: url(../img/work/kfc-keddvaro/mac.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 604px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: -150px
}

#kfc-keddvaro-tal {
    background: url(../img/work/kfc-keddvaro/kfc-tal.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 501px;
    height: 542px;
    position: absolute;
    right: -140px;
    top: 10px
}

#kfc-keddvaro-text {
    text-align: center;
    padding-top: 470px;
    width: 90%;
    margin: 0 auto
}

.kfc-keddvaro-text {
    color: #fff;
    padding: 20px 0;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px
}

#kfc-keddvaro-text2 {
    text-align: left;
    padding-top: 1800px;
    width: 90%;
    margin: 0 auto
}

#kfc-keddvaro-ul {
    font-size: 15px
}

#kfc-keddvaro-text-title {
    font-size: 40px
}

#kfc-keddvaro-text-1 {
    font-weight: bold
}

#kfc-keddvaro-text-1 span {
    color: #c00a27
}

#kfc-keddvaro-text-3 {
    font-style: italic
}

#kfc-keddvaro-csirke-1 {
    background: url(../img/work/kfc-keddvaro/csirke1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 150px;
    height: 162px;
    position: absolute;
    top: 400px;
    left: -100px
}

#kfc-keddvaro-arrow-1 {
    background: url(../img/work/kfc-keddvaro/arrow1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 82px;
    height: 162px;
    position: absolute;
    top: 840px;
    right: 600px
}

#kfc-keddvaro-csirke-2 {
    background: url(../img/work/kfc-keddvaro/csirke2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 123px;
    height: 131px;
    position: absolute;
    top: 800px;
    right: -40px
}

#kfc-keddvaro-screens-container {
    position: relative;
    width: 100%;
    margin: 0 auto
}

#kfc-keddvaro-screen-right {
    background: url(../img/work/kfc-keddvaro/screen-right.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 60%;
    height: 727px;
    position: absolute;
    right: 0;
    top: 140px
}

#kfc-keddvaro-screen-left {
    background: url(../img/work/kfc-keddvaro/screen-left.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 60%;
    height: 720px;
    position: absolute;
    left: 0;
    top: 340px
}

#kfc-keddvaro-arrow-2 {
    background: url(../img/work/kfc-keddvaro/arrow2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 102px;
    height: 279px;
    position: absolute;
    top: 1700px;
    right: 170px
}

#kfc-keddvaro-csirke-3 {
    background: url(../img/work/kfc-keddvaro/csirke3.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 85px;
    height: 92px;
    position: absolute;
    top: 1900px;
    right: 820px
}

#kfc-keddvaro-iphone {
    background: url(../img/work/kfc-keddvaro/iphone.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 681px;
    height: 668px;
    position: absolute;
    top: 1850px;
    right: 80px
}

#kfc-keddvaro-csirke-4 {
    background: url(../img/work/kfc-keddvaro/csirke4.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 161px;
    height: 105px;
    position: absolute;
    top: 2050px;
    right: 0
}

#kfc-keddvaro-arrow-3 {
    background: url(../img/work/kfc-keddvaro/arrow3.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 102px;
    height: 279px;
    position: absolute;
    top: 2300px;
    right: 660px
}

#kfc-keddvaro-citylight-container {
    width: 100%;
    margin: 0 auto;
    padding-top: 20px
}

#kfc-keddvaro-citylight-1 {
    background: url(../img/work/kfc-keddvaro/citylight1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 282px;
    height: 488px;
    float: left
}

#kfc-keddvaro-citylight-2 {
    background: url(../img/work/kfc-keddvaro/citylight2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 347px;
    height: 577px;
    display: inline-block
}

#kfc-keddvaro-citylight-3 {
    background: url(../img/work/kfc-keddvaro/citylight3.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 282px;
    height: 488px;
    float: right
}

@media only screen and (max-width: 1100px) {
    #kfc-keddvaro-tal {
        right: -50px
    }

    #kfc-keddvaro-csirke-1 {
        left: 0
    }

    #kfc-keddvaro-csirke-2 {
        right: 20px
    }
}

@media only screen and (max-width: 991px) {
    #kfc-keddvaro-tal {
        right: 0;
        width: 380px
    }

    #kfc-keddvaro-csirke-1 {
        top: 350px
    }

    #kfc-keddvaro-csirke-2 {
        top: 870px
    }

    #kfc-keddvaro-csirke-3, #kfc-keddvaro-csirke-4 {
        display: none
    }

    #kfc-keddvaro-arrow-1 {
        top: 890px;
        left: 170px
    }

    #kfc-keddvaro-arrow-3 {
        top: 2300px;
        left: 60px
    }

    #kfc-keddvaro-iphone {
        right: 0;
        width: 100%
    }

    .citylight {
        width: 30% !important
    }

    #kfc-keddvaro-citylight-container {
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box
    }
}

@media only screen and (max-width: 600px) {
    #kfc-keddvaro-text2 {
        padding-top: 1400px
    }

    #kfc-keddvaro-csirke-2 {
        display: none
    }

    #kfc-keddvaro-arrow-1 {
        top: 950px;
        left: 40px
    }

    #kfc-keddvaro-iphone {
        top: 1500px
    }

    #kfc-keddvaro-arrow-2 {
        top: 1345px;
        right: 20px
    }

    #kfc-keddvaro-screen-right {
        top: 50px
    }

    #kfc-keddvaro-screen-left {
        top: 240px
    }

    #kfc-keddvaro-arrow-3 {
        top: 1950px;
        left: 30px
    }

    #kfc-keddvaro-citylight-container {
        padding-top: 0 !important
    }

    #kfc-keddvaro-citylight-2 {
        display: none
    }

    #kfc-keddvaro-citylight-1, #kfc-keddvaro-citylight-3 {
        width: 45% !important;
        margin: 2%
    }

    #kfc-keddvaro-2 {
        height: 2850px
    }

    #kfc-keddvaro-text2 {
        text-align: center;
        padding-top: 1315px
    }
}

@media only screen and (max-width: 450px) {
    .csirke, .arrow {
        display: none
    }

    #kfc-keddvaro-text2 {
        padding-top: 1255px
    }

    #kfc-keddvaro-tal {
        width: 80%;
        margin: auto;
        left: 0;
        right: 0;
        top: 85px
    }

    #kfc-keddvaro-2 {
        height: 3110px
    }

    #kfc-keddvaro-citylight-2 {
        width: 80% !important;
        margin: 0 auto;
        display: block
    }

    #kfc-keddvaro-citylight-1, #kfc-keddvaro-citylight-3 {
        display: none
    }

    #kfc-keddvaro-screen-left {
        top: 400px;
        width: 95%
    }

    #kfc-keddvaro-screen-right {
        top: 0;
        width: 95%
    }

    #kfc-keddvaro-iphone {
        top: 1700px
    }

    #kfc-keddvaro-citylight-container {
        padding-top: 1280px
    }

    #kfc-keddvaro-logo {
        width: 90%
    }
}

@media only screen and (max-width: 350px) {
    #kfc-keddvaro-text2 {
        padding-top: 1140px
    }

    #wiro-right {
        top: 822px;
        width: 71%
    }
}

#fn-mozipremier-1 {
    background: url(../img/work/fn-mozipremier/fn-header-bck.jpg) center;
    background-size: cover;
    height: 410px;
    float: left;
    width: 100%
}

#fn-mozipremier-logo {
    background: url(../img/work/fn-mozipremier/fn-mozi-logo.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 423px;
    height: 142px;
    margin: 0 auto;
    margin-top: 150px
}

#fn-mozipremier-2 {
    background: url(../img/work/fn-mozipremier/fn-section2-bck.jpg) bottom;
    background-size: cover;
    height: 2300px;
    float: left;
    width: 100%
}

#fn-mozipremier-container {
    max-width: 960px;
    margin: 0 auto;
    position: relative
}

#fn-piccontainer-1 {
    position: relative
}

#fn-mozi-popcorn1 {
    background: url(../img/work/fn-mozipremier/fn-popcorn1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 210px;
    height: 313px;
    position: absolute;
    left: 150px;
    top: 40px
}

#fn-mozi-popcorn2 {
    background: url(../img/work/fn-mozipremier/fn-popcorn2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 167px;
    height: 248px;
    position: absolute;
    left: 60px;
    top: 74px
}

#fn-mozi-szgep {
    background: url(../img/work/fn-mozipremier/fn-szgep.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 383px;
    height: 445px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -80px
}

#fn-mozi-ticket {
    background: url(../img/work/fn-mozipremier/fn-nyerj.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 191px;
    height: 105px;
    position: absolute;
    right: 140px;
    top: 60px
}

#fn-mozi-text {
    max-width: 780px;
    text-align: center;
    padding-top: 400px;
    margin: 0 auto
}

#fn-mozi-text-1 {
    font-size: 40px
}

.fn-mozi-text {
    color: #fff;
    padding: 20px 0;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px
}

#fn-piccontainer-2 {
    width: 100%;
    position: relative
}

#fn-mozi-pic-left {
    background: url(../img/work/fn-mozipremier/fn-pic-left.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 810px;
    height: 630px;
    position: absolute;
    left: 0;
    top: 150px
}

#fn-mozi-pic-right {
    background: url(../img/work/fn-mozipremier/fn-pic-right.png) top center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 644px;
    height: 1151px;
    position: absolute;
    right: 0
}

#fn-mozi-paw-container {
    position: relative;
    width: 100%
}

#fn-mozi-paw-1 {
    position: absolute;
    top: 990px;
    left: -50px
}

#fn-mozi-paw-2 {
    position: absolute;
    top: 910px;
    left: -135px
}

#fn-mozi-paw-3 {
    position: absolute;
    top: 810px;
    left: -60px
}

#fn-mozi-paw-4 {
    position: absolute;
    top: 900px;
    right: 20px
}

@media only screen and (max-width: 870px) {
    #fn-mozi-pic-left {
        display: none
    }

    #fn-mozi-pic-right {
        width: 100%
    }

    #fn-mozi-paw-1 {
        top: 125px;
        left: 50px
    }

    #fn-mozi-paw-2 {
        top: 55px;
        left: 15px
    }

    #fn-mozi-paw-3 {
        top: 10px;
        left: 70px
    }

    #fn-mozi-ticket, #fn-mozi-popcorn2 {
        display: none
    }

    #fn-mozi-popcorn1 {
        left: 50px
    }

    #fn-mozi-text {
        padding-left: 10px;
        padding-right: 10px
    }
}

@media only screen and (max-width: 590px) {
    .paw, #fn-mozi-popcorn1 {
        display: none
    }

    #fn-mozi-szgep, #fn-mozipremier-logo {
        width: 100%
    }

    #fn-mozipremier-2 {
        height: 2100px
    }
}

#fn-app-1 {
    background: url(../img/work/fn-app/fn-app-header-bck.jpg) center;
    background-size: cover;
    height: 410px;
    float: left;
    width: 100%;
    box-shadow: 0 -1px 15px 0 #000;
    position: relative
}

#fn-app-logo {
    background: url(../img/work/fn-app/fn-app-logo.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 129px;
    height: 101px;
    margin: 0 auto;
    margin-top: 40px
}

#fn-app-2 {
    background: url(../img/work/fn-app/fn-section2-bck.jpg) top;
    background-size: cover;
    height: 2220px;
    float: left;
    width: 100%;
    position: relative
}

#fn-app-container {
    max-width: 960px;
    margin: 0 auto;
    position: relative
}

#fn-app-telefon {
    background: url(../img/work/fn-app/fn-app-telefon.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 804px;
    height: 750px;
    position: absolute;
    left: -225px;
    top: -155px
}

#fn-app-tablet {
    background: url(../img/work/fn-app/fn-app-tab.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 775px;
    height: 806px;
    position: absolute;
    right: -110px;
    top: -280px
}

#fn-app-text {
    max-width: 780px;
    text-align: center;
    padding-top: 500px;
    margin: 0 auto
}

#fn-app-text-1 {
    font-size: 40px
}

#fn-app-text-3 {
    font-style: italic
}

.fn-app-text {
    color: #fff;
    padding: 20px 10px;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px
}

#fn-app-screen-container {
    width: 100%;
    position: relative
}

#fn-app-screen-1 {
    background: url(../img/work/fn-app/fn-app-screen1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 593px;
    height: 580px;
    position: absolute
}

#fn-app-screen-2 {
    background: url(../img/work/fn-app/fn-app-screen2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 589px;
    height: 576px;
    position: absolute;
    top: 40px;
    right: -135px
}

#fn-app-screen-3 {
    background: url(../img/work/fn-app/fn-app-screen3.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 589px;
    height: 576px;
    position: absolute;
    top: 350px;
    left: -190px
}

#fn-app-screen-4 {
    background: url(../img/work/fn-app/fn-app-screen4.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 593px;
    height: 580px;
    position: absolute;
    top: 450px;
    right: -10px
}

#fn-app-dog {
    background: url(../img/work/fn-app/fn-app-dog.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 234px;
    margin-top: 1000px;
}

#fn-app-header-paw1 {
    background: url(../img/work/fn-app/fn-app-header-paw1.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 106px;
    height: 98px;
    position: absolute;
    top: 80px;
    left: 390px
}

#fn-app-header-paw2 {
    background: url(../img/work/fn-app/fn-app-header-paw2.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 106px;
    height: 98px;
    position: absolute;
    top: 250px;
    right: 70px
}

#fn-app-header-paw3 {
    background: url(../img/work/fn-app/fn-app-header-paw3.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 56px;
    height: 53px;
    position: absolute;
    top: 130px;
    right: 490px
}

#fn-app-header-paw4 {
    background: url(../img/work/fn-app/fn-app-header-paw4.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 56px;
    height: 53px;
    position: absolute;
    top: 295px;
    left: 95px
}

#fn-app-header-paw5 {
    background: url(../img/work/fn-app/evhonlapja.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 220px;
    height: 220px;
    position: absolute;
    top: 301px;
    right: 20%;
    z-index: 1
}

#fn-app-flower1 {
    background: url(../img/work/fn-app/fn-app-flower1.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 31px;
    height: 30px;
    position: absolute;
    top: 835px;
    left: 835px
}

#fn-app-flower2 {
    background: url(../img/work/fn-app/fn-app-flower2.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 31px;
    height: 30px;
    position: absolute;
    top: 1010px;
    left: 450px
}

#fn-app-flower3 {
    background: url(../img/work/fn-app/fn-app-flower3.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 71px;
    height: 70px;
    position: absolute;
    top: 300px;
    left: 0;
    right: 0;
    margin: auto
}

#fn-app-flower4 {
    background: url(../img/work/fn-app/fn-app-flower4.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 46px;
    height: 46px;
    position: absolute;
    top: 593px;
    right: 490px
}

#fn-app-flower5 {
    background: url(../img/work/fn-app/fn-app-flower5.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 260px;
    left: 490px
}

#fn-app-body-paw1 {
    background: url(../img/work/fn-app/fn-app-body-paw1.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 76px;
    height: 74px;
    position: absolute;
    top: 1100px;
    left: 330px
}

#fn-app-body-paw2 {
    background: url(../img/work/fn-app/fn-app-body-paw2.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 113px;
    height: 99px;
    position: absolute;
    top: 400px;
    left: 360px
}

#fn-app-body-paw3 {
    background: url(../img/work/fn-app/fn-app-body-paw3.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 76px;
    height: 74px;
    position: absolute;
    top: 850px;
    right: 850px
}

#fn-app-body-paw4 {
    background: url(../img/work/fn-app/fn-app-body-paw4.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 74px;
    height: 65px;
    position: absolute;
    top: 560px;
    right: 360px
}

@media only screen and (max-width: 1340px) {
    #fn-app-screen-1 {
        left: 65px
    }

    #fn-app-screen-2 {
        top: 40px;
        right: -85px
    }

    #fn-app-screen-3 {
        top: 280px;
        left: -60px
    }

    #fn-app-screen-4 {
        top: 370px;
        right: -10px
    }

    #fn-app-telefon, #fn-app-header-paw1, #fn-app-body-paw3, #fn-app-body-paw4 {
        display: none
    }

    #fn-app-tablet {
        width: 100% !important;
        background-position: center !important;
        right: 0 !important
    }
}

@media only screen and (max-width: 1060px) {
    .fn-app-screen {
        width: 100% !important;
        background-position: center !important;
        left: 0 !important;
        right: 0 !important
    }

    #fn-app-screen-1, #fn-app-screen-4 {
        display: none
    }

    #fn-app-screen-3 {
        top: 490px
    }
}

@media only screen and (max-width: 560px) {
    #fn-app-1 {
        height: 210px
    }

    #fn-app-tablet {
        display: block;
        width: 100% !important;
        background-position: center !important;
        right: 0 !important;
        left: 0 !important
    }

    #fn-app-header-paw3 {
        display: none
    }

    #fn-app-header-paw2 {
        top: 170px
    }

    #fn-app-screen-1 {
        display: block;
        top: 170px
    }

    #fn-app-flower3 {
        top: 375px
    }

    #fn-app-screen-2 {
        top: -30px
    }

    #fn-app-screen-3 {
        top: 380px
    }

    #fn-app-dog {
        width: 48%;
        margin: 0 auto;
        position: absolute;
        left: 0;
        right: 0px;
        top: 2000px;
    }

    #fn-app-header-paw5 {
        width: 130px;
        height: 130px;
        top: 400px;
        right: 10%
    }
}

#egymondat-1 {
    background: url(../img/work/1mondat/1mondat-header-bck.png) center;
    background-size: cover;
    height: 410px;
    float: left;
    width: 100%;
    position: relative
}

#egymondat-2 {
    background: url(../img/work/1mondat/1mondat-bck.png) top;
    background-size: cover;
    height: 2065px;
    float: left;
    width: 100%;
    position: relative;
    box-shadow: 0 2px 23px -3px #000
}

#egymondat-logo {
    background: url(../img/work/1mondat/logo.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 357px;
    height: 87px;
    margin: 0 auto;
    margin-top: 75px
}

#egymondat-iphone {
    background: url(../img/work/1mondat/1mondat-iphone.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 194px;
    height: 396px;
    position: absolute;
    top: 35px;
    left: 25px
}

#egymondat-mac {
    background: url(../img/work/1mondat/1mondat-mac.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 1000px;
    height: 604px;
    position: absolute;
    top: -150px;
    right: 0;
    left: 0;
    margin: auto
}

#egymondat-container {
    max-width: 960px;
    margin: 0 auto;
    position: relative
}

#egymondat-text {
    width: 100%;
    padding: 0 10px;
    color: #fff;
    padding-top: 500px;
    box-sizing: border-box
}

.egymondat-text {
    line-height: 25px;
    letter-spacing: 1px;
    padding: 15px 0;
    font-size: 20px
}

#egymondat-text-1 {
    font-size: 40px;
    line-height: 1
}

#egymondat-text-2 {
    font-weight: bold
}

#egymondat-text-4 {
    font-style: italic
}

#egymondat-left {
    background: url(../img/work/1mondat/1mondat-left.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 592px;
    height: 719px;
    position: absolute;
    top: 1170px
}

#egymondat-right {
    background: url(../img/work/1mondat/1mondat-right.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 599px;
    height: 576px;
    position: absolute;
    right: 0;
    top: 1000px
}

@media only screen and (max-width: 950px) {
    #egymondat-mac {
        width: 100%;
        top: -180px
    }

    #egymondat-right {
        top: 930px
    }

    #egymondat-left {
        top: 1280px
    }
}

@media only screen and (max-width: 700px) {
    #egymondat-iphone {
        display: none
    }

    #egymondat-mac {
        top: -220px
    }

    #egymondat-text {
        padding-top: 300px
    }

    #egymondat-right {
        top: 850px;
        width: 100%
    }

    #egymondat-left {
        width: 100%
    }
}

@media only screen and (max-width: 450px) {
    #egymondat-mac {
        top: -330px
    }

    #egymondat-logo {
        width: 90%
    }

    #egymondat-iphone {
        display: block;
        width: 100%;
        left: 0;
        height: 200px;
        top: 80px
    }

    #egymondat-right {
        top: 920px
    }

    #egymondat-2 {
        height: 1900px
    }
}

@media only screen and (max-width: 320px) {
    #egymondat-right {
        top: 950px
    }
}

#fn-klub-1 {
    background: url(../img/work/fn-klub/fn-klub-header-bck.jpg) center;
    background-size: cover;
    height: 410px;
    float: left;
    width: 100%;
    box-shadow: 0 -1px 15px 0 #000;
    position: relative
}

#fn-klub-logo {
    background: url(../img/work/fn-klub/fn-klub-logo.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 336px;
    height: 146px;
    margin: 0 auto;
    margin-top: 60px
}

#fn-klub-2 {
    background: url(../img/work/fn-klub/fn-klub_bg.jpg) top center repeat-y;
    background-size: 100% auto;
    height: 2815px;
    width: 100%;
    margin-top: 410px
}

#fn-klub-container {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    position: relative
}

#fn-klub-fuzet {
    background: url(../img/work/fn-klub/fuzet.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 779px;
    height: 540px;
    position: absolute;
    top: -190px;
    right: 0;
    left: 0;
    margin: auto
}

#fn-klub-linear {
    background: url(../img/work/fn-klub/linear.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 182px;
    height: 333px;
    position: absolute;
    top: 50px;
    left: 90px
}

#fn-klub-circle {
    background: url(../img/work/fn-klub/circle.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 154px;
    height: 153px;
    position: absolute;
    right: 40px;
    bottom: 15px
}

#fn-klub-heart-1 {
    background: url(../img/work/fn-klub/heart1.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 66px;
    height: 57px;
    position: absolute;
    top: -30px;
    left: -75px
}

#fn-klub-heart-2 {
    background: url(../img/work/fn-klub/heart2.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 44px;
    height: 39px;
    position: absolute;
    top: 155px;
    left: 0
}

#fn-klub-heart-3 {
    background: url(../img/work/fn-klub/heart3.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 95px;
    height: 84px;
    position: absolute;
    top: -130px;
    right: 20px
}

#fn-klub-heart-4 {
    background: url(../img/work/fn-klub/heart4.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 44px;
    height: 39px;
    position: absolute;
    top: 115px;
    right: 0
}

#fn-klub-container-wide {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative
}

#fn-klub-text {
    color: #fff;
    text-align: center;
    font-size: 22px;
    padding: 0 10px;
    padding-top: 400px
}

#fn-klub-text-1 {
    font-size: 42px
}

.fn-klub-text b {
    font-weight: bold !important
}

.fn-klub-text {
    padding: 20px 0;
    line-height: 30px;
    letter-spacing: 1px
}

#fn-klub-laptop {
    background: url(../img/work/fn-klub/laptop.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 1114px;
    height: 597px;
    position: absolute;
    right: 0;
    top: 1050px
}

#fn-klub-phone {
    background: url(../img/work/fn-klub/phone.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 365px;
    height: 601px;
    position: absolute;
    left: 85px
}

#fn-klub-heart-container {
    width: 100%;
    position: relative
}

#fn-klub-heart-5 {
    background: url(../img/work/fn-klub/heart5.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 44px;
    height: 39px;
    position: absolute;
    top: 65px;
    left: 75px
}

#fn-klub-heart-6 {
    background: url(../img/work/fn-klub/heart6.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 95px;
    height: 84px;
    position: absolute;
    top: 250px;
    right: 100px
}

#fn-klub-plakat {
    background: url(../img/work/fn-klub/plakat.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 513px;
    height: 652px;
    position: relative;
    width: 100%;
    margin: 0 auto;
    margin-top: 950px;
}

#fn-klub-dog {
    background: url(../img/work/fn-klub/kutya.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 234px;
    margin-top: 80px
}

#fn-klub-heart-7 {
    background: url(../img/work/fn-klub/heart7.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 66px;
    height: 57px;
    position: absolute;
    top: 920px;
    left: 245px
}

#fn-klub-heart-8 {
    background: url(../img/work/fn-klub/heart8.png) center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 36px;
    height: 32px;
    position: absolute;
    top: 1300px;
    right: 310px
}

@media only screen and (max-width: 1150px) {
    #fn-klub-heart-8 {
        right: 200px
    }

    #fn-klub-heart-1 {
        left: 0
    }

    #fn-klub-heart-7 {
        left: 100px
    }
}

@media only screen and (max-width: 1060px) {
    #fn-klub-phone {
        display: none
    }

    #fn-klub-laptop {
        width: 100%
    }

    #fn-klub-heart-8 {
        right: 100px
    }

    #fn-klub-heart-6 {
        right: 10px
    }
}

@media only screen and (max-width: 930px) {
    #fn-klub-heart-1, #fn-klub-heart-3 {
        display: none
    }
}

@media only screen and (max-width: 700px) {
    #fn-klub-heart-7, #fn-klub-heart-6, #fn-klub-circle {
        display: none
    }

    #fn-klub-plakat {
        margin-top: 600px
    }
}

@media only screen and (max-width: 520px) {
    .fn-klub-heart, #fn-klub-linear {
        display: none
    }

    #fn-klub-plakat {
        margin-top: 500px
    }

    #fn-klub-laptop {
        top: 1100px
    }
}

@media only screen and (max-width: 430px) {
    #erste-left {
        max-width: 400px;
        width: 88%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 1152px
    }

    #erste-right {
        max-width: 400px;
        width: 88%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 1650px
    }

    #fn-klub-plakat {
        margin-top: 400px
    }

    #fn-klub-1 {
        height: 310px
    }

    #fn-klub-2 {
        margin-top: 310px
    }

    #fn-klub-text {
        padding-top: 300px
    }

    #fn-klub-laptop {
        top: 1150px
    }
}

@media only screen and (max-width: 350px) {
    #fn-klub-laptop {
        top: 1250px
    }
}

#kvazar-1 {
    background: url(../img/work/kvazar/kvazar_bg.png) center;
    background-size: cover;
    height: 395px;
    position: relative
}

#kvazar-2 {
    background: url(../img/work/kvazar/kvazar_long_bg.png);
    height: 3178px;
    position: relative;
    background-repeat: round
}

.kvazar-container {
    max-width: 712px;
    margin: 0 auto;
    position: relative
}

#kvazar-logo {
    background: url(../img/work/kvazar/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 383px;
    height: 82px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 100px
}

#kvazar-mac {
    background: url(../img/work/kvazar/mac.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 95%;
    height: 604px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: -150px
}

#kvazar-felho {
    background: url(../img/work/kvazar/cloud_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 282px;
    height: 204px;
    position: absolute;
    left: -189px;
    top: 70px
}

#kvazar_dzsin {
    background: url(../img/work/kvazar/dzsin.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 314px;
    height: 617px;
    position: absolute;
    right: -180px;
    top: -120px
}

#kvazar-text {
    text-align: center;
    padding-top: 470px;
    max-width: 900px
}

#kvazar-text-title {
    font-size: 40px;
    color: black
}

#kvazar-text-1 {
    font-size: 48px;
    font-weight: bold;
    color: #c00a27
}

#kvazar-text-2 {
    color: black;
    font-weight: bold
}

#kvazar-text-3 {
    color: black
}

#kvazar-cloud {
    background: url(../img/work/kvazar/clouds.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1150px;
    height: 377px;
    position: absolute;
    left: -250px;
    top: 720px
}

#kvazar-right {
    background: url(../img/work/kvazar/left.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 563px;
    height: 1280px;
    position: absolute;
    top: 1090px;
    right: 331px
}

#kvazar-left {
    background: url(../img/work/kvazar/right.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 617px;
    height: 1035px;
    position: absolute;
    top: 1010px;
    right: -190px
}

#kvazar-cloud_one {
    background: url(../img/work/kvazar/cloud.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 202px;
    height: 191px;
    position: absolute;
    top: 2020px;
    right: 50px
}

#kvazar-cloud_left {
    background: url(../img/work/kvazar/left_cloud_phone.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 183px;
    height: 134px;
    position: absolute;
    top: 2403px;
    left: -66px
}

#kvazar-ip6 {
    background: url(../img/work/kvazar/ip6.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 630px;
    height: 525px;
    position: absolute;
    top: 2370px;
    right: 50px
}

#kvazar-cloud-top {
    background: url(../img/work/kvazar/cloud_ip_top.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 240px;
    height: 174px;
    position: absolute;
    top: 2301px;
    right: 216px
}

#kvazar-kid {
    background: url(../img/work/kvazar/kid.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 158px;
    height: 316px;
    position: absolute;
    top: 2700px
}

#filh-1 {
    background: url(../img/work/filharmonikusok/fh_logo_bg.png) center;
    height: 470px;
    position: relative;
    background-size: cover
}

#filh-2 {
    background: url(../img/work/filharmonikusok/bg.gif);
    height: 2280px;
    position: relative;
    background-repeat: round
}

.filh-container {
    max-width: 712px;
    margin: 0 auto;
    position: relative
}

#filh-logo {
    background: url(../img/work/filharmonikusok/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 340px;
    height: 126px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 135px
}

#filh-mac {
    background: url(../img/work/filharmonikusok/mac.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 146%;
    height: 582px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -144px;
    top: -150px
}

#filh-phone {
    background: url(../img/work/filharmonikusok/ip.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 397px;
    position: absolute;
    left: -104px;
    top: 58px
}

#filh_hj1 {
    background: url(../img/work/filharmonikusok/hj1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 94px;
    height: 210px;
    position: absolute;
    top: -42px;
    left: -186px
}

#filh_hj2 {
    background: url(../img/work/filharmonikusok/hj2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 116px;
    height: 103px;
    position: absolute;
    right: -160px;
    top: 50px
}

#filh_hj3 {
    background: url(../img/work/filharmonikusok/hj3.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 36px;
    height: 50px;
    position: absolute;
    right: -210px;
    top: 330px
}

#filh_hj4 {
    background: url(../img/work/filharmonikusok/hj4.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 43px;
    height: 43px;
    position: absolute;
    top: 950px
}

#filh_hj5 {
    background: url(../img/work/filharmonikusok/hj5.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 115px;
    height: 155px;
    position: absolute;
    right: -129px;
    top: 822px
}

#filh_hj6 {
    background: url(../img/work/filharmonikusok/hj6.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 87px;
    height: 77px;
    position: absolute;
    right: 80px;
    top: 1922px
}

#filh-text {
    text-align: center;
    max-width: 1200px;
    top: 470px;
    width: 100%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 1.5px;
    line-height: 36px;
    padding: 20px 0
}

#filh-text-title {
    font-size: 40px;
    color: black
}

#filh-text-1 {
    font-size: 48px;
    color: black
}

#filh-text-2 {
    color: black;
    padding-top: 30px
}

#filh-text-3 {
    color: black;
    padding-top: 30px
}

#filh-text-4 {
    color: black
}

#filh-all-text {
    padding: 20px 0;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px
}

#filh-right {
    background: url(../img/work/filharmonikusok/right.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 648px;
    height: 939px;
    position: absolute;
    right: -155px;
    top: 1125px
}

#filh_left {
    background: url(../img/work/filharmonikusok/left.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 622px;
    height: 1049px;
    position: absolute;
    right: 232px;
    top: 1090px
}

.sberb-express-container {
    max-width: 712px;
    margin: 0 auto;
    position: relative
}

#sberb-express-1 {
    background: url(../img/work/sb-fairexpress/sb-express-logo-bg.png) center;
    height: 403px;
    position: relative;
    background-size: cover
}

#sberb-express-2 {
    background: url(../img/work/sb-fairexpress/bg.png);
    height: 3330px;
    position: relative;
    background-repeat: round
}

#sberb-express-logo {
    background: url(../img/work/sb-fairexpress/sb-express-logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 340px;
    width: 100%;
    height: 126px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 135px;
    z-index: 1
}

#sberb-express-mac {
    background: url(../img/work/sb-fairexpress/sb-mac.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 639px;
    height: 490px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    top: 370px;
    right: 0
}

#sberb-express-text {
    text-align: center;
    padding-top: 998px;
    max-width: 900px
}

#sberb-express-text1 {
    text-align: center;
    padding-top: 1100px;
    max-width: 900px
}

#sberb-express-text2 {
    text-align: center;
    padding-top: 522px;
    max-width: 900px
}

#sberb-express-logo-text {
    background: url(../img/work/sb-fairexpress/sb-express-logo-text.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 442px;
    width: 100%;
    height: 126px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 25px;
    right: 0;
    top: 212px;
    z-index: 1
}

#sberb-express_vonat {
    background: url(../img/work/sb-fairexpress/vonat.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1193px;
    height: 477px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    top: 1190px;
    left: -23%;
    -ms-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg)
}

#sberb-express_hj5 {
    background: url(../img/work/sb-fairexpress/csajszi.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 325px;
    height: 632px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    left: 0;
    top: 1292px
}

#sberb-express_edm {
    background: url(../img/work/sb-fairexpress/edm.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 450px;
    width: 100%;
    height: 530px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    left: 0;
    top: 1739px
}

#sberb-express-miniedm {
    background: url(../img/work/sb-fairexpress/miniedm.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 228px;
    width: 40%;
    height: 267px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    right: 520px;
    left: 0;
    top: 2592px
}

#sberb-express_bigedm {
    background: url(../img/work/sb-fairexpress/bigedm.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 557px;
    width: 100%;
    height: 291px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    left: 0;
    top: 2501px
}

#sberb-express_24 {
    background: url(../img/work/sb-fairexpress/24.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 167px;
    height: 167px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    left: 0;
    top: 3160px
}

#sberb-express-text-1 {
    color: #fff;
    padding: 20px 0;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px
}

#sberb-express-text-2 {
    color: #fff;
    padding: 20px 0;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px
}

#sberb-express-text-3 {
    color: #fff;
    padding: 52px 0;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px
}

#sberb-express-text-4 {
    color: #fff;
    padding: 20px 0;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px
}

#sberb-express-text-5 {
    color: black;
    padding: 20px 0;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px
}

#sberb-express-text-6 {
    color: black;
    padding: 20px 0;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1px
}

#sberb-express-pig {
    background: url(../img/work/sb-fairexpress/pig.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 93px;
    height: 70px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -44px;
    top: 937px
}

#sberb-express_build {
    background: url(../img/work/sb-fairexpress/building.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 81px;
    height: 75px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -87px;
    top: 1028px
}

#sberb-express_cash {
    background: url(../img/work/sb-fairexpress/cash.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 92px;
    height: 52px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -228px;
    top: 1217px
}

#sberb-express_time {
    background: url(../img/work/sb-fairexpress/time.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 93px;
    height: 72px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -151px;
    top: 1117px
}

#sberb-express-pig1 {
    background: url(../img/work/sb-fairexpress/pig.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 93px;
    height: 70px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: -44px;
    top: 937px
}

#sberb-express_build1 {
    background: url(../img/work/sb-fairexpress/building.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 81px;
    height: 75px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: -87px;
    top: 1028px
}

#sberb-express_cash1 {
    background: url(../img/work/sb-fairexpress/cash.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 92px;
    height: 52px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: -195px;
    top: 1217px
}

#sberb-express_time1 {
    background: url(../img/work/sb-fairexpress/time.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 93px;
    height: 72px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: -151px;
    top: 1117px
}

#erste-1 {
    background: url(../img/work/erste/erste-bg.png) center;
    height: 420px;
    position: relative;
    background-size: cover
}

#erste-2 {
    background: url(../img/work/erste/erste--big-bg.png);
    height: 2280px;
    position: relative;
    background-repeat: round
}

.erste-container {
    max-width: 1008px;
    margin: 0 auto;
    position: relative
}

#erste-logo {
    background: url(../img/work/erste/erste-logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 340px;
    width: 50%;
    height: 126px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 78px
}

#erste-mac {
    background: url(../img/work/erste/erste-mac.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 940px;
    height: 570px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    top: -137px;
    right: 0
}

#erste-phone {
    background: url(../img/work/erste/erste-phone.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 417px;
    position: absolute;
    left: 0;
    top: 58px
}

#erste_ship {
    background: url(../img/work/erste/ship.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 403px;
    height: 498px;
    position: absolute;
    top: -140px;
    left: -266px
}

#erste-right {
    background: url(../img/work/erste/erste-right.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 563px;
    height: 1280px;
    position: absolute;
    top: 1090px;
    right: 486px
}

#erste-left {
    background: url(../img/work/erste/erste-left.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 617px;
    height: 1035px;
    position: absolute;
    top: 980px;
    right: 20px
}

#erste_ize {
    background: url(../img/work/erste/erste-ize.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 278px;
    height: 282px;
    position: absolute;
    right: -11px;
    top: 257px
}

#erste-text {
    text-align: center;
    padding-top: 600px;
    max-width: 900px;
    margin: 0 auto;
}

#erste-text-title {
    font-size: 40px;
    color: black
}

#erste-text-1 {
    font-size: 48px;
    font-weight: bold;
    color: #c00a27
}

#erste-text-2 {
    color: black;
    font-weight: bold
}

#erste-text-3 {
    color: black
}

#moneynet-1 {
    background: url(../img/work/moneynet/logobg.png) center;
    height: 420px;
    position: relative;
    background-size: cover;
    background-position-y: -60px
}

#moneynet-2 {
    background: url(../img/work/moneynet/money-bg-big.png);
    height: 2528px;
    position: relative;
    background-repeat: round
}

.moneynet-container {
    max-width: 1215px;
    width: 100%;
    margin: 0 auto;
    position: relative
}

#moneynet-logo {
    background: url(../img/work/moneynet/money-logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 340px;
    width: 50%;
    height: 126px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 100px
}

#moneynet-mac {
    background: url(../img/work/moneynet/imac.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 745px;
    width: 62%;
    height: 626px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    top: -150px;
    right: 0
}

#moneynet-phone {
    background: url(../img/work/moneynet/iphone.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 182px;
    width: 18%;
    height: 331px;
    position: absolute;
    left: 13%;
    top: 150px
}

#moneynet_ipad {
    background: url(../img/work/moneynet/ipad.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 375px;
    width: 31%;
    height: 491px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 60%;
    right: 0
}

#moneynet-right {
    background: url(../img/work/moneynet/money-right.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 673px;
    width: 56%;
    height: 1116px;
    position: absolute;
    top: 1020px;
    right: 7%
}

#moneynet-left {
    background: url(../img/work/moneynet/money-left.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 625px;
    width: 52%;
    height: 1092px;
    position: absolute;
    right: 40%;
    top: 1210px
}

#moneynet_excel {
    background: url(../img/work/moneynet/excel.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 43%;
    height: 336px;
    position: absolute;
    top: 820px;
    right: 55%
}

#moneynet_charting {
    background: url(../img/work/moneynet/charting.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 48%;
    height: 352px;
    position: absolute;
    top: 2124px;
    left: 50%;
    margin-left: auto;
    margin-right: auto
}

#moneynet-text {
    top: 535px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    line-height: 25px;
    right: 0;
    left: 0
}

#moneynet-text-1 {
    color: #f90;
    font-size: 50px
}

#moneynet-text-2 {
    font-size: 22px
}

#moneynet-text-3 {
    font-size: 22px
}

#moneynet-4 {
    font-size: 21px;
    font-style: italic
}
/***************************BME***************************/
#bme-1-bg {
    height: 420px;
    position: relative;
    background-color: #588845;
}

#bme-4-bg {
    height: 920px;
    position: relative;
    background-color: #588845;
}

#bme-3-bg {
    height: 1020px;
    position: relative;
    background-color: #e0e0e0;
}

#bme-2-bg {
    height: 1120px;
    position: relative;
    background-color: #588845;
}

.bme-container {
    max-width: 1215px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

#bme-logo {
    background: url(../img/work/bme/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 340px;
    width: 95%;
    height: 126px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 100px
}

#bme-felho1 {
    background: url(../img/work/bme/felho1.png);
    width: 161px;
    height: 103px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    right: 9%;
    top: -202px;
}

#bme-felho2 {
    background: url(../img/work/bme/felho2.png);
    width: 117px;
    height: 65px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    left: 6%;
    top: -40px;

}

#bme-felho3 {
    background: url(../img/work/bme/felho3.png);
    width: 92px;
    height: 51px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    top: 70px;
    left: 13%;
}

#bme-mac {
    background: url(../img/work/bme/mac.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 65%;
    height: 626px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    top: -150px;
    right: 0;
    z-index: 10;
}

#bme-phone {
    background: url(../img/work/bme/phone.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 242px;
    width: 18%;
    height: 414px;
    position: absolute;
    top: 115px;
    right: 10%;
    z-index: 100;
}

#bme-land {
    background: url(../img/work/bme/hatter.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 610px;
    position: absolute;
    top: 1230px;
    z-index: 1000;
    margin-left: auto;
    margin-right: auto;
}

#bme-ifograf {
    background: url(../img/work/bme/infograf.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    max-width: 607px;
    width: 100%;
    height: 943px;
    z-index: 1100;
    left: 15%;
    top: 218px;
}

#bme-foto {
    background: url(../img/work/bme/foto.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    max-width: 301px;
    width: 100%;
    height: 299px;
    z-index: 1002;
    left: 59%;
    top: 761px;
}

#bme-highlight {
    background: url(../img/work/bme/highlight.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    max-width: 356px;
    width: 100%;
    height: 313px;
    z-index: 1000;
    left: 52%;
    top: 254px;
}

#bme-highlight2 {
    background: url(../img/work/bme/highlight2.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    max-width: 358px;
    width: 100%;
    height: 288px;
    z-index: 1000;
    left: 57%;
    top: 498px;
}

#csik {
    background: url(../img/work/bme/csik.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    max-width: 823px;
    width: 100%;
    height: 109px;
    z-index: 2019;
    left: 18%;
    top: 700px;
}

#bme-footer {
    background: url(../img/work/bme/footer.png);
    width: 100%;
    height: 147px;
    bottom: 399px;
    position: absolute;
    background-size: cover;
    z-index: 1000;
    background-repeat: no-repeat;
}

#kiscsavo {
    background: url(../img/work/bme/kiscsavo.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    max-width: 350px;
    width: 100%;
    height: 271px;
    right: 300px;
    top: 295px;
}


.video {
    position: relative;
    padding-bottom: 27.25%;
    overflow: hidden;
    z-index: 1000;
    height: 420px;
}

.youtube_codegena {
    background-color: transparent !important;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    cursor: hand;
    cursor: pointer;
    margin: 0 auto !important;
}

.video iframe,
.video object,
.video embed {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 220px;
    z-index: 10;
    max-width:750px;
    width: 100%;
    height: 422px;
}


#bme-text {
    top: 520px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    line-height: 46px;
    left: 0;
    right: 0;
}

#bme-text-1 {
    color: white;
    font-size: 50px;
    margin: 0 auto;
    text-align: center;
    max-width: 800px;
    width: 100%;
}

#bme-text-2 {
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    color: white;
    margin-top: 45px;
}

#bme-text-3 {
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    color: white;
    margin-top: 250px;
    z-index: 1000;
    font-weight: bold;
}

#bme-4 {
    position: absolute;
    top: 555px;
    z-index: 1000;
    width: 71%;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
}

#bme-4 ul li:nth-child(6) {
    /* margin-left: 220px*/
}

#bme-4 ul {
    font-size: 21px;
    list-style-type: disc;
    display: initial
}

#bme-4 li {
    color: #ffed00;
    float: left;
    font-size: 18px;
    margin: 15px
}

#bme-4 li span {
    color: white;
    width: 100%
}

.wow {
    visibility: hidden;
}

#bme-szulok {
    background: url(../img/work/bme/szulok.png);
    width: 160px;
    height: 127px;
    position: absolute;
    background-size: contain;
    z-index: 1000;
    background-repeat: no-repeat;
    top: -205px;
    right: 56%;
}

#bme-vandor {
    background: url(../img/work/bme/vandor.png);
    width: 113px;
    height: 129px;
    background-repeat: no-repeat;
    position: absolute;
    background-size: contain;
    z-index: 1000;
    top: -200px;
    right: 27%;
}

/***************************BME END***************************/
/***************************NIVE***************************/


#nive-1{
    background: url(../img/work/nive/top-bg.jpg);
    height: 485px;
    width: 100%;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
}

#nive-2{
    background: url(../img/work/nive/bg.jpg);
    height: 2847px;
    width: 100%;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}

#nive-logo{
    background: url(../img/work/nive/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 340px;
    width: 95%;
    height: 126px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 200px
}

#nive-container-wide {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative
}

#nive-text {
    color: #fff;
    text-align: center;
    font-size: 22px;
    padding: 0 10px;
    max-width: 803px;
    width: 98%;
    padding-top: 800px;
    margin: 0 auto;
}

.nive-text {
    padding: 20px 0;
    line-height: 30px;
    letter-spacing: 1px;
    margin-right: 15px;
    margin-left: 15px;
}

#nive-text-1 {
    font-size: 42px;
    line-height: 44px;

}


#nive-citylight{
    background: url(../img/work/nive/citylight.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 528px;
    width: 67%;
    height: 959px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 38%;
    right: 0;
    top: -155px;
}

#nive-citylight2{
    background: url(../img/work/nive/citylight2.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 440px;
    width: 100%;
    height: 809px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 31%;
    top: -60px;
}

#nive-magazin{
    background: url(../img/work/nive/magazin.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 629px;
    width: 74%;
    height: 589px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 26%;
    right: 0px;
    top: 1100px;
    z-index: 1;
}

#nive-magazin2{
    background: url(../img/work/nive/magazin2.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 1027px;
    width: 95%;
    height: 610px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 25px;
    top: 1150px;
}

#nive-banner{
    background: url(../img/work/nive/banner.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 160px;
    width: 100%;
    height: 600px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 71%;
    top: 1960px;
}

#nive-banner1{
    background: url(../img/work/nive/banner1.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 300px;
    width: 100%;
    height: 600px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 31%;
    top: 1824px;
}

#nive-banner2{
    background: url(../img/work/nive/banner2.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 240px;
    width: 100%;
    height: 400px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: ;
    right: 22%;
    top: 1760px;
}

#nive-banner3{
    background: url(../img/work/nive/banner3.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 300px;
    width: 100%;
    height: 250px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 17%;
    top: 2182px;
}

#nive-sisak{
    background: url(../img/work/nive/sisak.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 419px;
    width: 100%;
    height: 319px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 40%;
    top: 2289px;
}

#nive-vizszintezo{
    background: url(../img/work/nive/szintezo.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 702px;
    width: 100%;
    height: 355px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 24%;
    top: 2345px;
}

#nive-fokmero{
    background: url(../img/work/nive/mero.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 453px;
    width: 100%;
    height: 243px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 21%;
    top: 2442px;
}

/***************************NIVE END***************************/

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

    #nive-banner{
        right: 68%;
        width: 23%;
    }

    #nive-banner1{
        left: 34%;
        width: 27%;
    }

    #nive-banner2{
        right: 9%;
        width: 29%;
    }

    #nive-banner3{
        right: 4%;
        width: 39%;
    }

    #nive-sisak {
        right: 29%;
        width: 45%;
    }

    #nive-vizszintezo {
        right: 11%;
        width: 74%;
    }

    #nive-fokmero {
        right: 7%;
        width: 54%;
    }
    .video {
        height: 582px;
    }

}

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

    #nive-magazin {
        top: 1180px;
    }

    #nive-magazin2 {
        top: 1260px;
    }

    #nive-text-1 {
        font-size: 34px;
        line-height: 44px;
    }

    #nive-text-2{
        font-size: 17px;
    }
}


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

    .video iframe, .video object, .video embed {
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: 220px;
        z-index: 10;
        max-width: 394px !important;
        width: 100%;
        height: 223px !important;
    }

    #nive-magazin {
        top: 1357px;
    }

    #nive-banner3 {
        right: 4%;
        width: 54%;
        top: 2270px;
    }

    #nive-banner {
        right: 68%;
        width: 31%;
    }

    #nive-fokmero {
        top: 2520px;
    }

    #nive-vizszintezo {
        top: 2460px;
    }

    #nive-sisak {
        top: 2400px;
    }

    #nive-banner2 {
        right: 2%;
        width: 36%;
        top: 1910px;
    }
}

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

    #nive-text {
        padding-top: 723px;
    }

    #nive-magazin2 {
        top: 1120px;
        left: 10px;
    }

    #nive-magazin {
        top: 1180px;
        left: 16%;
    }


    #nive-banner3 {
        right: 12%;
        width: 54%;
        top: 1844px;
    }

    #nive-banner {
        right: 68%;
        top: 1660px;
    }

    #nive-fokmero {
        top: 2065px;
    }

    #nive-vizszintezo {
        top: 2015px;
    }

    #nive-sisak {
        top: 1955px;

    }

    #nive-banner2 {
        right: 2%;
        width: 36%;
        top: 1547px;
    }

    #nive-2 {
        height: 2365px;
    }

    #nive-banner1 {
        top: 1524px;
    }

    #nive-text-1 {
        font-size: 25px;
        line-height: 44px;
    }

    #nive-text-2 {
        font-size: 14px;
    }

    .video iframe, .video object, .video embed {
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: 0px;
        z-index: 10;
        max-width: 750px;
        width: 100%;
        height: 420px;
    }

}

@media only screen and (max-width: 378px) {
    #nive-2 {
        height: 1835px;
    }

    #nive-text {
        padding-top: 556px;
    }

    #nive-magazin2 {
        top: 968px;
    }

    #nive-banner2 {
        right: 2%;
        width: 36%;
        top: 1275px;
    }

    #nive-banner1 {
        top: 1319px;
    }

    #nive-banner {
        right: 68%;
        width: 31%;
        top: 1380px;
    }

    #nive-banner3 {
        right: 12%;
        width: 54%;
        top: 1520px;
    }

    #nive-sisak {
        top: 1605px;
    }

    #nive-vizszintezo {
        top: 1645px;
    }

    #nive-banner3 {
        right: 2%;
        width: 64%;
        top: 1520px;
    }

    #nive-fokmero {
        top: 1688px;
    }

    #nive-text-2 {
        font-size: 12px;
    }

    #nive-text-1 {
        font-size: 20px;
        line-height: 34px;
    }

    #nive-magazin {
        top: 1000px;
        left: 16%;
    }

}

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




    #bme-mac {
        width: 80%;
    }

    #bme-phone {
        width: 26%;
    }

    #bme-footer {
        bottom: 368px;
    }

    #csik {
        left: 3% !important;
        width: 90%;
    }

    #bme-ifograf {
        width: 70%;
        left: 1%;
        top: 285px;
    }

    #bme-highlight {
        width: 51%;
        left: 46%;
        top: 288px;
    }

    #bme-highlight2 {
        width: 46%;
        left: 52%;
        top: 527px;
    }

    #bme-foto {
        width: 42%;
        left: 54%;
        top: 761px;
    }
}

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

    #bme-text-1 {
        font-size: 34px;
    }

    #bme-ifograf {
        width: 72%;
        left: 1%;
        top: 285px;
    }

    #bme-highlight {
        width: 55%;
        left: 46%;
        top: 288px;
    }

    #bme-highlight2 {
        width: 50%;
        left: 52%;
        top: 510px;
    }

    #bme-foto {
        width: 46%;
        left: 54%;
        top: 705px;
    }

    #bme-3-bg {
        height: 950px;
        position: relative;
        background-color: #e0e0e0;
    }

}

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


    .video iframe, .video object, .video embed {
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: 220px;
        z-index: 10;
        max-width: 569px;
        width: 100%;
        height: 320px;
    }

    #bme-ifograf {
        width: 76%;
    }

    #bme-footer {
        bottom: 553px;
    }

    #bme-4 li {
        font-size: 15px;
        margin: 12px;
    }

    #bme-4 {
        top: 645px;
    }

    #bme-text {
        top: 425px;
    }

    #bme-text-3 {
        margin-top: 325px;
    }

    #bme-text-3 {
        top: 63px;
    }

    iframe {
        width: 400px;
        height: 320px;
    }

    #bme-text-2 {
        font-size: 18px;
        width: 95%;
    }

}

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

    .video iframe,
    .video object,
    .video embed {
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: 270px;
        z-index: 10;
        max-width:750px;
        width: 90%;
        height: 420px;
    }

    .video {
        height: 811px;
    }

    #bme-text-1 {
        font-size: 30px;
        width: 95%;
    }

    #bme-text-2 {
        font-size: 16px;
    }

    #bme-mac {
        width: 96%;
    }

    #bme-phone {
        width: 32%;
    }

    #bme-ifograf {
        width: 94% !important;
    }

    #csik {
        top: 1076px;

    }

    #csik,
    #bme-foto,
    #bme-highlight2,
    #bme-highlight {
        display: none;
    }

    #bme-felho2 {
        top: 162px;
    }

    #bme-felho3 {

        top: -234px;

    }

    #bme-3-bg {
        height: 790px;
    }

    #kiscsavo {
        display: block;
        width: 44%;
        right: 88px;
        top: 560px;
    }

}

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


    .video iframe, .video object, .video embed {
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: 145px;
        z-index: 10;
        max-width: 304px !important;
        width: 100%;
        height: 172px !important;
    }



    #bme-text {
        top: 344px;
    }

    #bme-4 {
        top: 700px;
    }

    #bme-text-1 {
        font-size: 22px;
    }

    #bme-text-2 {
        font-size: 15px;
        line-height: 32px;
        margin-top: 15px;
    }

    #bme-4 li {
        font-size: 13px;
        margin: 11px;
    }

    iframe {
        width: 320px;
        height: 177px;
    }

    #bme-vandor {
        right: 7%;
    }

    #bme-szulok {
        right: 43%;
    }

    #bme-ifograf {
        width: 100% !important;
        height: 642px;
    }

    #bme-4-bg {
        height: 700px;
    }

    .video {
        top: 0px;
        height: 363px;
    }


    #kiscsavo {
        display: block !important;
        width: 44%;
        right: 88px;
        top: 355px;
    }

}

#wiro-1-bg {
    background: url(../img/work/wiro/logo-bg.png) center;
    height: 420px;
    position: relative;
    background-size: cover
}

#wiro-2-bg {
    background: url(../img/work/wiro/bg.png);
    height: 2728px;
    position: relative;
    background-repeat: round
}

.wiro-container {
    max-width: 1215px;
    width: 100%;
    margin: 0 auto;
    position: relative
}

#wiro-logo {
    background: url(../img/work/wiro/wiro-logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 340px;
    width: 50%;
    height: 126px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 100px
}

#wiro-mac {
    background: url(../img/work/wiro/mac.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 85%;
    height: 626px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    top: -150px;
    right: 0
}

#wiro-phone {
    background: url(../img/work/wiro/iphone.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 242px;
    width: 18%;
    height: 414px;
    position: absolute;
    left: 10%;
    top: 52px
}

#wiro-arrow {
    background: url(../img/work/wiro/niga.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    max-width: 816px;
    width: 35%;
    height: 1020px;
    position: fixed;
    right: 0;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    bottom: 0
}

#wiro-arrow-new {
    background: url(../img/work/wiro/arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 192px;
    width: 18%;
    height: 230px;
    position: absolute;
    left: 0;
    right: 0;
    top: 118px;
    margin-left: auto;
    margin-right: auto
}

#wiro-head {
    background: url(../img/work/wiro/head.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 1917px;
    width: 100%;
    height: 376px;
    position: absolute;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    top: 930px
}

#wiro-right {
    background: url(../img/work/wiro/right.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 48%;
    height: 1024px;
    position: absolute;
    top: 1235px;
    left: 9%;
    margin-left: auto;
    margin-right: auto
}

#wiro-front {
    background: url(../img/work/wiro/front.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 39%;
    height: 624px;
    position: absolute;
    top: 1324px;
    left: 60%;
    margin-left: auto;
    margin-right: auto
}

#wiro-back {
    background: url(../img/work/wiro/back.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 48%;
    height: 515px;
    position: absolute;
    top: 1630px;
    left: 49%;
    margin-left: auto;
    margin-right: auto
}

#wiro-car {
    background: url(../img/work/wiro/car.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 65%;
    height: 336px;
    position: absolute;
    top: 2330px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto
}

#wiro-text {
    top: 495px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    line-height: 25px
}

#wiro-text-1 {
    color: #0071b9;
    font-size: 50px
}

#wiro-text-2 {
    font-size: 22px;
    line-height: 40px
}

#wiro-text-3 {
    font-size: 22px;
    line-height: 40px
}

#wiro-4 {
    margin-left: 145px
}

#wiro-4 ul li:nth-child(6) {
    margin-left: 220px
}

#wiro-4 ul {
    font-size: 21px;
    list-style-type: disc;
    display: initial
}

#wiro-4 li {
    color: #0071b9;
    float: left;
    font-size: 21px;
    margin: 15px
}

#wiro-4 li span {
    color: #696363;
    width: 100%
}

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


    #bme-4 {
        width: 93%;
    }
    
    #kiscsavo {
        display: none;
    }

    #csik {
        left: 8%;
    }
    #wiro-text-2, #wiro-text-3 {
        font-size: 21px
    }

    #wiro-4 ul li:nth-child(6) {
        margin-left: 15px
    }

    #wiro-text {
        top: 390px
    }

    #moneynet-text {
        top: 495px
    }

    #moneynet_charting, #erste_ship {
        display: none
    }

    #kvazar-right {
        right: 223px
    }

    #kvazar-cloud {
        width: 1000px;
        left: -150px
    }

    #sberb-express_cash, #sberb-express_time, #sberb-express_build, #sberb-express-pig, #sberb-express_cash1, #sberb-express_time1, #sberb-express_build1, #sberb-express-pig1, #sberb-express_vonat, #filh_hj2, #filh_hj5, #filh_hj1, #filh_hj1 {
        display: none
    }

    #filh-mac {
        width: 100%;
        height: 582px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: -150px
    }

    #sberb-express_hj5 {
        height: 520px;
        width: 231px
    }

    #moneynet-phone {
        top: 79px
    }

    #moneynet-2 {
        height: 2228px
    }
}

@media only screen and (max-width: 991px) {
    #wiro-text-2, #wiro-text-3 {
        font-size: 19px
    }

    #moneynet-text {
        top: 400px;
        line-height: 30px
    }

    #kvazar-text-4 {
        font-size: 25px
    }

    #kvazar-cloud, #kvazar-felho, #kvazar_dzsin {
        display: none
    }

    #filh-phone, #kvazar-right {
        display: none;
        right: 223px
    }

    #kvazar-left {
        right: -31px
    }

    #erste-right {
        max-width: 648px;
        width: 56%;
        right: -23px;
        top: 1000px
    }

    #filh-right {
        max-width: 648px;
        width: 72%;
        right: -73px;
        top: 1100px
    }

    #erste-left {
        max-width: 622px;
        height: 1049px;
        width: 61%;
        right: 317px;
        top: 1215px
    }

    #filh_left {
        max-width: 622px;
        height: 1049px;
        width: 74%;
        right: 232px;
        top: 1090px
    }

    #erste_ize {
        max-width: 278px;
        width: 36%;
        height: 282px;
        position: absolute;
        right: -11px;
        top: 257px
    }

    #erste-phone {
        width: 26%
    }

    #moneynet-2 {
        height: 2128px
    }

    #moneynet-4, #moneynet-text-3, #moneynet-text-2 {
        font-size: 19px
    }
}

@media only screen and (max-width: 800px) {
    #moneynet-mac {
        width: 72%;
        top: -165px
    }

    #moneynet-phone {
        top: 60px
    }

    #moneynet-4, #moneynet-text-3, #moneynet-text-2 {
        font-size: 17px;
        color: black
    }
    #moneynet-4{
        margin-top: 20px;
    }

    #moneynet-4 {
        color: white
    }

    #moneynet-2 {
        height: 1528px
    }

    #moneynet-left {
        top: 810px
    }

    #moneynet-right {
        top: 720px
    }

    #moneynet-text {
        top: 361px;
        line-height: 24px
    }

    #erste_ize {
        max-width: 278px;
        width: 54%;
        height: 282px;
        position: absolute;
        left: 0;
        top: 290px;
        right: 0;
        margin-left: auto;
        margin-right: auto
    }

    #erste-text-3 {
        color: black;
        font-size: 17px
    }

    #erste-text-1 {
        font-size: 25px
    }

    #erste-text-2 {
        color: black;
        font-weight: bold;
        font-size: 19px
    }

    #erste-mac {
        width: 100%;
        height: 582px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: -150px
    }

    #kvazar-cloud_left {
        display: none
    }

    #kvazar-right {
        right: 223px
    }

    #kvazar-left {
        right: -31px;
        top: 900px
    }

    #kvazar-ip6 {
        width: 74%
    }

    #erste-right {
        background-size: contain;
        background-repeat: no-repeat;
        max-width: 646px;
        width: 50%;
        height: 939px;
        position: absolute;
        right: 111px;
        top: 1508px
    }

    #filh-right {
        background: url(../img/work/filharmonikusok/right.png);
        background-size: contain;
        background-repeat: no-repeat;
        max-width: 646px;
        width: 72%;
        height: 939px;
        position: absolute;
        right: 111px;
        top: 1860px
    }

    #erste-left {
        right: 143px;
        width: 50%;
        top: 1000px
    }

    #filh_left {
        right: 78px;
        width: 73%;
        top: 1065px
    }

    #filh-2 {
        height: 2580px
    }

    #filh_hj4, #filh_hj6 {
        display: none
    }

    #sberb-express-text-2, #sberb-express-text-4, #sberb-express-text-6 {
        padding: 0;
        font-size: 16px
    }

    #sberb-express-text-1, #sberb-express-text-3 {
        padding: 15px 0
    }

    #sberb-express-text1 {
        padding-top: 1134px
    }

    #moneynet_excel {
        display: none
    }

    #wiro-head {
        top: 890px
    }

    #wiro-text {
        top: 360px
    }

    #wiro-right {
        top: 1105px
    }

    #wiro-front {
        top: 1124px
    }

    #wiro-back {
        top: 1580px
    }

    #wiro-car {
        top: 2130px
    }

    #wiro-2-bg {
        height: 2428px
    }

    #wiro-4 li {
        font-size: 20px;
        margin: 15px
    }

    #wiro-4 {
        margin-left: 110px
    }
}

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

    #moneynet-4 {
        font-size: 13px;
        color: white;
        margin-top: 18px !important;
    }

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


    #erste-text {
        padding-top: 565px;
    }

    #erste-text-2 {
        font-size: 17px
    }

    #erste-text-3 {
        font-size: 15px
    }

    #wiro-text-1 {
        font-size: 35px;
        line-height: 1.2em
    }

    #wiro-car {
        top: 1830px
    }

    #wiro-back {
        top: 1170px;
        width: 44%
    }

    #wiro-front {
        top: 924px
    }

    #wiro-right {
        top: 870px;
        width: 63%
    }

    #wiro-arrow-new, #wiro-phone {
        display: none
    }

    #wiro-4 {
        margin-left: 10px
    }

    #wiro-text {
        top: 190px
    }

    #wiro-car {
        top: 1725px;
        width: 93%
    }

    #wiro-text-2, #wiro-text-3 {
        font-size: 15px
    }

    #wiro-2-bg {
        height: 2028px
    }

    #wiro-4 li {
        font-size: 15px;
        margin: 10px
    }

    #wiro-head {
        top: 775px !important
    }

    #wiro-mac {
        width: 100%
    }

    #moneynet-text-1 {
        font-size: 33px
    }

    #moneynet-4 {
        font-size: 13px;
        color: white;
        margin-top: 40px;
        margin-left: 10px;
        margin-right: 10px
    }

    #moneynet-text-3, #moneynet-text-2 {
        font-size: 13px;
        color: black;
        margin-left: 10px;
        margin-right: 10px
    }

    #moneynet-phone {
        top: 34px
    }

    #moneynet-2 {
        height: 1152px;
        background-repeat: round
    }

    #kvazar-right {
        display: block
    }

    #kvazar-logo {
        width: 68%
    }

    #kvazar-text {
        text-align: center;
        padding-top: 370px;
        max-width: 900px
    }

    #kvazar-cloud-top, #kvazar-cloud_left, #kvazar-cloud_one {
        display: none
    }


    #kvazar-2 {
        height: 2908px
    }

    #kvazar-right {
        top: 1510px;
        width: 68%;
        height: 1168px;
        left: 66px
    }

    #kvazar-left {
        width: 78%;
        height: 1035px;
        right: 0;
        left: 51px
    }

    #kvazar-cloud {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 700px
    }

    #kvazar_dzsin {
        display: block;
        height: 317px;
        top: 100px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 26%
    }

    #kvazar-text-1 {
        font-size: 36px
    }

    #kvazar-text-2 {
        font-size: 18px
    }

    #kvazar-text-3 {
        font-size: 15px
    }

    #kvazar-cloud {
        display: block
    }

    #kvazar-kid {
        top: 2400px
    }

    #kvazar-ip6 {
        width: 82%;
        top: 2200px
    }

    #erste-left, #filh_left {
        max-width: 400px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 1086px
    }

    #erste-right {
        max-width: 400px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 1510px
    }

    #filh-right {
        max-width: 450px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 1900px
    }

    #filh-text {
        font-size: 13px
    }

    #filh-text-1 {
        font-size: 28px;
        color: black
    }

    #filh_hj5 {
        background: url(../img/work/filharmonikusok/hj5.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 115px;
        height: 112px;
        position: absolute;
        display: block;
        margin-left: auto;
        top: 1783px;
        margin-right: auto;
        right: 0;
        left: 0
    }

    #filh-phone {
        width: 27%;
        height: 276px;
        top: 230px;
        left: 0;
        right: 0;
        margin-right: auto;
        margin-left: auto;
        display: block
    }

    #sberb-express_edm {
        max-width: 393px;
        width: 100%;
        height: 460px
    }

    #sberb-express_hj5 {
        height: 450px;
        top: 1420px;
        width: 231px
    }

    #moneynet-text {
        top: 220px;
        line-height: 22px
    }

    #moneynet-left {
        top: 630px
    }

    #moneynet-right {
        top: 600px
    }
}

@media only screen and (max-width: 400px) {
    #wiro-4 ul li:nth-child(6) {
        margin-left: 5px
    }

    #wiro-head {
        top: 709px !important
    }

    #wiro-car {
        top: 1525px
    }

    #wiro-2-bg {
        height: 1728px
    }

    #wiro-4 li {
        font-size: 13px;
        margin: 7px
    }

    #wiro-text-2, #wiro-text-3 {
        font-size: 13px;
        line-height: 32px
    }

    #wiro-text {
        top: 100px
    }

    #moneynet-text-1 {
        font-size: 37px
    }

    #moneynet-right {
        top: 537px
    }

    #moneynet-4 {
        font-size: 12px;
        color: white;
        margin-top: 15px;
    }

    #moneynet-text-3, #moneynet-text-2 {
        font-size: 13px;
        color: black
    }

    #moneynet-text-1 {
        font-size: 30px
    }

    #moneynet-text {
        top: 130px;
        line-height: 23px
    }

    #moneynet-phone {
        top: -40px;
        width: 19%
    }

    #moneynet-mac {
        width: 77%
    }

    #moneynet_ipad {
        top: -60px
    }

    #moneynet-2 {
        height: 992px
    }

    #kvazar-cloud_left {
        display: none
    }

    #dzsin {
        width: 37%
    }

    #kvazar-text {
        text-align: center;
        padding-top: 315px;
        max-width: 900px
    }

    #kvazar-cloud_one {
        display: block;
        width: 32%
    }

    #kvazar-cloud-top {
        top: 1350px;
        display: block;
        width: 36%;
        right: 100px
    }

    #erste-right {
        top: 1625px;
        width: 94%
    }

    #filh-right {
        top: 1940px
    }

    #erste-text-3 {
        font-size: 12px
    }

    #erste-text-2 {
        font-size: 14px
    }

    #erste-left {
        top: 1128px
    }

    #filh_left {
        right: 0;
        top: 1280px
    }

    #filh_hj6 {
        display: none
    }

    #filh_hj5 {
        width: 133px;
        height: 137px;
        position: absolute;
        top: 1817px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0
    }

    #filh-phone {
        width: 37%;
        height: 253px
    }

    #filh-2 {
        height: 2496px
    }

    #erste-mac, #filh-mac {
        top: -95px
    }

    #filh-logo {
        width: 272px
    }

    #filh-1 {
        height: 400px
    }

    #sberb-express-logo-text {
        max-width: 300px;
        top: 222px
    }

    #sberb-express-logo {
        max-width: 270px
    }

    #sberb-express-text1 {
        padding-top: 1060px
    }

    #sberb-express-mac {
        top: 457px
    }

    #erste-phone {
        display: none
    }

    #erste-1 {
        height: 330px;
        position: relative;
        background-size: cover
    }

    #erste_ship {
        display: block;
        width: 66%;
        top: 140px;
        left: 25px;
        right: 0;
        margin-left: auto;
        margin-right: auto
    }

    #erste_ize {
        top: 406px
    }
}