/* ========================================================================== 
* Product Name: Cause Website - Responsive conversion
* Author: Sean Kabanuk
* Description: Base SASS rules
* Version: 0.1.0
* Release date: 
Revision History:   Revised By      Revised On: 
					tlr             050222
========================================================================== */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 26px;
    /*tlr 112221*/
    /*min-width: 418px;*/
    /*background-color:white;*/
}

/* sysd fonts*/
.text {
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 26px;
}

.headline {
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-size: 1.125rem;
    color: #666666;
    font-weight: 700;
    /*tlr*/
    /*margin: 10px 0px 10px 0px;*/
    margin: 16px 0px 10px 0px;
}

.subhead {
    /*font-family: "Times New Roman", Times, serif;*/
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-size: 1.125rem;
    color: #000;
    line-height: 22px;
    font-weight: 700;
}

input {
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 26px;
    margin: 1.618px;
    max-width: 97%;
}

label.text {
    padding-right: 5px;
}
/* sysd fonts*/

em {
    font-style: italic;
}

h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 30px;
    font-size: 1.875rem;
    font-weight: 700;
    color: #000;
    line-height: 36px;
}

h2 {
    font-size: 18px;
    font-size: 1.125rem;
    color: #666666;
    font-weight: 700;
    /*tlr*/
    /*margin: 10px 0px 10px 0px;*/
    margin: 16px 0px 10px 0px;
}

h3 {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-size: 1.125rem;
    color: #000;
    line-height: 22px;
    font-weight: 700;
}

h4 {
    font-size: 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #a4552c;
    line-height: 16px;
    font-weight: 700;
}

p {
    color: #000;
    /*tlr: paragraph margin*/
    margin-top: 15px;
    margin-bottom: 5px;
}

a {
    color: #4166a2;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

li {
    padding-top: 7px;
    color: #7a9124;
    padding: 5px 0px 3px 0px;
}

    li a {
        padding: 0px;
        text-decoration: none;
        color: #4166a2;
    }

        li a:hover {
            color: #5a7db7;
            text-decoration: underline;
        }

img {
    max-width: 100%;
    height: auto;
}

/*.ca styles*/
/*.ca-content {
	width:100%;
}*/

.ca-content {
    /*grid-column: col-start 2 / span 5;*/
    width: 100%;
}

.ca-default .menu {
    display: block;
}

.c-contactus .c-form textarea {
    /*max-width: 80%;*/
    min-width: 260px;
    max-width: 100%;
}


/*tlr 111921 - handle the contentplaceholder span*/
#ctl00_ContentPlaceHolder1_LabelBody {
    display: inherit;
}

/*tlr 051822 - moved from previous css */
.signUpButton, .contactButton {
    display: block;
    background-color: #888;
    width: 95px;
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

a.signUpButton, a.contactButton {
    text-decoration: none;
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #fff;
    padding: 2px 11px 5px 14px;
    margin: 10px 0 50px 15px;
}

a.contactButton {
    width: 118px;
}

    a.signUpButton:hover, a.contactButton:hover {
        background-color: #333;
        text-decoration: none;
        font-size: 16px;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -ms-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
    }

/*additional buttons*/
#ctl01_ContentPlaceHolder1_ButtonLogin {
    width: 100px;
    height: 30px;
}

#ctl01_ContentPlaceHolder1_ButtonContactUs {
    width: 100px;
    height: 30px;
}

#ctl01_ContentPlaceHolder1_ButtonSignup {
    width: 100px;
    height: 30px;
}

#ctl01_ContentPlaceHolder1_ButtonBackToLogin {
    width: 200px;
    height: 30px;
}

#ctl01_ContentPlaceHolder1_ButtonEmailMeANewPassword {
    width: 200px;
    height: 30px;
}

/*styles internal for .ca*/

/*radgrid responsive attempt - more specifically targeted*/
.radGridResponsive {
    min-width: fit-content;
}

    .radGridResponsive table {
        border-collapse: collapse;
        width: 100%;
    }

    .radGridResponsive th {
        background-color: #eee;
        font-weight: bold;
    }

    .radGridResponsive th,
    .radGridResponsive td {
        border: 0.125em solid #333;
        line-height: 1.5;
        padding: 0.75em;
        text-align: left;
    }


html body .radGridResponsive .rgRow,
html body .radGridResponsive .rgAltRow,
html body .radGridResponsive .rgEditRow,
html body .radGridResponsive .rgFooter,
html body .radGridResponsive .rgGroupHeader {
    height: auto;
}


