/* Responsive */

#toggle:not(:checked) ~ nav ul {
    display: none;
    height:0;
}

#toggle:checked ~ nav ul {
    display: block;
    position: absolute;
    background: rgb(255,255,255);
    /*
    background: linear-gradient(0deg, rgba(255,255,255,0.5214460784313726) 0%, rgba(255,255,255,0.7959558823529411) 33%, rgba(255,255,255,0.938813025210084) 66%, rgba(255,255,255,1) 100%);
	*/
    background: var(--black);
    -webkit-animation: slide-in-bottom 0.23s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.23s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.menu-toggle:before { content: "\02261";  transition: all 0.5s ease; color:var(--green);
}  
#toggle:checked + label:before { content: "\02715"; font-size:75% }

#primary-menu { height: 100vh; margin: 0; padding-bottom: 0.9rem; } /*margin-top:6rem;*/
#primary-menu a {
    padding: 1rem 0.4rem;
    text-decoration: none;
    color:var(--yellow);
    transition: all 0.3s ease;
}
#primary-menu a:hover, #primary-menu a.current { color:var(--dark-yellow); }
#primary-menu li ul.sub-menu { display: none; list-style:none; height:auto; margin:0 }

#primary-menu li li a:after {content: "\1F512";color: transparent; text-shadow: 0 0 0 var(--dark-yellow); padding-left:10px}

#app-links { margin-top: 1.5rem;}
#app-links #log-in {display:inline-block; height:100%; line-height:325%; padding:0 1rem;}

/*
@media (min-height: 40em) {
    #intro {top:-8vh}
}

@media (min-height: 45em) {
    #intro {top:-10vh}
}

@media (min-height: 50em) { 
    #intro {top:-18vh} 
}

@media (min-height: 60em){
    #intro {top:-22vh}
}

@media (min-height: 70em){
    #intro {top:-28vh}
}

@media (min-height: 80em){
    #intro {top:-30vh}
}
*/

/*Only for narrow mobiles*/
@media (max-width: 20rem) { 
    .folio { border: 0; width:90%}
    .folio caption { font-size: 1.3em; }
    .folio thead, .folio tfoot { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    .folio tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; }
    .folio td { border-bottom: 1px solid #ddd; display: block; text-align: right; }
    .folio td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase;}
	.folio tbody td:first-child::before {color:#fff;text-shadow:none}
    .folio td:last-child { border-bottom: 0; }
}
@media (max-width: 30rem) { 
	.folio.live .btn-cta.small {padding:0.25rem}
    #jwform div form p {display:block}
}
@media (max-width: 39.9rem) { 
    #toggle:checked ~ nav ul { position:relative; width: 101.8vw; right:-0.9rem; top:4.5rem; height:100vh; text-align: right; border-right:0.5rem solid var(--black); z-index:999 }
    #toggle:checked ~ nav ul ul { border:0; padding: 0; margin: 0; height: auto; list-style: none; position: relative; display: block; top:0; left:0; background: none; }
    #toggle:checked ~ nav ul li {  }
    #toggle:checked ~ nav ul a { display:block; padding:1rem }

    #primary-menu a:hover, #primary-menu a:hover, 
    #primary-menu a:focus, #primary-menu a:focus {background: var(--black)}

    .logo {height:70px; position: absolute; width: 165px; top:-0.8rem}
    #app-links { margin:1rem 0 1rem 0 } /*2.7rem*/
    #app-links #log-in {padding:0 0.4rem 0 0;}
    .stock-code-name { margin-bottom:5px } 
    #pmpro_levels {display: block;}
	.single-post #primary article .post-thumbnail {height:18vh}

    .rotating-text {font-size:22px;}
    /*
    .wpforms-submit-container {padding-left:0}
    #jwform label.wpforms-error{left:0;bottom:0;right:0}
    */
}
@media (max-width: 46.5rem) { 
    #primary #pmpro_levels {flex-direction: column; justify-content: center; align-items: center;}
}

/* Larger than Mobile screen: 40.0rem (640px) */
@media (min-width: 40rem) { 
    /* #intro { top:-26vh; }  */
    .btn-cta-intro-outline {margin-right:1rem}
    .btn-cta-intro-outline + .btn-cta {margin-left:1rem}
    #toggle ~ nav #primary-menu.m-show { display:block; height:auto; animation:none; -webkit-animation: none; overflow: hidden; } 
    #primary-menu {position:absolute; width:auto;right:0% !important;top:0.9rem}
    #primary-menu li {float:left; height:100% }
    #primary-menu li li {float:left; display: none;}
    #primary-menu a {    display: inline-block;
        text-align: center;
        font-size: 0.85rem;
    }
    #primary-menu li.menu-item-has-children:hover ul {
		width:99vw;
		display: block;
        position: absolute;
        top: 31px;
        left: 0px;
        overflow: hidden;
        z-index: 9999;
        border-radius: 6px 6px 0 0;
        margin: 0;
        padding: 0;
        -webkit-animation: slide-in-bottom 0.33s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-bottom 0.33s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;	
	} 
    #primary-menu li.menu-item-has-children:hover li {display: block;} 
    #primary-menu li.menu-item-has-children:hover li a {display: block; padding:0.6rem 0.5rem; font-size: 70%;} 
    #primary-menu li.menu-item-has-children:hover li a:after {display:none} 

    .wpforms-field:first-child{margin-right:2rem}

	/*
    .chart { height:350px }
    .chart > div { position:relative; width:100%; height:100%; text-align: center}
    .chart > div > div { width:100px; margin: 0 auto; bottom:0; position:relative; height:100%}
    .chart > div > div > div {bottom:0; position:absolute; width:100%}
    .h-chart-1 > div{height:15%}
    .h-chart-2 > div{height:25%}
    .h-chart-3 > div{height:50%}
    .h-chart-4 > div{height:100%}
	*/
}

/* Larger than Mobile screen: 52.0rem (830px) */
@media (min-width: 52rem) {  
    .c{width:94%}
    body.home #intro {font-size: 160%; }
    
    .intro-tagline {font-size:0.75em !important}
}

@media (min-width: 64rem) {  
    .c{width:90%}
}

/* Larger than Tablet screen: 80.0rem (1280px) */
@media (min-width: 80rem) {  
     .c{width:78rem}
}

/* Larger than Desktop screen: 120.0rem (1920px) */
@media (min-width: 120rem) {  
     .c{width:100rem} 
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
                transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
    }
    @keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
                transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}