@charset "UTF-8";
/*
Theme Name: XLR8R Custom
Theme URI: https://wordpress.org/themes/xlr8r_custom
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Requires at least: WordPress 4.9.6
Version: 999 
License: GNU General Public License v2 or later
License URI: LICENSE

/**Additional CSS from Christopher Ward **/

@import "https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css";



body, html {
  padding: 0px;
  margin: 0px;
  color: #222;
  font-family: Abel;
}

hr {
  border: 0px solid #999;
  background: #999;
  height: 1px; 
}
h1, h2, h3, h4, h5, h6, p {
  margin: 0px;
  padding: 0px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: din-condensed; 
}

h1 {
  font-size: 2.75em;
  letter-spacing: -0.02em;
  font-weight: 200;
}

h2 {
  font-size: 1.62em;
  letter-spacing: -.02em;
  font-weight: 200;
}

h3 {
  font-size: 1.5em;
  letter-spacing: -.02em;
  font-weight: 200;
}

h5 {
  font-size: 1.5em;
  font-weight: normal;
  letter-spacing: .01em;
}

p, li {
  font-family: Abel;
  font-size: 20px;
  margin: 2% 0% 2% 0%;
  line-height: normal;
  }
  
p strong {
  font-size: 22px;
  letter-spacing: .5px;
  font-family: din-condensed, sans-serif;
  font-style: normal;
}

p, a {
    text-decoration: none;
}

a, a:visited {
  color: #2299FF;
}

input {
    border: 3px solid #999;
    box-sizing: border-box;
    color: #222;
    font-weight: 200;
    font-family: Rift, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 30px;
    outline: none;
    padding: 1%;
    text-decoration: none;
    background: transparent;  
}

  input[type="submit" i] {
    background: #222;
    font-family: Rift;
    text-transform: uppercase;
    padding: 1%;
    color: #FFF;
    text-align: center;
    border: none;
    font-size: 16px;
  }

/**ads**/

.ad_center {
  width: 970px;
  height:250px;
  background-color: #dfdfdf;
  display: none;
  margin: 4% auto;
}

.ad_right {
  width: 300px;
  height:600px;
  background-color: #dfdfdf;
  display: none;
  float: right;
}




/* header */

.header-menu {
    background: #fff;
    width: 100%;
    padding: 1% 0%;
    text-align: center;
    display: block;
}
    .custom-xlr8r-menu hamburger {
    }
    
        logo {
            margin: 2% auto;
            display: inline-block;
        }
        
            
        .custom-xlr8r-menu search {
        }
          .fa-search {
            font-size: 30px;
            width: 30px;
            color: #222;
        }


/* overlay menu */

