/*
text #494949
heading color #333333
dark #232323
lightgrey: #E1E1E1
red #D8371F
red-hover #ED6B59
*/

body {
	font-family: 'Encode Sans', sans-serif;
	color: #494949;
}
h1, h2, h3, h4, h5 {
	color: #333333;
}
a {
	text-decoration: none;
	color: #494949;
}


/*text-colors*/
.text-red { color: #D8371F; }


/*background colors*/
.bg-lightgrey { background-color: #E1E1E1; }


.btn-red {
	background-color: #D8371F;
	border-color: #D8371F;
	color: white;
	font-weight: 600;
	border-radius: 3px;
}
.btn-red:hover {
	background-color: #ED6B59;
	border-color: #ED6B59;
	color: white;
}




/*MENU*/
.menu {
	background-color: #494949;
}
.menu a {
	color: white; 
}
.menu a:hover {
	color: #ED6B59;
}
.menu a.active {
	color: #ED6B59;
}



/* BANNER */
.main-banner {
	position: relative;
	z-index: -3;
}
.banner-text {
	text-shadow: 6px 3px 9px #171717;
	font-size: 1.6rem;
	position: absolute;
	bottom: 10%;
	right: 8%;
	color: white;
}




/*HOMEPAGE - nose services*/
.nos-services-row {
	margin-top: -60px;
	background-color: #232323;
	background-image: url("images/bg-nos-services.jpg");
	padding-top: 100px;
	padding-bottom: 40px;
}
/* icon hover */
.icon-hover {
	height: 65px;
	position: relative;
}
.icon-hover img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.icon-hover .hover{
	display: none;
}
a:hover .icon-hover .hover{
	display: inline;
}
a:hover .icon-hover img:not(.hover){
	display: none;
}
.nos-services-row .row p {
	padding-top: 30px;
	margin-bottom: 0;
}
.nos-services-row a:hover {
	color: #ED6B59 !important;
}





/*HOMEPAGE - Services block*/
.drop-shadow {
	filter: drop-shadow(3px 6px 3px rgba(50, 50, 0, 0.5))
}
.drop-shadow.left {
	filter: drop-shadow(-3px 6px 3px rgba(50, 50, 0, 0.5))
}
.clip-path-bottom {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.clip-path-top {
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
}
.clip-path-top-bottom {
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 90%);
}
.clip-path-top-invert {
	clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
}
.clip-path-right {
	clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
}
.services-block {
	position: relative;
}
.services-block:before {
	content: "";
	z-index: -1;
	display: block;
	position: absolute;
	background-color: #E1E1E1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%);
}
.services-block.v2:before {
	clip-path: polygon(0 4%, 100% 0, 100% 100%, 0% 100%);
}
.services-block.v3:before {
	clip-path: polygon(0 4%, 100% 0, 100% 100%, 0% 96%);
}
.services-block.v4:before {
	clip-path: polygon(0 0, 100% 3%, 100% 100%, 0% 100%);
}







/* FOOTER - contact */
.footer-logo {
	margin-top: 90px;
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	filter: drop-shadow(0px 2px white);
	position: relative;
	z-index: 2;
}
.footer-logo-wrapper {
	background: rgb(29,29,29);
	background: linear-gradient(90deg, rgba(29,29,29,1) 0%, rgba(238,104,88,1) 0%, rgba(214,60,36,1) 100%);
	padding: 5px;
	clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
	border-top: 2px solid white;
}
.contact {
	margin-top: -37px;
	position: relative;
	background: rgb(29,29,29);
	background: linear-gradient(90deg, rgba(29,29,29,1) 0%, rgba(85,85,85,1) 50%, rgba(29,29,29,1) 100%);
	padding-top: 90px;
	padding-bottom: 70px;
}
.contact h2{
	color:white;
	font-size: 1.6rem;
	margin-bottom: 20px;
}
.contact .container {
	max-width: 500px;
}
.contact .form-control {
	border-radius: 0;
	border-color: white;
	background-color: #7b7b7b;
	color: white;
}
.contact .form-control::placeholder {
	color: white;
	font-style: italic;
}
.btn-white {
	background-color: white;
	border-radius: 0;
	font-weight: 700;
	padding: 6px 26px;
	margin-top: 10px
}
.btn-white:hover {
	color: white;
	background-color: #D8371F;
	border-color: #D8371F;
}
.footer-bottom {
	margin: -33px auto 0;
	padding: 20px;
	background-color: white;
	max-width: 800px;
	clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}












/* SMALL SCREEN */
/* ------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/*MENU*/
	.menu-wrapper {
		padding: 0;
		position: absolute;
	}
	.menu {
		display: none;
		padding: 10px 0
	}
	.menu a {
		display: block;
		padding: 10px 25px;
	}
	#iconMenu {
		font-size: 2rem;
	}
	#iconCloseMenu {
		font-size: 2rem;
		display: none;
	}



	/*HOMEPAGE - nose services*/
	.nos-services-row {
		background-size: cover;
	}
	.nos-services-row .row p {
		padding-top: 10px;
	}
	.nos-services-row .col {
		flex: 0 0 auto;
		width: 100%;
		margin-bottom: 50px;
	}
	.nos-services-row .col br {
		display: none;
	}




	/* FOOTER - contact */
	.footer-bottom {
		margin: 0;
		clip-path: unset;
	}



	/*SLANTED COLUMNS - PAGES*/
	.slanted {
		display: flex;
		flex-wrap: wrap;
	}
	.slanted .services-sidebar {
		flex: 0 0 auto;
		width: 100%;
		order: 2;
	}
	.slanted .left {
		flex: 0 0 auto;
		width: 100%;
		order: 1;
		margin-bottom: 50px;
	}
	.services-sidebar .row {
		color: white;
	    text-align: center;
		background-color: #232323;
	  	background-image: url('images/bg-services-sidebar.jpg');
	  	background-size: contain;
		padding-top: 50px;
		padding-bottom: 50px;
		margin-top: -50px;
	}
	.services-sidebar .icon-hover {
		margin-top: 30px;
	}

	
}




