@charset "utf-8";

#mobile-top-line {
	display: none;
	align-items: center;
	align-content: stretch;
	flex-wrap: nowrap;
	min-height: 85px;
	padding: 10px;
	background-color: #b9ceac;
	color: #fff;
}

	.nav-logo {
		flex: 0 0 100px;
		align-self: center;
		text-align: center;
	}

		.nav-logo > img {
			max-height: 50px;
		}

	.nav-icon--menu {
		text-align: left;
	}

	.nav-icon {
		font-size: 30px;
		padding: 0px 15px;
		align-self: center;
		flex: 1;
		color: #fff;
	}
	
	.nav-icon--cart {
		text-align: right;
	}
	
#mobile-social {
	display: none;
	padding: 10px;
	text-align: center;
	background-color: #f2f2f2;
}

	#search-bar-mobile {
		width: 150px;
		height: 30px;
		-webkit-appearance: none;
		-moz-appearance: none;
		vertical-align: bottom;
		padding: 0px 5px;
		border: 1px solid #ddd
	}
	
@media screen and (max-width: 1024px) {
	#mobile-top-line {
		display: flex;
	}
	
	#mobile-social {
		display: block;
	}
}

#mobile-nav {
	height: auto;
	padding: 0px 20px;
	overflow: initial !important;
	display: none;
}
	#mobile-nav a {
		display: block;
	}

	.mobile-nav__button {
		width: 100%;
		color: #222222;
		text-align: left;
		padding: 16px 0px;
		font: 600 14px "Open Sans", sans-serif;
		border-bottom: 1px solid #222222;
	}

	.mobile-nav__button:last-child {
		border-bottom: none;
	}
	
	.mobile-nav__button .mobile-sub-right {
		float: right;
	}
	
	.mobile-sub-hidden {
		color: #515151;
		text-align: left;
		font: 800 14px "Open Sans", sans-serif;
		overflow: hidden;
		height: 0px;
	}
	
	.mobile-sub-hidden .mobile-sub-button {
		padding: 10px 40px;
		color: #515151;
		display: block;
	}

#top-logo-section {
	position: relative;
	padding: 20px;
	text-align: center;
	background-color: #f4f4f4;
}

	.top-logo-contact, .top-logo {
		display: inline-block;
		width: 300px;
		vertical-align: middle;
	}
	
		.logo-main {
			max-height: 130px;
		}
	
	.icon-box {
		display: inline-block;
		background-color: #000;
		border-radius: 5px;
		color: #fff;
		padding: 1px;
		width: 28px;
		height: 28px;
		vertical-align: center;
	}
	
	.icon-box>i {
		font-size: 14px;
	}
	
#menu-section {
	position: relative;
	padding: 20px;
	text-align: center;
	background-color: #f4f4f4;
	width: 100%;
}

	.menu-button {
		display: inline-block;
		margin: 0px 10px;
		vertical-align: center;
		color: #666;
		font: 700 16px 'Raleway', sans-serif;
	}
	
	.menu-button:hover {
		cursor: pointer;
		text-decoration: underline;
	}
	
#banner-section {
	position: relative;
	padding: 20px;
	text-align: center;
	width: 100%;
	background-color: #f4f4f4;
}

	.banner-wrapper {
		display: inline-flex;
		width: 90%;
		max-width: 1200px;
		margin: auto;
	}
	
		.banner-left, .banner-right {
			flex: 1;
			align-self: center;
		}
		
		.banner-left {
			text-align: left;
		}
		
			.banner-left>span {
				color: #aaa;
				font: 400 16px 'Raleway', sans-serif;
			}
		
			.banner-left>h1 {
				font-size: 70px;
				margin: 5px;
				padding: 0px;
			}
		
		.banner-right>img {
			display: 100%;
			width: 100%;
			max-width: 600px;
		}
		