.overlay {
  position: fixed;
  background-image: linear-gradient(120deg, #f9ffff 0%, #fffff9 100%);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .35s, visibility .35s;
  z-index: 10000;
  list-style-type: none;
}

.main-menu {
  text-align: center;
  font-size: 30px;
  line-height: 60px;
  margin: 60px 0px 0px 0px;
  display: block;
}

    .main-menu li a {
      font-family: rift, din-condensed;
      font-weight: 300;
      font-size: 1em;
      color: #333;
      list-style-type: none;
      font-size: 25px;
      line-height: 25px;
    }

    .main-menu-more, .desktop-search {
      display: none;
    }


/* social */

.overlay social, .site-footer social {
  width: 100%;
  display: inline-block;
  text-align: center;
}

.overlay .fa {
  margin: 20px;
  font-size: 20px;
}

footer .fa {
  color: #DDD;
  margin: 10px;
}

.lowdown .fa {
  margin: 10px;
}



/* overlay search */

.search_form {
  position: absolute;
  top: 42%;
  margin: 0px auto;
  width: 100%;
  text-align: center;
}

.search_form input[type="search"] {
 font-size: 36px;
 width: 80%;
}

.search-submit {
  display: none;
}
.submit {
  text-align: center;
}

.search_form {
  position: absolute;
  top: 42%;
  margin: 0px auto;
  width: 100%;
  text-align: center;
}

.search_form input[type="search"] {
 font-size: 36px;
 width: 80%;
}

.search-submit {
  display: none;
}
.submit {
  text-align: center;
}





/*grid*/

.content-width {
    max-width: 1100px;
    margin: 0px auto;
}

.section-header {
  background: #222;
  font-family: Rift;
  font-size: 24px;
  padding: 10px;
  width: 100%;
  display: block;
  color: #fefefe;
  margin: 5% 0%;
  clear: both;
}

.lowdown {
  background: #DDD;
  padding: 4% 0%;
  margin: 3% 0%;
}

    .lowdown h2 {
    font-family: Rift;
    font-size: 36px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 2% 2% 2% 0%;
    width: 100%;
    display: block;
    color: #222;
    }
        
    .lowdown input[type="submit" i] {
      font-size: 1.125em;
    }
    
    input[type="email"] {
      width: 80%;
    }


.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 4%;
  grid-rows: auto;
}
      .category {
        text-transform: uppercase;
        font-size: 14px;
      }
            
      .grid .category {
        background: #FFF;
        color: #222;
        padding: 2px 0px;
        display: inline;
        margin: -2% 0%;
      }
    

      .grid h2 {
        margin: 1% 0% 10% 0%;
      }
      .grid img {
        height: 320px;
        width: 100%;
        object-fit: cover;
      }
    
      .grid-left {
          grid-template-columns: 100%;    
          grid-rows: 1;
      }
      
      .grid-left h2 {
        width: 90%;
      }
      
      .grid-left img {
        height: 180px;
        width: 40%;
        object-fit: cover;
        float: left;
        padding: 0% 2% 3% 0%
      }
    
      .grid-left .category {
        background: #222;
        color: #FFF;
        width: auto;
        display: table;
        padding: 3px 5px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin: 0% 0%;
      }
    
      .grid .exclusive, .grid-left .exclusive {
          background: #FF0200;
          color: #FFFFFF;
          padding: 2px;
          }
          
        .grid-bottom {
            grid-template-columns: repeat(5, 1fr);    
            grid-rows: 1;
        }
    
        .grid-bottom img {
          height: 180px;
          width: 100%;
          object-fit: cover;
          float: left;
        }
        .grid a {
          color: #222;
        }
      
        .grid-four {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 2%;
        grid-rows: auto;  
        }
        
        .grid-four img {
        height: 250px;
        width: 100%;
        object-fit: cover;
      }
        
        
/*pages*/
.page-header {
  text-align: center;
  margin: 0% 0% 5% 0%;
}
      .page-header h1 {
      margin: 0% 0% 1% 0%;
      }
    
      .page-header h3 {
      }


/*single posts*/

.basic .single {
  width: 80%;
  margin: 0px auto;
}

.basic .page-header {
  text-align: center;
}

.single {
  text-align: left;
}

    .single img, .single iframe {
    display: inline;
    width: 100%;
    height: auto;
    }

    .single iframe {
      width: 100%;
    }
    
    .single blockquote p {
      font-family: Rift;
      font-size: 36px;
      padding: 4% 0%;
      margin: 4% 0%;
      border-top: 1px solid #bbb;
      border-bottom: 1px solid #bbb;
    }
    
       logo img {
                  height: 36px;
                  width: auto !important;
                  max-height: 36px;
            }
            
.gallery-icon img {
  width: auto;
  float: left;
  margin: 10px;
}

.gallery, .gallery-icon img:after {
  clear: both;
  display: inline-block;
  width: 100%;
}

figure {
  margin: 0%;
}

.fullscreen {
  height: 700px;
  overflow: hidden;
  margin: 2% 0% 2% 0%;
}
    .fullscreen img{
      object-fit: cover;
      width: 100%;
      height: auto;
    }

