@charset "UTF-8";
/* CSS Document */

html {
	height: 100%;
}

body{
	padding:0;
	margin:0;
	font-family: "proxima-nova",sans-serif;
	background: #ffffff url("http://www.trainanddevelop.ca/APTIM/images/APTIMBG.jpg") center no-repeat;
	background-size: cover;
	height: 100%;
}

/*-- ANIMATIONS START --*/

div#backButton {
    /* background-image: url(../images/back-button-test.png); */
    background-color: #fff;
    display: table;
    color: #000;
    padding: 5px 10px 5px 8px;
    cursor: pointer;
    border: 1px solid #000;
}

.locationButton{
	display: inline;
	cursor: pointer;
}

	.locationButton:hover {
		background-color: #f58220;
		border-color: #AC5105; 
	}

.fade-out {
	transition: opacity 1s linear;
	opacity: 0;
	-webkit-transition: opacity 1s linear;
	-moz-transition: opacity 1s linear;
	-ms-transition: opacity 1s linear;
	-o-transition: opacity 1s linear;
}

.hidden { /* This should be added after the fade-out transition using transitionend event https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event */
	display: none;
}

/*--- ANIMATIONS END ---*/


/*-- REG BUTTON START --*/

.registrationButton{
	color:white; 
	padding:none; 
	margin:none; 
	color: #304989; 
	font-weight:bold; 
	font-size:2em; 
	text-align: center;
}

.registrationButton:hover .registerText{
background-color: #00426B;
color:#ffffff;
}

.registrationButton:hover .typeText{
/*color: #304989;*/
background: rgba(255,255,255,0.7);
color: #f58220;
}

.fas{
font-size: 0.8em;
}

.registerText{
	width: 100%; 
	margin:none; 
	background-color:white; 
	font-weight:normal; 
	font-size: 0.7em; 
	padding:0.9em 0;
}

.typeText{
	background: rgba(255,255,255, 1); 
	padding:0.4em; 
	color:#f58220;
	font-weight:normal;
	font-size: 1.2em;
}

#siteEmployee,
#siteCraft{

	cursor: pointer;
}

/*--- REG BUTTON END ---*/

.celanese a#siteEmployee,
.cargill a#siteCraft,
.nutrien a#siteEmployee,
.richardson a#siteCraft,
.vale a#siteEmployee,
.vale > br {
	display: none !important;
}

/*--- MODAL START ---*/

  /* The Modal (background) */
  .modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  #modal-content {
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
	display: table;
  }

  /* Modal Proceed */

  #modal-content-a {
	display: table;
    right: 0px;
    float: right;
}

		#modal-content-a .mainButton.button {
			color: #ffffff;
			background: #239FC4;
			background: -moz-linear-gradient(top, #239FC4 49%, #0e7492 52%);
			background: -webkit-linear-gradient(top, #239FC4 49%,#0e7492 52%);
			background: linear-gradient(to bottom, #239FC4 49%,#0e7492 52%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5a27e', endColorstr='#e65300',GradientType=0 );
		}

		#modal-content-a .mainButton.button:hover {
			color: #ffffff;
			background: #0eb9ec;
			background: -moz-linear-gradient(top, #0eb9ec 49%, #0390bb 52%);
			background: -webkit-linear-gradient(top, #0eb9ec 49%, #0390bb 52%);
			background: linear-gradient(to bottom, #0eb9ec 49%, #0390bb 52%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5a27e', endColorstr='#e65300',GradientType=0 );
		}

  /* Modal Text */

	p#modal-content-p {
		line-height: 23px;
		font-weight: 300;
		letter-spacing: 0.2px;
	}

  
  /* The Close Button */
  .close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
  }

/*--- MODAL END ---*/

#store1, #store2, #store3, #store4, #store5, #store6, #store7, #store8, #store9, #store10, #store11, #store12, #store13, #store14, #store15, #store16, #store17, #store18, #store19, #store20, #store21, #store22, #store23, #store24, #store25, #store26, #store27, #store28, #store29, #store30, #store31, #store32, #store33, #store34, #store35, #store36, #store37, #store38{
	display:none;
}

#selectorContainer{
	width: 25%;
}

#locationSelector{
	float:left;
}

.bgContainer {
	background-color: rgba(255, 255, 255, 0.5) !important;
	height: 100%;
	overflow: auto;
}

.linkHolder a{
	text-decoration:none;
	color:white;
}

.linkHolder{
	width: 21em;
	float: right;
	margin-top:1.5em;
}

.launchButton{
	background: #f05c22;
	padding:7%;
	text-align: center;
	width:100%;
	border-radius: 50px;
	font-weight:bold;
}

