* {
  margin: 0;
}
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body {
  /* you need to set this to assign to the main element a min height of 100% */
  height: 100%;
}
canvas {
	display: block;
}
body {
  font-family: Helvetica, sans-serif;
  color: #404040;
  background: url(/assets/images/desktop-2.jpg) no-repeat center center fixed;
  background-size: cover;
}
a {
  cursor: pointer;
}
.logo {
  position: fixed;
  top: 10px;
  left: 25px;
  color: #ddd;
}
.logo > div {
  position: relative;
  display: inline-block;
}
.logo div:first-child {
  font-size: 24px;
}
.logo div:last-child{
  font-sixe: 18px;
  color: #bcbcbc;
}
#slideout {
  position: fixed;
  top: 0;
  right: 15px;
  width: 200px;
  height: 25px;
  background-color: rgba(122,122,122,0.4);
  border-radius: 0 0 10px 10px;
}
#slideout .label {
  color: #bcbcbc;
  display: block;
  margin-top: 5px;
}

#slideout_info {
  position: fixed;
  top: -100px;
  right: 225px;
  width: 275px;
  height: 125px;
  background-color: rgba(122,122,122,0.4);
  border-radius: 0 0 10px 10px;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
#slideout_info .label {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 95%;
  color: #bcbcbc;
  cursor: pointer;
  transform: translateX(-50%);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
/*
#slideout_info:hover {
  top: 0;
}
*/
#info {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 18px;
  color: #bcbcbc;
  width: 95%;
  padding: 10px 0;
  transform: translateX(-50%);
  z-index: -1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.rotate {
  /*Don't need here*/
}
code {
  color: #bbb;
  background: rgba(0, 0, 0, 0.07);
  padding: 0em 0.2em;
}

#github {
  position: absolute;
  bottom: .5em;
  right: 50px;
  margin: auto;
  width: 20em;
  text-align: center;
  font-size: 14px;
  color: #777;
}

#github a {
  text-decoration: none;
  color: #555;
  display: inline-block;
}

@keyframes fadeOut {
  from {
    opacity: 1
  }
  to {
    opacity: 0.4
  }
}

