/*******************************************************************
*** --- SITE STYLES --- ********************************************
********************************************************************/

/* --- SET DEFAULT HTML/BODY --- */
html {
	height:100%;
}

body {
	background:#fff;  
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color:#4d4d4d;    
}


/* Common to all pages */
#siteContainer {
	position:relative;
	width:960px;
	margin:0 auto;
}
h1{
  font-size: 1.5em;
  font-weight:300;
  letter-spacing: 2px;
}


.home #content {
	min-height: 60px;
	padding: 0px;
}

#content {
	width:100%;
	min-height:625px;
	padding:0 0 30px 0;
}

.headersH1 {
	color:#000;
	letter-spacing:3px;
	text-transform:inherit;
	font-size:27px;
	font-weight:100;
	font-style:normal;
	/* font-variant:small-caps; */
}

.headersH3 {
	color:#000;
	letter-spacing:2px;
	text-transform:inherit;
	font-size:21px;
	font-weight:100;
	font-style:normal;
	/* font-variant:small-caps; */
}

.newsHeader {
	padding-bottom:30px;
}

.paragraphHeaders {
	color:#000;
	letter-spacing:2px;
	text-transform:inherit;
	font-size:21px;
	font-weight:100;
	font-style:normal;
	/* font-variant:small-caps; */
	padding-top:50px;
	margin-bottom:31px;
}

.headersH4 {
	color:#000;
	letter-spacing:2px;
	line-height:27px;
	text-transform:uppercase;
	font-size:12px;
	font-weight:100;
	font-style:normal;
	font-variant:normal;
}

.exhibitionDetailHeader {
	margin-bottom:35px;
}


/* Header and branding */
#headerContainer {
	width:100%;
    height:50px;
	background:transparent;
}

#header {
	position:relative;
	width:960px;
  margin: 0 0 0 50px;
}

#branding {
	position:absolute;
	width:220px;
	margin-top:10px;
}


/* Navigation */
#navigation {
    position:absolute;
    top:22px;
    left:235px;
    width:630px;
}

#navItems li {
    display:inline; /* IE7 staircase fix*/
}

#navItems li a {
    float:left;
    margin-right:17px;
  	letter-spacing:2px;
  	font-size:12px;
    font-weight:400;
}

#navItems a.active {
	color:#000;
}

/* Home */
header#headerContainer.homeHeader {
}

.homeHeader {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index:1;
}

/* slides */

div#slidesContainer{
	width:960px;
	height:620px;
	background: rgb(209,209,209); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(209,209,209,1) 8%, rgba(176,176,176,1) 30%, rgba(164,164,164,1) 69%, rgba(164,164,164,1) 72%, rgba(171,171,171,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,rgba(209,209,209,1)), color-stop(30%,rgba(176,176,176,1)), color-stop(69%,rgba(164,164,164,1)), color-stop(72%,rgba(164,164,164,1)), color-stop(100%,rgba(171,171,171,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(209,209,209,1) 8%,rgba(176,176,176,1) 30%,rgba(164,164,164,1) 69%,rgba(164,164,164,1) 72%,rgba(171,171,171,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(209,209,209,1) 8%,rgba(176,176,176,1) 30%,rgba(164,164,164,1) 69%,rgba(164,164,164,1) 72%,rgba(171,171,171,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(209,209,209,1) 8%,rgba(176,176,176,1) 30%,rgba(164,164,164,1) 69%,rgba(164,164,164,1) 72%,rgba(171,171,171,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(209,209,209,1) 8%,rgba(176,176,176,1) 30%,rgba(164,164,164,1) 69%,rgba(164,164,164,1) 72%,rgba(171,171,171,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#ababab',GradientType=0 ); /* IE6-9 */
}

div.caption {
	background:none !important;
	text-align:center;
	font-size:11px;
	position:absolute;
	top: 530px;
	left: 0px;
	width: 800px;
	padding: 0px;
	height: 39px;
	overflow: hidden;
}

div.slides_container div.slides_control div.slide div.caption p {
	font-size:9px;
	color:#FFFFFF;
	margin:0px;
	padding:0px;
	letter-spacing:1px;
	line-height:14px;
	text-transform:none;
}

/* About/Exhibitions/Artists/Rental */

div.aboutContainer,
div.rentalContainer{
	position:relative;
	padding-bottom: 40px;
}

div#siteContainer.artists h3.headersH3{
	margin-bottom:30px;
}

.about h3.headersH3,
.rental h3.headersH3,
.error404 h3.headersH3 {
	margin-bottom:30px;
}

.error404 p {
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 1px;
	color: #999;
}

.about div#slidesContainer,
.rental div#slidesContainer {
	margin-bottom:30px;
}

.about #slides,
.rental #slides {
	margin: 0px;
}

.about #slides .slides_container,
.rental #slides .slides_container {
	left: 0px;
	top: 0px;
	width: 960px;
	height: 460px;
}

.contact #googleMap {
	margin:30px 0 30px 0;
}

