@font-face {
    font-family: 'Avenir';
    src: url('../fonts/avenir/AvenirNextLTPro-Regular.woff') format('woff'),
    	 url('../fonts/avenir/AvenirNextLTPro-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'AvenirHeavy';
    src: url('../fonts/avenir/AvenirNextLTPro-HeavyCn.woff') format('woff'),
    	 url('../fonts/avenir/AvenirNextLTPro-HeavyCn.woff2') format('woff2');
}

body,
html{
	background: #fff;
	font-family: 'Avenir', sans-serif;
	color: #2b2b2b;
}

#navbar{
	display: block;
	position: fixed;
	background-color: #fff;
	text-align: center;
	padding: 27px 0;
	z-index: 20;
	width: 100%;
}
	#navbar.shadow{
		box-shadow: 0px 2px 4px rgba(170, 170, 170, 0.5);
	}
	#navbar .menu{
		list-style: none;
		margin: 0;
		padding: 0;
	}
		#navbar .menu li{
			display: inline-block;
			position: relative;
			border-right: 1px solid #2b2b2b;
		}
			#navbar .menu li:last-child{
				border: none;
			}
			#navbar .menu li a{
				display: block;
				font-family: 'Avenir', sans-serif;
				font-weight: bold;
				color: #2b2b2b;
				padding: 5px 30px;
				text-decoration: none;
			}
				#navbar .menu li a:hover{
					color: #BA2B31;
				}

	#navbar .logo{
		display: inline-block;
		background: transparent url(../images/logo.png) no-repeat center;
		background-size: auto 100px;
		width: 161px;
		height: 100px;
		outline: none;
		text-decoration: none;
		position: absolute;
		top: 27px;
		left: 50px;
	}

.navbar-space{
	height: 88px;
}

#hero-banner{
	position: relative;
	display: block;
	width: 100%;
	height: 41vw;
	background: #525252 no-repeat center;
	background-size: cover;
}
	#hero-banner .item{
		display: block;
		position: relative;
		width: 100%;
		height: 41vw;
		background: #525252 no-repeat center;
		background-size: cover;
		overflow: hidden;
	}
		#hero-banner .item img{
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: auto;
			transform: translateY(-50%);
		}
	/*#hero-banner .slick-arrow{
		position: absolute;
		z-index: 10;
		top: 50%;
		left: 0;
	}*/
	#hero-banner .slick-dots{
		position: absolute;
		z-index: 10;
		bottom: 100px;
		left: 50%;
		list-style: none;
		margin: 0;
		padding: 0;
		transform: translateX(-50%);
	}
		#hero-banner .slick-dots li{
			position: relative;
			display: inline-block;
			margin: 0 5px;
			padding: 0;
		}
			#hero-banner .slick-dots li button{
				border: none;
				width: 15px;
				height: 15px;
				color: transparent;
				font-size: 0;
				border-radius: 50%;
				background-color: #828282;
			}
			#hero-banner .slick-dots li.slick-active button{
				background-color: #F6D132;
			}

.carosel{
	position: relative;
}
	.carosel .slick-slide{
		padding: 0 5px;
		height: 80px;
	}
	.carosel .item{
		position: relative;
		display: block;
		text-align: center;
		background-color: transparent;
		height: 100%;
	}
		.carosel .item img{
			display: inline-block;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
			max-width: 100%;
			max-height: 100%;
		}

	.carosel .slick-arrow{
		position: absolute;
		top: 50%;
		border: none;
		color: transparent;
		background: transparent url(../images/btn-arrow.png) no-repeat center;
		background-size: 58px;
		width: 58px;
		height: 58px;
		transform: translateY(-50%);
		opacity: .5;
	}
		.carosel .slick-arrow:hover{
			opacity: 1;
		}
		.carosel .slick-arrow.slick-prev{
			left: -58px;
		}
		.carosel .slick-arrow.slick-next{
			right: -58px;
			transform: rotate(180deg) translateY(50%);
		}

	.carosel-portfolio .slick-slide{
		padding: 0 10px;
		height: 370px;
	}

