/*
---   Fonts   ---
font-family: 'Montserrat', sans-serif;
Montserrat:300,400,500,700,900
font-family: 'Prompt', sans-serif;
Prompt:300,400,700,900
font-family: 'Lobster Two', cursive;
font-family: 'sailregular', serif;
font-family: 'Playfair Display', serif;

logo fonts: lobster two, playfair
*/

@font-face {
    font-family: 'sailregular';
    src: url('../fonts/sail-regular-webfont.woff2') format('woff2'),
         url('../fonts/sail-regular-webfont.woff') format('woff');
}		 

/*
---   Colors   ---
olive: #aba000; rgb(171, 160, 0)
green: #598527; rgb(89, 133, 39)
brown: #403115; rgb(64,49,21)
gray: #484848; rgb(72, 72, 72)
green2: #acc293; 50%
brown2: #4D3B19;
white substitute #f7f7f7;
black substitude #484848;
*/

*, *:before, *:after{
  box-sizing: border-box;
}

/* hover image preload */
body:after{
	display: none;
	content: url(../img/airbnb-hover.png) url(../img/booking-hover.png) url(../tripadvisor-hover.png);
}

a {
	text-decoration: none;
}	

a.menu {
	color: #aba000;
	text-decoration: none;
}

a.menu:hover{
	border-bottom: 6px solid #aba000;
}	

a.link{
	color: #aba000;
	text-decoration: none;
	position: relative;
}

a.link:hover{
	border: none;
}

/* link animations */
a.link:after{
	content: "";
	transition:0.3s all ease;
	backface-visibility:hidden;
	position:absolute;
}

a.link:after{
	bottom:-0.25em;
}

a.link:after{
	height:2px;
	width:0;
	background:#aba000;
}

a.link:after{
	left:50%;
	transform:translateX(-50%);	  
}

a.link:hover:after{
	width:100%;
}
/* end link animations */

.zeytin{
	color: #4D3B19;
	font-family: 'Lobster Two', cursive;
	font-size: 16px;
    font-weight: 600;
	letter-spacing: 1px;
}

.sup{
	vertical-align: top;
	font-size: 0.6em;
	position: relative;
	bottom: 2px;
}	

code{
	font-family: 'sailregular';
	font-size: 1.07em;
    line-height: 1.5em;
	display: block;
	padding: 12px 0 12px 24px;
	color: #598527;
	border-left: 2px dashed #acc293;
}

li a{
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}	

body{
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='%23f7f7f7' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z'/%3E%3C/g%3E%3C/svg%3E");
	color: #484848;		
	margin: 0;
}

p{
	font-family: 'Prompt', sans-serif;
	line-height: 1.5em;
}	

li{
	font-family: 'Prompt', sans-serif;
	line-height: 1.5em;
}	

h1, h2{
	font-family: 'Montserrat', sans-serif;
}

h2{
	margin-top: 0;
	color: #598527;
}

ul {
	margin: 0 0 10px 0;
	list-style-type: circle;
}	

blockquote{
	font-family: 'Playfair Display', serif;
	font-size: 14px;
	text-indent: 26px;
	text-align: justify;
	background-color: #fff;
	padding: 14px 52px;
	border: 1px solid #ccc;
	margin: 0 0 14px 0;
	position: relative;
}

blockquote:before{
    display: block;
    content: "\201C";
    font-size: 60px;
    opacity: 0.4;
    position: absolute;
    left: -12px;
    top: -12px;
}

blockquote:after{
    display: block;
    content: "\201D";
    font-size: 60px;
    opacity: 0.4;
    position: absolute;
    right: 12px;
    bottom: -34px;
}

/* NAV */
header{
	background-color: rgba(255, 255, 255, 0.7);
	border-bottom: 1px solid #aba000;
}

.nav-collapse a{
	background-color: rgba(255, 255, 255, 0.7);
}

.nav-collapse .active a{
	border-bottom: 6px solid rgba(171, 160, 0, 1);
	color: #598527;	
}

.nav-antik-logo{
	height: 37px;
}

/* TABLE */

