@font-face {
    font-family: 'ThinFont';
    src: url(SF-Compact-Display-Thin.otf) format('opentype');
}


/* Select Language Dropdown ----------- */
.select-language {
	margin:0;
	float:right;
	width: auto;
	height: auto;
}

.select-language dt span.mobile{display:none; visibility:hidden;}

.select-language p{
	font-family: 'Ubuntu-L', Arial;
	text-align:center;
	color: #777D7E;
	font-size: 15px;
	padding: 10px 0 0 0;
	margin: 0 0 0.3rem 0;
}
.select-language ul{
	float:right;
	list-style:none;
	margin:0;
	padding:0;
	z-index:10000;
}
.select-language ul li {
	line-height:30px;
	font-size:12px;
	display: inline-block;
}
.select-language ul li a{
	color: #777D7E;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;	
	display: block;
}

.select-language .flags{
	background: url(../imgs/flags.png);
	background-repeat: no-repeat;
	width: 27px;
	height: 18px;
	padding: 14px 0 0 0;
	text-align: center;
}
	
.select-language .flags.EN{background-position: 0 0;}
.select-language .flags.FR{background-position: -24px 0;}
.select-language .flags.DE{background-position: -48px 0;}
.select-language .flags.IT{background-position: -72px 0;}
.select-language .flags.ES{background-position: -96px 0;}
.select-language .flags.NL{background-position: -120px 0;}
.select-language .flags.TR{background-position: -144px 0;}
.select-language .flags.GR{background-position: -168px 0;}

/* BREADCRUMB------------ */
.breadcrumb{
	background: #b3d0f2 none repeat scroll 0 0;
    color: #4b4b4b;
    font-size: 13px;
    height:30px;
    line-height:30px;
}

