@keyframes floatup {
    from {
        margin-bottom:50px;
		transform: scale(0.8);
    }
    to {
        margin-bottom:0px;
		transform: scale(1);
    }
}

/*BASE*/

body{
	margin: 0px auto;
	font-family: arial;	
}



.clear{
	height: 60px;
}

.transition {transition: 0.2s}

.maxw{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 3;
	overflow: hidden;
}

.maxb{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 3;
}

.ml130a{margin-left: 120px}
.ml130b{margin-left: 130px}
.ml130c{margin-left: 130px}
.dn{display: block}

/*HEADER*/

#header {
	position: absolute;
	width: 100%;
	background: rgb(0,0,0);
	background: -moz-linear-gradient(180deg, rgba(0,0,0,0.835171568627451) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.835171568627451) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(180deg, rgba(0,0,0,0.835171568627451) 0%, rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
	overflow: auto;
	padding-top: 40px;	
	z-index: 10;
}

#header .logo{
	width: 140px;
	height: 56px;
	background-size: cover;
	background-position: center;
	background-image: url("../../images/logo.png");
	float: left;
	cursor: pointer;
}

#header a{
	width: 140px;
	font-size: 12pt;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	padding: 10px;
	float: right;
	color: white;
}
#header a:hover{
	color:#B29038;
}


#header .button1{
	width: 160px;
	font-size: 12pt;
	font-weight: 600;
	text-align: center;
	padding: 10px;
	background-color:#B29038 ;
	float: right;
	border-radius: 15px;
	cursor: pointer;
	color: white;
}

#header .button1:hover{
	background-color:#2B2B2B ;
	color: #B290385;
}

/*SLIDE*/

#slider{
	width: 100%;
	height: 600px;
	background-size: cover;
	background-position: center;
	/* background-image: url("../../images/slider/slide-26-09-2020.jpg"); */
}

#slider .click{
	width: 500px;
	position: relative;
	top:400px;
	margin: 0px auto;
	cursor: pointer;
	animation: floatup 1.5s;
}

#slider .imgtext{
	width: 600px;
	position: relative;
	top:300px;
	margin: 0px auto;
	animation: floatup 1.5s;
}

#slider .click:hover{
	transform: scale(1.2)
}

/*CONTACT BAR*/

#contact{
	margin-top: 4px;
	width: calc(100% - 20px);
	background-image: url("../../images/pattern2.png");
	padding: 10px;
	height: 50px;
	z-index: 10;
	position: fixed;
	bottom: 48px;
}

#contact .call{
	width: 96px;
	height: 96px;
	background-size: cover;
	background-position: center;
	background-image: url("../../images/call5.gif");
	float: left;
	position: relative;
	top: -28px;
	left: 0px;
	border-radius: 100%;
	border:4px solid white;
	z-index: 4;
}

#contact .call:hover{
	transform: scale(1.1);
	cursor: pointer;
}

#contact .number{
	width: 300px;
	color: white;
	font-weight: 600;
	font-size: 20pt;
	overflow: hidden;
}

#contact .hours{
	width: 340px;
	color: white;
	font-weight: 400;
	font-size: 12pt;
	overflow: hidden;
}

#contact .socials{
	float: right;
	width: 32px;
	top: -40px;
	position: relative;
	margin-left: 10px;
	cursor: pointer;
}
#contact .socials:hover{
	transform: scale(1.1)
}

#contact .features{
	float: left;
	width: 42px;
	top: -40px;
	/* position: relative; */
	margin-right: 10px;
}

#contact .featuresx{
	width: 160px;
	float: right;
	position: relative;
	top: -48px;
	margin-left: 40px;
}

#contact .fhead{
	/* width: 300px; */
	color: white;
	font-weight: 600;
	font-size: 20pt;
	overflow: hidden;
}

#contact .ftext{
	/* width: 300px; */
	color: white;
	font-weight: 400;
	font-size: 12pt;
	overflow: hidden;
}