/* Stack rows vertically on small screens */
@media (max-width: 35em) {
    /* no column labels */
    .radGridResponsive thead tr {
        position: absolute;
        top: -9999em;
        left: -9999em;
    }

    .radGridResponsive tr {
        border: 0.05em solid #333;
        height: auto !important;
    }
        /* leave some space */
        .radGridResponsive tr + tr,
        .radGridResponsive .rgPager {
            margin-top: 0.5em;
        }

    /* cells act like rows */
    .radGridResponsive tr,
    .radGridResponsive td {
        display: block;
        margin-bottom: 1em;
    }

    .radGridResponsive td {
        border: none;
        border-bottom: 0.125em solid #333;
    }

        /* Hide nth column*/
        /*.radGridResponsive td:nth-child(2) {
			display: none;
		}*/

        /* add data labels */
        .radGridResponsive td:before {
            content: attr(data-label);
            display: inline-block;
            display: block;
            font-weight: bold;
            line-height: 1.5;
            margin-left: 0;
            width: 100%;
        }
}

/* Stack labels vertically on smaller screens - don't need this but leaving in case we do */
/*@media (max-width: 20em) {
	.radGridResponsive td {
		padding-left: 0.75em;
		background-color:gray;
	}

		.radGridResponsive td:before {
			display: block;
			margin-bottom: 0.75em;
			margin-left: 0;
		}
}*/
/*radgrid responsive - more specifically targeted*/

.orderSummaryResponsive {
    min-width: fit-content;
}

    .orderSummaryResponsive table {
        border-collapse: collapse;
        width: 100%;
    }

    .orderSummaryResponsive th {
        background-color: #eee;
        font-weight: bold;
    }

    .orderSummaryResponsive th,
    .orderSummaryResponsive td {
        /*border: 0.125em solid #333;*/
        /*border: 0.1em solid #333;*/
        line-height: 1.5;
        padding: 0.75em;
        text-align: left;
    }


html body .orderSummaryResponsive .rgRow,
html body .orderSummaryResponsive .rgAltRow,
html body .orderSummaryResponsive .rgEditRow,
html body .orderSummaryResponsive .rgFooter,
html body .orderSummaryResponsive .rgGroupHeader {
    height: auto;
}


/* Stack rows vertically on small screens */
@media (max-width: 35em) {
    /* no column labels */
    .orderSummaryResponsive thead tr {
        position: absolute;
        top: -9999em;
        left: -9999em;
    }

    /*.orderSummaryResponsive tfoot tr {
		position: absolute;
		top: -9999em;
		left: -9999em;
	}*/

    .orderSummaryResponsive tfoot tr td:nth-child(1), .orderSummaryResponsive tfoot tr td:nth-child(2), .orderSummaryResponsive tfoot tr td:nth-child(3) {
        position: absolute;
        top: -9999em;
        left: -9999em;
    }

    .orderSummaryResponsive tr {
        border: 0.05em solid #333;
        height: auto !important;
    }
        /* leave some space */
        .orderSummaryResponsive tr + tr,
        .orderSummaryResponsive .rgPager {
            margin-top: 0.5em;
        }

    /* cells act like rows */
    .orderSummaryResponsive tr,
    .orderSummaryResponsive td {
        display: block;
        margin-bottom: 1em;
    }

    .orderSummaryResponsive td {
        border: none;
        border-bottom: 0.125em solid #333;
    }

        /* Hide nth column*/
        /*.radGridResponsive td:nth-child(2) {
			display: none;
		}*/

        /* add data labels */
        .orderSummaryResponsive td:before {
            content: attr(data-label);
            display: inline-block;
            display: block;
            font-weight: bold;
            line-height: 1.5;
            margin-left: 0;
            width: 100%;
        }
}

/* Stack labels vertically on smaller screens - don't need this but leaving in case we do */
/*@media (max-width: 20em) {
	.radGridResponsive td {
		padding-left: 0.75em;
		background-color:gray;
	}

		.radGridResponsive td:before {
			display: block;
			margin-bottom: 0.75em;
			margin-left: 0;
		}
}*/
/*radgrid responsive - more specifically targeted*/

@media (max-width: 35em) {
    #ctl01_ContentPlaceHolder1_RadTabStripShippingMethod .rtsLink {
        padding-top: 15px;
        padding-bottom: 30px;
    }

    .faq {
        text-align: right;
        padding-top: 15px;
    }
}


/*tlr: support past styles*/
strong {
    font-weight: bold;
}