@media screen and (max-width: 1024px) {
	#banner-section h1{
		font-size: 30px;
	}

	.banner-wrapper {
		display: block;
	}
	
	.banner-left {
		text-align: center;
	}
	
	.banner-left>span {
		font-size: 14px;
	}
}
		
#booking-section {
	position: relative;
    padding: 10px 0 20px 0;
    background-color: #fff;
    text-align: center;
    width: 880px;
    top: -60px;
    margin: auto;
}

	#booking-section h2 {
		margin-bottom: 30px;
	}

	.booking-arrival, .booking-leaving {
		display: inline-block;
		text-align: left;
		width: 200px;
	}
	
	.booking-check {
		display: inline-block;
	}
	
	.date-label {
		font: 700 14px 'Raleway', sans-serif;
	}
	
@media screen and (max-width: 1024px) {
	#booking-section {
		width: 95%;
		left: 0px;
		top: 0px;
	}

	.booking-arrival, .booking-leaving, .booking-check {
		margin: 10px 0px;
	}
}
	
#about-section {
	position: relative;
	padding: 60px 0 60px 0;
	text-align: center;
	width: 100%;
}

	.about-wrapper {
		display: inline-flex;
		gap: 30px;
		width: 90%;
		max-width: 1200px;
	}

	.about-left {
		flex: 0.8;
		align-self: center;
	}
	
	.about-right {
		flex: 1;
		align-self: center;
		padding-left: 20px;
	}
	
		.about-right {
			text-align: left;
		}
	
		.about-right>span {
			color: #aaa;
			font: 400 16px 'Raleway', sans-serif;
		}
	
		.about-right>h1 {
			font-size: 35px;
			margin: 0;
			margin-bottom: 30px;
			color: #111;
			padding: 0px;
		}
		
		.about-left-col {
			display: inline-block;
			padding: 0px 3px;
			width: 48%;
		}
			
			.about-mosaik {
				width: 100%;
				margin: 10px 0px;
				background-color: #fff;
				height: 280px;
			}
			
			.mosaik-bg-01 {
				background-image: url('../pics/tile01.jpg?v2');
				background-size: cover;
			}
			
			.mosaik-bg-02 {
				background-image: url('../pics/tile02.jpg?v2');
				background-size: cover;
			}
			
			.mosaik-light {
				background-image: url('../pics/tile04.jpg');
				background-position: 50% 50%;
				background-repeat: no-repeat;
			}
			
			.mosaik-dark {
				background-color: #222222;
				background-image: url('../pics/tile03.jpg');
				background-position: 50% 50%;
				background-repeat: no-repeat;
			}
			
@media screen and (max-width: 1024px) {
	#about-section {
		padding: 10px 0px 40px 0;
	}
	
	.about-wrapper {
		display: inline-block;
	}
	
	.about-mosaik {
		height: 150px;
	}
}

#guesthouse-section {
	position: relative;
	padding: 20px 0 80px 0;
	text-align: left;
	background-color: #fff;
	width: 100%;
}

	.guesthouse-wrapper {
		margin: auto;
		width: 100%;
		font-size: 15px;
		color: #444;
		max-width: 1000px;
		text-align: left;
	}
	
@media screen and (max-width: 1024px) {
	#guesthouse-section {
		padding: 10px 0px;
	}
	
	.guesthouse-wrapper {
		padding: 15px;
	}
}