.features {
  max-width: 900px;
  width: 100%;
  margin: 0px auto;
}

    .features p {
      text-align: left;
    }
    
    .features .ad_right, .features .page-header  {
      display: none;
    }



/* grid navigation, entry footer tags, comments */


.navigation .nav-links {
  text-align: center;
  display: block;
  width: 100%;
}

.page-numbers {
  font-size: 20px;
}

.page-numbers .svg-icon {
 position: relative;
 top: 5px;
}

.entry-footer {
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  margin: 6% 0% 6% 0%;
  padding: 6% 0% 6% 0%;
  font-family: abel;
}

.entry-footer * {
  margin: 0% .5% 0% 0%;
}

.entry-footer svg {
  height: 24px;
  width: 24px;
      top: 6px;
    position: relative
}

#comments .comment-form-comment {
  margin: 0px auto;
  width: 100%;
  text-align: center;
}

    .features .comments-title, .basic .comments-title {
      text-align: center;
    }

      #comments label {
        display: none;
      }
      
      .comments-area p {
        text-align: center;  
      }
      
      .comment-form-comment input {
        font-size: 20px;
        font-family: Abel;
      }
      
      .comment-user-avatar img, .vcard img{
        width: 60px;
        height: 60px;
      }
      
      .comment-list, .comment-user-avatar, .discussion-avatar-list {
        list-style-type: none;
      }
      
      .comment-content p {
        text-align: left;
      }
      
      .comment-content .fn {
        clear: both;
      }
      
      .screen-reader-text {
        display: none;
      }

/* footer */

.site-footer {
  background: #222;
  color: #ddd;
  margin: 4% 0% 0% 0%;
  padding: 4% 0% 4% 0%;
  text-align: center;
}

  .site-footer p {
    font-size: 16px;
  }



/*******
LEAKY PAYWALL */
.leaky_paywall_subscription_option {
 width: 100%;
 margin: 0px auto;
 border: 0px solid;
 border-radius: 0px;
}
.subscription-options-title {
 display: none;
}
#leaky_paywall_message {
 box-shadow: 0 0 0em 0em;
 border: 0px solid;
 text-align: center;
 background: #fc0000;
 border-radius: 0px;
}

#leaky_paywall_message strong {
 font-weight: normal;
}
.leaky_paywall_message_wrap {
 background: transparent;
}
.leaky_paywall_subscription_price p {
 text-align: center;
 font-weight: normal;
}
.leaky-paywall-payment-button {
 background: #fc0000;
 color: #FFFFFF;
}
.leaky-paywall-payment-button a, .leaky-paywall-payment-button a:visited {
  background: #fc0000;
}
/*******
/*******
/*******
/*******
/*******

XLR8R Landing Page */

.plus-landing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 4%;
  clear: both;
}

.plus-landing .page-header {
  margin: 3% 0% 5% 0%;
}

.box1 { 
  grid-column-start: 1; 
  grid-row-start: 1; 
  grid-row-end: 4; 
}

.plus-landing-grid .xlr8r_plus_hero-text {
  width: 100%;
  height: 400px;
  margin-bottom: 8%;
  padding-bottom: 8%;
  height: auto;
  box-shadow: 5px 6px #FFFFFF;
}

.plus-landing-grid .xlr8r_plus_hero-text h1 {
  margin: 5% auto;
  font-size: 36px;
  letter-spacing: -1px;
  width: 100%;
  display: block; 
}

.plus-landing-grid .xlr8r_plus_hero-text p {
  display: block;
  background: none;
  margin: 10px auto;
  padding: 3px 0px;
}

.plus-landing-grid .xlr8r_plus_hero-text a {
  width: 80%;
  display: block;
  background: none;
  margin: 3px auto;
  border: 1px solid #FFF;
}

