@charset "utf-8";


body{
	overflow-x: hidden;
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:50px;
	background-color: #fff;
	text-rendering: optimizeLegibility;
 	 -webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	-webkit-transition: all 0.1s ease-in-out;

}




::-moz-selection { background: #8AC9E2; color:#fff; }
::selection { background: #8AC9E2;  color:#fff;}


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



.visible-img{

}

.visible-img-mob{
	display: none;
}

.header{
	-webkit-transition: all 0.2s ease-in-out;
	font-family: 'Poppins', sans-serif;
	margin-top:0px;
	width:80%;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
	height:auto;
	min-height:100px;
	margin-left:auto;
	margin-right:auto;
	position: fixed;
	top:0px;
	left:0px;
	right:0px;
	z-index: 99998;
	background-color: #fff;
}

.header.active{
	-webkit-transition: all 0.2s ease-in-out;
	font-family: 'Poppins', sans-serif;
	margin-top:0px;
	width:80%;
	padding:5px;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
	height:auto;
	min-height:60px;
	margin-left:auto;
	margin-right:auto;
	position: fixed;
	top:0px;
	left:0px;
	right:0px;
	z-index: 99998;
	background-color: #fff;
}

.logo{
	-webkit-transition: all 0.5s ease-in-out;
	width:331px;
	height:100px;
	float:left;
	background-image: url(../images/logo.svg);
	background-size: 100%;
}

.logo.active{
	-webkit-transition: all 0.5s ease-in-out;
	width:199px;
	height:60px;
	float:left;
	margin-left:10px;
	background-image: url(../images/logo.svg);
	background-size: 100%;
}


.banner{
	margin-top:150px;
	margin-left:auto;
	margin-right:auto;
	width:80%;
	height:80vh;
	z-index:1;
	overflow: hidden;
	position: relative;
}




.social{
	-webkit-transition: all 0.5s ease-in-out;
	width:auto;
	height:auto;
	min-height:40px;
	float:right;
	position: absolute;
	top:10px;
	right:20px;
	line-height:40px;
}


.social.active{
	-webkit-transition: all 0.5s ease-in-out;
	width:auto;
	height:auto;
	min-height:40px;
	float:right;
	position: absolute;
	top:-50px;
	right:20px;
	line-height:40px;
}


.socialimg{
	margin-top:7px;
	width:25px;
	height:25px;
	margin-left:10px;
	-webkit-transition: all 0.2s ease-in-out;
}

.socialimg:hover{
	margin-top:7px;
	opacity:0.4;
	width:25px;
	height:25px;
	margin-left:10px;
	-webkit-transition: all 0.2s ease-in-out;
}


.socialleft{
	width:auto;
	height:40px;
	line-height:40px;
	padding-right:45px;
	margin-right:35px;
	font-size:14px;
	float:left;
	font-weight: 500;
	font-family: 'Poppins', sans-serif;
	border-right: 1px solid #ccc;
}

.menu-frame{
	-webkit-transition: all 0.5s ease-in-out;
	margin-top:50px;
	width:auto;
	height:auto;
	min-height:50px;
	float:right;
}

.menu-frame.active{
	-webkit-transition: all 0.5s ease-in-out;
	margin-top:-10px;
	width:auto;
	height:auto;
	min-height:50px;
	float:right;
}




.wrapper{
	width:60%;
	height:auto;
	padding-top:30px;
	padding-bottom:30px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
}

.wrapper-left{
	width:50%;
	height:auto;
	float:left;
}

.wrapper-right{
	width:38%;
	height:600px;
	float:right;
	position: relative;
}


.wrapper-right-bg{
width:100%;
	height:600px;
	float:right;
	background-image: url(../images/home_1.jpg);
	background-size: auto 100%;
	background-position: center center;
	position: absolute;
	top:0px;
	left:0px;
	z-index: 150;	
	
}


.wrapper-right-bg-about{
width:100%;
	height:600px;
	float:right;
	background-image: url(../images/about-img.jpg);
	background-size: auto 100%;
	background-position: center center;
	position: absolute;
	top:0px;
	left:0px;
	z-index: 150;	
	
}


.wrapper-rightbgnokta{
	width:100%;
	height:600px;
	background-color: #f0f0f0;
	position: absolute;
	left:-15px;
	bottom:-15px;
	z-index:120;
}


.bluetitle{
	font-size:20px;
	color:#1088C3;
	letter-spacing: 1px;
	font-weight: 500;
	display: block;
}

.blue-maintitle{
	font-size:30px;
	color:#1088C3;
	letter-spacing: 1px;
	font-weight: 500;
	display: block;
}

.blacktitle{
	margin-top:20px;
	font-size: 40px;
	color:#000;
	font-weight: 600;
	line-height:50px;
	display: block;
}

.black-subtitle{
	margin-top:20px;
	font-size: 20px;
	color:#000;
	font-weight: 600;
	line-height:50px;
	display: block;
}


.content-banner{
	width:100%;
	height:400px;
	background-image: url(../images/content-banner.jpg);
	background-repeat: no-repeat;
	background-position: top;
	background-attachment: fixed;
}



.content-wrapper{
	width:70%;
	height:auto;
	padding-top:20px;
	padding-bottom:20px;
	margin: 50px auto;
}


.text{
	margin-top:30px;
	font-size:14px;
	color:#666;
	letter-spacing: 1px;
	line-height:30px;
}


p{
margin-top:20px;
	font-size:14px;
	color:#666;
	letter-spacing: 1px;
	line-height:30px;
	display: block;
}


.sinceboxframe{
	width:140px;
	height:140px;
	position: relative;
}

.sincebox{
	background-image: url(../images/about_Bg.svg);
	margin-top:30px;
	position: absolute;
	top:0px;
	left:0px;
	z-index:90;
	width:140px;
	height:140px;
}

.sincetext{
	width:250px;
	height:140px;
	position: absolute;
	top:30px;
	font-size:100px;
	line-height:140px;
	left:12px;
	z-index:98;
	font-weight: 600;
}


.sincesmalltext{
	width:200px;
	height:80px;
	position: absolute;
	right: -210px;
	top:60px;
	font-size:20px;
		color:#000;
	line-height:25px;
	
}


.project{
	margin-top:50px;
	width:80%;
	height:500px;
	margin-left:auto;
	margin-right:auto;
}

.projectbox{
	width:24%;
	height:600px;
	float:left;
	margin-left: 0.5%;
	margin-right: 0.5%;
	background-color: aquamarine;
}



.projecttitle{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	height:40px;
	color:#000;
	font-size:30px;
	line-height:40px;
	margin-top:100px;
	font-weight:600;
}



footer-link{
	display: block;
	margin-top: 10px;
	font-size: 13px;
	color: #555;
	font-weight: 400;
}


footer-link2{
	cursor: pointer;
	display: block;
	font-size: 13px;
	color: #555;
	font-weight: 400;
	text-decoration: none;
}

footer-link2:hover{
	cursor: pointer;
	display: block;
	font-size: 13px;
	color: #555;
	font-weight: 400;
	text-decoration: underline;
}


.urun-frame{
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
	border-radius: 30px;
}

.urun-frame:hover{
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
	box-shadow: 0px 0px 50px rgba(0,0,0,0.3);
	border-radius: 30px;
}

.urun-frame img{
	transform: scale(1);
	-webkit-transition: all 0.2s ease-in-out;
}

.urun-frame img:hover{
	transform: scale(1.07);
	-webkit-transition: all 0.6s ease-in-out;
}

.urun-frame-image-box{
	overflow:hidden;
	height: auto;
}

.lightimg{
	transform: scale(1);
	-webkit-transition: all 0.2s ease-in-out;
}

.lightimg:hover{
	transform: scale(1.06);
	-webkit-transition: all 0.2s ease-in-out;
}

urun-title{
	font-size: 16px;
	font-weight: 700;
	color: #000;
	display: block;
}

urun-subtitle{
	font-size: 14px;
	font-weight: 400;
	color: #888;
	display: block;
}




.ref-img{
	filter: blur(0px) grayscale(100%);
	opacity: 1;
	-webkit-transition: all 0.3s ease-in-out;
}

.ref-img:hover{
	filter: blur(0px) grayscale(0%);

	-webkit-transition: all 0.3s ease-in-out;
}


.clear{
	clear:both;
}


.space{
	width: 100%;
	height: 150px;
}


.back-button{
	-webkit-transition: all 0.3s ease-in-out;
	width: auto;
	height: auto;
	font-size: 17px;
	background-color: #1088c3;
	position: absolute;
	left: 0px;
	top: 0px;
	color: #fff;
	background-image: url(../images/back.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: auto 40%;
	padding: 10px 20px 10px 30px;
	cursor: pointer;
}

.back-button:hover{
	-webkit-transition: all 0.3s ease-in-out;
	width: auto;
	height: auto;
	font-size: 17px;
	background-color: #585a5f;
	position: absolute;
	left: 0px;
	top: 0px;
	color: #fff;
	background-image: url(../images/back.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: auto 40%;
	padding: 10px 20px 10px 30px;
	cursor: pointer;
}


}