#gallery-section {
	position: relative;
	width: 100%;
	font-size: 0px;
	text-align: center;
	padding: 6px 0px;
	overflow: hidden;
	max-height: 300px;
	background-color: #fff;
	z-index: 10
}
	#gallery-section:hover .gallery-pager{opacity:1}
	#gallery-section:hover .prev-button{left:0px}
	#gallery-section:hover .next-button{right:0px}

	.gallery-pager{position:absolute;opacity:0;cursor:pointer;top:50%;margin-top:-50px;width:105px;height:105px;font-size:16px;text-align:left;color:#fff;border-style:solid;z-index:10;-webkit-transition:all .3s;transition:all .3s;}

	.prev-button{border-width:52.5px 0 52.5px 54px;border-color:transparent transparent transparent rgba(0,0,0,0.8);left:-20px}
		.prev-button>i{margin-left:-37px;margin-top:-15px;display:inline-block;vertical-align:middle;font-size:30px;}
	.next-button{border-width:52.5px 54px 52.5px 0;border-color:transparent rgba(0,0,0,0.8) transparent transparent;right:-20px}
		.next-button>i{margin-left:80px;margin-top:-15px;display:inline-block;vertical-align:middle;font-size:30px;}
		
	.prev-button:hover{color:#fff;border-color:transparent transparent transparent rgba(185,206,172,0.65);}
	.next-button:hover{color:#fff;border-color:transparent rgba(185,206,172,0.65) transparent transparent;}
	
	#gallery-wrapper{display:flex;justify-content:center;}
		.gallery-box{display:block;cursor:pointer}
			.gallery-box-img{width:100%;background-repeat:no-repeat;border:1px solid rgba(255,255,255,0.3);background-size:cover}
			
	.gallery-mobile-text {
		position: absolute;
		bottom: 0px;
		padding: 10px 0px;
		width: 100%;
		font-size: 16px;
		background-color: #b9ceac;
		color: #fff;
		text-align: center;
		z-index: 10;
		opacity: 1;
	}
			
	@media screen and (max-width: 1024px) {
		.gallery-box{width:100%}
		.gallery-slide{display:none}
		.gallery-slide:first-of-type{display:block !important}
		.prev-button{display:none}
		.next-button{display:none}
	}
			
#rooms-section {
	position: relative;
	padding: 60px;
	background-color: #fff;
	text-align: center;
	width: 100%;
}

	.rooms-wrapper {
		margin-top: 40px;
		font-size: 0px;
		width: 90%;
		margin: auto;
		max-width: 1800px;
	}

		.room-box {
			display: inline-block;
			max-width: 400px;
			width: 50%;
			margin: 15px;
			vertical-align: top;
		}
		
			.room-box-img {
				height: 300px;
				background-position: 50% 50%;
				background-size: cover;
			}
			
			.room-box-content {
				padding: 10px 0px;
				text-align: left;
				font: 300 14px 'Open Sans', sans-serif;
			}
			
				.room-name {
					font-weight: 700;
					font-size: 16px;
					margin-bottom: 10px;
				}
				
			.room-box-buttons {
				display: flex;
			}
			
			.room-box-button {
				margin-top: 15px;
				padding: 5px;
				flex: 1;
			}
			
			.room-box-button>a, .room-box-button>div {
				display: block;
			}
			
@media screen and (max-width: 1024px) {
	#rooms-section {
		padding: 20px;
	}
	
	.rooms-wrapper {
		width: 100%;
	}
	
	.room-box {
		width: 90%;
		margin-bottom: 20px;
	}
}
			
#services-section {
	position: relative;
	padding: 60px;
	background-color: #b9ceac;
	background-image: url("../pics/section-bg.jpg");
	background-position: 50% 50%;
	background-size: cover;
	text-align: center;
	border-top: 10px solid rgba(255,255,255,0.6);
	border-bottom: 10px solid rgba(255,255,255,0.6);
	width: 100%;
}

	.services-wrapper {
		display: flex;
		width: 90%;
		margin: auto;
		max-width: 1400px;
		align-items: flex-start;
	}

		.services-box {
			position: relative;
			letter-spacing: 0.5px;
			padding: 40px 20px;
			font: 400 14px 'Open Sans', sans-serif;
			color: #888;
			background-color: #fff;
			flex: 3;
		}
		
		.services-box>h1 {
			font-size: 40px;
			margin: 0px 0px 10px 0px;
		}
		
			.services-text {
				text-align: justify;
			}
			
			.services-item {
				padding: 10px;
				border-bottom: 1px dotted #ddd;
			}
			
			.services-item i {
				color: #b9ceac;
				font-size: 25px;
			}
			
			.services-item:last-of-type {
				border-bottom: 0px;
			}
			
		.programs-box {
			position: sticky;
			top: 20px;
			margin: 0px 10px;
			padding: 40px 20px;
			font: 400 14px 'Open Sans', sans-serif;
			color: #888;
			background-color: #fff;
			flex: 1
		}
		
		.programs-box>h1 {
			font-size: 40px;
			margin: 0px 0px 10px 0px;
		}
		
			.program-lines {
				padding: 5px;
			}
			
			.program-line {
				width: 100%;
				padding: 10px 0px;
				text-align: center;
				margin: 5px 0px;
				background-color: #b9ceac;
				color: #fff;
			}
			
			.program-line:hover {
				cursor: pointer;
				background-color: #90b37a;
			}
			
			#program-address {
				font-size: 14px;
			}
			
			#program-web {
				color: #3886e6;
				font-size: 14px;
				text-decoration: underline;
			}
			
			#program-content {
				margin-top: 20px;
				text-align: left;
				font-size: 14px;
			}
		
	@media screen and (max-width: 1024px) {
		#services-section {
			padding: 20px 10px;
		}
		
		#services-section h1 {
			font-size: 26px;
		}
		
		#services-section h2 {
			font-size: 18px;
		}
		
		.services-wrapper {
			display: block;
		}
		
		.services-box, .programs-box {
			letter-spacing: 0px;
			font: 300 12px 'Open Sans', sans-serif;
		}
		
		.programs-box {
			margin: 0px;
			margin-top: 20px;
		}
	}
	
