/**
 * Looky V0.00-pre1
 * Created by Shiroruby
*/

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');

/* VARIABLES */

:root {
    /* BLACK & WHITE COLORS */
    --white: #ffffff;
    --black: #000000;
    --light: #efefef;
    --dark: #212121;

    /* COLORS */
    --red: #bb3333;
    --yellow: #ffc107;
    --green: #33bb33;
    --blue: #2222bb;
    --brown: #bb7722;
    --magenta: #ee00ee;
    --violet: #7722bb;

    /* BIT DARKEN COLORS */
    --white-dark: #eee;
    --light-dark: #dedede;
    --dark-dark: #101010;
    --red-dark: #aa2222;
    --yellow-dark: #dda100;
    --green-dark: #22aa22;
    --blue-dark: #1111bb;
    --brown-dark: #aa6611;
    --magenta-dark: #dd00dd;
    --violet-dark: #6611aa;

    /* DARKEN COLORS */
    --white-darken: #dddddd;
    --light-darken: #cdcdcd;
    --dark-darken: #010101;
    --red-darken: #881111;
    --yellow-darken: #bb9100;
    --green-darken: #118811;
    --blue-darken: #111188;
    --brown-darken: #aa6611;
    --magenta-darken: #bb00bb;
    --violet-darken: #551199;

    /* FONT SIZES */
    --bigFontSize: 24px;
    --basicFontSize: 16px;
    --smallFontSize: 12px;

    /* HEADINGS */
    --h1: 32px;
    --h2: 28px;
    --h3: 24px;
    --h4: 18px;
    --h5: 16px;
    --h6: 12px;

    /* LEVELS OF MARGINS, PADDINGS ETC. */
    --levelauto: auto;
    --level0: 0px;
    --level1: 5px;
    --level2: 10px;
    --level3: 15px;
    --level4: 20px;
    --level5: 25px;
    --level6: 30px;
    --level7: 35px;
    --level8: 40px;
    --level9: 45px;
    --level10: 50px;

    /* Basic Settings */
    --section-max-width: 1200px;
    --small-section-max-width: 800px;
    --section-width: 100%;

    /* Columns */
    --column-full: 100%;
    --column-2: calc((100% / 2) - 30px);
    --column-3: calc(100% / 3);
    --column-4: calc(100% / 4 - 30px);
    --column-5: calc(100% / 5 - 30px);
    --column-6: calc(100% / 6 - 30px);
    --column-7: calc(100% / 7 - 30px);
    --column-8: calc(100% / 8 - 30px);
    --column-9: calc(100% / 9 - 30px);
    --column-10: calc(100% / 10 - 30px);
    --column-11: calc(100% / 11 - 30px);
    --column-12: calc(100% / 12 - 30px);
    --column-13: calc(100% / 13 - 30px);
    --column-14: calc(100% / 14 - 30px);
    --column-15: calc(100% / 15 - 30px);
    --column-16: calc(100% / 16 - 30px);
    --column-17: calc(100% / 17 - 30px);
    --column-18: calc(100% / 18 - 30px);
    --column-19: calc(100% / 19 - 30px);
    --column-20: calc(100% / 20 - 30px);

    /* Grid columns */
    --grid-1: 5%;
    --grid-2: 10%;
    --grid-3: 15%;
    --grid-4: 20%;
    --grid-5: 25%;
    --grid-6: 30%;
    --grid-7: 35%;
    --grid-8: 40%;
    --grid-9: 45%;
    --grid-10: 50%;
    --grid-11: 55%;
    --grid-12: 60%;
    --grid-13: 65%;
    --grid-14: 70%;
    --grid-15: 75%;
    --grid-16: 80%;
    --grid-17: 85%;
    --grid-18: 90%;
    --grid-19: 95%;
    --grid-20: 100%;
}

/* UI style */
html, body {
    font-family: 'Georama', sans-serif;
    margin: 0;
    padding: 0;

    color: var(--dark);
    font-size: var(--basicFontSize);
}

html,
body,
div,
p,
input,
select {
    box-sizing: border-box;
}

a,
a:link,
a:hover,
a:focus {
    text-decoration: none;
    color: inherit;
}

