@charset 'utf-8';
/* KEYHAN CSS Document */

@font-face { font-family: 'raleway'; src: url("../fonts/Raleway-Light.eot?#") format("eot"), url("../fonts/Raleway-Light.woff") format("woff"), url("../fonts/Raleway-Light.ttf") format("truetype"); font-weight: 300; }
@font-face { font-family: 'raleway'; src: url("../fonts/Raleway-ExtraBold.eot?#") format("eot"), url("../fonts/Raleway-ExtraBold.woff") format("woff"), url("../fonts/Raleway-ExtraBold.ttf") format("truetype"); font-weight: 800; }

* { margin: 0 auto; padding: 0; font-family: 'raleway'; border: none; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; }
body { background: #00aeef; overflow: hidden; }
a { text-decoration: none; }
.loading { background: #00aeef; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000000000; }
    .loading .loader { background: url(../images/loading.gif) no-repeat center; width: 150px; height: 20px; position: absolute; top: 42%; right: 0; left: 0; }
footer { position: fixed; right: 0; bottom: 0; left: 0; background: #222; height: 50px; z-index: 1000; }

.container { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1000; overflow: hidden; }
    .container .clouds { background: url(../images/clouds.png) repeat center; width: 10000px; height: 265px; position: absolute; top: 50px; left: 0; }
    .container .section { float: left; position: relative; }
        .container .section .wrapper { width: 980px; position: relative; }
            .container .section .wrapper .peter2 { background: url(../images/peter2.png) no-repeat center; width: 224px; height: 325px; margin: 260px 0px 0px 160px; float: left; position: relative; }
                .container .section .wrapper .peter2 .peterhand { background: url(../images/peterhand.png) no-repeat center; width: 218px; height: 218px; margin: 105px 0px 0px -55px; float: left; position: absolute; z-index: 10000; }
                .container .section .wrapper .peter2 .airplane2 { background: url(../images/airplane2.png) repeat center; width: 262px; height: 89px; position: absolute; margin: 45px 0px 0px -80px; z-index: 1000; }
            .container .section .wrapper .text { float: right; margin: 400px 240px 0px 0px; }
                .container .section .wrapper .text span { font-weight: 800; color: #fff; font-size: 34px; text-transform: uppercase; display: block; line-height: 32px; }
                    .container .section .wrapper .text span:nth-child(1) { word-spacing: 25px; }
                    .container .section .wrapper .text span:nth-child(3) { word-spacing: 43px; }
                    .container .section .wrapper .text span:nth-child(4) { margin-left: 76px; }

            .container .section .wrapper .logoicons { background: url(../images/logoicons.png) no-repeat center; width: 613px; height: 477px; margin-top: 12%; }
                .container .section .wrapper .logoicons .logo { background: url(../images/logo.png) no-repeat bottom; width: 235px; height: 112px; padding-top: 290px; }
                .container .section .wrapper .logoicons p { font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 300; text-align: center; line-height: 20px; }

            .container .section .wrapper .letsstart { font-size: 55px; color: #fff; text-align: center; word-spacing: 12px; margin-top: 24%; }
            .container .section .wrapper .button { background: #222; width: 350px; height: 58px; margin: 7px auto; }
                .container .section .wrapper .button a { color: #fff; text-align: center; font-size: 18px; font-weight: 300; line-height: 58px; display: block; text-transform: uppercase; letter-spacing: 0.05em; }
            .container .section .wrapper p { text-align: center; font-size: 20px; text-transform: uppercase; color: #fff; line-height: 28px; }
    .container .peter3 { background: url(../images/peter3.png) no-repeat center; width: 234px; height: 253px; position: absolute; right: 180px; bottom: 50px; }