#contact-section {
	position: relative;
	background-color: inherit;
	min-height: 500px;
	background-color: #fff;
	z-index: 10;
}

	#contact-section h1 {
		font-size: 40px;
		margin: 0px 0px 10px 0px;
	}

	.map-left {
		flex: 1;
		text-align: center;
		align-self: center;
		padding: 30px 50px;
	}
	
		.contact-box {
			margin: 20px auto;
			max-width: 500px;
		}
		
		.contact-box i {
			font-size: 18px;
			vertical-align: bottom;
			margin-right: 5px;
		}
		
			.contact-line {
				display: flex;
				padding: 8px 0px;
				border-bottom: 1px dotted #444;
			}
			
			.contact-line:last-of-type {
				border-bottom: 0px;
			}
			
				.contact-line-left {
					font-size: 14px;
					color: #444;
					flex: 1;
					text-align: left;
					align-self: center;
				}
				
				.contact-line-right {
					flex: 1;
					align-self: center;
					text-align: right;
					font: 300 15px 'Open Sans', sans-serif;
				}
				
				.flex-bigger {
					flex: 1.5;
				}

	.map-right {
		flex: 1;
		text-align: center;
		align-self: center;
		min-height: 500px;
		background-color: #eee;
	}
	
@media screen and (max-width: 1024px) {
	#contact-section {
		min-height: auto;
		padding: 20px 0px 0px 0px;
	}
	
	#contact-section h1 {
		font-size: 26px;
	}
	
	#contact-section>.flex {
		display: block;
		width: 100%;
	}
	
	.map-left {
		padding: 20px 20px;
	}
	
	.contact-line-left, .contact-line-right {
		font-size: 12px;
	}
}

#bottom-section {
	position: relative;
	background-color: #0a0a0a;
	padding: 20px 100px;
	color: #fff;
}

	.bottom-left {
		flex: 0 0 300px;
		text-align: left;
	}
	
	.bottom-right {
		flex-grow: 1;
		text-align: right;
	}
	
		.bottom-button {
			display: inline-block;
			color: #fff;
			cursor: pointer;
			font: 300 16px 'Open Sans', sans-serif;
			margin: 0px 15px;
		}
		
		.bottom-button:hover {
			text-decoration: underline;
		}
		
