@font-face {
    font-family: 'oxygen';
    src: url('/fonts/oxygen-regular-webfont.woff2') format('woff2'),
         url('/fonts/oxygen-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'oxygen';
    src: url('/fonts/oxygen-bold-webfont.woff2') format('woff2'),
         url('/fonts/oxygen-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

input, select, textarea {
    font-size: 14px;
}

/* Resort UI */

.sp-form-control {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    padding: 0;
}

.sp-form-control:focus,
.sp-form-control:active {
    border-color: #222;
}

.sp-button {
    border-radius: 60px;
    padding: 0 30px;
    height: 2.8rem;
    line-height: 2.8rem;
}

.sp-card .content-card,
.sp-popup {
    border-radius: 20px;
}

.sp-popup {
    box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.08);
}

.sp-card h1.title {
    text-transform: none;
}

/* End Resort UI */

:root {
	--theme-widget-color: #3a3a3c;
}

body {
	color: #3a3a3c;
	font-family: 'oxygen', Arial, Helvetica, sans-serif;
}

h2 {
	font-weight: bold;
}

header {
    background-image: url(/imgs/bg-header.jpg);
    background-size: cover;
    color: #fff;
}

header .top-bar {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

header .top-menu a {
    font-weight: 600;
    margin: 0 10px;
	padding: 5px 0;
    color: #fff;
	border-bottom: 2px solid transparent;
	transition: all 100ms ease-out;
}

header .top-menu a[href]:hover {
	border-color: rgba(255, 255, 255, 0.5);
}

header .phone {
    color: #fff;
    font-weight: 600;
    position: relative;
}

header .phone:after {
    background-color: rgba(255, 255, 255, 0.3);
    width: 1px;
    height: 45px;
    display: block;
    content: '';
    margin: 0 20px;
}

header .phone i {
    margin-right: 10px;
}

header .btn-login {
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    margin-right: 10px;
	padding: 7px 24px 7px 14px;
	border: 2px solid transparent;
	border-radius: 50px;
	transition: all 200ms ease-out;
}

header .btn-login:hover {
	border-color: rgba(255, 255, 255, 0.5);
}

header .btn-login i {
    margin-right: 10px;
}

header .btn-register {
    border-radius: 20px;
    padding: 10px 24px;
    display: inline-block;
    font-weight: 600;
    color: #fff;
    background-color: rgb(255, 255, 255, 0.15);
    cursor: pointer;
	transition: all 200ms ease-out;
}

header .btn-register:hover {
	background-color: #fff;
	color: #333;
}

header .user-menu .user {
	cursor: pointer;
	position: relative;
}

header .user-menu .user:after {
	display: block;
	content: '';
	width: 0px;
    height: 0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.75);
	margin-left: 10px;
}

header .user-menu ul {
	position: absolute;
	border-color: #e4e9f0;
	top: 0;
	right: 0;
	box-shadow: 0 10px 35px -5px rgba(0, 0, 0, 0.15);
	z-index: 3;
	min-width: 160px;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 5px;
    padding: 5px;
}

header .user-menu i {
	margin-right: 10px;
	font-size: 24px;
}

header .user-menu ul a {
	font-size: 14px;
	display: block;
	padding: 10px 10px;
    transition: all 100ms ease-out;
}

header .user-menu ul a:hover {
    background-color: #f0f0f0;
}

header .user-menu ul i {
	font-size: 14px;
}

/* Header > Menu Icon */

header .menu-icon {
	width: 40px;
	height: 40px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

header .menu-icon span {
	display: block;
	position: absolute;
	height: 2px;
	width: 50%;
	background: #fff;
	border-radius: 15px;
	opacity: 1;
	left: 0;
	right: 0;
	margin: 0 auto;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

header .menu-icon span:nth-child(1) {
	top: 10px;
}

header .menu-icon span:nth-child(2),
header .menu-icon span:nth-child(3) {
	top: 18px;
}

header .menu-icon span:nth-child(4) {
	top: 26px;
}

header .menu-icon.open span:nth-child(1) {
	top: 18px;
	width: 0%;
	left: 50%;
}

header .menu-icon.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

header .menu-icon.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

header .menu-icon.open span:nth-child(4) {
	top: 18px;
	width: 0%;
	left: 50%;
}

header h1 {
    font-weight: 600;
}

header .wrapper {
	position: relative;
}

/* Mobile Menu */

.mobile-menu {
	display: none;
	position: fixed;
	top: 76px;
	right: 0;
	width: 280px;
	background-color: #fff;
	padding: 15px;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	border-bottom: 1px solid #eee;
	z-index: 4;
}

.mobile-menu.open {
	display: block;
}

.mobile-menu li.yellow-list {
	border-top: 1px solid  #ffba03;
}

.mobile-menu li a {
	font-size: 15px;
	padding: 10px 0;
    display: flex;
	align-items: center;
}

.mobile-menu li.yellow-list a {
	color: #ffba03;
}

.mobile-menu li span {
	margin-left: 8px;
}

.mobile-menu li ul {
	margin-left: 20px;
}

/* LAYERS */

.layers-wrapper {
    width: 100%;
    max-width: 530px;
    min-height: 600px;
}

.layers {
    width: 100%;
    border-radius: 20px;
	overflow: hidden;
    -webkit-transition: height 300ms ease-out;
    transition: height 300ms ease-out;
}

.layer-wrapper {
	display: flex;
	flex-wrap: nowrap;
}

.layer-wrapper.slider {
    -webkit-transition: transform 300ms ease-out, height 300ms ease-out;
    transition: transform 300ms ease-out, height 300ms ease-out;
}

.layer-step {
	background-color: #212121;
	color: #fff;
	flex: 0 0 auto;
	width: 100%;
}

.layer-step .nav-bar a.step-back {
	cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
}

.layer-step .nav-bar h3 {
	line-height: normal;
}

.layer-step a {
	color: #fff;
	cursor: pointer;
	font-size: inherit;
}

.layer-step a i {
	transition: all 200ms ease-out;
}

.layer-step a:hover i {
	padding-right: 4px;
}

.layer-step .field {
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
	position: relative;
}

.layer-step .info-field {
	font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.layer-step .info-field i {
	margin: 0 5px;
}

.layer-step .field label {
	display: block;
	padding-bottom: 3px;
}

/* Info Col */

.layer-step .info-col {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    position: relative;
}

.layer-step .info-col:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.1);
}

.layer-step .info-col:nth-child(3):after {
    display: none;
}

.layer-step .info-col:last-child:after {
    display: none;
}

.layer-step .info-col i {
    width: 25px;
    height: 25px;
    margin: 0 auto 10px auto;
    opacity: 0.7;
}

.layer-step .info-col i.ic-1 {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTAgMTEwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPiAgCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+PHJlY3QgeD0iOS45IiB5PSI2LjUiIGNsYXNzPSJzdDAiIHdpZHRoPSI0LjIiIGhlaWdodD0iMTAzLjEiLz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEwMC4xIDYuNSAyMSA2LjUgMjEgMTAuNyA5MSAxMC43IDY3LjIgMzguOCA5MSA2NyAyMSA2NyAyMSA3MS4yIDEwMC4xIDcxLjIgNzIuNyAzOC44ICIvPjwvc3ZnPg==);
}

.layer-step .info-col i.ic-2 {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTAgMTEwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPiAgCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTQgMTAxLjdjLTEuMSAwLTItMC45LTItMlYxOC42YzAtMS4xIDAuOS0yIDItMmgxNy42di02LjNjMC0xLjEgMC45LTIgMi0yIDEuMSAwIDIgMC45IDIgMnY2LjNoNTkuM3YtNi4zYzAtMS4xIDAuOS0yIDItMiAxLjEgMCAyIDAuOSAyIDJ2Ni4zaDE3YzEuMSAwIDIgMC45IDIgMnY4MS4xYzAgMS4xLTAuOSAyLTIgMkg0ek02IDk3LjdoOThWNDcuNEg2Vjk3Ljd6TTYgNDMuNGg5OFYyMC42SDg5djYuM2MwIDEuMS0wLjkgMi0yIDIgLTEuMSAwLTItMC45LTItMnYtNi4zSDI1LjZ2Ni4zYzAgMS4xLTAuOSAyLTIgMiAtMS4xIDAtMi0wLjktMi0ydi02LjNINlY0My40eiIvPjxyZWN0IHg9IjE4LjEiIHk9IjU4LjUiIGNsYXNzPSJzdDAiIHdpZHRoPSI4LjciIGhlaWdodD0iOC43Ii8+PHJlY3QgeD0iMzQuOCIgeT0iNTguNSIgY2xhc3M9InN0MCIgd2lkdGg9IjguNyIgaGVpZ2h0PSI4LjciLz48cmVjdCB4PSI1MS41IiB5PSI1OC41IiBjbGFzcz0ic3QwIiB3aWR0aD0iOC43IiBoZWlnaHQ9IjguNyIvPjxyZWN0IHg9IjY4LjEiIHk9IjU4LjUiIGNsYXNzPSJzdDAiIHdpZHRoPSI4LjciIGhlaWdodD0iOC43Ii8+PHJlY3QgeD0iODQuOCIgeT0iNTguNSIgY2xhc3M9InN0MCIgd2lkdGg9IjguNyIgaGVpZ2h0PSI4LjciLz48cmVjdCB4PSIxOC4xIiB5PSI3My45IiBjbGFzcz0ic3QwIiB3aWR0aD0iOC43IiBoZWlnaHQ9IjguNyIvPjxyZWN0IHg9IjM0LjgiIHk9IjczLjkiIGNsYXNzPSJzdDAiIHdpZHRoPSI4LjciIGhlaWdodD0iOC43Ii8+PHJlY3QgeD0iNTEuNSIgeT0iNzMuOSIgY2xhc3M9InN0MCIgd2lkdGg9IjguNyIgaGVpZ2h0PSI4LjciLz48cmVjdCB4PSI2OC4xIiB5PSI3My45IiBjbGFzcz0ic3QwIiB3aWR0aD0iOC43IiBoZWlnaHQ9IjguNyIvPjxyZWN0IHg9Ijg0LjgiIHk9IjczLjkiIGNsYXNzPSJzdDAiIHdpZHRoPSI4LjciIGhlaWdodD0iOC43Ii8+PC9zdmc+);
}

.layer-step .info-col i.ic-3 {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTAgMTEwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPiAgCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTM2LjggNDkuM2MtMTAgMC0xOC4yLTkuMi0xOC4yLTIwLjYgMC0xMS40IDguMi0yMC42IDE4LjItMjAuNiAxMCAwIDE4LjIgOS4zIDE4LjIgMjAuNkM1NSA0MC4xIDQ2LjggNDkuMyAzNi44IDQ5LjN6TTM2LjggMTIuM2MtNy43IDAtMTMuOSA3LjMtMTMuOSAxNi40IDAgOSA2LjIgMTYuNCAxMy45IDE2LjQgNy43IDAgMTMuOS03LjMgMTMuOS0xNi40QzUwLjcgMTkuNyA0NC41IDEyLjMgMzYuOCAxMi4zeiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01LjUgMTAxLjljLTEuMSAwLTItMC45LTIuMS0yTDIgODBjLTAuNC02LjUgNC42LTE0IDExLjEtMTYuNCA3LjUtMi43IDE1LjMtNCAyMy4zLTQgOCAwIDE1LjggMS40IDIzLjMgNEM2Ni4xIDY2IDcxLjIgNzMuNSA3MC44IDgwTDY5LjQgMTAwYy0wLjEgMS4xLTEgMi0yLjEgMkg1LjV6TTM2LjQgNjMuOWMtNy41IDAtMTQuOSAxLjMtMjEuOSAzLjhDOS41IDY5LjUgNiA3NS42IDYuMyA3OS43bDEuMiAxNy45aDU3LjhsMS4yLTE4YzAuMy00LjItMy4yLTEwLjItOC4zLTEyLjFDNTEuMyA2NS4xIDQzLjkgNjMuOSAzNi40IDYzLjl6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTUuNSAxMDEuOWMtMS4xIDAtMi0wLjktMi4xLTJMMiA4MGMtMC40LTYuNSA0LjYtMTQgMTEuMS0xNi40IDcuNS0yLjcgMTUuMy00IDIzLjMtNCA4IDAgMTUuOCAxLjQgMjMuMyA0QzY2LjEgNjYgNzEuMiA3My41IDcwLjggODBMNjkuNCAxMDBjLTAuMSAxLjEtMSAyLTIuMSAySDUuNXpNMzYuNCA2My45Yy03LjUgMC0xNC45IDEuMy0yMS45IDMuOEM5LjUgNjkuNSA2IDc1LjYgNi4zIDc5LjdsMS4yIDE3LjloNTcuOGwxLjItMThjMC4zLTQuMi0zLjItMTAuMi04LjMtMTIuMUM1MS4zIDY1LjEgNDMuOSA2My45IDM2LjQgNjMuOXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNODAuMSAxMDEuOWMtMS4yIDAtMi4xLTEtMi4xLTIuMSAwLTEuMiAxLTIuMSAyLjEtMi4xaDIyLjZsMS0xNS4yYzAuMi0zLjQtMi44LTguNi03LTEwLjIgLTUuNy0yLTExLjYtMy4xLTE3LjctMy4yIC0xLjIgMC0yLjEtMS0yLjEtMi4yIDAtMS4yIDAuOS0yIDIuMi0yLjEgNi41IDAuMSAxMi45IDEuMyAxOS4xIDMuNSA1LjcgMi4xIDEwLjIgOC43IDkuOCAxNC40bC0xLjIgMTcuMmMtMC4xIDEuMS0xIDItMi4xIDJIODAuMXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNODUuNyA1NC40Yy04LjEgMC0xNC42LTcuNC0xNC42LTE2LjUgMC05LjEgNi42LTE2LjUgMTQuNi0xNi41IDguMSAwIDE0LjYgNy40IDE0LjYgMTYuNUMxMDAuNCA0Ni45IDkzLjggNTQuNCA4NS43IDU0LjR6TTg1LjcgMjUuNWMtNS43IDAtMTAuNCA1LjUtMTAuNCAxMi4zIDAgNi44IDQuNyAxMi4zIDEwLjQgMTIuMyA1LjcgMCAxMC40LTUuNSAxMC40LTEyLjNDOTYuMSAzMSA5MS41IDI1LjUgODUuNyAyNS41eiIvPjwvc3ZnPg==);
}

