// Marc Jenkins breakpoints 
// Usage
/*
@include breakpoint(xs) {}
@include breakpoint(sm) {}
@include breakpoint(md) {}
@include breakpoint(lg) {}
*/

/* Idea:
Responsive Line Break
<h1>
  Responsive Line Break
  <br class="md-show">
  To Control Wrapping
</h1>
*/

.display-none { display: none !important }
.nav-button { display: none; }
.mmenu-trigger__holder { display: none; }

@media all and (max-width: 1200px){

  /* ----------- navmain */

  // give it some L/R padding
  .container--navmain,
  .container--footer {
    padding: $container-pad-mobile !important;
  }
  /* the rest will change when it gets smaller
  .navmain__links li {
    margin: $main-nav-li-margin;
  }
  .navmain__links a { 
    padding: $main-nav-button-pad; 
    font-size: $main-nav-font-size;
    background-image: none;
  }
  */

  /* ----------- /navmain */
}


@media all and (max-width: 1100px){

  /* ----------- navmain */

  .navmain__links li {
    margin: $main-nav-li-margin-tablet;
  }
  .navmain__links a { 
    padding: $main-nav-button-pad-tablet; 
    font-size: $main-nav-font-size-tablet;
  }

  /* ----------- /navmain */

}


@media all and (max-width: 1024px){

  // ----------- the slideshow captions
  .rslides--home__title { 
    @include font-size(70);
    line-height: 1.125em;
  }
  .rslides--home__text {
    @include font-size(30);
  }
  // ----------- /the slideshow captions

}


@media all and (max-width: 980px){

  /* ----------- navmain */
  .navmain__links li {
    margin: $main-nav-li-margin-tablet-sm;
  }
  .navmain__links a { 
    padding: $main-nav-button-pad-tablet-sm; 
    font-size: $main-nav-font-size-tablet-sm;
  }
  /* ----------- /navmain */

}

@media all and (max-width: 900px){

  // ----------- the slideshow captions
  .rslides--home__title { 
    @include font-size(60);
  }
  .rslides--home__text {
    font-family: $sans;
    @include font-size(30);
  }
  // ----------- /the slideshow captions

  // ----------- portfolio display grids

  .grid .four {
    float: left; 
    display: inline;
    width: 49.5%;
  }
  .grid .counter .four:nth-child(2n+2) {  
    margin-right: 0;
  }

  // ----------- /portfolio display grids

}

@media all and (max-width: 850px){

  /* ----------- navmain */
  .navmain__links a { 
    padding: $main-nav-button-pad-noicons; 
    background-image: none;
  }
  /* ----------- /navmain */

}

@media all and (max-width: 800px){

  // ----------- the slideshow captions
  .rslides--home__title { 
    @include font-size(50);
  }
  .rslides--home__text {
    font-family: $sans;
    @include font-size(20);
  }
  //.rslides--home__break { display: none; }
  // ----------- /the slideshow captions
	
	//.nav-container { padding: 0; }

  .container {
    //padding: $container-pad-tablet;
  }

  // ----------- multi-column grids

  [class*='col-'] {
    float: none; 
    width: 100%; 
    margin-right: 0;  
  }

  // ----------- multi-column grids: EXCLUSIONS
  
  // not yet for this one
  // break it only for phones (@400)
  .home--featured-product .col-1-2 {
    float: left; 
    margin-right: $multi-grid-margin; 
    .grid &:last-of-type {
      margin-right: 0; 
    }
    width: 48.5%;
  }

  // ----------- /multi-column grids: EXCLUSIONS

  // ----------- /multi-column grids
  	
  // ----------- portfolio display grids

  /*
  .grid .four {
    float: left; 
    display: inline;
    width: 49.5%;
  }
  .grid .counter .four:nth-child(2n+2) {  
    margin-right: 0;
  }
  */

  // ----------- /portfolio display grids
	
	// ----------- navigation
  .mmenu-trigger__holder { display: block; }

  // hide the desktop nav elements:
  // utility nav
  .container--navutility { display: none; }
  // main nav
  // not the whole container for this one, since it holds the trigger
  .navmain { display: none; }

  // and the header logo
  .logo--header { // the SVG logo
    float: left;
    width: 90%;
    max-width: 100px;
    margin: 8px 0 0 10px;
  }
  // ----------- /navigation
	
}

