/* Normalize the page */
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: var(--font-family);
background: var(--bg-color);
color: var(--tx-color);
}

/* Input */
button,
input,
select,
textarea,
label {
position: relative;
float: left;
border: none;
border-radius: 0;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: var(--font-family);
background: none;
}

/* H1,H2,H3,H4,H5,H6 */
h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
font-size: unset;
font-weight: unset;
}

/* Magnific Popup */
.mfp-content {
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}

/* Swiper slide */
.swiper-slide {
text-align: center;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination-bullet {
height: 15px;
width: 15px;
background: #fff;
}
.swiper-button-next,
.swiper-button-prev {
color: var(--primary-color);
}
.swiper-pagination-bullet-active {
background: var(--secondary-color);
}


/* Element */
header, footer, div {
position: relative;
float: left;
}

/* Section */
section {
position: relative;
float: left;
width: 100%;
padding: 5% 0;
overflow: hidden;
}
.content {
width: 90%;
max-width: 1200px;
left: 50%;
transform: translateX(-50%);
}
.content.content-little {
max-width: 700px;
text-align: center;
}

/* Text */
.title {
width: 100%;
font-size: 2em;
font-weight: bold;
}
.subtitle {
width: 100%;
font-size: 1.5em;
}
.text {
width: 100%;
font-size: 1em;
}
.a-c{text-align: center;}
.a-l{text-align: left;}
.a-r{text-align: right;}
.colored,
a.colored,
a .colored{
color: var(--primary-color);
}
.selected
a.selected,
a .selected{
font-weight: bold;
}

/* Button */
.btn-container {
width: 100%;
margin-top: 15px;
}
.btn {
padding: 10px;
background: var(--primary-color);
color: #ffffff;
font-size: 1em;
line-height: 1em;
transition: .3s;
}
.btn.btn-icon i {
position: relative;
float: right;
font-size: 0.8em;
transition: .3s;
margin-left: 5px;
}
.btn.btn-icon-left i {
position: relative;
float: left;
font-size: 0.8em;
transition: .3s;
margin-right: 5px;
}
.btn.btn-icon:hover {
padding-right: 5px;
}
.btn.btn-icon:hover i {
margin-left: 10px;
}

/* Border */
.b-1{box-sizing: border-box;border: 1px solid currentColor;}
.b-2{box-sizing: border-box;border: 2px solid currentColor;}
.b-3{box-sizing: border-box;border: 3px solid currentColor;}
.b-shadow{box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;}
.b-r{border-radius: 50%;}
.b-r-1{border-radius: 1px;}
.b-r-2{border-radius: 2px;}
.b-r-3{border-radius: 3px;}
.b-r-4{border-radius: 4px;}
.b-r-5{border-radius: 5px;}

/* Line */
.line {
width: 100%;
margin: 5px 0 15px;
height: 2px;
background: var(--secondary-color);
}

/* Position */
.p-r {
position: relative;
float: left;
}
.p-f {
position: fixed;
float: left;
}
.p-a {
position: absolute;
float: left;
}
.f-l{
float: left;
}
.f-r{
float: right;
}
.top{
position: absolute;
float: top;
top: 0;
}
.right{
position: absolute;
float: right;
right: 0;
}
.bottom{
position: absolute;
float: bottom;
bottom: 0;
}
.left{
position: absolute;
float: left;
left: 0;
}

/* Padding */
.p-0{padding: 0;}
.p-1{padding: 1%;}
.p-2{padding: 2%;}
.p-2-5{padding: 2.5%;}
.p-3{padding: 3%;}
.p-4{padding: 4%;}
.p-5{padding: 5%;}

.ph-0{padding: 0 0;}
.ph-1{padding: 1% 0;}
.ph-2{padding: 2% 0;}
.ph-2-5{padding: 2.5% 0;}
.ph-3{padding: 3% 0;}
.ph-4{padding: 4% 0;}
.ph-5{padding: 5% 0;}
.ph-6{padding: 6% 0;}
.ph-7{padding: 7% 0;}
.ph-7-5{padding: 7.5% 0;}
.ph-8{padding: 8% 0;}
.ph-9{padding: 9% 0;}
.ph-10{padding: 10% 0;}

.pw-0{padding:0  0;}
.pw-1{padding: 0 1%;}
.pw-2{padding: 0 2%;}
.pw-2-5{padding: 0 2.5%;}
.pw-3{padding: 0 3%;}
.pw-4{padding: 0 4%;}
.pw-5{padding: 0 5%;}
.pw-6{padding: 0 6%;}
.pw-7{padding: 0 7%;}
.pw-7-5{padding: 0 7.5%;}
.pw-8{padding: 0 8%;}
.pw-9{padding: 0 9%;}
.pw-10{padding: 10% 0;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1%;}
.pt-2{padding-top: 2%;}
.pt-2-5{padding-top: 2.5%;}
.pt-3{padding-top: 3%;}
.pt-4{padding-top: 4%;}
.pt-5{padding-top: 5%;}
.pt-6{padding-top: 6;}
.pt-7{padding-top: 7%;}
.pt-7-5{padding-top: 7.5%;}
.pt-8{padding-top: 8%;}
.pt-9{padding-top: 9%;}
.pt-10{padding-top: 10%;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1%;}
.pb-2{padding-bottom: 2%;}
.pb-2-5{padding-bottom: 2.5%;}
.pb-3{padding-bottom: 3%;}
.pb-4{padding-bottom: 4%;}
.pb-5{padding-bottom: 5%;}
.pb-6{padding-bottom: 6%;}
.pb-7{padding-bottom: 7%;}
.pb-7-5{padding-bottom: 7.5%;}
.pb-8{padding-bottom: 8%;}
.pb-9{padding-bottom: 9%;}
.pb-10{padding-bottom: 10%;}

.pl-0{padding-left: 0;}
.pl-1{padding-left: 1%;}
.pl-2{padding-left: 2%;}
.pl-2-5{padding-left: 2.5%;}
.pl-3{padding-left: 3%;}
.pl-4{padding-left: 4%;}
.pl-5{padding-left: 5%;}
.pl-6{padding-left: 6%;}
.pl-7{padding-left: 7%;}
.pl-7-5{padding-left: 7.5%;}
.pl-8{padding-left: 8%;}
.pl-9{padding-left: 9%;}
.pl-10{padding-left: 10%;}

.pr-0{padding-right: 0;}
.pr-1{padding-right: 1%;}
.pr-2{padding-right: 2%;}
.pr-2-5{padding-right: 2.5%;}
.pr-3{padding-right: 3%;}
.pr-4{padding-right: 4%;}
.pr-5{padding-right: 5%;}
.pr-6{padding-right: 6%;}
.pr-7{padding-right: 7%;}
.pr-7-5{padding-right: 7.5%;}
.pr-8{padding-right: 8%;}
.pr-9{padding-right: 9%;}
.pr-10{padding-right: 10%;}


/* Distance */
.m-0{margin: 0;}
.mt-0{margin-top: 0%;}
.mt-1{margin-top: 1%;}
.mt-2{margin-top: 2%;}
.mt-2-5{margin-top: 2.5%;}
.mt-3{margin-top: 3%;}
.mt-4{margin-top: 4%;}
.mt-5{margin-top: 5%;}
.mt-6{margin-top: 6%;}
.mt-7{margin-top: 7%;}
.mt-7-5{margin-top: 7.5%;}
.mt-8{margin-top: 8%;}
.mt-9{margin-top: 9%;}
.mt-10{margin-top: 10%;}

.mb-0{margin-bottom: 0%;}
.mb-1{margin-bottom: 1%;}
.mb-2{margin-bottom: 2%;}
.mb-2-5{margin-bottom: 2.5%;}
.mb-3{margin-bottom: 3%;}
.mb-4{margin-bottom: 4%;}
.mb-5{margin-bottom: 5%;}
.mb-6{margin-bottom: 6%;}
.mb-7{margin-bottom: 7%;}
.mb-7-5{margin-bottom: 7.5%;}
.mb-8{margin-bottom: 8%;}
.mb-9{margin-bottom: 9%;}
.mb-10{margin-bottom: 10%;}

.mr-0{margin-right: 0%;}
.mr-1{margin-right: 1%;}
.mr-2{margin-right: 2%;}
.mr-2-5{margin-right: 2.5%;}
.mr-3{margin-right: 3%;}
.mr-4{margin-right: 4%;}
.mr-5{margin-right: 5%;}
.mr-6{margin-right: 6%;}
.mr-7{margin-right: 7%;}
.mr-7-5{margin-right: 7.5%;}
.mr-8{margin-right: 8%;}
.mr-9{margin-right: 9%;}
.mr-10{margin-right: 10%;}

.ml-0{margin-left: 0%;}
.ml-1{margin-left: 1%;}
.ml-2{margin-left: 2%;}
.ml-2-5{margin-left: 2.5%;}
.ml-3{margin-left: 3%;}
.ml-4{margin-left: 4%;}
.ml-5{margin-left: 5%;}
.ml-6{margin-left: 6%;}
.ml-7{margin-left: 7%;}
.ml-7-5{margin-left: 7.5%;}
.ml-8{margin-left: 8%;}
.ml-9{margin-left: 9%;}
.ml-10{margin-left: 10%;}
.ml-15{margin-left: 15%;}
.ml-20{margin-left: 20%;}
.ml-25{margin-left: 25%;}
.ml-30{margin-left: 30%;}
.ml-35{margin-left: 35%;}
.ml-40{margin-left: 40%;}
.ml-45{margin-left: 45%;}
.ml-50{margin-left: 50%;}
.ml-55{margin-left: 55%;}
.ml-60{margin-left: 60%;}
.ml-65{margin-left: 65%;}
.ml-70{margin-left: 70%;}
.ml-75{margin-left: 75%;}
.ml-80{margin-left: 80%;}
.ml-85{margin-left: 85%;}
.ml-90{margin-left: 90%;}
.ml-95{margin-left: 95%;}
.ml-100{margin-left: 100%;}

/* Center element */
.center {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.c-h{
margin-top: 0;
margin-bottom: 0;
top: 50%;
transform: translateY(-50%);
}
.c-w{
margin-left: 0;
margin-right: 0;
left: 50%;
transform: translateX(-50%);
}

/* Format */
.f-1-1{
width: 100%;
padding-top: 100%;
}
.f-2-3{
width: 100%;
padding-top: calc((100% / 2) * 3);
}
.f-3-2{
width: 100%;
padding-top: calc((100% / 3) * 2);
}
.f-16-9{
width: 100%;
padding-top: calc((100% / 16) * 9);
}
.f-9-16{
width: 100%;
padding-top: calc((100% / 9) * 16);
}

/* Opacity */
.o-0{opacity: 0;}
.o-5{opacity: .05;}
.o-10{opacity: .1;}
.o-15{opacity: .15;}
.o-20{opacity: .2;}
.o-25{opacity: .25;}
.o-30{opacity: .3;}
.o-35{opacity: .35;}
.o-40{opacity: .4;}
.o-45{opacity: .45;}
.o-50{opacity: .5;}
.o-55{opacity: .55;}
.o-60{opacity: .6;}
.o-65{opacity: .65;}
.o-70{opacity: .7;}
.o-75{opacity: .75;}
.o-80{opacity: .8;}
.o-85{opacity: .85;}
.o-90{opacity: .9;}
.o-95{opacity: .95;}
.o-100{opacity: 1;}

/* Dimension */
.w-0{width: 0%;}
.w-5{width: 5%;}
.w-10{width: 10%;}
.w-15{width: 15%;}
.w-20{width: 20%;}
.w-25{width: 25%;}
.w-30{width: 30%;}
.w-35{width: 35%;}
.w-40{width: 40%;}
.w-42-5{width: 42.5%;}
.w-45{width: 45%;}
.w-47-5{width: 47.5%;}
.w-50{width: 50%;}
.w-52-5{width: 52.5%;}
.w-55{width: 55%;}
.w-57-5{width: 57.5%;}
.w-60{width: 60%;}
.w-65{width: 65%;}
.w-70{width: 70%;}
.w-75{width: 75%;}
.w-80{width: 80%;}
.w-85{width: 85%;}
.w-90{width: 90%;}
.w-92-5{width: 92.5%;}
.w-95{width: 95%;}
.w-97-5{width: 97.5%;}
.w-100{width: 100%;}
.w-105{width: 105%;}
.w-110{width: 110%;}
.w-115{width: 115%;}
.w-120{width: 120%;}

.h-0{height: 0%;}
.h-5{height: 5%;}
.h-10{height: 10%;}
.h-15{height: 15%;}
.h-20{height: 20%;}
.h-25{height: 25%;}
.h-30{height: 30%;}
.h-35{height: 35%;}
.h-40{height: 40%;}
.h-45{height: 45%;}
.h-50{height: 50%;}
.h-55{height: 55%;}
.h-60{height: 60%;}
.h-65{height: 65%;}
.h-70{height: 70%;}
.h-75{height: 75%;}
.h-80{height: 80%;}
.h-85{height: 85%;}
.h-90{height: 90%;}
.h-95{height: 95%;}
.h-100{height: 100%;}
.h-105{height: 105%;}
.h-110{height: 110%;}
.h-115{height: 115%;}
.h-120{height: 120%;}

.max-w-0{max-width: 0%;}
.max-w-5{max-width: 5%;}
.max-w-10{max-width: 10%;}
.max-w-15{max-width: 15%;}
.max-w-20{max-width: 20%;}
.max-w-25{max-width: 25%;}
.max-w-30{max-width: 30%;}
.max-w-35{max-width: 35%;}
.max-w-40{max-width: 40%;}
.max-w-42-5{max-width: 42.5%;}
.max-w-45{max-width: 45%;}
.max-w-47-5{max-width: 47.5%;}
.max-w-50{max-width: 50%;}
.max-w-52-5{max-width: 52.5%;}
.max-w-55{max-width: 55%;}
.max-w-57-5{max-width: 57.5%;}
.max-w-60{max-width: 60%;}
.max-w-65{max-width: 65%;}
.max-w-70{max-width: 70%;}
.max-w-75{max-width: 75%;}
.max-w-80{max-width: 80%;}
.max-w-85{max-width: 85%;}
.max-w-90{max-width: 90%;}
.max-w-92-5{max-width: 92.5%;}
.max-w-95{max-width: 95%;}
.max-w-97-5{max-width: 97.5%;}
.max-w-100{max-width: 100%;}
.max-w-105{max-width: 105%;}
.max-w-110{max-width: 110%;}
.max-w-115{max-width: 115%;}
.max-w-120{max-width: 120%;}

.max-h-0{max-height: 0%;}
.max-h-5{max-height: 5%;}
.max-h-10{max-height: 10%;}
.max-h-15{max-height: 15%;}
.max-h-20{max-height: 20%;}
.max-h-25{max-height: 25%;}
.max-h-30{max-height: 30%;}
.max-h-35{max-height: 35%;}
.max-h-40{max-height: 40%;}
.max-h-45{max-height: 45%;}
.max-h-50{max-height: 50%;}
.max-h-55{max-height: 55%;}
.max-h-60{max-height: 60%;}
.max-h-65{max-height: 65%;}
.max-h-70{max-height: 70%;}
.max-h-75{max-height: 75%;}
.max-h-80{max-height: 80%;}
.max-h-85{max-height: 85%;}
.max-h-90{max-height: 90%;}
.max-h-95{max-height: 95%;}
.max-h-100{max-height: 100%;}
.max-h-105{max-height: 105%;}
.max-h-110{max-height: 110%;}
.max-h-115{max-height: 115%;}
.max-h-120{max-height: 120%;}

.min-w-0{min-width: 0%;}
.min-w-5{min-width: 5%;}
.min-w-10{min-width: 10%;}
.min-w-15{min-width: 15%;}
.min-w-20{min-width: 20%;}
.min-w-25{min-width: 25%;}
.min-w-30{min-width: 30%;}
.min-w-35{min-width: 35%;}
.min-w-40{min-width: 40%;}
.min-w-42-5{min-width: 42.5%;}
.min-w-45{min-width: 45%;}
.min-w-47-5{min-width: 47.5%;}
.min-w-50{min-width: 50%;}
.min-w-52-5{min-width: 52.5%;}
.min-w-55{min-width: 55%;}
.min-w-57-5{min-width: 57.5%;}
.min-w-60{min-width: 60%;}
.min-w-65{min-width: 65%;}
.min-w-70{min-width: 70%;}
.min-w-75{min-width: 75%;}
.min-w-80{min-width: 80%;}
.min-w-85{min-width: 85%;}
.min-w-90{min-width: 90%;}
.min-w-92-5{min-width: 92.5%;}
.min-w-95{min-width: 95%;}
.min-w-97-5{min-width: 97.5%;}
.min-w-100{min-width: 100%;}
.min-w-105{min-width: 105%;}
.min-w-110{min-width: 110%;}
.min-w-115{min-width: 115%;}
.min-w-120{min-width: 120%;}

.min-h-0{min-height: 0%;}
.min-h-5{min-height: 5%;}
.min-h-10{min-height: 10%;}
.min-h-15{min-height: 15%;}
.min-h-20{min-height: 20%;}
.min-h-25{min-height: 25%;}
.min-h-30{min-height: 30%;}
.min-h-35{min-height: 35%;}
.min-h-40{min-height: 40%;}
.min-h-45{min-height: 45%;}
.min-h-50{min-height: 50%;}
.min-h-55{min-height: 55%;}
.min-h-60{min-height: 60%;}
.min-h-65{min-height: 65%;}
.min-h-70{min-height: 70%;}
.min-h-75{min-height: 75%;}
.min-h-80{min-height: 80%;}
.min-h-85{min-height: 85%;}
.min-h-90{min-height: 90%;}
.min-h-95{min-height: 95%;}
.min-h-100{min-height: 100%;}
.min-h-105{min-height: 105%;}
.min-h-110{min-height: 110%;}
.min-h-115{min-height: 115%;}
.min-h-120{min-height: 120%;}


/* Background Image */
div.bg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
transition: 1s;
}
div.bg-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-size: cover;
background-image: var(--default-image);
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
transition: 1s;
}
div.bg-img-f {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: var(--default-image);
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
img.bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
object-fit: cover;
}

