body{
    
}

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    line-height: 1.3;
  }

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility:hidden;
    height: 0px;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

#header{
    background-image: url("images/head-image.jpg"); 
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    width: 100%;
    height: 540px;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    //border: 1px solid red;
}

/*final location of the container of all the header text AFTER all the text motions have stopped*/
#textbox{
    position: absolute;
    top: 5%;
    left: 10%;
    min-height: 300px;
    width: 50%;    
    z-index: 9;
    text-align: center;
    //background-color: red;
}

/*************************BEGIN FORM CSS************************/

input[type=text], input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

#quote{
    background-color: #f1f1f1;
    border: none;
}

hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

button:hover {
    opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.formcontainer {
    padding: 10px 20px 0px 20px;
    width: 330px;
    background-color: rgb(211,211,211,0.6);
    float: right;
    margin-top: 55px;
    margin-right:55px;
    border-radius: 10px;
}

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
    .cancelbtn, .signupbtn {
       width: 100%;
    }
}

.formcontainer{
    animation-name: delayedfadin;
    animation-duration: 0.2s;
    animation-delay: 3.4s;
    animation-fill-mode: both;    
}

@keyframes delayedfadin
{
    0%
    {
        opacity: 0;        
    }
    80%
    {
        opacity: .5;
    }
    100%
    {
        opacity: 1;        
    }
}

/*************************END FORM CSS*****************************/

#heading-primary{
    color: white;
    font-family: helvetica;    
}
/******************************************************/
#heading-primary-main{
    display: block;
    font-size: 48px;
    font-weight: 200;
    animation-name: moveinleft;
    animation-duration: 1.7s;

}

@keyframes moveinleft{
    0%{
        opacity: 1;
        transform: translateX(-250%);
    }
    80%{       
        transform: translateX(10px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

/******************************************************/

#heading-primary-sub{
    display: block;
    font-size: 20px;
    line-height: 150%;
    text-align: left;
    animation-name: moveinright;
    animation-duration: 2.2s;
    animation-delay: .7s;
    animation-fill-mode: both;    
}

@keyframes moveinright{
    0%{
        opacity: 1;
        transform: translateX(850%);
    }
    80%{
        transform: translateX(-10px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

/******************************************************/

#button{
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 25px;
    border-radius: 10px;
    margin-top: 7%;
    display: inline-block;
    background-color: #aaa;
    color: #1a1a1a;
    font-family: 'Trebuchet MS', sans-serif;   
    font-weight: bold; 
    font-size: 20px;
    animation-name: moveinbottom;    
    animation-duration: 2s;
    animation-delay: 1.5s;
    animation-fill-mode: both;
}

@keyframes moveinbottom{
    0%{
        opacity: 1;
        transform: translateY(950%);
    }
    80%{       
        transform: translateY(-5px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

#topbarlogo{
    height: 60px;
    background-color: #8093b3;
    width: 100%;
    float:right;
    color: white;
}

#topnavbar{
    //float: right;
    width: auto;
    color: white;
}

#topnavbar ul li{
    display: inline;
    padding: 10px 20px;    
    line-height: 60px;
    //border: 1px solid blue;
    color: white;
}

#topnavbar ul li a{ 
    text-decoration: none;
    font-size: 16px;
    font-family: helvetica;
    color: white;
}

#second-from-top-greybox h3{
    padding-top: 25px;
    text-align: center;
    color: grey;
    font-family: "trebucket MS";
    font-size: 34px;
    margin-bottom: 20px;
}

#second-from-top-greybox h1{
    letter-spacing: 6px;
    font-size: 35px;
    font-family: "arial";
    text-align: center;
    color: #404040;
}

#second-from-top-greybox p{
    font-size: 22px;
    margin: 10px auto;
    line-height: 40px;
    text-align: center;
    font-family: Trebuchet MS;
    color: #363636;
    width: 80%;
    //border: 1px solid red;
}

#wrapper3{
  //background-color: lightgrey;
}

#wrapper3:after {
  visibility: hidden;
  content: ".";
  clear: both;
  display: block;
  height: 0px;
}