.section{
	padding: 70px 0;
	margin: 0;
	position: relative;
}
	.section-grey{
		background: rgba(151,151,151,0.1);
	}

	.section-heading{
		font-family: 'AvenirHeavy', sans-serif;
		font-size: 35px;
		color: #2b2b2b;
		margin: 0 0 50px;
		padding: 0;
	}
	.section-heading-red{
		color: #B62E2E;
	}

	.section-desc{
		font-family: "AvenirHeavy", sans-serif;
		font-size: 30px;
		color: #2b2b2b;
		margin: 0 0 50px;
		padding: 0 250px;
	}
		.section-desc-white{
			color: #fff;
		}
		.section-desc-red{
			color: #BF3730;
		}

		.section-desc-small{
			font-size: 18px;
		}

		.section-triangle{
			content: "";
			width: 0;
	      	height: 0;
	      	border-bottom: 150px solid #fff;
	      	border-left: 100px solid transparent;
	      	position: absolute;
	      	top: -150px;
	      	right: 0;
	      	z-index: 15;
		}

.portfolio-card{
	display: block;
	position: relative;
	background: #525252 no-repeat center;
	background-size: cover;
	font-family: 'AvenirHeavy', sans-serif;
	font-size: 16px;
	color: #fff;
	height: 370px;
	border-radius: 6px;
	text-align: left;
	overflow: hidden;
}
	.portfolio-card .link{
		display: block;
		text-decoration: none;
		width: 100%;
		height: 100%;
		color: #fff;
	}
	.portfolio-card p{
		position: absolute;
		bottom: 30px;
		padding: 0 22px;
		margin: 0;
	}
	.portfolio-card .overlay{
		opacity: 0;
		position: absolute;
		z-index: 2;
		width: 100%;
		height: 100%;
		background: rgba(186, 43, 49, 0.6);
		text-align: center;
		font-size: 18px;
		transition: opacity 1s;
	}
		.portfolio-card .overlay span{
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
		.portfolio-card .link:hover .overlay{
			opacity: 1;
		}

.people{
	position: relative;
	text-align: left;
}
	.people span{
		margin: 0 0 20px;
		display: block;
		border-radius: 15px;
		overflow: hidden;
	}
	.people h4,
	.people p{
		font-family: 'Avenir', sans-serif;
		font-weight: bold;
		font-size: 30px;
		padding: 0;
		margin: 0 0 20px;
	}
	.people p{
		font-family: 'AvenirHeavy', sans-serif;
		font-weight: normal;
		margin: 0;
		color: #BF3730;
	}

#footer{
	text-align: center;
	padding: 85px 0;
	background: #525252;
	color: #fff;
	font-weight: bold;
}
	#footer .support-link{
		font-family: 'Avenir', sans-serif;
		font-weight: bold;
		color: #fff;
		text-decoration: none;
	}

#section-contact{
	padding: 0;
	background: #DF4040 url(../images/bg-contact.png) no-repeat center;
	backgrounds-size: cover;
	color: #fff;
}
	#section-contact .poster{
		background: #525252 no-repeat center;
		background-size: cover;
		font-family: 'AvenirHeavy', sans-serif;
		font-size: 70px;
		color: #fff;
		text-align: center;
		position: relative;
	}
		#section-contact .poster span{
			display: inline-block;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
	#section-contact .info{
		font-family: 'AvenirHeavy', sans-serif;
		font-size: 20px;
		position: relative;
		padding: 100px 0;
	}
		#section-contact .info .link{
			text-decoration: none;
			color: #fff;
		}
			#section-contact .info .link:hover{
				text-decoration: underline;
			}
		#section-contact .info content{
			display: inline-block;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		#section-contact .info .small a{
			font-family: 'Avenir', sans-serif;
			font-weight: bold;
			font-size: 16px;
			color: #fff;
			text-decoration: none;
		}
		#section-contact .info content p:last-child{
			margin: 0;
			padding: 0;
		}

#section-specials{
	background: #525252 url(../images/bg-specials.png) no-repeat center;
	background-size: cover;
	padding: 180px 0;
}

