@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@100;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap');

@import url(jqueryui.css);
@import url(../symbol/style.css);

/* 
	Author: Fatih Civelek
	font-family: 'Raleway', sans-serif;
	font-family: 'Big Shoulders Stencil Text', cursive;
	font-family: 'Oswald', sans-serif;
	font-family: 'Ubuntu', sans-serif;
	font-family: 'Cairo', sans-serif;
*/

@font-face {
	font-family: 'ElegantIcons';
	src: url('../symbol/ElegantIcons.eot');
	src: url('../symbol/ElegantIcons.eot?#iefix') format('embedded-opentype'), 
		 url('../symbol/ElegantIcons.woff') format('woff'), 
		 url('../symbol/ElegantIcons.ttf') format('truetype'), 
		 url('../symbol/ElegantIcons.svg#ElegantIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}
[data-icon]:before {
	font-family: 'ElegantIcons';
	content: attr(data-icon);
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body { height: 100%; }
html {
	font-family:sans-serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing:antialiased !important;
	-ms-overflow-style:scrollbar;
	overflow-y:scroll\9
}

*, *::after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

input[type="submit"], input[type="text"] { -webkit-appearance:none }
input[type=submit] { -webkit-appearance:none }
input, textarea, select { font-size:15px; color:#313131;font-family: 'Raleway', sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; margin:0; padding:0; }

b { font-weight: 800;}

a, img { border:none; outline:none; text-decoration:none;}
a { cursor:pointer; color: #e50f2e; }
.clear { clear:both; display:block; }
.clear.margin { height:30px; }

.ui-tooltip { width: auto; text-align: center; position: absolute; opacity: 1; background-color: rgba(0,0,0,.9); box-shadow: none; padding: 0; border:1px solid #444; color: #fff;}
.ui-tooltip-content { position: relative; padding:.26rem .46rem; font-weight: 600; }
@media (max-width:480px){
    .ui-tooltip { display: none!important;}
}

body {
	font-family: 'Raleway', sans-serif;
	width:100%;
	height:100%;
	margin:0;
	color:#222;
	padding:0;
	background:transparent;
	overflow-x:hidden;
	overflow-y:scroll;
}

body.overflow-hidden { overflow-y: scroll;}

/* HEADER */
header { 
	width:100%; 
	height: 75px;
	padding:0;  
	display:block; 
	-webkit-transition:.3s; 
	transition:.3s; 
	background-color: #111;
	position:fixed; 
	top:0; 
	left:0; 
	z-index:9999;
	border-bottom:1px solid #333;
}
header .wrapper { display: block; width:97%; margin:0 auto; position:relative;  }
@media (max-width: 1024px) {
	header { padding: 5px 0; }
}
.logo { 
	width:150px; 
	height:70px;
	display: block;
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    background-position:center center;
	background-size:100%; 
	transition: .2s;
	overflow: hidden;
	position: fixed;
	left: 50%;
	margin:0 0 0 -150px;
}
@media (max-width: 1024px) {
	.logo { width:200px; left: 10px; margin: 0;  }
}

@media (max-width: 480px) {
	.logo { width:175px;   }
}

@media (max-width: 320px) {
	.logo { width:125px;   }
}

.right-button { display:flex; flex-wrap: wrap; justify-content: flex-end; float: left; margin: 15px 0 0 0; transition: .2s;}
.right-button a {
	width: 40px;
	height:40px;
	line-height: 40px;
	overflow: hidden;
	padding:0;
	text-align: center;
	-webkit-transition: .5s; 
	transition: .5s;
	margin: 0 0 0 5px;
	font-size: 1rem;
	border-radius: 5px;
}
.right-button a:nth-child(3) { margin: 0 25px 0 5px;}
.right-button a:nth-child(8) { margin: 0 0 0 25px;}

.hotline { background-color: #666;color: #fff;}
.email {  background-color: #666; color: #fff;}

.whatsapp { background: url(../svg/whatsapp.svg) center center no-repeat; background-size:20px; background-color: #43a71b;}

.search { background-color: #e50f2e;}
.search:before { font-family:"ElegantIcons"; content: "\55"; color: #fff;}
.search.search_hover:before { content: "\4d"; font-size: 1.7rem; }

@media (max-width: 1024px) {
	.right-button {float: right;}
	.right-button a:nth-child(3) { margin: 0 0 0 5px;}
	.facebook, .instagram { display: none;}
	.whatsapp { display: none; }
}

/* Search */
.search_form { 
	display: none;
	width: 350px;
	height: auto; 
	margin:0; 
	padding: 25px;
	border-radius: 5px; 
	background-color: #fff; 
	border: 1px solid #dedede;
	position: absolute;
	top: 90px; 
	left: 0;
	overflow: hidden; 
	transition: .2s;
}
.search_input { 
	font-size: .9rem; 
	background: #fff; 
	width: 80%;
	height: 40px; 
	line-height: 40px;  
	margin: 0; 
	padding: 0 15px; 
	color: #111; 
	border: 1px solid #dedede; 
	display: block;
	float: left;
}
.search_submit {
	display:block;
	width: 20%;
	height:40px;
	line-height: 40px;
	padding: 0;
	text-align:center;
	margin:0;
	float: right;
	border-radius:3px;
	border: 0px solid #111; 
    background-repeat: no-repeat;
    background-position: center;
	background-size: 13px;
	background-color: #e50f2e;
	background-image: url(../svg/view.svg); 
	color: #111; 
	text-indent: -99999px;
	cursor: pointer;
}

.toggleMenu {
	display:none;
	background-color:#e50f2e;
	background-image: url(../svg/menu.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:15px;
}
.toggleMenu.toogle_hover { background-image:url(../svg/menu_close.svg); }

/* NAV */
nav {
	margin:20px 0 0 0; 
	padding:0;
	display:block;
	position:relative;
	z-index:250;
	float: right;
}
.nav { margin:0; padding:0; list-style:none; position:relative; z-index:250; }
.nav:before, .nav:after { content:""; display: table;}
.nav:after { clear: both; }

.nav ul { list-style: none; width: auto; min-width:200px;}
.nav a { 
	display: block; 
	color:#eee; 
	font-size:.85rem;
	font-weight:700; 
	padding:0 5px;
	margin:0 10px; 
	height: 30px;
	line-height: 30px;
	text-align:center;
	transition: .1s;
	-webkit-transition:.1s;
	position: relative;
}
.nav > li { display:inline-block; padding:0; margin:0; position: relative;}
.nav > li:hover > a {color:#e50f2e; }

.nav>li>a.parent:before { font-family: ElegantIcons; content:"\33"; margin:0; color: #fff; position: absolute; right: -10px; top: 0px;  } 
.nav>li>a::after{content:'';display:block;width:0;height:5px;background:#e50f2e;transition:width .3s; position: relative; top: 0px;}
.nav>li:hover>a::after{width:100%;transition:width .3s}
.nav>li>a.active::after{width:100%;transition:width .3s}

.nav li ul { position: absolute; max-height:0; overflow:hidden; margin:0; padding:0; padding-top: 10px; transition:.3s; transform:scale(.9);}

.nav li:hover > ul { max-height:1000px; transform:scale(1); }
.nav li li:hover ul {  max-height:1000px; top:0; }

.nav li ul li {border:none; margin:0; padding:0; position:relative; }
.nav li ul li a { 
	display: block; 
	background: #222; 
	font-size:.8rem;
	color:#eee; 
	padding:8px 5px;
	height:auto; 
	line-height:normal; 
	text-align:left;
	font-weight:500;
	border-bottom: 1px solid #333;
}
.nav li ul li:last-child a { border-bottom: 0; }
.nav li ul li a:hover,
.nav li ul li:hover > a {background-color: #e50f2e; color:#333; }

@media (max-width: 1024px) {
	nav{display:block;overflow:hidden;margin:0;padding:0}
	.nav{width:250px;height:100%;min-height:100%;margin:0;padding:0;position:fixed;display:none;overflow:hidden;z-index:9999999;top:0;left:0;background-color:#222;overflow-y:auto;border-right:1px solid #333}
	.nav>li{width:100%;display:block;padding:0;margin:0;position:relative;border-bottom:1px solid #333}
	.nav>li a{display:block;font-size:.9rem;height:50px;padding:0 15px; margin: 0; line-height:50px;text-align:left;font-weight:700;transition:.3s;-webkit-transition:.3s;border-bottom:0}
	.nav li:hover>a{border:none!important}
	.nav>li>a.parent:before { right: 15px;}
	.nav li ul{list-style:none;width:100%;position:static;margin:0;padding:0}
	.nav li ul li{border:none;margin:0;padding:0;position:relative}
	.nav li ul li a{padding:0 15px;line-height:40px;font-weight:500;height:auto;font-size:.8rem; color: #222; border-bottom:0;background: #e50f2e; }
	.nav li ul li li a{font-weight:300}
	.nav li ul li a:hover,.nav li ul li:hover>a{color:#222;border:none!important}
	.nav li li.hover ul,
	.nav li.hover > ul{position:static}
	.nav li.hover > ul { max-height:1000px; transform:scale(1); }
	.nav li li.hover ul {  max-height:1000px; top:0; }
}

/* PARALLAX */
.parallax { width: 100%; height: 100%; }
.parallax.overflow, .parallax.overflow .parallax-wrapper { height: auto; min-height: 100%; }
.parallax.background { background-repeat: no-repeat; background-position: 50% 50%; background-position: 50% 50%\9 !important; }
.parallax-wrapper { display: block; width: 100%; height: 100%; }
.parallax-scroll { display:block; position:relative; }

.parallax.normal-height { height:auto; padding:0; }
.parallax.banner-height { height:auto; position: relative; top: 0; margin:0; }
.parallax.heading-height { height:auto; margin:75px 0 0 0; background-color: #eee; border-bottom: 1px solid #dedede; }
.parallax.news-height { height:auto; padding:25px 0 75px 0; overflow: hidden; display: none;  }
.parallax.references-height { height:auto; padding: 50px 0 120px 0; background-color: #eee; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede;  }

.carousel { width:100%; display:block; margin:0; padding:0; font-weight:600; }
.carousel .owl-item { margin:0!important; padding:0!important; display:block; float:left; transition:.2s; }
.carousel .owl-item img { width:100%; vertical-align:bottom }
.carousel .owl-next,.carousel .owl-prev { background-color:transparent!important; color:#333!important }
.carousel .owl-next { right:0px!important }
.carousel .owl-prev { left:0px!important }
.carousel .owl-controls { z-index: 0!important; }

.news-carousel{ margin:0; padding: 0; list-style: none;}
.news-carousel .owl-item{padding:0; border: 0; color: #fff; }
.news-carousel .owl-item img{ width: 100%; border-radius: 2px;}
.news-carousel .owl-item iframe{ border-radius: 2px; vertical-align: bottom;}
.news-carousel .owl-controls{top:35% !important;}
.news-carousel p { font-size: 1.4rem; font-weight: 600; margin:10px 0; padding: 0 20px; }
.news-carousel span { display: block; font-size: 1rem; font-weight: 300; line-height: 100%; padding: 0 20px; margin: 0 0 25px 0; }
.news-carousel .owl-controls { top: 38%!important; }
.news-carousel .owl-next,.news-carousel .owl-prev{color:#fff!important}
.news-carousel .owl-next{right:-50px!important}
.news-carousel .owl-prev{left:-50px!important}

.references-carousel .owl-item{padding:0 15px!important;  }
.references-carousel .owl-item img{ border:1px solid #eee; border-radius: 2px;}
.references-carousel .owl-controls { top: 25%!important; }
.references-carousel .owl-next { right:-50px!important }
.references-carousel .owl-prev { left:-50px!important }

@media (max-width:1024px){
	.news-carousel { margin:0px 0; padding: 0; list-style: none; }
	.news-carousel .owl-controls { top:35% !important; }
	.news-carousel p { font-size: 1.2rem; font-weight: 600; }
}

.banner-carousel .owl-item { overflow: hidden; height: 100vh; }
.banner-carousel .owl-item img { animation:zoomInout 8s infinite; filter: brightness(150%); }
.banner-carousel .owl-next,
.banner-carousel .owl-prev { background-color: #e50f2e!important; color:#fff!important; width: 45px!important; height: 45px!important; padding: 0!important; margin: 0!important; font-size: 1.2rem!important; line-height: 45px!important; border-radius: 5px; }
.banner-carousel .owl-next { right:auto!important; left:150px!important }
.banner-carousel .owl-prev { left:95px!important }
.banner-carousel .owl-controls { top: 75%!important; }
@media (max-width: 1024px) {
	.banner-carousel .owl-next { right:auto!important; left:90px!important }
	.banner-carousel .owl-prev { left:20px!important }
	.banner-carousel .owl-controls { top: 80%!important; }
}

@keyframes zoomInout{
	0%{transform:scale(1)}
	50%{transform:scale(1.2)}
	100%{transform:scale(1)}
}

.banner-desk { display: block;}
.banner-mobile { display: none;}
@media (max-width: 1024px) {
	.banner-desk { display: none;}
	.banner-mobile { display: block;}
}

.banner-title { 
	width:100%; 
	height: 100%; 
	margin:0; 
	padding:13% 5%; 
	text-align:left; 
	position: absolute; 
	top:0; 
	left:0; 
	z-index: 9999; 
	background-color: rgba(35, 136, 207, 0.8); 
	background-color: rgba(0, 0, 0, 0.8);
}
.banner-title .title,.banner-title .desc{ width: 700px; margin:0; padding:0; line-height: 100%; text-shadow: 0 0 2px #111; color:#fff; opacity: 0;  }
.banner-title .title { font-size:4rem; font-weight:300; animation:title 5s infinite; }
.banner-title .desc { width: 500px; margin: 25px 0 0 0; font-size:1.2rem; font-weight:300; animation:desc 5s infinite; }
.banner-title .link { 
	display: block;
	width:150px; 
	margin:25px 0 0 0;
	padding:15px 10px; 
	background-color:#e50f2e; 
	color:#fff;  
	font-weight:700;
	font-size:1rem;
	text-align:center;
	border-radius: 5px;
	overflow: hidden; 
	animation:link 5s infinite;
}
@media (max-width:1024px) {
	.banner-title {  padding:38% 5%;  }
	.banner-title .title,.banner-title .desc{ width: 100%; }
	.banner-title .title { font-size:2.2rem; }
	.banner-title .desc { width: 100%; font-size:1.2rem;  }

}
@keyframes title{
	0%{opacity:1;transform: scaleY(0);}
	10%{opacity:1;transform: scaleY(1)}
	20%{opacity:1}
	30%{opacity:1}
	40%{opacity:1}
	50%{opacity:1}
	60%{opacity:1}
	70%{opacity:1}
	80%{opacity:1}
	90%{opacity:1;}
	95%{opacity:1;transform: scaleY(1);}
	100%{opacity:0; transform: scaleY(0);}
}
@keyframes desc{
	0%{opacity:1;transform: scaleY(0);}
	10%{opacity:1;transform: scaleY(1)}
	20%{opacity:1}
	30%{opacity:1}
	40%{opacity:1}
	50%{opacity:1}
	60%{opacity:1}
	70%{opacity:1}
	80%{opacity:1}
	90%{opacity:1;}
	95%{opacity:1;transform: scaleY(1);}
	100%{opacity:0; transform: scaleY(0);}
}

@keyframes link{
	0%{opacity:1;transform: scaleY(0);}
	10%{opacity:1;transform: scaleY(1)}
	20%{opacity:1}
	30%{opacity:1}
	40%{opacity:1}
	50%{opacity:1}
	60%{opacity:1}
	70%{opacity:1}
	80%{opacity:1}
	90%{opacity:1;}
	95%{opacity:1;transform: scaleY(1);}
	100%{opacity:0; transform: scaleY(0);}
}


.scrollbutton { 
	position:absolute; 
	width:100%; 
	height:50px; 
	bottom:12%; 
	z-index:2; 
	-webkit-transition:.3s; 
	transition:.3s; 
	-webkit-transform:scale(1); 
	transform:scale(1); 
    display: none;
}
.scrollbutton a.scrolldown {
    width:100px;
	height: 150px;
	margin:0 auto;
	text-align:center;
	overflow:hidden;
	display:block;
	padding: 0;
	background-image:url(../svg/down-arrow.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:40px;
	background-color: #e50f2e;
	animation: arrowDown .8s infinite;
	transform:translateY(0px);
}
.scrollbutton.sticky { transform:scale(0); }
@media (max-width:1024px) {
	.scrollbutton {bottom:5%;  }
	.scrollbutton a.scrolldown {
		width:50px;
		height: 50px;
		background-size:30px;
	}
}
@keyframes arrowDown { 
	0% { transform:translateY(20px); opacity:.3;} 
	50% {transform:translateY(10px); opacity:.5; } 
	100% {transform:translateY(0px); opacity:1; } 
}


.readmore { 
	display:inline-block; 
	width:auto; 
	height:50px; 
	line-height:50px; 
	margin:20px 0 0 0;
	padding:0 15px 0 0; 
	background-color:#222; 
	color:#fff;  
	font-weight:700;
	font-size:1.1rem;
	position:relative;
	text-align:center;
	-webkit-transition:.4s;
	transition:.4s;
	border-radius: 5px;
	overflow: hidden;
}
.readmore.align-center { margin: 25px auto 50px auto; display: block; width: 250px; }
.readmore:hover { background-color:#222; color:#fff;  }
.readmore span { 
	margin:0 15px 0 0;
	float: left;
	font-weight:500;
	width:50px;
	height:50px;
	text-align:center;
	display:block;
	overflow:hidden;
	position: relative;
	color:#fff;
	transition:.3s;
	background-color: #222;
}
.readmore:hover span {background-color: #000;  }
.readmore span:before {font-family:"ElegantIcons"; content:"\35"; transition:.3s; width: 100%; height: 100%;position:absolute; left: 0; text-align: center; }
.readmore:hover span:before { color: #fff; }

.heading { width:1200px; padding:25px 0; margin:0 auto; display:block; font-weight: 700; }
.heading * { margin: 0; padding: 0; font-size: 1.6rem; }

.page { width:1200px; padding: 25px 0; margin:0 auto; display:block; font-size: 1rem; }
@media (max-width: 1024px) {
	.page { width:90%; padding: 25px 0; }
}

.company { width:100%; margin:0 auto 0 auto;  display:flex; flex-wrap:nowrap; justify-content:space-between; color:#fff; }
.company-left { width:50%; padding:150px 75px; float:left; display:block; background-color: #e50f2e; }
.company-left h1 { font-size:3rem; line-height: 110%; margin:0; padding:0; }
.company-left h2 { font-size: 1.1rem; font-weight:300; }
.company-right { width:50%; float:right; overflow: hidden; display:block; background-repeat: no-repeat; background-size: cover; background-position: center center; border: 0px solid #fff; }
@media (max-width: 1440px) {
	.company { width:100%; }
}
@media (max-width: 1024px) {
	.company { width:100%; margin:0 auto; flex-wrap:wrap; }
	.company-left { width:100%; padding:25px; }
	.company-left h1 { font-size:2.4rem; }
	.company-left h2 { font-size: 1.2rem; }
	.company-right { width:100%; height: 300px; border: 0; }
}

/* INFO */
.info {width:100%; margin:50px 0 0 0; padding:0; display: flex; justify-content: space-between; }
.info .cb { width:31.7%; margin:0; padding:20px; display:block; text-align:center; border: 1px solid #eee; }

.cb .photo { width: 100px; height: 100px; display: block; margin: 15px auto; padding: 20px; border-radius: 5px; overflow: hidden; background-color: #222;}
.cb .photo img { height: 50px; vertical-align: bottom;}
.cb p { padding:0; margin: 0; display:block; font-weight:700; font-size:1.3rem; color: #111; }
.cb span { font-size: 1rem; display: block; }
@media (max-width:1024px){
    .info { padding:0; }
	.cb { width:100%; background:#f7f7f7; padding:25px; margin:0 0 15px 0;  border: 1px solid #eee; }
    .cb p { width:100%; padding:5px 0 0 0; margin: 0; font-size:1.4rem; }

}

/* Headline */
.headline { width:100%; margin:50px auto; display:block; text-align:center; color:#111;}
.headline.align-left { text-align:left;}
.headline.align-right { text-align:right;}
.headline.white { color: #fff;}

.headline h3,
.headline h4,
.headline h5,
.headline h6{ margin:0; padding:0; line-height: 110%;  }
.headline h3 { font-size:2.6rem; font-weight:700; }
.headline h3:before { content: ""; width: 100px; height: 5px; margin: 20px auto; background-color: #1877f2; display: block; }

.headline h4 { font-size:1.1rem; width:75%; margin:10px auto; font-weight:300; }
.headline h5 { font-size:1.6rem; font-weight:700; }
.headline h6 { font-size:1.1rem; margin:10px auto; font-weight:300; }

@media (max-width: 1024px) {
	.headline { width:100%;}
	.headline h3 { font-size:2rem;  }
	.headline h4 { font-size:1rem; width:75%; margin:10px auto; font-weight:300; }
	.headline h5 { font-size:1.4rem; }
	.headline h6 { font-size:1rem; margin:10px auto; font-weight:300; }
}

/* Blocks */
.blocks { margin:0 0 50px 0; display:flex; flex-wrap:wrap; justify-content:space-between; }
.block { 
	display:block; 
	width:31%; 
	overflow:hidden; 
	margin:0 0 4% 0; 
	position:relative; 
	z-index: 2; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;  
	box-sizing: border-box;  
	color: #fff;
	text-align: center;
}
.block a { display:block; width:100%; position: relative; border: 1px solid #dedede; }
.block a::before {
	content: "";
	left: 0; 
	top: 0; 
	width: 100%;  
	height: 0;
	position: absolute; 
	background: url(../svg/view.svg) center center no-repeat;
	background-size:40px;
	background-color: rgba(0, 0, 0, 0.5);
	transition: .3s;
	z-index: 0;
}
.block:hover a:before {height: 100%; }

.block a img {  width:100%; vertical-align:bottom;  }
.block p {  color: #111; padding: 0px; font-size: 1.4rem; line-height: 110%; }
.block span { display: block; margin: 5px 0 0 0; color: #777; font-size: 1rem; }

@media (max-width: 1024px) {
	.blocks { margin:25px 0; display:flex; flex-wrap:wrap; justify-content:space-between; }
	.block {  width:100%;  margin:0 0 8% 0; }		
	.block p {  color: #111; padding: 0px; font-size: 1.8rem; line-height: 140%; }
	.block span { display: block; margin: 5px 0 0 0; color: #777; font-size: 1rem; }
}

/* Products */
.products { margin:0; display:flex; flex-wrap:wrap; }
.product { 
	display:block; 
	width:25%; 
	overflow:hidden; 
	margin:0; 
	position:relative; 
	z-index: 2; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;  
	box-sizing: border-box;  
	color: #fff;
}
.product a { display:block; width:100%; border: 1px solid #dedede; position: relative; }
.product a::before {
	content: "";
	left: 0; 
	top: 0; 
	width: 100%;  
	height: 0;
	position: absolute; 
	background: url(../images/svg/view.svg) center center no-repeat;
	background-size:40px;
	background-color: rgba(0, 0, 0, 0.5);
	transition: .3s;
	z-index: 0;
}
.product:hover a:before {height: 100%; }
.product a img {  width:100%; vertical-align:bottom;  }
.product p {  color: #111; padding: 0; font-weight: 600; font-size: 1rem; position: relative; z-index: 1; line-height: 120%; text-align: center; }
@media (max-width: 1024px) {
	.products { flex-wrap:wrap; }
	.product { width:100%; }
}

/* Galeri */
.galeri{display:block;overflow:hidden;margin:35px 0}
.galeri a{width:22%;float:left;margin:0 2% 2% 0;display:block;border:1px solid #eee}
.galeri a:nth-child(4n+0){float:right;margin:0 0 2% 0}
.galeri a img{width:100%;vertical-align:bottom}
@media (max-width:1024px){
	.galeri{display:flex; flex-wrap: wrap; justify-content: space-between; overflow:hidden;margin:25px 0}
	.galeri a{width:49%;float:left;margin:0 0 2% 0;}
}

.downloads{width:100%;display:flex;flex-wrap:wrap}
.downloads a{width:31%;position:relative;overflow:hidden;margin:0 2% 2% 0;padding:25px;display:block;float:left;border:1px solid #dedede;color:#444;background-color:#fff;background-image:url(../images/bg.jpg);background-size:cover}
.downloads a:nth-child(3){float:right;margin:0 0 2% 0}
.downloads a h3{width:100%;padding:0;margin:0;display:block;font-size:1.4rem}
.downloads a p{width:100%;padding:0;margin:0;display:block;font-size:1rem;line-height:100%}
.downloads a span{width:75px;height:75px;line-height:75px;display:block;margin:0 3% 0 0;float:left;border:1px solid #eee;border-radius:0;color:#fff;font-size:2rem;overflow:hidden;position:relative;background-color:#e50f2e;text-align:center;transition:.3s}
.downloads a:hover span{transform:scale(.9) rotate(90deg);border-radius:50%}
.downloads a span i{position:absolute;display:block;width:100%;height:100%;line-height:75px}
.downloads a:hover span i{animation:arrow 1s forwards}
@media (max-width:1024px){
	.downloads a{width:100%;margin:0 0 2% 0;}
}

@keyframes arrow {
	0% { left:0 ;}
	10% { left:25% ;}
	20% { left:0% ;}
	30% { left:25% ;}
	40% { left:50% ;}
	50% { left:75% ;}
	60% { left:100% ;}
	70% { left:-100% ; opacity: 0;}
	80% { left:-75%; opacity: 1;}
	90% { left:-50% ;}
	100% { left:0% ;}
}


.announcements { width:1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
.news { width: 46%; display: block; box-shadow: 0 0 15px #ccc; padding:0 50px 50px 50px; background-color: #e50f2e; }
.videos {width: 46%;}
@media (max-width:1024px){
	.announcements { width:90%; }
	.news { width: 100%;}
	.videos {width: 100%;}
}


/* FOOTER */
footer { display: block; overflow: hidden; width:100%; height: 50px; font-size: .8rem; padding:10px 1.5%; overflow:hidden; color:#fff; position:fixed; bottom: 0; z-index:99; background-color: #111;}
footer p { margin: 0; padding:0;  }
footer a { color: #fff; margin: 0; display: block;  }

.contact {display:block; float:left; overflow:hidden; }

.social-feed {display:block; float:left; overflow:hidden; margin: 0 2.5% 0 0; }
.social-feed a { 
	display:inline-block;
	font-size:1.1rem;
	width:30px; 
	height:30px;
	line-height:30px;
	margin:0 5px 0 0;
	color:#333; 
	transition:.3s;
	-webkit-transition:.3s;
	overflow:hidden;
	position:relative;
	border-radius: 10%;
	text-align: center;
	background-color: #fff;
}
.social-feed a:hover { color:#fff; background-color: #e50f2e; }

.social-feed a.whatsapp { display: none; background: url(../svg/whatsapp.svg) center center no-repeat; background-size:20px; background-color: #43a71b;}

.webtasarim {display:block; overflow:hidden; float: right; }
.webtasarim a { 
	width:72px; 
	height:32px; 
	display:block; 
	overflow:hidden; 
	background:url(../images/brandmedya.svg) 0 0 no-repeat;
	background-size:100%; 
}
.webtasarim a:hover { filter: gray; -webkit-filter: grayscale(50%);   }
@media (max-width:1024px) {
	footer > .wrapper { flex-wrap:wrap; }
	.contact { display: none; }
	.social-feed a.whatsapp { display: inline-block;}

}




#map_container { 
	width:100%; 
	height:100%; 
	position: relative;
	z-index:0;
	filter: gray;
	opacity:.9;
	-webkit-filter: grayscale(100%);
	-webkit-transition:.5s;
	transition:.5s;
}
#map_container iframe { position: absolute; width: 100%; height: 100%; }

/* Contact Form */
.contact_info { display:block; overflow: hidden; margin:25px 0 40px 0;font-weight:600; padding:0; font-size: 1.2rem; text-align: center; }
.contact_info .row { display: block; width: 30%; margin:0 5% 0 0; float: left; padding:25px; line-height: 120%; color: #555; border: 1px solid #dedede;}
.contact_info .row:last-child { float: right; margin: 0; }
.contact_info .row .icon { font-family:"ElegantIcons";  display: block; width: 100%; text-align: center; margin:0 0 10px  0; font-size: 3rem; color: #444; }

@media (max-width: 1024px) {
	.contact_info { display:block; overflow: hidden; margin:25px 0; font-size: 1.2rem;  }
	.contact_info .row { width: 100%; margin:0; float: left; padding:25px;}
}

.contact_form { width:100%; margin:20px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.form_row { width:49%; display:block; overflow:hidden; color:#111; margin:0 0 10px 0; padding:0;}
.form_row input,
.form_row textarea {
	width:100%; 
	font-size:1rem;
	display:block;
	padding:0 20px;
	margin: 10px 0;
	height:50px;
	line-height:50px; 
	background-color:#fff; 
	color:#444; 
	border:1px solid #dedede;
	-webkit-transition:.2s;
	transition:.2s;
}
.form_row input.code { width: 50%;}
.form_row textarea { height:180px; }
.form_row input:focus,
.form_row textarea:focus { border:1px solid #D80027; background:#f7f7f7; }
.form_row .security { display:block; padding:0 10px 0 0; text-align:center; float: left; margin:0; font-size:1.6rem; font-weight:700; color:#e40230;}
.form_row input[type="submit"] {
	width:100%; 
	height:55px; 
    float: right;
	font-size:1.3rem;
	line-height:45px;
	font-weight:700;
	text-align:center;
	overflow: hidden;
	margin:20px 0 0 0; 
	display:block;
	border:none; 
	background-color:#1a1a1a; 
	color:#fff; 
	cursor:pointer;
	transition: all .1s linear; 
	-moz-transition: all .1s linear; 
	-webkit-transition: all .1s linear; 
    border-radius: 5px;
}
.form_row input[type="submit"]:hover { color:#fff; background-color:#333;}
@media (max-width: 1024px) {
	.contact_form { width:100%; margin:20px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
	.form_row { width:108%; display:block; overflow:hidden; color:#111; margin:0; padding:0;}
	.form_row input,
	.form_row textarea { margin: 0 0 10px 0;}
}

/* HUMAN RESOURCES */
.hrform { margin:25px 0 0 0; width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.hrform .cls { width:100%; display:block; overflow: hidden; }
.hrform .cls strong { display:block; margin:0 0 20px 0; color:#777; font-size: 1em; }
.hrform .cls input[type="text"] { 
	width:100%; 
	font-size:14px;
	display:block;
	padding:0 20px;
	height:45px;
	line-height:45px; 
	background-color:#fff; 
	color:#444; 
	border:1px solid #ccc;
	-webkit-transition:.2s;
	transition:.2s;
    margin: 0 0 15px 0;
}
.hrform .cls textarea { 
	width:100%; 
	font-size:14px;
	display:block;
	padding:10px 20px;
    margin: 0 0 15px 0;
	height:150px;
	background-color:#fff; 
	color:#444; 
	border:1px solid #ccc;
	-webkit-transition:.2s;
	transition:.2s;
}

.hrform .cls input[type="submit"] {
	width:200px; 
	height:55px; 
    line-height: 40px;
	font-size:1rem;
    font-weight: 700;
	margin:15px 0 0 0; 
	padding:0;
	float:right; 
	display:block;
	border:none; 
	background-color:#e50f2e; 
	color:#fff; 
	cursor:pointer;
	border-radius: 5px;
}
.hrform .cls .upload {  width: 125px; height: 40px; border-radius: 5px; overflow: hidden;background: url(../images/upload.jpg) top center no-repeat; background-size: 100%; color:#fff;margin:0 0 10px 0;}
.hrform .cls .upload:hover { opacity:.8; }
.hrform .cls .upload > input {
    display: block !important;
    width: 130px !important;
    height: 30px !important;
    opacity: 0 !important;
    overflow: hidden !important;
	position:relative;
	z-index:9999;
	background:none;
	cursor:pointer;
}

.hrform .cls input.code { width: 75%; height: 55px; float: left; } 
.hrform .cls .security { width: 25%; height: 55px; line-height: 50px; padding:0 15px; margin:0; font-weight: 800; float:left; background: #eee; font-size:20px; color:#1a1a1a;}
@media (min-width:1024px) {
    .hrform .cls { width:30%; }
}


/* LIGHTBOX */
.lightbox { 
	cursor: pointer; 
	position: fixed; 
	width: 100%; 
	height: 100%; 
	top: 0; 
	left: 0;
	background:rgba(255,255,255,1.00);
	-webkit-filter: none !important; 
	filter: none !important; 
	z-index: 999999999999 !important; 
}
.lightbox img { display: block; position: absolute; }
.lightbox-loading { 
	background: url(../images/loading.gif) center center no-repeat; 
	width: 80px; 
	height: 80px; 
	margin: -20px 0 0 -16px; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
}
.lightbox-caption { display: none; position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; z-index: 9998; }
.lightbox-caption p { 
	margin: 0 auto; 
	max-width: 70%; 
	display: inline-block;  
	*display: inline;
 	*zoom: 1;
	padding: 10px; 
	color: #fff; 
	font-size: 12px; 
	line-height: 18px; 
}
.lightbox-button { 
	position: absolute; 
	z-index: 9999; 
	background: no-repeat center center; 
	width: 32px; 
	height: 32px; 
	opacity:0.9; 
	-webkit-transition: all 0.3s; 
	-moz-transition:    all 0.3s; 
	-ms-transition:     all 0.3s; 
	transition: 		all 0.3s; 
}
.lightbox-button:hover, .lightbox-button:focus { opacity: 1; }
.lightbox-close { right: 30px; top: 20px; background-image: url('../svg/close.svg');  background-size:25px; }
.lightbox-nav { top: 47%; width:100%; margin-top: -16px; }
.lightbox-nav-next { right: 30px; width: 40px; height: 40px; background-image: url('../svg/next.svg'); background-size:60px; }
.lightbox-nav-prev { left: 30px; width: 40px; height: 40px; background-image: url('../svg/prev.svg'); background-size:60px; }


/* Animations */
.animation-element { opacity: 0; position: relative; }
.animation-element.anime-left { opacity: 0; transition: all .3s linear; transform: translate3d(-500px, 0px, 0px); }
.animation-element.anime-left.in-view { opacity: 1; transform: translate3d(0px, 0px, 0px);}

.animation-element.anime-right { opacity: 0; transition: all .3s linear; transform: translate3d(500px, 0px, 0px);}
.animation-element.anime-right.in-view { opacity: 1; transform: translate3d(0px, 0px, 0px); }

.animation-element.anime-top { opacity: 0; transition: all .3s .1s linear; transform: translate3d(0px, 300px, 0px);}
.animation-element.anime-top.in-view { opacity: 1; transform: translate3d(0px, 0px, 0px); }

.animation-element.anime-bottom { opacity: 0; transition: all .3s .1s linear; transform: translate3d(0px, 300px, 0px);}
.animation-element.anime-bottom.in-view { opacity: 1; transform: translate3d(0px, 0px, 0px); }

.animation-element.anime-zoom { opacity: 0; transition: all .3s linear;  transform: scale(0);}
.animation-element.anime-zoom.in-view { opacity: 1; transform: scale(1); }