.breadcrumb a{text-decoration:none; color:#4b4b4b;}
.breadcrumb a:hover{color:#000;}
.breadcrumb span{color:#4b4b4b;}
.breadcrumb span.sep{padding:0 12px; background:url(../imgs/bullet.gif) no-repeat center; width:6px; height:9px; display:inline-block;}

.breadcrumb .column{
	width:50%;
	float:left;
	height:auto;
	overflow: hidden;
}
	
/************************ Theme styles 2020 ********************/

/*----------------------------------STEPS NAVIGATION*/

.theme-main-color {
	background: #00A3E1;
}

.no-sailing-msg p, p.dates-found {
	padding-left: 12%;
	color: #FF0000 !important;
}
.available-date a {
    background: #fff;
    color: #00a3e1;
    width: 100% !important;
    display: flex;
    justify-content: center;
    height: 40px;
    align-items: center;
    transition: 0.3s ease;
    font-weight: 200;
	box-shadow: 0 3px 6px rgb(198 185 185 / 40%);
	font-weight: 600;
	position: relative;
}

.available-date a:hover {
	background: #f4f4f5;
	color: #0282b4;
}

span.no-sailing-img{
    display: block;
    background: rgba(0, 0, 0, 0) url(../imgs/no-itineraries.png) no-repeat left center;
    height: 42px;
    width: 70px;
    background-size: 70px;
    margin-right: 10px;
}

.disabled span.available-date-img {
    display: block;
    background: rgba(0, 0, 0, 0) url(../imgs/no-itineraries.png) no-repeat left top;
    height: 24px;
    width: 47px;
    background-size: 46px;
    margin-right: 12px;
}

span.available-date-img {
    display: block;
    background: rgba(0, 0, 0, 0) url(../imgs/available-date-icon.png) no-repeat left top;
    height: 18px;
    width: 40px;
    background-size: 40px;
    margin-right: 10px;
}


ul.steps .steptxt{
	display:block;
	width:auto;
	height:40px;
	line-height:13px;
	text-align:center;
	font-size:15px;
	position: relative;
	color:#716f70;
	z-index:999;
    background: transparent linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 40%, #00A3E1 100%) 0% 0% no-repeat padding-box;
	box-shadow:  0 3px 6px rgba(0, 0, 0, 0.4);
	-webkit-boxbox-shadow:  0 3px 6px rgba(0, 0, 0, 0.4);
	-moz-boxbox-shadow:  0 3px 6px rgba(0, 0, 0, 0.4);
	border: 1px solid #00A3E1;
	border-radius: 4px;
	opacity: 1;
}

ul.steps li a{
	display:block;
	width:100%;
	height:auto;
	color:#716f70;
	text-decoration:none;
}

form#submitSearching {
	display: flex;
	margin-bottom: 50px;
	display: flex;
    align-items: flex-end;
}

h1.step1, h1.step1-1, h1.step2, h1.step3, h1.step4, h1.step2-1 {
	background:none;
}

.bonuspermile h1 {
	font-weight: 500;
}

.searchbutton {
    width: 24%;
    float: right;
	overflow: hidden;
	position: relative;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	border-radius: 4px;
	border: 1px solid #00A3E1;
	background: transparent linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 40%, #00A3E1 100%) 0% 0% no-repeat padding-box;
	transition: 0.3s ease;
}

.searchbutton.get-prices {
	width: 30% !important;
	margin-bottom: 20px;
}

#submitPayment .searchbutton {
	margin-bottom: 20px;
}

.searchbutton.w-100 {
    width: 100%;
}
.searchbutton.w-75 {
    width: 75%;
}
.searchbutton:hover {
	background: #00A3E1;
	transition: 0s;
	cursor: pointer;
}
.searchbutton:hover input {
	color: #ffffff;
	background: url(/template/styles/imgs/arrow-white.svg) no-repeat 94% 13px;
	transition: 0s;
}
.searchbutton span {
	background: url(/template/styles/imgs/arrow-white.svg) no-repeat right 7px;
	width:auto;
	height:24px;
	display:block;
	padding:0 20px 0 4px;
	margin:10px 30px 12px;
	border:none;
	color: #ffffff;
}

.searchbutton input {
    background: url(/template/styles/imgs/arrow-white.svg) no-repeat 94% 13px;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    font-family: "Ubuntu-R";
    cursor: pointer;
    border: none;
	height: 40px;
	color: black;
	transition: 0.3s ease;
}

.nextbutton {
	margin: 32px 0;
	background: transparent linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 40%, #00A3E1 100%) 0% 0% no-repeat padding-box;
	width: 24%;
	height: 40px;
	float: right;
	border: 1px solid #00A3E1;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	transition: 0.3s ease;
}

.nextbutton.w-100 {
	width: 100%;
}
.nextbutton input{
	background: transparent url(/template/styles/imgs/arrow-white.svg) no-repeat 94% 13px;
	width: 100%;
	height: 40px;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	font-family: "Ubuntu-R";
	transition: 0.3s ease;
	border-radius: 4px;
}

.nextbutton:hover {
	background: #00A3E1;
	cursor: pointer;
	transition: 0s;
}
.nextbutton:hover input {
	color: #ffffff;
	background: #00A3E1 url(/template/styles/imgs/arrow-white.svg) no-repeat 94% 13px;
	transition: 0.1s ease;
}

#outerpvDivBpm .greyButton {
	background: transparent linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 20%, #AAA9A9 100%) 0% 0% no-repeat padding-box;
    cursor: pointer;
	width: 36%;
    border: 1px solid #AAA9A9;
    border-radius: 4px;
    margin: 32px 0;
    cursor: pointer;
	transition: all 0.3s ease 0s;
	height: 40px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.totalTable .greyButton {
	background: transparent linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 40%, #AAA9A9 100%) 0% 0% no-repeat padding-box;
    cursor: pointer;
	width: 36%;
    border: 1px solid #AAA9A9;
    border-radius: 4px;
    margin: 32px 0;
    cursor: pointer;
	transition: all 0.3s ease 0s;
	height: 40px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}


.greyButton input {
    width: 100%;
    height: 38px;
    border: none;
    border-radius: 3px;
    display: block;
    margin: 0;
    color: #2F1E0A;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Ubuntu-R';
	cursor: pointer;
	background: none;
	transition: 0.1s ease;
}
.greyButton:hover input {
	color: #ffffff;
	transition: 0.1s ease;
	background: #AAA9A9;
}

.addButton span.circle, .removeButton span.circle{
	width: 25px;
	height:25px;
	background: url(../imgs/add-icon.png) no-repeat 0 center;
	display:inline-block;
	font-size:0px;
	margin:0 8px;
}

.removeButton span.circle{
	background: url(../imgs/remove-icon.png) no-repeat 0 center;
	width: 25px!important;
}

.select {
	background-image: url(../imgs/location.png), url(/template/styles/imgs/dropdown-arrows.svg);
}

.select.select-g{
	background-image: url(../imgs/location.png), url(/template/styles/imgs/dropdown-arrows.svg);
}

.select-style.passengers select{
	background-image: url(/template/styles/imgs/pass-icon.svg), url(/template/styles/imgs/dropdown-arrows.svg);
}

.select-style.passengers-g select{
	background-image: url(../imgs/pass-icon-g.png), url(/template/styles/imgs/dropdown-arrows.svg);
}

.select-style.vehicles select{
	background-image: url(/template/styles/imgs/veh-icon.svg), url(/template/styles/imgs/dropdown-arrows.svg);
}

.select-style.vehicles-g select{
	background-image: url(../imgs/veh-icon-g.png), url(/template/styles/imgs/dropdown-arrows.svg);
}

.select-style.trailers select{
	background-image: url(/template/styles/imgs/trel-icon.svg), url(/template/styles/imgs/dropdown-arrows.svg);
}

.select-style.trailers-g select{
	background-image: url(../imgs/trel-icon-g.png), url(/template/styles/imgs/dropdown-arrows.svg);
}

.trippanel .calendar-g {
    background: #ffffff url(../imgs/calendar-lg.png) no-repeat 6px center;
}

.trippanel .calendar {
    background: #ffffff url(../imgs/calendar-lg.png) no-repeat 6px center;
}	

.routeResults .title, .boxResults .title, .passvehAcco .title {
    background: #00A3E1 url(../imgs/ship.jpg) no-repeat 0px center;
}

.routeResults .changeDates {
    background: #fff url(../imgs/calendar-sm.png) no-repeat 8px 7px;
}

#passengersVehiclesTrailerContainerWrapper h1.step1-1 {
	background: url(../imgs/passengers-vehicles-icon.png) no-repeat 10px 20px;
}