@media all and (max-width: 700px){

  // ----------- the slideshow captions
  .rslides--home__caption {
    top: 10%;
    padding: 15px 70px;
  }
  .rslides--home__title { 
    @include font-size(50);
  }
  .rslides--home__text {
    @include font-size(20);
  }
  //.rslides--home__caption__break { display: none; }
  // ----------- /the slideshow captions

  // ----------- footer content

  .container--footer {
    padding: 0 10px;
  }
  .grid--footer {
    padding-bottom: 1rem;
  }
  .grid--footer__right {
    text-align: left;
  }
  .footer__links {
    float: none;
    line-height: 1.5rem;
  }
  .footer__mapicon {
    float: none;
    margin: .5rem 0;
  }
  .footer__links a {
    display: block;
  }
  .footer__links span {
    display: none !important;
  }
  .footer__copyright--holder {
    text-align: left;
    margin-bottom: 5rem;
  }

  // ----------- /footer content

}

@media all and (max-width: 650px){

  // ----------- the slideshow captions
  .rslides--home__caption {
    top: 20%;
  }
  .rslides--home__title { 
    @include font-size(40);
  }
  // ----------- /the slideshow captions

}

@media all and (max-width: 600px){

  // ----------- the slideshow captions
  .rslides--home__caption {
    top: 30%;
    padding: 10px 60px;
  }
  .rslides--home__title { 
    @include font-size(30);
  }
  // ----------- /the slideshow captions

  .container {
    padding: $container-pad-mobile;
  }
  // but not these
  .container--navutility,
  .container--navmain,
  .container-full {
    padding: 0;
  }

  // hide the slideshow captions
  .rslides_container p.caption { display: none; }

	// ----------- portfolio display grids

	.grid .four {
		float: none; 
		display: block;
		width: 100%;
		margin: 0 0 1% 0;
	}

	// ----------- /portfolio display grids

}

@media all and (max-width: 500px){

  // ----------- slideshow holders
  .rslides_container { margin-bottom: 0; }
  .rslides_tabs { 
    margin: .25rem auto; 
    padding-top: 0;
    padding-bottom: 0;
  }

  // ----------- the slideshow captions
  .rslides--home__caption {
    top: 20%;
  }
  .rslides--home__caption sup {
    font-size: .5rem;
  }
  // ----------- /the slideshow captions

  // ----------- mobile font sizes

  h1,h2,h3,h4,h5,h6 {
    margin: $heading-margin-sm;
    line-height: $heading-line-height-sm;
  }
  h1 { @include font-size($h1-size-sm); }
  h2 { @include font-size($h2-size-sm); }
  h3 { @include font-size($h3-size-sm); }
  h4 { @include font-size($h4-size-sm); }
  h5 { @include font-size($h5-size-sm); }
  h6 { @include font-size($h6-size-sm); }

  // ----------- /mobile font sizes

  // ----------- multi-column grids: EXCLUSIONS
  
  // now give this one the "normal" responsive column change
  .home--featured-product .col-1-2 {
    float: none; 
    width: 100%; 
    margin-right: 0; 
  }
  // adjust the margin on the Featured Product logo
  .home--featured-product__logo {
    margin: 1rem 0;
  }

  // ----------- /multi-column grids: EXCLUSIONS

}


@media all and (max-width: 450px){

  // ----------- the slideshow captions
  .rslides--home__caption {
    top: 25%;
  }
  .rslides--home__title { 
    @include font-size(24);
  }
  .rslides--home__text {
    @include font-size(16);
  }
  // ----------- /the slideshow captions

}


@media all and (max-width: 400px){

  // ----------- the slideshow captions
  .rslides--home__caption {
    top: 0;
    padding: 25px 60px;
  }
  .rslides--home__text {
    @include font-size(16);
  }
  // ----------- /the slideshow captions

}

@media all and (max-width: 340px){

  // ----------- the slideshow captions
  .rslides--home__caption {
    padding: 20px 60px 10px 60px;
  }
  .rslides--home__title { 
    @include font-size(18);
  }
  .rslides--home__text {
    @include font-size(16);
  }
  // ----------- /the slideshow captions

}

// ---------------------- the mmenu display

#menu {
  @include forcesmooth;
  font-weight: bold;
  font-weight: 700 !important;
}

.mobile__navutility__links { margin-top: 1rem !important; }

// remove the vertical line
.mobile__navutility__links .navutility__nolink--li { display: none; }

.mobile__navutility__links {
  border-bottom: 1px solid #666 !important;
}
.mobile__navutility__links li,
.mobile__navutility__social li {
  padding: 1rem 0 !important;
}

.mobile__navutility__social {}
.mobile__navutility__search {}

.mobile__navutility__links,
.mobile__navutility__social,
.mobile__navutility__search {
  margin-left: 1rem;
  margin-right: 1rem;
}

// ---------------------- /the mmenu display