* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}
html, body, div, object, iframe, fieldset { 
	margin: 0; 
	padding: 0; 
	border: 0;
} 

html {
       overflow-y: scroll;
}

ol, ul { 
	list-style: none;
	margin: 0;
	padding: 0;
} 
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
}
header, footer, nav, section, article, hgroup, figure {
	display: block;	
}
legend {
	display: none;
}
/************End Reset**************/

/************Global**************/
body {
	background: #fff;
	color: #000;
	font: 100%/1.4 "Roboto", "Helvetica", "Arial", sans-serif;
	padding: 0;

	-webkit-text-size-adjust: none;
}
a {
	color: #808080;
	text-decoration: none;
}
a:hover, a:focus {
	color: #3080c3;
	text-decoration: underline;
}
p {
	margin: 0 0 1em;
}
img, object, video {
	max-width: 100%;
	border: 0;
}
a img {
	border: 0;
	outline: 0;
}
h1 {
	font-size: 3em;
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 0.2em;
}
h2 {
	font-size: 2em;
	line-height: 1.1;
	margin-bottom: 0.2em;
}
h3 {
	font-weight: normal;
	line-height: 1.1;
	padding-bottom: 0.4em;
	border-bottom: 1px solid #ccc;
}
h1 a, h2 a, h3 a {
	display: block;
	color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover {
	color: #e51837;
}


/* Main Styles*/

.main_container {
	margin-bottom: 1em;
	overflow: hidden;
	max-width: 1180px;
	margin: 0 auto;
}

.home_header {
	width:100%;
	max-width: 1180px; 
	border-bottom: 6px solid black;
	display: block;
	margin: 14% 0 10% 0;
	padding: 0;
	position: relative;
}

.into_text {
	width:80%;
	position: absolute;
	top:48%;
	left:50%;
	right:50%;
 	-ms-transform: translate(-50%, -50%); 
   	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)	
}

.into_text > h1 {
	font-size: 3.2em;
	line-height: 1.25em;
	color: white;
	font-weight: 300;
	text-align: center;
}

.logo {
	position: absolute;
	width: 100%;
	height: 50%;
	max-width:250px;
	z-index: 9999;
	left:50%;
	right:50%;
	background: url('images/logo.png');
    background-image: url('images/logo.svg'), none;
	background-repeat: no-repeat;
	background-position: center; 	
	-ms-transform: translate(-50%, -50%); /* IE 9 */
   	-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%);	

}

.more_icon{
	position: absolute;
	width: 9.322033898305085%;
	max-width:110px;
	min-width: 60px;	
    top: 95%;
    bottom: 0;
    left: 50%;
    right: 50%;
 	-ms-transform: translate(-50%, -50%); /* IE 9 */
   	-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%); 	    
}

.more_icon:before {
    content: ' ';
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
}

.more_icon img {
    vertical-align: bottom;
    display: inline-block;     
}


.feature_image {
	width:100%;
	margin: 0;
	padding: 0;
	display: block;
}


.clear {
	clear: both;
}

/*  Home Portfolio Items */

.col-group {
	display: block;
}

.col-group > div {
  padding: 1em;
}

.col-group > div > img {
	display: block;
	margin: 0 auto;
  	transition: transform 0.2s ease-in-out;	

} 

.col-group > div:hover .portfolio_item {
   -webkit-transform: translateY(-8px) scale(1.03,1.03);
   -moz-transform: translate(0, 0);translateY(-8px) scale(1.03,1.03);
   -ms-transform: translateY(-8px) scale(1.03,1.03);
   -o-transform: translateY(-8px) scale(1.03,1.03);
   transform: translateY(-8px) scale(1.03,1.03);

}

.col-group > div:hover .shadow {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.7;
}

.col-group > div {
	cursor: pointer; 
	cursor: hand; 
}

.col-group > div > p {
	text-align: center;
	font-weight: 500;
	color: #666666;
	font-size: 1.1em;
	margin: 10px 0;
}

footer {
	margin: 25px 0 75px 0;

}

footer hr {
	width:100%;
	background-color: black;
	height: 8px;
}

footer ul > li {
	display: inline-block;
	float:right;
	margin-left: 30px;
	font-weight: 300;
	font-size: 1.5em;
	padding-right: 15px;	
}

