@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600|Open+Sans+Condensed:300,700&subset=latin,greek);
body {font-family:'Open Sans',Arial,sans-serif; font-size:13px; margin:10px; background: none;}
form {margin:0px;} 
div, table, td, button, p {font-family:'Open Sans',Arial,sans-serif; font-size:14px;}
h1, h2, h3, h4, h5 {font-family: 'Open Sans',Arial,sans-serif;}
h2.home {font-size:16px; color: #cf2121; font-weight:400; margin:20px 0px; padding-bottom:5px; border-bottom:1px solid #ccc; text-transform:uppercase;}
.txt{FONT-WEIGHT: normal; FONT-SIZE: 13px;}
FONT {FONT-SIZE: 13px;}
.SmallText{FONT-SIZE: 11px; COLOR: #222222;}
.LangBar{FONT-SIZE: 13px; COLOR: #ffffff;}
a {COLOR: #333399;TEXT-DECORATION: none;}
a:hover{COLOR: #ff0000;} 
a.Portal{FONT-SIZE: 13px; COLOR: #333399;TEXT-DECORATION: none;}
a.Nav {FONT-SIZE: 13px;COLOR: #333399; TEXT-DECORATION: none;}

/*Top string*/
.top {width:100%; padding:6px 0; background-color:#0d1846; margin:-10px 0 20px -10px; position:fixed; z-index:10;}
.topstring {width:990px; margin:0 auto; font-size:13px; font-weight:normal; color:#ccc;}
/*.topstring img {display:inline-block; position:relative; margin:0; padding:0;}*/
.topstring a {color:#fff;}
.topstring a:hover {color: #ccc;}
.language {overflow:hidden; text-align:center; font-size:120%; background-color:#465F8C; vertical-align:middle;}
.language a {display:block; margin:0 auto; width:22px; height:22px;}
.topstring-part  {display:inline-block; margin:0 5px; vertical-align:middle; padding:5px; }

.gs-title {text-align:left!important;}
.gssb_e {position: fixed; z-index:10;  width:auto!important;}
.gsearch {float:right; padding:0!important; width:180px; height:32px; overflow:hidden; position: relative; top:-1px; right:5px; border:none!important; background-color:#0d1846!important;}
.gsc-input {padding-right:2px!important;}
.gsc-control-cse, .gsc-control-cse-el {padding:0!important; border:none!important; background-color:#0d1846!important;}
input.gsc-search-button, input.gsc-search-button-v2 {background-color: #06F!important; padding: 7px 17px!important;}

.social {margin:0 10px;float:right;padding:5px 0;}
.social-icon, .social-icon-text {display:block;float:left;margin-right:8px;width:18px;opacity: 1.0;}
.social-icon img {vertical-align:middle; display:inline-block; border:none;}
.social-icon:hover {cursor:pointer; opacity: 0.5;filter:alpha(opacity=50);}
.social-icon-text {width:auto; white-space:nowrap;}
.social-icon-text:hover {cursor: auto; opacity: 1.0;filter:alpha(opacity=100);}

.fb {background-position: 0 0;}
.fb:hover {background-position: 0 -36px;}
.twitter {background-position: -288px 0;}
.twitter:hover {background-position: -288px -36px;}
.gplus {background-position: -108px 0;}
.gplus:hover {background-position: -108px -36px;}

/*Header - Menu*/
ul.menu {display:block;margin: 15px 0 20px 0;padding:0;text-indent:0;border-bottom:3px solid #C00; width:100%; overflow:hidden;}
ul.menu li {display:block;padding:5px 0 10px;margin-right:37px;float:left;font-size:16px;letter-spacing:0;list-style-type:none;text-indent:0;}
ul.menu li.selected a {color:#C00; font-weight:700;}
ul.menu a {color:#0d1846; font-weight:400; }
ul.menu a:hover {color:#C00; }
.MainMenu {FONT-WEIGHT: bold; FONT-SIZE: 12px; padding:5px; background-color:#0d1846; color:#FFFFFF; text-align:center;}
a.MainMenu {margin:0px;	padding:5px 17px; color:#FFFFFF; border-right:1px solid #B4B7DC;/*background-color: #E2E6F1;*/}
a.selected {background-color: #C3C3E1;}
a.MainMenu:hover {background-color: #C3C3E1; color:#FFFFFF;}
.sidemenu {background-color: #fff; margin: 0 auto; line-height:18px;}
.sidemenutitle {color: #cf2121; padding:0 0 5px; margin-bottom:20px; font-weight: 400; text-transform: uppercase; font-size: 16px!important; border-bottom:1px solid #ccc;}
.ad {padding:10px; background-color:#336699;}
.SmallWight{FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #ffffff;}
.SmallBlack {FONT-SIZE: 8pt;}
table.accommodationsearch td {text-align:left; vertical-align: middle; white-space:nowrap;}
.SmallGrey {FONT-WEIGHT: bold; FONT-SIZE: 8pt;  COLOR: #c3c3e1;}

/*Main body*/
.main_container {width:100%;}
table.content {display:block; border:none; width:980px; margin:0 auto; position:relative; z-index:2; top:50px; padding:0; background-color: rgba(255, 255, 255, 0.9);}

/* Article view styles*/
.photo {width:150px;float:left;margin-right:5px;border:1px solid #cccccc;}
.photoframe {width:150px;height:150px;float:left;margin-right:10px;margin-bottom:10px;text-align:center;}
h3.article {font-size:17px;color:#333333;margin:0px 0px 15px 0px;padding:0px;}
h4.article {font-size:15px;border-bottom:1px solid #cccccc;}
.releasedate {float:right;margin-left:10px;font-size:70%;font-weight:normal;color:#999999;}
.mainimage {width:100%;height:380px;border:1px solid #cccccc;overflow:hidden;}



/* Photopass */
div.photopass {
	display:block;
	height:110px;	
	text-align:center;
	border:1px solid #ccc;
	margin:5px 0 5px; 
	color:#666; 
	}
div.photopass:hover {
	background-color:#CCC;
	}
div.photopass a {
	display:block;
	margin-top:60px;
	font-size:80%;
	font-weight:bold;
	}

/*Locpage map image*/
div.main_image {width:100%;overflow:hidden;margin:10px 0;}
div.main_image img.main_image {width:100%;}

/*Hotel search results thumbs*/
div.thumb {display:block;width:265px;height:172px;cursor: pointer; float:right; margin: 0 0 5px 15px; background-position:center; background-repeat:no-repeat; overflow:hidden;}
.hotelthumbs {background-size:cover;}
.logothumbs {background-size:contain;}
div.thumb img {display:block; margin:0 auto;}
.friendlyurl {font-size:10px; float:left; padding:6px 0px 5px 0px}
.addtomytrip {font-size:10px;text-align:right;float:right; padding:5px 0px 5px 0px;}

/*Location Details*/
.info-item {display:block;float:left;width:auto;padding:3px 5px;margin:5px 5px 0 0;background-color:#DFDFDF;text-transform:uppercase;font-size:85%;border-radius:3px;}
.info-item:hover, .info-item a:hover {background-color: #666;color:#fff;}
.copyrightholder {text-align:right;margin:-40px 10px 0px;color:#FFF;text-shadow:2px 2px #333;position:relative;}
.copyrightholder a {color:#FFF;}

/*Modals*/
.modal-back {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.6);
	z-index:20;
}
.modal {
	display:block;
	position: relative;
	z-index:21;
	width:60%;
	height:auto;
	overflow: auto;
	top:45px;
	margin: 0 auto;
	padding:60px;
	background-color:#FFFFFF;
	color:rgba(74,46,46,1.00);
	box-shadow:0 0 25px rgba(0,0,0,0.6);
	letter-spacing:-1px;
}
.modal p, .modal button {font-size:16px!important; text-align:center;}
.modal button {border:none; margin:5px 20px; color:#fff;}
.modal button.btn-default:hover, .modal button.btn-inactive:hover {background-color: rgba(104,33,34,1.00); cursor:pointer;}

.modal button.btn  {padding:10px 18px; white-space:nowrap;}
.modal button.btn-default {background-color:#A30002;}
.modal button.btn-inactive {background-color:#4E558B;}
.modal blockquote {margin:0 50px; padding:0;}

div.ferryconnections {
	background-image: url(../images/topWave.png); 
	background-position:center bottom; 
	background-repeat:no-repeat;}
	
img.responsive  {max-width:100%;}
	
/*Animations*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;  
	-webkit-animation:fadeIn ease-in 1; 
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-duration:0.3s;
	-moz-animation-duration:.3s;
	animation-duration:.3s;
}

@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

.fade-out {
	opacity:0;
	-webkit-animation:fadeOut ease-in 1; 
	-moz-animation:fadeOut ease-in 1;
	animation:fadeOut ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-duration:0.3s;
	-moz-animation-duration:.3s;
	animation-duration:.3s;
}