.aboutText,.aboutInfo,
.exhibitDetailText, .exhibitDetailInfo,
.artistDetailText, .artistDetailInfo,
.rentalText,.rentalInfo {
	float:left;
}

.about .aboutText,
.exhibitDetailText,
.artistDetailText,
.rental .rentalText {
	width:570px;
	margin-right:70px;
}

.about .aboutText h3,
.exhibitDetailText h3,
.artistDetailText h3,
.rental .rentalText h3 {
	margin-bottom:50px;
}

.about .aboutText p,
.exhibitDetailText p,
.artistDetailText p,
.rental .rentalText p,
.rentalPDFForm p,
.selectedPress p
{
	margin-bottom:35px;
	font-size: 16px; line-height: 32px;  letter-spacing: 1px; color: #999;
}

.rentalPDFForm p {
	margin: 0px;
}

.about .aboutInfo,
.exhibitDetailInfo,
.rental .rentalInfo {
	width:320px;
	line-height:32px;
}

.exhibitDetailInfo {
	margin-top:35px;
}

.artistDetailInfo {
	margin-top:35px;
}

.about .aboutInfo .contact,
.exhibitDetailInfo .contact,
.artistDetailInfo .contact,
.rental .rentalInfo .contact {
	margin-bottom:50px;
}

.about .aboutInfo .contact address,
.about .aboutInfo .contact address p,
.about .aboutInfo .hours p,
.exhibitDetailInfo .contact address,
.exhibitDetailInfo .contact address p,
.exhibitDetailInfo .hours p,
.artistDetailInfo .contact address,
.artistDetailInfo .contact address p,
.artistDetailInfo .hours p,
.rental .rentalInfo .contact address,
.rental .rentalInfo .contact address p,
.rental .rentalInfo .hours p {
	letter-spacing:2px;
	line-height:27px;
	text-transform:uppercase;
	font-size:12px;
	font-style:normal;
}


/* Exhibitions */

section#content section.exhibitDetailText h4.headersH4 {
	margin-top: 35px;
	margin-bottom: 5px;
}

.exhibitionImg {
	position:relative;
	width:960px;
	height:460px;
	margin:30px 0 35px 0;
}

/*.exhibitions .exhibitText p,
.exhibitionsDetail p,
.artistsDetail p {
	margin:0 0 50px;
	letter-spacing:2px;
	line-height:27px;
	text-transform:inherit;
	font-size:12px;
}
*/

.serverError p {
	margin:50px 0 50px;
	letter-spacing:1px;
	line-height:32px;
	text-transform:inherit;
	font-size: 16px;
}

.serverError a,
.rentalInfo a,
.rentalPDFForm a{
	letter-spacing:2px;
	line-height:27px;
	text-transform:inherit;
	font-size:12px;
}

section#content section.exhibitText p {
	/* text-transform:uppercase; */
	/* margin-bottom:100px; */
}

.exhibitions .subtitle {
	margin: 0 0 100px 0;
	text-transform: uppercase;
}

.exhibitionsDetail p {
	margin-bottom:35px;
}

.exhibitions .exhibitText h1.headersH1,
.exhibitionsDetail .exhibitDetailText h1.headersH1 {
	line-height:37px;
	margin: 0 0 15px 0;
}