/* ========================================================================== 
* Product Name: Cause Website - Responsive conversion
* Author: 
* Description: Layout SASS rules
* Version: 0.1.0
* Release date: 
========================================================================== */
.wrapper {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    gap: 20px;
    /*max-width: 100%;*/
    /*tlr: logo banner wrapping*/
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    /*tlr*/
    min-height: 676px;
}

.wrapper {
    overflow-x: auto;
}

    /*   nav {
      margin-bottom: -20px;
  } */
    .wrapper > * {
        grid-column: col-start 3 / span 8;
    }

/*  .main-head, .main-nav, .content, .side, .ad, .main-footer {
    border: 2px solid orange;
    background-color: yellow;
  } */

@media (min-width: 500px) {
    .side {
        /*tlr: left justify at this breakpoint */
        /*grid-column: col-start 3 / span 2;*/
        grid-column: col-start 4 / span 8;
        grid-row: 2;
        margin-top: 30px;
    }

    .content, .main-footer {
        /*grid-column: col-start 4 / span 9;*/
        grid-column: col-start 4 / span 8;
    }
}

@media (min-width: 700px) {
    /*tlr: pull quote overlapping, so reset .side here */
    .side {
        grid-column: col-start 3 / span 2;
        margin-top: 40px;
    }

    .content {
        grid-column: col-start 5 / span 6;
        grid-row: 2 / 4;
    }

    .ca-content {
        grid-column: col-start 4 / span 6;
    }
    /*     .ad {
        grid-column: col-start 10 / span 3;
        grid-row: 3;
    } */
    .main-footer {
        grid-column: col-start 3 / span 12;
    }
}

@media (min-width: 1000px) {
    .wrapper {
        padding: 0px;
    }
}

/* ==========================================================================
    Description: Navigation stylesheet
    Author: Sean Kabanuk
    Release date: 0/00/00
    Revision History:   Revised By      Revised On: 
   ========================================================================== */
/* Basic styling */
/* nav {
  padding: 0 15px;
}
 */
.menu,
.submenu {
    list-style-type: none;
}

    .menu li,
    .menu li a,
    .submenu li,
    .submenu li a {
        font-size: 14px;
        font-size: 0.875rem;
        cursor: pointer;
    }

    .submenu a {
        color: #fff;
    }

.item {
    padding: 10px;
}

    /* .item.button {
  padding: 9px 5px;
} */
    .item:not(.button) a:hover,
    .item a:hover::after {
        color: #5A5858;
    }

.fas.fa-times,
.fas.fa-bars {
    font-size: 30px;
    font-size: 1.875rem;
}

/* Mobile menu */
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

    .menu.active {
        background-color: #e9b937;
    }

    .menu li a {
        display: block;
        padding: 15px 5px;
    }

    .menu li.subitem a {
        padding: 15px;
    }

    .logo, .menu li.logo a {
        /*   padding-left: 0;
  padding-right: 0;
  margin-top: -3px; */
        margin-top: 20px;
    }

.toggle {
    order: 1;
    margin-right: 20px;
}

/* .item.button {
  order: 2;
} */
.item {
    order: 2;
    width: 100%;
    text-align: center;
    display: none;
}

.active .item {
    display: block;
}

.button.secondary {
    /* divider between buttons and menu links */
    border-bottom: 1px #444 solid;
}

/* Submenu setup for mobile screens */
.submenu {
    display: none;
}

.submenu-active .submenu {
    display: block;
    background: #F1B000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 3px solid #000;
    border-top: 3px solid #000;
}

.has-submenu i {
    font-size: 12px;
}

.has-submenu > a::after {
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    line-height: 16px;
    font-weight: 900;
    content: "\f078";
    color: #4166a2;
    padding-left: 5px;
}

.subitem a {
    padding: 10px 15px;
}

.submenu-active {
    color: #F1B000;
    border-radius: 3px;
}

@media all and (min-width: 700px) {
    .menu {
        justify-content: center;
    }

    .logo {
        flex: 1;
        margin-left: 20px;
    }

    .item.button {
        width: auto;
        order: 1;
        display: block;
    }

    .toggle {
        flex: 1;
        text-align: right;
    }
    /* Button up from tablet screen */
    /*   .menu li.button a {
      padding: 10px 15px;
      margin: 5px 0;
  }
  .button a {
      background: #0080ff;
      border: 1px royalblue solid;
  }
  .button.secondary {
      border: 0;
  }
  .button.secondary a {
      background: transparent;
      border: 1px #0080ff solid;  
  }
  .button a:hover {
      text-decoration: none;
  }
  .button:not(.secondary) a:hover {
      background: royalblue;
      border-color: darkblue;
  } */
}

