/*
 * Author: Trigama international s.r.o.
 * URL: https://www.trigama.eu
 *
 * Project Name: RedBlue
 * Version: 1.0
 * Date: 05-03-2018
 */


/* ==========================================================================
   Base Styles & Fonts Import
   ========================================================================== */


@font-face {
  font-family: 'Oswald';
  font-style:  normal;
  font-weight: 400;
  src: url('../fonts/Oswald.eot');
  src: local('Oswald'), url('../fonts/Oswald-Light.ttf') format('truetype'), url('../fonts/Oswald.svg#Oswald-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    font-style:  normal;
    font-weight: 400;
    src: url('../fonts/Montserrat-Regular.ttf');
    src: local('Montserrat'), url('../fonts/Montserrat-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* ==========================================================================
   General styles
   ========================================================================== */
html {

    background-color: #313e48;
}

html,
body {
    /*height: 100%;*/
    overflow: hidden;
    margin:0;
    padding: 0;

}
/* ==========================================================================
   MENU CONFIGURATION
   ========================================================================== */




/* ==========================================================================
   Wrap Sections
   ========================================================================== */

.all{
    width:100%;
    height: 100vh;
    position: relative;
}

.cover{
    /*position:absolute;
    top:50%;
    left:50%;
    padding:15px;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    position: relative;*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 0;
    padding: 0 10px;
}


.clearfix::after {
    content: "";
    clear: both;
    display: table;

}


.img-container {
    width: 30%;
    display: inline-block;
    position: relative;

}

.img-container a img {
    box-shadow: 0 36px 39px rgba(0,0,0,.50);
    transition: .3s ease-in-out;
}

.img-container a:active img {
    box-shadow: 0 15px 20px rgba(0,0,0,.5);
}


.nodisplay{
    display: none;
}


::-moz-focus-inner {
    border: 0 !important;
}

:focus, :hover, :active {
    outline: 0 !important;
}

@media screen and (orientation:portrait) {
}
@media  (max-width:768px) {


    .cover {

        width: 100%;
    }
}

    @media screen and (orientation:landscape) {

}

@media  (max-width:420px) {

    @media screen and (orientation:landscape) {
    }
}


@keyframes hand {
    0% {
        opacity: 0;
    }
    5.0025% {
        opacity: .75;
    }
    5.0025% {
        transform: scale(1);
    }
    6.2475% {
        transform: scale(0.9);
    }
    7.5% {
        transform: scale(1);
    }
    17.25% {
        opacity: .75;
    }
    25.5% {
        opacity: 0;
    }

}

@keyframes circle {
    0% {
        opacity: 0;
    }
    6.2475% {
        opacity: 0;
        transform: scale(1);
    }
    9.9975% {
        opacity: 0.7;
        transform: scale(1.5);
    }
    20.00025% {
        transform: scale(1);
        opacity: 0;
    }

}

.hand {
    position: absolute;
    top: 570px;
    right: -60px;
    z-index: 10;
    animation-name: hand;
    opacity: 0;
    animation-duration: 14s;
    animation-iteration-count: infinite;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: white;
    position: absolute;
    top: 570px;
    right: 156px;
    z-index: 9;
    opacity: 0;
    animation-name: circle;
    animation-duration: 14s;
    animation-iteration-count: infinite;
}