/* setting.css | made by CH

--------------------------------------------------------------
>>> TABLE OF CONTENTS:
--------------------------------------------------------------
# 01 Page Setup --> Zeile 15
# 02 Global Colors --> Zeile 55
# 03 Global Paddings --> Zeile 160
# 04 Global Animations --> Zeile 180
--------------------------------------------------------------

===========================
***** # 01 PAGE SETUP *****
=========================*/

body {
    text-rendering: optimizeLegibility !important;
    padding: 0 !important;
    margin: 0 !important;
}
 @media screen and (min-width: 769px) {
div#content {
    padding: 0 !important;
    margin: 0 !important;
}
}
 @media screen and (max-width: 768px) {
   div#content {
       padding: 0 !important;
       margin: 0 !important;
   }
 }
.wrapper {
    padding: 0 !important;
}

div#page {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

#primary {
    padding: 0px !important;
}

.container-fluid {
    width: 100%;
    padding: 0;
    margin: 0;
}

/*Sidebar*/
#secondary {
    display: none;
}


/*=============================
 ***** # 02 GLOBAL COLORS *****
===============================

SET UP DIFFERENT COLORS USED IN DESIGN*/

:root {
    /*Template Colors*/
    --prim-clr: #5284A3;
    --prim-dark-clr: #233A45;
    --sec-clr: #5E656D;
    --ter-clr: #706F6F;
    --dark-clr: #2D373F;
    --white-clr: white;

    /*Text Colors*/
    --txt-dark-clr: #313541;
    --txt-medium-clr: #C2C4CB;
    --txt-light-clr: #AAA;
    --txt-white-clr: #FFF;

    /*Alert Colors*/
    --ok-clr: #00ba0a;
    --err-clr: #ff1300;

    /*Wireframe Colors*/
    --wrf-darker-clr: #292B2E;
    --wrf-dark-clr: #41474D;
    --wrf-medium-clr: #8D969F;
    --wrf-light-clr: #E3E4E6;
    --wrf-lighter-clr: #EEEFF0;
}

/*Template Colors Classes*/

prim, .prim-clr {
    color: var(--prim-clr);
}

.sec-clr {
    color: var(--sec-clr);
}

.ter-clr {
    color: var(--ter-clr);
}

.dark-clr {
    color: var(--dark-clr);
}

white, .white-clr {
    color: var(--white-clr);
}

/*Text Colors Classes*/

.txt-dark-clr {
    color: var(--txt-dark-clr);
}

.txt-medium-clr {
    color: var(--txt-medium-clr);
}

.txt-light-clr {
    color: var(--txt-light-clr);
}

.txt-white-clr {
    color: var(--txt-white-clr);
}

/*Alert Colors Classes*/

.ok-clr {
    color: var(--ok-clr);
}

.err-clr {
    color: var(--err-clr);
}

/*Wireframe Colors Classes*/

.wrf-darker-clr {
    color: var(--wrf-darker-clr);
}

.wrf-dark-clr {
    color: var(--wrf-dark-clr);
}

.wrf-medium-clr {
    color: var(--wrf-medium-clr);
}

.wrf-light-clr {
    color: var(--wrf-light-clr);
}

.wrf-lighter-clr {
    color: var(--wrf-lighter-clr);
}

/*========================
 ***** # 03 PADDINGS *****
==========================

GLOABAL PADDINGS FOR KINGCOMPOSER BLOCKS*/

:root {
    --pad-120: 120px;
    --pad-96: 96px;
    --pad-80: 80px;
    --pad-64: 64px;
    --pad-48: 48px;
    --pad-32: 32px;
    --pad-24: 24px;
    --pad-16: 16px;
    --pad-8: 8px;
}

/*=================================
 ***** # 04 GLOBAL ANIMATIONS *****
=================================*/

:root {
    --animate-set: all 0.3s ease-in-out;
}

/*Animation Classes

.fade-out
.fade-in
.grow
.shrink
.shake
.rotate
.darker
*/

/*FADE OUT*/

.fade-out {
    transition: var(--animate-set);
    opacity: 1;
}

.fade-out:hover {
    opacity: 0;
}

/*FADE IN*/

.fade-in {
    transition: var(--animate-set);
    opacity: 0;
}

.fade-in:hover {
    opacity: 1;
}

/*GROW*/

.grow {
    transition: var(--animate-set);
}

.grow:hover {
    transform: scale(1.05);
}

/*SHRINK*/

.shrink {
    transition: var(--animate-set);
}

.shrink:hover {
    transform: scale(0.95);
}

/*SHAKE*/

.shaking:hover {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/*ROTATE*/

.rotate {
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

.rotate:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

/*DARKER*/

.darker {
    transition: var(--animate-set);
}

.darker:hover {
    filter: brightness(80%);
}

/*BRIGHTER*/

.brighter {
    transition: var(--animate-set);
}

.brighter:hover {
    filter: brightness(200%);
}

/*GRADIENT FOLLOW MOUSE*/

#gradient-follow-mouse {
    height: 20vh;
    width: 100vw;
    background: transparent radial-gradient(at calc(var(--mouse-x, 0) * 100%) calc(var(--mouse-y, 0) * 100%), yellow, green) no-repeat 0 0;
}