@charset "UTF-8";
/* The Surplus Project

thesurplusproject.org

Designed & Developed by A&M Media
© A&M Media
=======================================*/

/* Site Color Palette
=======================================
YELLOW: rgba(249,237,50,1) #f8ed31
ORANGE #1: rgba(251,176,64,1) #fbaf3f
ORANGE #2: rgba(247,148,30,1) #f7931d
ORANGE #3: rgba(241,90,41,1) #f05a28
ORANGE #4: rgba(239,65,54,1) #ef4036
BLUE #1: rgba(164,194,219,1) #a3c1da
BLUE #2: rgba(0,117,178,1) #0074b1
GRAY: rgba(46,59,66,1) #2e3a41

---

Light Green: #7fc242
Dark Green: #135c65

=======================================*/



/* Table of Contents
=======================================
1) GLOBAL
  a) FONT BUILD
  b) SCREENS
  c) GLOBAL CONTENT
  d) FULLPAGE SECTIONS & SLIDES
  e) SECTION TITLE
  f) NAV
  
2) SECTION 1 - INDEX
3) SECTION 2 – THE TOOL
4) SECTION 3 – SERVICES
5) SECTION 4 – ABOUT US
6) SECTION 5 - CONTACT



4) RESPONSIVE
 a) > 640px
 b) > 670px
 c) > 768px

=======================================*/



/*##############################################################################################################################################
##############################################################################################################################################*/

