/*
* @project: Labos 2018
* @author: Mert Diricanli
* @twitter: mertdiricanli
*/

@import 'mixins';

@font-face {
	font-family: 'DIN Next Stencil';
	src: url('../fonts/din-regular.eot');
	src: url('../fonts/din-regular.eot?#iefix') format('embedded-opentype'), 
		 url('../fonts/din-regular.woff') format('woff'),
		 url('../fonts/din-regular.ttf') format('truetype'),
		 url('../fonts/din-regular.svg#DIN Next Stencil') format('svg');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'DIN Next Stencil';
	src: url('../fonts/din-light.eot');
	src: url('../fonts/din-light.eot?#iefix') format('embedded-opentype'), 
		 url('../fonts/din-light.woff') format('woff'),
		 url('../fonts/din-light.ttf') format('truetype'),
		 url('../fonts/din-light.svg#DIN Next Stencil') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'DIN Next Stencil';
	src: url('../fonts/din-medium.eot');
	src: url('../fonts/din-medium.eot?#iefix') format('embedded-opentype'), 
		 url('../fonts/din-medium.woff') format('woff'),
		 url('../fonts/din-medium.ttf') format('truetype'),
		 url('../fonts/din-medium.svg#DIN Next Stencil') format('svg');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Avant Garde';
	src: url('../fonts/avantgarde_bold.eot');
	src: url('../fonts/avantgarde_bold.eot?#iefix') format('embedded-opentype'), 
		 url('../fonts/avantgarde_bold.woff') format('woff'),
		 url('../fonts/avantgarde_bold.ttf') format('truetype'),
		 url('../fonts/avantgarde_bold.svg#Avant Garde') format('svg');
	font-weight: 700;
	font-style: normal;
}