.bg-cover {object-fit: cover;background-size: cover;}
.bg-contain {object-fit: contain;background-size: contain;}
.o-center {object-position: center;background-position: center;}
.o-top {object-position: top;background-position: top;}
.o-right {object-position: right;background-position: right;}
.o-bottom {object-position: bottom;background-position: bottom;}
.o-left {object-position: left;background-position: left;}

/* Color */
.white {color: #ffffff;}
.bg-white {background: #ffffff;}
.black {color: #000000;}
.bg-black {background: #000000;}
.color{color: var(--primary-color);}
.bg-color{background: var(--primary-color);}
.second-color{color: var(--secondary-color);}
.bg-second-color{background: var(--secondary-color);}

/* Function */
.no-scrollbar {
overscroll-behavior: none;
-ms-overflow-style: none;
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-interaction{pointer-events: none; }
.multiply{mix-blend-mode: multiply;}
.greyscale{filter: grayscale(1);}

@media (max-width: 768px) {
section {padding: 10% 0;}
.subtitle {font-size: 1.2em;}
.w-5, .w-10, .w-15, .w-20, .w-25{width: 50%;}
.w-30, .w-35, .w-40, .w-45, .w-47-5, .w-50, .w-55, .w-60, .w-65, .w-70, .w-75, .w-80, .w-85, .w-90, .w-95, .w-100{width: 100%;}
div.bg-img-f {background-attachment: unset;}
}