.pricesResults .title {
    background: #00A3E1;
	border: none;
}
#step5-1 .pricesResults .title {
	border: 1px solid #00a3e1; 
}
.pricesResults .title .details, .psd2-info-box .psd2-more-info {
	background: #E7E2F8;
	color: #414141;
}	

.routeResults .dates span a::after{
	content: "";
	border-bottom: 2px solid #00A3E1;
	display: block;
	width: 70%;
	margin: 0 auto;
	bottom: 2px;
    position: relative;
}

.routeResults .dates span.selected, .routeResults .dates span:hover, .PricesResultsCont .tablerow.top, .deliveryTable .deltitle, .psd2-info-box .info-icon    {
    background: #00A3E1;
}

.routeResults .dates span.selected::after {
    content: "";
    background: #00A3E1;
    border-bottom: 2px solid #ffffff;
    display: block;
    width: 70%;
    margin: 0 auto;
    bottom: 4px;
    position: relative;
}
.routeResults .row:first-child .column.companyColTitle, .routeResults .row:first-child .column.shipColTitle, .routeResults .row:first-child .column.servicesColTitle, .routeResults .row:first-child .column.dateColTitle, .routeResults .row:first-child .column.selectColTitle, .passtable .row.subtitle, .vehtable .row.subtitle, .pricesResults .pricesTable .boxtitle  {
    background: #FEF5D8;
}
.pricesResults .pricesTable .boxtitle {
	border: 1px solid #c3c2c2;
}
.pricesResults .pricesTable .row .col1 {
	width: 28.70%;
}	
.pricesResults .pricesTable .boxtitle.cost, .PricesResultsCont .totalTable .table .tablerow.title,.paymentTable .boxtitle {
	background: #E7E2F8;
}
.totalTable .table {
	margin-bottom: 30px;
}
.resultsData .table .row.selected {
    border: 1px solid #C1C0C0;
    background: #E3E9E5;
}

.PricesResultsCont .tablerow.title .totalPrice {
	color: #414141;
}
#passengersVehiclesTrailerContainerWrapper .innerbox {
	width: 76%;
	padding: 0;
	margin: 0;
}
#passengersVehiclesTrailerContainerWrapper .btn-wrapper {
	width: 24%;
	padding: 2px;
}

.innerbox-wrapper {
    width: 98%;
    background: #00a3e1;
    min-height: 80px;
    padding: 10px;
    color: #fff;
}

#passengersVehiclesTrailerPanel form {
	display: flex;
    align-items: flex-end;
}

#passengersVehiclesTrailerPanel form .camping {
    width: auto;
}
#passengersVehiclesTrailerPanel .passvehselect {
	width: auto;
    min-width: 12%;
    height: auto;
    float: left;
    margin: 3px 10px 0 0;
}

#passengersVehiclesTrailerPanel .camping label font ._title {
	width: auto;
}

#bonusSlogan p, .bonuspermile .banner .message .column font, .bonuspermile .bonusMembers  {
    color: #00a3e1 !important
}

.bonuspermile .banner .message .column .bonusexpand.collapse {
    background: url(../imgs/show-members-arrow.png) no-repeat right 0;
}
.bonuspermile .banner .message .column .bonusexpand{
	background: url(../imgs/hide-members-arrow.png) no-repeat right 0;
}
			
.bonuspermile .bonusMembers .row .column .date, .bonuspermile .bonusfooter {
	background: #FEF5D8;
}	

#tripdetails .pricesResults .price,.totalroutecost .trcost {
	background: url(../imgs/pricetag.png) no-repeat;
	color: #414141;
	line-height: 32px;
}	

.showdetails {
    cursor: pointer;
    height: 25px;
    width: 25px;
	background: url(../imgs/arrow-down.svg) no-repeat ;
	right: 55px;
}	

.showdetails.expand {
    background: url(../imgs/arrow-up.svg) no-repeat;
}

.routeResults .resultsData .row .column .data input[type="radio"] + label span,.routeResults .ItinerariesCont .resultsData .row .column .data input[type="radio"] + label span, .priceCheck input[type="radio"] + label span{
	background: rgba(0, 0, 0, 0) url(../imgs/radio.png) no-repeat left top;
	cursor: pointer;
	display: inline-block;
	height: 36px;
	margin:0;
	vertical-align: middle;
	width: 36px!important;
}

.routeResults .resultsData .row .column .data input[type="radio"]:checked + label span,.routeResults .ItinerariesCont .resultsData .row .column .data input[type="radio"]:checked + label span, .priceCheck input[type="radio"]:checked + label span{
	background: rgba(0, 0, 0, 0) url(../imgs/radio.png) no-repeat -36px top;
}

