/* ==========================================================================
Author's custom styles
========================================================================== */

/* Font family */
body {
    font-family: 'Open Sans', sans-serif;
    /*overflow: hidden;*/
}

/* Old Browser Redirect */
div.browsehappy {
    background: white;
    color: #333333;
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top: 0;
    z-index: 100;
}

div.browsehappy div {
    background: transparent;
    width: 800px;
    margin: 200px auto;
    text-align: justify;
}

div.browsehappy div p {
    font-size: 4em;
}

/* Segments and overall scheme */
.segment {
    position: relative;
    overflow: hidden;
}

.segment > .container {
    min-height: 400px;
    padding-top: 180px;
    padding-bottom: 180px;
}

.segment.blue {
    background: #043471;
    background: #05306E;
    color: white;
}

.segment.white {
    background: white;
    color: #043471;
    color: #05306E;
}

.segment.main {
    background: black;
}


h1.logo {
    font-size: 8em;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.logo-description h2 {
    margin-top: 10px;
}

h2 {
    font-size: 4em;
}

h3 {
    font-size: 2.5em;
}

.row + .row {
    padding-top: 120px;
}

.js-click {
    cursor: pointer;
}

/* Main segment background - rectangles */
.rectangles {
}

.rectangles > div {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

.rectangles > .rect1,
.rectangles > .rect2,
.rectangles > .rect3,
.rectangles > .rect1 > div,
.rectangles > .rect2 > div,
.rectangles > .rect3 > div {
    width: 1000px;
    height: 1000px;
    position: absolute;
    top: 0;
    left: 0;
}

.rectangles > .rect1 > div,
.rectangles > .rect2 > div,
.rectangles > .rect3 > div {
    background: rgba(0,0,0,0.7);
}

.rectangles > .rect1 {
    top: -550px;
    left: 50%;
    margin-left: -400px;
    transform-origin: -30% 20%;
}

.rectangles > .rect1 > div {
    -webkit-transform: rotate3d(0, 0, 1, -33deg);
    transform: rotate3d(0, 0, 1, -33deg);
}

.rectangles > .rect2 {
    top: 530px;
    left: 50%;
    margin-left: -1050px;
    transform-origin: 120% 50%;
}

.rectangles > .rect2 > div {
    -webkit-transform: rotate3d(0, 0, 1, -22deg);
    transform: rotate3d(0, 0, 1, -22deg);
}

.rectangles > .rect3 {
    top: 370px;
    left: 50%;
    margin-left: 350px;
    transform-origin: -20% 10%;
}

.rectangles > .rect3 > div {
    -webkit-transform: rotate3d(0, 0, 1, -12deg);
    transform: rotate3d(0, 0, 1, -12deg);
}

.segment.main {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    perspective: 1200px;
}

/* Main segment background - rectangles - animation */
/*
@-webkit-keyframes rect1-ellipse-animation {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}
@keyframes rect1-ellipse-animation {
    from {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rect2-ellipse-animation {
    from { -webkit-transform: rotate(-0deg); }
    to   { -webkit-transform: rotate(-360deg); }
}
@keyframes rect2-ellipse-animation {
    from {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rect3-ellipse-animation {
    from { -webkit-transform: rotate(-0deg); }
    to   { -webkit-transform: rotate(-360deg); }
}
@keyframes rect3-ellipse-animation {
    from {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rect1-rotation-animation {
    from { -webkit-transform: rotate(-33deg); }
    to   { -webkit-transform: rotate(-393deg); }
}
@keyframes rect1-rotation-animation {
    from {
        -moz-transform: rotate(-33deg);
        -ms-transform: rotate(-33deg);
        transform: rotate(-33deg);
    }
    to {
        -moz-transform: rotate(-393deg);
        -ms-transform: rotate(-393deg);
        transform: rotate(-393deg);
    }
}
@-webkit-keyframes rect2-rotation-animation {
    from { -webkit-transform: rotate(-22deg); }
    to   { -webkit-transform: rotate(338deg); }
}
@keyframes rect2-rotation-animation {
    from {
        -moz-transform: rotate(-22deg);
        -ms-transform: rotate(-22deg);
        transform: rotate(-22deg);
    }
    to {
        -moz-transform: rotate(338deg);
        -ms-transform: rotate(338deg);
        transform: rotate(338deg);
    }
}
@-webkit-keyframes rect3-rotation-animation {
    from { -webkit-transform: rotate(-12deg); }
    to   { -webkit-transform: rotate(348deg); }
}
@keyframes rect3-rotation-animation {
    from {
        -moz-transform: rotate(-12deg);
        -ms-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }
    to {
        -moz-transform: rotate(348deg);
        -ms-transform: rotate(348deg);
        transform: rotate(348deg);
    }
}

.rectangles > .rect1,
.rectangles > .rect2,
.rectangles > .rect3,
.rectangles > .rect1 > div,
.rectangles > .rect2 > div,
.rectangles > .rect3 > div {
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 120s;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: 1;

    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 120s;
    animation-direction: normal;
    animation-play-state: 1;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.anim-paused,
.anim-paused > div,
.anim-paused > div > div,
.anim-paused > div > div > div {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

.rectangles > .rect1 > div,
.rectangles > .rect2 > div,
.rectangles > .rect3 > div {
    -webkit-animation-duration: 60s;
    animation-duration: 60s;
}

.rectangles > .rect1 {
    -webkit-animation-name: rect1-ellipse-animation;
    animation-name: rect1-ellipse-animation;
}

.rectangles > .rect2 {
    -webkit-animation-name: rect2-ellipse-animation;
    animation-name: rect2-ellipse-animation;
}

.rectangles > .rect3 {
    -webkit-animation-name: rect3-ellipse-animation;
    animation-name: rect3-ellipse-animation;
}

.rectangles > .rect1 > div {
    -webkit-animation-name: rect1-rotation-animation;
    animation-name: rect1-rotation-animation;
}

.rectangles > .rect2 > div {
    -webkit-animation-name: rect2-rotation-animation;
    animation-name: rect2-rotation-animation;
}

.rectangles > .rect3 > div {
    -webkit-animation-name: rect3-rotation-animation;
    animation-name: rect3-rotation-animation;
}*/

.posters {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 6s ease-in-out;
}
.posters > div {
    position: relative;
    display: inline-block;
    width: 16.66%;
    height: 255px;
    margin: 0;
    padding: 0;
    float: left;
/*    border: 1px solid black;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

@media (min-width: 992px) {
    .posters > div {
        width: 12.5%;
    }
}

@media (max-width: 768px) {
    .posters > div {
        width: 20%;
    }
}

@media (max-width: 544px) {
    .posters > div {
        width: 25%;
    }
}

.poster01 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_01.jpg');}
.poster02 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_02.jpg');}
.poster03 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_03.jpg');}
.poster04 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_04.jpg');}
.poster05 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_05.jpg');}
.poster06 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_06.jpg');}
.poster07 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_07.jpg');}
.poster08 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_08.jpg');}
.poster09 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_09.jpg');}
.poster10 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_10.jpg');}
.poster11 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_11.jpg');}
.poster12 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_12.jpg');}
.poster13 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_13.jpg');}
.poster14 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_14.jpg');}
.poster15 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_15.jpg');}
.poster16 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_16.jpg');}
.poster17 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_17.jpg');}
.poster18 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_18.jpg');}
.poster19 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_19.jpg');}
.poster20 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_20.jpg');}
.poster21 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_21.jpg');}
.poster22 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_22.jpg');}
.poster23 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_23.jpg');}
.poster24 {    background-image: url('../img/VB_posters/low-res/BlueBlur/VB_poster_24.jpg');}

.sat > .poster1 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_01.jpg');}
.sat > .poster2 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_02.jpg');}
.sat > .poster3 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_03.jpg');}
.sat > .poster4 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_04.jpg');}
.sat > .poster5 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_05.jpg');}
.sat > .poster6 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_06.jpg');}
.sat > .poster7 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_07.jpg');}
.sat > .poster8 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_08.jpg');}
.sat > .poster9 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_09.jpg');}
.sat > .poster10 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_10.jpg');}
.sat > .poster11 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_11.jpg');}
.sat > .poster12 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_12.jpg');}
.sat > .poster13 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_13.jpg');}
.sat > .poster14 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_14.jpg');}
.sat > .poster15 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_15.jpg');}
.sat > .poster16 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_16.jpg');}
.sat > .poster17 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_17.jpg');}
.sat > .poster18 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_18.jpg');}
.sat > .poster19 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_19.jpg');}
.sat > .poster20 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_20.jpg');}
.sat > .poster21 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_21.jpg');}
.sat > .poster22 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_22.jpg');}
.sat > .poster23 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_23.jpg');}
.sat > .poster24 {    background-image: url('../img/VB_posters/low-res/Vibrant/VB_poster_24.jpg');}

.sat > div {
    opacity: 0;
    transition: opacity 3s;
}

.sat > .sat-opacity {
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 9s;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: 1;

    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-duration: 9s;
    animation-direction: normal;
    animation-play-state: 1;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-animation-name: opacity-animation;
    animation-name: opacity-animation;
}

@-webkit-keyframes opacity-animation {
    from { opacity: 0; }
    33%,66%   { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes opacity-animation {
    from { opacity: 0; }
    33%,66%   { opacity: 0.9; }
    to   { opacity: 0; }
}

.scroll-down {
    position: absolute;
    width: 160px;
    margin: 0;
    margin-left: -80px;
    left: 50%;
    bottom: 0%;
    opacity: 0;
}

.scroll-down > .message {
    text-align: center;
    font-size: 1.5em;
    color: white;
    padding: 0.2em;
    border:1px solid white;
    border-radius: 5px;
}

.scroll-down > .arrow-down {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;

    border-top: 15px solid white;

    margin: 0 auto;
}