/* Reset */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Open Sans', Verdana, sans-serif;
    font-size: 14px;
}
li, p {
    line-height:1.5;
}
    
body {
    color: #343a40;
    background:#F8F8F8;
}
    
/* Header styles */
header {
    width:100%;
    padding: 15px 0;
    gap: 30px;
    transition: all 0.4s ease;
    position:fixed;
    top:40px;
    z-index:99;
}

header.scrolled {
    width: 100%;
    max-width: 100%;
    top:0;
    z-index: 1000;
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
header .contain {
    display:flex;
    align-items: center;
}
header .logo {
    font-weight:600;
}
header .logo img, header .logo svg {
    transition: all 0.4s ease;
    top: -20px;
    position: absolute;
    max-width:100px;
    fill:#343a40;
    height: auto;
}
header.scrolled .logo img, header.scrolled .logo svg {
    max-width: 40px;
    top: 11px;
}

header .purchase_btn {
    background:#dc3545;
    border-radius:100px;
    color:white;
}

.fancy_btn {
    padding:9px 20px;
    border-radius: 100px;
    background:#343a40;
    color:white;
    transition:all 0.3s ease-in-out;
    z-index:9999;
    position: relative;
    z-index: 0;
    margin-left:20px;
}
.fancy_btn:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top:0;
    left:0;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100%);
    height: calc(100%);
    animation: glowing 20s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    border-radius: 100px;
}
.fancy_btn:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #343a40;
    left: 0;
    top: 0;
    border-radius: 100px;
    bottom: initial;
}
.fancy_btn:hover:after {
    height:100%;
    width:100%;
}

nav {
    display:flex;
    line-height: 1;
    margin-left:auto;
    align-items: center;
}
nav a {
    color: #343a40;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
}

nav a:after {
    content: '';
    height:2px;
    width:0%;
    margin:auto;
    display:block;
    transition:all 0.2s ease-in-out;
    bottom: -6px;
    position: relative;
    background:#dc3545;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

nav a:hover:after, nav a.on:after { 
    width:60%;
    height:2px;
}
nav>span {
    padding: 4px 9px;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 9px;
    line-height: 1;
    background-color: #343a40;
    color: #fff;
    margin-right: 8px;
    position:relative;
    margin-left: -3px;
    margin-top: -2px;
}
nav>span:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: 0;
    left: 0;
    background-size: 400%;
    z-index: -1;
    filter: blur(2px);
    width: calc(100%);
    height: calc(100%);
    animation: glowing 20s linear infinite;
    border-radius: 100px;
}

/* Magical footer */
footer {
    padding:100px 0;
    line-height: 1;
    background:#F8F8F8;
    width:100%;
    margin-top:100px;
    padding-bottom: 30px;
}
footer .full {
    display:flex;
    text-align:center;
    padding:20px 0;
    gap:20px;
    padding-bottom:0;
    border-top:1px solid #e1e1e1;
    align-items:center;
    justify-content: space-between;
}
footer .full>div {
    text-align:left;
}
footer a {
	color:#343a40;
}

body.logged-in header {
    top:52px;
}

.contain {
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding-left:20px;
    padding-right:20px;
}

.version {
    background:#343a40;
    padding:8px 15px;
    color:white;
    border-radius: 5px;
    font-size:12px;
    text-decoration: none;
}

