@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'BebasRegular';
    src: url('font/BEBAS___-webfont.eot');
    src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/BEBAS___-webfont.woff') format('woff'),
         url('font/BEBAS___-webfont.ttf') format('truetype'),
         url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
html,body{
font-family: Arial,sans-serif;
width:100%;
height:100%;
line-height: 1.25;
color: #333333;
font-size: 16px;
}

p {
margin-top: 1em;
}

span.names {
font-weight: bold;
color: #fc0;
}

div#navtext {
float: left;
color: #254478;
}

nav.primary {
background: #000000 none repeat scroll 0 0;
padding-right: 3%;
padding-top: 5px;
width: 97%;
z-index: 222;
}

nav.primary ul {
width: 850px;
margin: 0 auto;
}

nav.primary li {
float: left;
margin-left: 10px;
margin-top: 6px;
height: 32px;
text-decoration: none;
/* overflow: hidden; */
position: relative;
}

nav.primary li a {
text-decoration: none;
margin-top: 30px;
color: #fff;
margin-right: 20px;
font-size: 18px;
padding: 3px 6px 3px 6px;
border-radius: 15px;
}

nav.primary li a:hover {
color: #990000;
background: #ffffff;
margin-right: 20px;
font-size: 18px;
padding: 3px 6px 3px 6px;
border-radius: 15px;
}

header {
width: 100%;
background: #13294b;
/* position: fixed; */
z-index: 1;
}

div#header-shell {
background: #ffffff none repeat scroll 0 0;
width: 100%;
z-index: 1;
}

header-shell p {
margin-bottom: 0;
}

/*holds section 1, stays fixed so rest of page slides up past it*/
/* #slide1 {
background-image: url('../images/alma-150-1600.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 740px;
left: 0;
overflow: hidden;
position: fixed !important;
top: 70px;
width: 100%;
z-index: 1;
}
*/

main {
background: #ffffff;
}

/*holds all but fixed-position top section, should slide past it*/
.content-wrapper {
min-height: 12%;
/* position: absolute; */
background: #ffffff;
width: 100%;
z-index: 2;
}

h1, h2, p {
color: #333333;
font-family: helvetica,arial;
}

h1 {
font-weight: bold;
text-align: center;
color: #12294b;
}

h2 {
font-size: 42px;
line-height: 52px;
font-weight: bold;
}

p {
font-size: 17px;
line-height: 22px;
}


.button {
display:block;
width: 50px;
height: 50px;
position: absolute;
left: 47%;
background: #333333 no-repeat;
}

div.button a, div.button-up a {
}

.button:hover, .button-up:hover {
background-color: #494949;
cursor: pointer;
}

.button .toprow {
width: 20px;
height: 20px;
left: 0%;
background: #333333 no-repeat;
}

nav#primary .button {
width: auto;
position: relative;
height: 21px;
padding: 0 8px;
background: #000000;
}

nav#primary .button:hover {
width: auto;
position: relative;
padding: 0 8px;
background: #ffffff;
color: #990000;
border-radius: 10px;
}

.section {
margin: 0 auto;
padding-top: 40px;
position: relative;
width: 100%;
}

div.slide {
width: 100%;
padding-bottom: 60px;
}

div.section-content {
width: 100%;
max-width: 980px;
margin: 0 auto;
}


/******************************
 SLIDE 1 
*******************************/
#slide1{
background: #ffffff;
text-align: center;
padding-bottom: 0;
/* overflow: hidden;
 position: fixed !important; */
width: 100%;
height: auto;
z-index: 1;
/* top: 165px; */
}

div#splash img {
background: #000000;
width: 100%;
max-width: 1600px;
margin: -5px auto 0 auto;
}


/******************************
 SLIDE 2 
*******************************/
#slide2 {
background: #ffffff;
/*height: 665px; */
opacity: 1;
position: relative;
}

#intro-text-block {
padding:15px;
background: rgba(35,23,43,.5);
}

div#big-business {
margin: 0 auto;
width: 100%;
max-width: 980px;
}

div#big-business h2, #slide3 h2 {
color: #333333;
font-size: 1.5em;
font-style: italic;
font-weight: bold;
margin-bottom: 0;
margin-top: 0;
text-align: center;
}

div#big-business h2 {
padding-top: 60px;
}