.plus-landing-grid .flowpaper {
  overflow: hidden;
  width: 90%;
  margin: 30px auto;
}

      /* XLR8R+ LOGGED OUT */
      .not-logged-in {
        display: grid;
        grid-template-columns: 32% 36% 21%;
        text-align: left;
        grid-column-gap: 4%;
        clear: both;  
      }
      
      .not-logged-in img {
        width: 100%;
        object-fit: cover;
      }
      
      .not-logged-in input, .not-logged-in label {
        font-size: 18px;
      }
      .not-logged-in input {
        padding: 5px;
        color: #222;
        border: 2px solid #222;
      }
      
      .not-logged-in .plus-form {
        background: #FFF;
        padding: 8%;
        color: #222;
        position: re;
        right: 0px;
      }

      .not-logged-in .modal-button {
        width: auto;
        padding: 4%;
        text-align: center;
      }
      .not-logged-in input[type="submit"] {
        color: #fff;
      }
      
            
/* XLR8R+ HER0 SLIDER CAROUSEL */
                    
.xlr8r_plus_hero-text {
  text-align: center;  
  width: 50%;
  float: left;
  background-size: cover;
  height: 500px;
}

.xlr8r_plus_hero-image {
  min-height: 500px;
  height: 500px;
  width: 50%;
  float: left;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-bottom: 10px;
}

.xlr8r_plus_hero-text h1 {
  margin: 0px auto;
  display: inline-block;
  text-align: center;
  margin-top: 15%;
  max-width: 70%;
  font-family: din-condensed;
  font-weight: 200;
  letter-spacing: -3px;
  font-size: 60px;
  color: inherit;
}

.xlr8r_plus_hero-text a {
padding: 10px;
display: inline-block;
width: auto;
font-size: 18px;
color: inherit;
}

/* BX Wrapper, Slider and Carousel */
.bx-wrapper {
  -webkit-box-shadow: 0 0 0px #ccc;
  box-shadow: 0 0 0px #ccc; 
  border: 0px solid #fff;
}

.slider {
  height: 500px;
  overflow: hidden;
}

.bx-wrapper img {
  max-width: none;
  height: inherit;
}

.slider_mobile {
  display: none;
}





/* modal window subscribe */

.modal-window {
    max-width: 800px;
    height: auto;
    max-height: 700px;
    display: grid;
    grid-template-columns: 50% 50%;
    background: #000;
    border: 3px solid #FFF;
    overflow: hidden;
    z-index: 20000;
  }
  
  .modal-image-area {
    overflow: hidden;
  }
  
  .modal-window img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
  
  .modal-text-area {
    background: #FF0200;
    color: #FFF;
    padding: 7%;
  }
  
  .modal-close {
    position: absolute;
    top: 0px;
    right: 10px;
    background: #FFF;
    color: #dd2233;
  }
  
  .modal-window p {
    font-size: 16px;
  }
  
  .modal-button {
    background-color: #222;
    color: #fff;
    font-family: Rift;
    font-size: 20px;
    padding: 5px;
  }
  
  #hidden-content-b {}
  /* Custom styling 
  max-width: 550px;
  border-radius: 4px;*/

  /* Custom transition - slide from top
  transform: translateY(-50px);
  transition: all .33s;*/
}

.fancybox-slide--current #hidden-content-b {
  transform: translateY(0);
}

.fancybox-close {
  color: #dd2233; 
}
  
  
  
  
/* Login form */

.xlr8r-subscription-form input, .plus-landing input {
  display: block;
}

.xlr8r-subscription-form > p:first-child {
  padding: 10px;
  background: #FF200F;
  color: #FFFFFF;
}

.xlr8r-subscription-form > a {
  text-decoration: underline;
}

form p {
  margin: 5% 0% 5% 0%;
}
.xlr8r-subscription-form p {
  margin: 2% 0%;
}

.xlr8r-subscription-form input {
  font-size: 18px;
}

