@import "/avoidthevoid/assets/styles/ionicons.css";
@import "/avoidthevoid/assets/styles/animate.css";
@import "http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css";
@import "http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css";

/* Begin Contact Styles */
body {
  width: 100%;
  padding: 0;
  margin: 0;
}
section .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
section .container:after {
  content: "";
  display: table;
  clear: both;
}
div#navigation {margin-top: 0;}
#logo {border: solid 1px #004833;}
.col {margin: 1% 0 1% 1%;}
.hero {width: 100%;}
.hero img{
  display: block;
  width: 100%;
  height: auto;
}

/* Email Section */
#email-form {
  background: #f3f3f3;
  padding: 2em 0;
}
#email-form h1 {
  color: #004833;
  text-align: center;
  font-size: 3.25em;
  margin: 1% 0 1.5%;
  padding: 0;
}
#email-form fieldset {
  background: #e6e6e6;
  padding: 2% 0% 2% 2%;
  width: 75%;
  margin: 0 auto;
}
form div {
  height: auto;
  margin: 0;
  padding: 0px;
  width: auto;
  float: left;
  display: block;
}
form label {
  margin: 1% 0 0;
  padding: 0;
  width: 95%;
  float: left;
  font-size: 1.20em;
}
label.email {margin-top: 6.2%;}
form input, form select {
  width: 95%;
  float: left;
  margin: 0 0 2%;
  border-radius: 3px;
  background-color: #F2F2F2;
  border: 1px solid #7F7F7F;
}
form input {height: 25px;}
form select {height: 27px;}
.subscribe {width: 160px;}
.blogSubscribe {
  margin: 0;
  width: 20px;
}
form textarea {
  border-radius: 3px;
  background-color: #F2F2F2;
  border: 1px solid #7F7F7F;
  width: 95%;
}


/** privacy **/
#read-policy, #opt-in {
  margin-right: 10px;
}

/** contact form **/
#email-form ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1.15em;
}

#email-form ul li {margin: 3% 0;}

#email-form p.error { 
    text-align: center;
    text-align: center;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    color: #fff;
    background-color: #800038;
    font-size: 22px;
}

#email-form p.info { 
    text-align: center;
    text-align: center;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    color: #000;
    background-color: #CCFFCC;
    font-size: 22px;
}

#email-form .privacy ul {
  list-style-type: none;
  margin: {.25em 1em .25em;};
  padding-left: 20px;
  font-size: 1.15em;
}

/** tech paper form **/
#paper-request ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1.15em;
}

#paper-request .privacy ul {
  list-style-type: disc;
  margin: {.25em 1em .25em;};
  padding-left: 20px;
  font-size: 1.15em;
}

#paper-request ul li {margin: 3% 0;}

div#documents form.whitepaper-form div.content fieldset div.privacy-container ul.regionResponse{ width:100%; height:auto !important; }
div#documents form.whitepaper-form div.content fieldset div.privacy-container ul.regionResponse li.privacy{ width:100%; height:auto !important; }

div#documents form.whitepaper-form div.content fieldset div.privacy-container .privacy, div#documents form.whitepaper-form fieldset div.privacy-container .privacy{ width: auto; height: 250px !important; }

div#documents form.whitepaper-form div.content fieldset div.privacy-container, div#documents form.whitepaper-form fieldset div.privacy-container{ width: 100%; height: auto !important; }

div.privacy {
	padding: 2px; 
	border-style: solid;
	 border-width: 1px;
	 overflow-y: scroll;
	 overflow-x: hide;
}


input#email-addresses-sales, input#email-addresses-tech, input#email-addresses-general, input#email-addresses-owner {
  width: 20px;
  display: table-cell;
  vertical-align: middle;
  margin: 0 6px;
}

form div.send {
  text-align:center;
  width: 100%;
  margin-top: 2%;
}
form div.send input {
  margin-top: 50px !important;
  padding: 1% 10%;
  background: #f79a15;
  border: none;
  color: #fff;
  font-size: 1.3em;
  width: auto;
  float: none;
  height: auto;
  border-radius: 0;
  -webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,1.0));
  /*-webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;*/
}
form div.send input:hover {-webkit-filter: drop-shadow(0px 0px 8px rgba(247, 154, 21, 1.0));}
.g-recaptcha {
  width: 304px;
  margin: 0 auto;
  float: none;

}