.layer-step .info-col i.ic-4 {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTAgMTEwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPiAgCgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTIgOTUuMlYyMi45aDM1LjV2LTguMWgzNXY4LjFIMTA4djcyLjNIMnpNNi41IDkwLjhoOTcuNFY1Mi4xSDYyLjJ2MTMuOWMwIDEuOC0wLjcgMy41LTIuMiA1IC0xLjIgMS4yLTMuMiAxLjktNS4xIDEuOSAtMS42IDAtMy4yLTAuNi00LjktMS44IC0xLjQtMS44LTItMy40LTItNS4xVjUyLjFINi41VjkwLjh6TTU1IDQ4LjRjLTAuNiAwLTEuMyAwLjQtMS44IDEgLTAuNCAwLjQtMC43IDEuMS0wLjcgMS44djE0LjhjMCAwLjcgMC4yIDEuNCAwLjcgMS44IDAuNiAwLjYgMS4zIDEgMS44IDEgMC43IDAgMS40LTAuNSAyLjItMSAwLjQtMC40IDAuNi0xLjEgMC42LTEuOFY1MS4yYzAtMC43LTAuMy0xLjQtMC43LTEuOEM1Ni4zIDQ4LjggNTUuNiA0OC40IDU1IDQ4LjR6TTU1IDQ0LjJjMi4xIDAgNCAwLjcgNS4xIDJsMC4yIDAuM2MwLjMgMC4zIDAuNiAwLjYgMC44IDFsMC4xIDAuMmg0Mi42VjI3LjRINi41djIwLjNINDlsMC4xLTAuMmMwLjMtMC40IDAuNS0wLjggMC44LTEuMkM1MS40IDQ0LjkgNTMgNDQuMiA1NSA0NC4yek00MS45IDIyLjloMjYuMXYtMy43SDQxLjlWMjIuOXoiLz48L3N2Zz4=);
}

