/********************************
*        BASIC ELEMENTS         *
********************************/

html
{
    
}

body
{
    font-family: catamaran;
    color: #fff;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    letter-spacing: .5px;
    overflow: hidden;
    margin: 0px;
    width: 100%;
    height: 100%;
}

div
{
    
}

p
{
    margin: 0px;
    padding: 0px;
}

ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

li
{
    list-style-type: none;
}

h1, h2, h3, h4, h5, h6
{
    margin: 0px;
    padding: 0px;
}

h1
{
    
}

h2
{
}

h3
{
    
}

h4
{
    
}

h5
{
    
}

h6
{
    
}

.display-none
{
    display: none;
}

::-webkit-scrollbar
{ 
    /*display: none;*/
}

/********************************
*         BASIC CLASSES         *
********************************/

.no-decoration
{
    text-decoration: none;
    color: inherit;
}

.bold
{
    font-weight: bold;
}

.white-color
{
    color: #FFF;
}

.white-background
{
    background-color: #fff;
}

.white-border
{
    border: 1px solid #fff;
}

/********************************
*        GENERAL STYLES         *
********************************/

.drop-shadow
{
    -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.33));
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.33));
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=1, OffY=1, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=1, OffY=1, Color='#444')";
}

.spacer
{
    height: 2em;
    display: block;
}

#top-spacer
{
    flex: 2.25 1;
    transition: flex 1s cubic-bezier(0.6, 0, 0, 1) 4.3s;
}

#bottom-spacer
{
    flex: .25 1;
}

#footer-spacer
{
    flex: 1 1;
}

.spacer.quarter
{
    height: .5em;
}

.spacer.half
{
    height: 1em;
}

.spacer.double
{
    height: 4em;
}

.spacer.triple
{
    height: 6em;
}

/* FLEX BOX */

.flex-box
{
    display: flex;
}

.flex-box.align-start
{
    align-items: flex-start;
}

.flex-box.align-center, .flex-box.center
{
    align-items: center;
}

.flex-box.align-end
{
    align-items:flex-end;
}

.flex-box.justify-center, .flex-box.center
{
    justify-content: center;
}

.flex-box.justify-around
{
    justify-content: space-around;
}

.flex-box.justify-between
{
    justify-content: space-between;
}

.flex-box.column
{
    flex-flow: column;
}

.flex-box.wrap
{
  flex-wrap: wrap;
}

.flex-box.nowrap
{
  flex-wrap: nowrap;
}

/********************************
*          KEYFRAMES            *
********************************/

@-webkit-keyframes backgroundPan
{
    0%    { -webkit-transform: translate3d(0,0,0); }
    100%    { -webkit-transform: translate3d(100vw,0,0); }
}

@keyframes backgroundPan
{
    0% { transform: translate3d(0,0,0); }
    100%    { transform: translate3d(100vw,0,0); }
}

@-webkit-keyframes boxColor
{
    0% { background-color: rgba(109,119,119,.75); }
    100% { background-color: rgba(51, 75, 77, 0.75); }
}

@keyframes boxColor
{
    0% { background-color: rgba(109,119,119,.75); }
    100% { background-color: rgba(51, 75, 77, 0.75); }
}

@-webkit-keyframes markSpin
{
    0%   {-webkit-transform: rotateZ(0deg)}
    1.25%   {-webkit-transform: rotateZ(-8deg)}
    10%   {-webkit-transform: rotateZ(372deg)}
    11%   {-webkit-transform: rotateZ(374deg)}
    12.5%   {-webkit-transform: rotateZ(360deg)}
    100%   {-webkit-transform: rotateZ(360deg)}
}

@keyframes markSpin
{
    0%   {transform: rotateZ(0deg)}
    1.25%   {transform: rotateZ(-8deg)}
    10%   {transform: rotateZ(372deg)}
    11%   {transform: rotateZ(374deg)}
    12.5%   {transform: rotateZ(360deg)}
    100%   {transform: rotateZ(360deg)}
}

/********************************
*          BASIC STRUCTURE      *
********************************/

#background-container
{
    position: absolute;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
}

.hero
{
    background: url(/images/hero/background.jpg) no-repeat left center;
    background-size: cover;
    z-index: -1;
    width: 200vw;
    height: 100%;
    position: fixed;
    right: 0px;
    top: 0px;
    transition: opacity .5s;
    -webkit-animation: backgroundPan 300s linear infinite alternate;
    animation: backgroundPan 300s linear infinite alternate;
}

.hero-mask
{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: #000;
    opacity: .2;
}

#copy-container
{width: 100%;height: 100%;position: absolute;}

#header-container
{flex: 1 1;}

#logo
{
    height: 75px;
    width: auto;
    transform-origin: 46.91% 45.89%;
    margin: 12px;
    padding: 4px;
    cursor: pointer;
}

#logo:active
{
    cursor: none;
}

.loaded #logo
{
     -webkit-animation: markSpin 10s infinite 1.4s;
    animation: markSpin 10s infinite 1.4s; 
}

