/* - - - - - - - - - - - - - - - - - - - - - - - 
Web Design - Scalanova Digital Agency
www.scalanova.com info@scalanova.com
- - - - - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - - - - - 
GLOBAL FIXES
- - - - - - - - - - - - - - - - - - - - - - - - */

* {
   -webkit-box-sizing: border-box; 
   -moz-box-sizing: border-box; 
   box-sizing: border-box;
}

.group:before,
.group:after {
   content:"";
   display:table;
}
.group:after {
   clear:both;
}
.group {
   zoom:1;
}

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

.clearfix:after {
   content: "";
  display: table;
  clear: both;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   

      GENERAL CSS


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@font-face {
  font-family: 'Regular';
  src: url('Gilroy-Regular.ttf');
}

@font-face {
  font-family: 'Bold';
  src: url('Gilroy-Bold.ttf');
}

body {
   font-family: Regular, sans-serif;
   font-size: 100%;
   line-height: 1.5;
   height: 100%;
   background-color: #F6A623;
}

a { text-decoration: none; cursor: pointer; }


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   

      MOBILE CSS


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* -----------------------------------------------------------------
      HEADER
----------------------------------------------------------------- */

.top { display: none; }
.top-menu { width: 100%; height: 58px; margin: 0 auto; }

/* -----------------------------------------------------------------
      GENERAL
----------------------------------------------------------------- */

.content { width: 100%; height: auto; background-color: white; margin: 0 auto; padding-top: 0; }
.content-right { width: 100%; height: auto; float: none; }

h1#main-title { width: 100%; height: 3em; background-color: #EFCE4A; color: black; font-family: Bold, sans-serif; font-size: 1.4em; font-weight: normal; text-align: left; line-height: 3em; margin: 0; padding-left: 1em; }
p#content { font-size: 0.9em; text-align: justify; padding-right: 1em; padding-left: 1em; line-height: 1.3; }
p#content b { font-family: Bold, sans-serif; }
h2#main-title { width: 100%; height: 2.5em; background-color: #041A33; color: #F5A623; font-family: Bold, sans-serif; font-size: 1.1em; font-weight: normal; text-align: left; line-height: 2.5em; margin: 0; margin-bottom: 0.5em; margin-top: 0.5em; padding-left: 1em; }

img#let-us-give-you-a { width: 50%; }

div#hide-mobile { display: none; }


/* -----------------------------------------------------------------
      NAVIGATION LEFT
----------------------------------------------------------------- */

.nav-left { width: 100%; height: auto; float: none; }
.nav-left-parts { width: 100%; height: auto; background-color: #CACACA; padding-bottom: 1em; }
.nav-left-localguide { width: 100%; height: auto; background-color: #EFCE4A; text-align: center; padding-top: 1em; padding-bottom: 1em; }

h2#nav-left-title { width: 100%; height: 4em; background-color: #041A33; font-family: Bold, sans-serif; font-size: 1em; line-height: 4em; color: #F5A623; text-align: center; margin: 0; margin-bottom: 1em; }
h3#nav-left-subtitle { width: 100%; height: 1.5em; font-family: Regular, sans-serif; font-size: 1em; font-weight: normal; line-height: 1.5em; color: black; text-align: left; margin: 0; padding-left: 1em; }
h3#nav-left-subtitle:hover { text-decoration: underline; }
h3#nav-left-subtitle2 { width: 100%; height: 1.5em; font-family: Bold, sans-serif; font-size: 1em; font-weight: normal; line-height: 1.5em; color: black; text-align: left; margin: 0; padding-left: 1em; }
h3#nav-left-subtitle3 { width: 100%; height: 1.5em; font-family: Regular, sans-serif; font-size: 0.9em; font-weight: normal; line-height: 1.5em; color: black; text-align: left; margin: 0; padding-left: 1.9em; }
h3#nav-left-subtitle3:hover { text-decoration: underline; }

.nav-left-tripadvisor { width: 100%; height: auto; text-align: center; margin-top: 1em; }
img#trip-advisor { width: 80%; max-width: 16em;  } 

/* -----------------------------------------------------------------
      FOOTER
----------------------------------------------------------------- */

.footer { width: 100%; height: 10em; background-color: #041A33; margin: 0 auto; } img#footer { width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 2em; }
.footer-copy { width: 100%; text-align: center; font-family: Regular, sans-serif; font-size: 0.7em; font-weight: normal; color: white; margin-top: 1em; margin-bottom: 1em; }

/* -----------------------------------------------------------------
      MENU
----------------------------------------------------------------- */


/* header */

.header {
  background-color: #0B1E31;
  width: 100%;
  z-index: 3;
  font-family: Regular, sans-serif;
  font-weight: normal;
  font-size: 0.85em;
  position: fixed;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  
}

.header li a {
  display: block;
  padding: 0.8em 1em;
  text-decoration: none;
  color: #fff;
  z-index: 3;
  border-bottom: solid 0.1em #00234D;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: none;
  border-bottom: none;
}

.header {
  display: block;
  float: left;
}

.logo {
   display: block;
   float: left;
   margin-top: 0.7em;
   margin-left: 1em;
}


/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}


/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}


/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 400px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   

      BETWEEN CSS


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (min-width: 666px) {

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   

      DESKTOP CSS


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (min-width: 1100px) {

/* -----------------------------------------------------------------
      HEADER
----------------------------------------------------------------- */

.top { display: block; width: 1200px; height: 200px; background-color: white; margin: 0 auto; background-image: url(../images/bg-top.jpg); background-repeat: no-repeat; background-position: right center; }
.top img { height: 7em; margin-top: 40px; margin-left: 30px; }
.top-menu { width: 1200px; }
#mobile-logo { display: none; }

/* -----------------------------------------------------------------
      GENERAL
----------------------------------------------------------------- */

.content { width: 1200px; padding-top: 20px; }
.content-right { width: 875px; float: right; }
p#content { padding-right: 1em; padding-left: 0; }
img#let-us-give-you-a { width: auto; }

div#hide-mobile { display: block; }

/* -----------------------------------------------------------------
      NAVIGATION LEFT
----------------------------------------------------------------- */

.nav-left { width: 300px; float: left; }

/* -----------------------------------------------------------------
      FOOTER
----------------------------------------------------------------- */

.footer { width: 1200px; height: 12em; } img#footer { width: 40%; margin-left: 30%; margin-right: 30%; margin-top: 2em; }
.footer-copy { font-size: 0.9em;}

/* -----------------------------------------------------------------
      MENU
----------------------------------------------------------------- */

.header { width: 1200px; position: absolute; background-color: #041932; font-family: Bold, sans-serif; }
.header img { margin-left: 1em; }
.header li { float: left; }
.header li a { padding: 20px 17px; border-bottom: none; font-size: 1em; color: white; background-color: #283038; background: url(../images/bg-hover-menu.png) no-repeat; background-position: 0 5em; }
.header li:last-child > a { margin-right: 0; }
.header .menu { clear: none; float: none; max-height: none; margin-left: 5%; }
.header .menu-icon { display: none; }
.logo { display: block; float: left; margin-top: 0; margin-left: 0; }
.header li a:hover, .header .menu-btn:hover { background-color: none; background-position: 0 3.8em; }

} /* END OF THE CSS */