.layer-step .info-col i.ic-5 {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTAgMTEwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPiAgCgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6NC4xNDc5O3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDF7ZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDo0LjE0Nzk7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDJ7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT48Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI1NSIgY3k9IjU1IiByPSI1MCIvPjxsaW5lIGNsYXNzPSJzdDEiIHgxPSI1NSIgeTE9IjE2LjYiIHgyPSI1NSIgeTI9IjUuOSIvPjxsaW5lIGNsYXNzPSJzdDEiIHgxPSI1NSIgeTE9IjEwNSIgeDI9IjU1IiB5Mj0iOTQuMiIvPjxsaW5lIGNsYXNzPSJzdDEiIHgxPSI1IiB5MT0iNTUiIHgyPSIxNS44IiB5Mj0iNTUiLz48bGluZSBjbGFzcz0ic3QxIiB4MT0iOTQuMiIgeTE9IjU1IiB4Mj0iMTA1IiB5Mj0iNTUiLz48cGF0aCBjbGFzcz0ic3QyIiBkPSJNNjguMSA3OC4zYy0wLjYgMC0xLjItMC4yLTEuNi0wLjZMNTIuMSA2My4zYy0wLjItMC4yLTAuOC0wLjktMC42LTEuOCAwLTAuMy0wLjEtMC40LTAuMi0wLjYgMCAwIDAtMC4xLTAuMS0wLjFsMC0yNS4yYzAtMS4zIDEuMi0yLjIgMi4zLTIuMiAxLjMgMCAyLjQgMSAyLjQgMi4ydjI1LjFsMTMuNyAxMy44YzAuNCAwLjQgMC42IDEgMC42IDEuNSAwIDAuNi0wLjIgMS4xLTAuNiAxLjVDNjkuMyA3OCA2OC43IDc4LjMgNjguMSA3OC4zeiIvPjwvc3ZnPg==);
}

