/* Custom styling for the Bootstrap website. 
These styles do not ship with Bootstrap. 
Some are overrides of existing Bootstrap styles, while others are new styles not existing in Bootstrap.
In the starting CSS document, styles are based on custom classes not in Bootstrap.
*/

/* below styles are the default -- take effect at resolutions <768 px */
body { color:#3f3f3f;font-family: 'Source Sans Pro', sans-serif; }
ul li { list-style: none}
nav.bg-red { background-color: #6d0000; color:#fff; padding: 1em 0; line-height: 0.1em; width:100%; }
nav.bg-red ul { margin:0; float:right; }
nav.bg-red ul li { margin:0; float:left; }
nav.bg-red ul li a {font-size: 12px; color:#fff; cursor: pointer; text-decoration: none;}
nav li { padding-right: 1.2em }
.container-fluid{ margin-left: 50px; margin-right: 50px}
.row {margin-bottom:2.5em}

.col-pm{ margin:0 15px
}
.btn { font-size:.9em; padding-left: 0 }
.btn a { color:#a70803 !important;}
.btn a:hover{color:#a70803}
.logo {
	text-align: center;
	margin-top: 1.5em;
    margin-bottom: 1em;
}
.row h3{ margin-left: 15px}
.navbar-toggle {
	margin-right: 7px;}
.tagline {
	color: #602F8D;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 1.5em;
	text-align: center;
	padding-top: 1em;
}
.row h3 { font-size:30px }




.navbar { margin-bottom:0}
.navbar-default {
    background-color:#fff;
    border-color:#fff;
}
.navbar-nav { font-size:1.2em;   }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {     color: #333; 
    background-color: #fff;
}
.navbar-bg {
    position: relative; 
    min-height: 30px;
    margin-bottom: 10px; 
}

.nav {margin:0 auto !important; text-align: center }
.nav-bar{ margin:0 auto; text-align: center; background: #fff;  }
.nav-bar li { list-style-type: none;
    display: inline-block;
    vertical-align: top; margin-right: 1em; font-size: 1.2em }
.nav-bar li a{ color:#333}
.nav-bar li::after {
    color: #ccc;
    content: "|";
	padding-left: 1em
}

.btn-secondary a{
    color: #fff;
}
.text2 { font-size:1.25em;padding: 1em 0;}
.text { font-size:1.2em;padding: 1em 0;}
.text-name { font-size:1.4em }
.text-prof { font-size:1em; color:#888; font-weight: 500; font-style:italic}
.text-prof02 { font-size:1.1em;color:#656565;font-weight: 300; }
.form { background-color: #F2F2F2;  width: 100%; font-size:1.125em}
.form  .Title {
	font-size: 1.25em;
	background-color:#7b7b7b;padding: 7px 15px;
    color: #fff;
	margin-top: 0;
}
.form .form-group {padding: 3px 15px;}

.form .onefield input {
    width: 100%;
    padding: .3em;
    border-color: #CCC;
	border: 1px solid #d1d1d1!important;
}
.form select{
    box-sizing: border-box;
	width: 100%;
	background-color:#fff;
    
    border-radius: 0;
    border: 1px solid #d1d1d1;
    line-height: 1.4em;
	height: 2.3em;;
}
.form input[type=button], .form input[type=submit] {
    background-color: #c00700;
    padding: .6em 0;
	width:100%;
    border-radius: 3px;
    font-size: 1em;
    border: 0;
    color: #fff;
	margin: 1em 0;
    text-transform: uppercase;
}
.red { color: #ec0c04; font-weight: bold}
.form input[type=button]:hover {background-color: #ec0c04; }
.form .onefield { margin-bottom: 7px}

.bg-gray { background-color: #7b7b7b;  overflow: auto; padding: 2em;  background-image: url('../images/bg-logo.jpg');
    background-repeat: no-repeat;
   background-attachment:fixed, scroll;
    background-position: center top;}
.bg-gray .contents { background-color:#f2efef;box-shadow: 0 0 10px rgba(0,0,0,.15), 0 3px 3px rgba(0,0,0,.15);
}

.bg-gray h4 {padding: 1em 1em 0.1em 1em; font-weight:bold;font-size: 1.4em;
    letter-spacing: 0.01em;}
.bg-gray .btn-yellow {
    background-color: #e3af39;
    border-radius: 0;
    padding: 0.5em;
    font-size: 1.2em;
    color: #fff;
    letter-spacing: 0.05em;
}
.bg-gray li { font-size:1.2em; line-height: 1.5em}
.bg-gray li::before { content: "•"; color: #333; display: inline-block; width: 1em;margin-left: -1em}
.bg-gray .btn-red {   }
.bg-gray ul {min-height: 330px; width:90%}

.bg-blue::after { content: " ";
    display: table; clear:both}
.apply {
    padding-bottom: 37.5px;  text-align: center }
.apply a:hover{ color:#fff }

.form h3 { margin-left: 0}
.button{ background-color: #b1040e;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1.5;
    padding: .4444444444em 3em .5555555556em;
    text-align: center;
    text-decoration: none;
    transition: all .25s ease-in-out;
    
    -webkit-font-smoothing: antialiased;
   border-radius: 0;  
    box-shadow: 0 0 10px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1);
    vertical-align: middle;
    font-size: 1.25em;}

.bg-blue { background-color: #1d3f6a; padding: 2em; overflow: auto; background-image: url('../images/bg-logo2.jpg');
    background-repeat: no-repeat;
   background-attachment:fixed, scroll;
    background-position: center top;}
.bg-blue .contents { background-color:#f2efef; box-shadow: 0 0 10px rgba(0,0,0,.15), 0 3px 3px rgba(0,0,0,.15);
}

.bg-blue li { font-size:1.2em; line-height: 1.7em}
.bg-blue li::before { content: "•"; color: #333; display: inline-block; width: 1em;margin-left: -1em}
.bg-blue h4 {padding: 1em 1em 0.1em 1em; font-weight:bold}


.bg-blue h3 { color:#fff; text-align: center}
.bg-blue .logo { background-image: url("logo-oui.png"); background-repeat: no-repeat; }
.bg-blue ul {min-height: 160px; width:90%; }
.bg-blue .btn-red {  background-color: #c00700;  border-radius: 0; text-align: center;  }
.bg-blue .btn-yellow {
    background-color: #0086c5;
    border-radius: 0;
    padding: 0.5em;
    font-size: 1.2em;
    color: #fff;
    letter-spacing: 0.05em;
}
.link-list a { color:#333} 
.link-list .fa a:hover{
    margin-left: 4em;
    margin-right: .15em;
    transition: margin .25s ease;
}
.link-list .fa {
	 margin-left: .2em;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
	color:#c00700;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.video-title {
    font-size: 14px;
    margin: 20px 0;
    color: #777;
    letter-spacing: 0.02em;
	text-transform: uppercase;
	  
    font-weight: 700;
}
.media-video {
    display: block;
    position: relative;
    width: 100%;
}
.play-overlay:hover {  background:#c00700; -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    background: #b31b1b;}

.play-overlay{
	position: absolute;
    top: 55%;
    left: 50%;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 80px;
    border: 3px solid #fff;
}
.play-overlay:after {
    right: 0;
    margin: -15px auto 0;
    border: solid transparent;
    border-left-color: #fff;
    border-width: 15px 0 15px 20px;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: 50%;
    left: 4px;
}
.play-overlay a:focus, .play-overlay a:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    background: #b31b1b;
}

.contact {  margin-left: 15px; font-size: 1.3em}
/* footer styling for all resolutions */

.siteinfo {
	text-align: center;
	padding: 3em 0;
	border-top: 1px solid #ddd;
}
.siteinfo a {
	text-decoration: none;
	color: #999;
	font-size: 0.8em;
}
.siteinfo a:hover {
	color: #602F8D;
	text-decoration: underline;
}

/* Chapter 2 challenge/solution: styling thumbnails and modals */

.btn-primary { 
    background-color: #602F8D; 
    border-color: #602F8D; 
}  
.btn-primary:hover, 
.btn-primary:focus,  
.btn-primary:active { 
    background-color: #53297A; 
} 
.modal-body .pull-left { 
    padding-right: 1em; 
} 
.modal-body .pull-right { 
    padding-left: 1em; 
} 
.modal-footer { 
    clear: both; 
} 

/* panel styling for the home page */

.panel-primary .panel-heading {
	background-color: #602F8D;
	border-color: #602F8D;
}
.panel {
	border-color: #602F8D;
}

/* form styles */
.form-group button {
	margin-top: 10px;
}

form .col-sm-2,
form .col-sm-10 {
	padding: 10px 0;
	margin: 0;
}
.foot-nav { text-align:center; margin: 2em 0; color:#555}
/* Small devices (tablets, 768px and up) 

Greater than 768 px, push logo left and tagline right. Alter 
tagline font size, alignment, and padding for larger dimensions.

*/
@media (max-width: 1197px) {  
	.logo {
		
	}
	.tagline {
		font-size: 2em;
		text-align: right;
		padding-top: 1.6em;
	}
	form {
		width: 750px;
		margin: 0 auto;
	}
	.navbar {
    border-radius: 4px;
	margin-left: 0;
    margin-right: 0;

	} 
   .container-fluid {
    margin-left: 0;
    margin-right: 0;
} .nav li {
    padding-right: 0.5em;
}
	.bg-gray ul {
    width: 100%;
}
}
@media (max-width: 992px) {
	.container-fluid {
    padding-left: 7px;
    padding-right: 7px;
}
.navbar-nav {
    font-size: 1.025em;
}
	.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 8px;
}
	.img-rs {
    float: left;
	 height: 11em;
	margin-right: 1em;
    margin-bottom: 0.1em;
    /* clear: both; */
}.text2 {
	font-size: 1.125em;
    padding-top:0;
}
	.col-md-4 {overflow: auto; margin-bottom: 1em;}
	.col-md-8 {padding-left: 0}
	.bg-gray {padding: 0.8em 0 2em;}
    .bg-gray ul { margin-bottom: 1.2em; width: 90%;min-height:100px}
	.row { margin-bottom:.5em }
	.logo { margin-bottom: 0}
	.logo img {width:360px}
	.bg-blue {   padding: 0.8em 0 2em;}
	 h2,h3 { font-size: 22px;}
	.row h3 { font-size: 22px;}
	.text { font-size: 1.125em;}
	.video-title { font-size: 13px;margin: 10px 0;}
	.play-overlay { width:60px; height: 60px;top: 62%;left: 52%; }
	
}
@media (max-width: 768px) {
	.container-fluid {
    padding-left: 7px;
    padding-right: 7px;
	}
	.v-img { width: 100%; padding-right:10px}
	.play-overlay {
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;}
	
}