﻿/********************************************
 * Responsive Dropdown Menu
 * Big screens (up to 959px width) stylesheet
 * 
 * Contents:
 * 1) Responsive Dropdown Menu: Wrapper styles
 * 2) Responsive Dropdown Menu: Top level styles
 * 3) Responsive Dropdown Menu: Dropdown panel styles
 * 4) Responsive Dropdown Menu: Submenu columns
 * 
 ********************************************/



/***********************************
 * Responsive Dropdown Menu: Wrapper styles *
 ***********************************/

.rdd-menu-holder {
    float: none;
    width: 100%;
    margin: 0 auto;
}



/*************************************
 * Responsive Dropdown Menu: Top level styles *
 *************************************/

.rdd-menu > ul {
    position: relative;
    z-index: 100;
}
.rdd-menu2 > ul {
    position: relative;
    z-index: 200;
}
.rdd-menu3 > ul {
    position: relative;
    z-index: 200;
}
.rdd-menu > ul > li {
    position: static;
    width: auto;
	font-size: 20px;
}
.rdd-menu2 > ul > li {
    position: static;
    width: auto;
}
.rdd-menu3 > ul > li {
    position: static;
    width: auto;
}
.rdd-menu > ul > li > a,
.rdd-menu > ul > li > span {
	padding-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}
.rdd-menu2 > ul > li > a,
.rdd-menu2 > ul > li > span {
    /* By changing padding you can control the width of the Top level menu item */
    padding-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}
.rdd-menu3 > ul > li > a,
.rdd-menu3 > ul > li > span {
    /* By changing padding you can control the width of the Top level menu item */
     padding-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}

