@import url(http://fonts.googleapis.com/css?family=Exo+2);
@import url(http://fonts.googleapis.com/css?family=Monda);
/*Color Scheme: http://colorschemedesigner.com/#3A40Ck.oGw0w0 */

.jumbotron {
    width: 70%;
}

.bottom-align {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 500px;
}

.no-border {
    border-bottom: 0;
}

.blockquote-2 {
    font-size: 1.2rem;
}

div.div-features {
    padding: 25px;
}

.lead-2 {
    font-size: 1.50em !important;
}

.li-spacing li {
    margin: 0 0 5px 0;
}

.content-25 {
    height: 25vh;
}

.content-50 {
    height: 50vh;
}


/* ------------------ */
body {
    padding: 0px;
    margin: 0px;
    font-family: 'Monda', sans-serif; /*letter-spacing: 2px;*/
    color: #aaaaaa;
}

.dark p
{
    color: #aaaaaa;
}

.light p
{
    color: #777777;
}

#HeaderContainer
{
    width: 100%;
    height: 106px;
    background: white;
    margin-bottom: 25px;
}

#Header
{
    width: 1200px;
    height: 106px;
    background: white;
    margin: 0 auto;
    padding: 0 .9375em;
    position:relative;
}

#Landing
{
    height: 310px;
    background: black;
    width: 100%;
    overflow-y: hidden;
    padding:110px 0px;
}

.HomePageContentSection
{
    background: #cccccc;
    width: 100%;
    min-height: 200px;
    overflow-y: auto;
    padding: 20px 0px;
  
}

.HomePageContentContainer
{
    width:1200px;
    margin: 0 auto;
}

.HomePageContent
{  
    float:left;
}

.HomePageContentDivider
{
      width: 500px;
    overflow-y: auto;
       margin:25px;
        padding:23px;    
      color:#cccccc;
      background: #202020;
}

.HomePageContentDivider:hover
{
    background: #101010;
}

.bluish
{
    background:#30303F;
}

.greenish
{
    background:#303f30;
}

.reddish
{
    background:#3f3030;
}


.HomePageContent h2
{
    color: #81A0C0;
    padding-top:0px;
    margin-top:0px;
}

.Section
{
    width: 100%;
    height: 200px;
    background: #111111;
}

.sectionContent
{
    width:80%;
    color:#dddddd;
    margin: 0 auto;    
}

.sectionContent h1
{
    margin:0px;   
    padding-top:20px; 
}



/*Spin */

#CenterContainer
{
   position:absolute;
    left:50%;
    width:1350px;
    margin-left: -600px;
    /*position:absolute;
    left:50%;*/
}

#SpinContainer
{
   /* position:relative;
    width:1450px;
    margin:0 auto;
    overflow:visible;
    height:100%;*/
}

.Spin
{
    float: left;
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 25px; /*  background-color: white; /*   transition: height 2s 1s, transform 2s;*/
    background: -moz-linear-gradient(white, #222222);
    background: -o-linear-gradient(white, #222222);
    background: linear-gradient(white, #222222);
    background: -webkit-linear-gradient(white, #222222); /* For Safari */
    transition: width 400ms 200ms, height 400ms 200ms, transform 200ms, background 1000ms 500ms, margin-top 500ms;
    -webkit-transition: width 400ms 200ms, height 400ms 200ms, -webkit-transform 200ms, background 1000ms 500ms, margin-top 500ms; 
    margin: 50px 50px 0px 50px;    
    box-shadow: 0px -3px 20px white;
    -webkit-box-shadow: 0px -3px 20px white;
}

.spinOffset
{
    padding: 5px 0px 0px 10px;
}

.spinHeader
{
    position: absolute;
    width: 100%;
    height: 100%;
   
    background: #113253;
    margin: 0px;
    padding: 0px;
    border-radius: 25px;
    z-index: 1;
    transition: background-color 500ms, transform 500ms 200ms, z-index 500ms 0ms ease-in-out;
    -webkit-transition: background-color 500ms, -webkit-transform 500ms 200ms, z-index 500ms 0ms ease-in-out;
      box-shadow: -5px -5px 30px black;
}

.greenBackground
{
     background: #44a13a; /*Green */
}

.orangeBackground
{
     background: #C59247; /*Orange */
}

.orangeText
{
     color: #C59247; /*Orange */
}

.darkOrangeText
{
    color: #805617;
}

.blueBackground
{
       background: #345980; /*Blue */
    /*background: #113253; /*Blue */
}

.blueText
{
       color: #345980; 
}

.darkBlueText
{
    color: #113153;
}

.redBackground
{
    background: #C1464C; /*Red*/
}

.darkRedText
{
    color: #7E161C; 
}

.greenText
{
    color: #43A13A;
}

.darkGreenText
{
    color: #1B6913;
}

.spinContent
{
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    margin: 0px;
    padding: 0px;
    border-radius: 25px;
    z-index: 0;
     transition: transform 500ms 200ms, opacity 200ms, box-shadow 1000ms 250ms;
    -webkit-transition: -webkit-transform 500ms 200ms, opacity 200ms 0ms, box-shadow 1000ms 250ms;
    opacity: 0;    
}

.spinContentContainer
{
    width: 85%;
    max-height: 80%;
    padding: 5%;
    overflow: hidden;
}

.spinHeader h4
{
    font-family: 'Exo 2' , sans-serif; /*  font-family: 'Alegreya Sans SC', sans-serif;*/ /*font-family: 'Emblema One', cursive;*/
    margin-top: 80px;
    text-align: center;
    font-size: 24px;
  /*  color: #364960;*/
  color:White;
    text-shadow: 0px 0px 10px white;
}


.spinContent p
{
    text-align:center;
}

.spinContent h2
{
    padding-top:0px;
    margin-top:0px;
    margin-bottom:5px;
    font-size:18px;
    color: #888888;
}

.spinContent h2.miserFocus
{
    margin-top:30px;
    color:#333333;
    margin-bottom:0px;
    padding-bottom:0px;
}

.spinContent h4
{
    font-size:12px;
    text-align:center;
}

.spinContent h3
{
    margin: 0px;
    padding: 0px;
    color: #364960;
    border-bottom: 1px solid black;
    font-size:24px;    
}

.spinContent h4
{
    font-size:12px;
    text-align:center;
}

.spinContent ul
{
    padding:0px 0px 0px 5px;
    margin: 10px 0px 0px 0px;    
    list-style: square;
    font-size: 12px;
    
}


/*
.spinContent p
{
    overflow-y: hidden;
    height: 230px;
}
*/

.Spin.blueSpin:hover
{
    background: #345980;
}

.Spin.greenSpin:hover
{
     background: #44a13a;
}

.Spin.redSpin:hover
{
     background: #C1464C;
}

.Spin.orangeSpin:hover
{
     background: #C59247; /*Orange */
}

.Spin:hover
{
    width: 350px;
    height: 350px;
    z-index: 3;
   background: #333333;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg); /* Safari */
   /* margin-top: 40px;*/
    box-shadow: none;
    margin-top:-20px;
     transition: width 400ms 200ms, height 400ms 200ms, transform 200ms, background 1000ms, margin-top 500ms;
    -webkit-transition: width 400ms 200ms, height 400ms 200ms, -webkit-transform 200ms, background 1000ms, margin-top 500ms; 
}


.Spin:hover .spinHeader
{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg); /* Safari */
    z-index: -1;
    background-color: White;
       transition: background-color 500ms 250ms, transform 500ms 200ms, z-index 500ms 300ms ease-in-out;
    -webkit-transition: background-color 500ms 250ms, -webkit-transform 500ms 200ms, z-index 500ms 300ms ease-in-out;
}

.Spin:hover .spinHeader h4
{
   opacity: 0;
   transition: opacity 250ms 100ms;
   -webkit-transition: opacity 250ms 100ms;
}

.Spin:hover .spinContent
{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); /* Safari */
    opacity: 1;
    box-shadow: 0px -5px 20px white;
    overflow: hidden;
     transition: transform 500ms 200ms, opacity 300ms 700ms, box-shadow 1000ms 250ms;
    -webkit-transition: -webkit-transform 500ms 200ms, opacity 300ms 700ms, box-shadow 1000ms 250ms;
}

.Spin:hover a.button
{
    display:block;
}

a.button
{
    width:120px;
    height:25px;
    padding:2px 30px 2px 10px;
    border-radius: 5px;
    color: #eeeeee;
    font-size:16px;
    
    background: url('../Images/RightArrow.png') no-repeat 90% 50%, #606060;
    background-size: 10px;
    display:none;
    margin:10px auto 0px;
    position:absolute;
    bottom:30px;
    left:95px;

}

a.button:hover
{
    background: url('../Images/RightArrow.png') no-repeat 90% 50%, #303030;
     background-size: 10px;
}


.lightSection
{
    width:100%;
    min-height:500px;
    background:#eeeeee;;    
}


.lightSection h2
{
    padding-top:10px;
    float:left;
}


#ProductContent
{
    width:1200px;
    min-height:400px;
    margin:0 auto;
    overflow-y: auto;
    padding-bottom:50px;
}


.ProductBlue
{
    color: #345980; /*Blue*/
}


.ProductRed
{
    color: #C1464C; /*Red*/
}

.ProductGreen
{
    color: #43A13A; /*Green*/
}

.ProductOrange
{
    color: #C59246; /*Orange*/
}




h1
{
    padding-top: 0px;
    border-bottom: 1px solid black;
    font-size: 45px !important;
}

.productText p
{
    padding: 0px 20px;
}

.content
{
    width: 1200px;
    min-height: 600px;
    margin: 0 auto;
    overflow-y: auto;
}


.darkSection
{
    background: #000000;
    width: 100%;
    min-height: 500px;
}

.darkSection h2
{
    color: #345980;
    padding-top: 10px;
    float: left;
}

.lightBoxImages a
{    
    width: 100%;    
    margin:25px;
}

.featureImage
{
    width:90%;
    margin-top:50px;
}