/* Normalize.css */

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}

/* Base Styles */
.container {
  position: relative;
  width: 80%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }

@media (max-width: 768px) {
  .container { width: 90%; padding: 0; }
}

html { font-size: 62.5%; /* now rem is 10 base ie; 1.2rem = 12px*/ }
body { font-size: 15px; font-size: 1.5em; line-height: 1.6; font-weight: 400; font-family: "Roboto Condensed", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; -webkit-font-smoothing: antialiased; -mox-osx-font-smoothing: grayscale; font-smoothing: antialiased; }

.row { margin: 0 !important; float: left; width: 100%; }
img { width: 100%; height: 100%; }

header { position: relative; width: 100%; height: 100%; min-height: 150px; max-height: 200px; background-color: #fff; padding: 5rem 0; }
header .company-logo { padding: 0; margin: 0 auto;  }

nav { width: 100%; background: #f2f2f2; text-align: center; font-family: "Roboto", Helvetica, Arial, sans-serif; }
nav .i-nav-list { list-style: none; display: inline-block; width: 100%; margin: 0 auto; margin-bottom: -8px; }
nav .i-nav-list li { display: inline-block; margin: 0; padding: 0; position: relative;}
nav .i-nav-list li a { display: inline-block; width: 100%; height: 100%; padding: 1rem; color: #696969; text-transform: uppercase; font-size: 16px; font-size: 1.6rem; text-decoration: none !important; }
nav .i-nav-list li:hover,
nav .i-nav-list li.selected { background: #DA312C; }
nav .i-nav-list li:hover > a { color: #fff; }
nav .i-nav-list li.selected > a { color: #fff; }
nav .i-nav-list li .i-drop-down { display: none; position: absolute; left: 0; z-index: 9999; background: #ec969b; margin: 0; padding: 0; width: 100%; }
nav .i-nav-list li .i-drop-down li a { color: #fff; }
nav .i-nav-list li .i-drop-down li { width: 100%; }
nav .i-nav-list li .i-drop-down li { border-bottom: 1px solid #fff; }
nav .i-nav-list li .i-drop-down li:last-child { border-bottom: none !important; }
nav .i-nav-list li:hover > .i-drop-down { display: inline-block; }
.stickNav { display: inline-block !important; position: fixed; top: 0; z-index: 9999; border-bottom: 2px solid #da312c; }

nav#stickyNav { display: none; }

nav .i-nav-list.subnav li { padding-top: ; }
nav .i-nav-list.subnav li:hover,
nav .i-nav-list.subnav li.selected { background: none; }
nav .i-nav-list.subnav li a { font-weight: bold; font-size: 2.0rem; width: 100%; padding: 2rem 1rem;}
nav .i-nav-list.subnav li:hover > a,
nav .i-nav-list.subnav li.selected > a { background: inherit; font-weight: bold; color: #DA312C !important; text-decoration: none !important;}
nav .i-nav-list.subnav li a:focus { text-decoration: none !important; }
nav .i-nav-list.subnav li:first-child { padding-right: 3rem; }
nav .i-nav-list.subnav li:last-child { padding-left: 3rem;}
nav .i-nav-list.subnav li:first-child a { text-align: right; }
nav .i-nav-list.subnav li:last-child a { text-align: left; }

@media all and ( max-width: 768px ) {
    nav .i-nav-list.subnav li a { text-align: center !important; font-size: 1.6rem; }
    nav .i-nav-list.subnav li:first-child { padding-right: 0rem; }
    nav .i-nav-list.subnav li:first-child a { padding-bottom: 0; }
    nav .i-nav-list.subnav li:last-child { padding-left: 0rem; }
}

.page-intro { background: #DA312C; padding: 8rem 0; color: #fff; text-align: center; }
.page-intro .row:last-child { text-align: left !important; }
.page-intro .row:last-child h1 { text-transform: uppercase; }
.page-intro .row:last-child ul { list-style: none; margin-bottom: 0; }
.page-intro .row:last-child ul li { margin-bottom: 0; font-size: 21px; font-size: 2.1rem; }
.page-intro h1 { margin-bottom: 0; font-weight: bold; }

.tier { float: left; }
.tier-color-change { width: 100%; background-color: #f2f2f2; }

.tier.one { margin-bottom: 3rem; }
.tier.two { padding-bottom: 3rem; }

.tier .product-image { margin-bottom: 4%; margin-top: 4%; border: 5px solid #e1e1e1; padding: 0; }
.tier div { display: inline-block; vertical-align: middle; }
.tier div p { font-size: 21px; font-size: 2.1rem; font-weight: 100; line-height: 25px; }

.application p,
.application ul li { font-size: 20px; font-size: 2.0rem; margin-bottom: 1rem !important; }
.feature .feature-image { position: relative; margin-bottom: 4%; }
.feature .feature-image .overlay { position: absolute; width: 60%; top: -35px; padding: 0 15px 0 0; text-align: left; }
.feature .feature-image .overlay .subline { margin-bottom: 4px; margin-top: 4px; }
.multi-unit-installation { display: none; }
.application img { padding: 1rem; }

.main .row .product-image img { padding: 5px; margin: 20px auto; margin-top: 0; background: #e1e1e1; }

.contact p { margin-bottom: 1.2rem; }
.contact h5 { margin-bottom: -4px; }

.map { height: 450px; margin-bottom: 4%; margin-top: 2%; }

.pre-footer { display: inline-block; float: left; width: 100%; height: 150px; background: url('../images/hand-e-shutter-footer-banner.jpg') repeat-x bottom left; background-size: contain; margin-top: 5%; }
footer { display: inline-block; float: left; width: 100%; height: auto; background-color: #a91c1c; }
footer .company-logo { width: 45%; margin: 0 auto; padding: 5rem; }

.places { display: block; margin-bottom: 2% !important; }
.places:last-child { margin-bottom: 0 !important; }
.places i { margin-right: 5px; width: 20px; }
.places h3 {padding-top:20px; border-top:1px solid #ccc;}
.place { margin-bottom: 20px; }
.hide { display: none; }
.show { display: inline-block; }

.contact-button-link a { cursor: pointer; background: #DA312C; position: relative; height: 100px; margin-bottom: 5%; margin-top: 10%; display: inline-block; width: 100%; opacity: 1; }
.contact-button-link a:hover { opacity: 0.8;}
.contact-button-link h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: inline-block; color: white; }

#contact-form { width: 100%; }
#contact-form .row { margin: 0 !important; padding: 0 !important; }



/* Video Styles */
.tier.video .video-container { transform: translate(0%, 40%); }
.tier.video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); float: none; text-align: center; overflow: hidden; display: none; z-index: 9999; }
.tier.video video { background: white; border-radius: 4px; padding: 10px; box-shadow: 2px 2px 20px #323232; }
.close-video { cursor: pointer; border-radius: 9999px; color: black; background: white; width: 30px; height: 30px; line-height: 29px; font-size: 19px; position: absolute; right: 0; top: 0; margin-right: -20px; margin-top: -20px; box-shadow: 0px 0px 6px #323232; }


/* Company Colors */
.gray { color: #696969; border-color: #696969; }
.off-white { color: #f2f2f2; border-color: #f2f2f2; }
.white { color: white; border-color: white; background-color: white; }
.red { color: #DA312C; border-color: #DA312C; }
.dark-red { color: #a91c1c; border-color: #a91c1c; background-color: #a91c1c;}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }

h1 { font-size: 3.3rem; line-height: 1.2;  letter-spacing: -.1rem; }
h2 { font-size: 3.0rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 2.8rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (max-width: 768px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 2.4rem; }
  h3 { font-size: 2.1rem; }
  h4 { font-size: 1.8rem; }
  h5 { font-size: 1.6rem; }
  h6 { font-size: 1.0rem; }
}

@media (max-width: 480px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.6rem; }
  h4 { font-size: 1.6rem; }
  h5 { font-size: 1.6rem; }
  h6 { font-size: 0.9rem; }
}

.headline { margin-top: 5% !important; margin-bottom: 5% !important; font-weight: bold; }
.subline { font-weight: bold; text-transform: uppercase; color: #DA312C; }

p {
  margin-top: 0; }

span.company-name { font-weight: bold; font-size: larger; }
span.company-name:after { content: "™"; color: inherit; font-weight: bold; font-size: small; display: inline-block; vertical-align: top; }

/* Links */
a {
  color: #a91c1c; }
a:hover {
  color: #a91c1c;
  text-decoration: none;  }


/* Buttons */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  margin-top: 4%;
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: #DA312C;
  border-radius: 0px;
  border: 1px solid #DA312C;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #f2f2f2;
  border-color: #DA312C;
  outline: 0; }

.btn-secondary,
button.btn-secondary {
  margin-top: 4%;
  border: 1px solid #fff;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  padding: 1rem 2rem;
  padding: 10px 20px;
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  font-size: 20px;
  border-radius: 0px;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.btn-secondary:hover,
button.btn-secondary:hover,
.btn-secondary:focus,
button.btn-secondary:focus {
  color: #f0f0f0;
  border-color: #f0f0f0;
  outline: 0;
}

.btn-secondary span,
button.btn-secondary span {
  font-size: 14px;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  vertical-align: text-bottom;
}


/* Forms */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  min-width: 100%;
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists */
ul {
  list-style: circle outside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }

span.list-item-note { font-size: small; }

@media all and (max-width: 768px) {
  span.list-item-note { font-size: x-small; white-space: nowrap;}
}


/* Code */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc */
hr { margin-top: 3rem; margin-bottom: 3rem; border-width: 0; border-top: 4px solid #E1E1E1; width: 100%; float: left;}

hr.only { margin-top: 0; margin-bottom: 0; border-width: 0; border-top: 4px solid #e1e1e1; }

hr.thinner { border-width: 1px; }

hr.even { margin-top: 5%; margin-bottom: 5%; }

hr.invisible { margin-top: 5%; margin-bottom: 5%; border-width: 0px; }

hr.anchor { opacity: 0; visibility: none; width: 0; height: 0; margin: 0; padding: 0; }


/* Clearing */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries */

@media all and (max-width: 768px) {
header .company-logo { width: 70%; margin: 0 auto; float: none; }

  nav .container { width: 100%; }
  nav .i-nav-list li a { font-size: 1.2rem; font-size: 12px; }

  .page-intro { padding: 5rem 0; }
  .page-intro .row:last-child .item:last-child { clear: both; }
  .page-intro .row:last-child ul { margin-bottom: 4%; }
  .page-intro .row:last-child .item:last-child ul { margin-bottom: 0; }
  .page-intro .row:last-child h1 { font-size: 21px; font-size: 2.1rem; }
  .page-intro .row:last-child ul li { font-size: 16px; font-size: 1.6rem; }
  .page-intro .row .item:last-child { margin-top: 2rem; }

  .tier div p { font-size: 18px; font-size: 18px; line-height: 21px; }
  .tier .row div:last-child { text-align: center; }
  .tier .button,
  .tier button { margin: 0 auto; }

  .main p { font-size: 1.6rem; }

  .pre-footer { height: 120px; }

  footer .company-logo { width: 70%; }
}

@media all and (max-width: 480px) {
  header .company-logo { width: 90%; }

  nav .i-nav-list li a { font-size: 1.0rem; font-size: 10px; }

  .page-intro { padding: 3rem 0; }

  .tier div p { font-size: 14px; font-size: 1.4rem; line-height: 18px; }

  .pre-footer { height: 60px; }

  footer .company-logo { width: 90%; }

}