.layer-step .info-col span {
    display: block;
    padding: 2px 0;
}

.layer-step .location {
    position: relative;
    padding-left: 20px;
}

.layer-step .location:before {
    display: block;
    content: '';
    position: absolute;
    width: 3px;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

.layer-step .price {
    font-weight: 600;
    position: relative;
}

.layer-step .price:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.1);
}

.layer-step .payment-method {
    color: #ffba03;
}

.layer-step input[type="text"],
.layer-step input[type="password"] {
	display: block;
	width: 100%;
	background-color: #212121;
	border: none;
	border-bottom: 1px dotted transparent;
	color: #fff;
	font-size: 14px;
	padding: 4px 0 8px 0;
	transition: all 200ms ease-out;
}

.layer-step input[type="text"]::placeholder {
	opacity: 0.5;
}

.layer-step input[type="text"]::-ms-input-placeholder {
	opacity: 0.5;
}

.layer-step select {
	color: #fff;
	display: block;
	min-width: 65px;
	background-color: #212121;
	border: 1px solid #212121;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: 'oxygen', Arial, Helvetica, sans-serif;
	background: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: 0px;
	color: #fff;
    padding: 4px 20px 4px 0;
}

.layer-step select option {
	color: #333;
}

.layer-step .smart-checkbox {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	height: 100%;
}

.layer-step .smart-checkbox label {
	color: #ffba03;
	padding-bottom: 0;
	display: inline-block;
	height: 100%;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.layer-step .smart-checkbox input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.layer-step .smart-checkbox .ctrl-indicator {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid #ffba03;
	border-radius: 50%;
	margin-right: 10px;
}

.layer-step .smart-checkbox input ~ .ctrl-indicator:after {
    display: block;
	content: '';
	width: 14px;
	height: 14px;
	opacity: 0;
	transition: all 200ms ease-out;
}

.layer-step .smart-checkbox input:checked ~ .ctrl-indicator:after {
	opacity: 1;
}

.layer-step .smart-checkbox .ctrl-indicator:after {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4gIAoJLnN0MHtmaWxsOiNmZmJhMDM7fQo8L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yOC44IDUuMWMxIDEgMSAyLjUgMCAzLjVMMTIuNCAyNC45Yy0wLjkgMS0yLjUgMS0zLjUgMGwtNy44LTcuOGMtMC45LTAuOS0wLjktMi41IDAtMy40IDEtMC45IDIuNS0wLjkgMy41IDBsNi4xIDYuMUwyNS40IDUuMUMyNi4zIDQuMSAyNy45IDQuMSAyOC44IDUuMXoiLz48L3N2Zz4=);
}