@media screen and (max-width: 1024px) {
	#bottom-section {
		padding: 20px;
	}
	
	#bottom-section>.flex {
		display: block;
		width: 100%;
	}
	
	.bottom-left, .bottom-right {
		flex: initial;
		text-align: center;		
	}
	
	.bottom-right {
		margin-top: 20px;
	}
}

/* BOOKING -------------------*/

#booking-page-section {
	position: relative;
	padding: 60px;
	text-align: center;
	background-color:#f4f4f4;
	width: 100%;
}

	#booking-page-box {
		padding: 40px;
		background-color: #fff;
		text-align: center;
		margin: auto;
		width: 90%;
		max-width: 580px;
	}

		.booking-box-arrival, .booking-box-leaving {
			display: inline-block;
			text-align: left;
			margin: 0px 10px;
			width: 200px;
		}
		
		.booking-box-check {
			display: inline-block;
		}
	
	.booking-page-text {
		margin: 30px 0px;
	}
	
	#booking-room-selector {
		text-align: center;
		margin: auto;
		width: 90%;
		max-width: 1100px;	
	}
	
	.booking-room-item {
		display: flex;
		padding: 10px;
		align-items: center;
		margin: 10px 0px;
		background-color: #fff;
	}
		
		.room-description {
			flex: 1;
			font: 300 14px 'Open Sans', sans-serif;
		}

		.room-inputs {
			flex: 1;
		}
		
			.room-input-line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px;
				border-bottom: 1px solid #ddd;
			}
			
			.room-input-line:last-child {
				border-bottom: 0px;
			}
			
				.room-input-label {
					flex: 0 0 150px;
					text-align: left;
					font: 700 16px 'Open Sans', sans-serif;
				}
				
					.room-input-label-sub {
						display: inline-block;
						padding-left: 15px;
						font: 400 14px 'Open Sans', sans-serif;
						color: #888;
					}
				
				.room-input-content {
					padding-left: 10px;
					text-align: left;
				}
				
			.room-input-line.text {
				text-align: center;
				font: 400 12px 'Open Sans', sans-serif;
				color: #666;
			}

		.room-select {
			flex: 1;
		}
		
			.room-summary {
				text-align:center
			}
			
			.summary-section {
				padding: 6px 0px;
			}

			.room-summary-label {
				font: 400 14px 'Open Sans', sans-serif;
				color: #888;
			}
			
			.room-summary-price {
				font: 700 18px 'Open Sans', sans-serif;
				color: #444;
			}
			
		.room-message {
			flex: 1.6;
		}
			
	#booking-summary {
		display: flex;
		padding: 20px;
		text-align: center;
		margin: auto;
		width: 90%;
		background-color: #fff;
		max-width: 500px;
		align-items: baseline;
	}
	
		.booking-summary-label {
			text-align: left;
			font: 400 16px 'Open Sans', sans-serif;
		}
		
		.booking-summary-dots {
			flex-grow: 1;
			margin: 0px 15px;
			border-bottom: 1px dotted #ddd;
		}
		
		.booking-summary-value {
			text-align: right;
			font: 700 20px 'Open Sans', sans-serif;
		}
	
	#booking-next {
		margin-top: 20px;
	}
	
@media screen and (max-width: 1024px) {
	#booking-page-section {
		padding: 20px 10px;
	}
	
	.booking-box-arrival, .booking-box-leaving {
		margin: 10px;
	}
	
	.booking-room-item {
		display: block;
	}
	
	.room-message {
		margin-top: 10px;
		font-size: 14px;
	}
}
	
