﻿
@font-face { font-family: 'TG Hagia'; src: url('../fonts/TGHagia-Regular.woff') format('woff'), url('../fonts/TGHagia-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'TG Hagia'; src: url('../fonts/TGHagia-SemiBold.woff') format('woff'), url('../fonts/TGHagia-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'TG Hagia'; src: url('../fonts/TGHagia-Bold.woff') format('woff'), url('../fonts/TGHagia-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Apercu'; src: url('../fonts/apercu-light.woff') format('woff'), url('../fonts/apercu-light.woff2') format('woff2'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Apercu'; src: url('../fonts/apercu-regular.woff') format('woff'), url('../fonts/apercu-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Apercu'; src: url('../fonts/apercu-italic.woff') format('woff'), url('../fonts/apercu-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Apercu'; src: url('../fonts/apercu-bold.woff') format('woff'), url('../fonts/apercu-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Apercu'; src: url('../fonts/apercu-bold-italic.woff') format('woff'), url('../fonts/apercu-bold-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; }


* { margin: 0; padding: 0; border: 0; outline: 0; list-style: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; box-sizing: border-box; text-size-adjust: none; }

html { font-size: 10px !important; }

body { font: 400 16px/2 'Apercu',sans-serif; letter-spacing: 1px; color: #171f2d; background-color: #fff; }

h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6 { font-family: 'TG Hagia',sans-serif; font-weight: 600; line-height: 1.5; }
h1, h2, .h2, h3, .h3, h4 {margin-bottom:1.5rem; }
h1 { font-size: 4.8rem; line-height: 1.38; }
h2, .h2 { font-size: 3.2rem; line-height: 1.25; }
h3, .h3 { font-size: 2.4rem; }
h4, .h4 { font-size: 2.1rem; }
h5, .h5 { font-size: 1.8rem; }
h6 { font-size: 1.6rem; }

a { color: inherit; text-decoration: none; }
a:not(.g-btn):focus, a:not(.g-btn):hover { text-decoration: underline; }

b, strong { font-weight: 700; }

img { display: block; max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; }

input,
button,
textarea,
select { background: transparent; color: inherit; font: inherit; letter-spacing: inherit; }

p{margin-bottom:1.5rem}
p:last-child{margin-bottom:0}

ul,ol{margin-left:2rem;}
li { list-style: disc inside; }

.g-underline { text-decoration: underline; }

nav li,
#g-footer li { list-style: none; }

button:not([disabled]) { cursor: pointer; }

.g-btn { font-size: 12px; width: 100%; max-width: 270px; height: 50px; }
.g-btn.aw { max-width: none; width: auto; padding: 0 5rem; }
a.g-btn { display: inline-block; text-decoration: none; text-align: center; line-height: 50px; }
.g-btn.blue { background: #37a0c9; color: #fff; text-transform: uppercase; padding-top: 2px; }
.g-btn.border { border: 1px solid; }

.x-container.max { max-width: 1920px !important; margin: auto !important; width: auto !important; }

.g-max960 { max-width: 960px; margin: auto; box-sizing: content-box; }
.g-max960 > div:not(:first-child) { margin-top: 7rem; }
.g-max960 h2 { margin-bottom: 3rem; }
.g-max960 h2 ~ * { margin-top: 2rem; }

.g-max1280 { max-width: 1280px; margin: auto; box-sizing: content-box; }
.g-max1280 h2 { margin-bottom: 4rem; }
.g-max1280 h2 ~ * { margin-top: 3rem; }
.g-max1280.p10 > .p10 { padding: 8rem; }

.g-header-text { max-width: 1115px; margin: auto; box-sizing: content-box; text-align: center; }
.g-header-text h2 ~ * { margin-top: 2rem; }
.g-header-text h2 + * { margin-top: 3rem; }

.g-header-text.with-image img { width: 100%; position: relative; }


.g-res-169 { position: relative; height: 0; padding-bottom: calc(9 / 16 * 100%); }
.g-res-169 > * { position: absolute; width: 100%; height: 100%; object-fit: cover; }

.g-img-cover > img, .g-res-img > img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.g-res-img > img + img { display: none; }


.g-txt-link { color: #02a072; text-decoration: underline; }


/*.swiper-pagination { display: flex; justify-content: center; }*/
.swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; flex-shrink: 0; }


.p10 { padding: 9rem; }

.pt100 { padding-top: calc(100 / 1920 * 100%) !important; }
.pt150 { padding-top: calc(150 / 1920 * 100%) !important; }

.pt0 { padding-top: 0 !important; }


.grey-bg { background: #fafafa; }


.g-hero-after { padding-top: calc(150 / 1920 * 100%); }


/*.g-bg-img-container { background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; }*/
.g-bg-img-container { background-repeat: no-repeat; background-position: center 4rem; background-size: cover; text-align: center; padding: 18rem 9rem; background-color: #fff; }
.g-bg-img-container * + * { margin-top: 2rem; }


.tac { text-align: center; }


.g-bullet-list li { list-style: disc inside; }


.play:before { content: ""; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: url(../images/ico-play.svg); background-size: cover; z-index: 1; transform: translate(-50%, -50%); }
.copper .play:after { display: none; }


span.phone,
span.email,
span.mobile { font-family: 'TG Hagia',sans-serif; font-weight: 600; font-size: 112.5%; line-height: 1; white-space: nowrap; }
span.phone:before,
span.email:before,
span.mobile:before { content: ""; display: inline-block; width: 24px; height: 24px; background: no-repeat center; background-size: contain; vertical-align: middle; margin-right: 1rem; }
span.phone:before { background-image: url(../images/phone.svg); background-size: 20px; }
span.email:before { background-image: url(../images/mail.svg); }
span.mobile:before { background-image: url(../images/smartphone.svg); }
span.phone span,
span.email span,
span.mobile span { font-size: 12px; }



@media screen and (max-width: 1440px) {

    html { font-size: 9px !important; }

    body { font-size: 15px; line-height: 1.75; }

    .swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px; }
}


@media screen and (max-width: 1280px) {

    html { font-size: 8px !important; }

    body { font-size: 14px; }

    h5, .h5, h6 { font-size: 16px; }

    .play:before { width: 75px; height: 75px; }
}


@media screen and (max-width: 1024px) {

    html { font-size: 7px !important; }

    .g-max960 > div:not(:first-child) { margin-top: 5rem; }
    .g-max960 h2 { margin-bottom: 2rem; }

    button.blue { height: 42px; }

	.p10 { padding: 8rem; }
	
	.p10 > .p10.full-on-mobile { margin: 0 -8rem; }

    .play:before { width: 50px; height: 50px; }
}


@media screen and (max-width: 767.5px) {

    .g-btn { height: 40px; }
    a.g-btn { line-height: 40px; }


    .g-header-text { text-align: left; }
    .g-header-text.center { text-align: center; }
    .g-flex-boxes.p10 > .g-header-text.p10 { padding-left: 0 !important; padding-right: 0 !important; }


    .g-res-img > img:first-child { display: none; }
    .g-res-img > img + img { display: block; }

	.g-max1280 h2 { margin-bottom: 3rem; }

    .p10 { padding: 6rem !important; }

	.p10 > .p10.full-on-mobile { margin: 0 -6rem; }

	.pt100,
    .pt150 { padding: 0 !important; }

	.pt0,
    .pt0-on-mobile { padding-top: 0 !important; }

    .g-hero-after { padding: 0; }

    .g-bg-img-container { background-image: none !important; }
    .g-bg-img-container * + * { margin-top: 3rem; }
    .g-bg-img-container.p10 > .g-header-text.p10 { padding: 0 !important; }


    .tac { text-align: left; }
}


@media screen and (max-width: 480px) {

    html { font-size: 6px !important; }

    body { font-size: 13px; }

    .p10 { padding: 5rem !important; }

	.p10 > .p10.full-on-mobile { margin: 0 -5rem; }

	.pt0,
    .pt0-on-mobile { padding-top: 0 !important; }

    .play:before { width: 32px; height: 32px; }

    span.phone:before,
    span.email:before,
    span.mobile:before { width: 20px; height: 20px; }
    span.phone:before { background-size: 16px; }
}


@media screen and (max-width: 375px) {

    .g-btn { max-width: none; }
}