/* 1) GLOBAL */
  /* a) FONT BUILD */
  @font-face  { font-family: klinic-book; src: url('../fonts/KlinicSlabBook.otf'); }
  @font-face  { font-family: klinic-light; src: url('../fonts/KlinicSlabLight.otf'); }
  @font-face  { font-family: klinic-medium; src: url('../fonts/KlinicSlabMedium.otf'); }
  @font-face  { font-family: klinic-bold; src: url('../fonts/KlinicSlabBold.otf'); }
  
  /* b) SCREENS */
  .bkgd-screen-blue { position: relative; width: 100%; height: 100%; background: rgba(0,117,178,.7); background-size:cover; z-index: ; padding: 8% 0; }
  .bkgd-screen-white { position: relative; width: 100%; height: 100%; background: rgba(255,255,255, 0.7); background-size:cover; z-index: ; padding: 14% 0 0 0; }
  .bkgd-solid-blue { position: relative; width: 100%; height: 100%; background: rgba(40,37,97,1); background-size:cover; z-index: ; padding: 12% 0 0 0; }
  .bkgd-solid-blue-110 { position: relative; width: 100%; height: 100%; background: rgba(40,37,97,1); background-size:cover; z-index: ; padding: 110px 0 0 0; }
  .bkgd-solid-white { position: relative; width: 100%; height: 100%; background: rgba(255,255,255, 0.7); background-size:cover; z-index: ; padding: 14% 0 0 0; }
  .bkgd-solid-white-110 { position: relative; width: 100%; height: 100%; background: rgba(255,255,255, 0.7); background-size:cover; z-index: ; padding: 110px 0 0 0; }
  .bkgd-solid-white-110-scoll { position: relative; width: 100%; height:auto; background: rgba(255,255,255, 0.7); background-size:cover; z-index: ; padding: 110px 0; }
  
  /* c) GLOBAL CONTENT */
  .content { position: relative; display: block; margin: auto; width: 100%; height: auto; }
    .content img { display:block; margin:auto; padding: 0 0 10px 0; }
    .content h1 { text-align: center; font-family: "klinic-bold", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #2e3a41; letter-spacing: 1px; }
    .content h2 { text-align: center; font-family: "klinic-bold", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #2e3a41; letter-spacing: 1px; }
    .content h3 { text-align: center; font-family: "klinic-medium", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #2e3a41; letter-spacing: 1px; }
    .content h4 { text-align: center; font-family: "klinic-book", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #2e3a41; letter-spacing: 1px; }
    .content h5 { text-align: center; font-family: "klinic-book", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #fff; letter-spacing: 1px; }
    .content h6 { text-align: center; font-family: "klinic-bold", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #fff; letter-spacing: 1px; }
    .content p { margin: auto; text-align: center; font-family: "klinic-book", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 300; font-size: 1em; line-height: 1.4em; color: #2e3a41; max-width: 800px; }
    
  /* d) FULLPAGE SECTIONS & SLIDES */
  #section0, #section1, #section2, #section3, #section4 { width: 100%; height: 100%; }
  #section0 { /*background-image:rgba(255,255,255,1);*/ background-size:cover; }
  #section1 { /*background-color:rgba(164,194,219,.6);*/ background-size:cover; }
  #section2 { /*background-image:url("../art/service-bkgd.jpg");*/ background-size:cover; }
  #section3 { /*background-color:rgba(255,255,255,1);*/ background-size:cover; }
  #section4 { /*background-color:rgba(251,176,64,.7);*/ background-size:cover; }
  
  /*#slide0 { background-image:url(""); background-size:cover; }
  #slide1 { background-image:url("../art/index-bkgd2.jpg"); background-size:cover; }
  #slide2 { background-image:url("../art/index-bkgd3.jpg"); background-size:cover; }
  #slide3 { background-image:url("../art/index-bkgd4.jpg"); background-size:cover; }*/

  /* e) SECTION TITLE */
  .section-title { position:absolute; top:0; left:0; display: block; padding: 18px 26px 18px 26px; font-family: 'klinic-bold'; font-size: 6vh; color: #fff; background-color:#0b353a; letter-spacing: 3px; z-index: 301; }
    .section-title img { display:inline-block;padding-right:30px;height:40px; }
  .mobile-on { display: none; }
  
  /* e) NAV */
  nav { position:fixed; top:0; right:0; margin:0; padding:0; z-index: 301; }
  .nav-bars i { font-size: 2.2em; }
  .nav-bars a { display: block; text-decoration: none; color:#fff; padding:24px; background-color:#135c65; }

  .toggle { display: none }
  
  .nav-menu { display: none; padding:0 40px 5px 20px; background-color:#135c65; font-family: 'klinic-book', Georgia; font-size:1.5em; color:#FFFFFF; border-radius: 0 0 0 20px; }
  .nav-menu ul { list-style: none; }
  .nav-menu li { padding:0 0 20px 0; }
  .nav-menu a { color:#fff; text-decoration: none; transition: all .3s ease-in-out; }
  .nav-menu a:hover { color:#f8ed31; }
  .nav-menu i { font-size: .7em; color: #fff; }

/*##############################################################################################################################################
##############################################################################################################################################*/

  /* 2) SECTION 1 - INDEX */
  .logo { position: absolute; top:0; left: 0; padding: 12px 0 0 20px; z-index: 299; }
  .logo img { width: 30%; }
  
  .index-top-container { width: 100%; padding:30px 0 20px 0; margin: 102px 0 15px 0; background:rgba(255,255,255,1); z-index: 301; }
    .index-top-container img { display: block; width:auto; padding: 0 0 20px 0; width:90%; }
    .index-top-container p { max-width:90%;font-size:1.3em; }

  .index-bottom-container { width: 100%; padding:30px 0; margin: 15px 0 15px 0; background:rgba(241,90,41,0.7); }
  .learn-more { width: 100%; margin:auto; padding:0; text-align:center; }
    .learn-more a { display: inline-block; padding: 20px 20px 18px 20px; text-decoration: none; font-family: 'klinic-book'; font-size: 1.4em; color: #fff; background-color: #135c65; transition: all .3s ease-in-out; margin: auto; }
    .learn-more a:hover { background-color:#0b353a; }
    

/*##############################################################################################################################################
##############################################################################################################################################*/

  /* 3) SECTION 2 - THE TOOL */
  .tool-top-container { width: 100%; margin: 100px 0 0 0; padding: 20px 0 30px 0; }
    .tool-top-container img { display: block; width:30%; padding: 0; }
    .tool-top-container h1 { color:#135c65; max-width:90%; margin:auto; font-size: 5vh; }
  
  .tool-middle-container { width: 100%; margin: auto; text-align: center; margin-bottom: 4%; }
    .tool-middle-container ul { width:96%; display: inline-block; }
    .tool-middle-container li { width: 30%; padding: 0 15px; margin-right: -4px; display: inline-block; vertical-align: top; }
      .tool-middle-container li img { width: 30%; margin:auto;}
      .tool-middle-container li p { font-family: 'klinic-book'; font-size: 1.4em; line-height: 1.2em; color: #2E3A41; }
  
  .tool-bottom-container { position: absolute; bottom: 0; margin: auto; width: 100%; padding: 0; font-family: 'klinic-medium'; font-size: 4vh; color: #fff; text-align:center; }
    .tool-bottom-container h1 { display: block; width: 100%; background-color: #fbaf3f; padding: 10px 0; letter-spacing: 1px; }
    .tool-bottom-container a { display: block; width: 100%; padding: 10px 0; text-decoration: none; background-color: #f7931d; transition: all .3s ease-in-out; color: #fff; letter-spacing: 1px; }
    .tool-bottom-container a:hover { background-color: #f05a28; }

/*##############################################################################################################################################
##############################################################################################################################################*/

  /* 4) SECTION 3 - SERVICES */
  .services-container { display: block; padding:0 3%; margin:100px 0 30px 0; max-width:94%; }
    .services-container h1 { font-family: 'klinic-bold'; font-size: 5vh; color: #fff; padding: 0 0 10px 0; font-weight:400; }
    .services-container h2 { font-family: 'klinic-book'; font-size: 3vh; color: #fff; padding: 0 0 10px 0; max-width:85%; margin: auto; font-weight:400; padding-bottom: 30px; }
    .services-container h2 strong { font-family: 'klinic-bold'; }
    .services-container h3 { width: 100%; padding: 10px 0; background-color: rgba(255,255,255,.7); font-family: 'klinic-medium'; font-size: 2vh; color:#000; margin-bottom: 10px; font-weight:400; }
    .services-container p { font-family: 'klinic-book'; font-size: 2.5vh; color: #fff; padding: 0 0 2px 0; letter-spacing: 2px; line-height: 3vh; }
    .services-container p i { font-size:2vh; }

/*##############################################################################################################################################
##############################################################################################################################################*/

  /* 5) SECTION 4 - ABOUT US */
  .about-container { max-width: 85%; margin: auto; color: #000; }
    .about-container  img { width:30%; padding-bottom:20px; }
    .about-container h1 { font-family: 'klinic-bold'; font-size: 6vh; font-weight:400; padding: 0 0 10px 0; }
    .about-container h2 { font-family:'klinic-bold'; font-size: 3vh; font-weight:400; padding: 0 0 10px 0; }
    .about-container p { font-family: 'klinic-book'; font-size: 1.3em; padding: 0 0 20px 0; }
  .contact-us a { margin-bottom: 40px; display: block; padding: 20px; width: 96px; text-decoration: none; font-family: 'klinic-book'; font-size: 1em; color: #fff; background-color: #f7931d; transition: all .3s ease-in-out; margin: auto; }
  .contact-us a:hover { background-color:#f05a28; }

/*##############################################################################################################################################
##############################################################################################################################################*/

  /* 5) SECTION 4 - CONTACT US */
  .contact-container { max-width: 100%; margin: auto; padding: 0; margin:100px 0; }   
    .contact-container h1 { font-family: 'klinic-bold'; font-size: 6vh; color: #000; margin-bottom:20px; }
    .contact-container h2 { font-family: 'klinic-book'; font-size: 3.5vh; color:#000; margin-bottom: 30px; }
    input:focus, select:focus, textarea:focus, button:focus { outline: none; }
    .contact-container form { width: 60%; margin: auto; }
      .contact-container input, textarea { border: none; padding: 20px 20px 18px 18px; width: 100%; display: block; font-family: 'klinic-book'; font-size: 1.2em; line-height: 1.2em; color:#2E3A41; margin-bottom: 6px; }
      .contact-container button { border: 0; cursor: pointer; display: block; padding: 20px 20px 18px 18px; width: auto; text-decoration: none; font-family: 'klinic-book'; font-size: 1.2em; color: #fff; background-color: #135c65; transition: all .3s ease-in-out; margin: auto; }
      .contact-container button:hover { background-color:#0b353a; }

/*##############################################################################################################################################
##############################################################################################################################################*/


/* 4) RESPONSIVE */
  /* a) MAX WIDTH 640PX */ 
  @media only screen 
  and (max-width : 640px)
  and (orientation : portrait)  { 
  .logo img { width: 30%; }
  .controlArrow.prev { display: none; }
  .controlArrow.next { display:none; }
  .index-top-container { width: 80%; padding:30px 10% 15px 10%; margin-top:80px;}
    .index-top-container img { width:100%; }
    .index-top-container p { font-size:1em !important; }
  .section-title { font-size: 4vh; z-index: 299; max-width: 63%; }
    .section-title img { display:none; }
  .mobile-off { display:none; }
  .mobile-on { display:block; }
  .nav-bars a { padding:12px; }
  .learn-more a { font-size:1em; margin-bottom: 40px; }
  
  .content h1 { font-size: 1.5em; }
  .content h2 { font-size: 1.5em; }
  .content h3 { font-size: 1.5em; }
  .content h4 { font-size: 1.5em; }
  .content h5 { font-size: 1.5em; }
  .content h6 { font-size: 1.5em; }
  .content p { margin: auto; text-align: center; font-family: "klinic-book", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 300; font-size: 1em; line-height: 1.4em; color: #2e3a41; max-width: 800px; }
  
  .tool-top-container { padding-bottom: 6%; margin:100px 0 20px 0; }
  .tool-top-container h1 { font-size: 3em; }
  .tool-top-container img { width:96%; margin-top: 80px; }
  .tool-middle-container ul { width: 90%;  }
  .tool-middle-container li { display: block; width: 96%; padding: 0 2% 5% 2%; }
    .tool-middle-container li img { height:15%; }
    .tool-middle-container li p { font-size: 1em; line-height: 1.2em; }
    .tool-middle-container li p:last-child { margin-bottom:20px; }
  .tool-bottom-container { position:relative; display: block; }

  .bkgd-screen-blue { height: auto; padding: 0; }
  .services-container h1 { font-size: 2em;  }
  .services-container h2 { display:block; font-size: 1.5em; }
  .services-container h3 { width: 96%; padding: 10px 2%;  font-size: 1.5em;  margin-bottom: 10px; }
  .services-container p { font-size: 1.6em; padding: 0 0 16px 0; line-height: 1em; color: #fff; }
  .services-container p:last-child { padding-bottom: 50px; }
  .services-container p i { font-size:.9em; }
    
  .about-container { max-width: 88%; margin: 84px 6% 60px 6%; }
    .about-container  img { width:50%; padding-bottom:10px; }
    .about-container h1 { font-family: 'klinic-bold'; font-size: 3em; font-weight:400; padding: 0 0 10px 0;  }
    .about-container h2 { font-family:'klinic-bold'; font-size: 1.5em; font-weight:400; padding: 0 0 10px 0; }
    .about-container p { font-family: 'klinic-book'; font-size: 1.3em; padding: 0 0 20px 0; }
  .contact-us a { display: block; padding: 20px; width: 96px; text-decoration: none; font-family: 'klinic-book'; font-size: 1em; color: #fff; background-color: #f7931d; transition: all .3s ease-in-out; margin: auto; }
  .contact-us a:hover { background-color:#f05a28; }
  
  .contact-container { max-width: 88%; height:auto; margin: auto; padding: 0 0 40px 0; }
    .contact-container h1 { margin-top: 84px; font-size: 3em; }
    .contact-container h2 { font-size: 2em; margin-bottom: 20px; }
    input:focus, select:focus, textarea:focus, button:focus { outline: none; }
    .contact-container form { width: 100%; }
      .contact-container input, textarea { width: 88%; padding: 6%; margin-bottom: 10px; }
      .contact-container button { padding: 12px;  }

     }
  
  @media only screen 
  and (max-width : 670px)
  and (orientation : landscape) { }
  
  /* iPads (portrait)*/
  @media only screen 
  and (min-width : 768px) 
  and (orientation : portrait) { }
  
  /*Mobile Devices in Landscape*/
  @media only screen 
  and (orientation : landscape ){ }