#g-recaptcha-response {
  display: block !important;
  position: absolute;
  margin: 0 0 0 -10px !important;
  width: 302px !important;
  height: 76px !important;
  z-index: -999999;
  opacity: 0;
}
.regionResponse li {margin: 0 !important;}
.regionResponse input {
  width: 25px;
  float: left;
  margin: 0;
}
.regionResponse p {
  /*float: left;*/
  padding-top: 4.5px;
}
.regionFirst p {padding-top: 27px !important;}
#support {
  text-align: center;
  padding: 2em 0;
}
#support h3 {
  font-size: 1.25em;
  color: #5f5f5f;
  margin: 1.5% 0;
}
#support .heading {
  font-size: 1.25em;
  font-weight: bold;
  color: #5F5F5F;
}
#support p {font-size: 1.0em;}
div.regionImg {min-height: 157px;}
.regionImg h4 {
  font-size: 1.50em;
  color: #5f5f5f;
  margin-top: -5.25em;
}
.regionLoc {
  list-style-type: none;
  margin: -2em 0 0;
  padding: 0;
}
.regionLoc li {
  display: inline;
  margin: 0 5px;
}
.supportLinks {
  padding: 10px 0;
  font-size: 1.2em;
  color: #fff !important;
  background-color: #004933;
  text-decoration: none !important;
  display: block;
  text-align: center;
  width: 60%;
  margin: 2% auto;
  -webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,1.0));
  /*-webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;*/
}
.supportLinks:hover {
  -webkit-filter: drop-shadow(0px 0px 8px rgba(0, 73, 51, 1.0));
}