#personal-page-section, #order-page-section {
	position: relative;
	padding: 60px;
	text-align: center;
	background-color:#f4f4f4;
	width: 100%;
}

	#personal-page-section h1, #order-page-section h1 {
		font-size: 30px;
	}

	#personal-address, #personal-invoice {
		padding: 20px;
		background-color: #fff;
	}
	
	#final-personal {
		background-color: #fff;
		padding: 20px;
	}
	
	.personal-line {
		position: relative;
		padding: 5px 0px;
		font: 300 18px "Open Sans", sans-serif;
		display: flex;
		align-items: center;
		max-width: 1000px;
		margin: auto;
		border-bottom: 1px solid #eee;
	}

	.personal-line:last-of-type {
		border-bottom: 0;
	}

	.personal-label {
		flex-grow: 0;
	}
	
	.personal-space {
		flex-grow: 1;
		height: 1px;
		margin: 0px 30px;
	}
	
	.personal-content {
		flex-grow: 0;
	}

	#personal-invoice {
		display: none;
		margin-bottom: 50px;
	}

	.common-input {
		padding: 10px;
		border: 1px solid #cccccc;
		width: 350px;
		font: 300 16px "Open Sans", sans-serif;
		background-color: #ffffff;
	}

	.common-text-area {
		resize: none;
		width: 100%;
		max-width: 1000px;
	}

	.common-input--medium {
		width: 246px;
	}

	.common-input--small {
		width: 100px;
	}

	.address-check {
		margin: 20px 0px;
	}

	.address-check-label {
		font: 600 16px "Open Sans", sans-serif;
	}

	#personal-bottom {
		font: 600 16px "Open Sans", sans-serif;
		text-align: center;
		padding-bottom: 50px;
	}
	
	.personal-simple {
		display: block;
		margin: 10px 0px;
	}
	
		.simple-logo {
			max-width: 250px;
		}
	
		.simple-cards {
			max-width: 250px;
		}

@media screen and (max-width: 1024px) {
	#personal-page-section, #order-page-section {
		padding: 20px 10px;
	}
	
	.personal-line {
		border-bottom: 0;
	}
	
	.barion-cards {
		display: block;
		max-width: 100%;
	}

	.personal-line,
	.personal-label,
	.personal-content {
		display: block;
		flex: none;
		width: 100%;
		text-align: center;
	}

	.personal-space {
		display: none;
		flex: none;
	}

	.common-input {
		width: 100%;
	}
}

.summarize-line {
	position: relative;
	padding: 5px 0px;
	font: 300 16px "Open Sans", sans-serif;
	display: flex;
	align-items: center;
	max-width: 1000px;
	margin: auto;
}

	.summarize-label {
		flex-grow: 0;
		font: 600 18px "Open Sans", sans-serif;
	}
	
	.summarize-info-text {
		font: 400 14px "Open Sans", sans-serif;
	}
	
		.summarize-room-detail {
			text-align: left;
			font: 300 14px "Open Sans", sans-serif;
			color: #666;
		}
	
	.summarize-dots {
		flex-grow: 1;
		height: 1px;
		border-bottom: 1px dotted #cccccc;
		margin: 0px 30px;
	}
	
	.summarize-content {
		flex-grow: 0;
	}
	
	#summarized-cart .cart-line {
		max-width: 1000px;
		padding: 5px 0px;
		margin: auto;
	}
	
	.cart-line-details {
		margin-top: 10px;
		font: 300 14px "Open Sans", sans-serif;
		color: #515151;
		padding-bottom: 50px;
	}

	#payment-info {
		margin-top: 15px;
	}
	
	.order-bottom {
		margin-top: 40px;
	}

@media screen and (max-width: 1024px) {
	.summarize-label, .summarize-content {
		font-size: 14px;
	}
	
	.summarize-content {
		text-align: right;
	}
	
	.order-bottom .green-button {
		margin: 5px 0px;
	}
}

/* COMMON --------------------*/

.green-button {
	display: inline-block;
	padding: 10px 30px;
	background-color: #b9ceac;
	font: 300 14px 'Raleway', sans-serif;
	color: #fff;
}

	.green-button:hover {
		cursor: pointer;
		background-color: #90b37a;
	}