.tr .ic-close {
	margin-left: 10px;
	cursor: pointer;
}

.switch-serv a {
	padding: 12px 0 12px 15px;
	cursor: pointer;
	border-radius: 25px;
	background-color: #212121;
	color: #fff;
	transition: all 200ms ease-out;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.switch-serv a.active {
	background-color: #4d4d4d;
	cursor: default;
}

.switch-serv a span {
	transition: all 200ms ease-out;
}

.switch-serv a:not(.active):hover span,
.switch-serv a.active span {
	transform: translateX(3px);
}

.switch-serv a.active i {
	transform: scale(1.2);
}

.switch-serv i {
	width: 1.3em;
	height: 1.3em;
	transition: all 200ms ease-out;
}

.switch-serv span {
	flex: 1;
	text-align: center;
	padding-right: 10px;
}

.layer-step button {
	padding: 12px 20px;
	color: #fff;
	font-family: 'oxygen', Arial, Helvetica, sans-serif;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	border: 0;
	cursor: pointer;
	font-size: inherit;
	transition: all 200ms ease-out;
}

.layer-step button:disabled {
    opacity: 0.4;
    cursor: default;
}

.layer-step button:not(:disabled):hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.layer-step .price-line {
    font-weight: bold;
    margin-bottom: 10px;
}

/* Home Page > Layer 1 */

.home-page .layer-1 .wrapper {
	position: relative;
}

/* Home Page > Layer 2 */

.home-page .layer-2 {
	background-color: #000000;
	color: #fff;
	position: relative;
}

.home-page .layer-2 .services-box:after {
	top: 20px;
	left: -500px;
}

.home-page .layer-2 .limo-box:before {
	top:-40px;
	left: -500px;
}

.home-page .layer-2 .limo-box:after {
	left: -580px;
	bottom: 170px;
}

.home-page .layer-2 .services-box h2 {
}

.home-page .layer-2 .services-box,
.home-page .layer-2 .green-box,
.home-page .layer-2 .limo-box {
	position: relative;
}

.home-page .layer-2 .green-box h2,
.home-page .layer-2 .limo-box h2 {
	font-weight: bold;
	color: #fff;
	position: relative;
}

.home-page .layer-2 .green-box h2:before,
.home-page .layer-2 .limo-box h2:before {
	display: block;
	font-size: 50px;
	font-weight: bold;
	opacity: 0.05;
	position: absolute;
	left: 20px;
	top: -18px;
	z-index: 0;
}

.home-page .layer-2 .green-box h2:before {
	content: 'Green';
	color: #35d875;
}

.home-page .layer-2 .limo-box h2:before {
	content: 'Limo';
	color: #e7dc25;
}

.home-page .layer-2 .green-box h2 .green {
	color: #34d875;
}

.home-page .layer-2 .limo-box h2 .yellow {
	color: #e7dc25;
}

.home-page .layer-2 .btn-booking {
	padding: 10px 30px;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 24px;
	margin-top: 30px;
	display: inline-block;
	cursor: pointer;
	transition: all 200ms ease-out;
}

.home-page .layer-2 .btn-booking:hover {
	background-color: #fff;
	color: #000;
}

/* Home Page > Layer 3 */

.home-page .layer-3 {
	background-color: #e5e5e5;
}

.home-page .layer-3 h2 {
	font-weight: 600;
}

.home-page .layer-3 .row {
	background-color: #fff;
	border-radius: 20px;
}

.home-page .layer-3 form {
	border: 2px solid #d2d2d2;
	border-radius: 40px;
}

.home-page .layer-3 form label {
	display: block;
	padding-bottom: 5px;
    font-weight: 600;
    font-size: 14px;
}

.home-page .layer-3 form input[type="text"] {
	display: block;
	width: 100%;
	border: 0;
	background-color: #fff;
	color: #3a3a3c;
}

.home-page .layer-3 form input[type="text"]::placeholder {
	opacity: 0.5;
	color: #3a3a3c;
}

.home-page .layer-3 form input[type="text"]::-ms-input-placeholder {
	opacity: 0.5;
	color: #3a3a3c;
}

.home-page .layer-3 form button {
	font-family: 'oxygen', Arial, Helvetica, sans-serif;
	background-color: #212121;
	border: 0;
	color: #fff;
	padding: 10px 20px;
	border-radius: 25px;
    font-weight: bold;
	cursor: pointer;
    transition: all 200ms ease-out;
}

.home-page .layer-3 form button:hover {
    background-color: #34d875;
}

/* SECTION BOOKING */

section.booking .btn-register {
	border: 1px solid #333;
	border-radius: 50px;
	font-weight: normal;
	cursor: pointer;
	display: inline-block;
	transition: all 250ms ease-out;
}

section.booking .btn-register:hover {
	background-color: #333;
	color: #fff;
}

section.booking .layer-1,
section.booking .layer-2 {
	background-color: #000;
	position: relative;
}

section.booking .layer-2:after {
	position: absolute;
	content: '';
	display: block;
	width: 96%;
	height: 1px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: rgba(255, 255, 255, 0.3);
}

/* Booking > Layer 1 */

section.booking .layer-1 .title-box .btn-back {
	background-color: #212121;
	color: rgba(255, 255, 255, 0.5);
	border-radius: 20px;
	padding: 10px 40px 10px 15px;
	cursor: pointer;
}

section.booking .layer-1 .title-box .btn-back i {
	margin-right: 30px;
}

section.booking .layer-1 .title-box h2 {
	color: #fff;
}

section.booking .layer-1 .info-box {
	color: rgba(255, 255, 255, 0.5);
	border: 1px solid #383838;
	border-radius: 10px;
	position: relative;
}

section.booking .layer-1 .info-box span {
	display: block;
}

section.booking .layer-1 .info-box .label {
	margin-bottom: 5px;
}

section.booking .layer-1 .info-box .value {
	font-weight: 600;
}

/* Booking > Layer 2 */

section.booking .step-wrapper {
	overflow: hidden;
}

section.booking .step-container {
	transition: all 500ms ease-out;
}

section.booking .layer-2 .cars {
	margin-left: -15px;
	margin-right: -15px;
}

section.booking .layer-2 .car {
	cursor: pointer;
}

section.booking .layer-2 .car.active {
	cursor: default;
}

section.booking .layer-2 .car .thumb {
	width: 250px;
	height: 150px;
	z-index: 1;
	position: relative;
	margin: 0 auto;
}

section.booking .layer-2 .car-eco .thumb,
section.booking .layer-3 .serv-thumb-1 {
	background-image: url(/imgs/eco-car.png);
}

section.booking .layer-2 .car-standard .thumb,
section.booking .layer-3 .serv-thumb-2 {
	background-image: url(/imgs/standard-car.png);
}

section.booking .layer-2 .car-business .thumb,
section.booking .layer-3 .serv-thumb-3 {
	background-image: url(/imgs/business-car.png);
}

section.booking .layer-2 .car-premium .thumb,
section.booking .layer-3 .serv-thumb-4 {
	background-image: url(/imgs/premium-car.png);
}

section.booking .layer-2 .car-suv .thumb,
section.booking .layer-3 .serv-thumb-5 {
	background-image: url(/imgs/suv-car.png);
}

section.booking .layer-2 .car-group .thumb,
section.booking .layer-3 .serv-thumb-6 {
	background-image: url(/imgs/group-car.png);
}

section.booking .layer-2 .car .name {
	height: 140px;
	border-radius: 20px;
	justify-content: center;
	align-items: flex-end;
	display: flex;
	padding-bottom: 20px;
	width: 100%;
	margin-top: -70px;
	border: 2px solid rgba(255, 255, 255, 0.25);
}

section.booking .layer-2 .car.active .name {
	background-color: #fff;
}

section.booking .layer-2 .car h3 {
	color: #fff;
}

section.booking .layer-2 .car.active h3 {
	color: #000;
	font-weight: bold;
}

section.booking .layer-2 .btn-next {
	display: inline-block;
	color: #fff;
	padding: 10px 30px;
	border: 2px solid #fff;
	border-radius: 22px;
	cursor: pointer;
}

/* Booking > Layer 3 */

section.booking .layer-3 {
    background-color: #fff;
}

section.booking .layer-3 .card {
    border-radius: 10px;
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.09);
}