@media all and (min-width: 960px) {
    .menu {
        align-items: flex-start;
        flex-wrap: nowrap;
        background: none;
    }

    .logo {
        order: 0;
    }

    .item {
        order: 1;
        position: relative;
        display: block;
        width: auto;
    }

    .button {
        order: 2;
    }

    .submenu-active .submenu {
        display: block;
        position: absolute;
        width: 200px;
        left: 0;
        top: 60px;
    }

    .toggle {
        display: none;
    }

    .submenu-active {
        border-radius: 0;
    }
}

/* ========================================================================== 
* Product Name: Cause Website - Responsive conversion
* Author: 
* Description: Page Quote SASS rules
* Version: 0.1.0
* Release date: 
========================================================================== */
.pageQuote {
    font-size: 18px;
    font-size: 1.125rem;
    color: #5A5858;
    line-height: 30px;
    font-style: italic;
    /*margin: 0px;*/
    /*tlr: 111921 */
    margin: 1rem;
}

@media (min-width: 500px) and (max-width: 800px) {
    .pageQuote {
        /*font-size: 12px;*/
        /*tlr: larger pull quote in this slice*/
        /*font-size: 0.75rem;*/
        font-size: 1.125rem;
        /*line-height: 16px;*/
        line-height: 26px;
    }
}

/* ========================================================================== 
* Product Name: Cause Website - Responsive conversion
* Author: 
* Description: SASS styles for spotlight nav
* Version: 0.1.0
* Release date: 
========================================================================== */
ul.spotlightNavRow {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 18px;
    font-size: 1.125rem;
}

    ul.spotlightNavRow li {
        margin: 0px;
        padding: 0px 0px 5px 0px;
    }

        ul.spotlightNavRow li a {
            color: #F1B000;
            font-weight: 700;
            text-decoration: none;
        }

    ul.spotlightNavRow a:hover {
        color: #a4552c;
        text-decoration: underline;
    }

/* ========================================================================== 
* Product Name: Cause Website - Responsive conversion
* Author: 
* Description: SASS styles for footer 
* Version: 0.1.0
* Release date: 
========================================================================== */
.main-footer {
    /*display: flex;
    flex-direction: row;
    flex-wrap: wrap;*/
    margin-top: 30px;
}

    .main-footer span {
        padding-right: 30px;
    }

        .main-footer span:first-of-type {
            padding-right: 5px;
        }

.footerCopyright {
    font-size: 14px;
    font-size: 0.875rem;
    padding: 4px 0px 2px 0px;
    color: #46463a;
}

.footerLinks {
    font-size: 14px;
    font-size: 0.875rem;
    /* font-weight: bold; */
    padding: 4px 0px 2px 5px;
    color: #46463a;
}

    .footerLinks a {
        text-decoration: none;
    }

        .footerLinks a:hover {
            text-decoration: underline;
        }

        .footerLinks a:first-of-type {
            margin-right: 20px;
        }

#FooterInfoLinks {
    font-size: 14px;
    font-size: 0.875rem;
    /* font-weight: bold; */
    padding: 4px 0px 2px 5px;
    color: #46463a;
}

@media screen and (max-width: 710px) {
    .main-footer {
        flex-direction: column;
    }

        .main-footer span {
            display: block;
        }

            .main-footer span:first-of-type {
                display: inline;
            }

    .footerLinks {
        padding: 0;
    }
}

/* ==========================================================================
    Description: Lightbox gallery stylesheet
    Author: Sean Kabanuk
    Release date: 0/00/00
    Revision History:   Revised By      Revised On: 
   ========================================================================== */
.lb-gallery {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
}

    .lb-gallery img {
        margin: 0px 5px 5px 5px;
    }

/* ==========================================================================
    Description: Push Navigation stylesheet
    Author: Sean Kabanuk
    Release date: 0/00/00
    Revision History:   Revised By      Revised On: 
   ========================================================================== */
/* ==========================================================================
   OFF CANVAS NAV SETUP
   ==========================================================================

/* https://www.sitepoint.com/pure-css-off-screen-navigation-menu/ */
/* Navigation Menu - Background */
.navigation {
    /* critical sizing and position styles */
    width: 100%;
    height: 650px;
    /*height: 100%;*/

    position: absolute;
    /* Chaning from fixed, so it doesn't show at bottom on scroll - SK */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    padding: 40px 0;
    background: #F1B000;
    border: 15px solid white;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
}

    .navigation ul {
        float: left;
        list-style: none;
        width: 50%;
        padding: 0;
    }

        .navigation ul:first-of-type {
            margin-left: auto;
            border-right: 1px solid #41342c;
        }

        .navigation ul:last-of-type {
            margin-right: auto;
        }

