body{
    width:100%;
    height:100%
}

#topCont{
    width:100%;
    background-color:#323a45;
	padding-top:15px;
	padding-bottom:15px;
	padding-left:0;
	padding-right:0;
	margin-top:4vh
}
.displayNone{
	display:none;
}
.hightZindex{
	z-index:100
}
.displayBlock{
	display:block !important;
}
.inline{
	display:inline-block
}
.minus10vwWidth{
	width:calc(100% - 10vw)
}
.padding-left{
	padding-left: 6vw !important;
}
.yellowText{
    color:#FFEB99;
	font-size: 2.1vw;
}
.whiteMediumText{
	color:white;
	font-size: 1.5vw;
}
.blackMediumText{
	color:black;
	font-size: 1.5vw;
}
.ul_list{
	font-size:1.5vw;
	margin-top: 2vh;
}
.li-margin{
	margin: 0 0 10px 0
}
.imgList{
	margin-left:10% !important;
	position:relative;
	height:24vw
}
.imgList img{
	width:22vw
}
.inline{
	display: inline-block;
	vertical-align:middle
}
.items { 
    margin: 0 0 1em;
    width: 100%;
}
.contactGroup{
	width:75%;
	text-align:left
}
.clickable{
	cursor:pointer
}
#img1{
	position: absolute;
	top: 35%;   
	-webkit-box-shadow: 10px 10px 56px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 56px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 56px 0px rgba(0,0,0,0.75);
	cursor:pointer
}
#img2{
	position: absolute;
	right: 45%;
	top: 18%;
	-webkit-box-shadow: 10px 10px 56px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 56px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 56px 0px rgba(0,0,0,0.75);	
	cursor:pointer
}
#img3{
	position: absolute;
	right: 15%; 
	-webkit-box-shadow: 10px 10px 56px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 56px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 56px 0px rgba(0,0,0,0.75);
	cursor:pointer	
}
#modal1{
	background-image:url("../img/inst1.png");
	background-repeat:no-repeat;
	background-color:transparent;
	background-size:contain;
	height: 100%;
}
#modal2{
	background-image:url("../img/inst2.png");
	background-repeat:no-repeat;
	background-color:transparent;
	background-size:contain;
	height: 100%;
}
#modal3{
	background-image:url("../img/inst3.png");
	background-repeat:no-repeat;
	background-color:transparent;
	background-size:contain;
	height: 100%;
}
.modal {
    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 {
    background-color: transparent !important;
    width: 40%;
    height: 54%;
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
	border:none !important;
	box-shadow: none !important;
}
.list-group-item{
	border:none !important;
	padding:0 !important;
	background-color:transparent !important;
}

#whiteBullet1 li, #whiteBullet2 li, #blackBullet li{
	margin:0 0 2vh 0
}
#whiteBullet li:last-child, #blackBullet li:last-child{
	margin:0 0 0 0
}
#blackBullet li:before {    
font-family: 'FontAwesome';
content: '\f111';
margin:0 10px 0 -15px;
font-size:0.6vw;
color: #000;
}
#secondList{
	background-color:#606EA6;
	padding:2vh 2vw 2vh 0vw;
	color:white;
}
#whiteBullet1 li:before {    
	font-family: 'FontAwesome';
	content: '\f111';
	margin:0 10px 0 -15px;
	font-size:0.6vw;
	color: #fff;
}
#whiteBullet2 li:before {    
	font-family: 'FontAwesome';
	content: '\f111';
	margin:0 10px 0 -15px;
	font-size:0.6vw;
	color: #fff;
}
#whiteBullet2 li:last-child:before {    
	content: '';
}
#eeLogo{
	background-image:url("../img/eeLogo.png");
	background-repeat:no-repeat;
	background-size:contain;
	padding-top:4vw;
	width:8vw;
	margin-top:2vw;
	margin-right: 1vw;
	float:right
}
#oppLogo{
	background-image:url("../img/oppLogo.png");
	background-repeat:no-repeat;
	background-size:contain;
	padding-top:4vw;
	width:8vw;
	margin-top:2vw;
	float:right
}
#contactCont{
	background-image:url("../img/parlex.png");
	background-repeat:no-repeat;
	background-size:cover;
	height:10vw;
	padding:3vw 6vw 3vw 3vw;
	margin-left: -15px;
    margin-right: -15px;
	text-align:center;
	padding-left:4vw
}
#locationIcon, #emailIcon, #phoneIcon{
	font-family: 'FontAwesome';
	font-size:2.5vw;
	color:white;
	margin-right:0.5vw
}
#contactEmail, #contactInfo{
	width:30vw
}
#contactPhone{
	width:18vw
}
#contactEmail a, #contactInfo a, #contactPhone a, #fax{
	font-size:1vw;
	color:white
}