#header
{font-weight: 100;letter-spacing: 1px;font-size: 36pt;line-height: 36pt;}

#text-container
{text-align: center;max-width: 500px;flex: 1 1;line-height: 24pt;}

#text-container > span
{
    display: inline-block;
}

#footer-container
{flex: 1 1;width: 90%;}

#contact-form-container
{
    width: 350px;
    background-color: rgba(109, 119, 119, 0.75);
    height: 126px;
    position: relative;
    -webkit-animation: boxColor 300s cubic-bezier(0.68, 0.69, 1, 0.52) infinite alternate;
    animation: boxColor 300s cubic-bezier(0.68, 0.69, 1, 0.52) infinite alternate;
}

#contact-form-container > span
{
    font-weight: 100;
}

#form
{width: 75%;/* margin-top: 8px; */}

.form
{

}

#email
{background-color: transparent;border: none;border-bottom: 1px solid rgba(255,255,255,.65);width: 100%;font-size: 16pt;color: #fff;font-weight: 300;text-align: center;padding: 2px;outline: none;border-radius: 0px;}

#submit
{
    position: absolute;
    width: 100px;
    bottom: 0px;
    left: calc(50% - 50px);
    color: #fff;
    border: none;
    background-color: transparent;
    margin-left: 5px;
    transition: all .5s cubic-bezier(0.55, 0.01, 0.27, 0.99);
    outline: none;
    cursor: pointer;
    z-index: 100;
    font-size: 10pt;
    font-family: catamaran;
    text-align: center;
}

#submit:after
{
    content: '';
    background: url(/images/arrow-right.png) no-repeat center center;
    background-size: contain;
    padding-right: 3px;
    margin-left: 4px;
    top: 4px;
    position: relative;
    display: inline-block;
    height: 17px;
}


#label-container
{
    position: relative;
    width: 50%;
    text-align: center;
}

#label-container #submit
{opacity: 0;transform: translate3d(0,16px,0);pointer-events: none;}

#label-container.valid #submit
{
    transform: translate3d(0,0,0);
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
}

#label
{
    font-size: 10pt;
    opacity: 1;
    position: relative;
    bottom: -1px;
    display: inline-block;
    transform: translate3d(0,0,0);
    transition: all .5s cubic-bezier(0.55, 0.01, 0.27, 0.99);
}

#label-container.valid #label
{
    opacity: 0;
    transform: translate3d(0, -16px, 0);
}

#contact-info-container
{
    flex: 1 1;
    border-right: 1px solid rgba(255,255,255,.75);
    padding: 9px 0px;
}

#contact-info-container > a, #contact-info-container > div
{
    padding-right: 16px;
}

#contact-email, #contact-phone
{
    margin: 4px 0px;
}

#phone
{

}

#social-buttons
{margin: 11px 0px 9px;}

.social-button
{
    width: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px 8px;
    display: inline-block;
}

#social-button-facebook
{
    background: url('/images/marks/facebook.png') no-repeat center center;
    background-size: contain;
}

#social-button-twitter
{
    background: url('/images/marks/twitter.png') no-repeat center center;
    background-size: contain;
}

#social-button-linkedIn
{
    background: url('/images/marks/linked-in.png') no-repeat center center;
    background-size: contain;
}

#social-button-instagram
{
    background: url('/images/marks/instagram.png') no-repeat center center;
    background-size: contain;
    margin-right: 0px;
}

#form-action-success
{
    opacity: 0;
    transform: translate3d(0,16px,0);
    transition: transform 2.5s cubic-bezier(0.11, 0.94, 0.27, 0.99), opacity 1s ease-in-out;
    padding: 32px;
    text-align: center;
    cursor: default;
    max-width: 300px;
}

#form-action-success.fade-in
{
    opacity: 1;
    transform: translate3d(0,0,0);
}

/* ON LOAD */

#background-container
{
    transition: opacity 1s ease-in-out;
}

#logo, #header, #text-container, #contact-form-container, #contact-info-container, #contact-info-container > *
{
    transition: transform 2.5s cubic-bezier(0.11, 0.94, 0.27, 0.99), opacity 1s ease-in-out;
}

#background-container, #logo, #header, #text-container, #contact-form-container, #contact-info-container, #contact-info-container > *
{
    opacity: 0;
}

.loaded #background-container, .loaded #logo, .loaded #header, .loaded #text-container, .loaded #contact-form-container, .loaded #contact-info-container, .loaded #contact-info-container > *
{
    opacity: 1;
}

#header, #text-container, #contact-form-container, #contact-info-container, #contact-info-container > *
{
    transform: translate3d(0, 20px, 0);
}

.loaded #header, .loaded #text-container, .loaded #contact-form-container, .loaded #contact-info-container, .loaded #contact-info-container > *
{
    transform: translate3d(0, 0, 0);
}

#background-container
{
    transition-delay: 0s;
}

#logo
{
    transition-delay: 1.5s;
}

#header
{
    transition-delay: 2.5s;
}

#text-container
{
    transition-delay: 4s;
}

#contact-form-container
{
    transition-delay: 4.2s;
}

#contact-info-container, #contact-info-container > a:first-child
{
    transition-delay: 4.4s;
}

#contact-info-container > a:nth-child(2)
{
     transition-delay: 4.5s;
}

#contact-info-container > div:last-child
{
     transition-delay: 4.6s;
}

#contact-form-container.instant
{
    transition: none;
}

/********************************
*        MEDIA QUERIES          *
********************************/

@media only screen and (min-width: 1441px)
{
    
}

@media only screen and (max-height: 768px)
{
    #top-spacer
    {
        flex: 2.25 1;
    }

    .loaded #top-spacer
    {
        flex: .25 1;
    }

    #bottom-spacer
    {
        flex: .25 1;
    }

    #submit
    {
        
    }
}

@media only screen and (min-width: 851px) and (max-width: 950px)
{
    #footer-container
    {
        justify-content: space-around;
    }

    .loaded #top-spacer
    {
        flex: .5 1;
    }

    #bottom-spacer
    {
        flex: .25 1;
    }

    #footer-spacer
    {
        display: none;
    }

    #contact-info-container
    {
        flex: 0 0 350px;
        border: none;
        width: 350px;
        align-items: center;
        background-color: rgba(109,119,119,0.75);
        -webkit-animation: boxColor 300s cubic-bezier(0.68, 0.69, 1, 0.52) infinite alternate;
        animation: boxColor 300s cubic-bezier(0.68, 0.69, 1, 0.52) infinite alternate;
    }

    #submit
    {
        
    }
}

@media only screen and (min-width: 415px) and (max-width: 850px)
{
    #contact-info-container
    {
        flex: unset;
        border: none;
        align-items: center;
        flex-flow: row;
        justify-content: space-between;
        width: 100%;
    }

    #submit
    {
        bottom: 35px;
        right: -75px;
    }
}

@media only screen and (max-width: 850px)
{
    *
    {

    }

    #form-action-success
    {
        font-size: 10pt;
    }

    #footer-container
    {
        flex-flow: column nowrap;
        flex: 1.5 1;
    }

    #top-spacer
    {
        flex: 2.75 1;
    }

    .loaded #top-spacer
    {
        flex: 1 1;
    }

    #footer-spacer
    {
        display: none;
    }

    #text-container
    {
        flex: 1 1;
        font-size: 10pt;
        max-width: 400px;
    }

    #header-container
    {
        flex: 1.75 1;
    }

    #header
    {font-size: 28pt;}

    #logo
    {
        height: 50px;
    }

    #contact-form-container
    {
        font-size: 10pt;
    }

    #email
    {
        font-size: 12pt;
    }

    #label
    {
        font-size: 8pt;
    }

    #submit
    {
        
    }
}

@media only screen and (max-width: 650px)
{
    #contact-phone, #contact-email
    {
        font-size: 10pt;
    }
    #contact-info-container > a, #contact-info-container > div
    {
        padding:0px;
    }

    .social-button
    {
        width: 15px;
        height: 15px;
        margin: 0px 6px;
    }

    #contact-form-container
    {
        width: 250px;
        height: 90px;
    }

    #submit
    {
        
    }
}

@media only screen and (max-width: 414px)
{
    #text-container
    {
        max-width: 90vw;
        flex: 2 1;
    }

    #header
    {
        font-size: 24pt;
    }

    #logo
    {
        height: 40px;
    }

    #contact-info-container
    {
        border: none;
        align-items: center;
        justify-content: center;
    }
   
    #bottom-spacer
    {
        display: none;
    }

    #footer-container
    {
        flex: 2 1;
    }

    #header-container
    {
        flex: 1 1;
    }

    #submit
    {
        
    }

    #top-spacer
    {
        flex: 4 1;
    }

    #top-spacer
    {
        
    }
}


@media only screen and (max-width: 360px)
{
    #header
    {
        font-size: 18pt;
    }

    #logo
    {
        height:36px;
        margin-bottom: 0px;
    }

    #text-container
    {
        font-size: 8.5pt;
    }

    #form-action-success
    {
        font-size: 8.5pt;
    }

    #contact-form-container
    {
        font-size: 8.5pt;
        width: 90vw;
        height: 85px;
    }

    #submit
    {
        
    }
}

@media only screen and (max-height: 414px)
{

    #copy-container
    {
        justify-content: space-around;
    }
    
    .loaded #top-spacer
    {
        flex: 0 0;
    }

    #bottom-spacer
    {
        display: none;
    }

    #header-container, #text-container, #footer-container
    {
        flex: unset;
    }

    #header
    {
        font-size: 20pt;
    }

    #logo
    {
        height: 40px;
        margin-bottom:0px;
    }

    #contact-form-container
    {
        height: 85px;
        width: 250px;
    }

    #submit
    {
        
    }
}


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