/*
 ***** NAVBAR *****
 */
.navbar {
  width: 100%;
  padding-bottom:2px;
  height: 50px;
  position: relative;
  z-index: 80;
  cursor: default;
  /* background: #fff; */
  /* margin-top: 70px; REM */
}
.navbar, .navbar * { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/* TOGGLE BUTTON */
.navbar .toggle {
  width: 50px;
  height: 50px;
  display: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  background: #000;
}
.navbar .toggle span {
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
}
.navbar .toggle:before, .navbar .toggle span:before, .navbar .toggle span:after {
  height: 5px;
  content: '';
  display: block;
  position: absolute;
  left: 1px;
  right: 1px;
  background: #fff;
}
.navbar .toggle:before { left: 6px; right: 6px; }
.navbar .toggle:before { margin-top: -2px; top: 50%; transition: opacity .3s; }
.navbar .toggle span:before { top: 7px; }
.navbar .toggle span:after { bottom: 6px; }
.navbar .toggle span:before, .navbar .toggle span:after {
  -webkit-transition: -webkit-transform .3s;
  -moz-transition: -moz-transform .3s;
  -o-transition: -o-transform .3s;
  transition: transform .3s;
}
.navbar:before, .nav:after, .nav .dropdown:after, .nav .submenu:after { display: table; content: '\0020'; clear: both; }
/*
 ***** NAVIGATION *****
 */
.nav {
  width: 100%;
  min-height: 47px;
  padding: 0 0 0 0;
  margin: 0;
  list-style: none;
  position: relative;
  font-size: 14px;
  line-height: 18px;
  color: #333;
  /* box-shadow: 0 2px 1px -2px gray; */
  /* background-color: #f1f1f1; */
}

/* Increase font size if the device is tablet / iPad in portrait mode */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.nav { 
		font-size: 17px;
		top: -2px;
	}
}

.nav > li {
  margin: 0;
  float: left;
}
/************** NEW 07.12.2015 ***************/
.nav > li .section {
  color: #787878;
  /* padding: 14px 21px 14px 21px; */
  padding: 17px 20px 12px 20px;
  display: block;
  position: relative;
  text-decoration: none;
  outline: none;
  /* font-weight: bold; */
  font-size: 16px;
  -webkit-font-smoothing: subpixel-antialiased;
  font-smoothing: subpixel-antialiased;
  /* transform: translateY(12%); */
  /*
	transition: color .1s, background-color .2s ease;
	transition-delay: 0s;
	transition-timing-function: ease;
	*/
}

/* For tablet portrait layouts */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	.nav > li .section {
		padding: 17px 13px 12px 13px;
	}
}

.nav > li .goldclass {
  color:#a49154;
}

.nav > li .section:before {
/*
  border-top: 8px solid red;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  margin-left: -8px;
  content: '';
  display: block;
  opacity: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 10;
  */
  /*
	transition: bottom .1s, opacity .1s;
	transition-delay: 0s;
	transition-timing-function: ease;
	*/
}

.nav > li .goldclass:before {
	border-top: 8px solid #a49154;
}

.nav > li:hover .section, .nav li.active .section {
  color: #000;
  /* background: #f00; */
  background-color: #FFFFFF;
  transition: background-color 0.1s ease-in;
  transition-delay: 0.1s;
  border-top: 2px solid #c26fd9;
}

.nav > li:hover .goldclass, .nav li.active .goldclass {
  background: #a49154;
}

.nav > li:hover .section:before {
  opacity: 1;
  bottom: -8px;
  /*
	transition-delay: .05s;
	*/
}
/************** // NEW 07.12.2015 ***************/
.nav:before {
  content: '';
  display: block;
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.nav .dropdown {
  padding: 2px 5px 30px 5px;
  box-shadow: inset 0 1px 0 #ccc;
  margin: 0;
  list-style: none;
  /*display: none;*/
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  background: #fff;
  transition: .15s ease-in-out; 
  transition-delay: 0.15s;
  border: 1px solid #555;
  border-style: none none solid none;	  
  font-size: 14px;
  -webkit-box-shadow: 0px 10px 15px 0px rgba(179,179,179,1);
  -moz-box-shadow: 0px 10px 15px 0px rgba(179,179,179,1);
  box-shadow: 0px 10px 15px 0px rgba(179,179,179,1);
}

/* Increase font size if the device is tablet / iPad in portrait mode */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.nav .dropdown { 
		font-size: 18px;
	}
}

