@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Comfortaa:400,700&subset=greek,latin);
/*
orange color: f17e3b
blue color: 408cff
*/


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {font-size: 60%; }
body {font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;  color: #222;  position:relative;}
p, li{color:#4A4A4A;}
.container {position: relative;  width: 98%;  max-width: 1200px;  margin: 0 auto;  padding: 0;  box-sizing: border-box; }
.leftSidebar {margin-top:5rem;}
.column, .columns { margin-left: 0; }
.column,.columns {  width: 100%;  float: left;  box-sizing: border-box; }
@media (min-width: 768px) {
  .container { width: 96%; }
  .column, .columns { margin-left: 4%; }
  .column:first-child,  .columns:first-child { margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }
  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }
  .one-half.column                { width: 48%; }

} 

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {  margin-top: 0;  margin-bottom: 2rem;  font-weight: normal;}
h1 { font-family: 'Comfortaa', cursive;}
h1 { color:#408cff; font-size:2.6rem; margin-top:2rem; }
h2 { color:#999; font-size:1.8rem;}
h3 { color:#408cff; font-size:1.8rem;}
h4 { font-size: 1.4rem; margin-bottom:0 }
h5 { font-size: 1rem;}
h6 { font-size: 1rem;}

/* Larger than phablet */
@media (min-width: 768px) {
h1 { font-size: 3.0rem; font-size:3rem;}
h2 { font-size: 2.2rem; font-size:2rem;}
h3 { font-size: 2.6rem; font-size:1.8rem;}
h4 { font-size: 2.0rem; }
h5 { font-size: 1.4rem; }
h6 { font-size: 1.0rem; }
}
@media (min-width: 1000px) {
h1 {font-size:4rem;}
h2 {font-size:2.5rem;}
h3 {font-size:2rem;}
}

p { margin-top: 0; }
.underline {text-decoration:underline !important;}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #408cff; text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus { outline: none; }
a.linkButton, a.externalLinkButton {display:; border-bottom:1px solid #f17e3b; color:#408cff; background:url(../images/icons/link.png) right 5px no-repeat; padding:5px 30px 5px 5px; text-decoration:none; margin:0 1rem; line-height:4rem;}
a:hover.linkButton, a:hover.externalLinkButton{color: #f17e3b; border:none;}
a.externalLinkButton {background:url(../images/icons/link-ext.png) right 5px no-repeat;}
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.full-width { width: 100%;  box-sizing: border-box; }
.max-full-width { max-width: 100%;  box-sizing: border-box; }
.float-right { float: right; }
.float-left { float: left; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }

/*--------------languages---------------------*/
#languages {float:left; width:100px; min-height:150px;}
#languages img {cursor:pointer;}
#lang_menu{background-color:#fff;display:none; font-size:1.2rem;}
#lang_menu ul {list-style:none; padding:0;}
#lang_menu ul li {list-style:none; padding:.5rem 0;}
#lang_menu ul li a{color:#408cff;}

/* --------------- ads ----------------------*/
/* mobile */
.random1 .diaf .diaf_bg {background-color:#F9F9F9; width:96%; margin-bottom:4px; padding:1rem 2% 0 2% !important; border:1px solid #ccc; display:inline-block; box-sizing: content-box !important;}
.random2 .diaf .diaf_bg {background-color:#fff; width:96%; margin-bottom:4px; padding:1rem 2% 0 2% !important; border:1px solid #f17e3b; display:inline-block; box-sizing: content-box !important;}
.random3 .diaf .diaf_bg {background-color:#fff; width:96%; margin-bottom:4px; padding:1rem 2% 0 2% !important; border:1px solid #408cff; display:inline-block; box-sizing: content-box !important;}
.random4 .diaf .diaf_bg {background-color:#fff; width:96%; margin-bottom:4px; padding:1rem 2% 0 2% !important; border:1px dotted #f17e3b; display:inline-block; box-sizing: content-box !important;}
.diaf .price { float:left; margin-bottom:2px;}
.diaf .compare {float:right;}
.diaf .left {width: 49%; float:left; margin-right:1%;}
.diaf .right {width: 49%; float:right; margin-left:1%;}
.diaf .diafimage img {width:100%; height:auto;}
.diaf h2 {margin:-5px 0 0 0 !important; padding:0 !important; font-size:2rem; display:inline-block; width:100%;}
.diaf p.address {font-size:1.4rem; color:#408cff; font-weight:normal;}
.diaf p {font-size:1.2rem; margin:0; padding:0;}
.diaf a {text-decoration:none;}
.diaf-bottom {border-top:1px #ccc dotted; margin-top:0.6rem; padding-top:0.6rem; display:inline-block; width:100%;}
.diaf-bottom img{width:auto !important;}
.diaf .email, .diaf .telephone, .diaf .map, .diaf .booking {float:left; margin-left:10px;}
.diaf .website {text-align:right; float:right;}
.diaf .website img {max-width:70px; height:auto;}
.diaf .expand {background-color:#F7F7F7 !important; width:98%; padding:0 0 0 2%; display:inline-block; text-align:right; border:1px solid #ccc; margin-bottom:4px; box-sizing: content-box !important;}
.diaf .expand h2 {float:left !important; width:auto; font-size:2rem;}
.diaf .expand .price {float:right;}
.diaf .expand.hotels h2{position:relative; top:0.2rem;}
.diaf .expand.hotels img{width:auto;}
.diaf .expand img, .diaf .expand a img {padding:0.5rem 0.5rem 0 0.5rem; width:auto; text-align:right; float:none;}
.diaf .hidesmall {display:none;}
.diaf .hidelarge {display:block;}
.diaf h2.closed{font-size:1.8rem !important;top:5px !important; position:relative;}
/* phablet */
@media (min-width: 400px) {
.diaf .left {width: 39%;}
.diaf .right {width: 59%;}
.diaf-bottom {display:inline-block; width: 59%;}
.diaf .email, .diaf .telephone, .diaf .map, .diaf .booking {margin-left:3px;}
.diaf .email img, .diaf .telephone img, .diaf .map img, .diaf .booking img, .diaf .website img,{width:80%;}
.diaf .price { float:right; margin-right:1rem;}
.diaf h2 {display:inline; top:-10px; position:relative;}
}
/* phablet big */
@media (min-width: 530px) {
.diaf .left {width: 36%;}
.diaf .right, .diaf-bottom, .diaf .months{width: 62%;}
.diaf-bottom, .diaf .months {display:inline-block; float:right;}
.diaf .email, .diaf .telephone, .diaf .map, .diaf .booking {margin-left:15px;}
.diaf .email img, .diaf .telephone img, .diaf .map img, .diaf .booking img, .diaf .website img{width:auto;}
.diaf p.address {font-size:1.8rem;}
.diaf p {font-size:1.4rem;}
.diaf .months {border-top:1px #ccc dotted; padding-bottom:3px;}
.diaf .months ul {text-align:right; padding:0; margin:0;}
.diaf .months ul li{ display:inline-block; text-align:center; width:12%; margin-right:0.25rem; margin-top:0.5rem; font-size:1.2rem; padding:0; line-height:2rem; font-weight:bold; background-color:#d9dada; color:#fff;}
.diaf .months ul li.open{background-color:#408cff;}
.diaf .months ul li.operates{background-color:transparent; color:#4A4A4A; width:20%; font-size:1.5rem; font-weight:normal;}
}
/* tablet */
@media (min-width: 768px) {
.diaf h2.closed{top:0 !important;}
.diaf .left {width: 34%; display:inline-block; clear:left;}
.diaf .right, .diaf-bottom, .diaf .months {width: 64%; display:inline-block; clear:right;}
.diaf .hidesmall {display:block;}
.diaf .hidelarge {display:none;}
.diaf h2 {float:left; width:auto; display:inline; top: -5px; position:relative;}
.diaf .email, .diaf .telephone, .diaf .map, .diaf .booking {margin-left:20px;}
.diaf .telephone p {font-size:1.6rem; color:#408cff; margin-top:0 !important;}
.diaf .months ul li{ font-size:1.4rem;}
.diaf h2 {margin:0 !important;}
}
/* desctop */
@media (min-width: 1000px) {
.diaf .left {width: 24%; display:inline-block; clear:left;}
.diaf .right, .diaf-bottom, .diaf .months {width: 74%; display:inline-block; clear:right;}
}
@media (min-width: 1200px) {
}
@media (min-width: 1400px) {
}

/*------------------sidebar ads ---------------------*/
.sidebar_diaf {text-align:center; border:none; padding:.5rem;}
.sidebar_diaf_1 {text-align:center; border:1px solid #ccc; margin-bottom:.5rem; padding-bottom:0.5rem; width:100%; float:none; display:inline-block; margin-bottom:1rem;}
.sidebar_diaf_1 img {width:50%; height:auto; margin-right:2%; float:left;}
.sidebar_diaf_1 .title a{ background-color:#F3F3F3; display:block; padding:.5rem; color:#f17e3b;}
.sidebar_diaf_1 .content{padding:.5rem;}
@media (min-width: 400px) {
.sidebar_diaf_1 {width:48%; margin:1%; float:left; box-sizing: border-box;}
}
@media (min-width: 768px) {
.sidebar_diaf {border:1px dotted #408cff;}
.sidebar_diaf_1 {width:100%; float:none; margin:0 0 1rem 0}
.sidebar_diaf_1 img {width:100%; height:auto;}
}


/* ---------------- Article -----------------*/
.article .row {margin-top:3rem !important;}
.article .row.hide-toggle {margin-top:0 !important; display:inline-block;}
.article .row h2 {margin:0;}
.page-content .row img {width:100%; height:auto;}
.hidden {display:none;}
.bg {width:100%; padding:2%  0 !important;}
.bg.orange {background-color:#f17e3b; color:#fff;}
.bg.green {background-color:#408cff; color:#fff;}
.article img {margin-bottom:1rem;}
table caption { background-color:#f17e3b; color:#fff; padding: 1rem 0; font-size:1.7rem;}
table tr td img { width:auto !important; height:auto;}
table.basic { width:100%; text-align:center; border:1px solid #f17e3b; margin-bottom:1rem;}
table.basic th{ color:#408cff; font-weight:bold; padding:1rem 0;}
table.basic tr td{padding:5px;}
table.basic th[scope=col] {padding:10px 5px; background-color:#f17e3b; color:#fff;}
table.basic tr:nth-child(even) {background: #F4F4F4;}
ul.recipes li {list-style:outside url(../images/icons/recipes.png);}
ul.arrow li {list-style:outside url(../images/icons/arrow_11x11.png);}
.villagesLinks {padding-top:3rem; margin-top:3rem;}
.villagesLinks ul { margin:0; padding:0;}
.villagesLinks ul li {list-style: none; background-color:#fafafa; margin:0.3rem 0; padding:0.3rem 0; text-align:center; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; transition: 0.3s all;}
.villagesLinks ul li a {display:block; text-decoration:none; color:#408cff; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; transition: 0.3s all;}
.villagesLinks ul li:hover {background-color:#408cff;-webkit-transition: 0.3s all; -moz-transition: 0.3s all; transition: 0.3s all;}
.villagesLinks ul li:hover a {text-decoration:none; color:#ffffff; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; transition: 0.3s all;}
.border{border:1px solid #e1e1e1; padding:1rem;}
.leftSidebar hr {margin:3rem 0 !important;}
.leftSidebar h3 { text-align:center;}
.sidebar-map {margin-top:3rem; display:block; }
.sidebar-map img {display:none; }
.sidebar-map h3 a {text-decoration:none; display:block; border:1px solid #ccc; padding:1rem 0;background:url(../images/diaf-icons/map.png) center 10px no-repeat; padding-top:40px; background-color:#f6f6f6;}
.monthFilter {display: inline-block; float:none;}
.monthFilter h3{text-align:center;}
.monthFilter .month {width:23%; margin:1%; background-color:#408cff; cursor:pointer; text-align:center; float:left;color:#fff; text-decoration:none; font-size:1.4rem;}
.monthFilter .month.fullLine {width:98%; margin:1%; background-color:#DFDFDF; color:#408cff;}
.clicked {background-color:#F07E3B !important; color:#fff !important;}
.workingMonths h3{text-align:center; margin-top:1rem;}
.workingMonths .month {width:23%; margin:1%; background-color:#408cff; text-align:center; float:left;color:#fff; text-decoration:none; font-size:1.4rem;}
.workingMonths .month.fullLine {width:98%; margin:1%; background-color:#DFDFDF; color:#408cff;}
.workingMonths .clicked, workingMonths .open {background-color:#F07E3B !important; color:#fff !important;}
.advertise h3 {font-size:1.5rem; margin-bottom:0;}
.advertise p a {font-size:1.5rem; text-decoration:none; color:#999999;display:block; padding:1rem;}
.advertise p a:hover { background-color:#ccc; color:#fff;}
#restaurants, #cafe, #shops, #hotels, #gas, #platisGialos, #vroulidia, .hide-toggle {display:none; margin-top:0 !important; border:2px solid #408cff; padding:0 5px; float:none;}
.diafimiseis { background:url(/images/icons/diaf.png) right 4px no-repeat; width:100%; height:16px;}
.beaches .row {margin:2rem 0; padding-top:1rem; border-top:1px solid #f17e3b;}
.locationMap {float:right;}
.locationMap img {width:28px !important; height:auto; position:relative; top:10px;}
.villagesmap table td a{padding:.2rem 1rem; display:block;}
.villagesmap table td a:hover{color:#fff; text-decoration:none;}
.tipbox, .infobox {border:2px dotted #408cff; background:url(../images/icons/tip.png) 5px 5px no-repeat; padding:1rem 1rem 1rem 50px !important; margin:1rem; min-height:36px;}
.infobox {background:url(../images/icons/info.png) 5px 5px no-repeat;}
.tipbox ul, .infobox ul {margin:0; padding:0 0 0 2rem;}
.tipbox p,.infobox p {margin:1rem 0 0 .5rem; color:#408cff;}
.tipbox li, .infobox li {list-style:outside url(../images/icons/tic_11x11.png);}
.linkbox {border:1px dotted #408cff; background:url(../images/icons/links2.png)5px 5px no-repeat; padding:20px 0 0 0 !important; margin:1rem 0; display:inline-block; width:100%;}
.linkbox li {width:96%; list-style:none; border:1px #ccc solid; margin:.5%; float:left; display:inline-block; text-align:center;-webkit-transition: 0.3s all; -moz-transition: 0.3s all; transition: 0.3s all;}
.linkbox li:hover{ border-color:#f17e3b; background-color:#F5F5F5;-webkit-transition: 0.3s all; -moz-transition: 0.3s all; transition: 0.3s all;}
.linkbox li a{color:#408cff;text-decoration:none; display:block; padding:5px;}

a.maplink {background:url(../images/diaf-icons/map.png) 5px 5px no-repeat;padding:1rem 1rem 1rem 50px; background-color: #F5F5F5; margin-bottom:1rem;}
.dark {background-color:#f5fafa; padding:1rem;}
.dark a.maplink {background-color: #fff;}
.youtubecontainer { position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}
.video { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media (min-width: 400px) {
.monthFilter {display: block; float:left; width:59%;}
.monthFilter .month {width:14.66%;}
.sidebar-map { width:39%; float:right;}
.villagesLinks ul { display:inline-block;}
.villagesLinks ul li {width:48%; margin-left:1%; margin-right:1%; float:left;}
}
@media (min-width: 768px) {
.leftSidebar .villagesLinks {border:1px solid #ccc; padding:5%; display:inline-block;}
.monthFilter {display: inline-block; float:none; width:100%;}
.monthFilter .month {width:23%; margin:1%; background-color:#408cff; cursor:pointer; text-align:center; float:left;color:#fff; text-decoration:none; font-size:1.4rem;}
.sidebar-map {width:100%; float:none;}
.sidebar-map img {display:block; }
.sidebar-map h3 a {text-decoration:none; text-align:center; display:block; border:0; padding:0;background:none;}
.sidebar-map img {max-width:100%;}
.villagesLinks ul { display:block;}
.villagesLinks ul li {width:32%; margin-left:.6%; margin-right:.6%; float:left;}
.leftSidebar .villagesLinks ul li {margin:0.3rem 0; width:100%; float:none;}
.linkbox li {width:48%;}
}


/*  ad page  */
.diaf_page .margin-top {margin-top:5rem;}
.diaf_page h3.facilities {background:url(../images/icons/facilities.png) left top no-repeat; padding-left:50px; line-height:34px; vertical-align: text-top;}
.diaf_page h3.arrownd {background:url(../images/icons/around.png) left top no-repeat; padding-left:50px; line-height:34px;}
.diaf_page h3.price {background:url(../images/icons/price.png) left top no-repeat; padding-left:50px; line-height:34px;}
.diaf_page h3.reception {background:url(../images/icons/reception.png) left top no-repeat; padding-left:50px;  line-height:34px; margin-top:5rem;}
.diaf_page h3.contact {background:url(../images/icons/contact.png) left top no-repeat; padding-left:50px; margin:1rem; line-height:34px;}
.diaf_page h4.address {background:url(../images/icons/address.png) left top no-repeat; padding-left:50px; line-height:34px;}
.diaf_page h4.map {background:url(../images/diaf-icons/map.png) left top no-repeat; padding-left:50px; line-height:34px;}
.diaf_page h4.email {background:url(../images/icons/email.png) left top no-repeat; padding-left:50px; line-height:34px;}
.diaf_page h4.fb {background:url(../images/icons/facebook-icon.png) left top no-repeat; padding-left:50px; line-height:34px;}
.diaf_page h4.telephone {background:url(../images/icons/telephone.png) left top no-repeat; padding-left:50px; line-height:34px;}
.diaf_page h4.website {background:url(../images/icons/url.png) left top no-repeat; padding-left:50px; line-height:34px;}
.diaf_page p.contact { font-size:2rem; border-bottom:1px solid #408cff; color:#408cff; padding-left:1rem;}
ul.tic li {list-style:outside url(../images/icons/tic_11x11.png);}
ul.arrow li {list-style:outside url(../images/icons/arrow_11x11.png);}
.diaf_page .twelve.columns.contact {border:1px solid #E7E7E7;}
.diaf_page .bg.contact {background-color:#E7E7E7; width:100%; padding:3rem 3% !important;}
.diaf_page a {color: #f17e3b;}
.hotelWorkingMonths h3{text-align:center; margin-top:1rem; clear:left;}
.hotelWorkingMonths .month {width:23%; margin:1%; background-color:#d9dada; text-align:center; float:left;color:#fff; text-decoration:none; font-size:1.4rem;}
.hotelWorkingMonths .month.open {background-color:#408cff !important; color:#fff !important;}
.diaf_page .onlinebooking {width:100%; padding:1rem; font-size:2rem; background-color:#f17e3b; border:none; text-align:center; display:inline-block;}
.diaf_page .onlinebooking:hover{ box-shadow: 2px 2px 3px #999; position:relative; top:-1px; left:-1px;}
.diaf_page .onlinebooking a { color:#fff; display:inline-block; width:100%; }
.diaf_page table.rates, .diaf_page table.facilities { width:100%; text-align:center; border:1px solid #f17e3b;}
.diaf_page table.rates th, .diaf_page table.facilities th{ color:#408cff; font-weight:bold;}
.diaf_page table.rates tr td, .diaf_page table.facilities tr td{padding:5px;}
.diaf_page table.rates th[scope=col], .diaf_page table.facilities th[scope=col] {padding:10px 5px; background-color:#f17e3b; color:#fff;}
.diaf_page table.rates tr:nth-child(even), .diaf_page table.facilities tr:nth-child(even) {background: #F4F4F4;}


.diaf_page .mite p{ text-align:center; background-color:#FFFFFF; width:100%; color:#999; padding:.5rem 0;}
.ui-datepicker { font-size:90% !important;}
.progress {width:97% !important; margin:auto !important;}
.onlineBooking {margin-top:4rem; text-align:center;}
.onlineBooking p {text-align:center; color:#408cff;}
.onlineBooking img { width:80%; margin:0 10%; height:auto;}

/* Hotel page form  */

/*------------------------------  jquery validation-------------------------------*/
.box {padding: 10px 25px;}	
label.error{color: #FA3C3C;	font-weight: normal;}
input.error{border: 1px solid #FA3C3C;}

/************ Buttons ****************/
.btn{  padding: 1rem 2rem;font-weight: bold;}
.btn.submit {background-color:#f17e3b; color:#fff;}
#toggle:hover{ box-shadow: 2px 2px 3px #999; position:relative; top:-1px; left:-1px;}
/*------------------------------end of jquery validation-------------------------------*/
#toggle, #toggle1, #toggle2, #toggle3, #toggle4, #toggle5, #toggle6, #toggle7, #toggle8, #toggle9, #toggle10 {width:100%; padding:1rem; border:none; color:#fff; margin-top:2rem; background:#408cff url(../images/icons/open-close.png) top 10px right 10px no-repeat; padding-right:30px;}
/*form styles*/
#form1{border:1px solid #ccc; margin:2rem 0; padding-top:1rem;}
#msform { width: 100%; text-align: left;}
#msform fieldset { width: 100%; border: 1px solid #E1E1E1;	 box-sizing: border-box;}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) { display: none;}
/*inputs*/
#msform input, #msform textarea { padding: 1.5rem; border: 1px solid #ccc; margin-bottom: 1rem; width: 100%; box-sizing: border-box; color: #474747; font-size: 1.5rem;}
/*buttons*/
#msform .action-button { background: #f17e3b; font-weight: bold; color: white; border: 0 none; border-radius: 1px; cursor: pointer; padding: 10px 5px; margin: 10px 5px;}
#msform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #f17e3b;}
/*headings*/
.fs-title { font-size: 15px; text-transform: uppercase; color: #2C3E50; margin-bottom: 10px;}
.fs-subtitle { font-weight: normal; font-size: 13px; color: #666; margin-bottom: 20px;}
/*progressbar*/
#progressbar { margin-bottom: 30px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step;}
#progressbar li { list-style-type: none; color: #408cff; font-size: 2rem; width: 33.33%; float: left; position: relative; text-align:center;}
#progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: #ccc; border-radius: 3px; margin: 0 auto 5px auto;}
/*progressbar connectors*/
#progressbar li:after { content: ''; width: 100%; height: 2px; background: #408cff; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/}
#progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; }
/*marking active/completed steps green*/
/*The number of the step and the connector before it */
#progressbar li.active:before,  #progressbar li.active:after{ background: #f17e3b; color: white;}



/* pinterest on article images */
.pin-image { position: absolute; top: 5px; left: 5px; z-index: 99999999999999999999999999; opacity: 0; -webkit-transition: 0.15s all; -moz-transition: 0.15s all; transition: 0.15s all;}
.blog-wrap { position: relative; display: inline-block;}
.blog-wrap:hover .pin-image { opacity: 1;}


.floatleft {float:left;}
.floatright {float:right;}
.clearfloat {float:none !important; line-height:1px;}
/* Mosaic image flow */
.index .container {padding-top:10rem;}
.index .mosaicflow__column {float:left;}
.index .mosaicflow__item {position:relative; margin:0 5px; text-align:center; background-color:#408cff;}
.index .mosaicflow__item img {display:block;width:100%;max-width:600px;height:auto;}
.index .mosaicflow__item p {margin:0 0 10px; color:#fff;}
.index .mosaicflow h2 {padding:0.8rem; color:#fff; font-size:1.8rem;}
.index .mosaicflow a {text-decoration:none !important;}
.index .mosaicflow a:hover {text-decoration:none !important;}
.index .villagesLinks {border:none;}
.index .textWindow { text-align:left;}
.index .textWindow h3{ width:100%; padding:1rem; color:#fff; background-color:#408cff;}
.index .textWindow a {text-decoration:none;}
.index .textWindow h4{ width:100%; padding:1rem; color:#408cff;}
.index .textWindow .six.columns img {width:100%; height:auto}
.index .textWindow .sidebar-map {border:1px solid #ccc; width:100%;}

.index2 .logo2 {text-align:center; width:100%; margin:5rem 0 10rem 0;}
.index2 .logo img { width:50%; height:auto; max-width:200px;}
.index2 .routard {text-align:center; color:#408cff;}
.index2 h1 {text-align:center; padding-top:10rem;}
.index2 h2 {font-size:3rem; margin:3rem 0 1rem 1rem; color:#f17e3b; text-align:center; text-decoration:none;font-family: 'Comfortaa', cursive;}
.index2 a:hover{ text-decoration:none;}
.index2 .big  {width:99.375% !important;padding:0.3125% !important; margin:0 !important}
.index2 .small  {width:99.375% !important;padding:0.3125% !important; margin:0 !important}
.index2 .big img, .index2 .small img {width:100%; height:auto; padding:0 !important; margin:0 !important;-webkit-transition: 0.3s all; -moz-transition: 0.3s all; transition: 0.3s all;}
.index2 .big h3, .index2 .small h3{padding:.4rem .75rem; font-size:1.5rem; background-color:rgba(216,80,0,.8); color:#fff; position: relative; margin-bottom:-3.2rem; top:-3.2rem; box-sizing:border-box; line-height:20px}
.index2 .big h3.green, .index2 .small h3.green{background-color:rgba(2,68,168,.8);}
.index2 .big img:hover, .index2 .small img:hover {-webkit-filter: grayscale(100%);filter: grayscale(100%);-webkit-transition: 0.3s all; -moz-transition: 0.3s all; transition: 0.3s all;}
.index2 .remodal img {max-width:100%}
@media only screen and (min-width: 400px) {
.index2 .big  {width:99.375% !important;}
.index2 .small  {width:49.375% !important;}
}
@media only screen and (min-width: 768px) {
.index2 .big  {width:49.375% !important;}
.index2 .small  {width:24.375% !important;}
.index2 .logo2 { margin:5rem 0 10rem -150px;}
}


/* Self Clearing Goodness
---------------------------------------------------*/
.container:after,.row:after,.clear-both {  content: "";  display: table;  clear: both; }


/* --------------- social ----------------------*/
.a2a_kit {margin:auto; text-align:center;}
/* --------------- bottom ----------------------*/
.bottom {width:100%; background-color:#408cff; margin-top:5rem; padding:5rem 0 0 0; color:#fff; font-size:110%; text-align:center;}
.bottom .logo {text-align:center; margin-bottom:5rem;}
.bottom .logo img {width:50%; height:auto; max-width:150px;}
.bottom h3{color:#fff; margin:2rem 0 0 0 !important;}
.bottom a{color:#9bd5fd; text-decoration:none;}
.bottom a:hover{color:#fff; text-decoration:none;}
.bottom p{color:#fff;}
.bottom p.copyright{ font-size:1.2rem;}
.bottom .disclaimer {margin-top:5rem; font-size:1.1rem; text-align:justify;}
.bottom img{ vertical-align:middle;}



/* --------------- advertisments ----------------------*/
.advertisments {background-color:#F5F5F5; border:1px #408cff solid; margin-bottom:2rem; transition-duration:0.3s}
.advertisments:hover {background-color:#fff;transition-duration:0.3s}
.advertisments h3 {background-color: #408cff; color:#fff;padding:1rem;transition-duration:0.3s}
.advertisments:hover h3 {background-color: #408cff; color:#fff; transition-duration:0.3s}
.advertisments h4 {padding:0 1rem;}
.advertisments p {padding:0 1rem;}
.advertisments p.discount {background:url(../images/icons/discount.png) 5px 5px no-repeat; padding:1rem 1rem 1rem 40px; background-color:#fff; margin:1rem;transition-duration:0.3s; border:1px #fff solid;}
.advertisments:hover p.discount{ border:1px #ccc solid; transition-duration:0.3s;}
.advertisments p.finalPrice { background-color:#f17e3b; color:#fff; padding:1rem; margin:1rem;}
p.click {background:url(/images/icons/click.png) 10px 0 no-repeat; line-height:30px; color:#fff; padding-left:38px;}
.advertisments p:hover.click {background:url(/images/icons/click2.png) 10px 0 no-repeat;}
/* ==========================================================================
   Remodal's necessary styles
   ========================================================================== */
/* Hide scroll bar */html.remodal-is-locked { overflow: hidden;}
/* Anti FOUC */.remodal,[data-remodal-id] { display: none;}
/* Necessary styles of the overlay */.remodal-overlay { position: fixed;  z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none;}
/* Necessary styles of the wrapper */
.remodal-wrapper { position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow: auto;text-align: center; -webkit-overflow-scrolling: touch;}
.remodal-wrapper:after {display: inline-block;height: 100%;margin-left: -0.05em;content: "";}
/* Fix iPad, iPhone glitches */.remodal-overlay,.remodal-wrapper { backface-visibility: hidden;}
/* Necessary styles of the modal dialog */.remodal { position: relative;  outline: none; text-size-adjust: 100%;}
.remodal-is-initialized { /* Disable Anti-FOUC */ display: inline-block;}



/* ==========================================================================
   Remodal's default mobile first theme
   ========================================================================== */
/* Default theme styles for the background */
.remodal-bg.remodal-is-opening,.remodal-bg.remodal-is-opened { filter: blur(3px);}
/* Default theme styles of the overlay */
.remodal-overlay { background: rgba(43, 46, 56, 0.9);}
.remodal-overlay.remodal-is-opening,.remodal-overlay.remodal-is-closing { animation-fill-mode: forwards;}
.remodal-overlay.remodal-is-opening { animation: remodal-overlay-opening-keyframes 0.3s;}
.remodal-overlay.remodal-is-closing { animation: remodal-overlay-closing-keyframes 0.3s;}
/* Default theme styles of the wrapper */
.remodal-wrapper { padding: 10px 10px 0;}
/* Default theme styles of the modal dialog */
.remodal {box-sizing: border-box; width: 100%; margin-bottom: 10px; padding: 35px;transform: translate3d(0, 0, 0);color: #2b2e38;background: #fff;}
.remodal.remodal-is-opening,.remodal.remodal-is-closing {animation-fill-mode: forwards;}
.remodal.remodal-is-opening {animation: remodal-opening-keyframes 0.3s;}
.remodal.remodal-is-closing {animation: remodal-closing-keyframes 0.3s;}
/* Vertical align of the modal dialog */
.remodal,.remodal-wrapper:after {vertical-align: middle;}
/* Close button */
.remodal-close {position: absolute;top: 0;  left: 0; display: block;  overflow: visible;  width: 35px;  height: 35px;  margin: 0;  padding: 0;  cursor: pointer;  transition: color 0.2s;  text-decoration: none;  color: #95979c; border: 0; outline: 0; background: transparent;}
.remodal-close:hover,.remodal-close:focus {color: #2b2e38;}
.remodal-close:before {font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important; font-size: 25px;  line-height: 35px;  position: absolute;  top: 0;  left: 0;  display: block;  width: 35px; content: "\00d7"; text-align: center;}
/* Dialog buttons */
.remodal-confirm,.remodal-cancel {font: inherit;  display: inline-block;  overflow: visible;  min-width: 110px;  margin: 0;  padding: 12px 0;  cursor: pointer;  transition: background 0.2s;  text-align: center;  vertical-align: middle;  text-decoration: none; border: 0; outline: 0;}
.remodal-confirm { color: #fff;  background: #6b90c9;}
.remodal-confirm:hover,.remodal-confirm:focus {  background: #427bd1;}
.remodal-cancel {  color: #fff;  background: #e57373;}
.remodal-cancel:hover,.remodal-cancel:focus {  background: #ef5350;}
/* Remove inner padding and border in Firefox 4+ for the button tag. */
.remodal-confirm::-moz-focus-inner,.remodal-cancel::-moz-focus-inner,.remodal-close::-moz-focus-inner { padding: 0; border: 0;}
/* Keyframes
   ========================================================================== */
@keyframes remodal-opening-keyframes {
  from { transform: scale(1.05); opacity: 0;}
  to { transform: none; opacity: 1;}
}
@keyframes remodal-closing-keyframes {
  from {transform: scale(1);opacity: 1;}
  to {transform: scale(0.95); opacity: 0;}
}
@keyframes remodal-overlay-opening-keyframes {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes remodal-overlay-closing-keyframes {
  from {opacity: 1;}
  to {opacity: 0;}
}
/* Media queries
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .remodal {max-width: 768px;}
}
/* IE8
   ========================================================================== */
.lt-ie9 .remodal-overlay {background: #2b2e38;}
.lt-ie9 .remodal { width: 700px;}







.mobileonly {display:block;}.phabletonly {display:none;}.tabletonly {display:none;}.desctoponly {display:none;}
.hidemobile {display:none !important;} /* hide devices under 768px*/
.showmobile {display:block;} /* show on devices over 768px*/
@media (min-width: 400px) {.mobileonly {display:none;}.phabletonly {display:block;}.tabletonly {display:none;}.desctoponly {display:none;}.hidemobile {display:none !important;}}
@media (min-width: 530px) {.mobileonly {display:none;}.phabletonly {display:block;}.tabletonly {display:none;}.desctoponly {display:none;}.hidemobile {display:none !important;}}
@media (min-width: 768px) {.mobileonly {display:none;}.phabletonly {display:none;}.tabletonly {display:block;}.desctoponly {display:none;}.hidemobile {display:block !important;}.showmobile {display:none}}
@media (min-width: 1000px) {.mobileonly {display:none;}.phabletonly {display:none;}.tabletonly {display:none;}.desctoponly {display:block;}.hidemobile {display:block;}.showmobile {display:none}}
@media (min-width: 1200px) {.mobileonly {display:none;}.phabletonly {display:none;}.tabletonly {display:none;}.desctoponly {display:block;}.hidemobile {display:block;}.showmobile {display:none}}



.transition {-webkit-transition: 0.3s all; -moz-transition: 0.3s all; transition: 0.3s all;}
/* reset all properties to default */
.reset-this {animation : none;animation-delay : 0;animation-direction : normal;animation-duration : 0;animation-fill-mode : none;animation-iteration-count : 1;animation-name : none;animation-play-state : running;animation-timing-function : ease;backface-visibility : visible;background : 0;background-attachment : scroll;background-clip : border-box;background-color : transparent;background-image : none;background-origin : padding-box;background-position : 0 0;background-position-x : 0;background-position-y : 0;background-repeat : repeat;background-size : auto auto;border : 0;border-style : none;border-width : medium;border-color : inherit;border-bottom : 0;border-bottom-color : inherit;border-bottom-left-radius : 0;border-bottom-right-radius : 0;border-bottom-style : none;border-bottom-width : medium;border-collapse : separate;border-image : none;border-left : 0;border-left-color : inherit;border-left-style : none;border-left-width : medium;border-radius : 0;border-right : 0;border-right-color : inherit;border-right-style : none;border-right-width : medium;border-spacing : 0;border-top : 0;border-top-color : inherit;border-top-left-radius : 0;border-top-right-radius : 0;border-top-style : none;border-top-width : medium;bottom : auto;box-shadow : none;box-sizing : content-box;caption-side : top;clear : none;clip : auto;color : inherit;columns : auto;column-count : auto;column-fill : balance;column-gap : normal;column-rule : medium none currentColor;column-rule-color : currentColor;column-rule-style : none;column-rule-width : none;column-span : 1;column-width : auto;content : normal;counter-increment : none;counter-reset : none;cursor : auto;direction : ltr;display : inline;empty-cells : show;float : none;font : normal;font-family : inherit;font-size : medium;font-style : normal;font-variant : normal;font-weight : normal;height : auto;hyphens : none;left : auto;letter-spacing : normal;line-height : normal;list-style : none;list-style-image : none;list-style-position : outside;list-style-type : disc;margin : 0;margin-bottom : 0;margin-left : 0;margin-right : 0;margin-top : 0;max-height : none;max-width : none;min-height : 0;min-width : 0;opacity : 1;orphans : 0;outline : 0;outline-color : invert;outline-style : none;outline-width : medium;overflow : visible;overflow-x : visible;overflow-y : visible;padding : 0;padding-bottom : 0;padding-left : 0;padding-right : 0;padding-top : 0;page-break-after : auto;page-break-before : auto;page-break-inside : auto;perspective : none;perspective-origin : 50% 50%;position : static;/* May need to alter quotes for different locales (e.g fr) */quotes : '\201C' '\201D' '\2018' '\2019';right : auto;tab-size : 8;table-layout : auto;text-align : inherit;text-align-last : auto;text-decoration : none;text-decoration-color : inherit;text-decoration-line : none;text-decoration-style : solid;text-indent : 0;text-shadow : none;text-transform : none;top : auto;transform : none;transform-style : flat;transition : none;transition-delay : 0s;transition-duration : 0s;transition-property : none;transition-timing-function : ease;unicode-bidi : normal;vertical-align : baseline;visibility : visible;white-space : normal;widows : 0;width : auto;word-spacing : normal;z-index : auto;}

/*-------------zoom-----------------*/
img[data-action="zoom"] {cursor: pointer;  cursor: -webkit-zoom-in;  cursor: -moz-zoom-in;}
.zoom-img,.zoom-img-wrap {position: relative;  z-index: 9999999;-webkit-transition: all 300ms;  -o-transition: all 300ms;transition: all 300ms;}
img.zoom-img {  cursor: pointer;  cursor: -webkit-zoom-out;  cursor: -moz-zoom-out;}
.zoom-overlay {  z-index: 9999998;  background: rgba(0,0,0,0.9);  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  pointer-events: none;  filter: "alpha(opacity=0)"; opacity: 0;  -webkit-transition:opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms;}
.zoom-overlay-open .zoom-overlay { filter: "alpha(opacity=100)"; opacity: 1;}
.zoom-overlay-open,.zoom-overlay-transitioning { cursor: default;}

/*------------scroll to top-----------------*/


.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(241, 126, 59, 0.8) url(/images/icons/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #408cff;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}
