/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   /* W3.CSS 4.04 Apr 2017 by Jan Egil and Borge Refsnes */

     *,*:before,*:after{
       box-sizing:inherit
     }

   /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */

 html {
     -ms-text-size-adjust:100%;
     -webkit-text-size-adjust:100%;
     overflow-x: hidden;
     box-sizing: border-box;
   }


  html,body{
     font-family:"Raleway",sans-serif;
     line-height:1.5;
   }

 body {
      margin:0;
      background-color: 	rgb(245,245,245);
      width: 100%;
      padding-bottom: -5em;

     }

 a {
     background-color: transparent;
     -webkit-text-decoration-skip: objects;
     text-decoration: none;
     color: inherit;
   }

  a:active,a:hover {
     outline-width:0;
   }

  abbr[title] {
     border-bottom: none;
     text-decoration: underline;
     text-decoration: underline dotted
 }

 dfn {
     font-style: italic;
     }

 mark {
     background: #ff0;
     color: #000;
   }

 small {
     font-size: 80%;
     }

 sub,sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
   }

 sub {
     bottom: -0.25em;
   }

sup {
    top: -0.5em;
  }

figure {
    margin: 1em 40px;
  }


svg:not(:root) {
    overflow: hidden;
  }

  code,kbd,pre,samp {
    font-family: monospace,monospace;
    font-size: 1em;
  }

  hr {
     box-sizing: content-box;
     height: 0;
     overflow: visible;
   }

   button,input,select,textarea {
     font:inherit;
     margin:0;
   }

  optgroup {
     font-weight: bold;
   }

  button,input {
     overflow: visible;
   }

  button,select {
     text-transform: none;
   }
  button,html [type=button],[type=reset],[type=submit]{
     -webkit-appearance: button;
   }
  button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{
     border-style: none;
     padding: 0;
   }

  button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{
     outline: 1px dotted ButtonText;
   }

   [type=checkbox],[type=radio] {
     padding:0;
   }
   [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
     height:auto;
   }

   [type=search] {
     -webkit-appearance:textfield;
     outline-offset:-2px;
   }
   [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{
     -webkit-appearance:none
   }
   ::-webkit-input-placeholder {
     color: inherit;
     opacity: 0.54;
   }

   fieldset{
     border:1px solid #c0c0c0;margin:0 2px;
     padding:.35em .625em .75em;
   }

   legend {
     color:inherit;
     display:table;
     max-width:100%;
     padding:0;
     white-space:normal;
   }

   textarea {
     overflow:auto;
   }

   #home {

   }

   #projects {
    margin-top: 15px;
    padding: 0 .2vw 0 .2vw;
   }

   #plans {
    margin-top: 55px;
   }

   #about {
    margin-top: 100px;
    padding-bottom: 10vh;

   }


   #contact{
    margin-top: 35px;
   }

   .porttitle {
     font-size: 3em;
     padding-top: 8vh;
     color: rgba(105,105,105)
   }

   .bintitle {
     font-size: 3.2em;
     padding-top: 65px;
     color: rgb(151,93,8);
   }

   .bintitle2 {
     font-size: 2.8em;
     padding-top: 65px;
     color: rgb(151,93,8);
   }

   h1 {
     font-size: 48px
   }

   h2 {
     font-size: 30px
   }

   h3 {
     font-size: 24px;

    }

   h4 {
     font-size: 20px
   }

   h5 {
     font-size: 18px
   }

   h6 {
     font-size: 16px;
     line-height: 50%;
   }

.bold{
    font-weight: 600;
}

 .foot{
   }

.serif{
  font-family:serif}

 h1,h2,h3,h4,h5,h6{
     font-family: 'Raleway', sans-serif;
     font-weight: 400;
   }

.small-image{
    height: 200px;
    overflow: hidden;
   }

.small-image img{
   width: 100%;
    transition: all 0.5s;
   }

.bar {
     height: 4.5em;
     overflow: hidden
   }

.wide {
      letter-spacing: 3px
    }

 .button:hover{
   color:rgba(255,255,255,0.9)!important;
   background-color:rgba(0,0,0,0.9)!important;
   border:2px solid rgba(255,255,255,0.9)!important;
 }

.bar .bar-item{
    float: left;
    outline: none;
    display: block;
  }

.btn,.button{
    display: inline-block;
    outline: 0;
    padding: 1.8vh 1vw;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color:inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 3px;
  }

