/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : Jun 18, 2018, 11:11:21 AM
    Author     : Lubost
*/

* {
    /*outline: 1px solid #bada55;*/
}

@font-face {
    font-family: "Coolvetica";
    src: url("../fonts/coolvetica rg.ttf");
}


@font-face {
    font-family: "Roboto";
    src: url(../fonts/Roboto-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url(../fonts/Roboto-Light.ttf);
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url(../fonts/Roboto-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Roboto Slab";
    src: url(../fonts/RobotoSlab-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}


* {
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: "Oswald";
    src: url(../fonts/Oswald-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Oswald";
    src: url(../fonts/Oswald-Light.ttf);
    font-weight: 300;
    font-style: normal;
}

em {
    font-style: italic;

}

.croppie-container .cr-viewport, .croppie-container .cr-resizer {
    border: none;
}

.hamburger-checkbox {
    display: none;
}

.spinner {
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #014a6cbd;
}

.spinner > div {
    width: 10px;
    height: 10px;
    background-color: white;
    position: relative;
    top: 25%;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}



@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

a.ajax, button.ajax {
    position: relative;
}

.pac-container {
    z-index: 1051;
}

@media (max-width: 992px) {

    #menu-hamburger
    {
        display: block;
        position: absolute;
        right: 0;
        top: 10%;
        left: 0;
        padding-bottom: 10px;
        z-index: 3;

        -webkit-user-select: none;
        user-select: none;
    }

    #menu-hamburger input.hamburger-checkbox
    {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: 85%;

        cursor: pointer;

        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */

        -webkit-touch-callout: none;
    }

    /*
     * Just a quick hamburger
     */
    #menu-hamburger span.hamburger-hr
    {
        display: block;
        width: 33px;
        height: 4px;
        left: 85%;
        position: relative;
        margin-bottom: 5px;
        background-color: white;

        z-index: 1;

        transform-origin: 4px 0px;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
            background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
            opacity 0.55s ease;
    }

    #menu-hamburger span.hamburger-hr:first-child
    {
        transform-origin: 0% 0%;
    }

    #menu-hamburger span.hamburger-hr:nth-last-child(2)
    {
        transform-origin: 0% 100%;
    }

    /*
     * Transform all the slices of hamburger
     * into a crossmark.
     */
    #menu-hamburger input.hamburger-checkbox:checked ~ span.hamburger-hr
    {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);

    }

    /*
     * But let's hide the middle one.
     */
    #menu-hamburger input.hamburger-checkbox:checked ~ span.hamburger-hr:nth-last-child(3)
    {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
     * Ohyeah and the last one should go the other direction
     */
    #menu-hamburger input.hamburger-checkbox:checked ~ span.hamburger-hr:nth-last-child(2)
    {
        transform: rotate(-45deg) translate(0, -1px);
    }

    /*
     * Make this absolute positioned
     * at the top left of the screen
     */
    #menu-content
    {
        height: 0;
        width: 100%;
        position: absolute;
        top: 160%;
        background-color: #a4a295;
        overflow: auto;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */

        transform-origin: 0% 0%;
        /*transform: translate(0, -170%);*/

        /* transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);*/
    }


    header.homepage #menu-content {
        top: 134%;
    }

    /*
     * And let's slide it in from the left
     */
    #menu-hamburger input.hamburger-checkbox:checked ~ #menu-content
    {
        /*transform: none;*/
    }
}