.pl-sn-fullnav {
z-index: 51;
}
.pl-sn-fullnav .plfn-container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
}
.pl-sn-fullnav .plfn-container .nav-logo {
margin-right: auto;
font-weight: 600;
}
.pl-sn-fullnav .plfn-toggle,
.pl-sn-fullnav button.plfn-toggle {
border: 0;
}
.pl-sn-fullnav .plfn-overlay {
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.pl-sn-fullnav .plfn-overlay ul.fullnav-menu li {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: translateY(110px);
-moz-transform: translateY(110px);
-ms-transform: translateY(110px);
transform: translateY(110px);
}
.pl-sn-fullnav .plfn-overlay ul.plfn-follow li,
.pl-sn-fullnav .plfn-overlay .plfn-copy {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
transform: scale(0, 0);
transition-delay: .5s;
}
.pl-sn-fullnav .plfn-overlay.open {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.pl-sn-fullnav .plfn-overlay.open ul.fullnav-menu li.animation {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.pl-sn-fullnav .plfn-overlay.open ul.plfn-follow li.animation,
.pl-sn-fullnav .plfn-overlay.open .plfn-copy {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
.pl-sn-fullnav .plfn-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 50px;
text-align: center;
overflow-y: scroll;
overflow-x: hidden;
-webkit-backface-visibility: hidden;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
.pl-sn-fullnav ul.fullnav-menu {
margin: 0;
padding: 0;
list-style: none;
}
.pl-sn-fullnav ul.fullnav-menu > li {
margin: 0 0 10px 0;
}
.pl-sn-fullnav ul.fullnav-menu li {
padding: 0;
align-items: center;
}
.pl-sn-fullnav ul.fullnav-menu li a {
display: block;
text-decoration: none;
font-size: 2rem;
font-weight: 600;
color: inherit;
}
.pl-sn-fullnav ul.fullnav-menu ul.sub-menu {
margin: 0;
padding: 0;
list-style: none;
}
.pl-sn-fullnav ul.fullnav-menu ul.sub-menu li a {
font-size: 1rem;
}
.pl-sn-fullnav .plfn-follow {
position: absolute;
right: 20px;
bottom: 10px;
text-align: center;
list-style: none;
margin: 50px 0 0;
padding: 0;
}
.pl-sn-fullnav .plfn-follow li {
display: inline-block;
}
.pl-sn-fullnav .plfn-follow li a {
display: block;
color: inherit;
padding: 0 6px;
}
.pl-sn-fullnav .plfn-copy {
color: inherit;
position: absolute;
left: 20px;
bottom: 10px;
margin: 20px 0 0;
font-size: .7rem;
font-weight: 600;
}
.pl-sn-fullnav .plfn-toggle {
cursor: pointer;
text-align: left;
border: 0; }
.pl-sn-fullnav .plfn-toggle span {
position: relative;
margin-top: 8px;
margin-bottom: 8px;
background-color: #6f6f6f;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.pl-sn-fullnav .plfn-toggle span:before,
.pl-sn-fullnav .plfn-toggle span:after {
position: absolute;
content: "";
}
.pl-sn-fullnav .plfn-toggle span:before {
top: -8px;
background-color: inherit;
}
.pl-sn-fullnav .plfn-toggle span:after {
top: 8px;
background-color: inherit;
}
.pl-sn-fullnav .plfn-toggle span,
.pl-sn-fullnav .plfn-toggle span::before,
.pl-sn-fullnav .plfn-toggle span::after {
display: inline-block;
width: 25px;
height: 4px;
-webkit-transition-property: background-color, -webkit-transform;
-moz-transition-property: background-color, -moz-transform;
-o-transition-property: background-color, -o-transform;
transition-property: background-color, transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.pl-sn-fullnav .plfn-toggle.open {
position: fixed;
top: 16px;
right: 16px;
z-index: 51;
cursor: pointer;
}
.pl-sn-fullnav .plfn-toggle.open span {
-webkit-transform: translateY(8px) rotate(225deg);
-moz-transform: translateY(8px) rotate(225deg);
-ms-transform: translateY(8px) rotate(225deg);
transform: translateY(8px) rotate(225deg);
}
.pl-sn-fullnav .plfn-toggle.open span:before,
.pl-sn-fullnav .plfn-toggle.open span:after {
-webkit-transform: translateY(-8px) rotate(-90deg);
-moz-transform: translateY(-8px) rotate(-90deg);
-ms-transform: translateY(-8px) rotate(-90deg);
transform: translateY(-8px) rotate(-90deg);
}
.pl-sn-fullnav .plfn-toggle.open span:before {
background-color: transparent;
}
@media (max-width: 768px) {
.pl-sn-fullnav .plfn-follow,
.pl-sn-fullnav .plfn-copy {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
@media (max-width: 480px) {
.pl-sn-fullnav .plfn-overlay ul.fullnav-menu li a {
font-size: 1.5rem;
}
.pl-sn-fullnav .plfn-overlay ul.fullnav-menu ul.sub-menu li a {
font-size: 1rem;
}
}