/**** Base styles ****/
	
	
html {
background-color: #eb86ff;
}

body {
margin: 0px auto;
padding: 0px;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: left;
}


.menu{
max-width: 1220px;
height:80px;
margin: 0px auto;
padding: 10px 0px 10px 0px; /* THAT'S THE NAME ;) */
background-color:white;	
}

.logo {
position: absolute;
margin-left: 20px;
margin-top: 10px;
width: 50px;
height:50px; 
z-index:25;
}

.menu_links{
margin-top: 60px;
margin-left:auto; 
margin-right:0;
padding: 0px 0px 0px 0px;
height: 30px;
width: 290px;
display: block; 

font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 10pt;
font-weight:500;
letter-spacing:1px;
text-align: right;
z-index:2;


}

.menu_links a {
color: #333333;
text-decoration: none;
transition: color 0.15s linear;
-webkit-transition: color 0.15s linear; /* Safari */
margin-right: 14px;
}

.menu_links a:hover {
color: #ff0000; 
transition: color 0.15s linear;
-webkit-transition: color 0.15s linear; /* Safari */
}

.menu_links a:active {
color: #333333;
}




.content {
max-width: 1220px;
height:2800px;
margin: 30px auto;
padding: 20px 0px 0px 1%; /* THAT'S THE NAME ;) */
background-color:none;
}

h1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 32pt; 
color: #333333;
font-weight:normal;
font-style:italic;
line-height: 32pt;
margin-top: 0px;
margin-bottom: 10px;	
}

h2 {
height:18px;
padding: 5px 8px 5px 10px;
color: white;
background-color: black;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
letter-spacing:1.5px;
margin-top: 0px;
margin-bottom: 10px;
}

h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 32pt; 
color: #333333;
font-weight:normal;
font-style:italic;
line-height: 32pt;
margin-top: 0px;
margin-bottom: 10px;
}

h4 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21pt; 
color: #333333;
font-weight:normal;
font-style:italic;
line-height: 32pt;
margin-top: 0px;
margin-bottom: 10px;
}

h5 {
font-family: Georgia, "Times New Roman", Times, serif;
color: black;
font-size: 16px;
line-height: 20px;
font-weight: normal;
font-style: italic;
margin-top: 0px;
margin-bottom: -3px;
}

.content p {
text-align: left;
font-size: 21pt;
font-weight: 200;
line-height: 28pt;
color: #333333;
}

.bullet_descrip ul{
list-style-type: none;
font-size: 12pt; 
line-height: 14pt;
font-weight: 400;
color: #333333;
margin-top: 0px;
padding-left: 0px;
}

.bullet_descrip li{
background-image: url('../img/structure/bullet.png');
background-repeat: no-repeat;
background-position: 0px 8px;
padding-left: 10px;
margin-bottom: 8px;
}

.headerline_above{
background-color:black;
height: 1px;
width: 100%;
background-repeat:repeat-y;
z-index:5;
margin-bottom: 10px;
}

.headerline_below{
background-color:black;
height: 1px;
width: 100%;
background-repeat:repeat-y;
z-index:5;
margin-top: 10px;
margin-bottom: 15px;
}


.values_descrip{
text-align: left;
font-size: 16pt;
font-weight: 200;
line-height: 20pt;
color: #333333;
}

.leadership_headshot_cell{
float: left;
}

.leadership_headshot_cell a{
display: block;
color: #333333;
text-decoration: none;
transition: color 0.15s linear;
-webkit-transition: color 0.15s linear; /* Safari */
}

.leadership_headshot_cell a:hover{
display: block;
color: #333333;
opacity: .25;
text-decoration: none;
transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out; /* Safari */
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
}

.headshot_image{
margin-bottom: 5px;	
}


p.headshot_descrip{
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
font-size: 8.5pt; 
line-height: 10pt;
font-weight:normal;
font-style:none;
margin-top: 5px;
margin-bottom:0px;			
}

.employee_headshot_cell{
position: relative;
padding: 0;
display:block;
float: left;
margin-right: 8px;
margin-bottom: 8px;	
}
 
.employee_headshot_cell a{
text-decoration: none;
}
  
.employee_bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 10;
-webkit-transition: opacity linear .1s;
-khtml-transition: opacity linear .1s;
-moz-transition: opacity linear .1s;
-ms-transition: opacity linear .1s;
-o-transition: opacity linear .1s;
transition: opacity linear .1s;
-webkit-user-select: none;
-webkit-touch-callout: none;
opacity: 0; 
}

.employee_bg:hover {
opacity: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none  
}

.employee_name {
padding-top: 10px;
padding-left: 10px;
padding-right: 10pt;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:normal;
font-style:italic;
font-size: 21px;
line-height: 15pt;
color:#ffffff;
text-align: left;

}

#slideshow {
position: absolute;
margin-left:0px;
margin-top: 0px;

z-index:20;
}

#slideshow IMG {
position: absolute;
top:0;
left:0;
width: 66%;z-index:99;
opacity:0.0;
}

#slideshow IMG.active {
    top:0;
    left:0;

    z-index:98;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:1;
}











/* *********************************************************************************************************************
	One% CSS Grid - 12 Columns Fluid CSS Grid System

	Why One% ? Let’s count ...
		we have 12 columns (magic number divided by 2, 3, 4, 6)

		for 12 columns we need 11 margins

		so if we count margin 3%, then 3% * 11 margins = 33%

		and if we count width of 1 column 5.5%, than 5.5% * 12 columns = 66%

		in the end we have 33% + 66% = 99% aaand ???

		1% is still here so that's the name - One%

	2 starting options ? Let’s count a bit more ...
		1200px - perfectly fits 1280 screens
			12 columns
			margin 3% / 36px (full-width)
			col1 5.5% / 66px (full-width)

		1000px - perfectly fits 1024 screens
			12 columns
			margin 3% / 30px (full-width)
			col1 5.5% / 55px (full-width)
*/





/* *********************************************************************************************************************
 * Main container for all
 */
.onepcssgrid-1000, .onepcssgrid-1200 {
	margin: 0 auto;
	padding: 0 0 0 1%; /* THAT'S THE NAME ;) */
}

.onepcssgrid-1200 {
	max-width: 1220px;
}

.onepcssgrid-1000 {
	max-width: 1020px;
}

.onerow {
clear: both;
padding: 0 10px;
}

.onerowb {
clear: both;
padding: 0 10px;
}




/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float: left;
	margin: 0px 1% 15px 0;
	padding: 0px 0px 0px 0px;
}

.col2_nested{
margin: 0px 2.2% 15px 0;
}

.col2_nested_last{
width: 31.4%;
margin-right: 0px;
}

.col1.last, .col2.last, .col2_nested.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
	margin-right: 0px;
}

.col1 { width: 5.5%; }
.col2 { width: 15.7%; }
.col2_nested{ width:32%;}
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 49%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
	width: 100%;
	height: auto;
	display: block;
}





/* *********************************************************************************************************************
 * Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math
 */
@media all and (min-width: 1024px) {
	.onepcssgrid-1000 {
		max-width: 1000px;
	}

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
}





/* *********************************************************************************************************************
 * Small devices
 */
@media all and (max-width: 768px) {
	.onerow {
	}

	.col1, .col2, .col2_nested, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
		float: none;
		width: 99%;
	}
}