/*DETAIL BAR*/

#detail{
	margin: 4px auto;
	width: calc(100% - 20px);
	/* max-width: 1200px; */
	background-image: url("../../images/pattern2.png");
	padding: 10px;
	height: 50px;
	z-index: -2;
}

#detail .call{
	width: 96px;
	height: 96px;
	background-size: cover;
	background-position: center;
	background-image: url("../../images/call3.gif");
	float: left;
	position: relative;
	top: -28px;
	left: 0px;
	border-radius: 100%;
	border:4px solid white;
	z-index: 4;
}



#detail .number{
	width: 300px;
	color: white;
	font-weight: 600;
	font-size: 20pt;
	overflow: hidden;
}

#detail .hours{
	width: 340px;
	color: white;
	font-weight: 400;
	font-size: 12pt;
	overflow: hidden;
}

#detail .socials{
	float: right;
	width: 32px;
	top: -40px;
	position: relative;
	margin-left: 10px;
	cursor: pointer;
}
#detail .socials:hover{
	transform: scale(1.1)
}

#detail .features{
	float: left;
	width: 42px;
	top: -40px;
	/* position: relative; */
	margin-right: 10px;
}

#detail .featuresx{
	width: 180px;
	float: right;
	position: relative;
	top: -48px;
	margin-left: 40px;
}

#detail .fhead{
	/* width: 300px; */
	color: white;
	font-weight: 600;
	font-size: 20pt;
	overflow: hidden;
}

#detail .ftext{
	/* width: 300px; */
	color: white;
	font-weight: 400;
	font-size: 12pt;
	overflow: hidden;
}


/*CONTENT 1*/ 

#content1{
	margin-top: 0px;
	background-size: cover;
	background-position: center;
	background-color:#DFDFDF;
	display: block;
	z-index: -2;
	/* clear: both; */
}

#content1 h2{
	text-align: center;
	margin: 0px auto;
}

#content2{
	margin-top: 4px;
	padding: 30px;
	width: calc(100% - 60px);
	/*height: 220px;*/
	background-size: cover;
	background-position: center;
	background-color:#DFDFDF ;
	background-image: url("../../images/content/content2.jpg");
}



#content1 .text{
	margin: 0px auto;
	width: 90%;
	max-width: 1200px;
	font-size: 14pt;
	font-weight: 400;
	line-height: 20pt;
	text-align: center;
	padding: 50px;
	color: black;
}

#content1 .button2{
	/*position: relative;
	top:400px;*/
	margin: 20px auto;
	width: 180px;
	font-size: 12pt;
	font-weight: 600;
	text-align: center;
	padding: 10px;
	cursor: pointer;
	border:2px solid black ;
	color: black ;
	opacity: 0.6;
}

#content1 .button2:hover{
	opacity: 1.0;
}

#location {
	overflow: hidden;
	width: 90%;
	max-width: 1180px;
	margin: 0px auto;
	padding: 20px 10px 0px 10px;
	display: block;
	background-size: cover;
	background-color: #F2F3F4;
	border-radius: 0px 0px 20px 0px;
	box-shadow: 2px 5px 11px #a2a2a2;
}

#gallery {
	overflow: hidden;
	width: calc(100% - 16px);
	max-width: 1184px;
	margin: 0px auto;
	padding: 8px;
	background-size: cover;
	background-color: #F2F3F4;
	border-radius: 0px 0px 20px 0px;
	box-shadow: 2px 5px 11px #a2a2a2;
}

#location .pack {
	width: calc(100% / 6);
	float: left;
	overflow: hidden;
}

#location img{
	width: 96px;
	margin: 0px auto;
	display: block;
}

#location h4{
	text-align: center;
	font-size: 12pt;
}