#slide3 h2 {
color: #ffffff;
padding-top: 30px;
}

div#big-business h2.big {
font-size: 170px;
}


/******************************
 SLIDE 3 
*******************************/

#slide3 {
background: #ffffff;
padding-top: 40px;
position: relative;
}

#slide3 p {
color: #333333;
}

#slide3 h2 {
color: #222a54;
}


/******************************
 SLIDE 4 
*******************************/

#slide4 {
/*
background: #ffffff;
height: 250px;
padding-top: 40px;
position: relative;
*/
background: none repeat scroll 0 0 #222a54;
text-align: center;
position: relative;
}

#slide4 h2 {
padding-top: 40px;
}

div#bigger-than-oil {
/* width: 980px; */
margin: 0 auto;
text-align: center;
color: #000000;
}

#bigger-than-oil h2, #bigger-than-oil p {
color: #000000;
text-shadow: 0;
}

#bigger-than-oil p {
padding-top: 50px;
}



/********************Moving Forward styles******************/

.column-wrapper {
width: 75%;
margin: 0 auto;
}

.one-third {
width: 30%;
margin-right: 1.5%;
margin-left: 1.5%;
float: left;
}
                         
.img-wrapper {
width: 100%;
position: relative;
margin-bottom: 5px;
}

.img-wrapper img {
width: 100%;
height: auto;
display: block;
z-index: 199;
margin-bottom: 20px;
}

.overlay {
position: absolute;
top: 0;
transition: height .3s ease;
background: rgba(0,0,0,.5);
width: 100%;
height: 0;
z-index: 200;
}

.img-wrapper:hover .overlay {
height: 100%;
}

.readit {
position: absolute;
left: 0;
right: 0;
bottom: 15px;
background: #990000;
width: 80%;
height: 22px;
overflow: hidden;
z-index: 201;
border-radius: 30px;
text-align: center;
margin: auto;
color: #ffffff;
font-family: helvetica, arial, sans-serif;
font-weight: bold;
font-size: 1em;
padding-top: 3px;
opacity: 1;
transition: all .5s ease;
}

.textblock {
position: absolute;
color: #ffffff;
left: 0;
right: 0;
top: 20%;
bottom: 0;
width: 80%;
z-index: 201;
text-align: center;
margin: auto;
font-family: helvetica, arial, sans-serif;
font-weight: bold;
font-size: 1em;
padding-top: 3px;
}

.img-wrapper:hover .readit {
height: 70%;
border-radius: 20px;
padding: 8px;
opacity: .85;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: #000000;
background: #ffffff;
}

.readit:hover {
background: #ffffff;
color: #000000;
}

.story-title h3 {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 1.2em;
margin-top: 0;
color: #254478;
}

.clear {
clear: both;
height: 1px;
}

.container {
width: 100%;
max-width: 980px;
margin: 0 auto;
}

.statsWrap {
    float: left;
    margin: 30px 30px 30px 0;
    width: 180px;
}
.stats {
    -moz-user-select: none;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
}
.statDummy {
    margin-top: 100%;
}
.statInfo {
    background: #1c1f26 none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transition: background-color 0.5s ease 0s;
}
.statInfo:hover {
    background: #e00122 none repeat scroll 0 0;
}
.statNumber {
    color: #fff;
    font-family: "Raleway",sans-serif;
    font-size: 70px;
    font-weight: 800;
    margin-bottom: 0;
    padding-top: 12px;
    transition: all 0.5s ease-in-out 0s;
}
.statNumberMedium {
    font-size: 45px;
    margin-bottom: 0;
    padding-top: 35px;
    transition: all 0.5s ease-in-out 0s;
}
.statNumberSmall {
    font-size: 26px;
    margin-bottom: 0;
    padding-top: 38px;
    transition: all 0.5s ease-in-out 0s;
}
.Enrollment {
    color: #fff;
    font-size: 218px;
    margin-top: -255px;
    opacity: 0;
    padding: 0;
    transform: scale(0);
    transition: all 0.5s ease-in-out 0s;
}
.statText {
    color: #fff;
    font-family: "Lato",sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-top: -155px;
    opacity: 0;
    padding: 0;
    transform: scale(0);
    transition: all 0.5s ease-in-out 0s;
}
.stats:hover {
    transform: scale(2);
    transition: background-color 500ms ease-out 1s;
    visibility: visible;
    z-index: 10;
}
.stats:hover .statNumber {
    transform: scale(1.1);
    visibility: visible;
    padding-top: 12px;
}
.stats:hover .statText {
    margin-top: 20px;
    opacity: 1;
    transform: scale(0.6);
    visibility: visible;
}