.launchButton:hover{
	background: #ff6528;
}

.clear{
	clear:both;
}


a{
	text-decoration:none;
}

#topBox{
	background-color:#133154;
	height: 1.0em;
	padding-left: 5%;
	padding-top: 1.5%;
	box-shadow: 0px 2px 3px rgba(0,0,0, 0.2);
}

#APTIMLogo{
	float:left;
	max-height: 75px;
	height: 25%;
	margin-bottom: 40px;
}

#contentArea{
	padding: 4% 5%;
}

#selectables {
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
    flex-direction: row;
}

#opportunityType {
    flex-basis: 60%;
}

		.locationButton{
			color: #FFFFFF !important;
			font-size: 2.0em;
			font-weight:400;
			float:left;
			background: #004275;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center;
			padding: 1.5% 2%;
			line-height: 1.0em;
			flex-basis: 27%;
			height: 3.0em;
			border-bottom: 4px solid #002441;
			text-align:center;
			margin-bottom:1.0em;
		}

		div#aptim {
			background-image: url(../images/APTIM_white_logo_SP_v2.png);
		}

		div#cargill {
			background-image: url(../images/cargill_logo_white.png);
		}

		div#celanese {
			background-image: url(../images/celanese_logo_white.png);
		}

		div#irving {
			background-image: url(../images/irving_logo_white.png);
		}

		div#richardson {
			background-image: url(../images/Richardson_logo_white.png);
		}

		div#suncor {
			background-image: url(../images/suncor_logo_white.png);
		}

		div#syncrude {
			background-image: url(../images/syncrude_logo_white.png);
		}

		div#nutrien {
			background-image: url(../images/nutrien_logo.png);
		}

		div#vale {
			background-image: url(../images/vale_white_logo.png);
		}

		div#nwr {
			background-image: url(../images/nwr-logo-white.png);
		}

		.rightDiv{
			float:right;
			margin-right:5%;
			width: 35%;
			text-align:center;
		}
		
		#footer {
		   position:fixed;
		   left:0px;
		   bottom:0px;
		   height:30px;
		   width:100%;
			padding: 1% 0 0.5% 0;
		   background:#444444;
			color:white;
			text-align: center;
			font-family: calibri, verdana, arial, helvetica, sans-serif;
			font-weight:bold;
		}
		
		.selectText{
			width:100%;
			text-align:center;
			font-size: 20px;
			font-weight: bold;
			margin-bottom:10px;
			color:white;
		}

		.titleSub{
			font-size: 0.5em;
			color: #c9c9c9;
			font-weight: normal;
		}

		/* IE 6 */
		* html #footer {
		   position:absolute;
		   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
		}

		
		

	
		/* BUTTONS */
			.button{
				color: #333333;
				font-weight: bold;
				border: 1px solid #333333;
				padding:0.5em 1.2em 0.5em 1.2em;
				/*GRADIENT SETTINGS*/
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+49,f4f4f4+50 */
				background: #eeeeee; /* Old browsers */
				background: -webkit-linear-gradient(#ffffff 49%, #f4f4f4 50%);
				background: -o-linear-gradient(#ffffff 49%, #f4f4f4 50%);
				background: linear-gradient(#ffffff 49%, #f4f4f4 50%); /* FF3.6-15 */
				 /* Chrome10-25,Safari5.1-6 */
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
				/* END GRADIENT SETTINGS */

			}

			.button2{
				color: #002a31;
				font-weight: bold;
				text-align: center;
				border-radius: 5px;
				border: 1px solid #555;
				padding:0.5em 1.2em 0.5em 1.2em;
				/*GRADIENT SETTINGS*/
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+49,f4f4f4+50 */
				background: #f6f6f6; /* Old browsers */
				background: -webkit-linear-gradient(#ffffff 49%, #f4f4f4 50%);
				background: -o-linear-gradient(#ffffff 49%, #f4f4f4 50%);
				background: linear-gradient(#ffffff 49%, #f4f4f4 50%);  
				 /* Chrome10-25,Safari5.1-6 */
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );*/ /* IE6-9 */
				/* END GRADIENT SETTINGS */

			}
		
			/* ADMIN Button */
				
				#adminButton{
					margin-top:20px;
				}

				.mainButton{
					float:right;
					margin: 0px 0px 0px 5%;
				}
		
				.mainButton:hover{
					color:#ffffff;
					/*GRADIENT SETTINGS*/
					/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5a27e+49,e65300+52 */
					background: #239FC4; /* Old browsers */
					background: -moz-linear-gradient(top,  #239FC4 49%, #0e7492 52%); /* FF3.6-15 */
					background: -webkit-linear-gradient(top,  #239FC4 49%,#0e7492 52%); /* Chrome10-25,Safari5.1-6 */
					background: linear-gradient(to bottom,  #239FC4 49%,#0e7492 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5a27e', endColorstr='#e65300',GradientType=0 ); /* IE6-9 */
					/* END GRADIENT SETTINGS */

				}
		
			/* END ADMIN BUTTON */
			/* ----------------*/		
			/* ACCESS BUTTONS */
		
				
		
				.buttonHolder{
					line-height: 2em;
					margin-bottom: 3%;
				}

				.logoButtonHolder{
					margin-bottom: 3%;
					text-align:center;
				}
		
				.accessButton{
					font-size: 2em;
					padding:3% 6% 2% 6%;
					clear: right;
					width: 100%;
					text-align:center;
				}
		
				.accessButton:hover{
					color:#ffffff;
					/*GRADIENT SETTINGS*/
					/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5a27e+49,e65300+52 */
					background: #002a31; /* Old browsers */
					background: -moz-linear-gradient(top,  #004b57 49%, #002a31 52%); /* FF3.6-15 */
					background: -webkit-linear-gradient(top,  #004b57 49%,#002a31 52%); /* Chrome10-25,Safari5.1-6 */
					background: linear-gradient(to bottom,  #004b57 49%,#002a31 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5a27e', endColorstr='#e65300',GradientType=0 ); /* IE6-9 */
					/* END GRADIENT SETTINGS */

				}

				.logoButton:hover{
					color:#ffffff;
					/*GRADIENT SETTINGS*/
					/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5a27e+49,e65300+52 */
					background: #FFFFFF; /* Old browsers */
					background: -moz-linear-gradient(top,  #ebebeb 49%, #dv3d3d3 52%); 
					background: -webkit-linear-gradient(top,  #ebebeb 49%,#d3d3d3 52%); 
					background: linear-gradient(to bottom,  #ebebeb 49%,#d3d3d3 52%); 
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
					/* END GRADIENT SETTINGS */

				}

				.instructions{
					font-size: 0.5em;
					color: #777777;
				}

				.accessButton:hover .instructions{
					color: #eeeeee;
				}

				.logoButton:hover .instructions{
					color: #eeeeee;
				}
		
			/* END ACCESS BUTTONS */
		
		
	/* Large Devices, Wide Screens */
    @media only screen and (max-width : 1000px) {
		
		#selectorContainer{
			width: 100%;
		}
		
		#locationSelector{
			width:96%;
			padding-left:2%;
		}
		
		
		
		#showLocation{
			width:100%;
		}
		
		.linkHolder{
			width: 87%;
			float: none;
			margin-top:1.5em;
		}
		
		.launchButton{
			background: #f05c22;
			padding:7%;
			text-align: center;
			width:100%;
			border-radius: 50px;
			font-weight:bold;
			font-size: 1.5em;
		}
		
		
		.locationButton{
			font-size: 1.5em;
		}
		
		.rightDiv{
			float:none;
			clear:both;
			margin-top:2%;
			width: 100%;
		}
		
		.buttonHolder{
			line-height: 4em;
			margin-bottom: 5%;
		}
		
		.accessButton{
			font-size: 3em;
			padding:1% 6% 1% 6%;
			clear: right;
			margin-right: 5%;
			width: 88%;
			text-align:center;
		}
		
		.logoButton{
			font-size: 3em;
			padding:1% 6% 1% 6%;
			margin-right: 5%;
			width: 88%;
			text-align:center;
			clear: right;
		}
		
		.instructions{
			font-size: 22px;
			color: #777777;
			line-height:0.5em;
		}
		#footer {
		   height:50px;
			padding: 4% 5%; 0% 5%;
			font-size: 25px;
		}
		
		#footerContainer{
			width: 89%;
		}
		
    }
		
		/* Large Devices, Wide Screens */
    @media only screen and (max-width : 615px) {
	
		#selectorContainer{
			width: 98%;
		}
		
		#locationSelector{
			float:left;
		}
		
		.locationButton{
			font-size: 1.0em;
			
		}
		
		.buttonHolder{
			line-height: 2em;
			margin-bottom: 3%;
		}
		
		.accessButton{
			font-size: 1.5em;
			padding:1% 6% 1% 6%;
			clear: right;
			width: 85%;
			text-align:center;
		}
		
		.logoButton{
			font-size: 1.5em;
			padding:1% 6% 1% 6%;
			clear: right;
			width: 85%;
			text-align:center;
		}
		
		#footer {
			font-size: 18px;
		}
		
	}