section.booking .layer-3 form label {
    display: block;
    margin-bottom: 10px;
}

section.booking .layer-3 form input[type="text"],
section.booking .layer-3 form input[type="password"] {
    display: block;
    width: 100%;
    opacity: 1;
    border: 0;
    border-bottom: 1px solid #bcbcbc;
    padding-bottom: 10px;
}

section.booking .layer-3 form textarea {
	display: block;
    width: 100%;
    opacity: 1;
    border: 0;
    border-bottom: 1px solid #bcbcbc;
	height: 80px;
}

section.booking .layer-3 form input::placeholder {
	color: #3a3a3c;
	opacity: 0.5;
}

section.booking .layer-3 form input::-ms-input-placeholder {
	color: #3a3a3c;
	opacity: 0.5;
}

section.booking .layer-3 form button[type="submit"] {
    background-color: #3a3a3c;
    color: #fff;
    cursor: pointer;
    border-radius: 20px;
    padding: 10px 20px;
    border: 0;
    font-weight: 600;
}

section.booking .layer-3 .serv-type {
	border-bottom: 1px solid #dbdbdb;
}

section.booking .layer-3 .serv-type span {
	font-weight: 600;
}

section.booking .layer-3 .serv-thumb {
	display: block;
	background-size: contain;
	width: 100px;
	height: 60px;
	margin-right: 20px;
}

