/********** logo & menu buttons, banner image **********/
header {width: 100%; margin: 0% 0% 0% 0%; padding: 12px 0% 12px 0%;}

.LOGO .span_1_of_12.right {width: 6.30%; height: 61px; margin: 0% 0% 0% 0%; padding: 20px 0% 0% 0%; text-align: center;}
.LOGO .span_1_of_12.left {width: 6.30%; height: 61px; margin: 0% 0% 0% 0%; padding: 20px 0% 0% 0%; text-align: center;}
.LOGO .span_3_of_12 {width: 25.00%; height: 76px ; margin: 0% 0% 0% 0%; padding: 5px 0% 0% 0%; text-align: center;}
.LOGO .span_5_of_12 {width: 37.40%; height: 81px; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%; text-align: center;}

.overlay {position: absolute; display: none; width: 100%; height: 100%; top: 104px; left: 0; background-color: #000; opacity: 0.75; filter: alpha(opacity=75); z-index: 2;}

.LOGO span.logo {font-size: 100%; line-height: 1.6; font-weight: bold;}
.LOGO span.logo a {color: #000;}

.LOGO img.logo {width: 360px; height: 81px;}

.LOGO img.burger, img.close {width: 40px; height: 40px; z-index: 2; cursor: pointer;}
.LOGO img.burger:hover, img.close:hover {}

ul.menu {width: 100%; padding: 0% 0% 0% 0%; list-style-type: none; position: absolute; top: 104px; left: 0px; border-bottom: 1px solid #fff; z-index: 3;}
ul.menu li {width: 100%; margin-left: 0px; padding: 0%; background: #7e4b9c; text-align: center; border-top: 1px solid #fff;}
ul.menu li:hover {background: #c09fd0; text-align: center; border-top: 1px solid #fff;}
ul.menu li:hover {background: #c09fd0; text-align: center; border-top: 1px solid #fff;}

ul.menu li a {color: #fff; padding: 1.0% 1.25% 1.0% 1.25%; font: normal normal  125%/1.0 'Majoris Regular', sans-serif; letter-spacing: 2px; text-decoration: none; display: block;}
ul.menu li a:hover {color: #fff;}

.hero {width: 100%; height: 40%; background: url('../photos/photoHero.png'); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; top: 0px; z-index: 1;}



/***** 1560px ******/
@media only screen and (max-width: 1560px) {
.LOGO .span_1_of_12.right {width: 6.30%; height: 59px; padding: 18px 0% 0% 0%;}
.LOGO .span_1_of_12.left {width: 6.30%; height: 59px; padding: 18px 0% 0% 0%;}
.LOGO .span_3_of_12 {width: 25.00%; height: 72px ; padding: 5px 0% 0% 0%;}
.LOGO .span_5_of_12 {width: 37.40%; height: 81px; padding: 0% 0% 0% 0%;}
.LOGO span.logo {font-size: 98%; line-height: 1.6;}
.LOGO img.logo {width: 342px; height: 77px;}
.LOGO img.burger, img.close {width: 38px; height: 38px;}

ul.menu li a {padding: 1.0% 1.5% 1.0% 1.5%; font-size: 125%; line-height: 1.0; letter-spacing: 2px;}
}



/***** 1460px ******/
@media only screen and (max-width: 1460px) {
.LOGO .span_1_of_12.right {width: 6.30%; height: 57px; padding: 18px 0% 0% 0%;}
.LOGO .span_1_of_12.left {width: 6.30%; height: 57px; padding: 18px 0% 0% 0%;}
.LOGO .span_3_of_12 {width: 25.00%; height: 73px ; padding: 2px 0% 0% 0%;}
.LOGO .span_5_of_12 {width: 37.40%; height: 75px; padding: 0% 0% 0% 0%;}
.LOGO span.logo {font-size: 96%; line-height: 1.5;}
.LOGO img.logo {width: 332px; height: 75px;}
.LOGO img.burger, img.close {width: 36px; height: 36px;}

.overlay {top: 99px;}
ul.menu {top: 99px;}
ul.menu li a {padding: 1.0% 1.75% 1.0% 1.75%; font-size: 125%; line-height: 1.0; letter-spacing: 2px;}
}



/***** 1360px ******/
@media only screen and (max-width: 1360px) {
.LOGO .span_1_of_12.right {width: 6.30%; height: 57px; padding: 15px 0% 0% 0%;}
.LOGO .span_1_of_12.left {width: 6.30%; height: 57px; padding: 15px 0% 0% 0%;}
.LOGO .span_3_of_12 {width: 25.00%; height: 70px ; padding: 2px 0% 0% 0%;}
.LOGO .span_5_of_12 {width: 37.40%; height: 72px;}
.LOGO span.logo {font-size: 95%; line-height: 1.5;}
.LOGO img.logo {width: 316px; height: 72px;}
.LOGO img.burger, img.close {width: 35px; height: 35px;}
.hero {height: 38%;}

.overlay {top: 96px;}
ul.menu {top: 96px;}
}



/***** 1260px ******/
@media only screen and (max-width: 1260px) {
.LOGO .span_1_of_12.right {width: 6.30%; height: 54px; padding: 15px 0% 0% 0%;}
.LOGO .span_1_of_12.left {width: 6.30%; height: 54px; padding: 15px 0% 0% 0%;}
.LOGO .span_3_of_12 {width: 25.00%; height: 67px ; padding: 2px 0% 0% 0%;}
.LOGO .span_5_of_12 {width: 37.40%; height: 69px;}
.LOGO span.logo {font-size: 94%; line-height: 1.4;}
.LOGO img.logo {width: 301px; height: 69px;}
.LOGO img.burger, img.close {width: 34px; height: 34px;}

.overlay {top: 93px;}
ul.menu {top: 93px;}
}



/***** 1180px ******/
@media only screen and (max-width: 1180px) {
.LOGO .span_1_of_12.right {width: 6.30%; height: 51px; padding: 15px 0% 0% 0%;}
.LOGO .span_1_of_12.left {width: 6.30%; height: 51px; padding: 15px 0% 0% 0%;}
.LOGO .span_3_of_12 {width: 25.00%; height: 64px ; padding: 2px 0% 0% 0%;}
.LOGO .span_5_of_12 {width: 37.40%; height: 66px;}
.LOGO span.logo {font-size: 92%; line-height: 1.4;}
.LOGO img.logo {width: 286px; height: 66px;}
.LOGO img.burger, img.close {width: 31px; height: 31px;}
.hero {height: 36%;}

.overlay {top: 90px;}
ul.menu {top: 90px;}
}



/***** 1100px ******/
@media only screen and (max-width: 1100px) {
.overlay {top: 87px;}
ul.menu {top: 87px;}
}



/***** 1080px ******/
@media only screen and (max-width: 1080px) {
.LOGO .span_1_of_12.right {width: 6.30%; height: 49px; padding: 14px 0% 0% 0%;}
.LOGO .span_1_of_12.left {width: 6.30%; height: 49px; padding: 14px 0% 0% 0%;}
.LOGO .span_3_of_12 {width: 25.00%; height: 61px ; padding: 2px 0% 0% 0%;}
.LOGO .span_5_of_12 {width: 37.40%; height: 63px;}
.LOGO span.logo {font-size: 90%; line-height: 1.4;}
.LOGO img.logo {width: 272px; height: 63px;}
.LOGO img.burger, img.close {width: 30px; height: 30px;}
.hero {height: 32%;}
}



/***** 960px ******/
@media only screen and (max-width: 960px) {
.LOGO .span_1_of_12.right {width: 10%; height: 50px; padding: 13px 0% 0% 0%;}
.LOGO .span_1_of_12.left {width: 10%; height: 49px; padding: 14px 0% 0% 0%;}
.LOGO .span_3_of_12 {display: none;}
.LOGO .span_5_of_12 {width: 80%; height: 63px;}
.LOGO img.logo {width: 272px; height: 63px;}
.LOGO img.burger, img.close {width: 30px; height: 30px;}
.hero {height: 30%;}
ul.menu li a {padding: 1.0% 1.75% 1.0% 1.75%; font-size: 125%; line-height: 1.0; letter-spacing: 2px;}
}


/***** 930px ******/
@media only screen and (max-width: 930px) {
.overlay {top: 86px;}
ul.menu {top: 86px;}
}



/***** 920px ******/
@media only screen and (max-width: 920px) {
header {padding: 12px 0% 14px 0%;}
.LOGO .span_1_of_12.right {width: 10%; height: 48px; padding: 12px 0% 0% 0%;}
.LOGO .span_1_of_12.left {width: 10%; height: 45px; padding: 15px 0% 0% 0%;}
.LOGO .span_5_of_12 {width: 80%; height: 60px;}
.LOGO img.logo {width: 259px; height: 60px;}
.LOGO img.burger, img.close {width: 28px; height: 28px;}
.hero {height: 30%;}
}



/***** 880px ******/
@media only screen and (max-width: 880px) {
ul.menu li a {padding: 1.0% 2% 1.0% 2%; font-size: 125%; line-height: 1.0; letter-spacing: 2px;}
}




/***** 780px ******/
@media only screen and (max-width: 780px) {
.overlay {top: 83px;}
ul.menu {top: 83px;}
}




/***** 760px ******/
@media only screen and (max-width: 760px) {
.LOGO .span_1_of_12.right {width: 10%; height: 43px; padding: 14px 0% 0% 0%;}
.LOGO .span_1_of_12.left {width: 10%; height: 43px; padding: 14px 0% 0% 0%;}
.LOGO .span_5_of_12 {width: 80%; height: 57px;}
.LOGO img.logo {width: 247px; height: 57px;}
.LOGO img.burger, img.close {width: 27px; height: 27px;}
.hero {height: 30%;}
}




/***** 740px ******/
@media only screen and (max-width: 740px) {
.overlay {top: 78px;}
ul.menu {top: 78px;}
}






/***** 720px ******/
@media only screen and (max-width: 720px) {
.LOGO .span_1_of_12.right {width: 10%; height: 40px; padding: 12px 0% 0% 0%;}
.LOGO .span_1_of_12.left {display: none;}
.LOGO .span_5_of_12 {width: 80%; height: 52px; padding: 0% 0% 0% 10%;}
.LOGO img.logo {width: 233px; height: 52px;}
.LOGO img.burger, img.close {width: 26px; height: 26px;}
.hero {height: 28%;}
}


/***** 680px ******/
@media only screen and (max-width: 680px) {
ul.menu li a {padding: 1.0% 2.5% 1.0% 2.5%; font-size: 125%; line-height: 1.0; letter-spacing: 2px;}
}



/***** 640px ******/
@media only screen and (max-width: 640px) {
.hero {height: 27%;}
}



/***** 620px ******/
@media only screen and (max-width: 620px) {
.overlay {top: 75px;}
ul.menu {top: 75px;}
}





/***** 600px ******/
@media only screen and (max-width: 600px) {
.LOGO .span_1_of_12.right {width: 10%; height: 40px; padding: 10px 0% 0% 0%;}
.LOGO .span_5_of_12 {width: 80%; height: 50px; padding: 0% 0% 0% 10%;}
.LOGO img.logo {width: 212px; height: 50px;}
}



/***** 540px ******/
@media only screen and (max-width: 540px) {
ul.menu li a {padding: 1.0% 3% 1.0% 3%; font-size: 125%; line-height: 1.0; letter-spacing: 2px;}
}



/***** 520px ******/
@media only screen and (max-width: 520px) {
.overlay {top: 73px;}
ul.menu {top: 73px;}
}




/***** 500px ******/
@media only screen and (max-width: 500px) {
header {padding: 12px 0% 12px 0%;}
.LOGO img.logo {width: 202px; height: 48px;}
}



/***** 480px ******/
@media only screen and (max-width: 480px) {
.overlay {top: 69px;}
ul.menu {top: 69px;}
}





/***** 460px ******/
@media only screen and (max-width: 460px) {
header {padding: 10px 0% 10px 0%;}
.LOGO .span_1_of_12.right {width: 19%; width: height: 41px; padding: 9px 0% 0% 1%;}
.LOGO .span_5_of_12 {width: 64%; height: 41px; padding: 0% 0% 0% 16%;}
.LOGO img.logo {width: 192px; height: 46px;}

ul.menu li a {padding: 1.0% 3.5% 1.0% 3.5%; font-size: 125%; line-height: 1.0; letter-spacing: 2px;}
}



/***** 440px ******/
@media only screen and (max-width: 440px) {
ul.menu li a {padding: 1.0% 4% 1.0% 4%; font-size: 125%; line-height: 1.0; letter-spacing: 2px;}
}


/***** 380px ******/
@media only screen and (max-width: 380px) {
ul.menu li a {padding: 1.0% 5% 1.0% 5%; font-size: 125%; line-height: 1.0; letter-spacing: 2px;}
}