.icon-input {
	position: relative;
	display: inline-block;
	color: #999;
}

	.icon-input>i {
		position: absolute;
		left: 3px;
		font-size: 14px;
		top: 10px;
	}

.simple-input {
	border: 0px;
	padding: 10px;
	padding-left: 20px;
	color: #999;
	border-bottom: 3px solid #b9ceac;
}

.styled-input {
	border: 1px solid #ccc;
	padding: 5px 10px;
	font: 300 14px 'Open Sans', sans-serif;
}

.custom-checkbox {
	display: inline-flex;
	width: 188px;
	cursor: pointer;
}

	.custom-checbox-tick {
		flex: 0 0 35px;
		padding-top: 2px;
		height: 35px;
		border: 2px solid #555555;
		background-color: #ffffff;
	}
	
		.custom-checbox-tick>i {
			opacity: 0;
			font-size: 26px;
			color: #b9ceac;
		}
	
	.custom-checbox-button {
		flex: 0 0 150px;
		text-align: center;
		height: 35px;
		margin-left: 2px;
		padding: 10px 0px;
		color: #fff;
		font: 300 14px 'Raleway', sans-serif;
		background-color: #555555;
	}
	
		.custom-check-label-on {
			display: none;
		}
		
		.checkbox-on .custom-check-label-on {
			display: inline-block;
		}
		
		.checkbox-on .custom-check-label-off {
			display: none;
		}

	.checkbox-on .custom-checbox-tick {
		border-color: #b9ceac;
	}
	
		.checkbox-on .custom-checbox-tick>i {
			opacity: 1;
		}
	
	.checkbox-on .custom-checbox-button {
		background-color: #b9ceac;
	}
	
.prices-wrapper {
	margin-bottom: 10px;
}
	
	.prices-line {
		display: flex;
		align-items: baseline;
	}
	
	.prices-line-label {
		flex-grow: 0;
		font: 600 16px "Open Sans", sans-serif;
	}
	
	.prices-line-dots {
		flex-grow: 1;
		height: 1px;
		border-bottom: 1px dotted #cccccc;
		margin: 0px 30px;
	}
	
	.prices-line-content {
		flex-grow: 0;
	}
	
	.prices-info {
		font-size: 14px;
		margin: 30px 0;
	}

/* CALLBACK PAGES ------------*/

.page-wrapper {
	position: relative;
	text-align: center;
	background-color: #f9f9f9;
	height: 100%;
	width: 100%;
	padding: 0px;
	font-family: Arial;
	font-size: 14px;
	color: #444;
}

	.page-content {
		display:inline-block;
		margin-top: 20px;
		width:90%;
		max-width:600px;
		background-color:#fff;
		border:1px solid #ddd;
		padding: 20px;
	}
	
		.page-content>h3 {
			padding: 0px;
			margin: 0px;
			margin-bottom: 10px;
		}
	
	.page-bottom {
		text-align:center;
		padding:10px 0px;
	}
	
	.page-bottom>a {
		text-decoration: underline;
		color: #0089ff;
	}

/* BASIC --------------------*/

@media screen and (min-width: 1281px) {.only-mobile{display:none}}
@media screen and (max-width: 1280px) {.only-pc{display:none}}

.flex {
	display: flex;
}

.content-wrapper{position:relative;margin:auto;width:90%;max-width:1100px;}
@media screen and (max-width: 1280px) {.content-wrapper{width:90%;}}

h1{font:400 50px 'PT Serif', serif;color:#222}
h2{font:400 20px 'Open Sans', sans-serif;color:#222}
h3{font:400 16px 'Open Sans', sans-serif;color:#222}
.h1-sub{font:400 14px 'Open Sans', serif;color:#888}

*{box-sizing:border-box;}
a{text-decoration:none;color:inherit;}
body{font-family:'Open Sans', sans-serif;background-color:#f4f4f4;margin:0;padding:0;}
html,body {width:100%;height:100%;}
img{border:0;}