@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700');

html, body {
	margin: 0;
	padding: 0;
	height:100%;
	width: 100%;
}
h2{
	font-family: 'Arial', serif;
	font-size: 200%;
	font-weight: normal;
	color:#333333;
	text-align: center;
	font-style: italic;
	text-decoration: underline;
}
h3{
	font-family: "Arial", serif;
	font-size: 130%;
	text-align: center;
	margin: 37px 0;
}

p{
	font-family: "Times New Roman", Times, serif;
	font-size: 140%;
	font-weight: 300;
	color:#333333;
	text-align: justify;
	line-height: 170%;
	margin: 10%;
}

img{
	text-align:center;
	max-wight:auto;
	height:auto;
	width:auto;
}

.intro{
	height: 100%;
	width: 100%;
	margin:auto;
	display:table;
	top: 0;
}

.introBanner {
	background:url(img/Main/besttillnow.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.barcelonaBanner {
	background:url(img/Barcelona/main.JPG) no-repeat 50% 50%;
	background-size: cover;
}
.plovdivBanner{
	background:url(img/Plovdiv/plovdivmainphoto.JPG) no-repeat 50% 50%;
	background-size: cover;	
}
.viennaBanner{
	background:url(img/Vienna/viennamainphoto.jpg) no-repeat 50% 50%;
	background-size: cover;	
}


.intro .inner{
	display:table-cell;
	vertical-align: middle;
	width:100%;
	max-width: none;
}

.content {
max-width: 600px;
margin:auto;
}

h1{
font-family:Arial, Helvetica, sans-serif;
font-size: 300%;
font-weight: 700;
color:#FFFFFF;
text-align:center;
padding:2%;
text-shadow: 0px 0px 250px #000;
}

/*-----Navigarion manu-----*/
nav {
float: left;
padding: 5% 5% 0 0;
height: 50px;
}

nav ul{
list-style: none;
float: left;
}

nav ul li {
font-family:"Times New Roman", Times, serif;
font-size : 120%;
}

nav ul li a{
color:#FFFFFF;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
nav ul, nav:hover ul{
display:none;
padding: 8px 0;
left: 45px;
top: 60px;
width:20%;
z-index: 1000;
}
nav li{
width: 100%;
padding: 8px 0 10px 7px;
margin: 0;
}
nav:hover ul{
display: block;
position:absolute;
}
#menu-icon {
width: 30px;
height: 26px;
background: url(img/Icon/nav-icon.png) center;
display: inline-block;
margin: 50px 0 0 50px;
}

/*------End Nav ------*/

.left-col {
width: 60%;
float: left;
margin: 4% 0 4% 4%;
}

.sidebar {
width: 26%;
float: right;
margin: 4% 4% 4% 4%;
}

.one-thirt-places{
width : 29.333333%;
padding:2%;
float: left;
}
.one-thirt-places img:hover {
opacity: .6;
}

.clearfix {
	clear: both;
}
.iconwraper{
	width:500px;
	text-align: center;
	margin: 0 auto;
}

.icon {
	width:100px;
}

.sidebarImage {
	width:100%;
}

.copyrights{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background-color: #808080b5;
	position:absolute;

}
.buttontop{
	position:absolute;
	width: 60px;
	bottom: 40px;
	right: 80px;
}
/* For mobile */
@media only screen and (max-width: 768px)
{

	.left-col
	{
		width: 100%;
		margin: 0;
	}
	.sidebar
	{
		width: 100%;
		margin: 0;
	}
	.one-thirt-places
	{
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.iconwraper
	{
		width: 100%;
		margin: 0;
	}
	.buttontop
	{
		display: none;
	}
	img
	{
		width: 100%;
	}
}