﻿

nav li {
  display: inline-block;
}
.d-nav {
  position: relative;
  float: right;
  margin: 20px 0;
  clear: both;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 3;
}

.d-nav li {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  font-weight: 400;
  -webkit-transition: background-color 0.2s ease-out;
  -moz-transition: background-color 0.2s ease-out;
  -o-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
  color: #353535;
  margin-right:1px;
}
.d-nav a {
  display: inline-block;
  position: relative;
  padding: 10px 20px;
  font-size: inherit;
  color: #353535;
  text-decoration: none;
}
.has-child a.first-level {
  padding-right: 30px;
}
@media screen and (min-width:661px) and (max-width:810px) {
	.has-child a.first-level {
		padding-right:28px;
		padding-left:10px;
	}
	.d-nav a {
		padding-right:12px;
		padding-left:12px;
	}
	.navigation .logo {
		width:125px;
		height:95px;
	}
}
.has-child a.first-level::before {
content: '';
position: absolute;
top: 50%;
right: 16px;
margin-top: -1px;
display: inline-block;
height: 2px;
width: 10px;
background: #464c4e;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.has-child a.first-level::after {
content: '';
position: absolute;
top: 50%;
right: 10px;
margin-top: -1px;
display: inline-block;
height: 2px;
width: 10px;
background: #464c4e;
-webkit-transform-origin: 9px 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: width 0.3s, -webkit-transform 0.3s;
-moz-transition: width 0.3s, -moz-transform 0.3s;
transition: width 0.3s, transform 0.3s;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.has-child a.first-level.selected::before {
-webkit-transform: translateX(6px) rotate(-45deg);
-moz-transform: translateX(6px) rotate(-45deg);
-ms-transform: translateX(6px) rotate(-45deg);
-o-transform: translateX(6px) rotate(-45deg);
transform: translateX(6px) rotate(-45deg);
margin-top: -4px;
}
.has-child a.first-level.selected::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -4px;
}
.secondary {
  position: absolute;
  top: 100%;
  left:0;
  width: 100%;
  padding: 20px;
  background-color:#fff;
  text-transform: uppercase;
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}

.secondary.is-hidden {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.secondary.cruises {
  background:url(../../img/cruises-nav-bg.png) no-repeat right bottom #ffffff;
}
.secondary.rates {
  background:url(../../img/rates-nav-bg.png) no-repeat right bottom #ffffff;
}
.secondary.about {
  background:url(../../img/about-nav-bg.png) no-repeat right bottom #ffffff;
}
.d-nav a.first-level:hover, .d-nav a.first-level:active, .d-nav li a.selected {
  padding-top: 5px;
  border-top: 0.4em solid #d71f26;
  background-color:#ffffff;
}
.secondary strong {
    font-size: 12px;
    color:#848484;
}
.secondary li {
    position: static;
    padding: 0;
    display: block;
}

.secondary a {
  display: block;
  margin:8px 0;
  padding:0;
  padding-left:0;
  font-size: 14px;
  text-transform: capitalize;
}
.secondary a:hover {
  color: #d71f26;
}
.secondary .left {
  width: 50%;
  float:left;
}
.secondary .left.line {
  border-right:1px #eaeaea solid;
}
.secondary .right {
  width: 50%;
  float:right;
  padding-left:20px;
}

.secondary ul {
  margin:8px 0 15px;
}
.secondary li {
  width: 100%;
}
.secondary a {
  display:block;
}
.overlay {
  display:none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
.overlay.visible {
  display: block;
}