/* LARGE SCREEN ≥992px */
/* container large 960px */
/* ------------------------------------------------------------------------- */
@media (min-width: 992px) {

	/*MENU*/
	.menu-wrapper {
		position: relative;
	}
	.menu-wrapper:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: calc(50% + 960px / 2 - 12px);
		z-index: -1;
		display: block;
		background-color: #494949;
		height: 50px;
	}
	.menu-wrapper:after {
	    content: "";
	    position: absolute;
	    top: 0;
	    right: calc(50% + 960px / 2 - 12px);
	    z-index: -1;
	    display: block;
	    width: 0;
	    height: 0;
	    border-style: solid;
	    border-width: 0 50px 50px 0;
	    border-color: transparent #494949 transparent transparent;
	}
	.menu a {
		display: inline-block;
		padding: 13px 10px;
		height: 50px;
	}
	

	/* BANNER */
	.main-banner {
		margin-top: -50px;
	}
	.banner-text {
		font-size: 2rem;
		bottom: 25%;
	}


	/*HOMEPAGE nos-services-row*/
	.nos-services-row {
		margin-bottom: 90px;
	}


	/*HOMEPAGE services-block*/
	.services-block:before {
		right: calc(50% - 960px / 2 - 35px);
		clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 95%);
	}
	.services-block.v2:before {
		left: calc(50% - 960px / 2 - 35px);
		right: 0;
		clip-path: polygon(0 18%, 100% 0, 100% 100%, 0% 100%);
	}
	.services-block.v3:before {
		left: calc(50% - 960px / 2 - 35px);
		right: 0;
		clip-path: polygon(0 22%, 100% 0, 100% 100%, 0% 80%);
	}
	.services-block.v4:before {
		right: calc(50% - 960px / 2 - 35px);
		clip-path: polygon(0 0, 100% 13%, 100% 100%, 0% 100%);
	}






	/*SLANTED COLUMNS - PAGES*/
	.slanted {
		min-height: 1200px;
		padding-top: 25px;
	}
	.slanted .right.services-sidebar { 
	    width: 30%;
	    shape-outside: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
	    clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
	    float:right;
		margin-left: 50px;
	}
	.services-sidebar .top-img {
		max-width: 85%;
		display: block;
		margin: 0 auto;
	}
	.services-sidebar .row {
		color: white;
	    text-align: center;
		background-color: #232323;
	  	background-image: url('images/bg-services-sidebar.jpg');
	  	background-size: contain;
		padding-top: 90px;
		padding-bottom: 50px;
		margin-top: -50px;
	}
	.services-sidebar .col-12 {	
		max-width: 90%;
		margin-left: auto;
	}
	.services-sidebar .icon-hover img {
		max-width: 50px
	}
	.slanted .clip-path-right {
		max-width: calc(70% - 50px);
		clip-path: polygon(0 0, calc(100% - 15px) 0%, 100% 100%, 0% 100%);
	}

}



/* XL SCREEN 1200px*/
/* 	container 1140px */
/* ------------------------------------------------------------------------- */
@media (min-width: 1200px) {
	
	/*MENU*/
	.menu-wrapper:before {
		left: calc(50% + 1140px / 2 - 12px);
	}
	.menu-wrapper:after {
	    right: calc(50% + 1140px / 2 - 12px);
	}
	.menu a {
		padding: 13px 25px;
	}


	/* BANNER */
	.banner-text {
		font-size: 2.6rem;
	}



	/*HOMEPAGE services-block*/
	.services-block:before {
		right: calc(50% - 1140px / 2 - 35px);
		clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 95%);
	}
	.services-block.v2:before {
		left: calc(50% - 1140px / 2 - 35px);
		clip-path: polygon(0 22%, 100% 0, 100% 100%, 0% 100%);
	}
	.services-block.v4:before {
		right: calc(50% - 1140px / 2 - 35px);
		clip-path: polygon(0 0, 100% 22%, 100% 100%, 0% 100%);
	}

	
}



/* XXL SCREEN 1400px*/
/* 	container 1320px */
/* ------------------------------------------------------------------------- */
@media (min-width: 1400px) {
	
	/*MENU*/
	.menu-wrapper:before {
		left: calc(50% + 1320px / 2 - 12px);
	}
	.menu-wrapper:after {
	    right: calc(50% + 1320px / 2 - 12px);
	}
	.menu a {
		padding: 13px 40px;
	}


	/* BANNER */
	.banner-text {
		font-size: 3.2rem;
		right: 5%;
	}



	/*HOMEPAGE services-block*/
	.services-block:before {
		right: calc(50% - 1320px / 2 - 35px);
		clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
	}
	.services-block.v2:before {
		left: calc(50% - 1320px / 2 - 35px);
		clip-path: polygon(0 22%, 100% 0, 100% 100%, 0% 100%);
	}
	.services-block.v4:before {
		right: calc(50% - 1320px / 2 - 35px);
		clip-path: polygon(0 0, 100% 25%, 100% 100%, 0% 100%);
	}


	
}