.table-container{
	font-family: 'Prompt', sans-serif;
	font-size: 14px;
    font-weight: 300;
	display:flex;
	flex-wrap: wrap;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
.table-row{
	flex:1;
	flex-direction: column;
}
.table-col{
	display:flex;
	flex:1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0 10px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.table-caption{
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Prompt', sans-serif;
	background-color: #598527;
	color: #fff;
	font-size: 14px;
    font-weight: 400;
	border-bottom: 1px solid #fff;
	margin: 0;
}	

.even{
	background-color: #f7f7f7;			
}	

.table-h{
	background-color: #ccc;
	color: #484848;
	font-weight: 400;
}

.empty{
	color: #ccc;
}

/* GALLERY */
#lightgallery{
	position: relative;
}

.gallery-link{
	background: url("../img/first.jpg") no-repeat center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}	

.corner{
	position: absolute;
	bottom: 0;
}

.photos{
	background-color: #fff;
	color: #484848;
	padding: 6px 16px;
	border: 1px #484848 solid;
	border-radius: 4px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
}	

/* SECTIONS */	

.container2{
	position: relative;
    bottom: 4px;
}	
	
.bar{
	position: relative;
	min-height: 53.6px;
}	

.res-link{
	color: #aba000;
	text-decoration: none;
}

.res-link:hover{
	text-decoration: underline;
}

.box-reservations{
	display: flex;	
	flex: 5;	
	justify-content: center;
	align-items: center;
}	

.p-reservations{
	font-weight: 300;
	flex-grow: 5;
	text-align: center;
	font-size: 28px;
	margin: 44px 0 0 0;
	padding: 4px 44px;
	border: 3px double #fff;
	background-color: rgba(64, 49, 21, 0.9);
	color: #fff;
}	

.top-third{ /* for small screens, as media query */	
}	

.travel-sites{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 13px 0 0 0;
	margin: 0 400px;
}	

.travel-link{
	margin: auto;
	width: 280px;
	height: 30px;
}	

.airbnb{
	background: url("../img/airbnb.png") no-repeat;
}

.airbnb:hover{
	background: url("../img/airbnb-hover.png") no-repeat;
}

.booking{
	background: url("../img/booking.png") no-repeat;
}

.booking:hover{
	background: url("../img/booking-hover.png") no-repeat;
}

.tripadvisor{
	background: url("../img/tripadvisor.png") no-repeat;	
}

.tripadvisor:hover{
	background: url("../img/tripadvisor-hover.png") no-repeat;	
}

.row{
	display: flex;
	flex-direction: row;
	background-size: cover;
	border-bottom: 1px solid #484848;
}

.box{
	flex: 5;	
	background-color: #fff;
	margin: 96px 0 154px 0;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	position: relative;
}	

.box:before{
	background: url("../img/green-before.png") no-repeat;
	content: "";
	position: absolute;
    top: 54px;
    right: -31px;
	width: 64px;
	height: 76px;
}

.white-wrapper:before{
	background: url("../img/before.png") no-repeat;
	content: "";
	position: absolute;
    top: -98px;
    left: -41px;
	width: 81px;
	height: 91px;
}

.white-wrapper:after{
	background: url("../img/after.png") no-repeat;
	content: "";
	position: absolute;
	bottom: -44px;
	right: 36.24%;
	width: 238px;
	height: 72px;
}

.white-wrapper{
	padding: 0 52px 44px 52px;
	position: relative;
}	

.box-img{
	flex: 3;	
	display: flex;
	align-items: center;
	background-size: cover;
}	

.third{
	flex: 3;
}	

.no-border{
	border: none;
}	

.box-common{
	display: flex;
    align-items: center;
    flex-direction: column;
	text-align: center;
	width: 100%;
	height: 100%;
	color: #fff;
}

.box-h{
	font-size: 40px;
	font-weight: 300;
	margin: 0;
	border-top: 6px double #ddd;
	border-bottom: 6px double #ddd;
	padding: 11px 0;
	width: 100%;
	color: #484848;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='%23f7f7f7' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z'/%3E%3C/g%3E%3C/svg%3E");
	background-color: #fff;
	position: relative;
	top: 184px;
}	

.box-p{
	font-family: 'sailregular', serif;
	font-size: 28px;
	letter-spacing: 1px;
	color: #fff;
	background-color: #598527;
	border-bottom: 2px dashed #fff;
	padding: 12px 52px 10px 52px;
	margin: 0 0 22px 0;
}

.comments-border{
	border-top: 4px solid #aba000;
	border-bottom: none;
}

.footer-top{
	color: #fff;
	background-color: #403115;
}	

.footer{
	padding-bottom: 44px;
	color: #fff;
	background-color: #403115;
	margin-bottom: 22px; /* for :after */
}

.fill{
	flex-basis: 27.27%;
}

.mid{
	display: flex;
	flex-direction: column;
	padding: 44px 52px;
	flex-basis: 45.46%;
	position: relative;
}		

.no-bot-padding{
	padding: 44px 52px 0 52px;
}

.no-bottom-margin{
	margin-bottom: 0;
}	

.contact:before{
	background: url("../img/brown-before.png") no-repeat;
	content: "";
	position: absolute;
    top: -42px;
    right: 62px;
	width: 92px;
	height: 57px;
}

.address:after{
	background: url("../img/brown-after.png") no-repeat;
	content: "";
	position: absolute;
    bottom: -84px;
    left: 82px;
	width: 92px;
	height: 65px;
}

.bottom-row{
	display: flex;
	justify-content: center; 
	align-items: center; 
	margin: 44px 0;
}

.bottom-antik-logo{
	height: 52px;
}

.hotel{
	background-image: url("../img/img-box/hotel.jpg");
	background-position: top; 
}

.stonehouses{
	background-image: url("../img/img-box/stonehouses.jpg");
}

.kitchen{
	background-image: url("../img/img-box/kitchen.jpg");
}

.bodrum{
	background-image: url("../img/img-box/bodrum.jpg");
}

.artroom{
	background-image: url("../img/img-box/artroom.jpg");
}

.rates{
	background-image: url("../img/img-box/rates.jpg");
}

.inline-img{
	display: none;
}	

/* Media Queries */
@media (max-width: 479px){
	
	.container2{
		overflow: hidden;
	}	
	.row{
		flex-direction: column;
		border: none;
	}	
	.antik-large-logo{
		height: 100px;
		margin-left: 13px;
	}
	.gallery-link{
		height: 280px;
	}	
	.photos{
		font-size: 10px;
		border: none;
		padding: 4px 8px;
	}
	.travel-sites{
		margin: 0;
		flex-direction: column;
		padding: 13px 0;
		background-color: #fff;
	}
	.travel-sites img{
		width: 100%;
	}
	.travel-link{
		margin: 0 0 13px 0;
	}	
	.travel-link:last-child{
		margin: 0;
	}	
	.inline-img{
		display: flex;
		width: 100%;
		height: 320px;
	}	
	.box{
		margin: 0;
	}	
	.rates .box{
		box-shadow: none;
	}	
	.box-h{
		top: 0;
		font-size: 32px;
	}	
	.box-p{
		font-size: 20px;
		padding: 12px 10px 10px 30px;
	}	
	.white-wrapper{
		padding: 0 30px 30px 30px;
	}
	.white-wrapper:last-child{
		border-bottom: 1px solid #ccc;
	}
	.white-wrapper:after{
		right: 10%;
	}	
	.rates .box .white-wrapper:after{
		display: none;
	}	
	.mid{
		padding: 30px;
	}
	.no-bot-padding{
		padding: 30px 30px 0 30px;
	}	
	h2{
		font-size: 20px;
	}		
	blockquote{
		font-size: 12px;
		padding: 14px 14px;
	}
	blockquote:before{
		font-size: 54px;
		left: -22px;
		top: -12px;
	}
	blockquote:after{
		font-size: 54px;
		right: 4px;
		bottom: -34px;
	}
	.contact:before{
		top: -32px;
		right: 22px;
	}
	.address:after{
		bottom: -74px;
		left: 32px;
	}
	p{
		font-size: 12px;
		margin: 0 0 12px 0;
	}
	.box-p{
		font-size: 24px;
	}		
	li{
		font-size: 12px;
	}
	h1{
		font-size: 16px;
		margin: 6px 0;
	}	
	ul{
		padding: 0 0 0 17px;
		margin: 0 0 12px 0;
	}
	.nav-collapse a{
		font-size: 16px;
	}
	.table-container{
		font-size: 12px;
	}
	.table-caption{
		font-size: 12px;
	}	
	.comments-border {
		border-top: 4px solid #aba000;
		border-bottom: none;
	}
	code{
		font-size: 0.9em;
	}	
	.p-reservations{
		font-size: 24px;
		border: none;
		margin: 0;
	}	
}	

@media (min-width: 480px){
	
	.container2{
		overflow: hidden;
	}	
	.row{
		flex-direction: column;
		border: none;
	}
	.gallery-link{
		height: 440px;
	}	
	.antik-large-logo{
		height: 176px;
		margin-left: 23px;
	}
	.photos{
		font-size: 12px;
		margin-bottom: 24px;
	}	
	.box{
		margin: 0;
	}	
	.box-h{
		top: 0;
		font-size: 46px;
	}
	.travel-sites{
		margin: 0;
		flex-direction: column;
		padding: 13px 30px;
		background-color: #fff;
	}
	.travel-sites img{
		width: 100%;
	}
	.travel-link{
		margin: 0 0 13px 0;
	}	
	.travel-link:last-child{
		margin: 0;
	}	
	.inline-img{
		display: flex;
		width: 100%;
		height: 400px;
	}	
	.box-p{
		font-size: 24px;
	}	
	p{
		font-size: 12px;
		line-height: 1.5em;
		margin: 0 0 12px 0;
	}	
	li{
		font-size: 14px;
		line-height: 1.5em;
	}
	h1{
		font-size: 20px;
		margin: 8px 0;
	}
	ul{
		padding: 0 0 0 28px;
		margin: 0 0 12px 0;
	}
	.nav-collapse a{
		font-size: 20px;
		letter-spacing: 1px;
	}
	.comments-border{
		border-top: 4px solid #aba000;
		border-bottom: none;
	}
	code{
		font-size: 0.9em;
	}
	.white-wrapper:before{
		top: -108px;
	}	
	.white-wrapper:after{
		right: 24%;
	}
	.rates .box .white-wrapper:after{
		display: none;
	}
	.box:before{
		top: 78px;
	}	
	.top-third{
		background-color: rgba(64, 49, 21, 0.9);
	}
	.p-reservations{
		font-size: 24px;
		border: none;
		margin: 0;
	}	
}

@media (min-width: 640px){	
	
	.corner{
		left: 0;
	}
	.photos{
		margin-left: 20px;
	}	
	.travel-sites{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 13px 0 0 0;
		margin: 0;
		background-color: transparent;
	}	
	.travel-link{
		margin: 0 0 13px 0;
	}	
	.travel-link:last-child{
		margin: 0 0 13px 0;
	}	
	.nav-collapse a{
		font-size: 11.4px;
		padding: 0.8325em 0.5em;
	}
	.logo{
		padding: 0;
	}
	.white-wrapper:before{
		left: -11px;
	}	
	.white-wrapper:after{
		right: 30%;
	}
	.box:before{
		top: 48px;
		right: -21px;
	}
	p{
		font-size: 13px;
		margin: 0 0 13px 0;
	}	
	li{
		font-size: 13px;
	}
	ul{
		margin: 0 0 13px 0;
	}	
	code{
		font-size: 1em;
	}	
	.logo{
		padding: 3px 1px 0 1px;
	}
	.p-reservations{
		font-size: 24px;
		border: none;
		margin: 0;
	}
}

@media (min-width: 768px){	
		
	.row{
		flex-direction: row;
	}
	.box-img{
		flex: 6;
	}		
	.third{
		flex: 1;
	}
	.fill{
		flex: 1;
	}
	.mid{
		flex: 12;
	}	
	.logo{
		padding: 7px 0 0 8px;
	}
	.inline-img{
		display: none;
	}	
	.box{
		flex: 12;
		margin: 28px 0 68px 0;
		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	}	
	.box-h{
		top: 184px;
		font-size: 26px;
	}		
	.gallery-link {
		height: 539px; /* exact image height */
	}
	.nav-collapse a{
		font-size: 14px;
		padding: 0.8325em 0.5em;
	}
	.box-p{
		font-size: 26px;
	}		
	.mid {
    padding: 44px 0;
	}	
	.no-bot-padding {
    padding: 44px 0 0 0;
	}
	.white-wrapper:after{
		display: block;
	}	
	code{
		font-size: 1.07em;
	}	
	.white-wrapper:before{
	    top: -108px;
		left: -41px;
	}
	.rates .box .white-wrapper:after{
		display: block;
	}
	.white-wrapper:after{
		right: 24%;
	}
	.box:before{
		top: 78px;
		right: -31px;
	}
	.p-reservations{
		font-size: 26px;
	}	
}

@media (min-width: 1024px){
	
	.travel-sites{
		flex-direction: row;
		justify-content: center;
		margin: 0;
	}
	.travel-link:last-child{
		margin-left: 56px;
	}		
	.fill{
		flex: 1;
	}
	.mid{
		flex: 6;
	}
	.nav-collapse a{
		padding: 0.8325em 1.5em;
	}
	.logo {
		padding: 8px 0 0 24px;
	}
	.white-wrapper:before{
	    top: -88px;
		left: -41px;
	}
	.white-wrapper:after{
		right: 30%;
	}
	.box:before{
		top: 48px;
		right: -31px;
	}	
	.p-reservations{
		font-size: 26px;
		padding: 4px 0;
	}	
}

@media (min-width: 1280px){
	
	.box-img{
		flex: 3;
	}
	.box{
		flex: 7;
		margin: 48px 0 96px 0;
	}	
	.box-reservations{
		flex: 7;
	}			
	.third{
		flex: 3;
	}
	.row{
		border-bottom: 1px solid #484848;
	}	
	.box-h{
		font-size: 31px;
	}	
	p{
		font-size: 14px;
		margin: 0 0 14px 0;
	}	
	li{
		font-size: 14px;
	}
	ul{
		margin: 0 0 14px 0;
	}
	.no-border{
		border: none;
	}	
	.comments-border {
		border-top: 4px solid #aba000;
		border-bottom: none;
	}
	.box-p{
		font-size: 28px;
	}	
	.fill{
		flex: 3;
	}
	.mid{
		flex: 7;
	}
	.nav-collapse a{
		padding: 0.8325em 2em;
	}
	.logo {
		padding: 10px 0 0 20px;
	}
	.p-reservations{
		font-size: 28px;
	}	
	.white-wrapper:after{
		right: 35%;
	}
}	

@media (min-width: 1366px){ /* where 1/3/1 ratio starts */
	
	.gallery-link{
		height: 589px;
	}	
	.white-wrapper:after{
		right: 34%;
	}	
}

@media (min-width: 1680px){ /* default style */
	
	.antik-large-logo {
		height: 240px;
		margin-left: 30px;	
	}
	.box-img{
		flex: 3;
	}
	.box{
		flex: 5;
		margin: 96px 0 154px 0;
	}		
	.third{
		flex: 3;
	}
	.box-h{
		font-size: 40px;
	}
	.fill{
		flex-basis: 27.27%;
	}
	.mid{
		flex-basis: 45.46%;	
		padding: 44px 52px;
	}	
	.no-bot-padding {
		padding: 44px 52px 0 52px;
	}
	.travel-sites {
		margin: 0 400px;
	}	
	.white-wrapper:before{
	    top: -98px;
		left: -41px;
	}
	.white-wrapper:after{
		right: 36.24%;
	}
	.box:before{
		top: 48px;
		right: -31px;
	}	
}

@media (min-width: 2048px){ /* large */
	.antik-large-logo{
		height: auto;
		margin-left: 43px; /* default correction margin for logo's olive leaf extension */
	}	
}