.grayDesc {
	font-family:'Garamond 3 LT W01 SC';
	letter-spacing: 3px;
	/* font-family:'Garamond 3 W01';
	/* font-variant:small-caps; */
}

.blackDesc {
	font-family:'Garamond 3 W01';
	color:#000 !important;
}

.blackDescTitle {
	font-family:'Garamond 3 W01';
	color:#000 !important;
	letter-spacing: 2px;
}

.grayDesc {
	color:#999 !important;
}

.exSubtitle {
	font-family:'Garamond 3 W01';
	letter-spacing: 3px;
	font-variant: normal;
	color: #000;
}

.exhibitionTitle {
	padding-bottom:15px;
}

#pastExhibitYears {
  position:relative;
  top:-38px;
  left:247px;
	width:740px;
	letter-spacing:2px;
	line-height:27px;
	text-transform:uppercase;
	font-size:12px;
}

.exhibitions .exhibitText span#pastExhibitYears a {
	margin-right:30px
}

 span#pastExhibitYears a.selected {
 	color: #000;
 }

.exhibitions figure.exhibitThumb,
.artists figure.artistThumb {
	float:left;
	width:300px;
	margin:0 20px 50px 0;
}

section#thumbs figure.artistThumb {
	float:left;
	width:300px;
	margin:0 20px 55px 0;
}

.exhibitions figure.exhibitThumb figcaption,
.artists figure.artistThumb figcaption {
	padding-top:10px;
	letter-spacing:2px;
	line-height:21px;
	text-transform:uppercase;
	font-family:'Garamond 3 W01';
	font-size:12px;
}

.exhibitionsDetail .exhibitDetailText h4.headersH4,
.artistsDetail .artistDetailText h4.headersH4 {
	margin-top:35px;
	margin-bottom: 5px;
}

a.downloadPDF, a.viewLink  {
	text-transform:uppercase;
	font-family: 'Garamond 3 W01';
	font-size: 12px;
	letter-spacing: 2px;
}

a.downloadPDF {
	margin-right:18px;
}

.selectedPress {
	width:590px;
	margin-top:67px;
	font-variant:normal;
}
section.selectedPress h4.headersH4 {
	text-transform:uppercase;
	font-variant:normal;
}


.selectedPressDate{
	text-transform:uppercase;
}

.selectedPress p {
	margin: 0 0 6px 0;
	width:590px;
}

section#content p.paragraphDetail {
	margin-bottom:40px;
	text-transform:uppercase;
}

section.article header {
	margin: 0 0 15px 0;
}

.article-date {
	margin: 20px 0 0 0; display: block; font-size: 12px; line-height: 27px; font-family: 'Garamond 3 W01'; font-weight: 100; letter-spacing: 2px; text-transform: uppercase;
}

.newsSubtitle {
	xmargin-bottom:35px;
}

.newsParagraphs p {
    font-family: 'Garamond 3 W01';
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 32px;
    margin-bottom:35px;
    text-transform: inherit;
}

p.readMore {
	margin-bottom:30px;
	text-transform:uppercase;
	font-size: 12px;
	line-height: 32px;
	font-family: 'Garamond 3 W01';
	font-weight: 100;
	letter-spacing: 2px;
	text-transform: uppercase;
}


/* Artists */
.artists h3.headersH3 {
	margin-bottom:40px;
}

.artists #thumbs {
	margin-bottom:45px;
}

.artistsSections {
	margin-bottom:80px;
}

.artistList {
	/* height:155px; */
	float:left;
	width:315px;
	text-transform:uppercase;
	margin-bottom:60px;
}

.artistList li {
	letter-spacing:2px;
	line-height:27px;
	font-family:'Garamond 3 W01';
	font-size:12px;
}

.artistList li a {
	letter-spacing:2px;
	line-height:27px;
	font-family:'Garamond 3 W01';
	font-size:12px;
}

.artistList li.cleaner {
	clear: both;
	float: none;
	width: auto;
	height: 0px;
	overflow: hidden;
}

.artistsDetail h1.headersH1 {
	margin-bottom:35px;
}

.artistsDetail div.artistSubtitle {
	margin: -15px 0 0 0;
}

.artistsDetail div.artistSubtitle p {
	margin-bottom:30px;
	font-size:11px;
}