.passtable input[type="radio"] + label span, .totalCost input[type="radio"] + label span, .delTickets input[type="radio"] + label span, .paymentTable input[type="radio"] + label span, #vehdeloptions input[type="radio"] + label span, #passdeloptions input[type="radio"] + label span{
	background: rgba(0, 0, 0, 0) url(../imgs/radio.png) no-repeat left top;
	cursor: pointer;
	display: inline-block;
	height: 36px;
	margin: 0;
	vertical-align: middle;
	width: 36px;
	z-index:1000;
	position:relative;
}

.passtable input[type="radio"]:checked + label span, .totalCost input[type="radio"]:checked + label span, .delTickets input[type="radio"]:checked + label span, .paymentTable input[type="radio"]:checked + label span, #vehdeloptions input[type="radio"]:checked + label span, #passdeloptions input[type="radio"]:checked + label span{
	background: rgba(0, 0, 0, 0) url(../imgs/radio.png) no-repeat -36px top;
	z-index:1000;
	position:relative;
}

.paymentTable #ccpanel input[type="radio"] + label span, .paymentTable #ccpanel input[type="radio"]:checked + label span, .paymentTable #bankpanel input[type="radio"] + label span, .paymentTable #bankpanel input[type="radio"]:checked + label span {
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0) url(../imgs/radio.png) no-repeat left top;
    /* float: left; */
    margin: 10px 25px;
}
			
.paymentTable #ccpanel input[type="radio"]:checked + label span, .paymentTable #bankpanel input[type="radio"]:checked + label span {
    background-position: -36px top !important;
    background-position-x: -36px !important;
    background-position-y: top !important;
}

.pricesResults .pricesTable .boxtitle, .bonusTable .boxtitle, .passTable .boxtitle, .vehTable .boxtitle, .paymentTable .boxtitle {
	background: #E7E2F8 !important;
}	

.pricesResults .pricesTable .boxtitle:first-child {
	background: #FEF5D8 !important;
}

.deltitle font, .boxtitle font {
	padding: 0 10px;
}

/* Suggestions Styles */
.suggestion-header, .trip-suggestion-header {
	background: #fbfeff;
}
.trip-suggestion-header .logo-tag img {
	border: 1px solid #d0ebf5;
}	

.trip-suggestion-header span.show-more-icon {
	background: url(../imgs/theme-arrow-down.svg) no-repeat center center;
}	

.trip-suggestion-header.expand span.show-more-icon {
	background: url(../imgs/theme-arrow-up.svg) no-repeat center center;
}