/* Mobile Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	 #contactEmail a, #contactInfo a, #contactPhone a, #fax{
		font-size:2vh;
		
	}
	#contactEmail, #contactInfo, #contactPhone{
		display:block;
		width:100%
		
	}
	#locationIcon, #emailIcon, #phoneIcon{
		font-size:3.5vh;
	}
	#contactCont{
		padding-top:3vw;
		padding-bottom:3vw;
		padding-left:2vw;
		padding-right:2vw;
		height:22vh
	}
	#oppLogo, #eeLogo{
		padding-top:0;
		width:15vw;
		height:5vh
	}
	#blackBullet li:before {    
		font-family: 'FontAwesome';
		content: '\f111';
		margin:0 10px 0 -15px;
		font-size:1.2vw;
		color: #000;
	}
	#whiteBullet1 li:before {    
		font-family: 'FontAwesome';
		content: '\f111';
		margin:0 10px 0 -15px;
		font-size:1.2vw;
		color: #fff;
	}
	#whiteBullet2 li:before {    
		font-family: 'FontAwesome';
		content: '\f111';
		margin:0 10px 0 -15px;
		font-size:1.2vw;
		color: #fff;
	}
	.padding-left{
		padding-left:4vw !important
	}
	.yellowText{
		font-size:2.2vw
	}
	.contactGroup{
		width:auto
	}
	.whiteMediumText{
			font-size:2.5vw
	}
	.ul_list , .blackMediumText{
		font-size:3vw
	}
	.modal-content{
		width:90vw;
		height:40vh
	}
	
}
/* Mobile landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 860px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  .yellowText{
	font-size:2.3vw
	}
   .whiteMediumText{
	   font-size:2vw
   }
   .ul_list {
		font-size: 2.5vw;
		margin-top: 4vh;
	}
	.blackMediumText {
		font-size: 2.5vw;
	}
	.whiteMediumText{
			font-size:2.5vw
	}
	.modal-content{
		width:60vw;
		height:80vh
	}
	#blackBullet li:before {    
		font-size:1.5vw;
	}
	#whiteBullet1 li:before ,#whiteBullet2 li:before{    
		font-size:1.5vw;
	}
	#eeLogo, #oppLogo{
		width:12vw;
		height:8vw
	}
	#contactCont{
		height:17vw
	}
	#contactPhone{
		width:20vw;
	}
	#contactEmail, #contactInfo {
		width:34vw
	}
	#contactEmail a, #contactInfo a, #contactPhone a, #fax{
		font-size:3.5vh;
		
	}
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1280px) 
  and (orientation: portrait) 
{
	.yellowText{
		color:#FFEB99;
		font-size: 2.2vw;
	}
	#locationIcon, #emailIcon, #phoneIcon{
		font-family: 'FontAwesome';
		font-size:4vw;
		color:white;
		margin-right:0.5vw
	}
	#contactCont{
		height:15vw
	}
	#contactPhone{
		width:20vw;
	}
	#eeLogo, #oppLogo{
		width:12vw;
		height:8vw
	}
	#contactEmail a, #contactInfo a, #contactPhone a, #fax{
		font-size:1.7vw;
		color:white
	}
	.ul_list{
		font-size:2.3vw
	}
	.whiteMediumText{
		font-size:2.2vw
	}
	.blackMediumText {
		color: black;
		font-size: 2.3vw;
	}
	.modal-content{
		width:70vw;
		height:35vh
	}
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
{
	.yellowText{
		color:#FFEB99;
		font-size: 2.2vw;
	}
	.modal-content{
		width:50vw;
		height:70vh
	}
	#contactEmail a, #contactInfo a, #contactPhone a, #fax{
		font-size:1.5vw;
		color:white
	}
	#contactCont{
		height:10vw
	}
	#eeLogo, #oppLogo{
		width:12vw;
		height:8vw
	}
	.whiteMediumText{
		font-size:2vw
	}
	.ul_list{
		font-size:2.3vw
	}
	.blackMediumText {
		color: black;
		font-size: 2.3vw;
	}
	.modal-content{
		width:60vw;
		height:60vh
	}
}