/*-------------------------------
 *  Contact Form
 */
 .wrapper {
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
 .wrapper .holdmystuff {
   background: #ffffff;
   max-width: 60%;
   padding: 40px;
   border-radius: 6px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -ms-border-radius: 6px;
   -o-border-radius: 6px;
   -webkit-box-shadow: 0px 0px 80px 0px rgba(30, 30, 30, 0.2);
   -moz-box-shadow: 0px 0px 80px 0px rgba(30, 30, 30, 0.2);
   box-shadow: 0px 0px 80px 0px rgba(30, 30, 30, 0.2);
   font-size: .9em;
 }
 .wrapper .holdmystuff .holder_svg {
   padding-bottom: 25px;
   border-bottom: 1px solid #efefef;
   margin-bottom: 25px;
 }
 .wrapper .holdmystuff .holder_svg svg {
   max-width: 40%;
 }
 .wrapper .holdmystuff p {
   padding-bottom: 20px;
   margin: 0 auto;
 }
 .wrapper .holdmystuff ul {
   padding: 0px;
   margin: 0 auto;
   list-style-type: none;
 }
 .wrapper .holdmystuff ul li {
   display: inline-block;
   margin: 0 auto;
   background: #e9e9e9;
   color: #303030;
   padding: 10px;
   text-decoration: none;
   margin-bottom: 1px;
 }
 .wrapper .holdmystuff ul li a {
   display: table-cell;
 }
 .slim_modal {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -moz-align-items: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   -moz-justify-content: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.85);
   z-index: 2;
   display: none;
   font-size: 1em;
   -webkit-transition: background 0.5s ease 0.06s;
   -moz-transition: background 0.5s ease 0.06s;
   -ms-transition: background 0.5s ease 0.06s;
   -o-transition: background 0.5s ease 0.06s;
   transition: background 0.5s ease 0.06s;
 }
 .slim_modal.none {
   background: rgba(0, 0, 0, 0.45);
 }
 .slim_modal.red {
   background: rgba(228, 30, 58, 0.8);
 }
 .slim_modal.tan {
   background: rgba(202, 180, 75, 0.8);
 }
 .slim_modal.green {
   background: rgba(111, 171, 85, 0.8);
 }
 .slim_modal .sm_content {
   display: flex;
   background: transparent;
   text-align: center;
   max-width: 800px;
 }
 @media only screen and (min-width: 320px) {
   .slim_modal .sm_content {

   }
 }
 @media only screen and (min-width: 415px) {
   .slim_modal .sm_content {
     display: block;
     width: 80%;
     max-height: 90%;
     height: auto;
   }

 }
 @media only screen and (min-width: 769px) {
   .slim_modal .sm_content {
     padding: 15px;
     width: 80%;
     max-height: 90%;
     height: auto;
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
   }
 }
 @media only screen and (min-width: 1025px) {
   .slim_modal .sm_content {
     padding: 15px;
     width: 80%;
     max-height: 90%;
     height: auto;
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
   }
 }
 @media only screen and (min-width: 1401px) {
   .slim_modal .sm_content {
     padding: 15px;
     width: 80%;
     max-height: 90%;
     height: auto;
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
   }
 }
 .slim_modal .sm_content .sm_content_inner_wrap {
   position: relative;
   margin: 0 auto;
   height: 100%;
   width: 100%;
   background: #edeff0;
   -webkit-box-shadow: 0px 0px 1px 0 rgba(30, 30, 30, 0.5);
   -moz-box-shadow: 0px 0px 1px 0 rgba(30, 30, 30, 0.5);
   box-shadow: 0px 0px 1px 0 rgba(30, 30, 30, 0.5);
   z-index: 2;
 }
 @media only screen and (min-width: 320px) {

 }
 @media only screen and (min-width: 414px) {

 }
 @media only screen and (min-width: 769px) {
   .slim_modal .sm_content .sm_content_inner_wrap {
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
   }
 }
 @media only screen and (min-width: 1025px) {
   .slim_modal .sm_content .sm_content_inner_wrap {
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
   }
 }
 @media only screen and (min-width: 1401px) {
   .slim_modal .sm_content .sm_content_inner_wrap {
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
   }
 }
 .slim_modal .sm_content .sm_content_inner_wrap .sm_close_button {
   padding: 10px;
   width: 80%;
   display: block;
   color: #fff;
   background: #009ddc;
   margin: 0 auto;
   cursor: pointer;
 }
 .slim_modal .sm_content .sm_content_inner_wrap .sm_area_top, .slim_modal .sm_content .sm_content_inner_wrap .sm_area_bottom, .slim_modal .sm_content .sm_content_inner_wrap .sm_area_all {
   padding: 4em;
 }
 .slim_modal .sm_content .sm_content_inner_wrap .sm_area_top h3 span, .slim_modal .sm_content .sm_content_inner_wrap .sm_area_bottom h3 span, .slim_modal .sm_content .sm_content_inner_wrap .sm_area_all h3 span {
   display: block;
   font-size: .7em;
 }
 .slim_modal .sm_content .sm_content_inner_wrap .sm_area_top {
   background: rgba(30, 30, 30, 0.02);
 }
 .slim_modal .sm_content .sm_content_inner_wrap .sm_area_bottom {
   background: #edeff0;
 }
 .slim_modal .sm_content .sm_icon_menu {
   opacity: 1;
   box-sizing: border-box;
   position: absolute;
   top: 40px;
   background: whitesmoke;
   -webkit-transition: all 0.3s ease 0s;
   -moz-transition: all 0.3s ease 0s;
   -ms-transition: all 0.3s ease 0s;
   -o-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
 }
 .slim_modal .sm_content .sm_icon_menu ul {
   list-style-type: none;
   padding: 0;
   margin: 0 auto;
 }
 .slim_modal .sm_content .sm_icon_menu ul li {
   font-size: 1.1em;
   height: 3em;
   line-height: 3em;
   background: #e6e6e6;
   padding: 0px 8px 0px 8px;
   margin-bottom: 1px;
   color: rgba(30, 30, 30, 0.4);
   -webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
   -ms-transition: all 0.5s ease 0s;
   -o-transition: all 0.5s ease 0s;
   transition: all 0.5s ease 0s;
 }
 .slim_modal .sm_content .sm_icon_menu ul li.sm_close {
   background: #ffffff;
 }
 .slim_modal .sm_content .sm_icon_menu ul li:nth-child(2) {
   margin-top: 10px;
 }
 .slim_modal .sm_content .sm_icon_menu ul li:hover {
   background: #ffffff;
   color: rgba(30, 30, 30, 0.7);
 }
 .slim_modal .sm_content .sm_icon_menu ul li::last-child {
   border: none;
 }
 .slim_modal .sm_content .sm_icon_menu.is_right {
   right: 0px;
   border-radius: 0px 4px 4px 0px;
   -webkit-border-radius: 0px 4px 4px 0px;
   -moz-border-radius: 0px 4px 4px 0px;
   -ms-border-radius: 0px 4px 4px 0px;
   -o-border-radius: 0px 4px 4px 0px;
 }
 @media only screen and (min-width: 320px) {
   .slim_modal .sm_content .sm_icon_menu.is_right {
     top: 70px;
     right: 0px;
     z-index: 9;
     -webkit-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     -moz-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     padding: 1px;
     border: none;
   }
 }
 @media only screen and (min-width: 414px) {
   .slim_modal .sm_content .sm_icon_menu.is_right {
     top: 70px;
     right: 0px;
     z-index: 9;
     -webkit-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     -moz-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     padding: 1px;
     border: none;
   }
 }
 @media only screen and (min-width: 769px) {
   .slim_modal .sm_content .sm_icon_menu.is_right {
     top: 15px;
     right: 15px;
     z-index: 1;
     -webkit-box-shadow: 15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     -moz-box-shadow: 15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     box-shadow: 15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     border: 1px solid rgba(30, 30, 30, 0.1);
     border-left: none;
   }
 }
 @media only screen and (min-width: 1025px) {
   .slim_modal .sm_content .sm_icon_menu.is_right {
     top: 15px;
     right: 15px;
     z-index: 1;
     -webkit-box-shadow: 15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     -moz-box-shadow: 15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     box-shadow: 15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     border: 1px solid rgba(30, 30, 30, 0.1);
     border-left: none;
   }
 }
 @media only screen and (min-width: 1401px) {
   .slim_modal .sm_content .sm_icon_menu.is_right {
     top: 15px;
     right: 15px;
     z-index: 1;
     -webkit-box-shadow: 15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     -moz-box-shadow: 15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     box-shadow: 15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     border: 1px solid rgba(30, 30, 30, 0.1);
     border-left: none;
   }
 }
 .slim_modal .sm_content .sm_icon_menu.is_left {
   border-radius: 4px 0px 0px 4px;
   -webkit-border-radius: 4px 0px 0px 4px;
   -moz-border-radius: 4px 0px 0px 4px;
   -ms-border-radius: 4px 0px 0px 4px;
   -o-border-radius: 4px 0px 0px 4px;
 }
 @media only screen and (min-width: 320px) {
   .slim_modal .sm_content .sm_icon_menu.is_left {
     top: 70px;
     left: 0px;
     z-index: 9;
     -webkit-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     -moz-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     padding: 1px;
     border: none;
   }
 }
 @media only screen and (min-width: 414px) {
   .slim_modal .sm_content .sm_icon_menu.is_left {
     top: 70px;
     left: 0px;
     z-index: 9;
     -webkit-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     -moz-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0);
     padding: 1px;
     border: none;
   }
 }
 @media only screen and (min-width: 769px) {
   .slim_modal .sm_content .sm_icon_menu.is_left {
     top: 15px;
     left: 15px;
     z-index: 1;
     -webkit-box-shadow: -15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     -moz-box-shadow: -15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     box-shadow: -15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     border: 1px solid rgba(30, 30, 30, 0.1);
     border-right: none;
   }
 }
 @media only screen and (min-width: 1025px) {
   .slim_modal .sm_content .sm_icon_menu.is_left {
     top: 15px;
     left: 15px;
     z-index: 1;
     -webkit-box-shadow: -15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     -moz-box-shadow: -15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     box-shadow: -15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     border: 1px solid rgba(30, 30, 30, 0.1);
     border-right: none;
   }
 }
 @media only screen and (min-width: 1401px) {
   .slim_modal .sm_content .sm_icon_menu.is_left {
     top: 15px;
     left: 15px;
     z-index: 1;
     -webkit-box-shadow: -15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     -moz-box-shadow: -15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     box-shadow: -15px 0px 30px 0px rgba(30, 30, 30, 0.2);
     border: 1px solid rgba(30, 30, 30, 0.1);
     border-right: none;
   }
 }
 .slim_modal .sm_content .sm_header {
   box-sizing: border-box;
   right: 0;
   left: 0;
   top: 0;
   bottom: 0;
   color: rgba(30, 30, 30, 0.7);
   text-transform: uppercase;
   margin: 0 auto;
   display: inline-block;
   height: 40px;
   line-height: 40px;
   opacity: 0;
   -webkit-transition: all 0.3s ease 0s;
   -moz-transition: all 0.3s ease 0s;
   -ms-transition: all 0.3s ease 0s;
   -o-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
 }
 @media only screen and (min-width: 320px) {
   .slim_modal .sm_content .sm_header {
     position: relative;
     width: 100%;
     background: #acc3d2;
     border-radius: 0px;
     -webkit-border-radius: 0px;
     -moz-border-radius: 0px;
     -ms-border-radius: 0px;
     -o-border-radius: 0px;
     padding-top: 0;
   }
 }
 @media only screen and (min-width: 414px) {
   .slim_modal .sm_content .sm_header {
     position: relative;
     width: 100%;
     background: #acc3d2;
     border-radius: 0px;
     -webkit-border-radius: 0px;
     -moz-border-radius: 0px;
     -ms-border-radius: 0px;
     -o-border-radius: 0px;
     padding-top: 0;
   }
 }
 @media only screen and (min-width: 769px) {
   .slim_modal .sm_content .sm_header {
     position: absolute;
     width: 90%;
     background: #acc3d2;
     border-radius: 4px 4px 0px 0px;
     -webkit-border-radius: 4px 4px 0px 0px;
     -moz-border-radius: 4px 4px 0px 0px;
     -ms-border-radius: 4px 4px 0px 0px;
     -o-border-radius: 4px 4px 0px 0px;
     padding-top: 7.5px;
     text-align: center;
   }
 }
 @media only screen and (min-width: 1025px) {
   .slim_modal .sm_content .sm_header {
     position: absolute;
     width: 90%;
     background: #acc3d2;
     border-radius: 4px 4px 0px 0px;
     -webkit-border-radius: 4px 4px 0px 0px;
     -moz-border-radius: 4px 4px 0px 0px;
     -ms-border-radius: 4px 4px 0px 0px;
     -o-border-radius: 4px 4px 0px 0px;
     padding-top: 7.5px;
     text-align: center;
   }
 }
 @media only screen and (min-width: 1401px) {
   .slim_modal .sm_content .sm_header {
     position: absolute;
     width: 90%;
     background: #acc3d2;
     border-radius: 4px 4px 0px 0px;
     -webkit-border-radius: 4px 4px 0px 0px;
     -moz-border-radius: 4px 4px 0px 0px;
     -ms-border-radius: 4px 4px 0px 0px;
     -o-border-radius: 4px 4px 0px 0px;
     padding-top: 7.5px;
     text-align: center;
   }
 }
 .slim_modal .sm_content.pushup {
   -moz-transform: scale(0.98) translateY(20px);
   -o-transform: scale(0.98) translateY(20px);
   -ms-transform: scale(0.98) translateY(20px);
   -webkit-transform: scale(0.98) translateY(20px);
   transform: scale(0.98) translateY(20px);
   -webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
   -ms-transition: all 0.5s ease 0s;
   -o-transition: all 0.5s ease 0s;
   transition: all 0.5s ease 0s;
   -webkit-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0.4);
   -moz-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0.4);
   box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0.4);
   opacity: 0;
 }
 .slim_modal .sm_content.pushup.show {
   -webkit-box-shadow: 0px 20px 80px 0px rgba(30, 30, 30, 0.4);
   -moz-box-shadow: 0px 20px 80px 0px rgba(30, 30, 30, 0.4);
   box-shadow: 0px 20px 80px 0px rgba(30, 30, 30, 0.4);
   opacity: 1;
 }
 .slim_modal .sm_content.pushdown {
   -moz-transform: scale(0.98) translateY(-20px);
   -o-transform: scale(0.98) translateY(-20px);
   -ms-transform: scale(0.98) translateY(-20px);
   -webkit-transform: scale(0.98) translateY(-20px);
   transform: scale(0.98) translateY(-20px);
   -webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
   -ms-transition: all 0.5s ease 0s;
   -o-transition: all 0.5s ease 0s;
   transition: all 0.5s ease 0s;
   -webkit-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0.4);
   -moz-box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0.4);
   box-shadow: 0px 0px 0px 0px rgba(30, 30, 30, 0.4);
   opacity: 0;
 }
 .slim_modal .sm_content.pushdown.show {
   -webkit-box-shadow: 0px -20px 80px 0px rgba(30, 30, 30, 0.4);
   -moz-box-shadow: 0px -20px 80px 0px rgba(30, 30, 30, 0.4);
   box-shadow: 0px -20px 80px 0px rgba(30, 30, 30, 0.4);
   opacity: 1;
 }
 .slim_modal .sm_content.show {

   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1);
   -webkit-transition: all 0.3s ease 0s;
   -moz-transition: all 0.3s ease 0s;
   -ms-transition: all 0.3s ease 0s;
   -o-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
 }
 .slim_modal .sm_content.show .sm_icon_menu {
   -webkit-transition: all 0.5s ease 0.06s;
   -moz-transition: all 0.5s ease 0.06s;
   -ms-transition: all 0.5s ease 0.06s;
   -o-transition: all 0.5s ease 0.06s;
   transition: all 0.5s ease 0.06s;
 }
 @media only screen and (min-width: 320px) {

 }
 @media only screen and (min-width: 414px) {

 }
 @media only screen and (min-width: 769px) {
   .slim_modal .sm_content.show .sm_icon_menu.is_right {
     top: 15px;
     right: -25px;
   }
 }
 @media only screen and (min-width: 1025px) {
   .slim_modal .sm_content.show .sm_icon_menu.is_right {
     top: 15px;
     right: -25px;
   }
 }
 @media only screen and (min-width: 1401px) {
   .slim_modal .sm_content.show .sm_icon_menu.is_right {
     top: 15px;
     right: -25px;
   }
 }
 @media only screen and (min-width: 320px) {
   .slim_modal .sm_content.show .sm_icon_menu.is_left {
     top: 70px;
     left: 0px;
   }
 }
 @media only screen and (min-width: 414px) {
   .slim_modal .sm_content.show .sm_icon_menu.is_left {
     top: 70px;
     left: 0px;
   }
 }
 @media only screen and (min-width: 769px) {
   .slim_modal .sm_content.show .sm_icon_menu.is_left {
     top: 15px;
     left: -25px;
   }
 }
 @media only screen and (min-width: 1025px) {
   .slim_modal .sm_content.show .sm_icon_menu.is_left {
     top: 15px;
     left: -25px;
   }
 }
 @media only screen and (min-width: 1401px) {
   .slim_modal .sm_content.show .sm_icon_menu.is_left {
     top: 15px;
     left: -25px;
   }
 }
 .slim_modal .sm_content.show .sm_header {
   -webkit-transition: top 0.5s ease 0.1s;
   -moz-transition: top 0.5s ease 0.1s;
   -ms-transition: top 0.5s ease 0.1s;
   -o-transition: top 0.5s ease 0.1s;
   transition: top 0.5s ease 0.1s;
   opacity: 1;
 }
 @media only screen and (min-width: 320px) {
   .slim_modal .sm_content.show .sm_header {
     top: 0px;
     z-index: 9;
   }
 }
 @media only screen and (min-width: 414px) {
   .slim_modal .sm_content.show .sm_header {
     top: 0px;
     z-index: 9;
   }
 }
 @media only screen and (min-width: 769px) {
   .slim_modal .sm_content.show .sm_header {
     top: -40px;
     z-index: 1;
   }
 }
 @media only screen and (min-width: 1025px) {
   .slim_modal .sm_content.show .sm_header {
     top: -40px;
     z-index: 1;
   }
 }
 @media only screen and (min-width: 1401px) {
   .slim_modal .sm_content.show .sm_header {
     top: -40px;
     z-index: 1;
   }
 }
 .slim_modal .sm_content.show .sm_header.detached {
   -webkit-transition: opacity 0.5s ease 0.1s;
   -moz-transition: opacity 0.5s ease 0.1s;
   -ms-transition: opacity 0.5s ease 0.1s;
   -o-transition: opacity 0.5s ease 0.1s;
   transition: opacity 0.5s ease 0.1s;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   background: #edeff0;
   color: #121212;
 }
 @media only screen and (min-width: 320px) {
   .slim_modal .sm_content.show .sm_header.detached {
     top: 0px;
     z-index: 9;
   }
 }
 @media only screen and (min-width: 414px) {
   .slim_modal .sm_content.show .sm_header.detached {
     top: 0px;
     z-index: 9;
   }
 }
 @media only screen and (min-width: 769px) {
   .slim_modal .sm_content.show .sm_header.detached {
     top: -60px;
     padding-top: 0;
     z-index: 1;
   }
 }
 @media only screen and (min-width: 1025px) {
   .slim_modal .sm_content.show .sm_header.detached {
     top: -60px;
     padding-top: 0;
     z-index: 1;
   }
 }
 @media only screen and (min-width: 1401px) {
   .slim_modal .sm_content.show .sm_header.detached {
     top: -60px;
     padding-top: 0;
     z-index: 1;
   }
 }

 .sm_content.red {
   background: #EF798A;
 }
 .sm_content.red .sm_header {
   background: #EF798A;
   color: #ffffff;
 }
 .sm_content.tan {
   background: #E1D59A;
 }
 .sm_content.tan .sm_header {
   background: #E1D59A;
   color: #ffffff;
 }
 .sm_content.green {
   background: #a9cd99;
 }
 .sm_content.green .sm_header {
   background: #a9cd99;
   color: #ffffff;
 }
 /* ----------------------------------
  * Contact form
  */
  .row {
  	margin-bottom: 0;
  }


  /* label color */
     .input-field label {
       color: #9c9c9c;
     }
     /* label focus color */
     .input-field input[type=text]:focus + label {
       color: #9c9c9c;
     }
     /* label underline focus color */
     .input-field input[type=text]:focus {
       border-bottom: 1px solid #9c9c9c;
       box-shadow: 0 1px 0 0 #9c9c9c;
     }
     /* valid color */
     .input-field input[type=text].valid {
       border-bottom: 1px solid #9c9c9c;
       box-shadow: 0 1px 0 0 #9c9c9c;
     }
     /* invalid color */
     .input-field input[type=text].invalid {
       border-bottom: 1px solid #9c9c9c;
       box-shadow: 0 1px 0 0 #9c9c9c;
     }
     /* icon prefix focus color */
     .input-field .prefix.active {
       color: #9c9c9c;
     }
     input:not([type]):focus:not([readonly]),
     input[type=text]:focus:not([readonly]),
     input[type=password]:focus:not([readonly]),
     input[type=email]:focus:not([readonly]),
     input[type=url]:focus:not([readonly]),
     input[type=time]:focus:not([readonly]),
     input[type=date]:focus:not([readonly]),
     input[type=datetime]:focus:not([readonly]),
     input[type=datetime-local]:focus:not([readonly]),
     input[type=tel]:focus:not([readonly]),
     input[type=number]:focus:not([readonly]),
     input[type=search]:focus:not([readonly]),
     textarea.materialize-textarea:focus:not([readonly]) {
      border-bottom: 1px solid #009ddc;
      box-shadow: 0 1px 0 0 #009ddc;
      }
      input:not([type]):focus:not([readonly])+label,
      input[type=text]:focus:not([readonly])+label,
      input[type=password]:focus:not([readonly])+label,
      input[type=email]:focus:not([readonly])+label,
      input[type=url]:focus:not([readonly])+label,
      input[type=time]:focus:not([readonly])+label,
      input[type=date]:focus:not([readonly])+label,
      input[type=datetime]:focus:not([readonly])+label,
      input[type=datetime-local]:focus:not([readonly])+label,
      input[type=tel]:focus:not([readonly])+label,
      input[type=number]:focus:not([readonly])+label,
      input[type=search]:focus:not([readonly])+label,
      textarea.materialize-textarea:focus:not([readonly])+label {
          color: #009ddc;
      }
      .col.error input:not([type]):focus:not([readonly]),
      .col.error input[type=text]:focus:not([readonly]),
      .col.error input[type=password]:focus:not([readonly]),
      .col.error input[type=email]:focus:not([readonly]),
      .col.error input[type=url]:focus:not([readonly]),
      .col.error input[type=time]:focus:not([readonly]),
      .col.error input[type=date]:focus:not([readonly]),
      .col.error input[type=datetime]:focus:not([readonly]),
      .col.error input[type=datetime-local]:focus:not([readonly]),
      .col.error input[type=tel]:focus:not([readonly]),
      .col.error input[type=number]:focus:not([readonly]),
      .col.error input[type=search]:focus:not([readonly]),
      .col.error textarea.materialize-textarea:focus:not([readonly]) {
       border-bottom: none;
       box-shadow: none;
       }
       .col.error input:not([type]):focus:not([readonly])+label,
       .col.error input[type=text]:focus:not([readonly])+label,
       .col.error input[type=password]:focus:not([readonly])+label,
       .col.error input[type=email]:focus:not([readonly])+label,
       .col.error input[type=url]:focus:not([readonly])+label,
       .col.error input[type=time]:focus:not([readonly])+label,
       .col.error input[type=date]:focus:not([readonly])+label,
       .col.error input[type=datetime]:focus:not([readonly])+label,
       .col.error input[type=datetime-local]:focus:not([readonly])+label,
       .col.error input[type=tel]:focus:not([readonly])+label,
       .col.error input[type=number]:focus:not([readonly])+label,
       .col.error input[type=search]:focus:not([readonly])+label,
       .col.error textarea.materialize-textarea:focus:not([readonly])+label {
           color: #ff2830;
       }

  .form-container .btn {
      background-color: #009ddc;

  }

  #error_message {
    display: none;
    margin: 0 auto;
    width: 80%;
    height: 20px;
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    margin: auto;
    color: #ff2830;
  }

  .row .col.error  {
    padding: 2px 20px 2px 2px;
    background-color: #f2dede;
    border-radius: 2px;
    border: 1px solid #f6bdbd;
  }

  .slim_modal .sm_content .sm_content_inner_wrap .sm_close_button.success {
    background: #1dbf00;
  }
  .slim_modal .sm_content .sm_content_inner_wrap .sm_close_button.failure {
    background: #b51c1c;
  }

  /* --------------------------------
   * From materialize
   */

   .row::after {
     content: "";
     display: table;
     clear: both;
   }

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

   .row .col.s12 {
   	width: 100%;
   	margin-left: auto;
     margin-bottom: 20px;
   	left: auto;
   	right: auto;
   }

   .row .col {
   	float: left;
   	box-sizing: border-box;
   	padding: 0 .75rem;
   	min-height: 1px;
   }

   .input-field {
   	position: relative;
   	margin-top: 1rem;
   }

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

   input:not([type]),
   input[type="text"],
   input[type="password"],
   input[type="email"],
   input[type="url"],
   input[type="time"],
   input[type="date"],
   input[type="datetime"],
   input[type="datetime-local"],
   input[type="tel"],
   input[type="number"],
   input[type="search"],
   textarea.materialize-textarea {
   	background-color: transparent;
   	border: none;
   	border-bottom: 1px solid #9e9e9e;
   	border-radius: 0;
   	outline: none;
   	height: 3rem;
   	width: 100%;
   	font-size: 1rem;
   	padding: 0;
   	box-shadow: none;
   	box-sizing: content-box;
   	transition: all 0.3s;
   }

   input:not([type]).validate + label,
   input[type="text"].validate + label,
   input[type="password"].validate + label,
   input[type="email"].validate + label,
   input[type="url"].validate + label,
   input[type="time"].validate + label,
   input[type="date"].validate + label,
   input[type="datetime"].validate + label,
   input[type="datetime-local"].validate + label,
   input[type="tel"].validate + label,
   input[type="number"].validate + label,
   input[type="search"].validate + label,
   textarea.materialize-textarea.validate + label {
   	width: 100%;
   	pointer-events: none;
   }

   .input-field label {
   	color: #9c9c9c;
   }

   .input-field.col label {
   	left: .75rem;
   }

   .input-field label {
   	color: #9e9e9e;
   	position: absolute;
   	top: 0.4rem;
   	left: 0;
   	font-size: 1rem;
   	cursor: text;
   	transition: .2s ease-out;
   	text-align: initial;
   }

   input:not([type]):focus:not([readonly]) + label,
   input[type="text"]:focus:not([readonly]) + label,
   input[type="password"]:focus:not([readonly]) + label,
   input[type="email"]:focus:not([readonly]) + label,
   input[type="url"]:focus:not([readonly]) + label,
   input[type="time"]:focus:not([readonly]) + label,
   input[type="date"]:focus:not([readonly]) + label,
   input[type="datetime"]:focus:not([readonly]) + label,
   input[type="datetime-local"]:focus:not([readonly]) + label,
   input[type="tel"]:focus:not([readonly]) + label,
   input[type="number"]:focus:not([readonly]) + label,
   input[type="search"]:focus:not([readonly]) + label,
   textarea.materialize-textarea:focus:not([readonly]) + label {
   	color: #009ddc;
   }

   .input-field label:not(.label-icon).active {
     font-size: .8rem;
     transform: translateY(-140%);
   }