#sub_story3 {
    box-sizing: border-box;
    width: 33.3%;
    padding: 20px;
    float: left;
    }

    #sub_story3 img{
      max-height: 400px;
      display: block; 
      transition: 0.8s;     
    }

    #sub_story3:hover img{
        transform: scale(1.2);
    }

    .imagecontainer3{
      max-height: 250px;
      overflow: hidden;
      box-shadow: 5px 5px 5px #999999;
      width: 95%;
      margin: 0px auto;
    }

    .threeimagepara3{
      width: 90%;
      margin: 0px auto;      
    }

    .threeimagepara3 p{
      line-height: 150%;
      font-family: 'Source Sans Pro', sans-serif;
      color: #363636;     
    }

    .threeimagepara3 h1{      
      font-family: 'Source Sans Pro', sans-serif;
      color: #363636; 
      text-align: center;
      margin-top: 15px;    
    }

@media screen and (max-width: 680px) { 
  #sub_story3{width: 100%;}
    
}

#wrapper2columnsubsection{
    background-color: #f1f1f1;
    width: 100%;
    overflow: hidden;
    font-family: 'Source Sans Pro', sans-serif; 
    color: #363636;
}

#wrapper2columnsubsection2{
    height: 600px;
    background-image: url("images/1160135293.jpg");
    background-size: cover;
    width: 100%;
    overflow: hidden;
    font-family: 'Source Sans Pro', sans-serif; 
    color: #363636;
}

#divleft2column{
    background-image: url('images/apple-desk-macbook-7061.JPG');
    background-size: cover;
    background-repeat: no-repeat;
    height: 500px;
    width: 50%;
    background-color: #F1F1F1;
    float: left;
    position: relative;
    color: black;
}

#divleft2column h1{
    padding-left: 50px;
    padding-top: 30px;
}

#divright2column{
    height: auto;
    width: 50%;
    float: right;
}

#divright2column p{
    font-size: 22px;
    line-height: 150%;
    margin: 10px auto;
    width: 85%;
}

#divright2column h1{    
    margin: 20px auto;
}

@media screen and (max-width: 600px) { 
  #divleft2column{display: none;}
  #divright2column{width: 100%;}

  #substorygradient{
    padding-top: 0px;
  }
    
}

#substorygradientimage{
    background-image: url(images/backlit-clouds-dark-533877.jpg);
    background-attachment: fixed;
    min-height: 500px;
    width: 100%;
    background-size: cover;
    position: relative;
    box-sizing: border-box;
}

#substorygradient{
    font-size: 45px;
    text-align: center;
    padding-top: 120px;
    text-shadow: 2px 2px 3px black;
    color: #0080ff;
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    box-sizing: border-box;
}

/* BEGIN flip cards CSS - row of three */

.container1234{
    position: relative;
    background-image: url(images/josh-sorenson-pexels-cropped.jpeg);
    background-size: cover;
    background-color: #e6d8b3;
}

.container1234::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    //background-color: rgba(255,255,255,0.55);
    background-color: rgba(152, 66, 211, 0.73);
  }

.container1234:after{
    content: ".";
    clear: both;
    display: block;
    visibility:hidden;
    height: 0px;

}

.rowfooter{    
    //background-color: #ccffff;    
    min-height: 450px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  //box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
}

.card{
    
    perspective: 1000px;
    max-width: 390px;
    height: 285px;
    position: relative;
    flex: 1;
    margin: 10px;
    border-radius: 5px;
}