.trip-suggestion {
    border: 1px solid #00a3e1;
}
.trip-suggestion-body {
    padding: 15px 10px 10px;
    border-top: 1px solid #00a3e1;
}
.noPricing .suggestion-description {
    border: 2px solid #00a3e1;
}
.back-to-search a,.suggestions-title {
    color: #0082b6;
}
.blue-line {
    background-color: #00a3e1;
}
.trip-suggestion-header .header-trip-price {
    background: #00a3e1;
    border: 1px solid #00a3e1;
    color: #ffffff;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    line-height: 20px;
}
span.suggestion-arrow {
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #00a3e1;
    width: 0;
    height: 0;
    position: relative;
    left: -12px;
}
span.suggestion-index.mr-10 {
    position: relative;
    left: -38px;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

.trip-suggestion-details {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
    color: #0082b6;
    font-weight: 700;
}
/* Suggestions Styles end*/


@media (max-width: 991.98px) {

	#passengersVehiclesTrailerContainerWrapper .innerbox {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	#passengersVehiclesTrailerContainerWrapper .btn-wrapper {
		width: 50%;
		padding: 2px;
	}

	.innerbox-wrapper {
		width: 100%;
		background: #00a3e1;
		min-height: 80px;
		padding: 10px;
		color: #fff;
		display: grid;
	}

	#passengersVehiclesTrailerPanel form {
		display: flex;
		align-items: flex-end;
		flex-direction: column;
	}
	#passengersVehiclesTrailerPanel form .camping {
		width: auto;
	}

	#passengersVehiclesTrailerPanel .camping label font ._title {
		width: auto;
	}

	#passengersVehiclesTrailerPanel .btn-wrapper{
		margin-top: 20px;
	}
	#passengersVehiclesTrailerPanel .camping {
		height: auto;
	}
	.searchbutton {
		width: 50%;
	}
	.searchbutton.get-prices {
		width: 50% !important;
		margin-bottom: 20px;
	}
	.pricesResults .pricesTable .boxtitle, .bonusTable .boxtitle, .passTable .boxtitle, .vehTable .boxtitle, .paymentTable .boxtitle {
		background: #E7E2F8 !important;
	}	

}
@media (max-width: 767.98px) { 
	.pricesResults .pricesTable .boxtitle, .bonusTable .boxtitle, .passTable .boxtitle, .vehTable .boxtitle, .paymentTable .boxtitle {
		background: #E7E2F8 !important;
	}	
	.passTable .passenger .row.passvehtitle.mobile, .vehTable .vehicle .row.passvehtitle.mobile, .bonusTable .bonuspasstitle {
		background: #E7E2F8 !important;
	}
	.nextbutton {
		width: 36%;
	}
	#outerpvDivBpm .greyButton, #outerpvDivBpm .nextbutton {
		width: 100%;
		margin: 1% 0;
	}
	.buttons {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.handwritten {
		font-family: 'Handwritten', 'Ubuntu-L';
		font-size: 20px;
	}
	.nextbutton {
		width: 100%;
	}
	.passenger .row .contpersoninner, .passTable .passenger .row, .vehTable .vehicle .row, .tableCourrier .row {
		display: flex;
		flex-direction: column;
	}
	.passenger .row.contpersoninner .column, 
	.passTable .passenger .row .column, .passTable .passenger .row .column:first-child, 
	.vehTable .vehicle .row .column, .passTable .passenger .row.contpersoninner .column, .tableCourrier .row .column,
	.delTickets .column .row .column,
	.delTickets .column:first-child {
		width: 100% !important;
	}
	.passTable .passenger input#cpSurname, .passTable .passenger input#cpName,
	.passTable .select-style,.passTable .passenger input, .phonegroup,
	.vehTable .vehicle .select-style, .vehTable .vehicle input, .tableCourrier input, .tableCourrier .select-style  {
		width: 98%;
	}
	.tableCourrier .phonegroup input#delMobile {
		width: 64% !important;
		padding: 0 10px !important;
	}
	.tableCourrier .select-style {
		margin: 0;
	}
	#cpMobile {
		padding: 0 10px !important;
	}
	#cpMobileCode_value {
		width: 27% !important;
	}
	.phonegroup select {
	background: url(../imgs/arrow-d-sg.png) no-repeat 10px 14px !important;
	}
	.passTable .passenger .row.contpersoninner .column:first-child, .passTable .passenger .row.contpersoninner .column  {
		width: 100% !important;
	}
	.passenger .row.contpersoninner .column, .passTable .passenger .row.contpersoninner .column:last-child {
		width: 100% !important;
	}
	.passTable .passenger input.xsmall {
		width: 27%;
	}
	.delTickets .column {
		padding: 0;
	}
	.paymentTable #ccpanel input[type="radio"] + label span {
		margin: 10px 15px;
	}
	input#delMobileCode_value {
		left: 1px;
	}
	.psd2-info .column:nth-child(2) p {
		margin: 10px 0 10px 0;
		font-size: 12px;
	}
	.tableCourrier .phonegroup {
		left: -6px;
	}
	.routeResults .title, .boxResults .title, .passvehAcco .title {
		background: #00a3e1 !important;
	}
	.routeResults .innerlabel {
		color: #ffffff;
		background: #00a3e1;
	}
	.passtable .passvehtitle.mobile, .vehtable .passvehtitle.mobile {
		background: #00a3e1;
	}

}

@media (max-width: 479.98px) { 
	.tableCourrier .phonegroup {
		left: 0px;
	}
}

/************************ Theme styles 2020  End********************/









	


	
/*-------------------------------------- STEP 1*/	

/* CONTENT------------ */
.site-container {
    background: url(../imgs/main-banner-new.jpg) no-repeat;
    width: 100%;
    height: 80%;
    max-height: 850px;
    position: fixed;
    top: 0;
    z-index: -1;
    background-size: cover;
}
/* .site-container {
    background: url(../imgs/main-banner-new.jpg);
    width: 100%;
	height: 810px;
	position: fixed;
	top: 0;
	z-index: -1;
} */
/* .mainbanner{
	background-image:url(../imgs/main-banner-new.jpg);
	background-repeat:no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	background-position:center;
	height:690px;
} */
.mainbanner .header{
	width:100%;
	height: 100px;
	background:#fff;
}


.mainbanner .logo{
	background:url(../imgs/greekferries-logo.png) no-repeat 0 25px;
	width:100%;
	height: 80px;
	text-align: left;
}

.mainbanner .logo .tag{
	color: #6D6E71;
	font-size: 11px;
	padding: 60px 0 0 98px;
	display: block;
  }

.contenttop.confirmation{
	min-height: 430px;
	position:relative;
}
 
/* .wrapper.contentform .contenttop.emailconf{
	border:8px solid #decebd;
} */

	.contenttop.emailconf .buttons{
		text-align:right;
		width:780px;
		height:auto;
		overflow:hidden;
		clear:both;
		margin:0 auto;
	}
	
	.contenttop.emailconf .buttons .PrintBtn{
		width:auto;
		height:36px;
		line-height:36px;
		padding:0 20px;
		background:#03b7f2;
		color:#fff;
		text-decoration:none;
		display:inline-block;
		text-transform: uppercase;
		transition: all 0.3s ease 0s;
	}
	
	.contenttop.emailconf .buttons .PrintBtn:hover{
		background:#0198ca;
	}

	.contenttop.confirmation .reserveinfo{
		width:auto;
		height:36px;
		line-height:36px;
		color:#fff;
		text-transform:uppercase;
		padding:0 20px;
		text-align:center;
		float:right;
		margin-top:16px;
		/*position:absolute;
		right:16px;*/
		bottom:16px;
		cursor:pointer;
		transition: all 0.3s ease 0s;
		background:#7db921;
	}
	