.nav > li.pre .dropdown {
  /*display: block;*/
}
.nav > li.hover .dropdown {
  opacity: 1;
  /* display: block; */
  visibility: visible;
  z-index: 5;
}

@media screen and (min-width : 1200px) { 
  .nav > li.hover .dropdown {
    transition: all 0s ease;
	 -webkit-transition: all 0s ease;
	 -moz-transition: all 0s ease;
	 -ms-transition: all 0s ease;
	 -o-transition: all 0s ease;
	 
	 transition-delay: .25s; 
    -webkit-transition-delay: .25s; 
	 -moz-transition-delay: .25s; 
	 -ms-transition-delay: .25s; 
	 -o-transition-delay: .25s; 
  }
}

/*
.nav > li:last-child .dropdown {
	display: block !important;
	opacity: 1 !important;
}
*/
.nav .dropdown .col {
  width: 24.9%;
  padding: 10px;
  float: left;
  position: relative;
}
.nav .dropdown .col-5 {
  width: 16.6%;
  padding: 10px 4px 10px 4px;
  float: left;
  position: relative;
}
.nav li.back, .nav .images .submenu li.back { display: none; }
.nav .dropdown .col-1 { width: 130px; }
.nav .dropdown .col-2 { width: 240px; }
.nav .dropdown .col-3 { width: 360px; }
.nav .dropdown .col-4 { width: 480px; }
.nav .heading {
  padding: 0 0 10px 0;
  border-bottom: 1px solid #eee;
  margin: 0 0 4px 0;
  font-weight: normal;
  /* text-transform: uppercase; */
}
.nav .heading a {
  padding: 5px;
  margin: -5px;
  display: inline-block;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  transition: color .2s ease;
}

.nav .heading a:hover { 
  color:blue;
}

.nav .submenu {
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 18px;
}

.nav .submenu li { 
	padding-top: 6px; 
	padding-bottom: 6px;
}

/* Increase padding if the device is tablet / iPad in portrait mode */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.nav .submenu li { 
		padding-top: 8px; 
		padding-bottom: 8px;
	}
}

.nav .submenu li:last-child { margin-bottom: 0; }
.nav .submenu a {
  color: #000;
  text-decoration: none;
}
.nav .submenu a:hover {
  color:blue;
  /*text-shadow: 0.5px 0 0 blue;*/
  /* font-weight: 600; */
  /* letter-spacing: -0.015em; */
}
.nav .images .submenu li {
  width: 50%;
  padding: 10px;
  margin: 0;
  float: left;
}
.nav .dropdown .images.col .submenu { position: relative; }
.nav .dropdown .images.col .submenu:before {
  width: 1px;
  content: '';
  display: block;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: -10px;
  bottom: 0;
  background: #ccc;
}
.nav .dropdown .images.col:first-child .submenu:before { display: none; }
.nav .dropdown .images.col-1 .submenu li { width: 100%; }
.nav .dropdown .images.col-2 .submenu li { width: 50%; }
.nav .dropdown .images.col-3 .submenu li { width: 33.3%; }
.nav .dropdown .images.col-4 .submenu li { width: 25%; }
.nav .dropdown .images .heading {
  border: none;
  padding-bottom: 0;
  text-align: center;
}
.nav .images .submenu li a {
  display: block;
}
.nav .submenu .image {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  transition: box-shadow .2s ease;
}
.nav .submenu a:hover .image {
  box-shadow: 0 0 0 2px #f00;
}
.nav .submenu .name {
  margin-top: 4px;
  display: block;
  text-align: center;
}
/*
 ***** RESPONSIVE *****
 */