#headbar{
	width: 90%;
	max-width: 1180px;
	margin: 0px auto;
	padding: 10px;
	font-size: 14pt;
	background-color:#B29038;
	color: white;
	border-radius: 20px 0px 0px 0px;
	overflow: hidden;
	border: none;
	text-align: left;
}

.headicon{
	width: 30px;
	height: 30px;
	float:left;
}

#headbar .plus{
	width: 32px;
	height: 32px;
	margin: 0px auto;
	float: left;
}

#headbar h3{
	font-size: 14pt;
	width: 400px;
	float: left;
	margin: 0px auto;
	padding: 6px;
}

#clickbar{
	width: calc(90% + 20px);
	max-width: 1200px;
	margin: 0px auto;
	/* padding: 10px; */
}

#clickbar .plus{
	width: 32px;
	height: 32px;
	margin: 0px auto;
	float: left;
}


#clickbar h3{
	font-size:14pt;
	float: left;
	margin: 0px auto;
	padding: 6px;
}

iframe {
	height: 500px;
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	display: block;
	/*box-shadow: 2px 5px 11px #a2a2a2;*/
}

#mainpage {
	width: 100%;
	height: 100%;
	position: fixed;
	/* background-color: rgba(255,0,4,0.35); */
	z-index: 0;
}

#detailpage {

}

.plans {
	width: calc(100% / 4 - 16px);
	height: auto;
	margin: 8px;
	float:left;
}

/*AKORDÄ°YON*/

.accordion {

}

.active, .accordion:hover {
 
}

.panel {
  padding: 10px;
  display: none;
  background-color: white;
  overflow: hidden;
  border: 1px solid #ededed;
  border-radius: 0px 0px 10px 10px;
}


button {
	background-color: #B29038;
	color: white!important;
}

/*HEADUP*/

#headup{
	width: 100%;
	/* overflow: hidden; */
	height: 600px;
	background-size: cover;
	background-position: center;
	background-image: url("../../images/slider/projeler.jpg");
	/*transform: skewY(-10deg);*/
	position: relative;
	/*top: -150px;*/
	z-index: 2;
	border-radius: 0px 0px 40px 40px;
}

#headup h1{
	margin: 0px auto;
	text-align: center;
	color: white;
	font-size: 40pt;
	text-shadow: 2px 5px 11px #3B3B3B;
}

#headup h4{
	margin: 40px auto;
	text-align: center;
	color: white;
	font-size: 14pt;
	font-weight: 400;
	line-height: 24pt;
	text-shadow: 2px 5px 11px #3B3B3B;
}

/*FOOTER*/

#footer{
	background-color:#121212;
	margin: auto;
	padding: 15px;
	width: 100%;
	position: fixed;
	bottom: 0px;
	z-index: 1;
}

#footer .copyright{
	color: white;
	text-align: center;
	font-size: 10pt;
}

/*VÄ°DEO*/

.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 1;
	z-index: 100;
	scrool: hidden;
	
}
.overlay:target {
	visibility: visible;
	opacity: 1;
}

.video_close{
	position: fixed;
	bottom: 0px;
	width: calc(100% - 40px);
	padding: 20px;
	text-align: center;
	background-color:#606060 ;
	color:#E9E9E9;
	font-size: 16px;
}

.video_x{
	/* position: relative; */
	top: -281px;
	left: -30px;
	padding: 10px;
	text-align: center;
	background-color:#606060;
	color:#E9E9E9;
	font-size: 16px;
	z-index: 9999;
	cursor: pointer;
}

.video_x:hover{
	background-color:#B29038 ;
}

.video_close:hover{
	background-color:#E9E9E9 ;
	color:#B29038;
}

.content_video{
width: 100%;
}

.content_videoxx{
width: 100%;
height: auto;
position: absolute;
	top:0px;
	z-index: -2;

}

.video_inset{
	width: 90%;
	max-width: 800px;
	margin: auto;
	position: relative;
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}

