/* CSS Document */

body {
	background-color: #0b0b0b;
	color: #888;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11pt;
	margin: 0;
    width:100%;
	
	      background-image: url('../images/body-bg4.jpg'); /* Replace with your image path */
      background-attachment: fixed;
      background-position: center top;
      background-repeat:repeat-y;
      background-size: cover;

}
main{
    
    width: 100%;
    margin:auto;
    margin:0;
    padding-bottom: 80px;
}
footer{
    text-align: center;
    padding: 80px;
    background-color: rgba(24,24,24,0.50);
}
main > section{
    box-sizing: border-box;
    width:100%;
    padding: 40px;
}
header > section > .section-inner-container,
footer > section > .section-inner-container,
main > section > .section-inner-container,
.section-inner-container{
    box-sizing: border-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
/*----------    FLEX BOX THE NAV LISTS     -----------------------*/
nav > ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; 
    justify-content: center;
    align-content: stretch;
}
.no-stretch{
    align-items:center !important; 
 align-content:center; !important;
}
nav > ul >li{
    list-style: none;
    margin: 0;
    padding: 0;
    flex-grow: 1;
    flex-basis: 20%;
    position: relative;
    overflow: hidden;
}
nav > ul > li > a{
display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 40px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    min-height: 150px;
}
nav > ul > li > p {
    margin: 0;
    text-align: center;
}
nav > ul > li > a > .cover {
    position: absolute;
    top:0;
    margin: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 20;
    background-color: rgba(255,255,255,0);
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}
nav > ul > li > a:hover > .cover {
    background-color: rgba(255,255,255,0.5);
}
nav > ul > li > a > p {
    background-color: rgba(255,255,255,.75);
    padding: 10px;
    z-index: 10;
    position: absolute;
    top:auto;
    margin: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}
nav > ul > li > a > iframe,
nav > ul > li > a > img{
position: absolute;
    width: 100%;
    height: auto;
    z-index: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}
nav > ul > li > * > img.h {
    width: 100%;
    height: auto;

}
nav > ul > li > a > iframe,
nav > ul > li > * > img.v {
    width: auto;
    height: 100%;
}
nav > ul > li > a:hover > img {
    opacity: 0.5;
      
}

a{
	transition-property:all;
	transition-delay:0s;
	transition-duration:0.15s;
	transition-timing-function:cubic-bezier(.5,0,0,.5);
	
}
a:link, a:hover, a:visited{
	text-decoration: underline;
}
a:link {
	color:#c42;
}
a:hover {
	color:#720;
}
a:visited {
	color:#c42;
}
a:visited:hover{
	color:#720;
}
p{
	padding:0;
	margin:0;
	top:0;
	left:0;
	bottom:0;
	right:0;
	position:relative;
	margin-bottom:0.5em;
	margin-top:0em;
}
h1,h2,h3,h4,h5,h6{
	font-family:Tahoma, Geneva, sans-serif;
	color:#047;
}
h1{
	font-size:3em;
	margin:0;
	padding:0;
	line-height:1em;
	font-weight:lighter;
}
h2{
	font-size:2em;
	font-weight:lighter;
	border-bottom:solid #5396ba 1px;
	margin-bottom:.5em;
}
h3{
	font-size:1.5em;
	font-weight:normal;
	margin-top:0;
}
ul{
	margin-bottom:0.25em;
	margin-top:0;
	padding-left:3em;
	q padding-left:0;

}

ul li{
	list-style-type:disc;	
	margin-left:1em;
}
ul li ul li{
	list-style-type:circle;	
}
ul li ul li ul li{
	list-style-type:square;	
}


iframe{
margin:auto;	
}
.content .subheader{
margin-left:8em;	
}
.subheader{
font-size:1em;
font-style:normal;
font-weight:normal;

margin-top:0.5em;
margin-bottom:1em;
}
.resume-content{
margin-left:8em;	
margin-right:3em;	
}
.resume-content h3{
margin-bottom:0.5em;	
}
.resume-title{
	font-style:italic;	
	font-style:oblique;
	color:#432;	
}
h3.resume-title{
top-margin:-2em;	
}
.resume-content p{
padding-left:3em;	
}
.resume-entry{
	margin-bottom:1.5em;
	
}
.logoHeader{
	background-image:url(../images/msheader100.png);
	background-position:left top;
	background-repeat:no-repeat;
q	border-bottom-style:solid;
q	border-bottom-color:#003366;
q	border-bottom-width:4px;
	height:96px;
	width:100%;
}
.content{
	width:100%;
	padding-left:0em;
	font-size:1em;
	margin-left: 0em;
}
.tableGallery{
padding:6pt;
background-color:#EFF7FC;
}
.tableHead{
background-image:url(../images/grad32v_blue_drk.gif);
background-position:bottom;
font-weight:bold;
font-size:1.2em;
color:#FFFFFF;
}
.footer {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1.5em;
	font-size: 0.8em;
	font-style:normal;
	font-weight:normal;
	padding-top: 2em;
	text-align: center;
}

/*------- T O P  V I M E O    P L A Y E R -------------------------------*/

.demo-video{
    text-align: center;
}

.vimeo-player{
    width: 90%;
}

@charset "utf-8";
@media only print {
.printOnly {display: inherit;}
.screenOnly {display: none;}
.resume-content, .content .subheader {margin-left: 4em;}
}
@media only screen {
.printOnly {display: none;}
.screenOnly {display: inherit;}
}

/* Smartphones (portrait and landscape) ----------- */
/*@media only screen 
and (min-resolution: 120dppi)
and (max-width : 720px){
#middle{
	background-color:#F00 !important;
	
}
body{
	font-size:24pt !important;
	
}
	
}
@media only screen 
and (min-resolution: 120dppi)
and (min-width: 800px){		
#middle{
	background-color:#0B0 !important;
	
}
body{
	font-size:16pt !important;
	
}
	
}


*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}