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

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* Body */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  margin: 0; }

/* header */
header {
  padding: .5rem 2%;
  display: block; }

header {
  background: rgba(0, 0, 0, 0.6) url(../img/header_560.jpg);
  height: 170px;
  background-position: center;
  background-blend-mode: darken;
  color: white; }

header h1 {
  margin: 0;
  font-size: 60px; }

header h2 {
  margin: 0;
  font-size: 30px; }

header h1 {
  margin-top: 25px; }

/* Nav */
div#navWra {
  background-color: #949494; }

nav button {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  padding: .5rem;
  color: white; }

nav ul {
  display: none;
  margin: 0;
  padding: 0;
  border-top: solid 1px rgba(219, 218, 218, 0.7); }

ul li {
  list-style-type: none;
  border-bottom: solid 1px rgba(219, 218, 218, 0.7); }

ul li a {
  display: block;
  padding: .9rem 2vw;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none; }

ul li.active a {
  background-color: #393939; }

ul li:hover {
  background-color: #4e4e4e; }

ul.open {
  display: block; }

/* Nav hidden sub meun */
#primaryNav li ul {
  display: none;
  background: rgba(122, 122, 122, 0.1);
  padding: 0; }

#primaryNav li:hover ul {
  display: block; }

#primaryNav li ul a {
  border-top: solid 1px rgba(219, 218, 218, 0.7);
  font-size: 13px;
  padding: 10px 5%; }

#primaryNav li.parent > a:after {
  font-size: .75rem;
  content: "\25BC";
  color: rgba(255, 255, 255, 0.5);
  float: right; }

/* Main */
/* Main Hero img*/
.swiper {
  width: 100%;
  height: auto; }

.swiper-slide img {
  width: 100%; }

/* Main Card 1 */
div.cards {
  display: flex;
  flex-wrap: wrap; }

div.cards div {
  text-align: center;
  flex-basis: 100%; }

.cards div:nth-child(1) {
  background-image: url("../img/hotel01_560.jpg"); }

.cards div:nth-child(1) a {
  background-color: #E7D2CC; }

/* Main Card 2 */
.cards div:nth-child(2) {
  background-image: url("../img/hotel02_560.jpg"); }

.cards div:nth-child(2) a {
  background-color: #B9B7BD; }

/* Main Card 3 */
.cards div:nth-child(3) {
  background-image: url("../img/train_560.jpg"); }

.cards div:nth-child(3) a {
  background-color: #868B8E; }

/* Main Card 4 */
.cards div:nth-child(4) {
  background-image: url("../img/dinner_560.jpg"); }

.cards div:nth-child(4) a {
  background-color: #EEEDE7; }

.cards div a {
  display: block;
  width: 100%;
  height: 300px;
  text-decoration: none;
  padding: 0 2%;
  transition: all .5s ease-in;
  text-align: center; }

.cards div a:hover {
  background: none;
  text-shadow: 0 0 4px black; }

.cards div a i {
  font-size: 55px;
  padding-top: 100px; }

main h1 {
  padding-left: .5rem; }

/* Footer */
footer {
  display: block;
  margin: 0;
  margin-top: 50px;
  padding: 1vw .5rem;
  background-color: #949494; }

footer p {
  color: white; }

@media only screen and (min-width: 35rem) {
  /* Nav */
  nav button {
    display: none; }

  nav {
    background-color: #949494; }

  nav ul {
    display: flex;
    margin-left: 2%; }

  nav ul li {
    border-right: 1px solid white; }

  nav li a {
    display: block;
    font-size: 1rem;
    padding: .9rem 1.2rem;
    text-decoration: none; }

  ul li a:hover {
    background: rgba(0, 0, 0, 0.5); }

  #primaryNav li.parent > a:after {
    content: "\25BC";
    font-size: .65rem;
    float: left; }

  ul li ul {
    display: flex;
    border: none;
    width: 14rem;
    margin: 0;
    position: absolute;
    left: -999rem;
    z-index: 99; }

  ul li ul li {
    border-right: none;
    border-top: solid 1px white;
    background-color: #949494; }

  ul li:hover ul {
    left: auto;
    margin-left: 0; }

  ul li a {
    transition: background 0.3s linear; }

  /* Main Card 1 */
  div.cards {
    display: flex;
    flex-wrap: wrap; }

  div.cards div {
    text-align: center;
    flex-basis: 50%; }

  .cards div:nth-child(1) {
    background-image: url("../img/hotel01_480.jpg"); }

  .cards div:nth-child(1) a {
    background-color: #E7D2CC; }

  /* Main Card 2 */
  .cards div:nth-child(2) {
    background-image: url("../img/hotel02_480.jpg"); }

  .cards div:nth-child(2) a {
    background-color: #B9B7BD; }

  /* Main Card 3 */
  .cards div:nth-child(3) {
    background-image: url("../img/train_480.jpg"); }

  .cards div:nth-child(3) a {
    background-color: #868B8E; }

  /* Main Card 4 */
  .cards div:nth-child(4) {
    background-image: url("../img/dinner_480.jpg"); }

  .cards div:nth-child(4) a {
    background-color: #EEEDE7; }

  .cards div a {
    display: block;
    width: 100%;
    height: 300px;
    text-decoration: none;
    padding: 0 2%;
    transition: all .5s ease-in;
    text-align: center; }

  .cards div a:hover {
    background: none;
    text-shadow: 0 0 4px black; }

  .cards div a i {
    font-size: 55px;
    padding-top: 100px; } }
@media only screen and (min-width: 60rem) {
  header, nav, main, footer {
    max-width: 64rem;
    margin: 0 auto; }

  /* Nav */
  nav ul li a {
    font-size: .9rem;
    padding: .5rem 1.2rem; }

  div.cards {
    display: flex;
    flex-wrap: wrap; }

  div.cards div {
    text-align: center;
    flex-basis: 25%; }

  .cards div:nth-child(1) {
    background-image: url("../img/hotel01_256.jpg"); }

  .cards div:nth-child(1) a {
    background-color: #E7D2CC; }

  /* Main Card 2 */
  .cards div:nth-child(2) {
    background-image: url("../img/hotel02_256.jpg"); }

  .cards div:nth-child(2) a {
    background-color: #B9B7BD; }

  /* Main Card 3 */
  .cards div:nth-child(3) {
    background-image: url("../img/train_256.jpg"); }

  .cards div:nth-child(3) a {
    background-color: #868B8E; }

  /* Main Card 4 */
  .cards div:nth-child(4) {
    background-image: url("../img/dinner_256.jpg"); }

  .cards div:nth-child(4) a {
    background-color: #EEEDE7; }

  .cards div a {
    display: block;
    width: 100%;
    height: 300px;
    text-decoration: none;
    padding: 0 2%;
    transition: all .5s ease-in;
    text-align: center; }

  .cards div a:hover {
    background: none;
    text-shadow: 0 0 4px black; }

  .cards div a i {
    font-size: 55px;
    padding-top: 100px; } }
@media only screen and (max-width: 34.9375rem) {
  nav {
    background-color: #949494; } }