/*  BASE SETTINGS  */

html {
	font-size:15px;
	overflow-y: scroll;
}

body {
	margin:0;
}

/*  EDITED - changed '*' to 'html' to solve inconsistent border box behaviour between Firefox and IE11  */
html { 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; 
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }



/* -----FADING TOP BOX --------*/

.container {
  width: 100%;
  position: relative;


 
}

#top {
  z-index:11;
}

.bg {
  background: #106AB4;  /*#0165A3;*/
  width: 100%;
  height: 70px;
  opacity: 0;

}

.show {
  opacity: 1;
}

.transition {    
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}



/* --------NAV SETTINGS ---------*/


#navband {
	position:fixed;
	float:left;
	width:100%;
	padding:0 0 0 2%;
	z-index:21;
}

.nav  {
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size: 1em;
	line-height: 1.2;
}

.nav ul {
	
	height: 200px;
	margin: -70px auto 0 auto;
	width: 500px;
	z-index:11;

}

.nav li {
  float: left; 
  list-style: none;
  margin: 10px 20px;
  letter-spacing: 0px;
  color: #FFFFFF;
}


/*-------DIV SETTINGS ----*/

#parallax {
	position:relative;
	float:left;
	height:55vh;
    width:100%;
    border-bottom: 10px solid white;
    margin:0;
    z-index:1;
}

#header { 
	position: relative;
	width: 100%;
	max-width: 100%;
	max-height:530px;
	margin:0px auto 0px;
	z-index:1;  /*CHANGED FROM 90  */
	border-bottom:10px solid #FFFFFF; /*NEW ADDITION */
	/* reset box-sizing (to boostrap friendly) */
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box; 
}




#row-title, #row-subtitle, #row-subtitlepale, #row-grey, #row-white, #row-pale, #row-yellow {
	float: left;
	width: 100%;   /* EDITED from 100%, then changed back after border box changed to 'html' */
	background-color:#FFFFFF;
	padding: 10px 12.5%;
}

#row-title   {
	background-color: #106AB4; /* #1037B4;/*#F2F2F2;*/
}

#row-subtitle  {
	padding-top:20px;
	padding-bottom:0;
}

#row-subtitlepale  {
	background-color:#F2F2F2;
	padding-top:20px;
	padding-bottom:0;
}

#row-grey {
	position:relative;
	background-color:#7F7F7F;
	padding:10px 0;
}


#row-pale  {
	background-color:#F2F2F2;
}

#row-yellow  {
	background-color:#8FB51A; /*#E1DC37;*/
	height:200px;
}

#row-icons {
	position: relative;
	float: left;
	width: 100%;   /* EDITED from 100%, then changed back after border box changed to 'html'  */
	padding: 10px 12.5%;  /* EDITED LR padding  */
	background-color: #404040; /*#8398DB; /*#476FEF;*/
}



#wrapper {
	position: relative;
	float:left;
	width:100%;
	margin-top:0px;
}


#toplogo {
	position:absolute;
	top:20%;
	right:7%;
	width:20%;
	margin:0;
	z-index:21;
}


#headshot {
	float:left;
	width:20%;
	max-width:200px;
	padding:10px;
	background-color:none;
}

#thumbcaption {
	float:left;
	width:100%;
	height:2em;
	font-size:0.9em;
	line-height:1.1;
	color:black;
	padding:10px 0;
	margin-bottom:10px;
}

#map {
    width: 100%;
    height: 300px;
    background-color: #CCC;
    margin-bottom:30px;
}



#icon {
	float:left;
	width:20%;
	background-color:none;
	padding:0;
	text-align:center;
	z-index:5;
}


#col1 {
	float:left;
	width:12.5%;
	background-color:none;
	padding:1%;
	z-index:5;
}

#col2 {
	float:left;
	width:25%;
	background-color:none;
	padding:1%;
	z-index:5;
}

#col3 {
	float:left;
	width:37.5%;
	background-color:none;
	padding:1%;
	z-index:5;
}

#col4 {
	float:left;
	width:50%;
	background-color:none;
	padding:1%;
	z-index:5;
}

#col5 {
	float:left;
	width:62.5%;
	background-color:none;
	padding:1%;
	z-index:5;	
}

#col6 {
	float:left;
	width:75%;
	background-color:none;
	padding:1%;
	z-index:5;
}

#col7 {
	float:left;
	width:87.5%;
	background-color:none;
	padding:1%;
	z-index:5;	
}