.top-rounded {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.bottom-rounded {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.left-rounded {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.right-rounded {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.rounded {
    border-radius: 12px;
}

/* Banner */
.banner {
    display: flex;
    flex-wrap: wrap;
    
    width: 100%;
    height: 600px;
}

.banner-full {
    height: 100%;
}

.banner-opacity {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    opacity: .85;
    background-color: var(--black);
}

.banner-main {
    position: relative;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    
    width: 100%;
}

.nav ul {
    list-style-type: none;

    padding-left: 20px;
    padding-right: 20px;
}

.nav ul > li {
    position: relative;

    display: inline-block;
    margin: 0;

    padding-left: 15px;
    padding-right: 15px;
}

.nav ul > li > a,
.nav ul > li > a:link {
    cursor: pointer;
    opacity: .9;
}

.nav ul > li > a:hover,
.nav ul > li > a:focus {
    opacity: 1;
}

.nav .brand,
.nav .brand:link {
    padding-top: 15px;
    padding-bottom: 15px;

    opacity: 1;
}

.nav .mobile-brand,
.nav .mobile-brand:link {
    display: none;
}

.nav > .nav-data {
    display: flex;
    align-items: center;
    width: 100%;
}

.nav .nav-expand {
    cursor: pointer;
    display: none;
}

.nav .brand img,
.nav .mobile-brand img {
    max-height: 48px;
}

.nav ul > li > .dropdown-mark::before {
	content: '';
	transform: rotate(-225deg);
	vertical-align: top;

	display: inline-block;
	width: 0.4em;
	height: 0.4em;

	border-width: 0.2em 0.2em 0 0;
	border-style: solid;

	position: relative;
	left: 100%;
	top: 0.15em;
}

.nav ul > li > .dropdown-mark {
    padding-right: 10px;
}

.nav ul > li > .dropdown {
    display: none;
    position: absolute;
    
    min-width: 200px;

    left: 0;
    top: 15px;

    padding-top: 15px;
}

.nav ul > li > .dropdown.dropdown-right {
    left: unset;
    right: 0;
}

.nav ul > li > .dropdown > .dropdown-inner {
    background-color: var(--white);
    border: 1px solid var(--white-darken);

    color: #000;
}

.nav ul > li > .dropdown .dropdown-item > a,
.nav ul > li > .dropdown .dropdown-item > a:link {
    display: block;
    padding: 10px 30px;

    cursor: pointer;

    background-color: var(--white);
}

.nav ul > li > .dropdown .dropdown-item > a:hover,
.nav ul > li > .dropdown .dropdown-item > a:focus {
    background-color: var(--white-darken);
}

.nav ul > li:hover .dropdown,
.nav ul > li:focus .dropdown {
    display: unset;
}

.nav ul > li .dropdown .dropdown-separator {
    margin-top: 10px;
    margin-bottom: 10px;

    width: 100%;
    height: 1px;

    background-color: var(--light-dark);
}

/* Inputs */
input,
input:link {
    border: 1px solid #dedede;
    padding: 10px 15px;
}

input:hover,
input:focus {
    border-color: #a2a2a2;
    outline: none;
}

input.i-opacity,
input.i-opacity:link,
input.i-opacity:hover,
input.i-opacity:focus {
    background-color: rgba(0, 0, 0, .5);
    color: white;
}

.i-rounded {
    border-radius: 12px;
}

.i-rounded *:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.i-rounded *:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Accordion */
.accordion-header {
    position: relative;
    display: block;

    cursor: pointer;
    border: 1px solid var(--white-dark);

    background-color: var(--white);
    color: var(--dark);

    padding: 10px 15px;

    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.accordion-header .chevron:before {
	content: '';
	transform: rotate(-225deg);
	vertical-align: top;

	display: inline-block;
	width: 0.55em;
	height: 0.55em;

	border-width: 0.2em 0.2em 0 0;
	border-style: solid;

    position: absolute;
    right: 20px;
}

.accordion-header.open .chevron:before {
	content: '';
	transform: rotate(-45deg);
	vertical-align: top;

	display: inline-block;
	width: 0.55em;
	height: 0.55em;

	border-width: 0.2em 0.2em 0 0;
	border-style: solid;

    position: absolute;
    right: 20px;

    margin-top: 8px;
}

.accordion-body {
    display: none;
    height: 0;
}

.accordion-body.open {
    display: block;

    height: auto;
    padding: 15px;
    
    border: 1px solid var(--white-dark);
    color: var(--dark);

    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Tooltip */
.tooltip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999;
}

.tooltip > .tooltip-inner {
    padding: 15px;

    background-color: rgba(0, 0, 0, .7);
    color: white;

    border-radius: 12px;
}

/* Modal */
.modal {
    display: none;

    position: fixed;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 1000001;
}

.modal-overlay {
    position: fixed;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-color: var(--black);
    opacity: .8;

    z-index: 1000000;
}

.modal.open {
    display: block;
    overflow: auto;
}

.modal .modal-content {
    background-color: var(--white);
    color: var(--black);

    width: 100%;
    max-width: 800px;

    margin: 15px auto 15px;
    border-radius: 12px;
}

.modal .modal-header {
    display: flex;

    padding: 15px;
    border-bottom: 1px solid var(--light-dark);
}

.modal .modal-body {
    padding: 15px;
}

.modal .modal-footer {
    padding: 15px;
    border-top: 1px solid var(--light-dark);
}

.modal .modal-content-xs {
    max-width: 400px;
}

.modal .modal-content-sm {
    max-width: 600px;
}

.modal .modal-content-lg {
    max-width: 1000px;
}

.modal .modal-content-xl {
    max-width: 1200px;
}

.modal .closeModal {
    cursor: pointer;
    margin-left: auto;

    color: var(--light-darken);
}

/* Notifications */
.__notifications {
    position: fixed;
    z-index: 99999;

    right: 15px;
    bottom: 15px;
}

.__notifications .notification {
    margin-bottom: 10px;
    min-width: 250px;
}

.__notifications .notification:last-child {
    margin-bottom: 0px;
}

.__notifications .notification.bg-red {
    border-left: 3px solid var(--red-darken);
}

.__notifications .notification.bg-yellow {
    border-left: 3px solid var(--yellow-darken);
}

.__notifications .notification.bg-green {
    border-left: 3px solid var(--green-darken);
}

/* Login panel */
.loginPanel {
    display: flex;
    align-items: stretch;
}

.loginPanel .panelLeft {
    width: 100%;

    padding-left: 15px;
    padding-right: 15px;

    background-size: cover;
    background-position: center center;

    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.loginPanel .panelLeft > div {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.loginPanel .panelRight {
    width: 100%;
    min-height: 400px;

    padding: 15px;

    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.loginPanel .panelRight > div {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

/* Button */
.button,
.button:link {
    cursor: pointer;
    display: inline-block;

    background-color: transparent;
    border: unset;

    padding: 10px 15px;
    font-size: var(--basicFontSize);

    opacity: 1;
}

.button-rounded {
    border-radius: 12px;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
}

h6 {
    font-size: var(--h6);
}

/* Width, Height, Top, Bottom, Left & Right */
.w-100 {
    width: 100%;
    box-sizing: border-box;
}

.h-100 {
    height: 100%;
    box-sizing: border-box;
}

.w-a {
    width: auto;
    box-sizing: border-box;
}

.h-a {
    height: auto;
    box-sizing: border-box;
}

.l-0 {
    left: 0;
}

.r-0 {
    right: 0;
}

.b-0 {
    bottom: 0;
}

.t-0 {
    top: 0;
}

/* Background options */
.bg-size-cover {
    background-size: cover;
}

.bg-position-bl {
    background-color: bottom left;
}

.bg-position-bc {
    background-color: bottom center;
}

.bg-position-br {
    background-color: bottom right;
}

.bg-position-cl {
    background-color: center left;
}

.bg-position-cc {
    background-position: center center;
}

.bg-position-cr {
    background-color: center right;
}

.bg-position-tl {
    background-color: top left;
}

.bg-position-tc {
    background-color: top center;
}

.bg-position-tr {
    background-color: top right;
}

/* Background colors */
.bg-white,
.bg-white:link {
    background-color: var(--white) !important;
}

a.bg-white:hover,
a.bg-white:focus,
button.bg-white:hover,
button.bg-white:focus {
    background-color: var(--white-dark) !important;
}

.bg-black,
.bg-black:link {
    background-color: var(--black) !important;
}

a.bg-black:hover,
a.bg-black:focus,
button.bg-black:hover,
button.bg-black:focus {
    background-color: var(--black) !important;
}

.bg-light,
.bg-light:link {
    background-color: var(--light) !important;
}

a.bg-light:hover,
a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
    background-color: var(--light-dark) !important;
}

.bg-dark,
.bg-dark:link {
    background-color: var(--dark) !important;
}

a.bg-dark:hover,
a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
    background-color: var(--dark-dark) !important;
}

.bg-red,
.bg-red:link {
    background-color: var(--red) !important;
}

a.bg-red:hover,
a.bg-red:focus,
button.bg-red:hover,
button.bg-red:focus {
    background-color: var(--red-dark) !important;
}

.bg-yellow,
.bg-yellow:link {
    background-color: var(--yellow) !important;
}

a.bg-yellow:hover,
a.bg-yellow:focus,
button.bg-yellow:hover,
button.bg-yellow:focus {
    background-color: var(--yellow-dark) !important;
}

.bg-green,
.bg-green:link {
    background-color: var(--green) !important;
}

a.bg-green:hover,
a.bg-green:focus,
button.bg-green:hover,
button.bg-green:focus {
    background-color: var(--green-dark) !important;
}

.bg-blue,
.bg-blue:link {
    background-color: var(--blue) !important;
}

a.bg-blue:hover,
a.bg-blue:focus,
button.bg-blue:hover,
button.bg-blue:focus {
    background-color: var(--blue-dark) !important;
}

.bg-brown,
.bg-brown:link {
    background-color: var(--brown) !important;
}

a.bg-brown:hover,
a.bg-brown:focus,
button.bg-brown:hover,
button.bg-brown:focus {
    background-color: var(--brown-dark) !important;
}

.bg-magenta,
.bg-magenta:link {
    background-color: var(--magenta) !important;
}

a.bg-magenta:hover,
a.bg-magenta:focus,
button.bg-magenta:hover,
button.bg-magenta:focus {
    background-color: var(--magenta-dark) !important;
}

.bg-violet,
.bg-violet:link {
    background-color: var(--violet) !important;
}

a.bg-violet:hover,
a.bg-violet:focus,
button.bg-violet:hover,
button.bg-violet:focus {
    background-color: var(--violet-dark) !important;
}

/* Text colors */
.text-white,
.text-white:hover,
.text-white:focus,
.text-white:link {
    color: var(--white) !important;
}

.text-black,
.text-black:hover,
.text-black:focus,
.text-black:link {
    color: var(--black) !important;
}

.text-light,
.text-light:hover,
.text-light:focus,
.text-light:link {
    color: var(--light) !important;
}

.text-dark,
.text-dark:hover,
.text-dark:focus,
.text-dark:link {
    color: var(--dark) !important;
}

.text-red,
.text-red:hover,
.text-red:focus,
.text-red:link {
    color: var(--red) !important;
}

.text-yellow,
.text-yellow:hover,
.text-yellow:focus,
.text-yellow:link {
    color: var(--yellow) !important;
}

.text-green,
.text-green:hover,
.text-green:focus,
.text-green:link {
    color: var(--green) !important;
}

.text-blue,
.text-blue:hover,
.text-blue:focus,
.text-blue:link {
    color: var(--blue) !important;
}

.text-brown,
.text-brown:hover,
.text-brown:focus,
.text-brown:link {
    color: var(--brown) !important;
}

.text-magenta,
.text-magenta:hover,
.text-magenta:focus,
.text-magenta:link {
    color: var(--magenta) !important;
}

.text-violet,
.text-violet:hover,
.text-violet:focus,
.text-violet:link {
    color: var(--violet) !important;
}

/* Borders with colors */
.br {
    border-width: 1px;
}

.br-2x {
    border-width: 2px;
}

.br-3x {
    border-width: 3px;
}

.br-none {
    border-width: 0px;
    border-style: unset;
}

.br-solid {
    border-style: solid;
}

.br-dotted {
    border-style: dotted;
}

.br-white,
.br-white:link {
    border-color: var(--white-dark);
}

.br-white:hover,
.br-white:focus,
.br-white:focus-within {
    border-color: var(--white-darken);
}

.br-black,
.br-black:link,
.br-black:hover,
.br-black:focus,
.br-black:focus-within {
    border-color: var(--black);
}

.br-light,
.br-light:link {
    border-color: var(--light-dark);
}

.br-light:hover,
.br-light:focus,
.br-light:focus-within {
    border-color: var(--light-darken);
}

.br-dark,
.br-dark:link {
    border-color: var(--dark-dark);
}

.br-dark:hover,
.br-dark:focus,
.br-dark:focus-within {
    border-color: var(--dark-darken);
}

.br-red,
.br-red:link {
    border-color: var(--red-dark);
}

.br-red:hover,
.br-red:focus,
.br-red:focus-within {
    border-color: var(--red-darken)
}

.br-yellow,
.br-yellow:link {
    border-color: var(--yellow-dark);
}

.br-yellow:hover,
.br-yellow:focus,
.br-yellow:focus-within {
    border-color: var(--yellow-darken);
}

.br-green,
.br-green:link {
    border-color: var(--green-dark);
}

.br-green:hover,
.br-green:focus,
.br-green:focus-within {
    border-color: var(--green-darken);
}

.br-blue,
.br-blue:link {
    border-color: var(--blue-dark);
}

.br-blue:hover,
.br-blue:focus,
.br-blue:focus-within {
    border-color: var(--blue-darken);
}

.br-brown,
.br-brown:link {
    border-color: var(--brown-dark);
}

.br-brown:hover,
.br-brown:focus,
.br-brown:focus-within {
    border-color: var(--brown-darken);
}

.br-magenta,
.br-magenta:link {
    border-color: var(--magenta-dark);
}

.br-magenta:hover,
.br-magenta:focus,
.br-magenta:focus-within {
    border-color: var(--magenta-darken);
}

.br-violet,
.br-violet:link {
    border-color: var(--violet-dark);
}

.br-violet:hover,
.br-violet:focus,
.br-violet:focus-within {
    border-color: var(--violet-darken);
}

.brounded-none {
    border-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.brounded {
    border-radius: 12px !important;
}

/* Sections & columns */
.section {
    box-sizing: border-box;
    
    max-width: var(--section-max-width);
    width: var(--section-width);

    padding-left: 15px;
    padding-right: 15px;

    margin-left: auto;
    margin-right: auto;
}

.section.small-section {
    max-width: var(--small-section-max-width);
}

.columns {
    display: flex;
    flex-wrap: wrap;

    margin-left: -15px;
    margin-right: -15px;
}

.column-1-20,
.column-1-19,
.column-1-18,
.column-1-17,
.column-1-16,
.column-1-15,
.column-1-14,
.column-1-13,
.column-1-12,
.column-1-11,
.column-1-10,
.column-1-9,
.column-1-8,
.column-1-7,
.column-1-6,
.column-1-5,
.column-1-4,
.column-1-3,
.column-1-2,
.column-full {
    box-sizing: border-box;
    
    padding-left: 15px;
    padding-right: 15px;
}

.column-full {
    width: var(--column-full);
    max-width: var(--column-full);
    flex-basis: var(--column-full);
}

.column-1-2 {
    width: var(--column-2);
    max-width: var(--column-2);
    flex-basis: var(--column-2);
}

.column-1-3 {
    width: var(--column-3);
}

.column-2-3 {
    width: calc((var(--column-3) * 2) + 30px);
}

.column-1-4 {
    width: var(--column-4);
}

.column-1-5 {
    width: var(--column-5);
}

.column-1-6 {
    width: var(--column-6);
}

.column-1-7 {
    width: var(--column-7);
}

.column-1-8 {
    width: var(--column-8);
}

.column-1-9 {
    width: var(--column-9);
}

.column-1-10 {
    width: var(--column-10);
}

.column-1-11 {
    width: var(--column-11);
}

.column-1-12 {
    width: var(--column-12);
}

.column-1-13 {
    width: var(--column-13);
}

.column-1-14 {
    width: var(--column-14);
}

.column-1-15 {
    width: var(--column-15);
}

.column-1-16 {
    width: var(--column-16);
}

.column-1-17 {
    width: var(--column-17);
}

.column-1-18 {
    width: var(--column-18);
}

.column-1-19 {
    width: var(--column-19);
}

.column-1-20 {
    width: var(--column-20);
}

/* Grids */
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12,
.grid-13,
.grid-14,
.grid-15,
.grid-16,
.grid-17,
.grid-18,
.grid-19,
.grid-20 {
    box-sizing: border-box;

    padding-left: 15px;
    padding-right: 15px;
}

.grid-1 {
    width: var(--grid-1);
}

.grid-2 {
    width: var(--grid-2);
}

.grid-3 {
    width: var(--grid-3);
}

.grid-4 {
    width: var(--grid-4);
}

.grid-5 {
    width: var(--grid-5);
}

.grid-6 {
    width: var(--grid-6);
}

.grid-7 {
    width: var(--grid-7);
}

.grid-8 {
    width: var(--grid-8);
}

.grid-9 {
    width: var(--grid-9);
}

.grid-10 {
    width: var(--grid-10);
}

.grid-11 {
    width: var(--grid-11);
}

.grid-12 {
    width: var(--grid-12);
}

.grid-13 {
    width: var(--grid-13);
}

.grid-14 {
    width: var(--grid-14);
}

.grid-15 {
    width: var(--grid-15);
}

.grid-16 {
    width: var(--grid-16);
}

.grid-17 {
    width: var(--grid-17);
}

.grid-18 {
    width: var(--grid-18);
}

.grid-19 {
    width: var(--grid-19);
}

.grid-20 {
    width: var(--grid-20);
}

/* Margins */
.mt-a {
    margin-top: var(--levelauto);
}

.mt-0 {
    margin-top: var(--level0);
}

.mt-5 {
    margin-top: var(--level1);
}

.mt-10 {
    margin-top: var(--level2);
}

.mt-15 {
    margin-top: var(--level3);
}

.mt-20 {
    margin-top: var(--level4);
}

.mt-25 {
    margin-top: var(--level5);
}

.mt-30 {
    margin-top: var(--level6);
}

.mt-35 {
    margin-top: var(--level7);
}

.mt-40 {
    margin-top: var(--level8);
}

.mt-45 {
    margin-top: var(--level9);
}

.mt-50 {
    margin-top: var(--level10);
}

.mb-a {
    margin-bottom: var(--levelauto);
}

.mb-0 {
    margin-bottom: var(--level0);
}

.mb-5 {
    margin-bottom: var(--level1);
}

.mb-10 {
    margin-bottom: var(--level2);
}

.mb-15 {
    margin-bottom: var(--level3);
}

.mb-20 {
    margin-bottom: var(--level4);
}

.mb-25 {
    margin-bottom: var(--level5);
}

.mb-30 {
    margin-bottom: var(--level6);
}

.mb-35 {
    margin-bottom: var(--level7);
}

.mb-40 {
    margin-bottom: var(--level8);
}

.mb-45 {
    margin-bottom: var(--level9);
}

.mb-50 {
    margin-bottom: var(--level10);
}

.ml-a {
    margin-left: var(--levelauto);
}

.ml-0 {
    margin-left: var(--level0);
}

.ml-5 {
    margin-left: var(--level1);
}

.ml-10 {
    margin-left: var(--level2);
}

.ml-15 {
    margin-left: var(--level3);
}

.ml-20 {
    margin-left: var(--level4);
}

.ml-25 {
    margin-left: var(--level5);
}

.ml-30 {
    margin-left: var(--level6);
}

.ml-35 {
    margin-left: var(--level7);
}

.ml-40 {
    margin-left: var(--level8);
}

.ml-45 {
    margin-left: var(--level9);
}

.ml-50 {
    margin-left: var(--level10);
}

.mr-a {
    margin-right: var(--levelauto);
}

.mr-0 {
    margin-right: var(--level0);
}

.mr-5 {
    margin-right: var(--level1);
}

.mr-10 {
    margin-right: var(--level2);
}

.mr-15 {
    margin-right: var(--level3);
}

.mr-20 {
    margin-right: var(--level4);
}

.mr-25 {
    margin-right: var(--level5);
}

.mr-30 {
    margin-right: var(--level6);
}

.mr-35 {
    margin-right: var(--level7);
}

.mr-40 {
    margin-right: var(--level8);
}

.mr-45 {
    margin-right: var(--level9);
}

.mr-50 {
    margin-right: var(--level10);
}

.mx-a {
    margin-left: var(--levelauto);
    margin-right: var(--levelauto);
}

.mx-0 {
    margin-left: var(--level0);
    margin-right: var(--level0);
}

.mx-5 {
    margin-left: var(--level1);
    margin-right: var(--level1);
}

.mx-10 {
    margin-left: var(--level2);
    margin-right: var(--level2);
}

.mx-15 {
    margin-left: var(--level3);
    margin-right: var(--level3);
}

.mx-20 {
    margin-left: var(--level4);
    margin-right: var(--level4);
}

.mx-25 {
    margin-left: var(--level5);
    margin-right: var(--level5);
}

.mx-30 {
    margin-left: var(--level6);
    margin-right: var(--level6);
}

.mx-35 {
    margin-left: var(--level7);
    margin-right: var(--level7);
}

.mx-40 {
    margin-left: var(--level8);
    margin-right: var(--level8);
}

.mx-45 {
    margin-left: var(--level9);
    margin-right: var(--level9);
}

.mx-50 {
    margin-left: var(--level10);
    margin-right: var(--level10);
}

.my-a {
    margin-top: var(--levelauto);
    margin-bottom: var(--levelauto);
}

.my-0 {
    margin-top: var(--level0);
    margin-bottom: var(--level0);
}

.my-5 {
    margin-top: var(--level1);
    margin-bottom: var(--level1);
}

.my-10 {
    margin-top: var(--level2);
    margin-bottom: var(--level2);
}

.my-15 {
    margin-top: var(--level3);
    margin-bottom: var(--level3);
}

.my-20 {
    margin-top: var(--level4);
    margin-bottom: var(--level4);
}

.my-25 {
    margin-top: var(--level5);
    margin-bottom: var(--level5);
}

.my-30 {
    margin-top: var(--level6);
    margin-bottom: var(--level6);
}

.my-35 {
    margin-top: var(--level7);
    margin-bottom: var(--level7);
}

.my-40 {
    margin-top: var(--level8);
    margin-bottom: var(--level8);
}

.my-45 {
    margin-top: var(--level9);
    margin-bottom: var(--level9);
}

.my-50 {
    margin-top: var(--level10);
    margin-bottom: var(--level10);
}

/* Paddings */
.pt-a {
    padding-top: var(--levelauto);
}

.pt-0 {
    padding-top: var(--level0);
}

.pt-5 {
    padding-top: var(--level1);
}

.pt-10 {
    padding-top: var(--level2);
}

.pt-15 {
    padding-top: var(--level3);
}

.pt-20 {
    padding-top: var(--level4);
}

.pt-25 {
    padding-top: var(--level5);
}

.pt-30 {
    padding-top: var(--level6);
}

.pt-35 {
    padding-top: var(--level7);
}

.pt-40 {
    padding-top: var(--level8);
}

.pt-45 {
    padding-top: var(--level9);
}

.pt-50 {
    padding-top: var(--level10);
}

.pb-a {
    padding-bottom: var(--levelauto);
}

.pb-0 {
    padding-bottom: var(--level0);
}

.pb-5 {
    padding-bottom: var(--level1);
}

.pb-10 {
    padding-bottom: var(--level2);
}

.pb-15 {
    padding-bottom: var(--level3);
}

.pb-20 {
    padding-bottom: var(--level4);
}

.pb-25 {
    padding-bottom: var(--level5);
}

.pb-30 {
    padding-bottom: var(--level6);
}

.pb-35 {
    padding-bottom: var(--level7);
}

.pb-40 {
    padding-bottom: var(--level8);
}

.pb-45 {
    padding-bottom: var(--level9);
}

.pb-50 {
    padding-bottom: var(--level10);
}

.pl-a {
    padding-left: var(--levelauto);
}

.pl-0 {
    padding-left: var(--level0);
}

.pl-5 {
    padding-left: var(--level1);
}

.pl-10 {
    padding-left: var(--level2);
}

.pl-15 {
    padding-left: var(--level3);
}

.pl-20 {
    padding-left: var(--level4);
}

.pl-25 {
    padding-left: var(--level5);
}

.pl-30 {
    padding-left: var(--level6);
}

.pl-35 {
    padding-left: var(--level7);
}

.pl-40 {
    padding-left: var(--level8);
}

.pl-45 {
    padding-left: var(--level9);
}

.pl-50 {
    padding-left: var(--level10);
}

.pr-a {
    padding-right: var(--levelauto);
}

.pr-0 {
    padding-right: var(--level0);
}

.pr-5 {
    padding-right: var(--level1);
}

.pr-10 {
    padding-right: var(--level2);
}

.pr-15 {
    padding-right: var(--level3);
}

.pr-20 {
    padding-right: var(--level4);
}

.pr-25 {
    padding-right: var(--level5);
}

.pr-30 {
    padding-right: var(--level6);
}

.pr-35 {
    padding-right: var(--level7);
}

.pr-40 {
    padding-right: var(--level8);
}

.pr-45 {
    padding-right: var(--level9);
}

.pr-50 {
    padding-right: var(--level10);
}

.px-a {
    padding-left: var(--levelauto);
    padding-right: var(--levelauto);
}

.px-0 {
    padding-left: var(--level0);
    padding-right: var(--level0);
}

.px-5 {
    padding-left: var(--level1);
    padding-right: var(--level1);
}

.px-10 {
    padding-left: var(--level2);
    padding-right: var(--level2);
}

.px-15 {
    padding-left: var(--level3);
    padding-right: var(--level3);
}

.px-20 {
    padding-left: var(--level4);
    padding-right: var(--level4);
}

.px-25 {
    padding-left: var(--level5);
    padding-right: var(--level5);
}

.px-30 {
    padding-left: var(--level6);
    padding-right: var(--level6);
}

.px-35 {
    padding-left: var(--level7);
    padding-right: var(--level7);
}

.px-40 {
    padding-left: var(--level8);
    padding-right: var(--level8);
}

.px-45 {
    padding-left: var(--level9);
    padding-right: var(--level9);
}

.px-50 {
    padding-left: var(--level10);
    padding-right: var(--level10);
}

.py-a {
    padding-top: var(--levelauto);
    padding-bottom: var(--levelauto);
}

.py-0 {
    padding-top: var(--level0);
    padding-bottom: var(--level0);
}

.py-5 {
    padding-top: var(--level1);
    padding-bottom: var(--level1);
}

.py-10 {
    padding-top: var(--level2);
    padding-bottom: var(--level2);
}

.py-15 {
    padding-top: var(--level3);
    padding-bottom: var(--level3);
}

.py-20 {
    padding-top: var(--level4);
    padding-bottom: var(--level4);
}

.py-25 {
    padding-top: var(--level5);
    padding-bottom: var(--level5);
}

.py-30 {
    padding-top: var(--level6);
    padding-bottom: var(--level6);
}

.py-35 {
    padding-top: var(--level7);
    padding-bottom: var(--level7);
}

.py-40 {
    padding-top: var(--level8);
    padding-bottom: var(--level8);
}

.py-45 {
    padding-top: var(--level9);
    padding-bottom: var(--level9);
}

.py-50 {
    padding-top: var(--level10);
    padding-bottom: var(--level10);
}

/* Float */
.f-left {
    float: left;
}

.f-right {
    float: right;
}

.f-clear {
    clear: both;
}

/* Positions */
.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

/* Displays */
.block {
    display: block;
}

.inline {
    display: inline;
}

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

.inline-flex {
    display: inline-flex;
}

.flex {
    display: flex;
}

.none {
    display: none;
}

/* Flex - options */
.flex-no-wrap {
    flex-wrap: nowrap;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-d-column {
    flex-direction: column;
}

.flex-item-start {
    align-items: flex-start;
}

.flex-item-center {
    align-items: center;
}

.flex-item-end {
    align-items: flex-end;
}

.flex-item-stretch {
    align-items: stretch;
}

.flex-self-start {
    align-self: flex-start;
}

.flex-self-center {
    align-self: center;
}

.flex-self-end {
    align-self: flex-end;
}

.flex-self-stretch {
    align-self: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

/* Text */
.t-left {
    text-align: left;
}

.t-center {
    text-align: center;
}

.t-right {
    text-align: right;
}

/* Progress bar */
.progressbar {
    display: flex;

    position: relative;
    box-sizing: border-box;

    background-color: var(--light-darken);

    width: 100%;
    min-height: 10px;
}

.progressbar > div {
    box-sizing: border-box;
    position: relative;
    height: 100%;
}

.progressbar > div > span {
    font-size: var(--smallFontSize);
}

.carousel {
    position: relative;

    width: 100%;
    overflow: hidden;
}

.carousel-inner {
    cursor: grab !important;
    
    display: flex;
    flex-wrap: nowrap;

    align-items: center;

    width: 100%;
    transform: translateX(0px);
    height: auto;
}

.carousel-object {
    flex: 0 0 auto;
    user-select: none;
    backface-visibility: hidden;
    -webkit-touch-callout: none;
    outline: none;

    cursor: grab !important;
}

.carousel-object a {
    cursor: grab !important;
}

@media(max-width: 1229px)
{
    .section:not(.small-section),
    .columns {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

@media(max-width: 990px)
{
    .nav {
        flex-wrap: wrap;
        padding-bottom: 15px;
    }

    .nav > .nav-data {
        display: block;
        flex-direction: column;

        justify-content: flex-start;
        align-items: flex-start;
    }

    .nav > .nav-data > ul {
        display: none;

        padding-left: 5px;
        padding-right: 5px;
    }

    .nav > .nav-data > ul.open {
        display: block;
    }

    .nav > .nav-data > ul > li {
        display: block;
    }

    .nav .nav-expand {
        display: inherit;

        margin-top: 15px;
        margin-left: auto;
    }

    .nav .mobile-brand,
    .nav .mobile-brand:link {
        display: inherit;
        margin-top: 15px;
        margin-right: auto;
    }

    .nav > .nav-data .brand {
        display: none;
        width: 100%;
    }

    .nav > .nav-data ul {
        margin-left: 0;
        margin-right: 0;
    }

    .nav ul > li .dropdown,
    .nav ul > li:hover .dropdown,
    .nav ul > li:focus .dropdown,
    .nav ul > li:link .dropdown {
        display: none;
        position: static;

        margin-left: -20px;
        margin-right: -20px;
        border-radius: 0;

        margin-bottom: 15px;
    }

    .nav ul > li .dropdown.open {
        display: block;
    }

    .nav ul > li > .dropdown-mark::before {
        margin-left: -0.6em;

        width: 0.4em;
        border-width: 0.2em 0.2em 0 0;
    }

    .nav ul > li > .open.dropdown-mark::before {
        transform: rotate(-45deg);
        top: 0.4em;
    }

    .column-1-20,
    .column-1-19,
    .column-1-18,
    .column-1-17,
    .column-1-16,
    .column-1-15,
    .column-1-14,
    .column-1-13,
    .column-1-12,
    .column-1-11,
    .column-1-10,
    .column-1-9,
    .column-1-8,
    .column-1-7,
    .column-1-6,
    .column-1-5,
    .column-1-4,
    .column-1-3,
    .column-1-2,
    .column-full {
        overflow: hidden;
    }

    /* Login panel */
    .loginPanel {
        display: block;

        max-width: 100%;

        margin-left: 15px;
        margin-right: 15px;
    }
    
    .loginPanel .panelLeft {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;

        border-bottom-left-radius: 0px;
    }

    .loginPanel .panelLeft > div {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;

        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    
    .loginPanel .panelRight {
        min-height: auto;

        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;

        border-top-right-radius: 0px;
    }

    .loginPanel .panelRight > div {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;

        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
}

@media screen and (max-width: 993px)
{
    .grid-1,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12,
    .grid-13,
    .grid-14,
    .grid-15,
    .grid-16,
    .grid-17,
    .grid-18,
    .grid-19,
    .grid-20 {
        width: var(--grid-20);
    }

    .block-993 {
        display: block;
    }
}

@media(max-width: 850px)
{
    .section.small-section {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
}

@media(max-width: 768px)
{
    .column-1-20,
    .column-1-19,
    .column-1-18,
    .column-1-17,
    .column-1-16,
    .column-1-15,
    .column-1-14,
    .column-1-13,
    .column-1-12,
    .column-1-11,
    .column-1-10,
    .column-1-9,
    .column-1-8,
    .column-1-7,
    .column-1-6,
    .column-1-5,
    .column-1-4,
    .column-1-3,
    .column-1-2,
    .column-full {
        flex-grow: 1;
        
        padding-left: 10px;
        padding-right: 10px;
    }

    .modal .modal-content {
        max-width: calc(100% - 30px);
    }
}

@media(max-width: 480px)
{
    .column-1-20,
    .column-1-19,
    .column-1-18,
    .column-1-17,
    .column-1-16,
    .column-1-15,
    .column-1-14,
    .column-1-13,
    .column-1-12,
    .column-1-11,
    .column-1-10,
    .column-1-9,
    .column-1-8,
    .column-1-7,
    .column-1-6,
    .column-1-5,
    .column-1-4,
    .column-1-3,
    .column-1-2,
    .column-full {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-grab {
    cursor: grab;
}