@media only screen and (max-device-width: 480px) {
    #slideout {
     position: fixed;
     top: 40px;
     right: 0;
     width: 25px;
     height: 125px;
     background-color: rgba(122,122,122,0.4);
     border-radius: 10px 0 0 10px;
    }
    #slideout .label {
     color: #bcbcbc;
     display: block;
     position: fixed;
     top: 87px;
     right: -19px;
    }
    .slim_modal .sm_content {
      display: block;
    }
    .slim_modal .sm_content.pushdown.show {
      padding: 0px;
      width: 80%;
      max-height: 80%;
      height: auto;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      -ms-border-radius: 0px;
      -o-border-radius: 0px;
    }

    .slim_modal .sm_content.show .sm_icon_menu.is_right {
      top: -40px;
      right: 0px;
    }
    .slim_modal .sm_content .sm_content_inner_wrap {
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      -ms-border-radius: 0px;
      -o-border-radius: 0px;
    }
    .slim_modal .sm_content .sm_content_inner_wrap .sm_area_top, .slim_modal .sm_content .sm_content_inner_wrap .sm_area_bottom, .slim_modal .sm_content .sm_content_inner_wrap .sm_area_all {
      padding: 0;
    }
    .slim_modal .sm_content .sm_icon_menu ul li {
      height: 2em;
      line-height: 2em;
    }
    /**
     * Do we really need info tab on mobile
     *   -pressing key buttons is difficult
     */
    #slideout_info {
      display: none;
    }
    /*
    #slideout_info {
     position: fixed;
     top: 175px;
     right: -275px;
     width: 300px;
     height: 125px;
     border-radius: 10px 0 0 10px;
    }
    #slideout_info .label {
     position: absolute;
     top: 12px;
     bottom: 0;
     left: 0;
     right: 182px;
     transform: none;
    }

    #info {
     position: absolute;
     top: 0;
     left: 50%;
     font-size: 18px;
     color: #bcbcbc;
     width: 95%;
     padding: 10px 0;
     transform: translateX(-50%);
     z-index: -1;
     -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
     -o-transition-duration: 0.5s;
     transition-duration: 0.5s;
    }
    */
    .rotate {
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     transform: rotate(-90deg);

     /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
     -webkit-transform-origin: 50% 50%;
     -moz-transform-origin: 50% 50%;
     -ms-transform-origin: 50% 50%;
     -o-transform-origin: 50% 50%;
     transform-origin: 50% 50%;

     /* Should be unset in IE9+ I think. */
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

}