/*!
 * @author Agit Çiçek
 * @version 1.0
 * Copyright © 2017
*/

@charset "UTF-8";

html,body{
	overflow-x: hidden
}

body{
	background: #eee;
	font-family: Raleway, sans-serif, arial;
	font-weight: 400;
	font-size: 15px
}

hr{display: block;border-color: rgba(0,0,0,.1);margin: 40px 0}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
	font-family: Raleway, sans-serif, arial!important;
	font-weight: 700
}

body{
	overflow: hidden;
	background-size: cover
}

body.homepage,
body.page{background: url(../img/page-bg.jpg) no-repeat center center}
body.service{background: url(../img/service-bg.jpg) no-repeat center center}
body.reference{background: url(../img/reference-bg.jpg) no-repeat center center}
body.gallery{background: url(../img/gallery-bg.jpg) no-repeat center center}
body.contact{background: url(../img/contact-bg.jpg) no-repeat center center}

.v-center{
	position: relative;
	top: 50%;
	transform: translateY(-50%)
}

.nav-toggle{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	background: #fff;
	padding: 20px 20px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	box-shadow: rgba(0,0,0,.1) 0 0 20px 0;
	display: none
}
.nav-toggle.active{
	left: calc(100% - 85px);
	background: transparent
}
.nav-toggle .icon{
  width: 40px;
  height: 20px;
  position: relative;
  display: block
}
.nav-toggle .icon .line{
  display: block;
  background: #000;
  width: 40px;
  height: 2px;
  position: absolute;
  left: 0;
  border-radius: 4px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s
}
.nav-toggle .icon .line.line-1{top: 0}
.nav-toggle .icon .line.line-2{top: 50%}
.nav-toggle .icon .line.line-3{top: 100%}

.nav-toggle.active .icon .line-1{
  transform: translateY(10px) translateX(0) rotate(45deg);
  -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
  -moz-transform: translateY(10px) translateX(0) rotate(45deg)
}
.nav-toggle.active .icon .line-2{opacity: 0}
.nav-toggle.active .icon .line-3{
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-10px) translateX(0) rotate(-45deg)
}

.sidebar,
.main{
	position: relative;
	height: 100vh;
	overflow-y: auto
}

.sidebar{
	background: #fff;
	text-align: center;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	/*box-shadow: inset rgba(0,0,0,.1) -10px 0 10px 0*/
}

