@charset "UTF-8";

div.consulting,
div.delivery {
	display : flex;
	position : relative;
	width : 100vw;
	background-position : 100% 0%;
	background-repeat : no-repeat;
	background-size : cover;	
	}

div.consulting { 
	background-color : rgba(255, 255, 255, 1);
	background-image : url('../img/consulting.jpg'); 
	}	

div.delivery { 
	background-color : rgba(255, 186, 99, 1);
	background-image : url('../img/delivery.jpg'); 
	}
	
div.consulting > div,
div.delivery > div {
	position : relative;
	z-index : 20;
	}
	
div.consulting > div > span,
div.delivery > div > span { display : block; }

div.delivery > div > a,
div.consulting > div > a {
	display : inline-block;
	padding : 0 20px;
	background-color : rgba(224, 103, 39, 1);
	color : rgba(255, 255, 255, 1);
	font: normal 18px/50px "Bold", sans-serif;
	text-decoration : none;
	}
	
@media only screen and (min-width : 1441px) {
	div.consulting,
	div.delivery {
		align-items : center;
		min-height : 520px; 
		font: normal 28px/32px "Bold", sans-serif;
		}
		
	div.consulting::before,
	div.delivery::before {
		position : absolute;
		bottom : 0;
		z-index : 10;
		width : 60%;
		height : 100%;
		content : "";
		}
		
	div.consulting::before {
		left : 0;
		background-image : linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0) 100%);
		}
		
	div.delivery::before {
		right : 0;
		background-image : linear-gradient(to left, rgba(255, 186, 99, 1) 0%, rgba(255, 186, 99, 1) 25%, rgba(255, 186, 99, 0) 100%);
		}
		
	div.consulting > div,
	div.delivery > div { width : 45%; }
	div.delivery > div { left : 55%; }
	
	div.consulting > div > span,
	div.delivery > div > span { padding : 70px 70px 35px 70px; }
	
	div.delivery > div > a,
	div.consulting > div > a { margin : 0 70px 70px 70px; }
	}
	
@media only screen and (min-width : 1281px) and (max-width : 1440px) {
	div.consulting,
	div.delivery {
		align-items : center;
		min-height : 480px; 
		font: normal 26px/30px "Bold", sans-serif;
		}
		
	div.consulting::before,
	div.delivery::before {
		position : absolute;
		bottom : 0;
		z-index : 10;
		width : 60%;
		height : 100%;
		content : "";
		}
		
	div.consulting::before {
		left : 0;
		background-image : linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0) 100%);
		}
		
	div.delivery::before {
		right : 0;
		background-image : linear-gradient(to left, rgba(255, 186, 99, 1) 0%, rgba(255, 186, 99, 1) 25%, rgba(255, 186, 99, 0) 100%);
		}
		
	div.consulting > div,
	div.delivery > div { width : 45%; }
	div.delivery > div { left : 55%; }
	
	div.consulting > div > span,
	div.delivery > div > span { padding : 60px 60px 30px 60px; }
	
	div.delivery > div > a,
	div.consulting > div > a { margin : 0 60px 60px 60px; }
	}
	
@media only screen and (min-width : 961px) and (max-width : 1280px) {
	div.consulting,
	div.delivery {
		align-items : center;
		min-height : 320px; 
		font: normal 24px/28px "Bold", sans-serif;
		}
		
	div.consulting::before,
	div.delivery::before {
		position : absolute;
		bottom : 0;
		z-index : 10;
		width : 60%;
		height : 100%;
		content : "";
		}
		
	div.consulting::before {
		left : 0;
		background-image : linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0) 100%);
		}
		
	div.delivery::before {
		right : 0;
		background-image : linear-gradient(to left, rgba(255, 186, 99, 1) 0%, rgba(255, 186, 99, 1) 25%, rgba(255, 186, 99, 0) 100%);
		}
		
	div.consulting > div,
	div.delivery > div { width : 55%; }
	div.delivery > div { left : 45%; }
		
	div.consulting > div > span,
	div.delivery > div > span { padding : 50px 50px 25px 50px; }
	
	div.delivery > div > a,
	div.consulting > div > a { margin : 0 50px 50px 50px; }
	}
	
@media only screen and (min-width : 481px) and (max-width : 960px) {
	div.consulting,
	div.delivery { 
		min-height : calc(60vw + 100px);
		align-items : flex-end;
		font: normal 22px/26px "Bold", sans-serif;
		}
		
	div.consulting { background-position : 80% 0%; }
	div.delivery { background-position : 35% 0%; }
		
	div.consulting::before,
	div.delivery::before {
		position : absolute;
		bottom : 0;
		left : 0;
		z-index : 10;
		width : 100%;
		height : 60%;
		content : "";
		}
		
	div.consulting::before { background-image : linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 100%); }	
	div.delivery::before { background-image : linear-gradient(to top, rgba(255, 186, 99, 1) 0%, rgba(255, 186, 99, 1) 10%, rgba(255, 186, 99, 0) 100%); }
		
	div.consulting > div,
	div.delivery > div { width : 100%; }
	
	div.consulting > div > span,
	div.delivery > div > span { padding : 40px 40px 20px 40px; }
	
	div.delivery > div > a,
	div.consulting > div > a { margin : 0 40px 40px 40px; }
	}
	
@media only screen and (max-width : 480px) {
	div.consulting,
	div.delivery { 
		min-height : calc(100vw + 100px);
		align-items : flex-end;
		font: normal 20px/24px "Bold", sans-serif;
		}
		
	div.consulting { background-position : 70% 0%; }
	div.delivery { background-position : 35% 0%; }
		
	div.consulting::before,
	div.delivery::before {
		position : absolute;
		bottom : 0;
		left : 0;
		z-index : 10;
		width : 100%;
		height : 60%;
		content : "";
		}
		
	div.consulting::before { background-image : linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0) 100%); }	
	div.delivery::before { background-image : linear-gradient(to top, rgba(255, 186, 99, 1) 0%, rgba(255, 186, 99, 1) 25%, rgba(255, 186, 99, 0) 100%); }
		
	div.consulting > div,
	div.delivery > div { width : 100%; }
	
	div.consulting > div > span,
	div.delivery > div > span { padding : 20px; }
	
	div.delivery > div > a,
	div.consulting > div > a { margin : 0 20px 20px 20px; }
	}