@import url(//fonts.googleapis.com/css?family=Play|Titillium+Web|Oswald|Roboto|Roboto+Condensed:400,700&subset=latin,latin-ext);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.text-center {text-align:center;}
body {font-family: 'Roboto', sans-serif;font-size: 15px;line-height: 24px;color: #062033;font-weight: 500;}
h2 {font-weight: 700;font-size: 28px;color: #34B6CA;line-height: 36px;margin-bottom: 15px;letter-spacing: -0.20px;text-align: center;text-transform: uppercase;}
header {position: absolute;top:0px;left: 0;right: 0;z-index: 9998;width: 100%;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
header {background:#fff;box-shadow: 3px 2px 0.99px 0.01px rgba(0, 0, 0, 0.05);border-bottom: 2px solid #34B6CA;}
header.sticky {position: fixed;width: 100%;}
header a.logo img {display: block;}
.htop {    background: #000;color: #fff;font-weight: 400;padding: 2px 0 1px 0}
.logo {width: 32%;float: left;padding: 0px 0 2px 0;margin-top:15px;}
.logo img {max-width:100%;}
nav {width: 70%;float: left;text-align: right;}
nav ul li {display: inline-block;padding: 0px 5px;}
nav ul li a {font-size: 15px;font-weight: 500;padding:32px 10px 22px 10px;line-height: 30px;display: block;font-family: 'Raleway', sans-serif;color: #333;border-bottom: 2px solid rgba(0,0,0,.00);}
nav ul li a:hover {background:#34B6CA;color:#fff;transition: all 0.5s;}
#anasayfa {background: url(images/banner.jpg) no-repeat center center;background-size: cover;padding: 294px 0 120px;text-align: center;position: relative;}
#anasayfa h1 {font-size: 62px;font-family: 'Raleway', sans-serif;line-height: 100%;color: #fff;font-weight: 700;}
#anasayfa h1 span {color: #34B6CA;}
#anasayfa h2 {font-size: 48px;font-family: 'Raleway', sans-serif;line-height: 100%;color: #fff;font-weight: 100;text-transform: lowercase;margin: 10px 0 5px;}
#anasayfa h2 span {color: #34B6CA;}
#anasayfa p {font-family: 'Raleway', sans-serif;color: #fff;font-size: 18px;line-height: 20px;padding: 25px 0 0;}
#anasayfa span.smallline {width: 28px;height: 1px;background: #34B6CA;display: inline-block;margin: 5px 30px;}
.socials {margin: 100px 0 0;}
.socials a i {color: rgba(255,255,255,0.30);margin: 0 5px;}
.socials a i:hover {color: #fff;transition: all 0.5s;}
#hizmetlerimiz {padding: 75px 0 110px;background: #efefef;}
.heartline {text-align: center;}
span.line {width: 90px;height: 1px;background: #d7dadc;display: inline-block;margin: 5px 30px;}
.heartline i {color: #bfbfbf;}
#hizmetlerimiz .heartline {margin-bottom: 60px;}
.leftside {width: 20%;float: left;text-align: center}
.righttside {width: 80%;float: left;}
#hizmetlerimiz {text-align:center;}
#hizmetlerimiz h2 i {width: 54px;height: 54px;font-size:30px;border-radius: 50%;line-height: 50px;border: 1px solid #34B6CA;text-align: center;color: #34B6CA;}
#hizmetlerimiz p {font-size: 14px;color: #062033;line-height: 17px;}
#hizmetlerimiz h3 {font-size: 17px;color: #062033;font-weight: 600;margin-bottom: 10px;}
.specifications {padding: 90px 0 60px;}
.specifications h3 {font-size: 16px;line-height: 30px;color: #3598c5;margin-bottom: 60px;text-align: center;font-weight:500;}
.specifications article {padding: 10px 5px;background: #fff;margin-bottom: 65px;}
.specifications article:hover {background: #fefce9;}
.specifications article:hover i {color: #000;}
article.toppad {margin-top: -15px;}
.specifications .leftside {text-align: left;}
.specifications .leftside i {color: rgba(40,37,40,0.40);    margin: 12px 0px 0px 18px;
    text-align: center;}
.specifications .righttside p {font-size: 11px;color: #062033;line-height: 17px;}
.specifications .righttside h4 {font-size: 17px;color: #062033;font-weight: 600;margin-bottom: 10px;}
#portfoliosec {padding: 60px 0 50px;text-align: center;}
#portfoliosec .heartline {margin-bottom: 40px;}
#filters {margin: 70px auto;width: 100%;text-align: center;padding: 0;list-style: none;}
#filters li {display: inline-block;}
#filters li span {display: inline-block;line-height: 110%;font-family: 'Raleway', sans-serif;text-decoration: none;color: #062033;cursor: pointer;font-size: 14px;font-weight: 700;padding: 7px 20px;}
#filters li span.active {color: #fff;background: #34B6CA;border-radius: 5px;}
#portfoliolist .portfolio {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;width: 25%;display: none;float: left;overflow: hidden;box-shadow: 0px 2px 4.9px 0.1px rgba(0, 0, 0, 0.15);}
.portfolio-wrapper {overflow: hidden;position: relative !important;cursor: pointer;}
.portfolio img {width: 100%;display: block;position: relative;}
.imgDescription2 {position: absolute;top: 0px;bottom: 0;left: 0px;right: 0;background: rgba(76,118,255,.9);color: #fff;width: 100%;height: auto;text-align: center;visibility: hidden;opacity: 0;padding: 0px 0;transition: all 0.1s;cursor: pointer;}
.portfolio:hover .imgDescription2 {visibility: visible;opacity: 1;}
.imgDescription2 h3 {font-size: 13px;color: #fff;font-weight: 700;margin: 15px 0 0;}
.imgDescription2 span {font-size: 13px;font-weight: 300;color: #fff;display: block;}
.imgDescription2 i {width: 30px;height: 30px;border-radius: 50%;line-height: 30px;border: 1px solid #fff;text-align: center;color: #fff;margin-top: 30%;}

@media only screen and (max-width: 767px) {#portfoliolist .portfolio {width: 100%;}}
.team {padding: 60px 0 110px;text-align: center;}
.team .heartline {margin-bottom: 40px;}
.team p {margin-bottom: 90px;}
.team img {display: block;margin: 0 auto;}
.teamperson {position: relative;}
.imagehover {position: absolute;top: 0px;bottom: 0;left: 0px;right: 0;background: rgba(76,118,255,.9);color: #fff;width: 100%;height: auto;text-align: center;visibility: hidden;opacity: 0;padding: 10px;transition: all 0.1s;cursor: pointer;}
.teamperson:hover .imagehover {visibility: visible;opacity: 1;}
.imagehover h4 {font-size: 13px;line-height: 19px;color: #fff;font-weight: 700;}
.imagehover p {font-size: 13px;line-height: 19px;color: #fff;margin: 10px 0 47px;}
.imagehover a i {width: 36px;line-height: 36px;height: 36px;background: #3653af;color: #fff;}
.imagehover a i:hover {color: #3653af;background: #fff;}
.lebel h3 {font-size: 14px;color: #062033;font-weight: 700;margin: 15px 0 0;}
.lebel span {font-size: 13px;color: rgba(6,32,52,0.56);}
#countersdata {padding: 70px 0 110px;background: url(images/count.jpg) no-repeat center center;background-size: cover;text-align: center;}
#countersdata .heartline {margin-bottom: 20px;}
#countersdata h3 {font-size: 44px;color: #fff;font-weight: 600;line-height: 100%;margin-top: 30px;}
#countersdata p {font-size: 13px;color: #fff;line-height: 100%;text-transform: uppercase;margin-top: 5px;}
#data i {width: 98px;height: 98px;line-height: 98px;border-radius: 50%;text-align: center;border: 1px solid #fff;color: #fff;}
#contact {padding: 70px 0;}
#contact .heartline {margin-bottom: 38px;}
#contact p {}
#contact h3 {font-size: 18px;line-height: 26px;color: #062033;margin-bottom: 25px;font-weight:500;}
#contact address, #contact p {color: #666;font-size: 15px;line-height: 19px;margin-bottom:10px;font-family:Oswald;}
#contact h4 {font-size: 20px;line-height: 20px;color: #062033;margin-bottom: 20px;font-weight: 700;}
#contact input, #contact textarea {background: none;border: 0;outline: 0;border-bottom: 2px solid #e0e0e0;padding: 10px 0;}
#contact input {width: 32.6%;margin-right: 0;}
#contact input[type="email"] {margin-right: 0;}
#contact textarea {width: 100%;height: 50px;margin-top: 15px;}
#contact ul li a i {color: #cdd2d6;margin: 10px 0;}
#contact ul li a i:hover, #contact a.send:hover, footer ul li a:hover ,footer p a:hover{color: #517aff;transition: all 0.5s;}
#contact input:focus, #contact textarea:focus {border-bottom: 2px solid #517aff;}
#contact a.send {float: right;color: #000000;font-size: 13px;}
#contact a.send i {margin-right: 10px;color: #517aff;}
::-webkit-input-placeholder {color: #5b646e;font-size:13px;}
:-moz-placeholder {color: #5b646e;font-size:13px;}
::-moz-placeholder { color: #5b646e;font-size:13px;}
:-ms-input-placeholder {color: #5b646e;font-size:13px;}
#map iframe {width: 100%;height: 185px;}
footer {background: #010305;padding: 50px 0;color: #fff;}
footer img {display: block;margin-bottom: 30px;}
footer ul li {width: 50%;float: left;}
footer ul li a {font-size: 12px;line-height: 28px;color: #fff;}
footer h3 {font-family: 'Raleway', sans-serif;font-size: 18px;margin-bottom: 30px;font-weight: 700;color: rgba(255,255,255,0.80)}
footer p {font-size: 12px;}
footer p a{color:#fff;}
footer input {width: 100%;background: none;border: 2px solid #fff;padding: 7px;background: url(images/arrow.png) no-repeat 94% center;}
footer span {font-size: 11px;line-height: 21px;margin-top: 7px;display: block;}

.os-animation {opacity: 0;}
.os-animation.animated {opacity: 1;}
.staggered-animation {opacity: 0;}
.staggered-animation.animated {opacity: 1;}

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;background: #062033;}



.cssload-container *{margin: 0;padding: 0;box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.cssload-container{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);}
.cssload-bouncywrap{position: relative;}
.cssload-cssload-dotcon{display: block;float: left;width: 94px;position: absolute;}
.cssload-dc1{animation: bouncy1 0.975s infinite;-o-animation: bouncy1 0.975s infinite;-ms-animation: bouncy1 0.975s infinite;-webkit-animation: bouncy1 0.975s infinite;-moz-animation: bouncy1 0.975s infinite;left: -75px;}
.dc2{animation: bouncy2 0.975s infinite;-o-animation: bouncy2 0.975s infinite;-ms-animation: bouncy2 0.975s infinite;-webkit-animation: bouncy2 0.975s infinite;-moz-animation: bouncy2 0.975s infinite;left: 0;}
.dc3{animation: bouncy3 0.975s infinite;-o-animation: bouncy3 0.975s infinite;-ms-animation: bouncy3 0.975s infinite;-webkit-animation: bouncy3 0.975s infinite;-moz-animation: bouncy3 0.975s infinite;left: 75px;}
.cssload-dot{height: 19px;width: 19px;border-radius: 50%;background: rgba(250,250,250,0.8);}


.fixedratio {
    padding-top: 50%;
    display: block;
    margin: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
	background-position: center;
	background-repeat: no-repeat;
	background-size:cover;
	-moz-background-size: cover;
	-moz-transition: 0.3s;-o-transition: 0.3s;-webkit-transition: 0.3s;transition: 0.3s;
}
.fixedratio img {
	position:absolute;
	width:100%;
	top:100%;
}

.fx2 {padding-top:100% !important;border-radius:100%;}

h4 {font:bold 20px Raleway;color:#062033;margin:20px 0 5px 0;}

.list li {
    margin: 0 20px;
    list-style-type: circle;
    padding: 15px 0 0 0;
	font-family: Roboto Condensed;
	color:#777;
}


@keyframes bouncy1{0% {transform: translate(0px,0px) rotate(0deg);}
50% {transform: translate(0px,0px) rotate(180deg);}
100% {transform: translate(75px,0px) rotate(-180deg);}
}

@-o-keyframes bouncy1{0% {-o-transform: translate(0px,0px) rotate(0deg);}
50% {-o-transform: translate(0px,0px) rotate(180deg);}
100% {-o-transform: translate(75px,0px) rotate(-180deg);}
}

@-ms-keyframes bouncy1{0% {-ms-transform: translate(0px,0px) rotate(0deg);}
50% {-ms-transform: translate(0px,0px) rotate(180deg);}
100% {-ms-transform: translate(75px,0px) rotate(-180deg);}
}

@-webkit-keyframes bouncy1{0% {-webkit-transform: translate(0px,0px) rotate(0deg);}
50% {-webkit-transform: translate(0px,0px) rotate(180deg);}
100% {-webkit-transform: translate(75px,0px) rotate(-180deg);}
}

@-moz-keyframes bouncy1{0% {-moz-transform: translate(0px,0px) rotate(0deg);}
50% {-moz-transform: translate(0px,0px) rotate(180deg);}
100% {-moz-transform: translate(75px,0px) rotate(-180deg);}
}

@keyframes bouncy2{0% {transform: translateX(0px);}
50% {transform: translateX(-75px);}
100% {transform: translateX(-75px);}
}

@-o-keyframes bouncy2{0% {-o-transform: translateX(0px);}
50% {-o-transform: translateX(-75px);}
100% {-o-transform: translateX(-75px);}
}

@-ms-keyframes bouncy2{0% {-ms-transform: translateX(0px);}
50% {-ms-transform: translateX(-75px);}
100% {-ms-transform: translateX(-75px);}
}

@-webkit-keyframes bouncy2{0% {-webkit-transform: translateX(0px);}
50% {-webkit-transform: translateX(-75px);}
100% {-webkit-transform: translateX(-75px);}
}

@-moz-keyframes bouncy2{0% {-moz-transform: translateX(0px);}
50% {-moz-transform: translateX(-75px);}
100% {-moz-transform: translateX(-75px);}
}

@keyframes bouncy3{0% {transform: translateX(0px);}
50% {transform: translateX(0px);}
100% {transform: translateX(-75px);}
}

@-o-keyframes bouncy3{0% {-o-transform: translateX(0px);}
50% {-o-transform: translateX(0px);}
100% {-o-transform: translateX(-75px);}
}

@-ms-keyframes bouncy3{0% {-ms-transform: translateX(0px);}
50% {-ms-transform: translateX(0px);}
100% {-ms-transform: translateX(-75px);}
}

@-webkit-keyframes bouncy3{0% {-webkit-transform: translateX(0px);}
50% {-webkit-transform: translateX(0px);}
100% {-webkit-transform: translateX(-75px);}
}

@-moz-keyframes bouncy3{0% {-moz-transform: translateX(0px);}
50% {-moz-transform: translateX(0px);}
100% {-moz-transform: translateX(-75px);}
}