/************************************************************************
* GENERAL STYLING
************************************************************************/

* 
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body
{
    overflow-x: hidden;
    width: 100%;
}

h1
{
    font-size: 3em;
}

h2
{
    font-size: 2.5em;
}

h3
{
    font-size: 2em;
}

h4
{
    font-size: 1.2em; 
}

a
{
    text-decoration: none;
    color: inherit;
}

a:visited
{
    color: inherit;
}

/* Every new group of columns must start with a row */
.row
{
    width: 100%;   
    float: left;
    /* pading: 15px */
    /*border: 1px solid blue;*/    
}

/* Regular columns */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


/* Column styling */
[class*="col-"]
{
    float: left;
    padding: 15px; /* adjust as needed */
    /*border: 1px solid blue;*/
}

/* Adjust column widths for small screens */
@media only screen and (max-width: 1065px) 
{
    /* For mobile phones or small screen: */
    [class*="col-"] {
        width: 100%;
        text-align: center;
    }
}

/************************************************************************
* IMAGE STYLING
************************************************************************/

/* Responsive image width. Must set width on each individual image to avoid
   image from stretching to the width of it's current container           
*/
img
{
    max-width: 100%;
}

.parallax
{ 
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;        
}



/************************************************************************
* ANIMATIONS
*
* Author: Austin Hannaleck
* Last Updated: 9/1/2017
*
* DESCRIPTION
* This file must be used in conjunction with ScrollView.js in order
* to work. Every animated element requires the utilization of two 
* classes: .animatedBlock, and .notViewed. To assign different 
* animations to an element, several "data-" attributes are used. The
* data attributes this utitlizes are described below.

* data-position: Describes the position direction the element will
*                move into view from (left, right, up, bottom).
*
* data-scale: Describes the scaling behavior of the element (grow/shrink).
*
* data-offset: Describes the offset in the viewport before the animation
*              begins (e.g., if offset is equal to 20, this means the 
*              animation will trigger when the viewport is either 20px
*              above or below full view of the element).
*
*
*
*************************************************************************/

.animatedBlock
{
    opacity: 0;
    position: relative;
    -webkit-transition: all .6s ease-in;
    -moz-transition: all .6s ease-in;
    -ms-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
}

/* Slide animations */

.animatedBlock[data-position="left"]
{
    left: -50px;  
}

.animatedBlock[data-position="bottom"]
{
    bottom: -50px;
}

.animatedBlock[data-position="right"]
{
    right: -50px;
}

.animatedBlock[data-position="bottom"].viewed 
{
  bottom: 0px;
  opacity: 1;
  filter: alpha(opacity=100);
}

.animatedBlock[data-position="right"].viewed
{
    right: 0px;
    opacity: 1;
    filter: alpha(opacity=100);
}

.animatedBlock[data-position="left"].viewed
{
    left: 0px;
    opacity: 1;
    filter: alpha(opacity=100);
}

/* Grow an element */

.animatedBlock[data-scale="grow"]
{
    transform: scale(0.1); /* Scale cannot be 0 because it will never be in viewport */
}

.animatedBlock[data-scale="grow"].viewed
{
    transform: scale(1);
    opacity: 1;
}