.hamburger {
    appearance: none;
    border:0;
    background:transparent;
    background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' width='18' height='12'%3E%3Cstyle%3E .s0 %7B fill: none;stroke: %23dc3545;stroke-linecap: round;stroke-width: 1.5 %7D .s1 %7B fill: none;stroke: %23343a40;stroke-linecap: round;stroke-width: 1.5 %7D %3C/style%3E%3Cg id='SVGRepo_bgCarrier'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath class='s0' d='m1 1h3m13 0h-9'/%3E%3Cpath class='s0' d='m17 11h-3m-13 0h9'/%3E%3Cpath class='s1' d='m1 6h3 13'/%3E%3C/g%3E%3C/svg%3E");
    background-size:contain;
    background-repeat: no-repeat;
    overflow:hidden;
    text-indent:-100px;
    width:30px;
    height:20px;
    margin-left: auto;
    margin-top: 6px;
    margin-bottom: 6px;
    cursor:pointer;
    display:none;
    background-position: center;
}
.hamburger.clicked {
    background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cstyle%3E .s0 %7B fill: %23343a40 %7D %3C/style%3E%3Cg id='SVGRepo_bgCarrier'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' class='s0' d='m15.21 2.21q0.28-0.3 0.28-0.71-0.01-0.4-0.3-0.69-0.29-0.29-0.69-0.3-0.41 0-0.71 0.28l-5.79 5.8-5.79-5.8q-0.3-0.28-0.71-0.28-0.4 0.01-0.69 0.3-0.29 0.29-0.3 0.69 0 0.41 0.28 0.71l5.8 5.79-5.8 5.79q-0.29 0.3-0.3 0.71 0 0.42 0.29 0.72 0.3 0.29 0.72 0.29 0.41-0.01 0.71-0.3l5.79-5.8 5.79 5.8q0.3 0.28 0.71 0.28 0.4-0.01 0.69-0.3 0.29-0.29 0.3-0.69 0-0.41-0.28-0.71l-5.8-5.79z'/%3E%3C/g%3E%3C/svg%3E");
}
.mobilenav { display:none; }

.ribbon {
	position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}
.ribbon span {
    font-size: 9px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #464646;
	background: linear-gradient(#ff00ec 0%, #9c00db 100%);
    position: absolute;
    top: 19px;
    right: -21px;
    line-height: 20px;
    height: 20px;
}
.ribbon span::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #3B3B3B;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #3B3B3B;
}
.ribbon span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #3B3B3B;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #3B3B3B;
}


.nl_box {
    border-radius:20px;
    padding:30px;
    min-width:400px;
    color:#4e4e4e;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
	position: fixed;
    width: 100%;
    max-width: 400px;
    right: 50px;
    bottom: 50px;
	z-index:99;
	background: transparent;
	color:#343a40;
	opacity: 0;
    transition: opacity 0.3s ease-in-out;
	pointer-events:none;
}
.nl_box.show {
	opacity:1;
	pointer-events:all;
}
.nl_box h2 {
    font-weight:600;
    font-size:24px;
}
.nl_box:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top:0;
    left:0;
    background-size: 300%;
    z-index: -1;
    filter: blur(1px);
    width:100%;
    height:100%;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    opacity: 0.3;
    border-radius: 20px;
    animation:gradient 20s linear infinite;
}
.nl_box .gform_wrapper h2 {
	margin-bottom:15px;
	color:#4e4e4e;
	margin-top:0;
}
.nl_box p {
	margin-bottom:-20px;
}
.nl_box .gform_validation_errors {
	border-radius:10px!important;
	background:white!important;
}
.nl_box h2.gform_submission_error {
	margin-bottom:0;
}
.nl_box .gform_confirmation_message br { display:none; }
.nl_box .close {
	border: 0;
    background: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%231C274C' stroke-width='1.5'%3E%3C/circle%3E%3Cpath d='M14.5 9.50002L9.5 14.5M9.49998 9.5L14.5 14.5' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
	width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    text-indent: -100px;
    overflow: hidden;
	opacity:0.5;
	transition: opacity .3s ease-in-out;
	cursor:pointer;
}
.nl_box .close:hover {
	opacity:1;
}

.gform_wrapper input, .gform_wrapper .wp-editor-container {
    border: 1px solid #dedede !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    padding: 10px 20px !important;
    height: auto !important;
}
.gform-theme--framework input[type="submit"] {
    border-radius: 10px !important;
    background: #343a40 !important;
    border: 2px solid #343a40 !important;
    color: white !important;
}
.gform_wrapper .wp-editor-container {
	padding:0!important;
}

.bs-status {
	margin-top:10px;
}
.bs-status .bs-badge {
	background: #343a40;
	color:white;
	font-size:11px;
    font-family: 'Open Sans', Verdana, sans-serif;
}