@font-face {
	font-family: 'icons';
	src: url('../fonts/icons.eot');
	src: url('../fonts/icons.eot#iefix') format('embedded-opentype'),
		url('../fonts/icons.woff') format('woff'),
		url('../fonts/icons.ttf') format('truetype'),
		url('../fonts/icons.svg#icons') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before{font-family:"icons"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: .2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

.icon-youtube-play:before { content: '\e800'; }
.icon-search:before { content: '\e801'; }
.icon-right-small:before { content: '\e802'; }
.icon-left-small:before { content: '\e803'; }
.icon-down-small:before { content: '\e804'; }
.icon-up-small:before { content: '\e805'; }
.icon-facebook:before { content: '\e806'; }
.icon-twitter:before { content: '\e807'; }
.icon-gplus:before { content: '\e808'; }
.icon-linkedin:before { content: '\e809'; }
.icon-instagram:before { content: '\e80a'; }
.icon-down-open-big:before { content: '\e80b'; }
.icon-left-open-big:before { content: '\e80c'; }
.icon-right-open-big:before { content: '\e80d'; }
.icon-up-open-big:before { content: '\e80e'; }

$customFont: 'DIN Next Stencil';
$customFont2: 'Avant Garde';

body{font-family:$customFont;}

// Header
header{
	float:left; width:100%; background:#000000; padding:20px 70px; position:relative; z-index:5;
	.logo{float:left;}
	.headermenu{
		float:right;
		ul{float:left;}
		li{float:left;}
		a{
			font-family:$customFont2; font-size:12px; line-height:1; color:#ffffff; padding:9px 25px; text-decoration:none;
			&:hover, &:focus{outline:none;}
		}
	}
	ul{margin:0;}
	.flag{float:right; margin-top:-4px; padding:0 !important;}

	.menu-btn{
		float:right; cursor:pointer; height:31px; border-left:2px solid #000000; margin-top:-6px; margin-right:10px; display:none; position:relative; z-index:100;
		span{font-weight:700; font-size:16px; line-height:42px; color:#333333; padding:0 18px 0 12px;}
	}
	.icons{float:right; width:39px; background:#000000;}
	.iconbar{
		float:left; width:26px; height:3px; background:#ffffff; position:relative; margin:14px 6px;
		transition: .3s;
		&:before, &:after{
			content:''; width:26px; height:3px; background:#ffffff; position:absolute; left:0; transform-origin:50% 50%; -webkit-transform-origin:50% 50%;
			transition: .3s;
		}
		&:before{top:-7px;}
		&:after{top:7px;}
	}
	.menu-btn.active{
		.iconbar{
			background:transparent;
			&:before, &:after{
				top:0; background:#ffffff;
			}
			&:before{
				transform:rotate(45deg);
				-webkit-transform:rotate(45deg);
			}
			&:after{
				transform:rotate(-45deg);
				-webkit-transform:rotate(-45deg);
			}
		}
	}

	@media only screen and (max-width:992px){
		padding:20px;
	}
	@media only screen and (max-width:768px){
		.headermenu{
			display:none;
			position:absolute; top:0; left:0; width:100%; height:auto; background:rgba(#000000, 0.9); padding:65px 0 10% 0; z-index:99;
			ul{
				width:100%;
				li{float:none; width:100%;}
				a{float:none; font-size:20px; padding:20px; display:block; text-align:center;}
			}
		}
		.menu-btn{display:block;}
	}
}

// Slider
.slider-caption{
	.caption-inner{position:absolute; height:100%; padding:0 20%; display:flex; flex-direction:column; justify-content:center;}
	p{font-family:$customFont; font-weight:300; font-size:18px; line-height:1.3; color:#ffffff; margin:0; white-space:normal !important;}
	p.big{font-weight:600; font-size:24px; margin:15px 0 0 0;}
	p.biggest{font-weight:300; font-size:34px; margin:20px 0 0 0;}
	@media only screen and (max-width:992px){
		.caption-inner{padding:0 10%;}
	}
	@media only screen and (max-width:768px){
		.caption-inner{padding:0 20px;}
		p{font-size:16px;}
		p.big{font-size:20px;}
		p.biggest{font-size:30px;}
	}
	@media only screen and (max-width:600px){
		p{font-size:14px;}
		p.big{font-size:18px; margin-top:10px;}
		p.biggest{font-size:26px; margin-top:10px;}
	}
	@media only screen and (max-width:410px){
		p:not(.biggest){display:none;}
		p.biggest{font-size:22px; margin-top:0;}
	}
}
.layer-scrolldown{
	font-size:10px; color:#ffffff;
	img{margin-top:20px;}
	@media only screen and (max-width:768px){
		display:none !important;
	}
}

// Sections
section.section{
	float:left; width:100%;
	.banner{
		float:left; width:100%; height:410px;
		p{font-weight:600; font-size:14px; color:#ffffff; line-height:1.3; margin:5px 0 0 0;}
		p.big{font-weight:300; font-size:18px;}
		h1{font-weight:300; font-size:34px; line-height:1.3; color:#ffffff; margin:5px 0 0 0;}
	}
	@media only screen and (max-width:768px){
		.banner{height:310px;}
	}
}



// Dashboard
.dashboard{
	position:relative; overflow:hidden;
	.dashboard-item{text-decoration:none; padding:0 10px;}
	.dashboard-item-inner{
		position:relative; height:310px; border:10px solid #000000; padding:25px; margin-top:-10px;
		border-image:linear-gradient(to right, #8b4396 0%, #eb2933 50%, #f48947 100%); border-image-slice:1;
		.icon-arrow{
			position:absolute; width:20px; height:11px; right:13px; bottom:40px;
			.cls-1{fill:#f48947;}
		}
		p{font-size:12px; color:#000000; line-height:1.3; margin:20px 0 0 0;}
		p.category{
			font-weight:300; font-size:18px; margin:15px 0 0 0;
		}
		h2{font-weight:300; font-size:34px; color:#000000; line-height:1.2; margin:15px 0 0 0;}
		p.subtitle{font-weight:600; font-style:19px; margin:10px 0 0 0;}
		.buttons{
			float:left; width:100%; margin:30px -5px 0 -5px;
			div[class^='col-']{padding-left:5px; padding-right:5px; padding-top:10px;}
		}
	}
	@media only screen and (max-width:1200px){
		.dashboard-item-inner{
			padding:20px; height:340px;
		}
	}
	@media only screen and (max-width:992px){
		.dashboard-item-inner{
			height:auto; padding-bottom:60px;
		}
	}

}

.references{
	margin:80px 0 0 0;
	p.category{
		font-weight:300; font-size:18px; color:#000000; margin:15px 0 0 0;
		a{color:inherit;}
	}
	h2{font-weight:300; font-size:34px; color:#000000; margin:5px 0 0 0;}
	.content{
		margin-top:20px;
		.content-inner{background:#000000; margin:0 10px;}
		.image-col{position:relative; padding-right:0; padding-left:0;}
		.fullwidth{width:100%;}
		.mask{position:absolute; left:0; top:0; width:100%; height:100%; mix-blend-mode:screen; background:linear-gradient(to right, #eb267d 0%, #f27830 50%, #69c6bf 100%); opacity:0.5;}
		.texts{padding-right:0;}
	}
	.content-inner{position:relative;}
	.texts{position:absolute; height:100%; right:0; display:flex; justify-content:center; flex-direction:column;}
	.texts-inner{
		padding:20px 55px 20px 30px;
		h3{font-weight:300; font-size:24px; line-height:1.3; color:#ffffff; margin:0;}
		p{font-weight:300; font-size:16px; color:#ffffff; line-height:1.4; margin:20px 0 0 0;}
		p.date{margin:0;}
		p.big{font-size:18px;}
		.buttons{
			float:left; width:100%; margin:20px -5px 0 -5px;
			div[class^='col-']{padding-left:5px; padding-right:5px; padding-top:10px;}
		}
	}

	.owl-theme .owl-dots{position:absolute; top:70px; right:40px; width:auto;}
	.owl-theme .owl-dots .owl-dot span, .owl-theme .owl-dots .owl-dot span{background:#ffffff; opacity:0.6;}
	.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background:#ec4054; opacity:1;}

	@media only screen and (max-width:1350px){
		.texts{padding-right:30px;}
	}
	@media only screen and (max-width:992px){
		.texts{position:static;}
		.owl-theme .owl-dots{position:static; width:100%; margin-bottom:5px;}
		.owl-theme .owl-dots .owl-dot span, .owl-theme .owl-dots .owl-dot span{background:#999999;}
		.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background:#999999;}
	}
	@media only screen and (max-width:450px){
		a.button{width:100%; margin-bottom:10px;}
	}
}

.news{
	margin:80px 0 65px 0;
	p.category{
		font-weight:300; font-size:18px; color:#000000; margin:15px 0 0 0;
		a{color:inherit;}
	}
	h2{font-weight:300; font-size:34px; color:#000000; margin:5px 0 0 0;}
	.content{margin-top:20px;}
	.newsitem{
		padding:10px; text-decoration:none; margin:10px 0;
		.image{
			position:relative; overflow:hidden;
			img{@include animate(0.3s, ease, 0.1s);}
		}
		.mask{
			position:absolute; width:100%; height:100%; top:0; left:0; z-index:2; background:linear-gradient(to right, #f9ab4f 0%, #eb2837 50%, #7d4999 100%); mix-blend-mode:screen;
			@include animate(0.3s, ease, 0.1s);
		}
		.inner{
			position:relative;
			p.category{font-weight:600; font-size:14px; color:#000000; margin:0;}
			h4{font-weight:300; font-size:18px; color:#000000; line-height:1.3; margin:0;}
		}
		.icon-arrow{
			position:absolute; width:20px; height:11px; right:13px; bottom:40px;
			.cls-1{fill:#f48947;}
		}
		.info{
			background:#000000; padding:30px; height:145px;
			*{color:#ffffff !important;}
		}

		&:hover{
			.mask{opacity:0;}
			.image img{@include scale(1.1, 1.1);}
		}
	}

	@media only screen and (max-width:1200px){
		.newsitem{
			.info{height:140px;}
		}
	}
	@media only screen and (max-width:650px){
		.newsitem{
			.info{height:180px;}
		}
	}
	@media only screen and (max-width:430px){
		.newsitem{
			width:100%; margin:20px 0 0 0;
		}
	}
}

.projects{
	.list{
		padding-bottom:75px;
		h2{font-weight:300; font-size:34px; color:#000000; line-height:1.3; margin:30px 0 0 0;}
		ul.tabs{
			width:100%; text-align:center; margin:20px 0 10px 0;
			li{
				display:inline-block; border-right:2px solid #848484; padding:0 18px;
				&:last-child{border:none;}
				&.active a{color:#ec4054; text-decoration:underline;}
				a{
					font-weight:600; font-size:18px; line-height:1; color:#848484;
					@include animate(0.3s, ease, 0.1s);
					&:hover, &:focus{color:#ec4054; text-decoration:underline;}
				}
			}
		}
	}

	.project{
		padding:10px; text-decoration:none; margin:10px 0;
		.image{
			position:relative; overflow:hidden;
			img{@include animate(0.3s, ease, 0.1s);}
		}
		.mask{
			position:absolute; width:100%; height:100%; top:0; left:0; z-index:2; background:linear-gradient(to right, #f9ab4f 0%, #eb2837 50%, #7d4999 100%); mix-blend-mode:screen;
			@include animate(0.3s, ease, 0.1s);
		}
		.inner{
			border:10px solid #000000; border-image:linear-gradient(to right, #8b4396 0%, #eb2933 50%, #f48947 100%); border-image-slice:1; position:relative;
			p.category{font-weight:600; font-size:14px; color:#000000; margin:0;}
			h4{font-weight:300; font-size:18px; color:#000000; line-height:1.3; margin:0;}
		}
		.icon-arrow{
			position:absolute; width:20px; height:11px; right:13px; bottom:40px;
			.cls-1{fill:#f48947;}
		}
		.info{
			padding:30px; height:185px;
			h4 + p{margin:20px 0 0 0;}
			p{color:#000000; margin:0;}
		}

		&:hover{
			.mask{opacity:0;}
			.image img{@include scale(1.1, 1.1);}
		}
	}

	@media only screen and (max-width:1200px){
		.project{
			.info{height:210px;}
		}
	}
	@media only screen and (max-width:650px){
		.project{
			.info{height:270px;}
		}
	}
	@media only screen and (max-width:500px){
		.project{
			width:100%; margin:20px 0 0 0;
		}
	}
}

@mixin socials{
	float:right; margin:5px 0 15px 0;
	@content;
	li{
		float:left; margin:0 1px;
		&:first-child{margin-left:0;}
		&:last-child{margin-right:0;}
	}
	.round{
		float:left; width:22px; height:22px; display:block; background:#999999; border-radius:100%; text-align:center;
		@include animate(0.3s, ease, 0.1s);
		&:hover, &:focus{background:#000000;}
	}
	a{
		text-decoration:none; 
		i{font-size:12px; line-height:23px; color:#ffffff;}
	}
	span{float:left; line-height:22px; margin:0 0 0 4px; color:#000000;}
}

.widgets{
	margin-top:60px;
	.socials {
		@include socials {
			float:left; width:100%;
			li{margin-right:10px !important;}
		}
	}
}

section.page{
	padding-bottom:75px;
	.services-list{
		margin-top:-75px;
		div[class^='col-']{
			border-right:1px solid #d9d9d9; padding-top:50px; padding-bottom:50px;
			&:last-child{border:none;}
			&:nth-child(2n){animation-delay:.2s;}
			&:nth-child(3n){animation-delay:.3s;}
			&:nth-child(4n){animation-delay:.4s;}
		}
		h2{font-weight:300; font-size:22px; color:#000000; margin:10px 0 0 0;}
		p{font-size:14px; color:#000000; line-height:1.3; margin:25px 0 0 0;}
	}
	.brands{
		padding:75px 0 0 0;
	}
	.container{padding-top:55px;}
	form{margin-top:10px;}
	input, textarea{border:1px solid #7f7f7f; margin:10px 0 0 0; font-size:16px; line-height:1; color:#000000; padding:10px 20px;}
	textarea{resize:none;}
	form button.button{margin:10px 0 0 0; padding:8px 40px;}
	p.message{margin:10px 0 0 0; display:none;}
	
	h1, h2, h3, h4, h5, h6{font-weight:300; color:#000000; line-height:1.3; margin:15px 0 0 0;}
	p{font-size:14px; line-height:1.4; color:#000000; margin:20px 0 0 0;}
	p.big{font-size:18px;}
	li{font-size:12px; line-height:1.4; color:#000000;}
	
	.no-margin{margin:0;}

	p a{color:inherit;}
	@media only screen and (max-width:768px){
		.form-col{margin-top:40px;}
	}
	@media only screen and (max-width:430px){
		.services-list{
			margin-top:-25px;
			div[class^='col-']{width:100%; padding-top:20px; padding-bottom:20px;}
		}
	}
}

/* PAGE WITH BG */
.page-with-bg{
	.table{height:930px;}
	h1{font-weight:300; font-size:34px; color:#ffffff; margin:0;}
	p{font-size:14px; color:#ffffff; line-height:1.5; margin:20px 0 0 0;}
	p.big{font-size:22px;}
	p.no-margin{margin:0;}
	@media only screen and (max-width:768px){
		.table{height:auto;}
		img.pull-right{float:left !important; width:200px;}
		.image-col .table-cell{padding:40px 0}
		.text-col .table-cell{padding-bottom:75px;}
		.no-image-col .table-cell{padding-top:40px;}
	}
}

.pagination, .page-numbers{
	margin:20px 0; text-align:center;
	li{display:inline-block; margin:1px 2px;}
	a, span{
		font-weight:300; font-size:16px; line-height:31px; color:#b4b4b4; text-decoration:none; display:inline-block; width:31px; height:31px; border:2px solid #b4b4b4;
		@include animate(0.3s, ease, 0.1s);
		&:hover, &.active, &.current{color:#535353; border-color:#535353; border-image:linear-gradient(to right, #8b4396 0%, #eb2933 50%, #f48947 100%); border-image-slice:1;}
	}
}

.map{margin-top:40px;}
.googlemaps{width:100%; height:330px; margin-top:20px;}

footer{
	float:left; width:100%; position:relative;
	.footer-menu{
		margin:20px 0 0 0;
		li{float:left;}
		a{
			font-weight:600; font-size:11px; color:#999999; padding:0 13px; text-decoration:none;
			&:hover, &:focus{text-decoration:underline;}
		}
		li:first-child a{padding-left:0;}
		li:last-child a{padding-right:0;}
	}
	p{
		font-weight:600; font-size:12px; color:#999999; margin:0;
		a{
			color:inherit;
			&:hover{color:inherit;}
		}
	}
	p.digitalfabrika{
		line-height:20px; font-size:10px; margin:5px 0 0 0;
		a{background:url(../images/digitalfabrika.svg) right center no-repeat; background-size:20px 20px; line-height:20px; padding:0 25px 0 0; display:inline-block;}
	}
	.socials {
		@include socials;
	}

	.totop{
		position:absolute; right:20px; bottom:100px; width:50px; height:50px; background:#000000; text-align:center; border-radius:100%; 
		i{font-size:20px; color:#ffffff; line-height:50px;}
	}
	@media only screen and (max-width:992px){
		.footer-menu{display:none;}
	}
}
.top-gradient{
	float:left; width:100%; height:2px; background:linear-gradient(to right, #8b4396 0%, #eb2933 33%, #f48947 66%, #68c6bf 100%); margin:0 0 35px 0;
}
.bottom-gradient{
	float:left; width:100%; height:125px; background:linear-gradient(to right, #8b4396 0%, #eb2933 33%, #f48947 66%, #68c6bf 100%); margin:75px 0 0 0;
}

.owl-theme .owl-dots .owl-dot span{width:12px; height:12px; margin:0 3px;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background:#999999;}

/* BUTTONS */
a.button, button.button, div.button{
	position:relative; font-weight:600; font-size:14px; line-height:1; color:#a3a3a3; padding:6px 18px 6px 18px; border:2px solid #a3a3a3; display:inline-block; text-decoration:none; border-radius:0;
	@include animate(0.3s, ease, 0.1s);
	span.icon{
		position:absolute; top:50%; right:10px; width:9px; height:14px; margin-top:-7px; display:block;
		.cls-1{@include animate(0.3s, ease, 0.1s); fill:#a3a3a3;}
	}
	&:hover, &:focus{
		background:#a3a3a3; color:#ffffff;
		span.icon{
			.cls-1{fill:#ffffff;}
		}
	}

	&.red{
		background:#ec4054; border-color:#ec4054; color:#ffffff;
		span.icon{
			.cls-1{fill:#ffffff;}
		}
		&:hover, &:focus{
			background:transparent; color:#ec4054;
			span.icon{
				.cls-1{fill:#ec4054;}
			}
		}
	}

	&.black{
		background:#000000; border-color:#000000; color:#ffffff;
		&:hover, &:focus{
			background:#ffffff; color:#000000;
		}
	}

	&.block{display:block;}
}

/* ANIMATIONS */

.animated {
	animation-duration: 1.2s;
	animation-fill-mode: both;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.fadeIn {
	animation-name: fadeIn;
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-5%, 0, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fadeInLeft {
	animation-name: fadeInLeft;
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(5%, 0, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fadeInRight {
	animation-name: fadeInRight;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fadeInUp {
	animation-name: fadeInUp;
}


/* HELPERS */

.row-5{margin-left:-5px; margin-right:-5px;}

.no-padding{padding:0;}
.no-t-padding{padding-top:0;}
.no-r-padding{padding-right:0;}
.no-b-padding{padding-bottom:0;}
.no-l-padding{padding-left:0;}

.no-margin{margin:0;}
.no-t-margin{margin-top:0;}
.no-r-margin{margin-right:0;}
.no-b-margin{margin-bottom:0;}
.no-l-margin{margin-left:0;}

.main .content.no-padding{padding:0 !important;}
.main .content.no-t-padding{padding-top:0 !important;}
.main .content.no-r-padding{padding-right:0 !important;}
.main .content.no-b-padding{padding-bottom:0 !important;}
.main .content.no-l-padding{padding-left:0 !important;}

.main .no-margin{margin:0 !important;}
.main .no-t-margin{margin-top:0 !important;}
.main .no-r-margin{margin-right:0 !important;}
.main .no-b-margin{margin-bottom:0 !important;}
.main .no-l-margin{margin-left:0 !important;}


div.table{height:100%; display:table; margin:0;}
div.table-cell{display:table-cell; vertical-align:middle;}

*, *:hover, *:focus{outline:none;}