#col8 {
	float:left;
	width:100%;
	background-color:none;
	padding:1%;
	z-index:5;	
}





/* -------TABLE FORMATTING ------*/

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
    vertical-align: top;
}

th {
	font-weight:bold;
	color:white;
	background-color:#808080;
}

tr:nth-child(odd){
	background-color: #f2f2f2

}


/*--------BASE FOOTER ---------*/

#baseband  {
		float:left;
		width:100%;     /* EDITED from 100%, then changed back after border box changed to 'html'  */
		min-height:100px;
		padding: 0;
		padding:0px 12.5% 50px 12.5%;
		background-color:#404040;
		z-index: 11;
	}	
	
	#baselogo  {
		float:left;
		width:25%;
		margin:20px 0;
	}
	
	#baseaddress  {

		position:relative;
		float:left;
		max-width:50%;
		margin: 20px 0 15px 0;
		padding: 0px 30px 0px 15px;
		border-left: 1px dotted #fff;
	}

	#base1  {
		position:relative;
		float: left;	
		margin: 25px 0 15px 0;
		padding: 0px 30px 15px 15px;
		border-left: 1px dotted #fff;
		
	}
	
	
	#base2  {	
		position:relative;
		float: left;
		max-width:25%;
		margin: 25px 0 15px 0;
		padding: 0px 0 15px 15px;
		border-left: 1px dotted #fff;	
	}
	
	#nu_logo  {
		clear:both;
		float:left;
		display:inline;
		width:20%;
		margin:0;
	}
	
	
	#ptnrlogos  {
		clear:both;
		position:relative;
		display:inline;
		float:left;
		vertical-align:top;
		width:100%;
		padding-top:20px;
		border-top:1px dotted #ffffff;
	}

	
	#baselinks  {
		position:relative;
		float:left;
		margin-top: 20px;
		padding: 0px 30px 0px 16px;
	}

	.address {
		float:left;
		font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
		font-size: 0.8em;
		line-height: 1.1;
		color:#ffffff;
	

		}
		
	.address a  {
		text-decoration:none;
		color:#fff;	
	}

		
	.address a:hover  {
		text-decoration:none;
		color:#C1BD25;	
	}

	
	.baselinks {
		font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
		font-size: 0.8em;
		line-height: 1.1;
		text-align:right;
		color:#ffffff;

	}

	.baselinks a  {
		text-decoration:none;
		color:#fff;	
	}

		
	.baselinks a:hover  {
		text-decoration:none;
		color:#C1BD25;	
	}




/* -------TYPESTYE SETTINGS ------*/

body  {
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:1em;
	line-height:1.4;
	text-align:left;
	color:#404040;
}

body a {
	font-size:1em;	
	text-decoration:none;
	color:#0165A3;
}

body a:hover {

	color:#00CCFF;
}



.title  {
	font-size:2em;
	line-height:1;
	color:#FFFFFF;
	padding-bottom:50px;
}

.subtitle  {
	font-size:1.5em;
	line-height:1;
	color:#0165A3;
	padding-bottom:0px;
}

.icon-text  {
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:0.9em;
	line-height:1.2;
	text-align:center;
	padding:0;
	margin-top:-20px;
	color:#FFFFFF;
}



.intro  {
	text-align:right;
	font-size:1.1em;
	line-height:1.4;
	font-weight:bold;
	color:#404040;
	padding-right:10px;
	border-right:1px dotted #000; /* blue #1991C8; */
}

.caption  {
	clear:both;
	text-align:right;
	font-size:0.8em;
	line-height:1.3;
	font-style:italic;
	color:#404040;
	padding-right:10px;
	border-right:1px dotted #000000; /* blue #1991C8; */
}

.thumbcaption  {
	text-align:left;
	font-size:0.8em;
	line-height:0.9;
	font-style:italic;
	color:#404040;
	padding-right:10px;

}

.quote {
	font-size:1.5em;
	line-height:1.2;
	font-style:italic;
	color:#8B8B8B;

	
}


.h1  {
	font-size:3em;
	line-height:1;
	color:#FFFFFF; /*#404040;*/
}

.h2  {
	font-size:2em;
	line-height:1;
	color:#404040;
}


.h3 {
	font-size:1em;	
	font-weight:bold;
	color:#000;
}

.h3 a {
	font-size:1em;	
	font-weight:bold;
	color:#0165A3;
}