.contact_name {
	font-weight: 500;
}

/* Portfolio pages */

.portfolio > .main_container {
	margin-bottom: 1em;
	overflow: hidden;
	max-width: 1180px;
	margin: 0 auto;
	padding:0 3.389830508474576%;
}

.header {
	width:100%;
	position: relative;
}

.portfolio_logo {
	position: relative;
	z-index: 5000;
	top:0;
	left:25px;
    background: url('images/logo.png');
    background-image: url('images/logo.svg'), none;	
	background-repeat: no-repeat;
	width:50%;
	height: 210px;
	display: inline-block;
	max-width: 210px;
	max-height: 210px;
	cursor: pointer; 
	cursor: hand; 	
}

.portfolio_tile {
	width:100%;
	height:100%;
	position: absolute;
	z-index: 1000;
	top:-25%;
	bottom:0;
}

.header_contact{
	/*position: absolute;
	right:0;
	top:25%;
	z-index: 7000;
	padding-right: 10px;
	font-size: 2em;	*/
	display: none;
	visibility: hidden;
}


.nav_button {
	max-width: 61px;
	max-height: 61px;
}

.prev {
	float:left;
	display: block;
	width: 61px;
	height: 61px;
    background: url('images/icon_previous.png');
    background-image: url('images/icon_previous.svg'), none;
	background-repeat: none;
	margin: 0 10px 10px 0;
}

.prev:hover {
	background: url('images/icon_previous_hover.png');
    background-image: url('images/icon_previous_hover.svg'), none;
	background-repeat: none;
}

.prev:active, .prev:visited  {
    background: url('images/icon_previous.png');
    background-image: url('images/icon_previous.svg'), none;
	background-repeat: none;
}

.next {
	float:left;
	display: block;
	width: 61px;
	height: 61px;
    background: url('images/icon_next.png');
    background-image: url('images/icon_next.svg'), none;	
	background-repeat: none;
	margin: 0 10px 10px 0;	
}

.next:hover {
	background: url('images/icon_next_hover.png');
    background-image: url('images/icon_next_hover.svg'), none;
	background-repeat: none;
}

.next:active, .next::visited {
	background: url('images/icon_next.png');
    background-image: url('images/icon_next.svg'), none;
	background-repeat: none;
}



.description {
	width: 35%;	
	float: left;
}

.company {
	float: left;
	width: 100%;
	display: block;
	padding: 3px 0;
	font-weight: 500;
	font-size: 1.4em;
	border-bottom: 2px solid #cccccc;
	border-top: 2px solid #cccccc;
	}

.english, .french {
	font-size: 1.1em;
	font-weight: 300;
}	

.visuals {
	float: right;
	width: 59.32203389830508%;
}

.visuals > img {
	margin-bottom: 5%;
}

.floater {
	width: 100%;
	position: relative;
}

.olive_floater {
	max-width: 360px;
	position: absolute;
	top:40%;
    left: 5%;
    right: 95%;
 	-ms-transform: translate(-50%, -50%); /* IE 9 */
   	-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%); 	
	-webkit-box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    4px 4px 10px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         4px 4px 10px 0px rgba(50, 50, 50, 0.5);    
}


.callout {
	display: block;
	background-color: #f4f4f4;
	width:100%;
	height: 450px;
	position: absolute;
	top: -450px;
	z-index: -100;
}

.calloutWrapper {
	position: relative;
}

.logos > img {
	margin-bottom: 25%;
}

@media screen and (max-width: 800px) {
	.visuals {
		width:100%;
		display: block;
		float: left;
		clear: both;		
	}


	.description {
		width: 100%;
		display: block;
	}	

	.split {
		clear: both;
	}

	.olive_floater {
		display: none;
	}

	.callout {
		display: none;
	}

}


@media screen and (max-width: 400px) {
	.floater{
		margin: 0;
		padding: 0;
	}

	.olive_floater {
		display: inline-block;
		position: relative;
		float: right;
		-ms-transform: translate(0, 0); /* IE 9 */
	   	-webkit-transform: translate(0, 0); /* Chrome, Safari, Opera */
	    transform: translate(0, 0);
	    padding: 0;
	    margin: 5% auto;
	    max-width: 360px;	
		top:0;
		left:0;
		right:0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;	
	}

		.split {
		clear: both;
	}

}






