﻿/* Slider */
#slider .opacity { background: rgba(34,81,143,.9); top: 0; left: 0; width: 100%; height: calc(100% - 50px); z-index: 2; }
#slider .bigger{z-index:1}
#slider .sliderContent{opacity:0; z-index: 11;}
#slider .sliderContent .img-responsive { width: auto; }
#slider .sliderTitle { color: #eba308; font-size: 48px; font-weight: 700; }
#slider .sliderIcerik { color: #a3caff; font-size: 18px; font-weight: 300; margin: 25px 0 17px; }
#slider .sliderIcerik ul{margin: 0 0 15px; padding: 0 0 0 25px; list-style-image: url(/images/li.png); color: #555; color: #a3caff; font-size: 24px; font-weight: 300; }
#slider .moreButton { color: #fff; padding: 15px 35px; border: 1px solid #eba308; border-radius: 40px; font-weight: 300; display: inline-block; margin: 20px 0 0; overflow:hidden }
#slider .active .sliderContent {-webkit-animation-duration: 5.3s; animation-duration: 5.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInSpecial; animation-name: fadeInSpecial;-webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
.sliderImg { right: 0; bottom: 0; z-index: 1;  width:788px; height:493px; background:url(/images/macbook.png) no-repeat; padding:37px 22px 0 162px; opacity: 0;  -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}
        .sliderImg img { width: 100%}
#slider .active .sliderImg { right: 0; bottom: 0; z-index: 10; -webkit-animation-duration: 5.3s; animation-duration: 5.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInRightSpecial; animation-name: fadeInRightSpecial; -webkit-animation-delay: 1s; animation-delay: 1s;  -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}

/* Responsive'den Desktop'a */
@media(min-width:767px) {
    #slider { position: relative; top: 0; }
        #slider .item { padding-bottom: 50px; }
        #slider .sliderLogo { margin: 0 0 10px; }  
        #slider .sliderContent { top: 35%; width: 100%; }
        #slider .sliderIcerik { width: 100%; }
        .sliderImg { right: 0; bottom: 0; z-index: 11; }
        .sliderImg img { width: auto !important; }
}

#boxes { margin: 55px 0 120px; }
    #boxes .boxesTitle { margin: 10px 0; font-size: 30px; font-weight: 700; color: #eba308; line-height: 36px; }
    #boxes p { color: #aaa; font-size: 16px; font-weight: 300; }
    #boxes .col-md-3 img {max-width:200px}
#homeBox {}
    #homeBox .mockup { margin: -40px 0 -45px; }

#homeBox2 { margin: 115px 0 0; }
    #homeBox2 .mockup { margin: -40px 0 -45px; }

#homeBox3 { margin: 115px 0 0; }
    #homeBox3 .mockup { margin: -40px 0 -45px; }

.box { padding: 30% 0 0 65px; opacity:1 }
    .box .title { font-weight: 700; color: #fff; font-size: 30px; }
    .box .boxdescription { color: #ffedc6; margin: 10px 0 0; font-size: 24px; font-weight: 300; }

#kimlerleCalisiyoruz { margin: 80px 0 80px; opacity:1}
    #musteriGorusleri h3,
    #kimlerleCalisiyoruz h3 { color: #000; font-weight: 700; margin: 15px 0 35px; text-align: center; font-size: 30px; }

#musteriGorusleri { padding: 70px 0; background: #ededed; opacity:1}
    #musteriGorusleri h3 { margin: 0 0; }
    #musteriGorusleri .musteriGorsel { margin: 40px 0 20px; }
    #musteriGorusleri .musteriAdi { font-weight: 700; color: #000; font-size: 24px; }
        #musteriGorusleri .musteriAdi span { display: block; font-size: 16px; color: #bebebe; font-weight: 500; }
    #musteriGorusleri p { color: #8a8a8a; font-size: 16px; font-style: italic; font-weight: 500; border-top: 1px solid #d8d8d8; padding-top: 35px; margin-top: 25px; }
#musteriC img { width: auto !important; display: inline-block; }

#tanitimFilmi { background: #62a530; opacity:1}
.play .item{padding-top:20px} 
.play { padding: 50px 0; background: url(/images/bg.png) no-repeat top right; }
.play a,.play h3,.play a:focus{color: #fff; font-size:16px;  transition: .3s ease-in; -moz-transition: .3s ease-in; -webkit-transition: .3s ease-in; text-decoration:none; border:none}
    .play a:hover { color: #fff; }
    .play img { margin: 0 10px; width:196px!important;margin:auto; transition: .3s ease-in; -moz-transition: .3s ease-in; -webkit-transition: .3s ease-in;-webkit-box-shadow: 0px 0px 3px 5px rgba(0,0,0,0.06);-moz-box-shadow: 0px 0px 3px 5px rgba(0,0,0,0.06);box-shadow: 0px 0px 3px 5px rgba(0,0,0,0.06); opacity:.7}
     .play .playButton img{width:64px!important; height:64px; position:absolute; left:50%; top:50%; margin-left:-32px;margin-top:-64px}
    .play a:hover .playButton img { -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); }
    .play a:hover img{opacity:1}
    #video .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background:#fff}


/*responsive*/
@media(max-width:1136px) {
}






/* animate */
@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0px); }
}

@keyframes fadeInBottom {
    0% { opacity: 0; transform: translateY(-50px); }
    100% { opacity: 1; transform: translateY(0px); }
}

@keyframes fadeInLeft {
    0% { opacity: 0; transform: translateX(-100px); }
    100% { opacity: 1; transform: translateX(0px); }
}

@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(150px); }
    100% { opacity: 1; transform: translateX(0px); }
}

@keyframes scaleOpen {
    0% { transform: scale(0, 1); -webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -o-transform: scale(0, 1); -ms-transform: scale(0, 1); }
    100% { transform: scale(1, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); }
}

@keyframes rotatex {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

@keyframes imageAnimation {
    0% { opacity: 1; }
    100% { opacity: 1; transform: scale(1.25); }
}

@keyframes plane {
    0% { transform: rotate(1deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(1deg); }
}