/*PROJECT BOX*/
#projectbox{
	width: 1200px;
	margin: 20px auto;
	overflow: hidden;
	background-color:#292626 ;
	border-radius: 20px;
}

#projectbox .images{
	width: 50%;
	height: 270px;
	float: left;
}

#projectbox .area{
	padding: 20px;
	width: calc(50% - 40px);
	float: left;
	height: 230px;
	background-size: cover;
	background-image: url("../../images/pattern2.png");
	/*background-color: red;*/
}

#projectbox h2{
	/*background-color: #B29038;*/
	width: 100%;
	/* float: left; */
	/* padding: 0px; */
	text-align: left;
	font-size: 30pt;
	margin: 0px auto;
	color: white;
	font-weight: 800;
	line-height: normal;
	/* text-shadow: none; */
	/* border-radius: 6px; */
	overflow: hidden;	
}

#projectbox h4{
	/*background-color: #B29038;*/
	width: 200px;
	float: left;
	padding: 0px;
	text-align: left!important;
	font-size: 12pt;
	margin: 0px auto;
	color: #B29038;
	font-weight: 600;
	line-height: normal;
	text-shadow: none;
	border-radius: 6px;
	overflow: hidden;
}

#projectbox p{
	width: 500px;
	float: left;
	padding: 0px;
	text-align: justify;
	font-size: 15pt;
	margin-bottom: 25px;
	color: gainsboro;
	font-weight: 400;
	line-height: normal;
	text-shadow: none;
	border-radius: 6px;
	overflow: hidden;
}


#projectbox .button1{
	width: calc(100% - 20px);
	font-size: 12pt;
	font-weight: 600;
	text-align: center;
	padding: 10px;
	background-color:#B29038;
	float: left;
	border-radius: 15px;
	cursor: pointer;
	color: white;
	overflow: hidden;
	clear: both;
	display: block;
	/* margin-top: 12px; */
}

#projectbox .button1:hover{
	background-color:#2B2B2B ;
	color: #B29038;
}


/*RESPONSIVE*/ 

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

.mobil_off {display: none}
.ml130a{margin-left: 120px}
.ml130b{margin-left: 0px}	
.ml130c{margin-left: 0px}	
	
#header a{
	width: 120px;
	font-size: 16pt;
}	
#header .button1{
	width: 160px;
	font-size: 16pt;
	}
	
	
#detail .featuresx{
	width: 110px;
}
	
#projectbox .images{
	width: 100%;
	height: 270px;
	float: none;
}

#projectbox .area{
	padding: 20px;
	width: calc(100% - 40px);
	float: none;
	height: auto;
	background-size: cover;
	background-image: url("../../images/pattern2.png");
	/*background-color: red;*/
	overflow: hidden;
}

#projectbox{
	width: calc(100% - 20px);
	margin: 20px auto;
	overflow: hidden;
	background-color:#292626 ;
	border-radius: 20px;
}	
	
#projectbox p{
	width: 100%;
	float: left;
	padding: 0px;
	text-align: justify;
	font-size: 13pt;
	margin-bottom: 25px;
	color: gainsboro;
	font-weight: 400;
	line-height: normal;
	text-shadow: none;
	border-radius: 6px;
	overflow: hidden;
}

#projectbox h2{
	/*background-color: #B29038;*/
	width: 100%;
	/* float: left; */
	/* padding: 0px; */
	text-align: left;
	font-size: 30pt;
	margin: 0px auto;
	color: white;
	font-weight: 800;
	line-height: normal;
	/* text-shadow: none; */
	/* border-radius: 6px; */
	overflow: hidden;
}


#projectbox h4{
	/*background-color: #B29038;*/
	width: 239px;
	float: left;
	padding: 0px;
	text-align: left!important;
	font-size: 14pt;
	margin: 0px auto;
	color: #B29038;
	font-weight: 600;
	line-height: normal;
	text-shadow: none;
	border-radius: 6px;
	overflow: hidden;
}
	
}