@media (max-width: 1280px) {
  .nav .dropdown .col-1, .nav .dropdown .col-2, .nav .dropdown .col-3, .nav .dropdown .col-4 { width: 100%; float: none; }
  .nav .images .submenu { text-align: center; }
  .nav .images .submenu li { width: auto !important; display: inline-block; float: none; }
}
@media (max-width: 640px) {
  .navbar .toggle { display: block; }
  .nav { width: auto; display: none; opacity: 0; position: absolute; left: 0; top: 100%; -webkit-transition: -webkit-transform .3s ease-in-out, opacity .2s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out, opacity .2s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out, opacity .2s ease-in-out; -o-transition: -o-transform .3s ease-in-out, opacity .2s ease-in-out; transition: transform .3s ease-in-out, opacity .2s ease-in-out; }
  .nav:before { display: none; }
  .nav-pre .nav { display: block; }
  .nav-open .nav { opacity: 1; }
  .nav.gone-1 { -webkit-transform: translate3d(-281px, 0, 0); -moz-transform: translate3d(-281px, 0, 0); -ms-transform: translate3d(-281px, 0, 0); -o-transform: translate3d(-281px, 0, 0); transform: translate3d(-281px, 0, 0); }
  .nav.gone-2 { -webkit-transform: translate3d(-562px, 0, 0); -moz-transform: translate3d(-562px, 0, 0); -ms-transform: translate3d(-562px, 0, 0); -o-transform: translate3d(-562px, 0, 0); transform: translate3d(-562px, 0, 0); }
  .nav > li { position: static; width: 280px; margin: 1px 0; float: none; background: #000; }
  .nav > li:hover .section, .nav li.active .section { color: #fff; background: #000; }
  .nav > li .section { color: #fff; transition: none; }
  .nav > li .section:before { display: none; }
  .nav .dropdown { min-width: 280px; padding: 0; margin-left: 1px; top: 0; left: 280px; right: auto; display: none; opacity: 0; -webkit-transform: scale(.85); -moz-transform: scale(.85); -ms-transform: scale(.85); -o-transform: scale(.85); transform: scale(.85); -webkit-transition: -webkit-transform .3s ease-in-out, opacity .2s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out, opacity .2s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out, opacity .2s ease-in-out; -o-transition: -o-transform .3s ease-in-out, opacity .2s ease-in-out; transition: transform .3s ease-in-out, opacity .2s ease-in-out; }
  .nav > li.ready .dropdown { display: block; }
  .nav > li.open .dropdown { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  .nav .dropdown .col { width: 100% !important; padding: 0; margin: 1px 0; float: none; background: #000; }
  .nav .dropdown .col.back { display: block; }
  .nav .heading { padding: 0; margin: 0; border: none; display: block; position: relative; text-transform: uppercase; }
  .nav .heading a { padding: 15px 10px; margin: 0; color: #fff; display: block; text-align: left; }
  .nav .heading a:hover { color: #fff; background: #000; }
  .nav .dropdown .col { position: static; }
  .nav .dropdown .col .submenu { width: 280px; display: none; position: absolute !important; top: 0; left: 281px; font-size: 14px; line-height: 20px; text-transform: uppercase; opacity: 0; -webkit-transform: scale(.85); -moz-transform: scale(.85); -ms-transform: scale(.85); -o-transform: scale(.85); transform: scale(.85); -webkit-transition: -webkit-transform .3s ease-in-out, opacity .2s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out, opacity .2s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out, opacity .2s ease-in-out; -o-transition: -o-transform .3s ease-in-out, opacity .2s ease-in-out; transition: transform .3s ease-in-out, opacity .2s ease-in-out; }
  .nav .dropdown .col .submenu li { width: auto !important; padding: 0 !important; float: none !important; display: block !important; margin: 1px 0 0; background: #000; }
  .nav .dropdown .col .submenu li a { padding: 15px 10px; display: block; color: #fff; text-align: left !important; }
  .nav .dropdown .col.ready .submenu { display: block; }
  .nav .dropdown .col.open .submenu { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  .nav .submenu .name { text-align: left; }
  .nav .submenu .image { display: none !important; }
}