.button {
  transition: all 0.2s;
}


.bar .dropdown-hover,.bar .dropdown-click {
    position:static;float:left}

.bar .button {
  white-space:normal
}


/*???*/

   .white,.hover-white:hover {
     color:#000!important;
     background-color:#fff!important;
   }

   .whiteopacity{
     color: #000!important;
     opacity: .5!important;
   }

   .nav-offwhite{
     background-color:rgba(245,245,245,0.9);
   }
   .nav-offwhite2{
     background-color:rgba(245,245,245,1);
   }

   .navbar-logo{
     position: absolute;
     padding: 10px 10px;

   }

   .padding-fb{
     padding-top: 14px!important;

   }


   .right {
     float: right!important;
   }

  .card,.card-2{
      box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
    }

  .top,.bottom {
      position: fixed;
      width: 100%;
      z-index: 2;
      opacity: .95;
    }

  .top {
      top:0;
    }

  .bottom {
      bottom:0;
    }

    /* ==========================================================================
    Portfolio
       ========================================================================== */


.gal-container{
       	padding: 1rem;
       }

.gal-item{
       	padding: .5rem;
       }

.gal-item .box{
       	height: 350px;
       	overflow: hidden;
       }

.box img{
       	height: 350px;
       	width: 100%;
       	object-fit: cover;
       	-o-object-fit: cover;
        transition: all 0.5s;
       }

.box3 img{
        	height: 550px;
        	width: 100%;
        	object-fit: cover;
        	-o-object-fit: cover;
          transition: all 0.5s;
              }

     .gal-item .box2{
              	height: 10vh;
              	overflow: hidden;
              }

     .box2 img{
              	height: 500px;
                          }


@media (max-width: 1000px) {
    .box2 {
      padding-left: 10%;
      padding-right: 10%;
    }
  }


.box:hover img{
     opacity: 0.3;
     filter: alpha(opacity=30); /* For IE8 and earlier */
     -moz-transform: scale(1.1);
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
     transition: all 0.5s;
       }

.gal-item a:hover:after{
    	opacity: 1;
       }

.modal-open .gal-container .modal{
      background-color: rgba(0,0,0,0.4);
       }
.modal-open .gal-item .modal-body{
      padding: 0px;
       }
.modal-open .gal-item button.close{
     position: absolute;
     width: 25px;
     height: 25px;
     background-color: #000;
     opacity: 1;
     color: #fff;
     z-index: 999;
     right: -12px;
     top: -12px;
     border-radius: 50%;
     font-size: 15px;
     border: 2px solid #fff;
     line-height: 25px;
     -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.35);
    	box-shadow: 0 0 1px 1px rgba(0,0,0,0.35);
       }

  .modal-open .gal-item button.close:focus{
       	outline: none;
       }

  .modal-open .gal-item button.close span{
       	position: relative;
       	top: -3px;
       	font-weight: lighter;
       	text-shadow:none;
       }

 .gal-container .modal-dialogue{
       	width: 80%;
       }

  .gal-container .description{
       	position: relative;
       	height: 40px;
       	top: -40px;
       	padding: 10px 25px;
       	background-color: rgba(0,0,0,0.5);
       	color: #fff;
       	text-align: left;
       }

  .gal-container .description h4{
       	margin:0px;
       	font-size: 15px;
       	font-weight: 300;
       	line-height: 20px;
       }

  .gal-container .modal.fade .modal-dialog {
           -webkit-transform: scale(0.1);
           -moz-transform: scale(0.1);
           -ms-transform: scale(0.1);
           transform: scale(0.1);
           top: 100px;
           opacity: 0;
           -webkit-transition: all 0.3s;
           -moz-transition: all 0.3s;
           transition: all 0.3s;
       }

  .gal-container .modal.fade.in .modal-dialog {
           -webkit-transform: scale(1);
           -moz-transform: scale(1);
           -ms-transform: scale(1);
           transform: scale(1);
           -webkit-transform: translate3d(0, -100px, 0);
           transform: translate3d(0, -100px, 0);
           opacity: 1;
       }

  @media (min-width: 768px) {
       .gal-container .modal-dialog {
           width: 100%;
           max-width: 100%
           margin: 50 auto;
       }
       }

  @media (max-width: 768px) {
           .gal-container .modal-content{
               height:250px;
           }
       }


  /* ==========================================================================
  Shadows
    ========================================================================== */


