/* ################################## EXTREAM CSS FRAMEWORK by Labtech ##################################*/
/* ######################################## All rights Reserved #########################################*/
.ex-gradient {
    background-color: whitesmoke;
    background-image: linear-gradient(0deg, #fff 0%, #ecf2f6 100%);
}
.ex-gradientRight {
    background-color: rgb(255, 238, 212);
    background-image: linear-gradient(20deg, #fff 50%, rgb(255, 238, 212) 100%);
}
.ex-gradientGreenRight {
    background-color: white;
    background-image: linear-gradient(20deg, #fff 50%, #2fd435e0 100%);
}
.ex-gradientGreenBottonRight {
    background-color: white;
    background-image: linear-gradient(170deg, #fff 40%, #abffaf 100%);
}

.ex-opacity85 {
    opacity: 0.85;
}

.ex-separatorHeight5 {
    height: 5px;
}
.ex-separatorHeight10 {
    height: 10px;
}

.ex-font12 {
    font-size: 12px;
}
.ex-font14 {
    font-size: 14px;
}

.ex-paddingT8{
    padding-top: 8px;
}
.ex-paddingT16{
    padding-top: 16px;
}
.ex-paddingR8{
    padding-right: 8px;
}
.ex-paddingR16{
    padding-right: 16px;
}
.ex-paddingB8{
    padding-bottom: 8px;
}
.ex-paddingB16{
    padding-bottom: 16px;
}
.ex-paddingL8{
    padding-left: 8px;
}
.ex-paddingL16{
    padding-left: 16px;
}

.ex-developer1 {
    color: white;
    text-align: center;
    padding: 10px 30px;
}
.ex-developer1 a {
    text-decoration: underline;
}
@media (min-width: 601px)
{
    .ex-developer1 {
        text-align: right;
    }
}

/* ################################## ANIMATIONS on HOVER #############################*/
.ex-rotate360:hover {
    animation: rotate360 0.3s forwards normal linear;
}
@-webkit-keyframes rotate360 {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}
@keyframes rotate360 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

/* ################################## ANIMATIONS on SCROLL ############################*/
.revealOnScroll {
    opacity: 0;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}
.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}


/* ################################## Tests, Values ##################################*/
/*.navLeft:hover {*/
/*animation: firstTest 2s forwards normal linear;*/

/*animation-name: firstTest;*/
/*animation-delay: 2s;*/
/*animation-direction: normal;*/
/*animation-duration: 2s;*/
/*animation-fill-mode: forwards;*/
/*animation-iteration-count: infinite;*/
/*animation-play-state: paused;*/

/*animation-timing-function: ease;*/
/*animation-timing-function: ease-in;*/
/*animation-timing-function: ease-in-out;*/
/*animation-timing-function: ease-out;*/
/*animation-timing-function: linear;*/
/*animation-timing-function: step-end;*/
/*animation-timing-function: step-start;*/
/*animation-timing-function: steps(3, start);*/
/*}*/

/*@keyframes firstTest {
    0% {
        width: 50%; height: 400px;
    }
    60% {
        width: 70%; height: 450px;
    }
    100% {
        width: 80%; height: 700px;
    }
}*/