:root {
    --m_transition: all 0.2s cubic-bezier(.52,.08,.38,.91);
    --green: #19A419;
    --blue: #0080FF;
    --red: #CC0000;
    --yellow: #FFD700;
    --grey1E: #1E1E1E;
    --grey3C: #3C3C3C;
    --grey69: #696969;
    --grey96: #969696;
    --greyCA: #CACACA;
    --greyE1: #E1E1E1;
    --orange: #f2b145;
}

/* RESET */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}

a {
    cursor: pointer;
    text-decoration: none;
    color: #000;
}

::-webkit-scrollbar-track {
    box-shadow: none;
    background: none;
    border: none;
}

/* FONTS */

@font-face {
    font-family: "Poppl-Laudatio";
    src: url("../fonts/Poppl-Laudatio/Poppl-Laudatio-Bold.woff2") format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Poppl-Laudatio";
    src: url("../fonts/Poppl-Laudatio/Poppl-Laudatio-Regular.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppl-Laudatio";
    src: url("../fonts/Poppl-Laudatio/Poppl-Laudatio-Light.woff2") format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "Moche";
    src: url("../fonts/Moche/Moche-Bold.woff2") format('woff2'),
         url("../fonts/Moche/Moche-Bold.woff") format('woff'),
         url("../fonts/Moche/Moche-Bold.eot") format('embedded-opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Moche";
    src: url("../fonts/Moche/Moche-Light.woff2") format('woff2'),
         url("../fonts/Moche/Moche-Light.woff") format('woff'),
         url("../fonts/Moche/Moche-Light.eot") format('embedded-opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "Moche";
    src: url("../fonts/Moche/Moche-Regular.woff2") format('woff2'),
         url("../fonts/Moche/Moche-Regular.woff") format('woff'),
         url("../fonts/Moche/Moche-Regular.eot") format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

/* MAIN */

html, body {
    height: 100%;
    width: 100%;
    font-family: 'Poppl-Laudatio', arial, serif;
    background: #FFFFFF;
}

html {
    overflow: hidden;
    position: relative;
}

body {
    margin: auto;
    overflow-x: hidden;
    overflow-y: scroll;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.underline {
    text-decoration: underline;
}

.capitalize {
    text-transform: capitalize;
}

.text_center {
    text-align: center;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.title {
    font-size: var(--m_font_size_title);
    font-family: 'Moche', arial, serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: normal;
}

.text {
    font-size: var(--m_font_size_text);
    font-family: 'Poppl-Laudatio', arial, serif;
    font-weight: lighter;
}

.justify {
    text-align: justify;
}

.align_right {
    text-align: right;
}

.align_center {
    text-align: center;
}

.align_left {
    text-align: left;
}

.active_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.active_block {
    display: block;
}

.disable {
    display: none;
}

.active {
    display: flex;
}

.mobile {
    display: none;
}

.link {
    text-decoration: underline;
}

@-webkit-keyframes opacity {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes opacity {
    from {opacity: 0}
    to {opacity: 1}
}

@-webkit-keyframes opacity_anime {
    0% {opacity: 0}
    50% {opacity: 1}
    100% {opacity: 0}
}

@keyframes opacity_anime {
    0% {opacity: 0}
    50% {opacity: 1}
    100% {opacity: 0}
}

/* BACKGROUND */

.b_white {
    background: #FFF;
}

.b_black {
    background: #000;
}

.b_red {
    background: var(--red);
}

.b_blue {
    background: var(--blue);
}

.b_green {
    background: var(--green);
}

.b_greyE1 {
    background: var(--greyE1);
}

.b_grey1E {
    background: var(--grey1E);
}

.b_grey3C {
    background: var(--grey3C);
}

.b_greyCA {
    background: var(--greyCA);
}

.b_grey69 {
    background: var(--grey69);
}

.b_grey96 {
    background: var(--grey96);
}

/* SIZE */

.w_100 {
    width: 100%;
}

.w_50 {
    width: 50%;
}

.w_25 {
    width: 25%;
}

.w_75 {
    width: 75%;
}

.w_33 {
    width: 33%;
}

.w_66 {
    width: 66%;
}

/* FEATHER ICONS */
.feather {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.f_white {
    stroke: #FFF;
}

.f_black {
    stroke: #000;
}

.f_red {
    stroke: var(--red);
}

.f_blue {
    stroke: var(--blue);
}

.f_green {
    stroke: var(--green);
}

.f_greyE1 {
    stroke: var(--greyE1);
}

.f_grey1E {
    stroke: var(--grey1E);
}

.f_grey3C {
    stroke: var(--grey3C);
}

.f_greyCA {
    stroke: var(--greyCA);
}

.f_grey69 {
    stroke: var(--grey69);
}

.f_grey96 {
    stroke: var(--grey96);
}

.back_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.back_btn .feather {
    margin-right: 10px;
}

/* IMG */
img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* LOADER */

.main_loader {
    position: absolute;
    z-index: 3000;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: #FFFFFF;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.main_loader .loader_logo {
    height: 60px;
    -webkit-animation: infinite 2s opacity_anime;
    animation: infinite 2s opacity_anime;
}


/* RESPONSIVE */

@media only screen and (min-width : 900px) {
    .desktop {
        display: flex !important;
    }

    .mobile {
        display: none !important;
    }
}

@media only screen and (max-width : 900px) {
    .desktop {
        display: none !important;
    }

    .mobile {
        display: flex !important;
    }
}