.sidetxt{
  content: '';
  box-shadow: inset 0px 0px 256px 0px #000000;
  width: 25%;
  left: 70%;
  z-index: .7;
}

.display-container:hover .display-hover {
    display:block
}

.display-container:hover span.display-hover {
    display:inline-block
    }

.tooltip,.display-container {
    position:relative
}

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

  .overlay {
    position:fixed;
    display:none;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    z-index:2;}

  .display-topleft{position:absolute;left:0;top:0}

  .display-topright{position:absolute;right:5%;top:5%}

  .display-bottomleft{position:absolute;left:0;bottom:0}

  .display-bottomright{position:absolute;right:0;bottom:0}

  .display-middle{position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%)}

  .display-left{position:absolute;top:50%;
    left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}

  .display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}

  .display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}

  .display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}

  /* ==========================================================================
    Contact
     ========================================================================== */


     @media (max-width: 768px) {
       .contact-container {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
       }}

      div.elem-group {
       margin: 10px 0;
       padding-left: 3em;
     }

     label {
       display: block;
       font-family: 'Raleway';
       padding-bottom: 2px;
       font-size: 1.25em;
     }

     .contact1 {
       font-family: 'Bitter', serif;
       padding-bottom: 2px;
       color: rgba(105,105,105);
       padding-left: 1em;
     }

     @media (max-width: 1207px) {
       .contact1 {
    font-size: 2em;
      }
    }

    @media (max-width: 768px) {
      .contact1 {
   font-size: 1.5em;
     }
   }


     .contact2 {
       font-family: 'Bitter', serif;
       color: rgba(105, 105, 105);
       font-size: 2.5em;
       padding: 3em 3em 5px 5px;
       text-align: right;
     }

     @media (max-width: 1357px) {
       .contact2 {
    font-size: 2em;
      }
    }

    @media (max-width: 1107px) {
      .contact2 {
    font-size: 1.6em;
      }
    }

    @media (max-width: 868px) {
      .contact2 {
    text-align: center;
    font-size: 1.2em;
      }
    }

    .g-recaptcha {
      padding-left: 3em;

    }

     input, select, textarea {
       border-radius: 4px;
       border: 1px solid #ccc;
       box-sizing: border-box;
       font-size: 1.25em;
       font-family: 'Raleway';
       width: 300px;
     }

     textarea {
       height: 10vh;
       width: 300px;
     }

     @media (max-width: 768px)
     {
       .message1{
         width: 40px!important;
                }
     }


     button {
       height: 50px;
       background: gray;
       color: white;
       border: 2px solid white;
       font-size: 1.25em;
       font-family: 'Raleway';
       border-radius: 4px;
       cursor: pointer;
       margin-top: 12px;
       margin-bottom: 14px;
       margin-left: 2.2em;

     }

     button:hover {
       border: 2px solid black;
     }




  /* ==========================================================================
    Parallax
     ========================================================================== */

     .wrapper {
       /* The height needs to be set to a fixed value for the effect to work.
        * 100vh is the full height of the viewport. */
       height: 100vh;
       /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
       overflow-x: hidden;
       /* Enable scrolling on the page. */
       overflow-y: auto;
       /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
       perspective: 3px;
     }

     .section2 {
       /* Needed for children to be absolutely positioned relative to the parent. */
       position: relative;
       /* The height of the container. Must be set, but it doesn't really matter what the value is. */
       height: 70vh;
       width: 100vw;

       /* For text formatting. */
       display: flex;
       align-items: center;
       justify-content: center;

           }

     .section3 {
             /* Needed for children to be absolutely positioned relative to the parent. */

             /* The height of the container. Must be set, but it doesn't really matter what the value is. */
             height: 10vh;
             display: flex;
             position: relative;

                             }
       .section4 {
                                     /* Needed for children to be absolutely positioned relative to the parent. */

                                     /* The height of the container. Must be set, but it doesn't really matter what the value is. */
                                     height: 30vh;
                                     display: flex;
                                     position: relative;

                                     justify-content: center;


                                                     }


     .parallax::after {
       /* Display and position the pseudo-element */
       content: " ";
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;

       /* Move the pseudo-element back away from the camera,
        * then scale it back up to fill the viewport.
        * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
       transform: translateZ(-1px) scale(1.5);
       /* Force the background image to fill the whole element. */
       background-size: 100%;
       /* Keep the image from overlapping sibling elements. */
       z-index: -1;
     }

     /* The styling for the static div. */
     .static {
       background: rgba(245,245,245,1);
     }

     /* Sets the actual background images to adorable kitties. This part is crucial. */
     .bg1::after {
       background-image: url('https://www.fixturecontracting.com/img/whole%20foods%20bins/brentwood7.jpg');
       height: 80vh;
       border: .8em solid rgb(5,37,68);
     }

     @media (max-width: 768px)
      {
        .bg1, .bintitle, .circle, .bin
        {display: none;

        }
      }
      @media (max-width: 768px)
       {
         .desc,
         {padding-right: 20%!important;
          position: relative;
          top: -150px;


         }
       }




  /* ==========================================================================
    Text
     ========================================================================== */
