:root {
    --primary: #ff6600;
    --secondary: #6d89b9;
    --light: #fff;
    --dark: #314455;
    --lightbg: #d1d9ea;
    --gray: rgba(122,122,122,1);
    --lightgray: rgba(190,190,190,1);
    --darkgray: #3b210d;
}

@font-face {
  font-family: Queensila;
  src: url('uploads/fonts/Queensila.ttf');
}

body { overflow-x: hidden; padding: 120px 0px 0px; background: var(--dark); }
body:before { content: ''; width: 100%; height: 500px; top: 0px; left: 50%; transform: translatex(-50%); position: absolute; background: var(--dark); }

@media (max-width: 1024px) {
body { padding-top: 120px; }
}

body,p,h3,h4,li,a,input,textarea { font-family: 'Montserrat', 'Open Sans', 'Arial', sans-serif; }
h1,h2 { font-family: 'Queensila', 'Montserrat', 'Open Sans', 'Arial', sans-serif; letter-spacing: 0.07em; }

p > a, a:active { color: var(--primary); }

body h1 { font-size: 36px; }
body h2 { font-size: 32px; }
body h3 { font-size: 28px; }

.wd-font { font-family: 'Queensila', 'Montserrat', 'Open Sans', 'Arial', sans-serif; letter-spacing: 0.07em; }

h1, h2, h3, h4 { margin-top: 0px; margin-bottom: 20px; }
.wd-xs, .wd-s, .wd-m, .wd-l, .wd-xl { line-height: 1.2em; }
.wd-xs { font-size: 14px; }
.wd-s { font-size: 17px; }
.wd-m { font-size: 24px; }
.wd-l { font-size: 35px; }
.wd-xl { font-size: 55px; }
.wd-xxl { font-size: 95px; }

@media (max-width: 1024px) {
.wd-xs { font-size: 14px; }
.wd-s { font-size: 15px; }
.wd-m { font-size: 22px; }
.wd-l { font-size: 35px; }
.wd-xl { font-size: 50px; }
.wd-xxl { font-size: 75px; }
}

@media (max-width: 600px) {
.wd-xs { font-size: 13px; }
.wd-s { font-size: 14px; }
.wd-m { font-size: 18px; }
.wd-l { font-size: 28px; }
.wd-xl { font-size: 40px; }
.wd-xxl { font-size: 55px; }
}

.wd-align-left { text-align: left; }
.wd-align-center { text-align: center; }
.wd-align-right { text-align: right; }

body .wd-s { text-align: justify !important; }

.wd-thin { font-weight: 300; }
.wd-thick { font-weight: 600; }
.wd-bold { font-weight: 900; }

.wd-underlined { text-decoration: underline !important; }

.wd-m-0-auto { margin: 0px auto; }
.wd-m-10-auto { margin: 10px auto; }
.wd-m-10-0 { margin: 10px 0px; }

@media (max-width: 1024px) {
body .wd-mobil-align-left { text-align: left; }
body .wd-mobil-align-center { text-align: center; }
body .wd-mobil-align-right { text-align: right; }

body .wd-mobil-m-0-auto { margin: 0px auto; }
body .wd-mobil-m-10-auto { margin: 10px auto; }
body .wd-mobil-m-10-0 { margin: 10px 0px; }
}


.wd-m-none { margin: 0px !important; }

.wd-primary, a.wd-primary:hover { color: var(--primary); }
.wd-secondary, a.wd-secondary:hover { color: var(--secondary); }
.wd-light, a.wd-light:hover { color: var(--light); }
.wd-dark, a.wd-dark:hover { color: var(--dark); }
.wd-gray, a.wd-gray:hover { color: var(--gray); }
.wd-lightgray, a.wd-lightgray:hover { color: var(--lightgray); }
.wd-darkgray, a.wd-darkgray:hover { color: var(--darkgray); }

.wd-opacity-0-25 { opacity: .5; }
.wd-opacity-0-5 { opacity: .5; }
.wd-opacity-0-75 { opacity: .75; }

/* HIGHLIGHT */
.wd-highlight { padding: 20px 0px; font-size: 1em; border-bottom: 2px solid var(--primary); }
.wd-highlight.wd-light { border-color: var(--secondary); }

@media (max-width: 1024px) {
.wd-highlight { padding: 10px 0px 10px 25px; }
}

/*********
**********
********** BUTON
**********
**********/

/* CLASIC */
.wd-button, .wd-button:hover, .wd-button:before, .wd-button:hover:before, .wd-button span, .wd-button:hover span, .wd-button span:before, .wd-button:hover span:before, .wd-button span:after, .wd-button:hover span:after { transition: .3s all; }

.wd-button { text-align: center; display: inline-block; margin: 30px auto; position: relative; }

.wd-button.center { left: 50%; transform: translatex(-50%); }

@media (max-width: 991px) {
.wd-button.mobil-center { left: 50%; transform: translatex(-50%); }
}

/* SCROLL DOWN */
.wd-button.scroll { padding-bottom: 40px; color: var(--dark); }
.wd-button.scroll:before, .wd-button.scroll:after { content: ''; filter: invert(1); width: 30px; height: 30px; position: absolute; background: url('uploads/icons/wd-next.webp') no-repeat center center; background-size: cover; left: 50%; transform: translatex(-50%) rotate(90deg); bottom: 0px; }

.wd-button.scroll:before { animation: scroll 1.5s infinite linear; }
.wd-button.scroll:after { animation: scroll 1.5s .9s infinite linear; }

/* LIGHT */
.wd-button.light { color: var(--light); }
.wd-button.light:before, .wd-button.light:after { filter: none; }

@keyframes scroll {
    0% { bottom: 20px; opacity: 0; transform: translatex(-50%) rotate(90deg) scale(.2); }
    30% { bottom: 0px; transform: translatex(-50%) rotate(90deg) scale(.6); }
    70% { bottom: -20px; opacity: 1; transform: translatex(-50%) rotate(90deg) scale(1); }
    100% { bottom: -40px; opacity: 0; transform: translatex(-50%) rotate(90deg) scale(1); }
}



/*********
**********
********** NARROW BLOCK
**********
**********/

.wd-block { max-width: calc(100% - 20px); margin: 0 auto; }
.wd-block.narrow { width: 600px !important; }
.wd-block.narrower { width: 400px !important; }

/*********
**********
********** COLUMNS
**********
**********/

.wd-col { display: inline-block; }

@media (min-width: 1024px) {
.wd-col-3-12 { width: 24%; }
.wd-col-4-12 { width: 32%; }
.wd-col-6-12 { width: 49%; }
.wd-col-8-12 { width: 66%; }
.wd-col-12-12 { width: 100%; }
}

@media (max-width: 1024px) {
.wd-col-3-12, .wd-col-4-12, .wd-col-6-12, .wd-col-8-12, .wd-col-12-12 { width: 100%; }
}

/*********
**********
********** LISTS
**********
**********/

.wd-list { padding-left: 0px; list-style: none; }
.wd-list.ul {  }
.wd-list.ul li { padding-left: 50px; position: relative; margin: 25px 0px; }
.wd-list.ul li:before { content: ''; width: 35px; height: 35px; position: absolute; top: 50%; transform: translatey(-50%); left: 0px; background-size: 100%; background-position: center center; background-repeat: no-repeat; }