.flip-card-inner{
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border-radius: 5px;
}
.card:hover .flip-card-inner {
    transform: rotateY(180deg);
    box-shadow: 0px 0px 0 rgba(0,0,0,0.0);
    border-radius: 7px;
  }

  .flip-card-front1, .flip-card-front2, .flip-card-front3, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    color: white;  
    border-radius: 7px; 
  }

  .flip-card-front1 h2, .flip-card-front2 h2, .flip-card-front3 h2, .flip-card-back h2{
    background-color: #a6aaf5;
    padding: 5px;
    font-family: helvetica;
    letter-spacing: 1.3px;
    border-radius: 7px 7px 0px 0px; 
  }

  .flip-card-front1{
    background-size: cover;
    background-image: url(images/12345.jpg);
  }

  .flip-card-front2{
    background-size: cover;
    background-image: url(images/cropped-fauxels-pexels.jpeg);
  }

  .flip-card-front3{
    background-size: cover;
    background-image: url(images/PhotoMIX-Company-pexels.jpeg);
  }

  .flip-card-back {
    background-color: #2980b9;    
    color: white;
    transform: rotateY(180deg);
    font-family: helvetica;
  }

  .flip-card-back h1{
    margin-top:15px;
  }

  .flip-card-back p{
    padding: 10px 30px;
    font-size: 20px;
    font-family: helvetica;
    line-height: 150%;
    margin-top: 0px;
  }

  @media (max-width: 600px){
    .card{
        flex: 100%;
        max-width: 600px;        
    }
}

/* END flip cards CSS - row of three */

#footerpurple{
    //display: block;
    width: 100%;
    height: 60px;
    background-color: #151515;
    //text-align: center;
    font-family: helvetica;
    //border: 1px solid blue;
}

#purple-social-media-bar{
    width: 100%;
    min-height: 61px;
    background-color: #6451ce;
    padding-left: 14%;
    padding-right: 14%;
    line-height: 60px;
    color: white;
    font-size: 20px;
    //overflow: hidden;
}

#purple-social-media-bar p{
    float: left;
    line-height: 60px;
}

#purple-social-media-bar-icon-box{
    float: right;
    min-height: 60px;
    max-height: 60px;
    width: 470px;
    //background-color: green;  
}

#purple-social-media-bar-icon-box img{
    display: inline-block;
    float: right;
    margin-right: 20px;
    padding: 0px;
    height: 60px;
}

/*BEGIN footer*/

.content{
    font-size: 5rem;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: rgba(128, 128, 128, 0.493);
}
.container{
    max-width: 1170px;
    
    margin: auto;
}

/*END footer*/

@media screen and (max-width: 600px) { 
  #topnavbar li{width: 100%; text-align: center;}
  #heading-primary-sub{display: none;}
  #second-from-top-greybox h1{display: none;}
  #topnavbar{float: none}
  #topnavbar ul li{display: block; padding: 0px;}
  #topbarlogo{height: auto;}
  #textbox{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
}

@media (max-width: 600px){
    .formcontainer{
        display: none;        
    }

@media (max-width: 600px){
    #purple-social-media-bar-icon-box{
        display: block;        
    }

/*All the normal firefox CSS for the site goes here; then the following code is needed for any browser incompatibilities 
between Firefox and Chrome. Remember the code above (i.e. clearfix, box-sizing etc.) is designed to reduce most browser 
incompatibilities and the code 
below cleans up any remaining differences*/


/* Chrome 29+ */
/*use the block right below this text to adjust Chrome CSS features to match firefox; in this example width: 440px;. 
Note this line will affect the same change to both firefox and Chrome. to keep the firefox CSS version where it needs 
to be as set in the main stylesheet above, just copy the correct styles in the stylesheet above and paste that copy in 
the @-moz-document url-prefix() function below the block following this text. In this example, the width of the division 
with the id of upload-form had two different lengths in firefox and chrome. The width desired was in the firefox CSS so 
we set that value in the @-moz-document url-prefix() function on line 90 below just below the following block of code 
and made the width changes in the Chrome code just below this text to make it match the width in firefox.*/

/* CHROME 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {

     #upload-form {/*Chrome needed a width of 440px to visually match the width of 400px as presented in main firefox CSS*/ 
        width: 440px;
    }

    input[type=submit] {/*another example rule for Chrome if it required changes to bring it in line with firefox CSS*/
        color: white;
    }
}

/*FIREFOX*/

/*this block will contain a copy of the CSS in the main part of the CSS file above that provides the desired CSS for the page*/
@-moz-document url-prefix() 
{
    #upload-form {
        width: 400px;
    }

    input[type=submit] {/*another example rule to maintain for firefox if Chrome requires a different value to stay similar*/
        color: black;
    }
}