.contenttop.confirmation .reserveinfo:hover{
	background:#72aa1d;
}

.contenttop.confirmation .reserveinfo span{
	background:url(../imgs/collapse.png) no-repeat;
	width:13px;
	height:13px;
	display:inline-block;
	margin: 0 0 0 4px;
}

.contenttop.confirmation .reserveinfo span.expand{
	background:url(../imgs/expand.png) no-repeat;
}

			
.clear{
	clear:both;
	width:100%;
	height:1px;
}

/* FOOTER------------ */
/* .footer{
	width:100%;
	height:auto;
	overflow:hidden;
	margin:155px auto 0 auto;
} */
	
	.footer .blueline{
		/*background:#2d3e52;*/
		width:100%;
		height:20px;
	}
	
	.footer .bluegreyline{
		/*background:#2d3e52;*/
		width:100%;
		height:3px;
		margin:5px 0 0 0;
	}
	
	.footer .bluegreyline.bottom{
	margin:0 0 5px 0;
	}
	
	.footer .wrapper{
		padding:32px 0 20px;
		overflow:hidden;
	}
	
	.footer .phone{
		width:240px;
		height:auto;
		overflow:hidden;
		background: url(../imgs/phone.png) no-repeat 14px 7px;
		text-align:center;
		display:inline-block;
		padding:0 0 0 20px;
		vertical-align:top;
		margin: 0 0 0 10px;
	}
	
.footer .phone span{
	display:block;
	color:#1d1d1f;
	font-size:22px;
	font-weight:bold;
	margin:0 0 10px 0;
}

.footer .phone span font{
	display:block;
	color:#777;
	font-size:11px;
	font-weight:normal;
	font-style:italic;
	margin:0 20px 10px;
}

.footer .creditcardsbox{
	width:96%;
	height:60px;
	overflow:hidden;
	background:#679fde;
	border:1px solid #428adc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding:0;
	text-align:center;
	display:table;
	margin:0 0 0 4%;
}

.footer .creditcardsbox span{
	display:table-cell;
	width:16.6%;
	/* background-size:68px 41px!important; */
	vertical-align:middle;
}
	
	.footer .creditcardsbox span.visa{background:url(../imgs/visa.png) no-repeat center center;}
	.footer .creditcardsbox span.visadebit{background:url(../imgs/visa-debit.png) no-repeat center center;}
	.footer .creditcardsbox span.mastercard{background:url(../imgs/mastercard.png) no-repeat center center;}
	.footer .creditcardsbox span.maestro{background:url(../imgs/maestro.png) no-repeat center center;}
	.footer .creditcardsbox span.amex{background:url(../imgs/americanexpress.png) no-repeat center center;}
	.footer .creditcardsbox span.diners{background:url(../imgs/diners.png) no-repeat center center;}
		
.footer .securebox{
	width:96%;
	height:60px;
	overflow:hidden;
	background:#679fde url(../imgs/secure-transactions.png) no-repeat 8px center;
	border:1px solid #428adc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding:0;
	text-align:center;
	margin: 0 4% 0 0;
}

.footer .securebox .secureicons{
	width:75%;
	float:right;
	border-left:1px solid #428adc;
	display:table;
}

.footer .securebox span{ display:table-cell; width:22.5%; height:60px; vertical-align:middle; text-align:center;}
.footer .securebox .pci{background:url(../imgs/pci-logo.png) no-repeat center center;}

.footer .center{
	width:100%;
	height:auto;
	overflow:hidden;
	text-align:center;
	margin: 30px auto 0;
	vertical-align:top;
}

.footer .logowrapper{
	height:auto;
	overflow:hidden;
	width:auto;
	display:inline-block;
}

.footer .split{
	width:50%;
	height:auto;
	overflow:hidden;
	float:left;
}

.footer  .logo img{
	height: 30px;
	margin: 0 0 4px;
	width: 261px;
}

/* .footer  .copyright{
	font-size:13px;
	color:#777;
} */

.footer  .forthcrs{
	background:url(../imgs/forth-crs-logo.png) no-repeat right 0;
	width:100%;
	height:55px;
	margin:40px 0 4px 0;
	font-size:11px;
	color:#2d3e52;
	text-align:right;
	padding:22px 75px 0 0;
}

	
/* Loader Styles */
.custom-overlay {
	background-color: rgba(0,0,0,0.3) !important;
}
.custom-overlay .loading {
	font-family: 'ThinFont' !important;
	background: #fff url(../../../../../../../modules/ferries/template/styles/imgs/arrow-loader-bg.gif) no-repeat center 120px;
	width: 420px;
	height: 320px;
	text-align: center; 
	position: fixed; 
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden; 
	z-index: 99999;
}
.gfc-logo-wrapper {
	position: relative;
    top: 40%;
    font-size: 20px;
	text-align: center;
	left: 0;
	color: #b5bcc7;
}
.gfc-logo-wrapper small {
	font-size: 32px !important;
}