.affArts {
	font-family:'Garamond 3 W01', serif;
	font-size:12px;
	letter-spacing:2px;
	text-transform:uppercase;
	position:absolute;
	top: 8px;
	right:0;
}

/* Contact */
#googleMap {
	width:960px;
	height:460px;
}

.contact .contactText {
	margin-bottom:75px;
}

.contact .contactSection {
	width:590px;
}

.contact join.contactSection {
	width:637px;
}

.contact ul.contactText, .contact ul.contactList {
	margin-bottom:0 !important;
}

.contact ul.contactText li, .contact .contactText ul.staff li, .contact ul.contactList li, .contact .contactList ul.staff li {
	float:left;
}

.contact ul.contactText li, .contact ul.contactList li {
	letter-spacing:2px;
	line-height:27px;
	text-transform:uppercase;
	font-family:'Garamond 3 W01';
	font-size:12px;
}

.contact ul.contactText li, .contact .contactText ul.staff li, .contact ul.contactList li, .contact .contactList ul.staff li {
	width:250px;
	margin:0 70px 40px 0;
}

.contact .contactText ul.staff li, .contact .contactList ul.staff li {
	margin-bottom:0px; line-height: 27px;
}

.contact .contactText ul.staff li a, .contact .contactList ul.staff li a {
	color:#999;
	letter-spacing:2px;
}

ul.staff {
	font-family:'Garamond 3 W01', serif;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:2px;
}

.contact .contactText ul.staff li a:hover {
	color:#000;
}

.contact .contactText h3.headersH3 {
	margin-bottom:31px;
}

.contact .contactText p {
	line-height:32px;
	letter-spacing:1px;
	font-family:'Garamond 3 W01';
	font-size: 16px;
	margin-bottom:35px;
}

.contact .contactText form {
	padding-top:15px;
	height: 40px;
}

.contact .contactText form input {
	float: left;
	width:220px;
	height:14px;
	padding:10px 0 10px 15px;
	color:#999999;
	border:1px solid #CCC;
	/* font-variant:small-caps; */
	font-size: 12px;
	font-style:normal;
	font-family:'Garamond 3 W01', serif;
	text-transform:inherit;
}

.contact .contactText form input#name {
	margin-right:20px;
}

.contact .contactText form input#submit {
	width:45px;
	margin:5px 0 0 15px;
	padding:0;
	font-size:21px;
	height: 24px;
	border:none;
	background:transparent;
	/* font-variant:small-caps; */
	font-style:normal;
	font-family:'Garamond 3 W01', serif;
	text-transform:inherit;
	color:#000000;
}

.rental section#content .rentalInfo section.contact, 
.rental section#content .rentalInfo section.contact p {
	text-transform:uppercase;
	font-family:'Garamond 3 W01';
	font-size:12px;
	letter-spacing: 2px;
}

.newsAndEvents article section.article,
.newsAndEvents article aside.figure {
	float:left;
}

.newsAndEvents article section.article {
	width:570px;
	margin-right:70px;
	margin-bottom: 70px;
}

address a,
.contactInfo a{
	letter-spacing:2px;
}

/* Kludges */
.noMarginBottom {
	margin-bottom:0 !important;
}

.noMarginRight {
	margin-right:0 !important;
}

.trans-upper {
	text-transform: uppercase;
}

.cleaner {
	clear: both;
	height: 0px;
	overflow: hidden;
}

p.nodata {
	margin: 35px 0 0 0;
	font-family: 'Garamond 3 W01';
	font-size: 16px;
}

p.nodata-news {
	margin: 0px 0 0 0;
}

.slide-image {
	width: 800px;
	height: 515px;
}

.links-index {
	margin: 0 0 35px 0;
}

.links-detail {
	margin: 0 0 67px 0;
}

.link-item {
	margin: 0 0 5px 0;
}

.range {
	display: none;
        position: absolute;
        top: 0px;
        left: 0px;
}

.visible {
	display: block;
}

.subtitle {
	margin: -15px 0 30px 0;
}

.subtitle p {
	margin: 0 0 30px 0;
	letter-spacing: 2px;
	line-height: 27px;
	text-transform: inherit;
	font-family: 'Garamond 3 W01';
	font-size: 12px;
}