a#top-arrow {
top: 134px;
}

img#wide {
display: block;
margin: 0 auto;
}

img#medium-wide {
display: none;
margin: 0 auto;
}

img#narrow-wide {
display: none;
margin: 0 auto;
}

img.float-right {
width: 50%;
height: auto;
float: right;
margin-top: 1em;
}

p.float-left {
width: 40%;
float: left;
margin-left: 5%;
margin-right: 5%;
}

/* css tricks ***/
.category {
  position: -webkit-sticky; /* Required for Safari */
  /* position: sticky; */
  height: 40px;
}

div.component {
width: 94%;
margin-left: 6%;
font-weight: bold;
}

div.profile {
opacity: 0;
padding: 0 10px 8px 10px;
max-height: 0;
overflow: hidden;
width: 94%;
margin-left: 8%;
margin-bottom: 15px;
background: #eeeeee;
}

ol li {
margin-bottom: 8px;
}

div#big-text  p {
font-size: 1em;
line-height: 1.1em;
}

div#big-text {
font-size: 2em;
}

div.component {
width: 92%;
margin-left: 6%;
font-weight: bold;
background: #131f33;
color: #fff;
padding: 6px;
border: 1px solid #131f33;
}

div.component:hover {
background: #ffffff;
color: #131f33;
}




@media (max-width: 920px) {

.category, nav.primary {
/* height: 50px; */
}





@media (max-width: 850px) {

nav.primary ul {
width: 100%;;
margin: 0 auto;
}

}





/*******************TABLET STYLES *********************/

@media (max-width: 768px) {

#wrapper {
width: 100%;
}

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

/******************************
 SLIDE 4 
*******************************/

#slide4 {
padding-top: 40px;
position: relative;
}

div#bigger-than-oil {
width: 100%;
}

div#contactus {
width: 100%;
margin: 0 auto;
}

div#big-business {
width: 90%;
}

.one-third {
width: 45%;
margin-right: 1.5%;
margin-left: 1.5%;
float: left;
}

#slide1 {

}




}



@media (max-width: 631px) {

a#top-arrow {
top: 174px;
}

}





/*******************PHONE STYLES *********************/

@media (max-width: 570px) {



header {
height: 75px;
}

#slide1{
top: 75px;
}

section div {
margin: 30px 10px;
}

h1 {
font-size: 30px;
line-height: 38px;
padding: 0;
}

h2 {
font-size: 28px;
line-height: 33px;
}

nav#primary {
margin-right: 10px;
}

div#big-business {
width: 90%;
}

#slide4 {
padding-top: 80px;
}

div#bigger-than-oil {
margin: 0 auto;
text-align: center;
color: #000000;
}

#bigger-than-oil h2 {
color: #000000;
text-shadow: 0;
text-align: center;
}

#bigger-than-oil p {
padding-top: 10px;
}

#bigger-than-oil div {
margin: 0 auto;
text-align: left;
}

div#contactus {
margin: 0 auto;
}

#slide1{
top: 150px;
}

.one-third {
width: 90%;
margin-right: 1.5%;
margin-left: 2.5%;
float: left;
}

/* 
a#top-arrow {
top: 95px;
}
*/

img#wide {
display: none;
}

img#medium-wide {
display: block;
}

img#narrow-wide {
display: none;
}

img.float-right {
width: 90%;
margin-right: 5%;
}

p.float-left {
width: 90%;
margin-left: 5%;
}

.column-wrapper {
width: 75%;
}

nav#secondnav {
display: none;
}



}



@media (max-width: 480px) {


header {
height: 100px;
}

#slide1{
top: 100px;
}

a#top-arrow {
top: 135px;
}

img#wide {
display: none;
}

img#medium-wide {
display: none;
}

img#narrow-wide {
display: block;
}

a#top-arrow {
top: 230px;
}

.category, nav.primary {
height: 115px;
}





}