.sidebar .logo{display: inline-block; margin-bottom: 50px}
.sidebar .logo img{
	display: inline-block;
	width: auto;
	height: auto;
	max-width: 100%;
}
.sidebar .primary-nav{
	margin: 0 20px;
	margin-bottom: 50px;
	padding: 20px;
	background: #fff;
	box-shadow: rgba(0,0,0,.2) 0 0 10px 0;
}
.sidebar .primary-nav ul{list-style-type: none;margin: 0;padding: 0}
.sidebar .primary-nav ul li{display: block}
.sidebar .primary-nav ul li a{
	display: block;
	position: relative;
	text-align: center;
	font-size: .95em;
	font-weight: 500;
	color: #000;
	text-decoration: none;
	white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis
}
.sidebar .primary-nav ul li.active a{color: #F9A11B}
.sidebar .primary-nav ul li a .icon{
	display: block;
	width: 19px;
	height: 19px;
	background: url(../img/sprite.png) no-repeat;
	margin: 0 auto;
	margin-bottom: 5px
}

.sidebar .primary-nav ul li a .icon.home{background-position: 0 0}
.sidebar .primary-nav ul li.active a .icon.home{background-position: -38px 0}

.sidebar .primary-nav ul li a .icon.corporate{background-position: 0 -19px}
.sidebar .primary-nav ul li.active a .icon.corporate{background-position: -38px -19px}

.sidebar .primary-nav ul li a .icon.gallery{background-position: 0 -38px}
.sidebar .primary-nav ul li.active a .icon.gallery{background-position: -38px -38px}

.sidebar .primary-nav ul li a .icon.service{background-position: -19px 0}
.sidebar .primary-nav ul li.active a .icon.service{background-position: -57px 0}

.sidebar .primary-nav ul li a .icon.reference{background-position: -19px -19px}
.sidebar .primary-nav ul li.active a .icon.reference{background-position: -57px -19px}

.sidebar .primary-nav ul li a .icon.contact{background-position: -19px -38px}
.sidebar .primary-nav ul li.active a .icon.contact{background-position: -57px -38px}

.sidebar .primary-nav ul li a:after{
	content: '';
	display: block;
	width: 72px;
	height: 1px;
	background: #D9D9D9;
	margin: 10px auto
}
.sidebar .primary-nav ul li:last-child a:after{display: none}

.sidebar .social-nav ul{list-style-type: none;margin: 0;padding: 0}
.sidebar .social-nav ul li{display: inline-block}
.sidebar .social-nav ul li a{
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	background: #000;
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
	color: #fff
}
.sidebar .social-nav ul li.facebook a{background-color: #3b5999}
.sidebar .social-nav ul li.twitter a{background-color: #55acee}
.sidebar .social-nav ul li.instagram a{background-color: #e4405f}
.sidebar .social-nav ul li.google-plus a{background-color: #dd4b39}
.sidebar .social-nav ul li.youtube a{background-color: #cd201f}
.sidebar .social-nav ul li.linkedin a{background-color: #0077B5}

.main{padding: 40px}

@media only screen and (max-width: 960px){

	.v-center{
		position: relative;
		top: inherit;
		transform: none
	}

	.nav-toggle{display: block}

	.sidebar,
	.main{width: 100%!important;max-width: 100%!important;flex: 1}

	.sidebar{
		position: fixed;
		z-index: 99;
		height: 100vh;
		overflow: auto;
		padding: 25px;
		left: -100%;
		box-shadow: none;
		opacity: 0
	}

	.sidebar.active{left: 0;opacity: 1}

	.sidebar .logo{margin-bottom: 30px}
	.sidebar .primary-nav{margin-bottom: 30px;background: transparent;box-shadow: none}
	.sidebar .primary-nav ul li a .icon{display: none}
	.sidebar .social-nav{margin-bottom: 30px}
}

.home-slider{
	position: relative;
	width: 100%;
	height: 400px;
	z-index: 3
}

.home-slider .swiper-container{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden
}

.home-slider .swiper-slide{
	display: block
}

.home-slider .slider-image{
	display: block;
	width: 100%;
	height: 400px;
	background: #000;
	overflow: hidden
}
.home-slider .slider-image img{
	width: 100%;
	height: auto;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	position: absolute;
	left: 50%;
	top: 50%
}

.home-slider .slider-content{
	padding: 15px
}
.home-slider .slider-content p{
	display: block;
	font-size: 1.8em;
	letter-spacing: .05em;
	color: #000;
	margin: 0;
	line-height: normal;
	margin-bottom: 20px;
	font-weight: 200
}
.home-slider .slider-content p strong{font-weight: 700}
.home-slider .slider-content a{
	display: inline-block;
	padding: 10px 20px;
	background: #F9A11B;
	text-decoration: none;
	color: #000;
	border-radius: 5px;
	font-size: .6em;
	letter-spacing: .2em;
	box-shadow: rgba(0,0,0,.05) 0 0 20px 0;
	font-weight: 700;
	text-transform: uppercase
}

@media only screen and (max-width: 480px){

	body.homepage .main{padding-bottom: 100px}
	
	.home-slider,
	.home-slider .swiper-container{height: auto}

	.home-slider{margin-top: 30px}

	.home-slider .v-center{margin-bottom: 10px}

	.home-slider .slider-image{height: 150px}
	.home-slider .slider-image img{width: auto;height: 100%;min-width: 100%}

	.home-slider .slider-content p{font-size: 1.3em;margin-bottom: 10px}

	.home-slider .row > *{padding: 0}
	.home-slider .slider-content{padding: 15px 0}

	
}

.slider-buttons{
	position: absolute;
	height: 20px;
	right: 15px;
	bottom: -50px;
	z-index: 3
}
.slider-buttons > *{
	cursor: pointer;
	display: inline-block;
	width: 26px;
	height: 20px;
	background: url(../img/sprite.png) no-repeat;
	margin: 0 6px
}
.slider-buttons .slider-prev{background-position: -76px 0}
.slider-buttons .slider-next{background-position: -102px 0}

.slider-buttons .swiper-button-disabled{opacity: .5}

/* Page Detail */
.page-detail{
	position: relative
}
.page-detail .page-header{text-align: right;margin-bottom: 80px}
.page-detail .page-header .page-title{
	display: inline-block;
	font-size: 1.5em;
	font-weight: 500;
	color: #fff;
	line-height: normal;
	padding-right: 15px;
	border-right: solid 5px #000
}
body.reference .page-detail .page-header .page-title{color: #256FA7}
body.contact .page-detail .page-header .page-title{color: #518D6D}

.page-detail .page-image{}
.page-detail .page-image img{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	box-shadow: rgba(0,0,0,.2) 0 0 20px 0
}

.page-detail .page-content{
	position: relative;
	text-align: center
}

.page-detail .page-content h1,
.page-detail .page-content h2,
.page-detail .page-content h3,
.page-detail .page-content h4,
.page-detail .page-content h5,
.page-detail .page-content h6,
.page-detail .page-content p{
	line-height: 1.8;
	margin: 0;
	padding: 0;
	margin-bottom: 20px
}

@media only screen and (max-width: 480px){
	.page-detail .page-header{margin-bottom: 30px}
	.page-detail .page-image{margin-bottom: 30px}
	.page-detail{padding-bottom: 40px}
	body.service .page-detail .page-header .page-title{color: #F9A11B}
}

.client-list .list{
  overflow: hidden
}
.client-list .list .item{
  float: left;
  text-align: center;
  background: #fff;
  border: 1px solid #ddd;
  position: relative;
  width: 25%;
  height: 140px
}
.client-list .list .item a{
  text-decoration: none
}
.client-list .list .item img{
  width: auto;
  max-width: 60%;
  max-height: 100px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}
.client-list .list .item:hover img{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%)
}

@media only screen and (max-width: 480px){
	.client-list .list .item{width: 100%;max-width: 100%;float: none;display: block;height: 100px}
}

.gmap{
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px
}
.gmap #map{
  width: 100%;
  height: 250px
}
.gmap iframe{
  width: 100%;
  height: 250px;
  border: none
}
.gmap h3{color: #518D6D;font-size: 1.5em;margin-top: 15px}

.contact-form strong{
  font-size: 1.5em;
  font-weight: 600;
  color: #222;
  text-transform: uppercase;
  display: block;
  margin-bottom: 30px;
  letter-spacing: 1px;
}
.contact-form{}
.contact-form form > div:nth-child(2) input{
  width: 100%
}
.contact-form form label{
  font-size: 1.1em;
  font-weight: 500;
  color: #333;
  display: block;
  cursor: pointer
}
.contact-form form label.error{
  font-size: .75em;
  font-weight: 700;
  color: #cc0000;
  margin-top: 10px
}
.contact-form form input,
.contact-form form textarea{
  font-weight: 400;
  color: #333;
  font-size: 1em;
  border: none;
  background: transparent;
  padding: 8px 0;
  outline: none;
  display: block;
  width: 95%;
  resize: none;
  margin-top: 15px;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  border-bottom: solid 1px #518D6D
}
.contact-form form input:focus,
.contact-form form textarea:focus{
  border-bottom-color: #518D6D
}
.contact-form form textarea{
  width: 100%
}
.contact-form form button{
  padding: 7px 30px;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1em;
  background-color: #518D6D;
  color: #fff;
  display: inline-block;
  border-radius: 30px;
  text-decoration: none;
  margin-top: 15px;
  text-transform: uppercase;
  border: 0 solid;
  outline: none;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  cursor: pointer
}
.contact-form form button:hover{
  background-color: #43765B
}

.contact-info{
	margin-top: 10px;
	background: #518D6D;
	padding: 30px 40px
}
.contact-info p{
	font-size: 1em;
	font-weight: 300;
	line-height: normal;
	margin: 0;
	margin-bottom: 15px;
	color: #fff
}
.contact-info p:last-child{margin-bottom: 0}
.contact-info p strong{color: rgba(255,255,255,.8);font-weight: 700;display: inline-block;padding-right: 5px}
.contact-info p a{color: #fff}

@media only screen and (max-width: 480px){
	.contact-info{padding: 20px}
}

.copyright{
	display: block;
	position: absolute;
	bottom: 20px;
	right: 15px;
	z-index: 9;
	writing-mode: tb-rl;
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .1em;
	color: rgba(0,0,0,.5)
}
.copyright a{color: rgba(0,0,0,.9);text-decoration: underline}

@media only screen and (max-width: 480px){
	.copyright{right: 15px;bottom: 30px;font-size: .5em;letter-spacing: .2em}
}

.gallery{position: relative}
.gallery .cat{}
.gallery .cat a{
	display: inline-block;
	padding: 10px 17px;
	color: #FE8A00;
	background: #fff;
	border-radius: 20px;
	margin: 3px 1px;
	text-decoration: none;
	line-height: normal;
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .05em;
	box-shadow: rgba(0,0,0,.1) 0 0 10px 0;
	transition: all .2s ease
}
.gallery .cat a.selected{background: #FE8A00;color: #fff}

.gallery .list{position: relative;margin-top: 30px}
.gallery .list .item{
	display: inline-block;
	width: 200px;
	height: 130px;
	box-shadow: rgba(0,0,0,.2) 0 0 40px 0;
	margin: 3px;
	border: solid 2px #fff;
	background: #FE8A00
}
.gallery .list .item img{
	width: 100%;
	height: 100%;
	transition: all .2s ease
}
.gallery .list .item:hover img{opacity: .4}

@media only screen and (max-width: 480px){
	.gallery .list .item{width: 100px;height: 70px}
}

.services{position: relative}
.services .item{
	background: rgba(255,255,255,.9);
	box-shadow: rgba(0,0,0,.2) 0 0 20px 0;
	padding: 30px
}
.services .item a{text-decoration: none;color: #000}
.services .item .title{
	font-size: 1.2em;
	font-weight: 700;
	color: #FE8A00;
	line-height: normal;
	margin-bottom: 15px
}
.services .item .image{
	margin-bottom: 15px
}
.services .item .image img{
	width: auto;
	height: auto;
	max-width: 100%
}
.services .item .summary{
	color: #555;
	font-size: .8em;
	letter-spacing: .05em;
	line-height: 2
}
@media only screen and (max-width: 480px){
	.services .item{margin-bottom: 20px}
}