.rentalPDFForm p {
	font-size: 16px; line-height: 32px; font-family: 'Garamond 3 W01'; letter-spacing: 1px; color: #999;
}

.rentalText p {
	font-size: 16px; line-height: 32px; font-family: 'Garamond 3 W01'; letter-spacing: 1px; color: #999;
}

.pressItem {
	margin: 4px 0 30px 0;
}

.pressDate {
	margin: 0 0 -4px 0; font-size: 12px; line-height: 32px; font-family: 'Garamond 3 W01'; letter-spacing: 2px; text-transform: uppercase;
}

.pressLinks {
	margin: 0px;
}


.credits {
	margin: -7px 0 0 0;
	font-family: Arial, sans-serif;
	font-size: 9px;
}

.relative {
    position: relative;
}

footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 35px;
z-index: 100;
text-align: right;
font-family: Cinzel, sans-serif;
font-size: 10px;
}
.pad6 {
padding: 9px;
text-transform:uppercase;
}

#primary_nav_wrap
{
	
    position:absolute;
    top:16px;
    left:235px;
    width:630px;
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a, #primary_nav_wrap ul span 
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block;
}
#cssmenu{display:none;}

                                                      

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: 'Open Sans', sans-serif;
  line-height: 1;
  background: #ffffff;
  display:none;
}
#menu-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #009ae1;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > a {
  padding: 10px 20px;
  font-size: 10px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000000;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #009ae1;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 25px;
}
#cssmenu > ul > li.has-sub > a::after {
  position: absolute;
  top: 21px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  content: "";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
#cssmenu > ul > li.has-sub:hover > a::after {
  border-color: #009ae1;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  right: 0;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  -ms-transition: height .2s ease;
  -o-transition: height .2s ease;
  transition: height .2s ease;
}
#cssmenu ul li:hover > ul > li {
  height: 32px;
}
#cssmenu ul ul li a {
  padding: 10px 20px;
  width: 160px;
  font-size: 10px;
  background: #333333;
  text-decoration: none;
  color: #dddddd;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul li.has-sub > a::after {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  content: "";
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
  right: auto;
  left: 10px;
  border-bottom: 0;
  border-right: 0;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}
#cssmenu ul ul li.has-sub:hover > a::after {
  border-color: #ffffff;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #primary_nav_wrap, #branding{display:none;}
  #cssmenu{display:block;}
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul,
  #cssmenu.align-right ul ul {
    text-align: left;
  }
  #cssmenu ul li,
  #cssmenu ul ul li,
  #cssmenu ul li:hover > ul > li {
    width: 100%;
    height: auto;
    border-top: 1px solid rgba(120, 120, 120, 0.15);
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
  }
  #cssmenu > ul > li,
  #cssmenu.align-center > ul > li,
  #cssmenu.align-right > ul > li {
    float: none;
    display: block;
  }
  #cssmenu ul ul li a {
    padding: 20px 20px 20px 30px;
    font-size: 10px;
    color: #000000;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li a:hover {
    color: #000000;
  }
  #cssmenu ul ul ul li a {
    padding-left: 40px;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul {
    position: relative;
    left: 0;
    right: auto;
    width: 100%;
    margin: 0;
  }
  #cssmenu > ul > li.has-sub > a::after,
  #cssmenu ul ul li.has-sub > a::after {
    display: none;
  }
  #menu-line {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 20px;
    color: #000000;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
  }
  #cssmenu #menu-button::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 15px;
    height: 2px;
    background: #000000;
  }
  #cssmenu #menu-button::before {
    content: '';
    position: absolute;
    top: 25px;
    right: 20px;
    display: block;
    width: 15px;
    height: 3px;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.15);
    height: 52px;
    width: 52px;
    cursor: pointer;
  }
  #cssmenu .submenu-button::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 26px;
    display: block;
    width: 1px;
    height: 11px;
    background: #000000;
    z-index: 99;
  }
  #cssmenu .submenu-button::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 26px;
    display: block;
    width: 11px;
    height: 1px;
    background: #000000;
    z-index: 99;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    display: none;
  }
}