footer .full>div.ri {
	display:inline-flex;
	justify-content:right;
	align-items:center;
}
footer .magicspan:before {
    content: " - ";
}
.github {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.9992 5.95846C21.0087 6.565 20.9333 7.32649 20.8658 7.8807C20.8395 8.09686 20.8037 8.27676 20.7653 8.42453C21.6227 10.01 22 11.9174 22 14C22 16.4684 20.8127 18.501 18.9638 19.8871C17.1319 21.2605 14.6606 22 12 22C9.33939 22 6.86809 21.2605 5.0362 19.8871C3.18727 18.501 2 16.4684 2 14C2 11.9174 2.37732 10.01 3.23472 8.42452C3.19631 8.27676 3.16055 8.09685 3.13422 7.8807C3.06673 7.32649 2.99133 6.565 3.00081 5.95846C3.01149 5.27506 3.10082 4.5917 3.19988 3.91379C3.24569 3.60028 3.31843 3.30547 3.65883 3.11917C4.00655 2.92886 4.37274 2.99981 4.73398 3.1021C5.95247 3.44713 7.09487 3.93108 8.16803 4.51287C9.2995 4.17287 10.5783 4 12 4C13.4217 4 14.7005 4.17287 15.832 4.51287C16.9051 3.93108 18.0475 3.44713 19.266 3.1021C19.6273 2.99981 19.9935 2.92886 20.3412 3.11917C20.6816 3.30547 20.7543 3.60028 20.8001 3.91379C20.8992 4.5917 20.9885 5.27506 20.9992 5.95846ZM20 14C20 12.3128 19.6122 10 17.5 10C16.5478 10 15.6474 10.2502 14.7474 10.5004C13.8482 10.7502 12.9495 11 12 11C11.0505 11 10.1518 10.7502 9.25263 10.5004C8.35261 10.2502 7.45216 10 6.5 10C4.39379 10 4 12.3197 4 14C4 15.7636 4.82745 17.231 6.23588 18.2869C7.66135 19.3556 9.69005 20 12 20C14.3099 20 16.3386 19.3555 17.7641 18.2869C19.1726 17.231 20 15.7636 20 14ZM10 14.5C10 15.8807 9.32843 17 8.5 17C7.67157 17 7 15.8807 7 14.5C7 13.1193 7.67157 12 8.5 12C9.32843 12 10 13.1193 10 14.5ZM15.5 17C16.3284 17 17 15.8807 17 14.5C17 13.1193 16.3284 12 15.5 12C14.6716 12 14 13.1193 14 14.5C14 15.8807 14.6716 17 15.5 17Z' fill='%23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
	background-size:contain;
	background-position:center;
	overflow: hidden;
    text-indent: -100px;
    background-repeat: no-repeat;
    display: block;
	width: 23px;
    height: 23px;
    margin-right: 10px;
}

@media screen and (max-width:768px) {
    
    header {
        max-width:initial;
        top:20px;
    }
    header .logo img, header .logo svg { top:0; max-width:60px; }
    nav {
        display:none;
    }
    .mobilenav>a:not(.fancy_btn) {
        display:block;
        padding:20px;
    }
    .mobilenav.open {
        display: flex;
        position: fixed;
        width: calc(100% - 40px);
        border-radius: 20px;
        left: 20px;
        padding: 20px 0;
        box-shadow: 0px 5px 10px rgb(0 0 0 / 8%);
        flex-direction: column;
        z-index:9999;
        top: 76px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .mobilenav .fancy_btn { margin-left:0; margin-top:10px; margin-bottom:10px; }
    .hamburger {
        display:inline-block;
    }
    footer .full>div, footer .full>div a { font-size:11px; text-align: center; }
    footer { padding: 30px 0; }
	footer .full { flex-direction: column; }

    .nl_box {
        width: calc(100% - 40px);
        left: 20px;
        bottom: 20px;
        right: initial;
        min-width: initial;
        max-width: initial;
    }
	footer span:before {
    	display:none;
	}
	footer .magicspan {
        display: block;
        width: 100%;
        height: 1px;
        background: #e7e7e7;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
}
    
@keyframes sparkle {
    0%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
    50% { opacity: 0.5; transform: rotate(20deg) scale(1.2); }
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}