section.booking .layer-3 .price {
	font-weight: 600;
}

section.booking .layer-3 a.btn-place {
	display: block;
	padding: 15px 0;
	width: 100%;
	font-weight: 600;
	color: #fff;
	text-align: center;
	border-radius: 24px;
	background-color: #3a3a3c;
	cursor: pointer;
}

/* ACCOUNT SECTION */

section.account .main-layout {
    font-size: 14px;
}

section.account .top-menu li {
    flex-grow: 1;
}

section.account .top-menu ul a {
	display: flex;
	align-items: center;
    padding: 14px 0;
	border-bottom: 3px solid rgba(239, 63, 55, 0.1);
	text-align: center;
	color: #3a3a3c;
	cursor: pointer;
}

section.account .top-menu ul a:hover {
}

section.account .top-menu ul a.active {
	border-color: rgba(239, 63, 55, 1);
    color: rgb(239, 63, 55);
    font-weight: bold;
    cursor: default;
}

section.account .top-menu ul i {
	margin-right: 20px;
}

section.account .main-content {
	min-height: 600px;
}

/* CARD */

.card {
	background-color: #fff;
	box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.17);
	border-radius: 3px;
	padding: 20px;
	position: relative;
}

.card .ic-edit {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
}

.card .ic-edit:hover {
    opacity: 0.75;
}

.card .ic-edit i {
	margin-right: 5px;
}

.card .title {
	margin-top: 10px;
	margin-bottom: 20px;
}

.card h1 {
	font-weight: bold;
}

.card h2 i {
	margin-right: 8px;
	font-size: 14px;
}

.card .info-field {
    margin-bottom: 20px;
}

.card .info-field .label {
	margin-bottom: 7px;
	font-size: 11px;
}

.card .info-field .value {
	font-size: 14px;
	font-weight: bold;
    line-height: 1.8;
}

section.account .main-content {
	margin: 30px 0;
}

section.account .main-content h1 {
	margin-bottom: 20px;
}

section.account .main-content h1 i {
	color: #666;
	margin-right: 10px;
}

section.account .sp-table .tbody {
	cursor: pointer;
}

/* Single Text Page */

section.single .layer-1 p,
section.single .layer-1 li {
	font-weight: 200;
    line-height: 1.8;
}

/* Car Box */

.car-box {
	text-align: center;
	border-bottom: 3px solid rgba(255, 255, 255, 0.2);
	padding: 5px 5px 10px 5px;
    cursor: pointer;
    transition: all 200ms ease-out;
}

.car-box.active {
	cursor: default;
	border-color: #ffba03;
}

.car-box .col-pic {
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #212121;
    margin-bottom: 10px;
    transition: all 200ms ease-out;
}

.car-box:hover .col-pic,
.car-box.active .col-pic {
    transform: scale(1.1);
}

.car-box .col-pic img {
	display: block;
	max-width: 96%;
	height: auto;
}

.car-box .col-name {
	font-size: 14px;
	font-weight: 600;
	padding: 5px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.car-box .col-price {
	font-size: 14px;
}

/* CONTACT PAGE SECTION */

/* Contact > Layer 1 */

section.contact .layer-1 {
	background-color: #000;
	text-align: center;
}

section.contact .layer-1 h1 {
	color: #fff;
	font-weight: 600;
}

/* Contact > Layer 2 */

section.contact .layer-2 .card {
	border-radius: 10px;
	box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.07);
}

section.contact .layer-2 .contact-form label {
	display: block;
	width: 100%;
}

section.contact .layer-2 .contact-form input[type="text"],
section.contact .layer-2 .contact-form textarea {
	display: block;
	width: 100%;
	font-family: 'oxygen', Arial, Helvetica, sans-serif;
	font-weight: 200;
	opacity: 1;
	border: 0;
	font-size: inherit;
	border-bottom: 1px solid #d0d0d0;
	padding-top: 10px;
	padding-bottom: 10px;
	transition: all 200ms ease-out;
}

section.contact .layer-2 .contact-form input[type="text"]:focus,
section.contact .layer-2 .contact-form input[type="text"]:active,
section.contact .layer-2 .contact-form textarea:focus,
section.contact .layer-2 .contact-form textarea:active {
	border-bottom-color: #555;
}

section.contact .layer-2 .contact-form textarea {
	height: 100px;
	font-family: 'oxygen', Arial, Helvetica, sans-serif;
}

section.contact .layer-2 .contact-form input[type="text"]::placeholder {
	color: #3a3a3c;
	opacity: 0.5;
}

section.contact .layer-2 .contact-form input[type="text"]::-ms-input-placeholder {
	color: #3a3a3c;
	opacity: 0.5;
}

section.contact .layer-2 .contact-form .checkbox-control {
	color: #3a3a3c;
}

section.contact .layer-2 .contact-form button[type="submit"] {
	color: #3a3a3c;
	border-radius: 24px;
	border: 1px solid #3a3a3c;
	padding: 15px 30px;
	cursor: pointer;
	background-color: #fff;
	font-weight: 600;
	font-size: inherit;
}