.specials-panel{
	display: block;
	position: relative;
	background: #BA2B31;
	border-radius: 6px;
	overflow: hidden;
	margin: 0;
	padding: 55px 23px;
	text-align: center;
	color: #fff;
	font-family: 'Avenir', sans-serif;
	font-weight: bold;
	font-size: 14px;
}
	.specials-panel p{
		margin: 0;
		padding: 0;
	}
	.specials-panel h5{
		font-family: 'AvenirHeavy', sans-serif;
		font-size: 16px;
		margin: 0 0 20px;
		padding: 0;
	}
	.specials-panel .icon{
		width: 100%;
		height: 80px;
		background: transparent no-repeat center;
		background-size: contain;
		margin: 0 0 20px;
	}
	.specials-panel .icon-promo{
		background-image: url(../images/icon-promo.png);
	}
	.specials-panel .icon-respons{
		background-image: url(../images/icon-respons.png);
	}
	.specials-panel .icon-eco{
		background-image: url(../images/icon-eco.png);
	}
	.specials-panel .icon-comp{
		background-image: url(../images/icon-comp.png);
	}
	.specials-panel .icon-darts{
		background-image: url(../images/icon-darts.png);
	}
	.specials-panel .icon-phone{
		background-image: url(../images/icon-phone.png);
	}
	.specials-panel .icon-group{
		background-image: url(../images/icon-group.png);
	}

	.specials-panel-light{
		background-color: transparent;
		color: #BF3730;
	}

	#section-specials .specials-panel-3 p,
	#section-specials .specials-panel-4 p{
		padding-right: 50px;
		padding-left: 50px;
	}

.content-wrap{
	padding-top: 145px;
	padding-bottom: 145px;
}

#content{
	position: relative;
	color: #000;
	font-size: 16px;
	color: #000;
	font-weight: 300;
	line-height: 2;
}
	#content .content-title{
		font-family: 'AvenirHeavy', sans-serif;
		font-size: 20px;
		padding: 0;
		margin: 0 0 20px;
	}

.sidebar{
	position: relative;
	margin: 0 0 50px;
	padding: 0;
}
	.sidebar .title{
		font-family: 'AvenirHeavy', sans-serif;
		font-size: 20px;
		color: #000;
		margin: 0 0 15px;
		padding: 0;
	}
	.sidebar:last-child{
		margin-bottom: 0;
	}

.sidebar-portfolio{
	font-size: 20px;
	font-weight: 300;
}
	.sidebar-portfolio b{
		font-family: 'AvenirHeavy', sans-serif;
	}
	.sidebar-portfolio a{
		text-decoration: none;
		color: #000;
	}
		.sidebar-portfolio a:hover{
			text-decoration: underline;
			color: #ba2b31;
		}
	.sidebar-portfolio ul{
		margin: 0;
		padding: 0;
		list-style: none;
	}
		.sidebar-portfolio ul li{
			display: block;
			margin: 0 0 20px;
			padding: 0;
		}
			.sidebar-portfolio ul li:before{
				content: "";
				display: inline-block;
				width: 13px;
				height: 13px;
				vertical-align: middle;
				background: #BA2B31;
				border-radius: 50%;
				margin: 0 10px 0 0;
			}
		.sidebar-portfolio ul li span{
			display: inline-block;
			vertical-align: middle;
		}

.sidebar-gallery{
	position: relative;
}
	.sidebar-gallery .item{
		background: #ccc;
		position: relative;
		overflow: hidden;
		display: block;
		outline: none;
		text-decoration: none;
	}
		.sidebar-gallery .item img{
			height: 100%;
			max-height: 100%;
			width: auto;
			max-width: 300%;
		}

.tinycontent{
	overflow: hidden;
}
.tinycontent img{
	max-width: 100%;
	height: auto;
}
.tinycontent figure.image{
	display: inline-block;
}
	.tinycontent figure.image.align-left{
		float: left;
	}
	.tinycontent figure.image.align-right{
		float: right;
	}
.tinycontent figcaption{
	color: #989898;
	font-size: 12px;
}

#about-us .specials-panel-1 p,
#about-us .specials-panel-2 p{
	padding-right: 50px;
	padding-left: 50px;
}

@media (max-width:1400px){

	#navbar {
		padding: 15px 0;
	}
	.navbar-space {
		height: 64px;
	}
	#navbar .logo {
		background-size: auto 60px;
		width: 97px;
		height: 60px;
	}
	#navbar .menu li a {
		padding: 5px 20px;
	}

	#section-specials .specials-panel-3 p,
	#section-specials .specials-panel-4 p{
		padding-right: 30px;
		padding-left: 30px;
	}

	#about-us .specials-panel-1 p,
	#about-us .specials-panel-2 p{
		padding-right: 30px;
		padding-left: 30px;
	}

}

@media (max-width:1200px){

	.section-desc {
		padding: 0 100px;
	}

	#section-specials .specials-panel-2,
	#section-specials .specials-panel-3,
	#section-specials .specials-panel-4{
		padding-bottom: 75px;
	}
	#section-specials .specials-panel-3 p,
	#section-specials .specials-panel-4 p{
		padding-right: 0;
		padding-left: 0;
	}

}