/*
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
Animations and special modules */


                    /* Animate Mag Glass */
                    // vars
                    $color-white: #222;		  // icon color
                    $color-bg: #b0e1be;	  // background color
                    $animation: .5s;	// animation speed
                    $scale: 0.1;			  // icon scale 68/68 default
                    
                    $dimensions-open: 28px;
                    $dimensions-close: 36px;
                    
                    
                    *, *:before, *:after {
                      box-sizing: border-box;
                    }
                    
                    // spacing + background-color
                    body {
                      background: $color-bg;
                      padding: 40px;
                      font-family: roboto, sans-serif;
                    }
                    
                    .magnifier-icon {
                      display: block;
                      position: relative;
                      cursor: pointer;
                      opacity: 1;
                      transition: opacity 2s;
                      padding: 20px;
                       
                      &:before {
                       /*content: "";
                        display: block;
                        border: 3px solid $color-white;
                        
                        width: $dimensions-open; 
                        height: $dimensions-open; 
                        border-radius: $dimensions-open*.5;
                        
                        animation: open $animation ease 0s 1 forwards;*/
                      }
                      
                      &.is-open:before {    
                        animation: close $animation*.5 ease $animation*.5 1 forwards;
                      }
                    }
                    
                    .magnifier-handle,
                    .magnifier-handle-x {
                      content: "";
                      display: block;
                      width: 25px;
                      height: 2px;
                      transform: rotate(45deg);
                      background: #222;
                      position: absolute;
                      top: 0px;
                      left: 0px;
                      transition:all .3s;
                      
                      .is-open & {
                        animation: x-stroke-in $animation ease 0s 1 forwards;
                      }
                    }
                    
                    .magnifier-handle-x {
                        height: 25px;
                        background: transparent;
                        border: 2px solid #222;
                        border-radius: 50%;
                    }
                    .magnifier-handle {
                        top: 28px;
                        left: 22px;
                        width: 15px
                    }
                    .is-open .magnifier-handle {
                        top: 10px;
                        left: 0;
                        width: 25px;
                    }
                    .is-open .magnifier-handle-x {
                        height: 2px;
                        background: #222;
                        border-radius: 0;
                        border: 0;
                        transform: rotate(-50deg);
                        top: 10px;
                        left: 0px;
                    }
  
  
  
  
  
  
  
                    /* Overlay */
                    .toggle-button {
                        position: fixed;
                        top: 6%;
                        left: 2%;
                        padding: 0px 0px;
                        margin: 8px 15px 8px 0;
                        height: 20px;
                        width: 35px;
                        cursor: pointer;
                        z-index: 10001;
                    }
                    
                    .search-toggle-button {
                          position: fixed;
                          top: 6%;
                          right: 3%;
                    }
                    
                    .bar {
                        background-color: #222;
                        display: block;
                        width: 100%;
                        height: 2px;
                        border: 0;
                        -webkit-transition: all .35s ease;
                        transition: all .35s ease;
                    }
                    .bar + .bar {
                        margin-top: 7px;
                    }
                    .middle {
                        top: 11px;
                    }
                    .bottom {
                        top: 22px;
                    }
                    .toggle-button:hover {
                        opacity: .7;
                    }
                    .toggle-active .bar {
                        background-color: #2299FF;
                    }
                    .toggle-active .top {
                        -webkit-transform: translateY(6px) translateX(0) rotate(45deg);
                    }
                    .toggle-active .middle {
                       opacity: 0;
                    }
                    .toggle-active .bottom {
                        -webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
                    }
                    
                    .search-toggle-active {
                      z-index: 10001;
                    }
                    
                    .nav-active {
                        opacity: 1;
                        visibility: visible;
                        height: 100%;
                    /*    max-height: 340px;*/
                    }
                    
                    .nav-inactive {
                        opacity: 0;
                    }
                    

/* blocker message */

.blocker_message {
  border: 5px solid #FF0200;
  padding: 30px;
}

.blocker_message .modal-button {
  background-color: #FF0200;
  color: #FFF;
  display: inline;
  padding: 10px;
}