/* Top level arrow (indicates the Submenu): position of the background image '35px' depends of the width of top level menu item (above). For better look it should be 15px less than top level menu item padding (by default: 50px - 15px = 35px). */
.rdd-menu > ul > li.parent > a,
.rdd-menu > ul > li.parent > span {
    background-repeat: no-repeat;
    background-position: 35px -106px;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
	font-size: 1.1em;
}
.rdd-menu2 > ul > li.parent > a,
.rdd-menu2 > ul > li.parent > span {
    background-repeat: no-repeat;
    background-position: 35px -106px;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.rdd-menu3 > ul > li.parent > a,
.rdd-menu3 > ul > li.parent > span {
    background-repeat: no-repeat;
    background-position: 35px -106px;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.rdd-menu .ico-arrow.open,
.rdd-menu .ico-arrow.close {
    display: none;
}
.rdd-menu2 .ico-arrow.open,
.rdd-menu2 .ico-arrow.close {
    display: none;
}
.rdd-menu3 .ico-arrow.open,
.rdd-menu3 .ico-arrow.close {
    display: none;
}
.rdd-menu li:target .ico-arrow.open,
.rdd-menu li:target .ico-arrow.close {
    display: none;
}
.rdd-menu2 li:target .ico-arrow.open,
.rdd-menu2 li:target .ico-arrow.close {
    display: none;
}
.rdd-menu3 li:target .ico-arrow.open,
.rdd-menu3 li:target .ico-arrow.close {
    display: none;
}


/******************************************
 * Responsive Dropdown Menu: Dropdown panel styles *
 ******************************************/

.rdd-menu .submenu-panel {
	display: block;
	padding: 0;
	font-size: 12px;
	position: absolute;
	top: 100%;
	left: 0;
	height: 0;
	z-index: 102;
	opacity: 0;
	overflow: hidden;
	background-color: #262626;
}
.rdd-menu2 .submenu-panel {
	display: block;
	padding: 0;
	font-size: 12px;
	position: absolute;
	top: 100%;
	left: 0;
	height: 0;
	z-index: 202;
	opacity: 0;
	overflow: hidden;
	background-color: #262626;
}
.rdd-menu3 .submenu-panel {
	display: block;
	padding: 0;
	font-size: 12px;
	position: absolute;
	top: 100%;
	left: 0;
	height: 0;
	z-index: 202;
	opacity: 0;
	overflow: hidden;
	background-color: #262626;
	width: 100%;
}
.rdd-menu li:hover > .submenu-panel {
    height: auto;
    opacity: 1;
    overflow: visible;
}
}
.rdd-menu2 li:hover > .submenu-panel {
    height: auto;
    opacity: 1;
    overflow: visible;
}
.rdd-menu3 li:hover > .submenu-panel {
    height: auto;
    opacity: 1;
    overflow: visible;
}

.rdd-menu ul ul > li > a {
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	font-size: 12px;
	text-transform: none;
	text-align: left;
	width: auto;
	height: auto;
	background-position: 10px -65px;
	background-repeat: no-repeat;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.rdd-menu2 ul ul > li > a {
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	font-size: 12px;
	text-transform: none;
	text-align: left;
	width: auto;
	height: auto;
	background-position: 10px -65px;
	background-repeat: no-repeat;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.rdd-menu3 ul ul > li > a {
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	font-size: 12px;
	text-transform: none;
	text-align: left;
	width: auto;
	height: auto;
	background-position: 10px -65px;
	background-repeat: no-repeat;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.rdd-menu .submenu-panel h2,
.rdd-menu .submenu-panel .h2 {
    font-size: 17px;
    line-height: 18px;
    margin-bottom: 30px;
}
.rdd-menu2 .submenu-panel h2,
.rdd-menu2 .submenu-panel .h2 {
    font-size: 17px;
    line-height: 18px;
    margin-bottom: 30px;
}
.rdd-menu3 .submenu-panel h2,
.rdd-menu3 .submenu-panel .h2 {
    font-size: 17px;
    line-height: 18px;
    margin-bottom: 30px;
}
.rdd-menu .submenu-panel h3,
.rdd-menu .submenu-panel .h3 {
	font-size: 24px;
	margin-bottom: 17px;
	margin-top: 17px;
	padding-bottom: 8px;
}
.rdd-menu2 .submenu-panel h3,
.rdd-menu2 .submenu-panel .h3 {
	font-size: 24px;
	margin-bottom: 17px;
	margin-top: 17px;
	padding-bottom: 8px;
}
.rdd-menu3 .submenu-panel h3,
.rdd-menu3 .submenu-panel .h3 {
	font-size: 24px;
	margin-bottom: 17px;
	margin-top: 17px;
	padding-bottom: 8px;
}

.rdd-menu .submenu-panel h4,
.rdd-menu .submenu-panel .h4 {
    font-size: 18px;
	margin-top: 15px;
    margin-bottom: 15px;
}
.rdd-menu2 .submenu-panel h4,
.rdd-menu2 .submenu-panel .h4 {
    font-size: 18px;
	margin-top: 15px;
    margin-bottom: 15px;
}
.rdd-menu3 .submenu-panel h4,
.rdd-menu3 .submenu-panel .h4 {
    font-size: 18px;
	margin-top: 15px;
    margin-bottom: 15px;
}

.rdd-menu .submenu-panel .single-list {
    margin-top: 18px;
}
.rdd-menu2 .submenu-panel .single-list {
    margin-top: 18px;
}
.rdd-menu3 .submenu-panel .single-list {
    margin-top: 18px;
}

.rdd-menu .submenu-panel p,
.rdd-menu .submenu-panel .p {
    display: block;
    margin-bottom: 5px;
}
.rdd-menu2 .submenu-panel p,
.rdd-menu2 .submenu-panel .p {
    display: block;
    margin-bottom: 5px;
}
.rdd-menu3 .submenu-panel p,
.rdd-menu3 .submenu-panel .p {
    display: block;
    margin-bottom: 5px;
}

.rdd-menu .submenu-panel p.last,
.rdd-menu .submenu-panel .p.last {
    margin-bottom: 0px;
}
.rdd-menu2 .submenu-panel p.last,
.rdd-menu2 .submenu-panel .p.last {
    margin-bottom: 0px;
}
.rdd-menu3 .submenu-panel p.last,
.rdd-menu3 .submenu-panel .p.last {
    margin-bottom: 0px;
}

.rdd-menu .submenu-panel .submenu-separator {
    display: block;
    float: left;
    width: 94%;
    margin: 0 3%;
    height: 3px;
}
.rdd-menu2 .submenu-panel .submenu-separator {
    display: block;
    float: left;
    width: 94%;
    margin: 0 3%;
    height: 3px;
}
.rdd-menu3 .submenu-panel .submenu-separator {
    display: block;
    float: left;
    width: 94%;
    margin: 0 3%;
    height: 3px;
}

/************************************
 * Responsive Dropdown Menu: Submenu columns *
 ************************************/

.rdd-menu .submenu-panel .colgroup {
    position: relative;
}
.rdd-menu2 .submenu-panel .colgroup {
    position: relative;
}
.rdd-menu3 .submenu-panel .colgroup {
    position: relative;
}
.rdd-menu .submenu-panel .col {
    display: block;
    width: auto;
    padding: 0 3%;
}
.rdd-menu2 .submenu-panel .col {
    display: block;
    width: auto;
    padding: 0 3%;
}
.rdd-menu3 .submenu-panel .col {
    display: block;
    width: auto;
    padding: 0 3%;
}
/* Single column layout */
.rdd-menu .submenu-panel .single-col .col {
    width: 94%;
}
.rdd-menu2 .submenu-panel .single-col .col {
    width: 94%;
}
.rdd-menu3 .submenu-panel .single-col .col {
    width: 94%;
}

/* Two columns layout */
.rdd-menu .submenu-panel .two-cols .col {
    width: 44%;
}
.rdd-menu2 .submenu-panel .two-cols .col {
    width: 44%;
}
.rdd-menu3 .submenu-panel .two-cols .col {
    width: 44%;
}
/* Three columns layout */
.rdd-menu .submenu-panel .three-cols .col {
    width: 27%;
}
.rdd-menu2 .submenu-panel .three-cols .col {
    width: 27%;
}
.rdd-menu3 .submenu-panel .three-cols .col {
    width: 27%;
}

/* Four columns layout */
.rdd-menu .submenu-panel .four-cols .col {
    width: 25%;
}
.rdd-menu2 .submenu-panel .four-cols .col {
    width: 25%;
}
.rdd-menu3 .submenu-panel .four-cols .col {
    width: 25%;
}
/* Column with map */
.rdd-menu .submenu-panel .col.submenu-map-wrapper {
    display: block;
}
.rdd-menu2 .submenu-panel .col.submenu-map-wrapper {
    display: block;
}
.rdd-menu3 .submenu-panel .col.submenu-map-wrapper {
    display: block;
}
.rdd-menu .submenu-panel .col .margin-25 {
    width: 100%;
    height: 25px;
    line-height: 25px;
}
.rdd-menu2 .submenu-panel .col .margin-25 {
    width: 100%;
    height: 25px;
    line-height: 25px;
}
.rdd-menu3 .submenu-panel .col .margin-25 {
    width: 100%;
    height: 25px;
    line-height: 25px;
}
/* Column with Submenu related info (headline, image and text): Static */
.rdd-menu .submenu-panel .col.submenu-info {
    display: block;
    width: 27%;
}
.rdd-menu2 .submenu-panel .col.submenu-info {
    display: block;
    width: 27%;
}
.rdd-menu3 .submenu-panel .col.submenu-info {
    display: block;
    width: 27%;
}
.rdd-menu .submenu-info p {
    font-size: 11px;
    line-height: 22px;
}
.rdd-menu2 .submenu-info p {
    font-size: 11px;
    line-height: 22px;
}
.rdd-menu3 .submenu-info p {
    font-size: 11px;
    line-height: 22px;
}
.rdd-menu .submenu-info img {
    display: block;
    max-width: 100%;
    margin-bottom: 17px;
}
.rdd-menu2 .submenu-info img {
    display: block;
    max-width: 100%;
    margin-bottom: 17px;
}
.rdd-menu3 .submenu-info img {
    display: block;
    max-width: 100%;
    margin-bottom: 17px;
}
/* Submenu with related info (headline, image and text): Dynamic */
.rdd-menu .related-info {
    width: 27%;
    padding: 32px 0 32px 3%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.rdd-menu2 .related-info {
    width: 27%;
    padding: 32px 0 32px 3%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.rdd-menu3 .related-info {
    width: 27%;
    padding: 32px 0 32px 3%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

/* Using only CSS imposes certain restrictions: for correct work & better look of the menu please use images of the same size and the same amount of text */
.rdd-menu .related-info .p {
    font-size: 11px;
    line-height: 22px;
}
.rdd-menu2 .related-info .p {
    font-size: 11px;
    line-height: 22px;
}
.rdd-menu3 .related-info .p {
    font-size: 11px;
    line-height: 22px;
}
.rdd-menu .related-info img {
    display: block;
    max-width: 100%;
    margin-bottom: 17px;
}
.rdd-menu2 .related-info img {
    display: block;
    max-width: 100%;
    margin-bottom: 17px;
}
.rdd-menu3 .related-info img {
    display: block;
    max-width: 100%;
    margin-bottom: 17px;
}

.rdd-menu a:hover + .related-info {
    display: block;
}
.rdd-menu2 a:hover + .related-info {
    display: block;
}
.rdd-menu3 a:hover + .related-info {
    display: block;
}
@media (min-width: 1200px) { }

@media (min-width: 992px)and (max-width: 1199px) {
	
	.rdd-menu > ul > li.parent > a,
.rdd-menu > ul > li.parent > span {
	font-size: 0.8em;
}

	.rdd-menu3 > ul > li.parent > a,
.rdd-menu3 > ul > li.parent > span {
	font-size: 0.8em;
}
}

 @media (min-width: 768px)and (max-width: 991px) {
	 
	.rdd-menu > ul > li.parent > a,
.rdd-menu > ul > li.parent > span {
	font-size: 0.9em;
}
	.rdd-menu3 > ul > li.parent > a,
.rdd-menu3 > ul > li.parent > span {
	font-size: 0.9em;
}

 }
 
 @media (max-width: 767px) {
	 .rdd-menu > ul > li.parent > a,
.rdd-menu > ul > li.parent > span {
	font-size: 0.9em;
}
	 .rdd-menu3 > ul > li.parent > a,
.rdd-menu3 > ul > li.parent > span {
	font-size: 0.9em;
}
 }