/* Responsive */


@media screen and (min-width: 530px) {
  .col-group {
    overflow: hidden;
  }
  .col-group > div {
    float: left;
    width: 50%;
  }
  .col-group > div:nth-child(odd) {
    clear: left;
  }

}

@media screen and (min-width: 960px) {
  .col-group > div {
    width: 25%;
  }
  .col-group > div:nth-child(odd) {
    clear: none;
  }
  .home_header {
	margin: 13% 0 10% 0;
	}
}

/* Managing header text queries */

@media screen and (max-width: 1140px) {
	.into_text > h1 {
		font-size: 3em;
		line-height: 1.25em;
	}

	.logo {
		width: 90%;
		height: 50%;
		max-width:250px;
	}
}

@media screen and (max-width: 1070px) {
	.into_text > h1 {
		font-size: 2.5em;
		line-height: 1.25em;
	}

	.logo {
		width: 40%;
		height: 50%;
		top: 3%;
	}	
}

@media screen and (max-width: 980px) {

	.logo {
		width: 35%;
		height: 45%;
		top: 3%;
	}	
}

@media screen and (max-width: 900px) {
	.into_text > h1 {
		font-size: 2.3em;
		line-height: 1.25em;
	}

		
}

@media screen and (max-width: 830px) {
	.into_text > h1 {
		font-size: 2.2em;
		line-height: 1.25em;
	}
	.into_text {
		width:85%;	
	}	
}

@media screen and (max-width: 800px) {
	.nav {
		position: absolute;
		clear: both;
		right: 15px;
		top:205px;
	}	
}

@media screen and (max-width: 785px) {
	.into_text > h1 {
		font-size: 2.1em;
		line-height: 1.25em;
	}
	.into_text {
		width:90%;	
	}
}


@media screen and (max-width: 690px) {
	.into_text > h1 {
		font-size: 1.9em;
		line-height: 1.15em;
	}
	.into_text {
		width:90%;	
	}

	.header_contact{
		top:30%;
		z-index: 7000;
		font-size: 1.6em;	
	}

}

@media screen and (max-width: 600px) {
	.into_text > h1 {
		font-size: 1.7em;
		line-height: 1.15em;
	}
	.into_text {
		width:90%;	
	}

}

@media screen and (max-width: 540px) {
	.into_text > h1 {
		font-size: 1.6em;
		line-height: 1.15em;
	}
	.into_text {
		width:90%;	
	}
}

@media screen and (max-width: 500px) {
	.into_text > h1 {
		font-size: 1.4em;
		line-height: 1.15em;
	}
	.into_text {
		width:90%;	
	}
}

@media screen and (max-width: 450px) {
	.into_text > h1 {
		font-size: 1.2em;
		line-height: 1.15em;
		font-weight: 500;
	}
	.into_text {
		padding-top: 15px;
		width:90%;	
	}
}

@media screen and (max-width: 400px) {
	.into_text > h1 {
		font-size: 1em;
		line-height: 1.15em;
		font-weight: 500;
	}
	.into_text {
		padding-top: 15px;
		width:90%;	
	}

	.english {
		position: relative;
		top: -1px;
	}

	.col-group {
		margin-top: 50px;
	}		

	footer ul > li {
		margin-left: 5px;
		font-weight: 500;
		font-size: 1.1em;
		line-height: 1.3em;
		float: left;
		}	
			
	.contact_name {
		font-size: 1.4em;
		padding: 10px 0;
		}	

	.nav {
		position: absolute;
		top:15px;
		right:0;
		z-index: 9999;
		left:165px;
		float:right;
	}	


	.header_contact{
		display:none;	
	}

	.portfolio_logo {
		width:25%;
		height: 75px;
		display: inline-block;
		left:15px;
	}

	.visuals > img, .floater > img  {
		max-width: 300px;
		height: auto;
		margin: 10px auto;
	} 

	.logos > img {
	margin-bottom: 25%;
}

}

.ie {
	display: none;
	visibility: hidden;
}