.blocker_message img {
  margin: 0px 0px 0px 0px;
  
}

.blocker_message label, .blocker_message input {
  display: block;
  font-size: 18px;
}

.blocker_message p, .blocker_message h2 {
  display: block;
  margin: 5px;
}

.blocker_message p {
  font-size: 18px;
}

.blocker_message #open-login {
  cursor: pointer;
}

.note {
    position: relative;
    width: 150px;
    color: #fff;
    background: #FF0200;
    overflow: hidden;
    float: right;
    margin: 0px 0px 0px 20px;
    height: 150px;
    box-shadow: 
    /* The top layer shadow */
    0 -1px 1px rgba(0,0,0,0.15),
    /* The second layer */
    0 -10px 0 -5px #eee,
    /* The second layer shadow */
    0 -10px 1px -4px rgba(0,0,0,0.15),
     /* The third layer */
    0 -20px 0 -10px #eee,
    /* The third layer shadow */
    0 -20px 1px -9px rgba(0,0,0,0.15);
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 30px 30px 0;
  border-style: solid;
  border-color: #eee #eee #FF0200 #FF0200;
  background: #FF0200;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  /* Firefox 3.0 damage limitation */
  display: block; width: 0;
}

.note.rounded {
  -moz-border-radius: 5px 0 5px 5px;
  border-radius: 5px 0 5px 5px;
}

.note.rounded:before {
  border-width: 8px;
  border-color: #fff #fff transparent transparent;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}

/*
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *  /
 * * * * * * *
 * * * * * * * */


/* repair the way old Safari browsers don't allow grid layouts ;( */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {  
  .grid div {
    width: 30%;
    float: left;
    padding: 1%;
  }
  
  .grid-bottom div {
    width: 18%;
    float: left;
    padding: 1%;
  }
  
  .content-width, .section-header, .ad_center, .ad_right, .lowdown, .site-footer {
    clear: both;
  }
  
  .grid-left div {
    width: 70%;
  }
  
  .grid .category {
    display: inline-block;
    margin: 0px;
  }

  .grid-bottom .category {
    display: block;
    width: 100%;
  }
  
  
  input [type="search"], .search-field  {
    font-size: 36px;
  }
  
  .category {}
  
  .grid h2:before, .grid-left h2:before, .grid-bottom h2:before {
   content: "\A";
   white-space: pre;
  }
  
  .grid-left h2 {
    display: inline;
  }
  
  
   .modal-window {
    max-width: 800px;
    height: auto;
    max-height: 600px;
    display: grid;
    grid-template-columns: 50% 50%;
    background: #000;
    border: 3px solid #FFF;
    overflow: hidden;
    z-index: 20000;
  }
  
  .modal-image-area {
    overflow: hidden;
  }
  
  .modal-window img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
  
  .modal-text-area {
    background: #FF0200;
    color: #FFF;
    padding: 7%;
    height: 150px;
  }
  
  .modal-close {
    position: absolute;
    top: 0px;
    right: 10px;
    background: #FFF;
    color: #dd2233;
  }
  
  .modal-window p {
    font-size: 16px;
  }
  
  .modal-button {
    background-color: #222;
    color: #fff;
    font-family: Rift;
    font-size: 20px;
    padding: 5px;
  }
  
}}



/* Mobile queries
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *
 * * * * * * *  /
 * * * * * * *
 * * * * * * * */


