article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
body {
background: #fff;
color: #8a8c7e;
font-size: 100%;
line-height: 1.25;
font-family: 'Lato', 'Avenir Next', Arial, sans-serif;
}
.area-lightbox{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
left: 50%;
z-index: 1;
}
a {
color: #99cc33;
text-decoration: none;
outline: none;
}
a:hover, a:focus {
color: #373e18;
}
section button {
display: inline-block;
background: #a9a9a9;
color: #fff;
font-weight: 400;
padding: 10px 20px;
margin: 5px;
text-transform: uppercase;
border-radius: 2px;
letter-spacing: 1px;
}
.codrops-demos a:hover,
.codrops-demos a:active,
.codrops-demos a.current-demo {
background: #777;
}
section {
padding: 1em 2em 5em;
text-align: center;
font-size: 1.5em;
}
section p {
max-width: 600px;
margin: 0 auto;
padding: 20px 0;
}
section button {
border: none;
padding: 15px 30px;
outline: none;
background: #85b91e;
}
.related > a {
border: 1px solid #99cc33;
display: inline-block;
text-align: center;
margin: 20px 10px;
padding: 25px;
color: #99cc33;
opacity: 0.8;
-webkit-transition: color 0.3s, border-color 0.3s;
transition: color 0.3s, border-color 0.3s;
-webkit-backface-visibility: hidden;
}
.related a:hover {
border-color: #82b222;
color: #82b222;
}
.related a img {
max-width: 100%;
}
.related a h3 {
margin: 0;
padding: 0.5em 0 0.3em;
max-width: 300px;
text-align: left;
font-size: 65%;
font-weight: 400;
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
}
/*------------------------Overlay1-------------------------*/
/* overlay1 style */
.overlay1 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay1 closing cross */
.overlay1 .overlay1-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay1 .overlay1-close p{
}
/* Menu style */
.overlay1 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay1 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay1 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay1 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay1 ul li a:hover,
.overlay1 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay1-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay1-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay1 nav {
height: 70%;
font-size: 34px;
}
.overlay1 ul li {
min-height: 34px;
}
}
/*------------------------Overlay2-------------------------*/
.overlay2 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay2 closing cross */
.overlay2 .overlay2-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay2 .overlay2-close p{
}
/* Menu style */
.overlay2 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay2 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay2 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay2 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay2 ul li a:hover,
.overlay2 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay2-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay2-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay2 nav {
height: 70%;
font-size: 34px;
}
.overlay2 ul li {
min-height: 34px;
}
}
/*------------------------Overlay3-------------------------*/
.overlay3 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay3 closing cross */
.overlay3 .overlay3-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay3 .overlay3-close p{
}
/* Menu style */
.overlay3 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay3 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay3 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay3 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay3 ul li a:hover,
.overlay3 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay3-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay3-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay3 nav {
height: 70%;
font-size: 34px;
}
.overlay3 ul li {
min-height: 34px;
}
}
/*------------------------Overlay4-------------------------*/
.overlay4 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay4 closing cross */
.overlay4 .overlay4-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay4 .overlay4-close p{
}
/* Menu style */
.overlay4 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay4 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay4 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay4 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay4 ul li a:hover,
.overlay4 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay4-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay4-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay4 nav {
height: 70%;
font-size: 34px;
}
.overlay4 ul li {
min-height: 34px;
}
}
/*------------------------Overlay5-------------------------*/
.overlay5 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay5 closing cross */
.overlay5 .overlay5-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay5 .overlay5-close p{
}
/* Menu style */
.overlay5 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay5 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay5 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay5 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay5 ul li a:hover,
.overlay5 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay5-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay5-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay5 nav {
height: 70%;
font-size: 34px;
}
.overlay5 ul li {
min-height: 34px;
}
}
/*------------------------Overlay6-------------------------*/
.overlay6 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay6 closing cross */
.overlay6 .overlay6-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay6 .overlay6-close p{
}
/* Menu style */
.overlay6 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay6 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay6 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay6 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay6 ul li a:hover,
.overlay6 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay6-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay6-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay6 nav {
height: 70%;
font-size: 34px;
}
.overlay6 ul li {
min-height: 34px;
}
}
/*------------------------overlay7-------------------------*/
.overlay7 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay7 closing cross */
.overlay7 .overlay7-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay7 .overlay7-close p{
}
/* Menu style */
.overlay7 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay7 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay7 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay7 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay7 ul li a:hover,
.overlay7 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay7-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay7-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay7 nav {
height: 70%;
font-size: 34px;
}
.overlay7 ul li {
min-height: 34px;
}
}
/*------------------------overlay8-------------------------*/
.overlay8 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay8 closing cross */
.overlay8 .overlay8-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay8 .overlay8-close p{
}
/* Menu style */
.overlay8 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay8 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay8 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay8 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay8 ul li a:hover,
.overlay8 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay8-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay8-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay8 nav {
height: 70%;
font-size: 34px;
}
.overlay8 ul li {
min-height: 34px;
}
}
/*------------------------overlay9-------------------------*/
.overlay9 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay9 closing cross */
.overlay9 .overlay9-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay9 .overlay9-close p{
}
/* Menu style */
.overlay9 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay9 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay9 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay9 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay9 ul li a:hover,
.overlay9 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay9-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay9-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay9 nav {
height: 70%;
font-size: 34px;
}
.overlay9 ul li {
min-height: 34px;
}
}
/*------------------------overlay10-------------------------*/
.overlay10 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay10 closing cross */
.overlay10 .overlay10-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay10 .overlay10-close p{
}
/* Menu style */
.overlay10 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay10 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay10 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay10 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay10 ul li a:hover,
.overlay10 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay10-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay10-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay10 nav {
height: 70%;
font-size: 34px;
}
.overlay10 ul li {
min-height: 34px;
}
}
/*------------------------overlay11-------------------------*/
.overlay11 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay11 closing cross */
.overlay11 .overlay11-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay11 .overlay11-close p{
}
/* Menu style */
.overlay11 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay11 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay11 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay11 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay11 ul li a:hover,
.overlay11 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay11-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay11-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay11 nav {
height: 70%;
font-size: 34px;
}
.overlay11 ul li {
min-height: 34px;
}
}
/*------------------------overlay12-------------------------*/
.overlay12 {
position: fixed;
border-radius: 12px;
width: 90%;
max-width: 790px;
background: rgba(153,204,51,0.9);
}
/* overlay12 closing cross */
.overlay12 .overlay12-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay12 .overlay12-close p{
}
/* Menu style */
.overlay12 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay12 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay12 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay12 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay12 ul li a:hover,
.overlay12 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay12-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay12-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay12 nav {
height: 70%;
font-size: 34px;
}
.overlay12 ul li {
min-height: 34px;
}
}
/*------------------------overlay13-------------------------*/
.overlay13 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay13 closing cross */
.overlay13 .overlay13-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay13 .overlay13-close p{
}
/* Menu style */
.overlay13 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay13 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay13 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay13 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay13 ul li a:hover,
.overlay13 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay13-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay13-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay13 nav {
height: 70%;
font-size: 34px;
}
.overlay13 ul li {
min-height: 34px;
}
}
/*------------------------overlay14-------------------------*/
.overlay14 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay14 closing cross */
.overlay14 .overlay14-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay14 .overlay14-close p{
}
/* Menu style */
.overlay14 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay14 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay14 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay14 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay14 ul li a:hover,
.overlay14 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay14-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay14-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay14 nav {
height: 70%;
font-size: 34px;
}
.overlay14 ul li {
min-height: 34px;
}
}
/*------------------------overlay15-------------------------*/
.overlay15 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay15 closing cross */
.overlay15 .overlay15-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay15 .overlay15-close p{
}
/* Menu style */
.overlay15 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay15 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay15 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay15 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay15 ul li a:hover,
.overlay15 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay15-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay15-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay15 nav {
height: 70%;
font-size: 34px;
}
.overlay15 ul li {
min-height: 34px;
}
}
/*------------------------overlay16-------------------------*/
.overlay16 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay16 closing cross */
.overlay16 .overlay16-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay16 .overlay16-close p{
}
/* Menu style */
.overlay16 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay16 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay16 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay16 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay16 ul li a:hover,
.overlay16 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay16-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay16-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay16 nav {
height: 70%;
font-size: 34px;
}
.overlay16 ul li {
min-height: 34px;
}
}
/*------------------------overlay17-------------------------*/
.overlay17 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay17 closing cross */
.overlay17 .overlay17-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay17 .overlay17-close p{
}
/* Menu style */
.overlay17 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay17 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay17 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay17 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay17 ul li a:hover,
.overlay17 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay17-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay17-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay17 nav {
height: 70%;
font-size: 34px;
}
.overlay17 ul li {
min-height: 34px;
}
}
/*------------------------overlay18-------------------------*/
.overlay18 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay18 closing cross */
.overlay18 .overlay18-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay18 .overlay18-close p{
}
/* Menu style */
.overlay18 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay18 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay18 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay18 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay18 ul li a:hover,
.overlay18 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay18-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay18-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay18 nav {
height: 70%;
font-size: 34px;
}
.overlay18 ul li {
min-height: 34px;
}
}
/*------------------------overlay19-------------------------*/
.overlay19 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay19 closing cross */
.overlay19 .overlay19-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay19 .overlay19-close p{
}
/* Menu style */
.overlay19 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay19 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay19 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay19 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay19 ul li a:hover,
.overlay19 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay19-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay19-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay19 nav {
height: 70%;
font-size: 34px;
}
.overlay19 ul li {
min-height: 34px;
}
}
/*------------------------overlay20-------------------------*/
.overlay20 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay20 closing cross */
.overlay20 .overlay20-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay20 .overlay20-close p{
}
/* Menu style */
.overlay20 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay20 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay20 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay20 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay20 ul li a:hover,
.overlay20 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay20-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay20-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay20 nav {
height: 70%;
font-size: 34px;
}
.overlay20 ul li {
min-height: 34px;
}
}
/*------------------------overlay21-------------------------*/
.overlay21 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay21 closing cross */
.overlay21 .overlay21-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay21 .overlay21-close p{
}
/* Menu style */
.overlay21 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay21 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay21 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay21 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay21 ul li a:hover,
.overlay21 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay21-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay21-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay21 nav {
height: 70%;
font-size: 34px;
}
.overlay21 ul li {
min-height: 34px;
}
}
/*------------------------overlay22-------------------------*/
.overlay22 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay22 closing cross */
.overlay22 .overlay22-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay22 .overlay22-close p{
}
/* Menu style */
.overlay22 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay22 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay22 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay22 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay22 ul li a:hover,
.overlay22 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay22-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay22-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay22 nav {
height: 70%;
font-size: 34px;
}
.overlay22 ul li {
min-height: 34px;
}
}
/*------------------------overlay23-------------------------*/
.overlay23 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay23 closing cross */
.overlay23 .overlay23-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay23 .overlay23-close p{
}
/* Menu style */
.overlay23 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay23 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay23 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay23 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay23 ul li a:hover,
.overlay23 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay23-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay23-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay23 nav {
height: 70%;
font-size: 34px;
}
.overlay23 ul li {
min-height: 34px;
}
}
/*------------------------overlay24-------------------------*/
.overlay24 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay24 closing cross */
.overlay24 .overlay24-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay24 .overlay24-close p{
}
/* Menu style */
.overlay24 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay24 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay24 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay24 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay24 ul li a:hover,
.overlay24 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay24-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay24-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay24 nav {
height: 70%;
font-size: 34px;
}
.overlay24 ul li {
min-height: 34px;
}
}
/*------------------------overlay25-------------------------*/
.overlay25 {
position: fixed;
border-radius: 12px;
width: 700px;
height: 400px;
background: rgba(153,204,51,0.9);
}
/* overlay25 closing cross */
.overlay25 .overlay25-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
-webkit-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
-moz-box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
box-shadow: -10px 10px 18px -7px rgba(76,9,39,1);
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay25 .overlay25-close p{
}
/* Menu style */
.overlay25 nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay25 ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay25 ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay25 ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay25 ul li a:hover,
.overlay25 ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay25-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay25-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
.overlay25 nav {
height: 70%;
font-size: 34px;
}
.overlay25 ul li {
min-height: 34px;
}
}
/*------------------------overlay25-------------------------*/
/* Overlay style */
.overlay {
position: fixed;
border-radius: 12px;
width: 400px;
height: 550px;
background: rgba(153,204,51,0.9);
}
/* Overlay closing cross */
.overlay .overlay-close {
width: 50px;
height: 50px;
position: absolute;
right: -10px;
top: -10px;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: #f46262;
color: white;
outline: none;
font-size: 30px;
z-index: 100;
}
.overlay .overlay-close p{
}
/* Menu style */
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #f0f0f0;
}
/* Effects */
.overlay-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.overlay-scale.open {
visibility: visible;
opacity: 1;
-webkit-box-shadow: -21px 18px 32px -7px rgba(76,9,39,1);
-moz-box-shadow: -21px 18px 32px -7px rgba(76,9,39,1);
box-shadow: -21px 18px 32px -7px rgba(76,9,39,0.8);
-webkit-transform: scale(1);
transform: scale(1);	
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
.info{
max-width:70%;
margin:0 auto;
text-align:center;
padding:30px;
}
@media screen and (max-height: 30.5em) {
.overlay nav {
height: 70%;
font-size: 34px;
}
.overlay ul li {
min-height: 34px;
}
}
@media(max-width:768px){
.overlay1{
width: 360px;
height: 244px;
}
.overlay2{
width: 360px;
height: 244px;	
}
.overlay3{
width: 360px;
height: 244px;		
}
.overlay4{
width: 360px;
height: 244px;		
}
.overlay5{
width: 360px;
height: 244px;	
}
.overlay6{
width: 360px;
height: 244px;		
}
.overlay7{
width: 360px;
height: 244px;		
}
.overlay8{
width: 360px;
height: 244px;		
}
.overlay9{
width: 360px;
height: 244px;		
}
.overlay10{
width: 360px;
height: 244px;		
}
.overlay11{
width: 360px;
height: 244px;		
}
.overlay12{
width: 360px;
height: 244px;		
}
.overlay13{
width: 360px;
height: 244px;		
}
.overlay14{
width: 360px;
height: 244px;		
}
.overlay15{
width: 360px;
height: 244px;		
}
.overlay16{
width: 360px;
height: 244px;		
}
.overlay17{
width: 360px;
height: 244px;		
}
.overlay18{
width: 360px;
height: 244px;		
}
.overlay19{
width: 360px;
height: 244px;		
}
.overlay20{
width: 360px;
height: 244px;		
}
.overlay21{
width: 360px;
height: 244px;		
}
.overlay22{
width: 360px;
height: 244px;		
}
.overlay23{
width: 360px;
height: 244px;		
}
.overlay24{
width: 360px;
height: 244px;		
}
.overlay25{
width: 360px;
height: 244px;		
}

.overlay1 .overlay1-close{
width: 40px;
height: 40px;
}	
.overlay2 .overlay2-close{
width: 40px;
height: 40px;
}	
.overlay3 .overlay3-close{
width: 40px;
height: 40px;
}	
.overlay4 .overlay4-close{
width: 40px;
height: 40px;
}	
.overlay5 .overlay5-close{
width: 40px;
height: 40px;
}	
.overlay6 .overlay6-close{
width: 40px;
height: 40px;
}	
.overlay7 .overlay7-close{
width: 40px;
height: 40px;
}	
.overlay8 .overlay8-close{
width: 40px;
height: 40px;
}	
.overlay9 .overlay9-close{
width: 40px;
height: 40px;
}	
.overlay10 .overlay10-close{
width: 40px;
height: 40px;
}	
.overlay11 .overlay11-close{
width: 40px;
height: 40px;
}	
.overlay12 .overlay12-close{
width: 40px;
height: 40px;
}	
.overlay13 .overlay13-close{
width: 40px;
height: 40px;
}	
.overlay14 .overlay14-close{
width: 40px;
height: 40px;
}	
.overlay156 .overlay156-close{
width: 40px;
height: 40px;
}	
.overlay16 .overlay16-close{
width: 40px;
height: 40px;
}	
.overlay17 .overlay17-close{
width: 40px;
height: 40px;
}	
.overlay18 .overlay18-close{
width: 40px;
height: 40px;
}	
.overlay19 .overlay19-close{
width: 40px;
height: 40px;
}	
.overlay20 .overlay20-close{
width: 40px;
height: 40px;
}	
.overlay21 .overlay21-close{
width: 40px;
height: 40px;
}	
.overlay22 .overlay22-close{
width: 40px;
height: 40px;
}	
.overlay23 .overlay23-close{
width: 40px;
height: 40px;
}	
.overlay24 .overlay24-close{
width: 40px;
height: 40px;
}	
.overlay25 .overlay25-close{
width: 40px;
height: 40px;
}	

}