@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}




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

@keyframes fadeTo {
    from {
        opacity:0.3;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadeTo { /* Firefox */
    from {
        opacity:0.3;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadeTo { /* Safari and Chrome */
    from {
        opacity:0.3;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadeTo { /* Opera */
    from {
        opacity:0.3;
    }
    to {
        opacity: 1;
    }
}


/*Button Hover*/
[class^="hvr-"] {
    margin: 0px;
    padding: 18px 34px;
    cursor: pointer;
    background: transparent;
    text-decoration: none;
    color: #000000;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    border: 1px solid #da020d;
    box-sizing: border-box;
}

/* Rectangle Out */
.hvr-rectangle-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.hvr-rectangle-out:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:0;
    background: #da020d;
    /*-webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;*/
}
.hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active {
    color: white;
    text-decoration: none;
}
.hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before {
    /*-webkit-transform: scale(1);
    transform: scale(1);*/
    width:100%;
}



/*scale*/
.scale{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transition: transform .75s ease-in-out;
    -webkit-transition: -webkit-transform .75s ease-in-out;
    -moz-transition: -moz-transform .75s ease-in-out;
    -o-transition: -o-transform .75s ease-in-out;
}



/*Burger menu*/

/* -----------------------------------------------------------------------------

  HAMBURGER ICONS COMPONENT

----------------------------------------------------------------------------- */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `c-hamburger` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */
.c-hamburger {
    display: block;
    position: absolute;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 38px;
    font-size: 0;
    text-indent: -9999px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border: none;
    cursor: pointer;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
    right:20px;
    top:50%;
    z-index: 4;
    border:2px solid #ffffff;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);

}

.c-hamburger:focus {
    outline: none;
}

.c-hamburger span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 2px;
    width: 18px;
    background: #ffffff;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);

}
.main-page .c-hamburger span {
    background: white;
}

.c-hamburger span::before,
.c-hamburger span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    content: "";
}

.main-page .c-hamburger span::before,
.main-page .c-hamburger span::after {
    background-color: #ffffff;
}

.c-hamburger span::before {
    top: -8px;
}

.c-hamburger span::after {
    bottom: -8px;
}


/**
 * Style 2
 *
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.c-hamburger--htx {
    background-color: transparent;
}

.c-hamburger--htx span {
    -webkit-transition: background 0s 0.3s;
    transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
    -webkit-transition-duration: 0.3s, 0.3s;
    transition-duration: 0.3s, 0.3s;
    -webkit-transition-delay: 0.3s, 0s;
    transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
    -webkit-transition-property: top, -webkit-transform;
    transition-property: top, transform;
}

.c-hamburger--htx span::after {
    -webkit-transition-property: bottom, -webkit-transform;
    transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
    background-color: transparent;
}

.c-hamburger--htx.is-active span {
    background: none;
}

.c-hamburger--htx.is-active span::before {
    top: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #fff;
}

.c-hamburger--htx.is-active span::after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #fff;
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
    -webkit-transition-delay: 0s, 0.3s;
    transition-delay: 0s, 0.3s;
}