@charset "UTF-8"; .nav hr { margin: 1em 0em; border: 0px; } .nav { width: 320px; max-width: 320px; height: 100%; position: fixed; top: 0; bottom: 0; margin: 0; right: -360px; padding: 15px 20px; -webkit-transition: right 0.3s; -moz-transition: right 0.3s; transition: right 0.3s; background: #F0F0F0; z-index: 9998; } .nav-toggle { position: absolute; right: 357px; top: 10em; padding: 0.5em; width: 32px; background: #4C7318; background-image:-webkit-linear-gradient(#99cc00, #66cc00); background-image:-moz-linear-gradient(#99cc00, #66cc00); background-image:-ms-linear-gradient(#99cc00, #66cc00); background-image:linear-gradient(#99cc00, #66cc00); color: #FFFFFF; cursor: pointer; font-size: 1.2em; line-height: 1; z-index: 999999999999999; -webkit-transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out; transition: color .25s ease-in-out; border: 1px solid #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .nav-toggle:after { content: '\2630'; text-decoration: none; } .nav-toggle:hover { color: #f4f4f4; } [id='nav-toggle'] { position: absolute; display: none; } [id='nav-toggle']:checked ~ .nav > .nav-toggle { left: auto; right: 20px; top: 1em; border: 0px; } [id='nav-toggle']:checked ~ .nav { right: 0; -moz-box-shadow: -4px 0px 20px 0px rgba(0,0,0, 0.5); -webkit-box-shadow: -4px 0px 20px 0px rgba(0,0,0, 0.5); box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5); overflow-y: auto; } [id='nav-toggle']:checked ~ main > article { -webkit-transform: translateX(-320px); -moz-transform: translateX(-320px); transform: translateX(-320px); } [id='nav-toggle']:checked ~ .nav > .nav-toggle { background-image:-webkit-linear-gradient(#99cc00, #66cc00); background-image:-moz-linear-gradient(#99cc00, #66cc00); background-image:-ms-linear-gradient(#99cc00, #66cc00); background-image:linear-gradient(#99cc00, #66cc00); font-size: 1.4em; line-height: 1; padding: 0.5em; height: auto; width: auto; position: fixed; border-radius: 25%; } [id='nav-toggle']:checked ~ .nav > .nav-toggle i { display: none; background: none; } [id='nav-toggle']:checked ~ .nav > .nav-toggle:after { content: '\2715'; } body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { to { padding: 0; } } .nav h2 { width: 90%; padding: 0; margin: 10px 0px; text-align: left; font-size: 1.3em; line-height: 1.2em; font-weight: 100; opacity: 0; text-transform: uppercase; color: cornflowerblue; } .nav h2 a { text-decoration: none; color: cornflowerblue; } [id='nav-toggle']:checked ~ .nav h2 { opacity: 1; -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } .nav > ul { display: block; margin: 0; padding: 0; list-style: none; } .nav > ul:last-of-type { margin-bottom: 3em; } .nav > ul > li { line-height: 2.5; opacity: 0; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; -moz-transition: opacity .5s .1s, -moz-transform .5s .1s; -ms-transition: opacity .5s .1s, -ms-transform .5s .1s; transition: opacity .5s .1s, transform .5s .1s; } [id='nav-toggle']:checked ~ .nav > ul > li { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .nav > ul > li:nth-child(2) { -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s; transition: opacity .5s .2s, transform .5s .2s; } .nav > ul > li:nth-child(3) { -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s; transition: opacity .5s .3s, transform .5s .3s; } .nav > ul > li:nth-child(4) { -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s; transition: opacity .5s .4s, transform .5s .4s; } .nav > ul > li:nth-child(5) { -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s; transition: opacity .5s .5s, transform .5s .5s; } .nav > ul > li:nth-child(6) { -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; transition: opacity .5s .6s, transform .5s .6s; } .nav > ul > li:nth-child(7) { -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; transition: opacity .5s .7s, transform .5s .7s; } .nav > ul > li > a { display: inline-block; position: relative; padding: 0; font-weight: 300; font-size: 1.13em; color:mediumpurple; width: 100%; text-decoration: none; -webkit-transition: color .5s ease, padding .5s ease; -moz-transition: color .5s ease, padding .5s ease; transition: color .5s ease, padding .5s ease; } .nav > ul > li > a:hover, .nav > ul > li > a:focus { color:cornflowerblue; } .nav > ul > li > a:before { content: ''; display: block; position: absolute; right: 0; bottom: 0; height: 1px; width: 100%; -webkit-transition: width 0s ease; transition: width 0s ease; } .nav > ul > li > a:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: #FFFFFF; -webkit-transition: width .5s ease; transition: width .5s ease; } .nav > ul > li > a:hover:before { width: 0%; background: #FFFFFF; -webkit-transition: width .5s ease; transition: width .5s ease; } .nav > ul > li > a:hover:after { width: 0%; background: #DCDCDC; -webkit-transition: width 0s ease; transition: width 0s ease; } @media screen and (max-width: 970px) { .nav-toggle { top: 1px; right: 361px; width: 40px; height: 48px; padding: 0px; background: -webkit-linear-gradient(rgba(153,204,0,0.5) 0%, rgba(102,204,0,1.00) 200%); background: -o-linear-gradient(rgba(153,204,0,0.5) 0%, rgba(102,204,0,1.00) 200%); background: linear-gradient(rgba(153,204,0,0.5) 0%, rgba(102,204,0,1.00) 200%); -webkit-border-radius: 3px 0px 0px 30%; -moz-border-radius: 3px 0px 0px 30%; border-radius: 3px 0px 0px 30%; } .nav-toggle:after { content: ''; } .nav-toggle i { display: block; width: 100%; height: 100%; background: url("/images-new/menu.svg") no-repeat center; } } @media screen and (max-width: 700px) { .nav-toggle { } } @media screen and (max-width: 480px) { .nav-toggle { } } @media screen and (max-width: 450px) { .nav-toggle { } } @media screen and (min-width: 360px) { html, body { margin: 1px; overflow-x: hidden; } } @media screen and (max-width: 360px) { html, body { margin: 1px; overflow-x: hidden; } .nav { width:100%; padding: 0px; box-shadow: none; } .nav h2 { margin: 10px; } .nav > ul { padding-left: 10px; } } @media screen and (max-width: 320px) { .nav-toggle { } } @media screen and (max-width: 270px) { .nav-toggle { } }