.quote
{
    /*margin-top: 250px;*/
    width: 100%;
    font-size: 3em;
    text-align: center;
}

/* COVER */

#cover
{
    height: 100%;
    overflow: hidden;
}

#cover .video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 999;
}
    #cover .video-wrap:before {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../source/icons/pattern.png') repeat top left;
        z-index: 9;
        opacity: .5;
        pointer-events: none;
    }

    #cover .video-wrap iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        z-index: 8;

        width: 1920px;
        height: 1080px;
        margin-left: -960px;
        margin-top: -540px;
    }

    #cover .video-wrap .table {
        padding-top: 0;
    }

#cover .background-cover
{
    position: absolute;
    width: 100%    !important;
    height: auto   !important;
    z-index: 9;
}

#cover .veil,
#cover #scrollicon,
#cover .table {
    z-index: 10;
    display: none;
    pointer-events: none;
}

#cover .veil {
    display: block;
    z-index: 9;
}

#cover .table
{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    padding-top: 50px;
}

@-webkit-keyframes show{ 0%{ opacity: 0; }100%{ opacity: 1;} }
@-moz-keyframes show{ 0%{ opacity: 0; }100%{ opacity: 1;} }
@-ms-keyframes show{ 0%{ opacity: 0; }100%{ opacity: 1;} }
@-o-keyframes show{ 0%{ opacity: 0; }100%{ opacity: 1;} }
@keyframes show{ 0%{ opacity: 0; }100%{ opacity: 1;} }

#cover .table .cell
{
    text-align: center;
}

#cover .veil
{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: #000;
    opacity: .25;
}

#cover .table .title
{
    -webkit-animation: show 3s 1s both;
    -moz-animation: show 3s 1s both;
    -ms-animation: show 3s 1s both;
    -o-animation: show 3s 1s both;
    animation: show 3s 1s both;

    position: relative;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 2em;
    color: #FFF;
}

#cover .table .description
{
    -webkit-animation: show 3s 1.5s both;
    -moz-animation: show 3s 1.5s both;
    -ms-animation: show 3s 1.5s both;
    -o-animation: show 3s 1.5s both;
    animation: show 3s 1.5s both;

    position: relative;
    font-family: "lora", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.25em;
    color: #FFF;
}

/* QUOTE */


/* CTA */

#cta
{
    height: 100%;
    color: #FFF;
    text-align: center;
}

#cta .image
{
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

#cta .back
{
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    /*background: rgba(193, 208, 0, 0.5);*/
    background: rgba(0, 0, 0, 0.5);
}

#cta .text
{
    position: relative;
}

#cta .q
{
    font-size: 4em;
    font-weight: 700;
    font-family: "Lora", serif;
    font-style: italic;
    font-weight: 100;
}

#cta .i
{
    font-family: "Lora", serif;
    font-style: italic;
    font-weight: 100;
    color: #000;
    font-size: 1.5em;
}

#cta .c
{
    text-transform: uppercase;
    display: inline-block;
    margin: 50px 0;
    padding: 15px 25px;
    border: 1px solid #FFF;
    font-size: 1.5em;
    background: #FFF;
    border-radius: 10px;
    color: #C1D000;
}

#cta .c:hover
{
    border-color: #C1D000;
    background: #C1D000;
    color: #FFF;
}

#cta .t
{
    font-size: 1.5em;
    text-transform: uppercase;
}

/* SECTIONS */

section
{
    position: relative;
}

.section {
    height: 100%;
}

section .table
{
    display: table;
    height: 100%;
}

section .cell
{
    display: table-cell;
    vertical-align: middle;
}

section .cell.top{ vertical-align: top; }
section .cell.bottom{ vertical-align: bottom; }

section h2
{
    font-family: "Proxima Nova", sans-serif;
    font-weight: 300;
    font-size: 2em;
}

section h3
{
    font-family: "Lora", serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.25em;
    color: #AAA;

}

section.topic
{
    height: 100%;
}

section.topic .table
{
    position: absolute;
    width: 100%; height: 100%;
    left: 0; top: 0;
}

section.topic .txt
{
    z-index: 1;
}

section.topic .image
{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

section.topic .back
{
    position: absolute;
    width: 100%; height: 100%;
    left: 0; top: 0;
    background: rgba(0, 0, 0, .5);
}

section.topic .imagecover
{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FFF;

    display: none;
}

section.topic .text
{
    position: relative;
    text-align: center;
    width: 50%;
    margin: 0 auto;

    color: #FFF;
    border-color: #FFF;
}

section.topic .text h3
{
    margin-bottom: 15px;
    color: #FFF;
}

section.topic .text p
{
    font-family: "Roboto Slab", serif;
    font-weight: 300;
    color: #AAA;
    font-size: .85em;
    padding: 25px 0;

    display: none;
}

section.topic .text .button
{
    display: inline-block;
    color: #000;
    padding: 12px;
    text-transform: uppercase;
    border: 1px solid;
    margin-top: 30px;

    border-color: inherit;
    color: inherit;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -os-border-radius: 5px;
    border-radius: 5px;
}

section.topic .text .button:hover
{
    background: #C1D000;
    border-color: #C1D000;
    color: #FFF;
}

@media screen and (min-width: 770px)
{

  #cover .table .title{ font-size: 3em; }
    #cta{ border-bottom: 25px solid #FFF; }
    section{ margin-bottom: 25px; }
    section.topic .table{ position: relative; width: 50%; float: left; }
    section.topic .back{ display: none; }
    section.topic .text{ text-align: justify; color: #000; border-color: #000; }
    section.topic .text h3{ color: #AAA; }
    section.topic .text p{ display: block; }
}

@media screen and (min-width: 1025px) {
    #cover .veil,
    #cover #scrollicon {
        display: block;
    }

    #cover .table {
        display: table;
    }

    #cover .veil,
    #cover #scrollicon,
    #cover .table {
        pointer-events: auto;
    }
}