/* Navigation Menu - List items */
.nav-item {
    /* non-critical appearance styles */
    width: auto;
    margin: 0 auto;
    text-align: center;
}

    .nav-item h1 {
        color: #3D3935;
        font-size: 2em;
    }

    .nav-item a {
        /* non-critical appearance styles */
        display: block;
        padding: .5em;
        background: #F1B000;
        color: #3D3935;
        text-transform: uppercase;
        font-weight: 200;
        font-size: 1.2em;
        text-decoration: none;
        transition: all .2s;
    }

        .nav-item a:hover {
            color: #fff;
            text-decoration: none;
        }

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
    /* Critical position and size styles */
    min-height: 100%;
    min-width: 100%;
    background-color: #fff;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;
    /* non-critical apperance styles */
    padding: 0;
}

/* Nav Trigger */
.nav-trigger {
    /* critical styles - hide the checkbox input */
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
    /* critical positioning styles */
    position: fixed;
    /* right: 25px; top: 15px; */
    /* right: 100px; top: 120px; */
    right: 16.5%;
    top: 15px;
    z-index: 2;
    /* non-critical apperance styles */
    height: 70px;
    width: 127px;
    cursor: pointer;
    /*
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
    */
    background-image: url("/static/images/menu-icon.png");
    background-repeat: no-repeat;
    background-size: 60%;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
    transition: top 0.5s;
}

.nav-trigger:checked + label {
    top: 650px;
}

.nav-trigger:checked ~ .site-wrap {
    top: 650px;
}

/* Without this, the body has excess horizontal scroll when the menu is open */
/*
  body {
    overflow-y: hidden;
  }
  */
/* Additional non-critical styles */
/* Micro reset */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: Helvetica, Arial, sans-serif;
}

/* NAVIGATION MOBILE STYLES */
@media screen and (min-width: 1441px) {
    #wrapper {
        max-width: 1440px;
        margin: 0 auto;
    }

    .navigation {
        max-width: 1410px;
        margin: 0 auto;
    }

    label[for="nav-trigger"] {
        /*tlr*/
        /*right: 26%;*/
        /*top: 30px;*/
        z-index: 1000;
    }
}

@media screen and (max-width: 1024px) {
    .nav-item h1 {
        font-size: 2em;
    }
}

/*tlr: skip this step - larger nav trigger overwriting logo*/
/*@media screen and (max-width: 600px) {
	label[for="nav-trigger"] {
		right: 40%;
		top: 20px;
		z-index: 1000;
	}
}*/

/*@media screen and (max-width: 414px) {*/
@media screen and (max-width: 600px) {
    .wrapper {
        padding-bottom: 700px;
    }

    .navigation {
        /* critical sizing and position styles */
        height: 150%;
        padding: 80px 0;
        /*  height: 520px; */
        /*tlr - menu is incorrectly hanging out below the fold*/
        /*this hides it but needs to be based on it's visibility state so js? */
        /*visibility:hidden;*/
        /*overflow-x:hidden;*/
        /*tlr - visual fix, but this should be on the wrapper*/
        /*padding-bottom:682px;*/
    }

    label[for="nav-trigger"] {
        background-image: url("/static/images/menu-icon-mobile.png");
        background-repeat: no-repeat;
        height: 35px;
        width: 64px;
        left: 44.9%;
    }

    .navigation ul {
        float: none;
        width: 100%;
    }

        .navigation ul:nth-of-type(2) {
            margin-top: 30px;
        }

    .nav-trigger:checked + label {
        top: 40px;
    }

    .nav-trigger:checked ~ .site-wrap {
        /*tlr: menu length for additional items*/
        /*top: 950px;*/
        top: 1042px;
    }

    .wrapper .ml-signup {
        width: 100%;
    }
}

@media screen and (max-width: 375px) {
    .nav-item a {
        padding: .5em;
    }

    .wrapper .ml-signup {
        width: 100%;
    }
}

@media screen and (max-width: 320px) {
    .navigation ul:nth-child(2) {
        /*display: none;*/
    }

    .nav-trigger:checked ~ .site-wrap {
        /*tlr: menu length for additional items*/
        /*top: 600px;*/
        top: 1080px;
    }


    .wrapper .ml-signup {
        width: 100%;
    }
}
