#overlay {width: 100%; height: 100%; display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.95); color: #fff; z-index: 9; overflow: hidden; font-family: 'Open Sans', Helvetica, sans-serif; transition: opacity 0.5s ease-out, max-height 0.5s ease-out;}

.fa-bars {display: block; position: absolute; top: 2%; right: 10%; font-size: 4.0vw; z-index: 2; cursor: pointer;}
.fa-bars:hover {opacity: 0.75;}

 .fa-circle-xmark {display: block; position: absolute; top: 2%; right: 10%; font-size: 4.5vw; z-index: 2; cursor: pointer; color: #b2a9b6;}
.fa-circle-xmark:hover {opacity: 0.75;}

div.containerListItem {margin: 8% 0% 5% 0%;}
span.listItem {width: 100%; margin: 0%; padding: 1%; text-align: center; display: block; font-size: 2.5vw;}

div.containerListItem a {display: block; text-decoration: none; color: #b2a9b6;}
div.containerListItem a:hover {opacity: 0.75;}


/*  BEGIN RESPONSIVE  =============================================================================*/

/* 1260px */
@media only screen and (max-width: 1260px) {

}

/* 1080px */
@media only screen and (max-width: 1080px) {
}

/*  840px  =============================================================================*/
@media only screen and (max-width: 840px) {

}

/* 760px */
@media only screen and (max-width: 760px) {

}

/* 680px */
@media only screen and (max-width: 680px) {

}

/*  600px  =============================================================================*/
@media only screen and (max-width: 600px) {

}

/*  480px  =============================================================================*/
@media only screen and (max-width: 480px) {

}