@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'; }
body { background: #00aeef; }
a { text-decoration: none; }
.loading { background: #00aeef; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000000; display: block; }
    .loading .section { width: 980px; height: 150px; position: fixed; top: 23%; left: 0; right: 0; }
        .loading .section .logo { background: url(../images/logo.svg) no-repeat center; width: 258px; height: 128px; background-size: 100%; z-index: 10000000; position: absolute; opacity: 0; left: 8px; right: 0; }
        .loading .section .loadpro { background: url(../images/loading.gif) no-repeat center; width: 150px; height: 20px; margin-top: 103px; position: absolute; left: 0; right: 0; }
        .loading .section .logo_icons { background: url(../images/logo_icons.png) no-repeat center; width: 545px; height: 348px; position: absolute; top: 34px; left: 0; right: 0; opacity: 0; }
        .loading .section .loadingtitle { font-size: 16px; color: #fff; font-weight: 800; text-transform: uppercase; display: none; opacity: 0; left: 61%; position: absolute; right: 0; top: 50px; letter-spacing: 0.05em; }
            .loading .section .loadingtitle span { display: none; }
        .loading .section .down { background: url(../images/down.png) no-repeat center; width: 26px; height: 32px; position: fixed; bottom: 7%; left: 0; right: 0; opacity: 0; display: none; cursor: pointer; }
    .loading .loadingmenubtn { width: 38px; position: absolute; right: 40px; top: 40px; cursor: pointer; opacity: 0; }
        .loading .loadingmenubtn .menubtn1 { background: #fff; width: 0%; height: 5px; margin-bottom: 4px; }
        .loading .loadingmenubtn .menubtn2 { background: #fff; width: 0%; height: 5px; margin-bottom: 4px; }
        .loading .loadingmenubtn .menubtn3 { background: #fff; width: 0%; height: 5px; margin-bottom: 4px; }
        .loading .loadingmenubtn .menubtn4 { background: #fff; width: 0%; height: 5px; margin-bottom: 4px; }

nav { background: rgba(0,0,0,0.4); height: 60px; width: 100%; position: fixed; z-index: 1000000; display: block; }
    nav ul { list-style: none; text-align: center; }
        nav ul li { display: inline; line-height: 60px; margin-left: 30px; }
            nav ul li a { color: #fff; cursor: pointer; }
    nav .loadingmenubtn { width: 38px; position: absolute; right: 40px; top: 14px; cursor: pointer; display: none; }
        nav .loadingmenubtn .menubtn1 { background: #fff; width: 100%; height: 5px; margin-bottom: 4px; }
        nav .loadingmenubtn .menubtn2 { background: #fff; width: 100%; height: 5px; margin-bottom: 4px; }
        nav .loadingmenubtn .menubtn3 { background: #fff; width: 100%; height: 5px; margin-bottom: 4px; }
        nav .loadingmenubtn .menubtn4 { background: #fff; width: 100%; height: 5px; margin-bottom: 4px; }

section.main { width: 100%; margin: 0 auto; position: relative; }
.slider { background: #00aeef; overflow: hidden; }
    .slider .clouds { background: url(../images/clouds.png) repeat-x center; width: 4000px; height: 265px; position: relative; left: 0; top: 140px; }
    .slider .sliderbg { background: url(../images/slider.png) no-repeat center; width: 980px; height: 608px; margin-top: -150px; position: relative; }
    .slider .slide1 { position: relative; width: 600px; height: 440px; top: 78px; }
        .slider .slide1 .slide1bg { background: url(../images/slide1bg.png) no-repeat center; width: 566px; height: 437px; position: absolute; }
            .slider .slide1 .slide1bg h3 { width: 80%; text-transform: uppercase; color: #fff; text-align: center; }
                .slider .slide1 .slide1bg h3.fsth3 { font-size: 116px; line-height: 70px; letter-spacing: -2px; letter-spacing: -0.004em; margin-top: 110px; }
                .slider .slide1 .slide1bg h3.sech3 { font-size: 91px; line-height: 90px; letter-spacing: -6px; }
                .slider .slide1 .slide1bg h3.trdh3 { font-size: 91px; line-height: 50px; letter-spacing: -0.058em; }
    .slider .slide2 { position: relative; width: 100%; height: 400px; padding-top: 70px; }
        .slider .slide2 .slide2bg { background: url(../images/slide2bg.png) no-repeat center; width: 969px; height: 62px; position: absolute; bottom: 0; }
        .slider .slide2 .peter { background: url(../images/peter.png) no-repeat center; width: 220px; height: 320px; position: absolute; left: 90px; top: 117px; }
        .slider .slide2 .titles { width: 500px; position: absolute; top: 200px; left: 370px; text-shadow: #066 1px 1px 0px; line-height: 46px; }
            .slider .slide2 .titles h3 { font-size: 31px; color: #fff; text-transform: uppercase; font-weight: 300; }
    .slider .slide3 { width: 920px; margin: 130px auto 0; }
        .slider .slide3 .logo3 { width: 279px; height: 283px; position: relative; float: right; }
            .slider .slide3 .logo3 .logo { background: url(../images/slide3logo.png) no-repeat center; width: 279px; height: 283px; position: absolute; }
            .slider .slide3 .logo3 .logosh { background: url(../images/slide3logosh.png) no-repeat center; width: 279px; height: 283px; position: absolute; }
        .slider .slide3 h3 { font-size: 25px; color: #fff; text-align: center; float: left; width: 54%; margin-top: 160px; margin-left: 80px; font-weight: 300; }

.downmain { background: url(../images/down.png) no-repeat center; width: 26px; height: 32px; position: fixed; bottom: 7%; left: 0; right: 0; opacity: 0; display: block; cursor: pointer; }

.slider .slide1 .slide2thing { position: absolute; bottom: -50px; }
.slider .slide2 .slide3thing { position: absolute; bottom: 0; }

.tools { background: #fff; width: 100%; clear: both; padding: 20px 0 40px; margin-top: 320px; float: left; }
    .tools .toolsitems { width: 980px; }
        .tools .toolsitems .toolitem { width: 25%; float: left; border-top: transparent 5px solid; text-align: center; position: relative; margin: 4px auto 40px; cursor: pointer; padding-top: 10px; }
            .tools .toolsitems .toolitem img { width: 100%; float: left; }
            .tools .toolsitems .toolitem .bghover { background: #222; position: absolute; bottom: 0; right: 0; left: 0; height: 0%; }
            .tools .toolsitems .toolitem h3 { color: #222; font-size: 20px; margin: 30px auto; width: 100%; font-weight: 300; float: left; position: relative; }
        .tools .toolsitems h2 { font-size: 26px; font-weight: 300; color: #00aeef; text-align: center; text-transform: uppercase; margin: 40px auto; }


.airplane { background: url(../images/airplane.png) no-repeat center; width: 351px; height: 123px; position: fixed; top: 30%; left: 20%; }
.nicescroll-rails { display: none !important; }
.spacer { width: 100%; clear: both; margin: 0px auto; }

footer { background: #222; width: 100%; min-height: 50px; line-height: 50px; }
    footer p { text-align: center; font-size: 12px; color: #fff; }
        footer p a { color: #fff; text-decoration: none; cursor: pointer; }
            footer p a:before { content: "|"; margin: 0 5px; }

.about { background: #222; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000000; text-align: center; }
    .about .close { position: fixed; top: 30px; right: 50px; color: #fff; font-size: 36px; font-weight: 800; cursor: pointer; }
    .about .main { width: 800px; top: 30%; position: fixed; left: 0; right: 0; }
        .about .main h4 { font-size: 36px; color: #fff; line-height: 50px; text-transform: uppercase; }
        .about .main p { font-size: 19px; line-height: 36px; color: #fff; text-align: justify; }

.window { min-height: 700px; }



@media (max-width:1024px) {
    .loading .section { width: 100%; top: 20%; }
    .slider .sliderbg { width: 100%; }
    .slider .slide2 .slide2bg { width: 100%; background-size: contain; }
    .slider .slide3 { width: 90%; }
        .slider .slide3 h3 { margin-left: 5%; }
    .tools .toolsitems { width: 95.7%; }
}

@media (max-width:860px) {
    .loading .section .loadingtitle { text-align: center; left: 0; top: 350px; }
    .slider .slide2 .titles { width: 50%; top: 230px; line-height: 36px; left: 47%; }
        .slider .slide2 .titles h3 { font-size: 20px; }
    .slider .slide2 .peter { left: 10%; }
    .tools .toolsitems .toolitem h3 { font-size: 15px; }
    .about .main { width: 80%; }
}

@media (max-width:768px) {
    .slider .slide3 { margin: 0 auto; }
        .slider .slide3 .logo3 { float: none; }
        .slider .slide3 h3 { width: 90%; margin-top: 300px; }
}

@media (max-width:640px) {
    .tools .toolsitems { width: 100%; }
        .tools .toolsitems .toolitem { width: 48%; margin: 0 1%; }
            .tools .toolsitems .toolitem img { width: 80%; float: none; display: block; }
    .about .main { top: 10%; }
    nav ul { position: fixed; background: #222; top: 60px; right: 0; left: 0; padding-bottom: 5%; padding-top: 5%; display: none; }
        nav ul li { margin-left: 0; display: block; line-height: 40px; cursor: pointer; }
            nav ul li:hover { background: #000; transition: all 500ms; }
    .airplane { width: 180px; background-size: contain; }
    nav .loadingmenubtn { display: block; }
}

@media (max-width:600px) {
    .loading .section .logo { width: 120px; height: 128px; }
    .loading .section .logo_icons { width: 275px; top: 5px; background-size: 100%; }
    .loading .section .loadingtitle { top: 235px; font-size: 14px; letter-spacing: 0.01em; font-weight: 300; }
    .slider .slide1 { width: 100%; }
        .slider .slide1 .slide1bg { width: 100%; background-size: contain; }
            .slider .slide1 .slide1bg h3.fsth3 { font-size: 66px; line-height: 42px; letter-spacing: -2px; letter-spacing: -0.012em; margin-top: 150px; }
            .slider .slide1 .slide1bg h3.sech3 { font-size: 55px; line-height: 50px; }
            .slider .slide1 .slide1bg h3.trdh3 { font-size: 51px; line-height: 30px; }
    .slider .slide1 { top: 0%; }
    .slider .slide2 .slide2bg { top: 302px; }
    .slider .slide2 .peter { left: 0; right: 0; top: 25px; }
    .slider .slide2 .titles { width: 100%; top: 360px; line-height: 36px; left: 0; text-align: center; }
}

@media (max-width:540px) {
    footer { line-height: 36px; overflow: hidden; padding: 20px 0; }
        footer p a { color: #fff; text-decoration: none; cursor: pointer; text-align: center; clear: both; float: left; width: 100%; }
            footer p a:before { content: ""; }
}

@media (max-width:480px) {
    .slider .slide3 .logo3 .logo, .slider .slide3 .logo3 .logosh, .slider .slide3 .logo3 { width: 240px; background-size: contain; }
    .tools .toolsitems .toolitem { width: 80%; margin: 0 10%; }
    .about .main p { font-size: 14px; }
    .about .main h4 { font-size: 30px; }
}