/* Gradient color1 - color2 - color1 */

hr.style-one {
    border: 0;
    height: 1px;
    background: #8FD6F1;
    /*background-image: linear-gradient(to right, #ccc, #106AB4, #ccc);*/
}


/* ------MODAL SETTING ------*/

.modalDialog {
        position: fixed;
		width: 100%;
		height: 100%;
		overflow: auto;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.6);  /* rgba(16,106,180,0.8); */
         z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    
    .modalDialog > div {
    	position: fixed;
        width: 80%;
        position: relative;
        margin: 2% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 0px;
        background: none;  /*#fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);*/
    }

    .close {
        background: #606061;
        color: #FFFFFF;
        font-size:18px;
        line-height:25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        /*-moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;*/
    }

    .close:hover { background: #106AB4; }



/* -------IMAGE SETINGS -----*/

img.gallery  {
	float:left;
	width:25%;
	padding:10px;
}

img.header {
	width:100%;
	min-width:960px;
}

img.toplogo  {
	position:relative;
	float:right;	
	width:100%;
	max-width:300px;
	margin-right:12.5%;
	z-index:11;
}

img.logosmall {
	float:left;
	width:120px;
	padding-top:20px;
	padding-right:25px;
}

img.baselogo  {
	width:90%;
	max-width:200px;
	margin-bottom:15px;
}


img.icon {
	position:relative;
	width:55%;
	padding:0;
	margin-left: auto;
	margin-right: auto;
}

img.lhcolumn {
	float:right;
	width:100%;
	max-width:350px;
	padding-bottom:10px;
} 

img.lhcolumnsml {
	float:right;
	width:100%;
	max-width:200px;
	padding-bottom:10px;
} 

img.phmax {
	float:left;
	width:100%;
	margin:10px 0;
}

img.ph100 {
	float:left;
	width:100%;
	max-width:750px;
}

img.ph80 {
	float:left;
	width:80%;
}

img.ph70 {
	float:left;
	width:70%;
}

img.ph50 {
	float:left;
	width:50%;
}

img.nu_logo {
	float:left;
	width:70%;
	max-width:200px;
	min-width:150px;
	padding:20px 0;
	margin-right:30px;
}

img.ptnrlogo {
	clear:both;
	width:19%;
	max-width:150px;
	margin-right:1%;
}





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

#toplogo {
	top:15%;
}

}



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

	#toplogo {
		top:10%;
	}

		
	#baseband  {
		padding:0px 12.5% 50px 12.5%;
	}

}



@media only screen and ( max-width: 1023px ) 
	{	
	
	#navband {
		padding-left:20px;
	}
	img.logosmall {
	width:100px;
}

	#toplogo {
		width:15%;
	}

	#icon {
		padding:0 5px;
	}
	
	#col2 {
		width:100%;
	}
	#col6 {
		width:100%;
	}
	
	#headshot {
		width:25%;
	}

	
	.intro  {
		text-align:left;
		padding-right:0px;
		border-right:0px dotted #000;
	}
	
	.caption  {
		text-align:left;
		padding-right:10px;
		border-right:0px dotted #000000; /* blue #1991C8; */
	}
	
	#baseaddress  {
		max-width:75%;
	}
	
	
	#base2  {	
		/*position:relative;
		float: left;
		max-width:20%;
		margin: 25px 0 15px 0;
		padding: 0px 0 15px 15px;*/
		border-left: 0px dotted #fff;	
	}
	
	
	#baselogo  {
		float:left;
		display:inline;
		width:25%;
		margin:20px 0;
	}

	img.lhcolumn {
		float:left;
	} 
		
	img.lhcolumnsml {
		float:left;
	} 

}
	

	
@media only screen and ( max-width: 720px ) 
	{	
	
		
	#headshot {
		width:33%;
	}

	
	.h1  {
		font-size:2.5em;
		line-height:1.2;
		}

	.h2  {
		font-size:1.8em;
		line-height:1.2;
		}

	.icon-text  {
		font-size:0.7em;
		line-height:1.2;
		}
}

@media only screen and ( max-width: 480px ) 
	{	
	
		
		#headshot {
		width:50%;
	}

	
	.h1  {
		font-size:2em;
		line-height:1.2;
		}

	.h2  {
		font-size:1.5em;
		line-height:1.2;
		}

	.icon-text  {
		font-size:0.6em;
		line-height:1.2;
		}
}