section.contact h3 {
	font-weight: 600;
}

section.contact .layer-2 .info .phone-text {
	font-weight: 600;
}

section.contact .layer-2 .info p {
	opacity: 0.8;
	margin-bottom: 10px;
}

section.contact .layer-2 .info p.phone {
	color: #3a3a3c;
}

/* Contact > Layer 3 (Gmap) */

section.contact .layer-3 {
	height: 500px;
}

/* FORMS */

.account-form label {
	display: block;
	width: 100%;
}

.account-form input[type="text"],
.account-form input[type="password"],
.account-form textarea {
	display: block;
	width: 100%;
	font-family: 'oxygen', Arial, Helvetica, sans-serif;
	font-weight: 200;
	opacity: 1;
	border: 0;
	font-size: inherit;
	border-bottom: 1px solid #d0d0d0;
	padding-top: 10px;
	padding-bottom: 10px;
	transition: all 200ms ease-out;
}

.account-form input[type="text"]:focus,
.account-form input[type="text"]:active,
.account-form input[type="password"]:focus,
.account-form input[type="password"]:active,
.account-form textarea:focus,
.account-form textarea:active {
	border-bottom-color: #555;
}

.account-form .contact-form textarea {
	height: 100px;
	font-family: 'oxygen', Arial, Helvetica, sans-serif;
}

.account-form input[type="text"]::placeholder,
.account-form input[type="password"]::placeholder {
	color: #3a3a3c;
	opacity: 0.5;
}

.account-form input[type="text"]::-ms-input-placeholder,
.account-form input[type="password"]::-ms-input-placeholder {
	color: #3a3a3c;
	opacity: 0.5;
}

.account-form .checkbox-control {
	color: #3a3a3c;
}

.account-form button[type="submit"],
.account-form .button {
	color: #3a3a3c;
	border-radius: 24px;
	border: 1px solid #3a3a3c;
	padding: 15px 30px;
	cursor: pointer;
	background-color: #fff;
	font-weight: 600;
	font-size: inherit;
}

/* FOOTER */

footer {
    background-color: #000;
    color: #fff;
}

footer .col {
    position: relative;
}

footer .logo {
    opacity: 1;
    display: block;
}

footer li {
    margin-bottom: 15px;
}

footer p,
footer a {
    color: #fff;
    opacity: 0.5;
    transition: all 200ms ease-out;
}

footer a.ref {
    opacity: 1;
}

footer a:hover {
    opacity: 1;
}

footer p {
    margin-bottom: 15px;
    line-height: normal;
}

footer .app-links a {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    height: 45px;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* POPUPS */

.popup-school {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 20px;
    box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    background-color: #fff;
}

.popup-school a.btn-close {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.popup-school a.btn-close:after {
    width: 16px;
    height: 16px;
    display: block;
    content: '';
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9DQo8L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOC43IDE1LjdMMzAuNCA0YzAuOC0wLjggMC44LTIgMC0yLjggLTAuOC0wLjgtMi0wLjgtMi44IDBMMTYgMTMgNC4yIDEuMmMtMC44LTAuOC0yLTAuOC0yLjggMEMwLjcgMiAwLjcgMy4yIDEuNSA0bDExLjcgMTEuN0wxLjUgMjcuNGMtMC44IDAuOC0wLjggMiAwIDIuOCAwLjQgMC40IDAuOSAwLjYgMS40IDAuNnMxLTAuMiAxLjQtMC42bDExLjctMTEuNyAxMS43IDExLjdjMC40IDAuNCAwLjkgMC42IDEuNCAwLjZzMS0wLjIgMS40LTAuNmMwLjgtMC44IDAuOC0yIDAtMi44TDE4LjcgMTUuN3oiLz48L3N2Zz4=);
}

.popup-school a.btn-close:hover {
    opacity: 0.75;
}

.popup-school .image-card {
    height: 260px;
    background-image: url(/imgs/school.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.popup-school .image-card .title {
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.popup-school .text-card {
    background-color: #fff;
}

.popup-school .request-form {
    background-color: #fff;
}

.popup-school .request-form label {
    display: block;
}

.popup-school .request-form input[type="text"] {
    display: block;
    width: 100%;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #e2e2e2;
}

.popup-school .request-form input[type="text"]::placeholder {
	opacity: 0.5;
}

.popup-school .request-form input[type="text"]::-ms-input-placeholder {
	opacity: 0.5;
}

.popup-school .request-form button {
    border: 0;
    background-color: #212121;
    border-radius: 20px;
    color: #fff;
    padding: 10px 30px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease-out;
}

.popup-school .request-form button:hover {
    background-color: #34d875;
}

/* Slide In/Out Effects */

@keyframes slide-in {
	from {
		transform: translateX(50px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide-out {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(50px);
		opacity: 0;
	}
}

.slide-in {
	animation-name: slide-in;
	animation-duration: 250ms;
	animation-fill-mode: forwards;
}

.slide-out {
	animation-name: slide-out;
	animation-duration: 250ms;
	animation-fill-mode: forwards;
}