.bitter{
  font-family: 'Bitter', serif!important;

}

.column {
  float: left;
}

.leftc {
  width: 25%;
}

.rightc {
  width: 75%;
}

.centerc {
  width: 100%;
}




   /* ==========================================================================
     Margins
  ========================================================================== */

  .margin{margin:16px!important}
  .margin-top{margin-top:26px!important}
  .margin-bottom{margin-bottom:26px!important}
  .margin-left{margin-left:16px!important}
  .margin-right{margin-right:16px!important}
  .lmargin-left{margin-left:5em}

 /* ==========================================================================*/
   .center .bar {
     display:inline-block;
     width:auto;
   }

   /* ==========================================================================
    Borders
      ========================================================================== */

   .border-0 { border:0!important}
   .border { border:2px solid #000000!important}
   .border1 { border:5px solid chocolate!important}
   .border-top { border-top:1px solid #ccc!important}
   .border-bottom { border-bottom:1px solid #ccc!important}
   .border-bottom-gray { border-bottom:4px solid #bbb!important}
   .border-top-gray { border-top:4px solid #bbb!important}
   .border-left { border-left:1px solid #ccc!important}
   .border-right { border-right:1px solid #ccc!important}
   .topbar { border-top:6px solid #ccc!important}
   .bottombar { border-bottom:6px solid #ccc!important}
   .leftbar { border-left:6px solid #ccc!important}
   .rightbar { border-right:6px solid #ccc!important}

   .border-white,.hover-border-white:hover{
     border-color:#fff!important}
   .border-black,.hover-border-black:hover{
     border-color:#000!important}
   .border-grey,.hover-border-grey:hover,.border-gray,.hover-border-gray:hover{
     border-color:#bbb!important}


   .bar-block .center .bar-item {
     text-align: center
   }

  .center {
    text-align: center!important;
  }

  .left{
    text-align: left!important;
  }

  /* ==========================================================================
    Slides
     ========================================================================== */

.fclogo{
  max-height: 70px;
  max-width: 1000px;
  opacity: .8;
  padding-right: .4em;
}

.fclogo2{
  max-height: 85px;
  max-width: 85px;
  opacity: .9;
  padding: .1em .1em .4em .1em;
}

@media (max-width:1000px){
  .fclogo{
    max-width: 350px!important;
  }
}

@media (max-width:601px){
  .fclogo{
    max-width: 220px!important;
  }
}

@media (max-width:381px){
  .fclogo{
    max-width: 200px!important;
  }
}

@media (max-width:341px){
  .fclogo{
    max-width: 130px!important;
  }
}


/* ==========================================================================
  Projects
   ========================================================================== */

#projects{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}


#projects, h3{
  font-family: 'Bitter', serif;
}

.small-image:hover img{
  opacity: 0.4;
  filter: alpha(opacity=40); /* For IE8 and earlier */
  transition: all 0.5s;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.caption {
  display: inline-block;
  visibility: hidden;
  opacity: .95;
}

.captiona {
  display: inline-block;
  visibility: hidden;
  opacity: .95;
}

.caption li {
  list-style-type: none;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow:
    -1px -1px 0 #ebebeb,
    1px -1px 0 #ebebeb,
    -1px 1px 0 #ebebeb,
    1px 1px 0 #ebebeb;
}

.captiona li {
  list-style-type: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

.captitle{
  padding-bottom: 150px;
  font-size: 30px;
  transition: all 0.2s;
  text-align: center;
}

.captitle2{
  padding-bottom: 180px;
  visibility: visible;
  font-size: 50px;
  transition: all 0.2s;
  text-align: center;
  font-weight: bolder;

}

@media (max-width: 691px) { .captitle{
  font-size: 12px;
  }
}

@media (max-width: 991px) { .captitle{
  font-size: 24px;
  }
}


@media (max-width: 991px) { .captitle2{
  font-size: 24px;
  }
}

.view{
  font-size: 18px;
  margin-top: 2em;
}

.small-image:hover .caption{
  visibility: visible;
}

.small-image:hover .captiona{
  visibility: visible;
}

.box:hover .caption li {
  visibility: visible;
}

.box:hover .captiona li {
  visibility: visible;

}

.box:hover .view {
  visibility: visible;
  color: rgba(0,0,0,0.95);
  text-shadow: none!important;
}

@media (max-width: 601px) { .view,.captitle{
  visibility: visible;
    }
      }


/* ==========================================================================
About Page
   ========================================================================== */

#about h5{
   line-height: 150%;
}

#about h3{
  font-size: 35px!important;
}

.xmargin{
  margin-left: 15px;
  margin-right: 15px;
}
.lmargin{
  margin-left: 5em;
  margin-right: 5em;
}

.about4 {
  margin-top: 50px;
  height: 300px;
}

.about3 {
  max-height: 250px;
}

.about2 {
  height: 300px;
}


/* ==========================================================================
Facebook
   ========================================================================== */




/* ==========================================================================
  404
========================================================================== */

#bad h5{
  padding-left:30px;


}






/* ==========================================================================
Footer
   ========================================================================== */

footer{
  height: 10em;
  width: 100%;
  bottom: 0;

}

footer li{
  list-style-type: none;
  text-align: center;
  padding: .5em;
}

h6{
  color: rgba(0, 0,0, 0.8);
}


.about1{
  float: left;
  max-width: 50%;
  padding: 4vh 0vw 0vh 1vw;
  line-height: 1.2em;
  opacity: 1!important;
}





.tagline{
  text-align: center;
  line-height: 20px;
  opacity: .75!important;
  align-items: center;
  padding-top: 1em;
}

.nowrap {white-space: nowrap;

}

.address{
  text-align: center;
  line-height: 20px;
  opacity: .75!important;
}

@media (max-width: 800px)
  {
    .address{
  text-align: center;
  font-size: 6px!important;
  line-height: 16px!important;
            }
        }

.icon-bar {
   background-color:#000000 !important;
}

/* ==========================================================================
  Animations
   ========================================================================== */


  /* ==========================================================================
     Text Sizes
     ========================================================================== */

  .tiny{font-size:10px!important;}
  .small{font-size:12px!important;}
  .medium{font-size:15px;}
  .large{font-size:18px!important;}
  .xlarge{font-size:24px!important;}
  .xxlarge{font-size:36px!important;}
  .xxxlarge{font-size:48px!important;}
  .jumbo{font-size:64px!important;}


  /* ==========================================================================
     Font Styles
     ========================================================================== */
.circle{
  border-radius: 40%;
  width: 22em;
  height: 14em;
  background-color: rgba(245,245,245,1);
  justify-content: center;
  position: relative;
  border: .8em solid rgb(5,37,68);
}


  /* ==========================================================================
     Padding
     ========================================================================== */

  .padding-small {
    padding:4px 8px!important;}

  .padding {
    padding:12px 14px 12px 18px!important;}



    #fixnavbar .div {
      padding: 15px 1px 15px 5px;
    }



  .padding-main {
    padding: 40px;
  }

  .padding-large{
    padding:20px 24px!important;}

  .padding-16{
    padding-top:16px!important;
    padding-bottom:16px!important;}

  .row-padding,.row-padding>.half,.row-padding>.third,.row-padding>.twothird,.row-padding>.threequarter,.row-padding>.quarter,.row-padding>.col{
      padding:0 8px;
    }

    .padding-top{
        padding-top: 5vh;
      }


    .padding-ltop{
      padding: 2% 12px 2% 2px;

        }

    .padding-sides{
      padding: 0% 5% 0% 5%;
    }



    .padding-tops{
        padding-top: 2vh;
        }


  .banner-padding{
    padding: 15px 10px 15px 35px;

  }

  .banner-padding-small{
    padding-top: 1em;
  }

  .col.m6,.half{
      width:49.99999%;}

  .col.l3{
      width:24.99999%;}

  .col,.half,.third,.twothird,.threequarter,.quarter{
      float:left;
      width:100%;}

    /* ==========================================================================
      Colors / Opacity
       ========================================================================== */


  .black,.hover-black:hover{
    color:#fff!important;
    background-color:#000!important;
  }

  .dark-gray{
      background-color: rgb(91,92,92);
    }

  .text-light-grey,.hover-text-light-grey:hover,.text-light-gray,.hover-text-light-gray:hover {
    color:#f1f1f1!important}

  .fc-opacity,.hover-opacity:hover{opacity:0.60}
  .fc-opacity-off,.hover-opacity-off:hover{opacity:1}
  .fc-opacity-max{opacity:0.25}
  .fc-opacity-min{opacity:0.75}
  .fc-opacity-xmin{opacity:0.90}
  .fc-opacity-fade{
    -moz-box-shadow: inset 0 0 10px rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0 0 10px rgba(255,255,255,0.2);
	box-shadow: inset 0 0 10px rgba(255,255,255,0.2);}



.container:after,.container:before,.panel:after,.panel:before,.row:after,.row:before,.row-padding:after,.row-padding:before,
.cell-row:before,.cell-row:after,.clear:after,.clear:before,.bar:before,.bar:after{content:"";display:table;clear:both}

.greyscale-max,.grayscale-max,.hover-greyscale:hover,.hover-grayscale:hover{filter:grayscale(100%)}
.greyscale,.grayscale{filter:grayscale(75%)}
.greyscale-min,.grayscale-min{filter:grayscale(50%)}
.sepia{filter:sepia(75%)}.sepia-max,.hover-sepia:hover{filter:sepia(100%)}.sepia-min{filter:sepia(50%)}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

   @media (min-width:601px){.col.m1{width:8.33333%}.col.m2{width:16.66666%}.col.m3,.quarter{width:24.99999%}.col.m4,.third{width:33.33333%}
   .col.m5{width:41.66666%}.col.m6,.half{width:49.99999%}.col.m7{width:58.33333%}.col.m8,.twothird{width:66.66666%}
   .col.m9,.threequarter{width:74.99999%}.col.m10{width:83.33333%}.col.m11{width:91.66666%}.col.m12{width:99.99999%}}

   @media (min-width:993px){.col.l1{width:8.33333%}.col.l2{width:16.66666%}.col.l3{width:24.99999%}.col.l4{width:33.33333%}
   .col.l5{width:41.66666%}.col.l6{width:49.99999%}.col.l7{width:58.33333%}.col.l8{width:66.66666%}
   .col.l9{width:74.99999%}.col.l10{width:83.33333%}.col.l11{width:91.66666%}.col.l12{width:99.99999%}}

   .content{max-width:980px;margin:auto}.rest{overflow:hidden}
   .cell-row{display:table;width:100%}.cell{display:table-cell}
   .cell-top{vertical-align:top}.cell-middle{vertical-align:middle}.cell-bottom{vertical-align:bottom}
   .hide{display:none!important}.show-block,.show{display:block!important}.show-inline-block{display:inline-block!important}

   @media (max-width:600px){
     .modal-content{margin:0 10px;width:auto!important}
     .modal{padding-top:30px}
     .dropdown-hover.mobile .dropdown-content,.dropdown-click.mobile .dropdown-content{position:relative}
     .hide-small{display:none!important}
     .mobile{display:block;width:100%!important}
     .bar-item.mobile,.dropdown-hover.mobile,.dropdown-click.mobile{text-align:center}
     .dropdown-hover.mobile,.dropdown-hover.mobile .btn,.dropdown-hover.mobile .button,.dropdown-click.mobile,.dropdown-click.mobile .btn,.dropdown-click.mobile .button{width:100%}}

   @media (max-width:800px){
     .modal-content{width:500px}
     .modal{padding-top:50px}
     .hide-smallish{display:none!important}

   }



   @media (min-width:993px){.modal-content{width:900px}.hide-large{display:none!important}.sidebar.collapse{display:block!important}}

   @media (max-width:992px) and (min-width:601px){.hide-medium{display:none!important}}

   @media (max-width:992px){.sidebar.collapse{display:none}.main{margin-left:0!important;margin-right:0!important}}



@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }


    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}