.gfc-logo-span {
	margin-top: 20px
}
.loader-logo {
	width: 230px;
	margin-bottom: -3px;
}
.custom-overlay .loading h2 {
	font-family: ThinFont !important;
    margin-top: 30px;
    font-size: 28px;
	font-weight: 300;
	color: #6d6e70;
	padding: 0;
}

.custom-overlay .loading p span{
	display:block; 
	font-size:13px; 
	color: #008fd4;
	text-transform: uppercase;
	padding: 4px 0 0 0;
}  
.custom-overlay .loading p {
	color: #ed1c24;
	font-size: 20px;
	padding: 0;
	position: absolute;
	bottom: 20px;
	right: 40px;
}
.progressdiv img {
	max-width: 160px;
}
@media only screen and (max-width: 539.98px) {	
	.custom-overlay .loading {
		width: 90%;
	}		
	.custom-overlay .loading h2 {
		margin-top: 20px;
		font-size: 24px;
	}	
}
		

/* Tablet--------------------------------------------------------------------------------- */
@media only screen and (min-width: 481px) and (max-width: 768px) {	
	ul.steps .arrow{
		background:none;
	}
	.mainbanner .header .column{
		width: 20%;
	}
	.mainbanner .header .column:first-child{
		width: 80%;
	}
	.breadcrumb{
		background:#b3d0f2;
		border:none;
		height: auto;
	}
	
	.breadcrumb .column:first-child{
		background:#ffffff;
	}
	
	.breadcrumb .column{
		width:100%;
		float:none;
		text-align: center;
	}
	.select-language{
		margin: 30px 5px 0 0;
		cursor: pointer;
	}	
	.select-language p{
		display: none;
	}
	.select-language dt span.mobile{
		display: block;
    	visibility: visible;
	}	
	.select-language dt span.desktop {
		display: none;
		visibility: hidden;
	}
	.select-language dt {
		background: #7bafde;
		border: none;
		color: #ffffff;
		font-size: 14px;
		text-transform: uppercase;
		height: 33px;
		margin: 7px 0 0;
		padding: 7px 0 0 0;
		text-align: center;
		width: 40px;
	}
	.select-language ul {
		display: none;
		background: #7bafde;
		height: auto;
		margin: 40px 5px 0 0;
		padding: 5px 0;
		position: absolute;
		right: 0;
		width: 75px;
		min-height: none;
		max-height: none !important;
	}	
	.select-language ul li {
		display: block;
		font-size: 14px;
		line-height: 43px;
		padding: 5px 10px;
		text-align: left;
		transition: all 0.3s ease-in-out 0s;
		width: auto;
		position: relative;
	}
	.select-language ul li a span{
		position: absolute;
		left: 46px;
		top: -8px;
		font-size: 14px;
		color: #fff;
	}
	.mainbanner .logo{
		margin:0;
		max-width: 100%;
	}
	
	/* .footer .contactbox{
		background-position:center 12px;
		padding: 42px 8px;
	}
	
	.footer .contactbox span{
		font-size: 14px;
	}
	
	.footer .right{
		width: 68%;
	}
	
	.footer .split{
		float: none;
		margin: 0 5% 15px;
		width:90%;
	}
	
	.footer .creditcardsbox .cards{
		padding: 5px 0 0 17px;
    	width: 80%!important;
	}
	
	.footer .creditcardsbox .cards span, .footer .creditcardsbox .cards span:last-child {
		display:block!important;
		margin: 4px 0 0!important;
		width: 30%;
		height:31px;
		float:left;
	}
	
	.footer .securebox, .footer .creditcardsbox{
		width: 100%;
		margin:0;
	}
	

	.footer .securebox .secureicons{
		width: 69%;
	}
	
	.footer .securebox .mcafee{
		background-size:87px 40px;
	}
	
	.footer .securebox .comodo{
		background-size:60px 40px;
	}
	
	.footer .securebox .pci{
		background-size:65px 40px;
	}
	
	.footer .creditcardsbox .cards{
		padding: 0 0 0 7px;
    	width: 70%;
	}
	
	.footer .creditcardsbox .cards span{
		margin: 29px 5px 29px 0;
	}
	
	.footer .center{
		margin: 10px auto 0;
	}
	
	.footer .logowrapper{
		width:100%;
		margin: 0 0 20px;
	}
	
	.footer .phone{
		width:50%;
		margin:0;
		box-sizing:border-box;
	} */
	
	
}