/* Footer */
.footerButtons {
  padding: 2% 0 4%;
  background: #e5f3f3;
  /*background: #f3f3f3;*/
}
.footerButtons h3 {
  font-size: 1.5em;
  margin: 1.5% 0;
  text-align: center;
}
.footerButtons a {
  font-size: 1.2em;
  text-align: center;
  padding: 15px 0;
  border: 1px solid #004833;
  color: #004833;
  text-decoration: none;
  display: block;
  width: 95%;
  margin: 0 auto;
}
.footerButtons a:hover {cursor: pointer;}
a.green {
  background: #fbfefc;
  background: -moz-linear-gradient(top, #fbfefc 0%, #ddf2e3 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfefc), color-stop(100%,#ddf2e3));
  background: -webkit-linear-gradient(top, #fbfefc 0%,#ddf2e3 100%);
  background: -o-linear-gradient(top, #fbfefc 0%,#ddf2e3 100%);
  background: -ms-linear-gradient(top, #fbfefc 0%,#ddf2e3 100%);
  background: linear-gradient(to bottom, #fbfefc 0%,#ddf2e3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfefc', endColorstr='#ddf2e3',GradientType=0 );
}
a.blue {
  background: #fafdfe;
  background: -moz-linear-gradient(top, #fafdfe 0%, #d8effa 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafdfe), color-stop(100%,#d8effa));
  background: -webkit-linear-gradient(top, #fafdfe 0%,#d8effa 100%);
  background: -o-linear-gradient(top, #fafdfe 0%,#d8effa 100%);
  background: -ms-linear-gradient(top, #fafdfe 0%,#d8effa 100%);
  background: linear-gradient(to bottom, #fafdfe 0%,#d8effa 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafdfe', endColorstr='#d8effa',GradientType=0 );
}
a.cream {
  background: #fffffd;
  background: -moz-linear-gradient(top, #fffffd 0%, #fdfbeb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffffd), color-stop(100%,#fdfbeb));
  background: -webkit-linear-gradient(top, #fffffd 0%,#fdfbeb 100%);
  background: -o-linear-gradient(top, #fffffd 0%,#fdfbeb 100%);
  background: -ms-linear-gradient(top, #fffffd 0%,#fdfbeb 100%);
  background: linear-gradient(to bottom, #fffffd 0%,#fdfbeb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffffd', endColorstr='#fdfbeb',GradientType=0 );
}

/*=== SOCIAL BAR === */
ul.socialmedia{
  position: fixed;
  top: 20%;
  right: 0;
  z-index: 999;
  border-radius: 4px;
  background-color: #004833;
  list-style-type: none;
  text-align: center !important;
  padding: 2px 6px;
}

ul.socialmedia li a {
  display: block;
  color: #fff;
  font-size: 2em;
  padding: 6px 0;
}

/* scroll arrows - http://www.robsawyer.me/blog/2013/09/17/scroll-indicator/ */
.main {
  width:100%;
  position:relative;
  background-color:#fff;
}

/* the wrapper element that will become the outer circle */
.arrow-wrap {
  position: absolute;
  z-index: 1;
  left: 47.5%;
  background: #004933;
  width: 50px;
  height: 50px;
  padding: 20px;
  border-radius: 50%;
  font-size: 8.25px;
  display: block;
  box-shadow: 0px 0px 5px 0px #333;
  text-align: center;
  margin-top: -4%;
}

.arrow-wrap i {
  color: #fff;
  font-size: 6em;
}

@-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
  }

  .arrow-wrap .arrow {
    -webkit-animation: arrows 2.8s 0.4s;
    -webkit-animation-delay: 3s;
  }

/* footer scroll to top link - https://codyhouse.co/gem/back-to-top/ */

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 80px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  /*background: rgba(232, 98, 86, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;*/
  background: rgba(0,73,51,0.68) url(../images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (max-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 10px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 80px;
  }
}


/* Mobile Styles */
@media only screen and (max-width: 950px) {
  section .container {
    width: 96%;
    padding: 0;
  }
  #navigation {display: none;}
  #email-form {padding-top: 4em;}
  label.email {margin-top: 8.5%;}
  div.footer {width: 100%;}
  div#footer{
    width:100%;
    margin:0;padding:0;
    border-top:0;}
  div#footer-content{
      width:100%;
      margin:0;padding:0;}
  div#footer-content #footer-tb-padding{
      width:100%;
      margin:0;padding:0;}
  div#footer-content ul{
      width:100%;
      display:block;
      width:100%;
      text-align:center;}
  div#footer-content ul li, div#footer-content ul li a{
      padding:0.7em 0;
      font-size:1.2em;}
  li.hide-for-small {display: none;}
}
@media only screen and (max-width: 768px) {
  .arrow-wrap {left: 44.5%;}
  #email-form {padding-top: 6em;}
  #email-form ul li {margin: 5% 0;}
  label.email {margin-top: 11.5%;}
  #phone .span3 {width: 48%;}
  .footerButtons .span2 {
    width: 33%;
    margin: 1% auto !important;
  }
  #footer ul.last li a {
    white-space: pre-wrap;
  }
}
@media only screen and (max-width: 568px) {
  label.email {margin-top: 1%;}
  .arrow-wrap {
    left: 42.5%;
  }
  .footerButtons {padding-bottom: 4em;}
  .footerButtons .span2 {
    width: 100%;
    margin: 2% auto !important;
  }
  div#header-content div#logo {
    background: url(/contact-us/assets/images/logo-sm.jpg) top left no-repeat;
    height: 119px;
    width: 115px;
  }
  div#header-content div#logo a {
    height: 119px;
    width: 115px;
  }
}
@media only screen and (max-width: 440px) {
  ul.socialmedia {display: none;}
  .arrow-wrap {
    width: 25px;
    height: 25px;
    font-size: 5px;
    left: 43.5%;
  }
  .arrow-wrap i {font-size: 5em;}
  #email-form {padding-top: 4em;}
  #email-form fieldset {width: 90%;}
  #phone .span3 {width: 100%;}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
  form div.send input:hover {background: #F46426;}
  .supportLinks:hover {background: #4D8375;}
  a.green:hover {background: #ddf2e3;}
  a.blue:hover {background: #d8effa;}
  a.cream:hover {background: #fdfbeb;}
}