@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin,latin-ext);
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap&subset=latin,latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap&subset=latin,latin-ext');
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.ProjeList {
    width: 100%;
    list-style: none;
    text-align: center;
}
.ProjeList li {
    float: none;
    display: inline-block;
}sev

.Mobile{display: none;}
:focus { outline: none; }
.breadcrumb {
    height: 350px;
	position: relative;
	top:-70px;
	background-image: url("../img/Bread.png");
	    background-position: center;
	    border-bottom: 6px solid #404041;
}

.AltMenuPage{
	position: relative;
    top: 0px;
    background-color: #b0cb1f;
    text-align: center;
    background-image: url(../img/Shadow.png);
    background-position: top center;
    background-repeat: no-repeat;

}
#AltMenu a{
	
	color: #404041;
    /* padding-top: 20px; */
    font-weight: bold;
    line-height: 3em;
}
	
#Onload  {
   
	animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
.ContactBar {
    width: 90%;
    margin: 0 auto;
    height: 62px;
	background: #EDEDEF;
	background:
		linear-gradient(135deg, transparent 50px, #EDEDEF 0) top left,
		linear-gradient(225deg, transparent 50px, #EDEDEF 0) top right,
		linear-gradient(315deg, transparent 50px, #EDEDEF 0) bottom right,
		linear-gradient(45deg,  transparent 50px, #EDEDEF 0) bottom left;
	background-size: 51% 50%;
	background-repeat: no-repeat;
	
	
/*	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.75);*/
}

.Bottom{text-align: center;margin-bottom: 45px;}
.Box {
    width: 323px;
    height: 71px;
	display: inline-block;
	background-color: #b0cb1f;
	margin: 10px;
	color:#FFF;
	transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;

}
.Box:hover {

	background-color: #404041;
	color:#b0cb1f;

}
.Clear {
    clear: both;
}


.shadow {
    height: 38px;
    width: 100%;
	background-image:url("../img/Shadow.png");
    display: block;
    background-position: center;
    background-repeat: no-repeat;
}
.SliderContent {
    width: 100%;
    /*height: 100vh;*/
	background-color: #404041;
    /*top: -70px;*/
    position: relative;
}

.MainContent{
 	    width: 90%;
    max-width: 81em;
    margin: 0 auto;
    position: relative;
    z-index: 1905;
    padding: 1em 2em 0;
    text-align: center;
	top:-285px;
	



}

body {
	background: #ededef;
	padding: 140px 0 0%;
	font-weight: 400;
		font-family: 'Roboto', sans-serif;

	/*font-family: 'Lato', Arial, sans-serif;*/
}

/* Content style */
section {
    width: 90%;
    max-width: 80em;
    text-align: justify;
    padding: 1em 2em 0;
    margin: 0 auto;
    color: #404041;
	position: relative;
    /* line-height: 1.3; */
    /* font-size: 1.8em;*/
}

section p {
	font-family: 'Roboto', sans-serif;
	font-size: 2.1em;
	    padding-top: 55px;
		font-weight:900;
}
section div p{    font-size: 16px;}
div .JobsBox p {
    font-size: 15px;
    text-align: center;
    padding: 0;
	font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    border-bottom: 2px dotted #c7c7c7;
    line-height: 27px;
}
div .JobsBox img {
    margin: 3px auto;
}
div .JobsBox .BoxText {
    display: block;
    text-align: center;
	    font-weight: 100;
}


.RefBox {
	min-height: 81px;
    margin: 10px;
    display: block;
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(64,64,65,0.81);
	-moz-box-shadow: inset 0px 0px 10px 0px rgba(64,64,65,0.81);
	box-shadow:inset 0px 0px 10px 0px rgba(64,64,65,0.81);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #404041;
	background-color: #FBFBFB;
	overflow:hidden;
}

.RefBox img {
	width:100%;
}

.c-560 {
  /*  width: 560px;*/
    height: 280px;
}
.c-250{
	width: 250px;
height: 250px;
}





.scroll {
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	letter-spacing: 1px;
	font-weight: 700;
	font-size: 2em;
	line-height: 2;
	width: 10em;
	text-align: center;
	height: 2em;
	color: #e74c3c;
	background: #fff;
	font-style: normal;
	text-transform: uppercase;
	opacity: 0.8;
}

.scroll::after {
	display: block;
	content: '\2193';
	color: #fff;
	font-size: 3em;
	line-height: 1;
}

/* Header styles and animations */
.Logo{
	width: 313px;
	height: 140px;
	display: block;
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;

}
.BuyukLogo{
	background-image: url("../img/LogoBig.png");
		background-repeat: no-repeat;
	background-position: center;
}
.KucukLogo{
	background-image: url("../img/LogoSmall.png");
			background-repeat: no-repeat;

}
.ha-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0;
	z-index: 8550;
	font-family: 'Lato', sans-serif;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}


.ha-header-perspective {
	width: 100%;
	height: 100%;
	position: relative;
	-webkit-perspective: 1100px;
	-moz-perspective: 1100px;
	perspective: 1100px;
	-webkit-perspective-origin: 50% 0;
	-moz-perspective-origin: 50% 0;
	perspective-origin: 50% 0;
}

.ha-header-perspective > .Divd {
	background: #404041;
	background-image: url("../img/MenuBackground.png");
	background-repeat: no-repeat;
	text-align: center;
	padding: 0 7%;
	height: 50%;
	width: 100%;
	margin: 0 auto;
	position: relative;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	overflow: hidden;
	border-bottom: #b0cb1f 5px solid;
}

.ha-header-front {
	z-index: 2;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.ha-header-perspective .ha-header-bottom {
	background: #ddd;
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	z-index: 1;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	position: absolute;
	top: 0;
}

/* Justify inline-block elements (h1 on left side, nav on right)
.ha-header-perspective > div::after {
    content: '';
    display: inline-block;
    width: 100%;
	background-image: url("../img/Shadow.png")


} */
.ha-header-perspective > div::before {


}
/* Text styling */
.ha-header h1,
.ha-header h1::before,
.ha-header h1 span,
.ha-header nav,
.ha-header nav::before {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}

.ha-header h1 {
	font-weight: 300;
	font-size: 2.2em;
	margin: 0;
	padding: 0 1em 0 0;
	color: #2d383f;
	cursor: default;
	height: 100%;
	z-index: 1;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.ha-header h1::before,
.ha-header nav::before {
	content: '';
	height: 100%;
}

.ha-header h1::after {
	content: '';
	width: 100px;
	height: 96px;
	background: #fff;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	cursor: pointer;
	box-shadow: inset 0 8px #2d383f, inset 0 16px #fff, inset 0 24px #2d383f, inset 0 32px #fff, inset 0 40px #2d383f, inset 0 48px #fff, inset 0 56px #2d383f;
	opacity: 0;
	border: 20px solid #fff;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.ha-header nav {
	height: 100%;
}

.ha-header nav a {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
    padding: 0.2em 0.4em;
    margin: 0 0.4em 0;
    font-size: 0.8em;
    cursor: pointer;
    color: #FFF;
    outline: none;
    text-decoration: none;
	
}

.ha-header nav a:hover {
	color: #b0cb1f;
}

.ha-header nav .active {
	color: #b0cb1f;
}
.ha-header nav a:last-child {
    margin-right: 0;
}


/* Individual states */

.ha-header-large {
	height: 280px;
}

.ha-header-small {
	height: 140px;
}


.ha-header-show {
	height: 220px;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

.ha-header-show .ha-header-bottom {
	opacity: 0;
	-webkit-transition: top 0.5s, opacity 0s 0.5s;
	-moz-transition: top 0.5s, opacity 0s 0.5s;
	transition: top 0.5s, opacity 0s 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 0%;
}

.ha-header-subshow {
	height: 220px;
}

.ha-header-subshow .ha-header-bottom {
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 50%;
}

.ha-header-shrink {
	height: 220px;
	top: 50px;
	padding-left: 50px;
	padding-right: 50px;
}

.ha-header-shrink .ha-header-bottom {
	opacity: 0;
}

.ha-header-rotate {
	height: 220px;
	top: 50px;
	padding-left: 50px;
	padding-right: 50px;
}

.ha-header-rotate .ha-header-front {
	-webkit-transform: translateY(-100%) rotateX(90deg);
	-moz-transform: translateY(-100%) rotateX(90deg);
	transform: translateY(-100%) rotateX(90deg);
}

.ha-header-rotate .ha-header-bottom {
	top: 50%;
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: rotateX(0deg) translateY(-100%);
	-moz-transform: rotateX(0deg) translateY(-100%);
	transform: rotateX(0deg) translateY(-100%);
}

.ha-header-rotateBack {
	height: 220px;
	top: 50px;
	padding-left: 50px;
	padding-right: 50px;
}

.ha-header-rotateBack .ha-header-front {
	-webkit-transform: translateY(0%) rotateX(0deg);
	-moz-transform: translateY(0%) rotateX(0deg);
	transform: translateY(0%) rotateX(0deg);
}

.ha-header-rotateBack .ha-header-bottom {
	top: 50%;
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}

.ha-header-color {
	height: 140px;
}

.ha-header-color .ha-header-front,
.ha-header-color .ha-header-bottom {
	background: #f3796c;
}

.ha-header-color h1,
.ha-header-color nav a {
	color: #fff;
}

.ha-header-box {
	height: 192px;
	width: 100px;
	top: 20px;
	left: 20px;
}

.ha-header-box h1 {
	padding-left: 150px;
}

.ha-header-box h1,
.ha-header-box nav a {
	color: transparent;
}

.ha-header-box h1:after {
	opacity: 1;
}

.ha-header-box nav {
	opacity: 0;
}

.ha-header-fullscreen {
	height: 100%;
	opacity: 0.9;
}

.ha-header-fullscreen .ha-header-front {
	height: 100%;
}

.ha-header-fullscreen .ha-header-bottom {
	opacity: 0;
	-webkit-transition: top 0.5s, opacity 0s 0.5s;
	-moz-transition: top 0.5s, opacity 0s 0.5s;
	transition: top 0.5s, opacity 0s 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 50%;
	background: #f3796c;
}

.ha-header-subfullscreen {
	height: 100%;
	opacity: 0.9;
}

.ha-header-subfullscreen .ha-header-bottom {
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 50%;
	background: #f3796c;
}

.ha-header-subfullscreen .ha-header-bottom nav a {
	color: #fff;
}
.Text {
 text-align: center;
    font-family: 'Caveat', cursive;
    display: block;
    line-height: 1em;
    font-size: 1.4em;
}
.JobsBox {
 /*   width: 270px;*/
    margin: 22px;
    padding: 17px;
    height: 270px;
    display: block;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(184,184,184,1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(184,184,184,1);
	box-shadow: 0px 0px 5px 0px rgba(184,184,184,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #404041;
	transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
	background-image:url("../img/HoverBackground.png");
	

}
.JobsBox:hover {
background-image: url("../img/HoverBackground2.png");
	color: #fff;
	
	
}
.RefContent {
    padding: 40px;
    background-color: #404041;
	-webkit-box-shadow: 0px 0px 0px -5px rgba(64,64,65,0.62);
	-moz-box-shadow: 0px 0px 0px -5px rgba(64,64,65,0.62);
	box-shadow: 0px 0px 0px -5px rgba(64,64,65,0.62);
		transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}
.RefContent:hover{
	
	-webkit-box-shadow: 0px 0px 43px -5px rgba(64,64,65,0.62);
	-moz-box-shadow: 0px 0px 43px -5px rgba(64,64,65,0.62);
	box-shadow: 0px 0px 43px -5px rgba(64,64,65,0.62);
}
.LogoFooter {
	padding: 10px;
    width: 300px;
    height: 200px;
	float: left;
	background-image: url("../img/LogoFooter2.png");
	margin: 0px 20px;
			transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
	
}
.ContactFooter h1 {
    font-size: 1em;
	
}
.text {
    font-size: 1em;
}
.SocialList {
    margin: 0px auto;
    width: 300px;
	text-align: center;
}
.facebook {
    background-image:url("../img/Facebook.png");
			transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}
.twitter {
    background-image:url("../img/Twitter.png");
			transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}
.instagram {
    background-image:url("../img/Instagram.png");
			transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}
.whatsapp {
    background-image:url("../img/Whatsapp.png");
			transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}
.facebook:Hover {
    background-image:url("../img/FacebookHover.png")
}
.twitter:Hover {
    background-image:url("../img/TwitterHover.png")
}
.instagram:Hover {
    background-image:url("../img/InstagramHover.png")
}
.whatsapp:Hover {
    background-image:url("../img/WhatsappHover.png")
}
.SocialList li{
    float: left;
}

.SocialList li a {
    width: 50px;
    height: 50px;
    display: block;
	margin: 5px;
}




.LogoFooter:hover {
	background-image: url("../img/LogoFooter.png");

	
}
.ContactFooter {
	padding: 10px;
   width: 470px;
    height: 200px;
	float: left;
    margin: 0px 20px;
	color: #FFF;

}
.SocialMediaFooter {
	padding: 10px;
	margin: 0px 20px;
    width: 300px;
    height: 200px;
	float: left;
}
.topup{top:101vh;}
.topon{top:10px;}
.HeaderK{    position: absolute;
    display: block;
    z-index: -1;
	
	opacity: 0;
}
.cell            { cursor: cell; }

@media screen and (max-width: 65em) {
	body {
		font-size: 85%;
	}
}

@media screen and (max-width: 60em) {


	.ha-header-perspective > div,
	.ha-header nav {
		text-align: center;
	}

	.ha-header h1 {
		padding: 10px 0;
		height: 60%;
	}

	.ha-header .ha-header-bottom nav {
		padding: 40px 0px;
	}

	.ha-header nav {
		display: block;
		height: auto;
	}

}

@media screen and (max-width: 38em) {
	section {
		font-size: 1.3em;
	}

	.ha-header h1 {
		font-size: 2em;
	}

	.ha-header nav {
		font-size: 60%;
	}
}







.Box .IconKampanyalar {
	background-image:url(../img/KampanyalarIcon.png);
	display: block;
	float: left;
	height: 75px;
	width: 75px;
	margin-left: 10px;
}
.Box .IconStadium {
	background-image:url(../img/Stadium.png);
	display: block;
	float: left;
	height: 75px;
	width: 75px;
	margin-left: 10px;
}
.Box .IconWhatsapp {
	background-image:url(../img/WhatsappSlider.png);
	display: block;
	float: left;
	height: 75px;
	width: 75px;
margin-left: 10px;
}
.Box .BoxFont {
	text-decoration: none;
    font-size: 1em;
    line-height: 71px;
    font-weight: 900;
	display:block;
	float:left;
	padding-left:10px;
}
.container .MainContent .ContactBar a {
	display: inline-block;
	margin: 0px 30px;
}
.ContactBar a .fas {
	font-size: 1.5em;
    padding: 13px;
    background-color: #404041;
    color: #fff;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    margin: 6px;
    width: 50px;
}
.ContactBar a span {
color: #404041;
    font-weight: 400;
    margin-left: 15px;
}




/* Shine */
.RefList li a {
	position: relative;
	    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}
.RefList li a::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.RefList li a:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}
/* Gray Scale */
.RefList{text-align:center;
width:1000px;}
.RefList li{float:none;
display:inline-block;}

.RefList li a img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.RefList li a:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.AcikHavaBox a div span {
	position: absolute;
    bottom: -20px;
    left: 25%;
    z-index: -1;
    display: block;
    width: 50%;
    padding: 0;
    color: #fff;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
    font-size: 1.5em;
    font-weight: 900;
    background-color: #404041;
    line-height: 2em;
    border-radius: 40px;
}
.Outdoor {
width: 98%;
    height: 250px;
    margin: 6px;
    padding: 0;
    background: #000000;
    overflow: hidden;
	border-radius: 10px;
}
.Outdoor img {
width:100%;
opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;



	
}
.Outdoor:hover img {
	opacity: .5;
}
.Outdoor:hover + span {
	bottom: 26px;
	opacity: 1;
		z-index: 94;

}


/*Projeler*/





.ProjeList::after {
	content: '';
	clear: both;
	display: block;
}
.ProjeList div {
	position: relative;
	float: left;
	width: 100%;
	padding: 0;
}
.ProjeList div:first-child {
	margin-left: 0;
}
.ProjeList div span {
position: absolute;
    bottom: -20px;
    left: 5%;
    z-index: -1;
    display: block;
    width: 90%;
    padding: 0;
    color: #fff;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
    font-size: 1em;
    font-weight: 900;
    background-color: #404041;
    line-height: 2em;
    border-radius: 40px;
}
.ProjectMain {
	width: 96%;
    height: 300px;
    margin: 6px;
    padding: 0;
    background: #b0cb1f;
    overflow: hidden;
    border-radius: 10px;
}


.ProjectMain:hover+span {
		bottom: 26px;
	opacity: 1;
		z-index: 94;
}




/* Shine */
.hover14 .ProjectMain {
	position: relative;
}
.hover14 .ProjectMain::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover14 .ProjectMain:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}





input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
// Layout
.row {
  display:flex;
  .col {
    flex:1;
    &:last-child {
      margin-left: 1em;
    }
  }
}
/* Accordion styles */
.accordion a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
  color: #727271;
  font-size: 1.15rem;
  font-weight: 400;
  border-bottom: 1px solid #e5e5e5;
}

.accordion a:hover,
.accordion a:hover::after {
  cursor: pointer;
  color: #404041;
}

.accordion a:hover::after {
  border: 1px solid #404041;
}

.accordion a.active {
  color: #404041;
  border-bottom: 1px solid #404041;
}

.accordion a::after {
  font-family: 'Ionicons';
  content: '\f218';
  position: absolute;
  float: right;
  right: 1rem;
  font-size: 1rem;
  color: #7288a2;
  padding: 5px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #7288a2;
  text-align: center;
}

.accordion a.active::after {
  font-family: 'Ionicons';
  content: '\f209';
  color: #404041;
  border: 1px solid #404041;
}

.accordion .content2 {
  opacity: 0;
  padding: 0 1rem;
  max-height: 0;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  clear: both;
  -webkit-transition: all 0.2s ease 0.15s;
  -o-transition: all 0.2s ease 0.15s;
  transition: all 0.2s ease 0.15s;
}

.accordion .content2 p {
  font-size: 1rem;
  font-weight: 300;
}

.accordion .content2.active {
  opacity: 1;
  padding: 1rem;
  max-height: 100%;
  -webkit-transition: all 0.35s ease 0.15s;
  -o-transition: all 0.35s ease 0.15s;
  transition: all 0.35s ease 0.15s;
}
.PozisyonBaslik {
	    display: block;
    padding: 20px;
    border-left: 5px solid #b0cb1f;
    font-size: 1.3em;
    margin: 28px 0px;
    font-weight: bold;
    color: #404041;
}
.ContactLeft {
	margin: 5px;
	padding: 10px;
	float: left;
	width: 45%;
}
.ContactRight {
	margin: 5px;
	padding: 10px;
	float: right;
	width: 45%;
}
.contact {
	padding: 13px;
    background-color: #d6d6d875;
    border-radius: 3px;
    margin: 5px 15px;
    color: #545454;
    font-size: 25px;
	width:50px;
	text-align: center;
    vertical-align: middle;
}
.ContactLeft div {
	border-bottom: 1px solid #e2e2e4;
	 -webkit-transition: all 0.35s ease 0.15s;
  -o-transition: all 0.35s ease 0.15s;
  transition: all 0.35s ease 0.15s;


}
.ContactLeft div:hover{
	border-bottom: 1px solid #b0cb1f;

}.ContactLeft div a {
	color: #404041;
	text-decoration: none;
	 -webkit-transition: all 0.15s ease 0.15s;
  -o-transition: all 0.15s ease 0.15s;
  transition: all 0.15s ease 0.15s;
}
.ContactLeft div a:hover {
	color: #000;
	font-weight:900;
}
.map {
	height: 350px;
	width: 550px;
	border: 5px solid #FFF;
}
.Thin {
	FONT-WEIGHT: 200;
    font-size: 0.7em;
    color: #b9b9b969;
    margin: 14px;
    display: inline-block;
    text-shadow: 44px 30px 4px rgba(150, 150, 150, 0.5);

}



/* Opacity #2 
.column {
	margin: 15px 15px 0;
	padding: 0;
}
.column:last-child {
	padding-bottom: 60px;
}
.column::after {
	content: '';
	clear: both;
	display: block;
}
.column div {
	position: relative;
	float: left;
	width: 200px;
	height: 200px;
	margin: 15px;
	padding: 0;
}

.column div span {
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: -1;
	display: block;
	width: 200px;
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 0;
	text-shadow: 0px 0px 4px rgba(150, 150, 150, 1);
	    font-size: 1em;
    font-weight: 900;
}
figure {
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
    border-radius: 10px;
	
	
}
figure:hover+span {
	bottom: 50%;
	opacity: 1;
	z-index: 1;
}
.hover12 figure {
	background: #b0cb1f;
}
.hover12 figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover12 figure:hover img {
	opacity: .5;
}

*/
/*Outdoor*/





/* Shine
.hover12 figure {
	position: relative;
}
.hover12 figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover12 figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

 */
/* Accordion Kariyer */

.text a {
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	 -webkit-transition: all 0.15s ease 0.15s;
  -o-transition: all 0.15s ease 0.15s;
  transition: all 0.15s ease 0.15s;
  font-family: 'Lato', sans-serif;
}
.text a:hover {
	color: #b0cb1f;
}



/*Video*/
#header {
	position: relative;
    background-color: black;
    height: 45vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

#header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

#header .container {
  position: relative;
  z-index: 2;
}

#header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}


.display-3 {
    color: #ffffff38;
    /* line-height: 11em; */
    font-family: Lato;
    font-weight: 100;
    text-align: center;
    font-size: 3em;
    margin-top: 150px;
}
.BoxLeft {
	float: left;
	height: 300px;
	width: 33%;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #C8C8CE;
	    margin: 10px;
}
.BoxCenter {
	float: left;
	height: 300px;
	width: 30%;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #C8C8CE;
	    margin: 10px;
}.BoxRight {
	float: left;
	height: 300px;
	width: 30%;
	    margin: 10px;

}.BoxHeader {
color: #333;
    font-size: 1.4em;
    font-weight: 500;
    display: block;
    line-height: 2em;
    border-bottom: 2px dotted #cfcfd0;
    padding-top: 0px;
    width: 90%;
    padding-left: 11px;
}
.TextBox {
	text-align: left;
	display: block;
	padding: 15px;
	color: #404041;
}
.TextBox i {
	font-size: 4em;
    margin-right: 18px;
    color: #b5b5b9;
	vertical-align: middle;
}
.TextBox a {
	color: #404041;
	text-decoration:none;
		 -webkit-transition: all 0.15s ease 0.15s;
  -o-transition: all 0.15s ease 0.15s;
  transition: all 0.15s ease 0.15s;

}
.TextBox a:hover {
	font-weight: bold;
	color: #000;
}

/*Tabs*/
/*Tabs*/
.tabs {
	max-width: 100%;
	margin-top: 35px;
	margin-bottom: 35px;
	padding-top: 0;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
  
}
.tabs input {
  display: none;
}
.tabs label {
  display: inline-block;
  padding: 6px 0 6px 0;
  margin: 0 -2px;
  width: 16%; /* =100/tabs number */
  border-bottom: 1px solid #000;
  text-align: center;
}
.tabs label:hover {
  cursor: pointer;
}
.tabs input:checked + label {
  border: 1px solid #000;
  border-width: 1px 1px 0 1px;
}
.tabs #tab1:checked ~ .content #content1,
.tabs #tab2:checked ~ .content #content2,
.tabs #tab3:checked ~ .content #content3,
.tabs #tab4:checked ~ .content #content4,
.tabs #tab5:checked ~ .content #content5,
.tabs #tab6:checked ~ .content #content6{
  display: block;
  
}
.content{min-height: 380px;}
.tabs .content > div {
  display: none;
  padding-top: 20px;
  text-align: left;
  /*height: 192px;*/
  overflow: auto;

}

.tabs i {
	display: block;
    font-size: 3em;
    margin: 10px;
    color: #adadad;
}
.col3 {
	width: 30%;
    float: left;
    padding: 0 1.5%;
}
.col2 {
    width: 47%;
    float: left;
    padding: 0 1.5%;
}
.tabs h2 {

    font-size: 18px;
    color: #000;
    font-weight: 700;
    border-right: 1px solid #000;
    line-height: 50px;
}
.noBorder {
    border: none;
}.content p {
	  font-size: 13px;
    font-weight: 400;
	padding-top: 10px;
}
table.t_01 {width:90%; margin:0; border-collapse:separate; border-spacing:5px;}
table.t_01 th, td {text-align:left; padding:5px 3px;}
table.t_01 th {border-right:solid 1px #e9e9e9; color:#808080;}
table.t_02 {margin-left:22px;}

/*MobileMenuCss*/
/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

.Mobile{position: fixed;
    top: 0;
    z-index: 95000;}
#menuToggle
{
 display: block;
    position: relative;
    top: 25px;
    left: 29px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#MobileMenu
{
      position: absolute;
    width: 100vh;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    height: 110vh;
}

#MobileMenu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}
.Mobile{display: none;}
.LogoMobile{display: none}
.LogoMobile img{width: 100%;}
/*Mobile Responsive*/

@media screen and (max-width: 65em) {
	body {
		font-size: 85%;
	}
}

@media screen and (max-width: 60em) {


	.ha-header-perspective > div,
	.ha-header nav {
		text-align: center;
	}

	.ha-header h1 {
		padding: 10px 0;
		height: 60%;
	}

	.ha-header .ha-header-bottom nav {
		padding: 40px 0px;
	}

	.ha-header nav {
		display: block;
		height: auto;
	}

}

@media screen and (max-width: 38em) {
	section {
		font-size: 1.3em;
	}

	.ha-header h1 {
		font-size: 2em;
		display: none;
	}

	.ha-header nav {
		font-size: 60%;
	}
}





/*Smartphones (portrait and landscape) için ; */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

	#Menu {display: none;}
	.ha-header {height: 140px;}
	.SliderContent{top:-70px;}
	.MainContent {max-width: 81em;margin: -270px auto 0px auto;padding: 0em 0em;top: -151px;}
	.Box {width: 90px;height: 125px;background-color: #b0cb1f7a;vertical-align: middle;}
	.Box .IconKampanyalar {float: none;margin: auto;display: block;}
	.Box .IconStadium{float: none;margin: auto;display: block;}
	.Box .IconWhatsapp{float: none;margin: auto;display: block;}
	.Box .BoxFont {text-decoration: none;font-size: 0.9em;line-height: 22px;font-weight: 900;display: block; float: none;}
	.ContactBar {
    width: 98%;
    margin: 0 auto;
    height: 138px;
    background: #00000070;
   text-align: left;
	padding: 3px;}
	.container .MainContent .ContactBar a{text-align: center;}
	.ContactBar a .fas {font-size: 1.3em;padding: 7px;background-color: #404041;color: #fbfbfb;-webkit-border-radius: 0px;-moz-border-radius: 0px;
    border-radius: 0px; margin: 6px; width: 35px; vertical-align: middle;}
	.ContactBar a span {color: #fbfbfb;}
	section { width: 100%;text-align: center;padding: 1em 1em;}
	section p {font-size: 1.1em;}
	.Text{font-size: 1.2em;}
	.JobsBox { height: 320px;}
	.RefBox { min-height: 68px;}
	.RefContent { padding: 1px;}
	.ContactFooter {padding: 10px;width: 100%;margin: 0px auto;font-size: 0.7em;height: auto;}
	.SocialMediaFooter {padding: 10px;
    margin: 0px 0px;
    width: auto;
    float: none;}
	.LogoFooter{display: none;}
	.LogoMobile{width: 250px;
    display: block;
    float: right;
    height: 66px;}
	.RefList {width: 93%;padding-left: 0px;}
	.RefList li a img {width: 90px;}
	.ContactLeft {float: none; width: 100%; padding: 0px;font-size: 14px;}
	.ContactRight {float:none; width: 100%;}
	.map {width: auto;}
	.contact {padding: 7px;font-size: 18px;width: 35px;margin: 5px 4px;}
	.BoxLeft{float: none;height: 300px; width: auto; border-right-width: 0px;}
	.BoxRight{float: none;height: 300px; width: auto; border-right-width: 0px;}
	.BoxCenter{float: none;height: 300px; width: auto; border-right-width: 0px;}
	.slick-slide img {width: 100%;}
	.TextBox i {font-size: 3em; margin: 0px auto;display: block;width: 58px;}
	.TextBox a {text-align: center;display: block;}
	.ProjeContent img{    width: 100%;}
	.ProjeList{padding-left: 0;}
	.ProjeList li{width: 150px;height: 150px;}
	.ProjeList div{float: none;}
	.ProjectMain {height:150px;}
	.ProjeList div span {position: absolute;bottom: -1px;left: 5%;z-index: 2;display: block;width: 95%;padding: 0;color: #fff;text-decoration: none;text-align: center;    -webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;opacity: 1;font-size: 0.8em;font-weight: 400;background-color: #404041;line-height: 2em;border-radius: 0px;}
	.Mobile {
    display: block;
}
}
   
	

/*ÝPads (portrait and landscape) için ; */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#Menu {display: none;}
.Mobile {
    display: block;
}
}

/*Desktops and laptops için  */
@media only screen and (min-width : 1224px) {
/* CSS KODLARI BURAYA */
}