@media all and (max-width: 1100px) {
      /* tablets, hide clunky elements */ 

      .content-width {
        width: 90%;
      }

      /* lowdown centered */
      .lowdown > .content-width {
            text-align: center;
      }
      
      input[type="email"] {
        width: 70%;
        margin-bottom: 10px; 
      }
      
      .ad_center, .ad_right {
      display: none;
      }
      
      .header-menu {
          height: 80px;
          z-index: 9000;
          position: static;
      }
      logo {
            margin: 20px auto;
      }
     
      
      .category {
        font-size: 18px;
      }
      

      /* get the overlay and nav buttons looking good */ 

      .overlay social, .site-footer social {
        width: 100%;
        display: inline-block;
        text-align: center;
        position: static;
        bottom: auto;
      }
      
      .search-toggle-button, .toggle-button  {
            position: static;
            z-index: 9001;
            float: left;
            position: relative;
            top: 20px;
            left: 25px
      }
      
      .search-toggle-button {
        float: right;
        left: auto;
        right: 25px;
      }
      
      .toggle-active, .search-toggle-active {
        z-index: 11000;
      }
      
/* change the plus carousel on homepage for better layout */
    
    .slider_mobile {
      display: block;
    }
        .slider_mobile img {
          width: 100%;
          object-fit: cover;
        }
        
        .slider_mobile a {
          padding: 0px;
          margin: 0px;
        }
        
    .slider .xlr8r_plus_hero-text {
      width: 100%;
    }
    
    .slider .xlr8r_plus_hero-text h1 {
      font-size: 40px;
      letter-spacing: -1px;
    }

    .slider .plus_readmore {
    display: none;
    }
        
    .slider .xlr8r_plus_hero-image {
    display: none;
    }
    
    .xlr8r_plus_hero-image img {
    }
}

@media all and (max-width: 600px) {
  
      .content-width {
      width: 90%;
      }
      
      .main-menu {
        text-align: center;
        font-size: 28px;
        line-height: 56px;
        margin: 20px 0px 0px 0px;
        display: block;
      }
      
      .section-header {
      width: 94%;
      padding: 6% 3%;
      }
      
      p {
      font-size: 18px;
      }

      /* get the grid in order */ 

      .grid, .grid-left, .grid-bottom, .plus-landing-grid {
        display: grid;
        grid-template-columns: 100%;
        grid-column-gap: 1%;
        grid-rows: auto;
      }
    
      .grid .category{
        color: #FFF;
        width: auto;
        display: table;
        padding: 3px 5px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin: 0% 0%;
      }
      
      .grid-left h2 {
        width: 100%;
      }
      
      .grid-left img{
        width: 100%;
        height: 200px;
      }
      
      .grid h2 {
        margin: 1% 0% 11% 0%;
      }
    
      /* change to centered text*/ 
      .basic .single {
        width: 100%;
      }
      .basic .page-header {
        text-align: center;
      }
    /* change the image of the fullscreen feature */ 
      .fullscreen {
        height: auto;
      }
      .fullscreen img {
        object-fit: cover;
        width: 100%;
        height: 50%;
    }
    
    
    /* modal resize */
    
    .modal-window {
        max-width: 800px;
        height: auto;
        display: grid;
        grid-template-columns: 60% 40%;
        background: #000;
        border: 3px solid #FFF;
      }
      
      .modal-text-area {
        background: #dd2233;
        color: #FFF;
        padding: 10%;
      }

      /* XLR8R+ LOGGED OUT */
      .not-logged-in {
        text-align: center;
      }
      
      .not-logged-in img {
        width: 100%;
        margin: 10px 0px 10px 0px; 
      }
      
      .not-logged-in input, .not-logged-in label {
      }
      .not-logged-in input {
        width: 100%;
      }
      
      .not-logged-in .plus-form, .not-logged-in form {
        text-align: center;
      }

      .not-logged-in .modal-button {
      }
      .not-logged-in input[type="submit"] {
      }
      
    .note {
    position: relative;
    width: 150px;
    color: #fff;
    background: #FF0200;
    overflow: hidden;
    float: none;
    margin: 0px 0px 0px 0px;
    height: 150px;
    box-shadow: 0px 0px #ddd;
  }
  
  @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {  
  .grid div, .grid-bottom div {
    width: 100%;
    float: none;
    padding: 0%;
  }
}


/* LEAKY PAYWALL STUFF */