/* Tablet Landscape--------------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 964px) {
	ul.steps .arrow{
		background:none;
	}
	
	.breadcrumb .wrapper, .site-header .wrapper{
		padding:0 10px;
	}
	
	.footer .contactbox{
		background-position:10px 42px;
		padding: 36px 12px;
	}
	
	.footer .contactbox span{
		font-size: 19px;
	}
	
	.footer .right{
		width: 68%;
	}
	
	.footer .creditcardsbox{
		background-position:10px center;
	}
	
	.footer .creditcardsbox span{
		background-size:50px 30px!important;
	}
	
	.footer .securebox .secureicons{
		width: 69%;
	}
	
	.footer .securebox .mcafee{
		background-size:87px 40px;
	}
	
	.footer .securebox .comodo{
		background-size:60px 40px;
	}
	
	.footer .securebox .pci{
		background-size:65px 40px;
	}
	
	.footer .creditcardsbox .cards{
		padding: 0 0 0 7px;
    	width: 70%;
	}
	
	.footer .creditcardsbox .cards span{
		margin: 29px 5px 29px 0;
	}
	
	.footer .logowrapper{
		width:33%;
	}
	
	.footer .phone{
		width:33%;
		margin:0;
		box-sizing:border-box;
	}
	
	.footer .logo img{
		width:80%;
		height:auto;
	}
}

/* Mobile--------------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
	ul.steps .arrow{
		background:none;
	}
	ul.steps .steptxt {
		margin: 0;
		height: 59px;
	}
	
	h1.step1, h1.step1-1, h1.step2, h1.step3, h1.step4{
		background:none;
	}
	
	h2 div.trip, h2 div.taveler, h2 div.vehicle, h2 div.contactper, h2 div.voucher, h2 div.payment{
		background:none;
	}
	.mainbanner .header{
		height: 84px;
	}
	.mainbanner .header .column{
		width: 20%;
	}
	.mainbanner .header .column:first-child{
		width: 80%;
	}
	.mainbanner .logo{
		background-size: 220px auto;
	}
	.mainbanner .logo .tag{
		padding: 50px 0 0 66px;
	}
	.breadcrumb{
		background:#b3d0f2;
		border:none;
		height: auto;
	}
	
	.breadcrumb .column:first-child{
		background:#ffffff;
		line-height: 16px;
		padding: 8px 0;
	}
	
	.breadcrumb .column{
		width:100%;
		float:none;
		text-align: center;
	}
	.select-language{
		margin: 22px 0 0;
		cursor: pointer;
	}	
	.select-language p{
		display: none;
	}
	.select-language dt span.mobile{
		display: block;
    	visibility: visible;
	}	
	.select-language dt span.desktop {
		display: none;
		visibility: hidden;
	}	
	.select-language dt {
		background: #7bafde;
		border: none;
		color: #ffffff;
		font-size: 14px;
		text-transform: uppercase;
		height: 33px;
		margin: 7px 5px 0 0;
		padding: 7px 0 0 0;
		text-align: center;
		width: 40px;
	}
	.select-language ul {
		display: none;
		background: #7bafde;
		height: auto;
		margin: 31px 5px 0 0;
		padding: 5px 0;
		position: absolute;
		right: 0;
		width: 75px;
		min-height: none;
		max-height: none !important;
	}
	.select-language ul li {
		display: block;
		font-size: 14px;
		line-height: 43px;
		padding: 5px 10px;
		text-align: left;
		transition: all 0.3s ease-in-out 0s;
		width: auto;
		position: relative;
	}
	.select-language ul li a span{
		position: absolute;
		left: 46px;
		top: -8px;
		font-size: 14px;
		color: #fff;
	}
	.mainbanner .wrapper{
		text-align:center;
	}
	
	.mainbanner .wrapper img{
		width:220px;
		height:auto;
	}
	
	.routeResults .dates span{
		line-height:15px;
	}
	
	.routeResults .dates span.selected{
		line-height:15px;
	}
	
	.footer{
		padding: 15px 0;
	}
	
	.footer .left{
		width:90%;
		margin:0 5%;
	}
	
	.footer .right{
		width:90%;
		margin:15px 5% 0;
	}
	
	.footer .contactbox{
		padding: 20px;
		background-position:10px 26px;
	}
	
	.footer .creditcardsbox .cards{
		padding: 5px 0 0 17px;
    	width: 80%;
	}
	
	.footer .creditcardsbox .cards span, .footer .creditcardsbox .cards span:last-child{
		margin: 4px 0 0;
		width: 30%;
		height:31px;
	}
	
	.footer .wrapper{
		padding:0;
	}
	
	.footer .split{
		float: none;
		margin: 0 2.5% 15px;
		width:95%;
	}
	
	.footer .securebox, .footer .creditcardsbox{
		width: 100%;
		margin:0;
		background-size: 23% auto;
	}
	
	.footer .creditcardsbox span{
		background-size:40px 27px!important;
	}
	
	.footer .securebox .secureicons{
		width: 69%;
	}
	
	.footer .securebox .mcafee{
		background-size:67px 36px;
	}
	
	.footer .securebox .comodo{
		background-size:52px 36px;
	}
	
	.footer .securebox .pci{
		background-size:50px 36px;
	}
	
	.footer .creditcardsbox .cards{
		padding: 0 0 0 7px;
    	width: 70%;
	}
	
	.footer .creditcardsbox .cards span{
		margin: 29px 5px 29px 0;
	}
	
	.footer .center{
		margin: 10px auto 0;
	}
	
	.footer .logowrapper{
		width:100%;
		margin: 0 0 20px;
		padding:0 20px;
	}
	
	.footer .phone{
		width:80%;
		margin:0 0 15px;
		box-sizing:border-box;
	}
	
	.footer .logo img{
		width:80%;
		height:auto;
	}

	
}