* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
   padding:0px;
}

html body {
   padding-top:70px;
}
@media only screen and (max-width: 400px) {
   html body {
      padding-top:34px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html body {
      padding-top:34px;
   }
}


html.landing-page body {

   /*
  background: url(https://www.sauritchsurfboards.com/images/home-/Aswamp%20copy-2@2x.jpg) no-repeat center center fixed;
  */

   background: url(../images/da-money-shot.jpg) no-repeat center center fixed;

  /*
  https://www.surfertoday.com/images/stories/surfboardshaper.jpg

  */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

body > header {
   position:relative;
   display:block;
   display: flex;
   justify-content: space-between;

   background:white;
   width:100%;
   margin-top:0px !important;

   padding:10px;


   /* NEW */
   position:fixed;
   top:0px;
   left:0px;
   right:0px;
   z-index:100;
   padding-bottom:0px;
   padding-top:0px;
   /* END NEW */
}

@media only screen and (max-width: 400px) {
   body > header {
      display:block;
      width:100%;
      height:40px;
      border-bottom:1px solid #eee;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   body > header {
      display:block;
      width:100%;
      height:40px;
      border-bottom:1px solid #eee;
   }
}


body > header.page-scrolled {
   border-bottom:1px solid #eee;
}

/* NEW 2/4/22 */
body > header div.top-left-links {
   position:relative;
   overflow:auto;
   display:flex;
   align-items:center;
}
body > header div.top-left-links a img {
   vertical-align:middle;
}
body > header a.home-link {
   position:relative;
   display:inline-block;
   text-decoration:none;
   margin-right:30px;
}
body > header img.logo {
   position:relative;
   max-height:60px;
}

body > header a.social-link {
   position:relative;
   display:inline-block;
   top:0px;
   text-decoration:none;
   margin-right:10px;
}
body > header a.social-link img {
   position:relative;
   max-height:30px;
   height:30px;
}

@media only screen and (max-width: 400px) {
   body > header div.top-left-links {
      margin-top:5px;
      max-width:200px;
   }
   body > header a.home-link {
      margin-right:10px;
   }
   body > header img.logo {
      max-height:30px;
      /*position:absolute;*/
      /*
      left:4px;

      top:50%;
      transform:translateY(-50%);

      max-height:30px;
      */
   }
   body > header a.social-link {
      margin-right:5px;
   }

   body > header a.social-link img {
      max-height:25px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   body > header div.top-left-links {
      margin-top:5px;
      max-width:200px;
   }
   body > header a.home-link {
      margin-right:10px;
   }
   body > header img.logo {
      max-height:30px;
      /*position:absolute;*/
      /*left:4px;*/
      /*
      top:50%;
      transform:translateY(-50%);
      */
      /*max-height:30px;*/
   }
   body > header a.social-link {
      margin-right:5px;
   }


   body > header a.social-link img {
      max-height:25px;
   }
}
/* END NEN 2/4/22 */

/* WAS 2/4/22
body > header img.logo {
   position:relative;
   max-height:60px;

   top:50%;
   transform:translateY(-50%);
}

@media only screen and (max-width: 400px) {
   body > header img.logo {
      position:absolute;
      left:4px;
      top:50%;
      transform:translateY(-50%);
      max-height:30px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   body > header img.logo {
      position:absolute;
      left:4px;
      top:50%;
      transform:translateY(-50%);
      max-height:30px;
   }
}
*/


body > header nav.links {
   /*
  display: flex;
  justify-content: flex-end;
  */

/* NEW */
  position:relative;
  top:2px;

  z-index:1;
  margin-bottom:0px;
  margin-top:0px;



height:80px;
/* END NEW */


}

@media only screen and (max-width: 400px) {
   body > header nav.links {
      position:absolute;
      right:0px;
      top:0px;
      height:40px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   body > header nav.links {
      position:absolute;
      right:0px;
      top:0px;
      height:40px;
   }
}


body > header nav.links ul {
   position:relative;
   list-style:none;
   margin:0;
   padding:0;


   top:50%;
   transform:translateY(-50%);
}

@media only screen and (max-width: 400px) {
   body > header nav.links ul {
      position:absolute;
      top:0px;
      transform:none;
      right:0px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   body > header nav.links ul {
      position:absolute;
      top:0px;
      transform:none;
      right:0px;
   }
}


body > header nav.links ul li {
   display:inline-block;
}

@media only screen and (max-width: 400px) {
   body > header nav.links ul li {
      display:block;
      padding:3px;
      background:#f9f9f9;
      border-bottom:1px solid #ddd;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   body > header nav.links ul li {
      display:block;
      padding:3px;
      background:#f9f9f9;
      border-bottom:1px solid #ddd;
   }
}


body > header nav.links ul li.hamburger,
body > header nav.links ul li.close-hamburger {
   padding-top:4px;
   padding-bottom:0px;
   padding-right:4px;
   height:30px;
   background:transparent;
   border-bottom:none;
   margin-right:0px;
   text-align:right;
   margin-bottom:10px;
   display:none;
}

body > header nav.links ul li.hamburger {
   display:none;
}

/*
body > header nav.links.menu-hidden ul li.hamburger {
   display:block;
}
body > header nav.links ul li.close-hamburger {
   display:block;
}
*/

body > header nav.links.hamburger-menu-hidden ul li.close-hamburger {
   display:none;
}

@media only screen and (max-width: 400px) {
   body > header nav.links.hamburger-menu-hidden ul li {
      display:none !important;
   }
   body > header nav.links.hamburger-menu-hidden ul li.hamburger {
      display:block !important;
   }
   body > header nav.links ul li.close-hamburger {
      display:block !important;
   }
   body > header nav.links.hamburger-menu-hidden ul li.close-hamburger {
      display:none !important;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   body > header nav.links.hamburger-menu-hidden ul li {
      display:none !important;
   }
   body > header nav.links.hamburger-menu-hidden ul li.hamburger {
      display:block !important;
   }
   body > header nav.links ul li.close-hamburger {
      display:block !important;
   }
   body > header nav.links.hamburger-menu-hidden ul li.close-hamburger {
      display:none !important;
   }
}




body > header nav.links ul li a {
   font-family: 'Bebas Neue', cursive;
   font-size:36px;
   color:#333;
   text-decoration:none;
   margin-left:20px;
}

body > header nav.links ul li a:hover {
   position:relative;
   top:-1px;
   color:#0080FF;
   color:rgba(0, 127, 255, 0.75);

}
body > header nav.links ul li.selected a:hover {
   top:0px;
   color:#0080FF;

}

@media only screen and (max-width: 400px) {
   body > header nav.links ul li a {
      font-size:20px;
      font-size:30px;
      padding-right:10px;
      margin-left:4px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   body > header nav.links ul li a {
      font-size:20px;
      font-size:30px;
      padding-right:10px;
      margin-left:4px;
   }
}


body > header nav.links ul li.hamburger a,
body > header nav.links ul li.close-hamburger a {
   position:relative;
   padding-right:0px;
}
body > header nav.links ul li.hamburger a {
   left:-4px;
}
body > header nav.links ul li.close-hamburger a {
   /*left:4px;*/
   /*left:4px;*/

}
body > header nav.links ul li.hamburger a img,
body > header nav.links ul li.close-hamburger a img {
   position:relative;
}


/*
@media only screen and (max-width: 400px) {
   body > header nav.links ul li {
      display:block;
      width:100%;
   }
   body > header nav.links ul li a {
      font-size:20px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   body > header nav.links ul li {
      display:block;
      width:100%;
   }
   body > header nav.links ul li a {
      font-size:20px;
   }
}
*/

body > header nav.links ul li.selected a {
   color:#0080FF;
}


/* LANDING PAGE */

html.landing-page h1 {
   position:absolute;
   width:50px;
   left:10px;
   bottom:10px;
   margin-bottom:0px;
   font-family: 'Bebas Neue', cursive;
   color:white;
   font-size:130px;
   text-shadow: 2px 2px orange;
   text-shadow: 2px 2px #000055;
}
@media only screen and (max-width: 400px) {
   html.landing-page h1 {
      font-size:40px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.landing-page h1 {
      font-size:40px;
   }
}




/* ABOUT */

html.about div.hero {
   position:relative;
   height:100vh;

/*
  background: url(https://www.sauritchsurfboards.com/images/about/Sauritch%20Surfboards%20232.jpg) no-repeat center center fixed;
  */


  background: url(https://www.sauritchsurfboards.com/images/about/Sauritch%20Surfboards%20232.jpg) no-repeat center center;
  /*
  https://www.surfertoday.com/images/stories/surfboardshaper.jpg

  */


  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

html.about h1 {
   position:absolute;
   right:10px;
   top:10px;
   margin-bottom:0px;
   font-family: 'Bebas Neue', cursive;
   color:white;
   color:orange;
   color:#ff0000;
   color:white;
   font-size:130px;
   text-shadow: 2px 2px #000055;
}

@media only screen and (max-width: 400px) {
   html.about div.hero {
      height:50vh;
   }
   html.about h1 {
      font-size:40px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.about div.hero {
      height:50vh;
   }
   html.about h1 {
      font-size:40px;
   }
}




html.about div.text-body {
   position:relative;
   margin-left:auto;
   margin-right:auto;
   max-width:900px;
   padding-top:30px;
}

html.about p {
   font-family: 'Cormorant Garamond', serif;
   font-family: 'Poppins', sans-serif;
   font-weight:200;
   font-size:24px;
   line-height:1.5em;
   margin-bottom:30px;
}

@media only screen and (max-width: 400px) {
   html.about div.text-body {
      padding:30px;
   }
   html.about p {
      font-size:20px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.about div.text-body {
      padding:30px;
   }
   html.about p {
      font-size:20px;
   }
}


html.about p em {
   font-weight:500;
   font-size:24px;
   color:#0080FF;
}
@media only screen and (max-width: 400px) {
   html.about p em {
      font-size:24px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.about p em {
      font-size:24px;
   }
}

html.about div.text-body.roboto p {
   font-family: 'Roboto', sans-serif;
   font-weight:200;
}


html.about div.text-body.helvetica p {
   font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
   font-weight:300;
}



/* SURFBOARDS */

html.surfboards {
   scroll-behavior: smooth;
}

/*
html.surfboards body {
   padding-top:70px;
}
*/

/*
SCOTT
html.surfboards header {
   position:fixed;
   top:0px;
   left:0px;
   right:0px;
   z-index:100;



padding-bottom:0px;
padding-top:0px;
}
*/

/*
html.surfboards nav.links {

   position:relative;
   top:2px;

   z-index:1;
   margin-bottom:0px;
   margin-top:0px;



height:80px;
}
*/

/*
html.surfboards nav.links li.hover-sub-menu {
   position:relative;

   padding:0px;
}
*/

/*
html.surfboards nav.links li.hover-sub-menu > a {
   display:inline-block;
   height:80px;

   line-height:80px;
   margin-top:0px;
}
*/

/*
html.surfboards nav.links li.non-mobile.hover-sub-menu {
   display:block;
}
html.surfboards nav.links li.mobile.hover-sub-menu {
   display:none;
}
*/

/** VERY NEW **/
html nav.links li.hover-sub-menu.non-mobile {
   line-height:60px;
   padding-top:10px;
}
html nav.links li.hover-sub-menu.mobile {
   display:none;
}
@media only screen and (max-width: 400px) {
   html nav.links li.hover-sub-menu.mobile {
      display:block;
   }
   html nav.links li.hover-sub-menu.non-mobile {
      display:none;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html nav.links li.hover-sub-menu.mobile {
      display:block;
   }
   html nav.links li.hover-sub-menu.non-mobile {
      display:none;
   }
}
/** END VERY NEW **/

/** START **/
/*html.surfboards nav.links li.hover-sub-menu nav.submenu {*/
html nav.links li.hover-sub-menu nav.submenu {
   position:absolute;
   top:60px;
   top:76px;
   left:100px;
   padding:20px;
   background:white;
   background:#eee;

   border-top:1px solid #f9f9f9;
   border-left:1px solid #f9f9f9;
   border-right:1px solid #f9f9f9;
   border-bottom:1px solid #f9f9f9;
   display:none;
}

@media only screen and (max-width: 400px) {
   /*html.surfboards nav.links li.hover-sub-menu nav.submenu {*/
   html nav.links li.hover-sub-menu nav.submenu {
      top:40px;
      left:inherit;
      right:0px;
      padding:2px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   /*html.surfboards nav.links li.hover-sub-menu nav.submenu {*/
   html nav.links li.hover-sub-menu nav.submenu {
      top:40px;
      left:inherit;
      right:0px;
      padding:2px;
   }
}





/*
html.surfboards body > header nav.submenu.hide {
   display:none !important;
}
*/

/*
html.surfboards nav.links li.hover-sub-menu:hover nav.submenu {
   display:block;
}
*/

/*html.surfboards nav.links li.hover-sub-menu.non-mobile:hover nav.submenu {*/
html nav.links li.hover-sub-menu.non-mobile:hover nav.submenu {

   display:block;
}

/*html.surfboards body > header nav.submenu.show {*/
html body > header nav.submenu.show {
   display:block !important;
}

/** END **/

/** I BROKE THIS
html.surfboards nav.links li.mobile.hover-sub-menu {
   display:none;
}
html.surfboards nav.links li.non-mobile.hover-sub-menu {
   display:inline-block;
}

html.surfboards nav.links li.non-mobile.hover-sub-menu nav.submenu {
   position:absolute;
   top:60px;
   top:40px;
   left:100px;
   padding:20px;
   background:white;
   background:#eee;

   border-top:1px solid #f9f9f9;
   border-left:1px solid #f9f9f9;
   border-right:1px solid #f9f9f9;
   border-bottom:1px solid #f9f9f9;

   display:none;
}

html.surfboards nav.links li.mobile.hover-sub-menu nav.submenu {
   top:60px;
   background:red;

   top:40px;
   left:inherit;
   right:0px;
   padding:2px;
   display:none;
}


@media only screen and (max-width: 400px) {
   html.surfboards nav.links li.non-mobile.hover-sub-menu {
      display:none;
   }

   html.surfboards nav.links li.mobile.hover-sub-menu {
      display:inline-block;
   }


   html.surfboards nav.links li.hover-sub-menu nav.submenu {
      display:none;
   }
   html.surfboards nav.links li.mobile.hover-sub-menu nav.submenu {
      display:block;
   }

}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.surfboards nav.links li.non-mobile.hover-sub-menu {
      display:none;
   }

   html.surfboards nav.links li.mobile.hover-sub-menu {
      display:inline-block;
   }


   html.surfboards nav.links li.hover-sub-menu nav.submenu {
      display:none;
   }
   html.surfboards nav.links li.mobile.hover-sub-menu nav.submenu {
      display:block;

   }

}



html.surfboards nav.links li.non-mobile.hover-sub-menu:hover nav.submenu {
   display:block !important;
}

html.surfboards body > header nav.submenu.show {
   display:block !important;
}
**/


/* Mobile Styles */
/*
@media only screen and (max-width: 400px) {
   html.surfboards nav.links li.hover-sub-menu:hover nav.submenu {
      display:none !important;
   }
   html.surfboards body > header nav.submenu {
      display:none !important;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.surfboards nav.links li.hover-sub-menu:hover nav.submenu {
      display:none !important;
   }
   html.surfboards body > header nav.submenu {
      display:none !important;
   }
}
*/


html body > header nav.submenu ul,
html.surfboards body > header nav.submenu ul {
   position:relative;
   list-style:none;
   margin:0;
   padding:0;

   top:0px;
   transform:none;
}

html body > header nav.submenu ul li,
html.surfboards body > header nav.submenu ul li {
   display:block;
   padding:0;
   margin:0;

   /* new */
   /*line-height:2em;*/
   line-height:2em;
   padding-top:4px;
   padding-bottom:0px;
}

html.surfboards body > header nav.submenu ul li a,
html body > header nav.submenu ul li a {
   font-family: 'Bebas Neue', cursive;
   font-size:30px;
   color:#333;
   text-decoration:none;
   margin-left:0px;
   cursor:pointer;

   white-space: nowrap;
}

html body > header nav.submenu ul li a:hover,
html.surfboards body > header nav.submenu ul li a:hover {
   color:#0080FF;
}



/*

body > header nav.links ul {
   position:relative;
   list-style:none;
   margin:0;
   padding:0;


   top:50%;
   transform:translateY(-50%);
}

body > header nav.links ul li {
   display:inline-block;
}

body > header nav.links ul li a {
   font-family: 'Bebas Neue', cursive;
   font-size:36px;
   color:#333;
   text-decoration:none;
   margin-left:20px;
}

body > header nav.links ul li.selected a {
   color:#0080FF;
}
*/

html.surfboards div.hero {
   position:relative;
   height:100vh;


  background: url(https://www.mensjournal.com/wp-content/uploads/2021/06/Boards.jpg?quality=86&strip=all) no-repeat center center;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

@media only screen and (max-width: 400px) {
   html.surfboards div.hero {
      height:50vh;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.surfboards div.hero {
      height:50vh;
   }
}

html.surfboards h1 {
   position:absolute;
   right:10px;
   top:10px;
   margin-bottom:0px;
   font-family: 'Bebas Neue', cursive;
   color:white;
   color:orange;
   color:#ff0000;
   color:white;
   font-size:130px;
   text-shadow: 2px 2px #000055;
}
@media only screen and (max-width: 400px) {
   html.surfboards h1 {
      font-size:40px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.surfboards h1 {
      font-size:40px;
   }
}


html.surfboards div.content section {
   position:relative;
   margin-top:30px;
}

html.surfboards div.content section h2 {
   width:100%;
   text-align:center;
   text-align:left;
   font-family: 'Bebas Neue', cursive;
   color:#0080FF;
   color:#333;
   font-size:30px;
   background-color:#f9f9f9;
   background-color:white;
   padding:20px 0px;
   border-top:1px solid #ccc;

   padding-left:20px;
}

html.surfboards div.content section:first-child h2 {
   border-top:none;
}

html.surfboards div.content section div.hero {
   position:relative;
   margin-left:auto;
   margin-right:auto;
}

html.surfboards div.hero.new-models {

/*
   height:100vh;
   */

   width:70vw;
   width:1000px;
   height:400px;




   background:no-repeat center center url(../images/new-models.png);

   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;

/*
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   */

   margin-bottom:20px;

}

html.surfboards div.hero.shortboards {

/*
   height:100vh;
   */

   width:70vw;
   width:1000px;
   height:400px;




   background:no-repeat center center url(../images/shortboards.png);

   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;

/*
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   */

   margin-bottom:20px;

}

html.surfboards div.hero.fish {

/*
   height:100vh;
   */

   width:70vw;
   width:1000px;
   height:400px;




   background:no-repeat center center url(../images/fish.png);

   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;

/*
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   */

   margin-bottom:20px;

}

html.surfboards div.hero.alternatives {

/*
   height:100vh;
   */

   width:70vw;
   width:1000px;
   height:400px;




   background:no-repeat center center url(../images/alternatives.png);

   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;

/*
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   */

   margin-bottom:20px;

}



html.surfboards div.hero.hybrids-and-eggs {

   width:1000px;
   height:400px;


   background:no-repeat center center url(../images/hybrids-and-eggs.png);

   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;


   margin-bottom:20px;

}

html.surfboards div.hero.guns {

   width:1000px;
   height:400px;


   background:no-repeat center center url(../images/guns.png);

   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;


   margin-bottom:20px;

}

html.surfboards div.hero.longboards {

   width:1000px;
   height:400px;


   background:no-repeat center center url(../images/longboards.png);

   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;


   margin-bottom:20px;

}



/* GALLERY */

html.gallery body {
   background:#111;
}

html.gallery div.hero {


width:100vw;

 padding:20px;

   /*

   */

   margin-top:10px;

}

html.gallery div.hero img {

   width:100%;

   border:10px solid #FFE8B9;
   border:10px solid #FFF6E3;
}

html.gallery div.hero.two-images {
   position:relative;
   display:flex;
   justify-content: center;
}

@media only screen and (max-width: 400px) {
   html.gallery div.hero.two-images {
      display:block;
      width:100%;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.gallery div.hero.two-images {
      display:block;
      width:100%;
   }
}

html.gallery div.hero.two-images img {

   position:relative;

   margin-right:20px;
   max-width:49%;

   border:10px solid #FFE8B9;
   border:10px solid #FFF6E3;

   object-fit: cover;
}

html.gallery div.hero.two-images img:last-child {
   margin-right:0px;
}

@media only screen and (max-width: 400px) {
   html.gallery div.hero.two-images img {
      display:block;
      width:100%;
      max-width:100%;
      margin-bottom:50px;
   }
   html.gallery div.hero.two-images img:last-child {
      margin-bottom:0px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.gallery div.hero.two-images img {
      display:block;
      width:100%;
      max-width:100%;
      margin-bottom:50px;
   }
   html.gallery div.hero.two-images img:last-child {
      margin-bottom:0px;
   }
}



/* ORDER */

html.order div.hero {

   position:relative;

   height:100vh;
   background:no-repeat center center url(https://www.sauritchsurfboards.com/masterfiles/master-1-2-1/images/swamstoday@2x.jpg);

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

}

html.order h1 {
   position:absolute;
   right:10px;
   top:10px;
   margin-bottom:0px;
   font-family: 'Bebas Neue', cursive;
   color:white;
   color:orange;
   color:#ff0000;
   color:white;
   font-size:60px;
   text-shadow: 2px 2px #000055;
}

@media only screen and (max-width: 400px) {
   html.order div.hero {
      height:50vh;
   }
   html.order h1 {
      font-size:40px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.order div.hero {
      height:50vh;
   }
   html.order h1 {
      font-size:40px;
   }
}

html.order div.text-body {
   position:relative;
   margin-left:auto;
   margin-right:auto;
   max-width:900px;
   padding-top:30px;
}
html.order p {
   font-family: 'Cormorant Garamond', serif;
   font-size:30px;
   margin-bottom:30px;
}

@media only screen and (max-width: 400px) {
   html.order div.text-body {
      padding:30px;
   }
   html.order p {
      font-size:20px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.order div.text-body {
      padding:30px;
   }
   html.order p {
      font-size:20px;
   }
}

html.order p em {
   font-weight:500;
   font-size:40px;
   color:#0080FF;
}
@media only screen and (max-width: 400px) {
   html.order p em {
      font-size:24px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.order p em {
      font-size:24px;
   }
}


html.order p a {
   color:#0080FF;
}

html.order p.paypal-holder {
   text-align:center;
}


/* PAYPAL */


html.paypal div.hero {

   position:relative;

   height:50vh;
   background:no-repeat center center url(https://www.sauritchsurfboards.com/masterfiles/master-1-2/images/swamisnav-1.jpg);

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

}

html.paypal h1 {
   position:absolute;
   right:10px;
   top:10px;
   margin-bottom:0px;
   font-family: 'Bebas Neue', cursive;
   color:white;
   color:orange;
   color:#ff0000;
   color:white;
   font-size:60px;
   text-shadow: 2px 2px #000055;
}

html.paypal div.text-body {
   position:relative;
   margin-left:auto;
   margin-right:auto;
   max-width:900px;
   padding-top:30px;
}
html.paypal p {
   font-family: 'Cormorant Garamond', serif;
   font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
   font-weight:300;
   font-size:30px;
   margin-bottom:30px;
}
html.paypal p em {
   font-weight:500;
   font-size:40px;
   color:#0080FF;
}


html.paypal p a {
   color:#0080FF;
}

html.paypal p.paypal-holder {
   text-align:center;
}


/* CONTACT */

html.contact div.hero {

   position:relative;

   height:50vh;
   background:no-repeat center center url(https://www.sauritchsurfboards.com/masterfiles/master-1-2/images/swamisnav-1.jpg);

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

}

html.contact h1 {
   position:absolute;
   right:10px;
   top:10px;
   margin-bottom:0px;
   font-family: 'Bebas Neue', cursive;
   color:white;
   color:orange;
   color:#ff0000;
   color:white;
   font-size:60px;
   text-shadow: 2px 2px #000055;
}
@media only screen and (max-width: 400px) {
   html.contact div.hero {
      height:50vh;
   }
   html.contact h1 {
      font-size:40px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.contact div.hero {
      height:50vh;
   }
   html.contact h1 {
      font-size:40px;
   }
}

html.contact div.content {
   position:relative;
   margin-left:auto;
   margin-right:auto;
   max-width:900px;
   padding-top:30px;
}

html.contact p {
   font-family: 'Cormorant Garamond', serif;
   font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
   font-weight:300;
   font-size:30px;
   margin-bottom:10px;
}
@media only screen and (max-width: 400px) {
   html.contact div.text-body {
      padding:30px;
   }
   html.contact p {
      font-size:20px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.contact div.text-body {
      padding:30px;
   }
   html.contact p {
      font-size:20px;
   }
}

html.contact p.business-contact-info {
   line-height:.8em;
}

html.contact p em {
   font-weight:500;
   font-size:40px;
   color:#0080FF;
}

html.contact p a {
   color:#0080FF;
}
@media only screen and (max-width: 400px) {
   html.contact p em {
      font-size:24px;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.contact p em {
      font-size:24px;
   }
}






html.contact div.content div.address {
   display:inline-block;
   margin:0px;

   width:49%;
}

html.contact div.content div.contact-form {
   display:inline-block;
   margin:0px;

   width:49%;
   height:400px;
}

html.contact div.content div.mobile-contact-info,
html.contact div.content div.mobile-form {
   padding:20px;
   display:none;
}
html.contact div.content div.mobile-contact-info {
   border-bottom:1px solid #ddd;
}
@media only screen and (max-width: 400px) {
   html.contact div.content div.mobile-contact-info,
   html.contact div.content div.mobile-form {
      display:block;
   }
   html.contact div.content table {
      display:none;
   }
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
   html.contact div.content div.mobile-contact-info,
   html.contact div.content div.mobile-form {
      display:block;
   }
   html.contact div.content table {
      display:none;
   }
}