/*------------------------------------*\
    #GENERAL:
\*------------------------------------*/
* {
  font-family: 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html {
  min-height: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

a,
a:active,
a:hover {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  color: #f28035;
}

input, textarea, 
select, fieldset {
  width: 100%;
  color: #000;
  margin: 0;
}

h1 {
  text-transform: uppercase;
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 800;
  font-size: 2rem;
  color: #fff;
}

h2 {
  text-transform: uppercase;
  text-align: center;
  font-weight: 800;
  font-size: 3rem;
  color: #fff;
}

label, legend {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 2rem;
  color: #fff;
}

/*------------------------------------*\
    #LAYOUT:
\*------------------------------------*/
.orange {
  color: #f28035;
  font-weight: 800;
}

.clear {
  margin: 0;
}

.hide {
  display: none;
}

.form-container {
  padding: 2em 0;
  background: #f28035;
}

.site-social {
  background: #252525;
  padding: 3em 0;
}

.gen5X-logo {
  background: url(../images/gen5X-logo.png) no-repeat 0 0;
  display: inline-block;
  margin-bottom: -9px;
  width: 200px;
  height: 52px;
}

.orange.button {
  background-color: #f28035;
  letter-spacing: -1px;
  margin-bottom: 0.5em;
  padding: 8px 5%;
  font-size: 2rem;
  height: auto;
  color: #fff;
  width: 100%;
  border: 0;
}

.orange.button:hover {
  background-color: #f18f57;
}
 
/*------------------------------------*\
    #ALIGNMENT:
\*------------------------------------*/
.center {
  display: block;
  margin: 0 auto;
}

p.center {
  margin: 2% 10% 4%;
  text-align: center;
}

/*------------------------------------*\
    #HEADER:
\*------------------------------------*/
.site-header {
  background: #f28035;
  margin-top: -0.5em;
  font-weight: 800;
  font-size: 0.9em;
  color: #fff;
}

.site-header a {
  text-decoration: none;
  color: #fff;
}
.site-header a:hover {
  color: #fff;
}

.site-header__logo {
  background: url(../images/logo-ridgid.svg) no-repeat 0 0;
  max-width: 225px;
  min-height: 85px;
}

.site-header__text {
  margin-bottom: -10px;
  font-size: 2.8rem;
  text-align: left;
  color: #f28035;
}
.site-header__text.large {
  text-align: center;
  font-size: 4rem;
}

.site-header__sub-text {
  font-size: 3.5rem;
  margin-bottom: 5px;
  text-align: left;
  color: #000;
}
.site-header__sub-text.large {
  text-align: center;
  font-size: 5rem;
}

/*------------------------------------*\
    #BANNER:
\*------------------------------------*/
.site-banner {
  background: #fff url(../images/repeating-bg.jpg) repeat-x 0 -55px;
  padding-bottom: 80px;
  margin-top: -20px;
}

.site-banner img {
  padding-top: 100px;
  max-width: 1263px;
}

/*------------------------------------*\
    #RIGHT POINTER:
\*------------------------------------*/
.btn-point-right { position: relative; }
.btn-point-right:after {
  left: 100%; 
  top: 50%; 
  border: solid transparent; 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  pointer-events: none; 
  border-color: rgba(136, 183, 213, 0); 
  border-left-color: #f28035; 
  border-width: 24px; 
  margin-top: -24px;
}
.btn-point-right span:after {
  border-bottom: 0.3600em solid transparent;
  border-top: 0.3600em solid transparent;
  border-left: 0.3em solid #fff;
  display: inline-block;
  margin-left: 0.5em;
  content: '';
  height: 0;
  width: 0;
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
.btn-point-right span {
  position: absolute;
  z-index: 100;
  left: 98%;
}

/*------------------------------------*\
    #LSA SECTION:
\*------------------------------------*/
.site-lsa {
  background: #fff;
  padding: 80px 0;
}

.site-lsa p {
  font-size: 1.2em;
}

.site-lsa .button {
  max-width: 280px;
}

.lsa-logo {
  max-width: 330px;
}

/*------------------------------------*\
    #FOOTER:
\*------------------------------------*/
.site-footer {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #757575;
  padding: 3em 0;
  background: #000;
}

.site-footer a {
  text-decoration: none;
  color: #757575;
}

.site-footer__logo {
  background: url(../images/logo-ridgid.svg) no-repeat 0 0;
  max-width: 125px;
  min-height: 50px;
  margin: 0 auto;
}

.inverted {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.inverted:hover {
  -webkit-filter: invert(0%);
  filter: invert(0%);
}

/*------------------------------------*\
    #SOCIAL FEED:
\*------------------------------------*/
.site-social {
  background: #252525; /* Old browsers */
  background: -moz-linear-gradient(top,  #252525 91%, #141414 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(91%,#252525), color-stop(100%,#141414)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #252525 91%,#141414 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #252525 91%,#141414 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #252525 91%,#141414 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #252525 91%,#141414 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252525', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
}

/*------------------------------------*\
    #SOCIAL MEDIA LIST:
\*------------------------------------*/
.sm-list {
  list-style: none outside;
  margin-bottom: 0;
  margin-left: 0;
}

.sm-list > li {
  display: inline-block;
  vertical-align: middle;
}

.sm {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  min-height: 25px;
  display: block;
}

/*------------------\
  #HEADER SOCIAL
\------------------*/
.sm-list__header .sm {
  min-width: 23px;
}

.sm-list__header--link {
  font-size: 1.2rem;
}

.sm-list__header {
  text-align: center;
  padding-top: 10px;
}

/*------------------\
  #FOOTER SOCIAL
\------------------*/
.sm-list__footer .sm {
  min-width: 30px;
}

.sm-list__footer {
  text-align: center;
}

/*------------------------------------*\
    #FEATURE SECTION:
\*------------------------------------*/
.tools-overview__text {
  font-size: 3.5rem;
  margin-bottom: 0;
  text-align: left;
  color: #000;
}

.tools-overview__sub-text {
  font-size: 2rem;
}

.tools-overview {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 50px 0;
}
/*.tools-overview__general {
  background: #fff url(../images/_overview/bg-sub.jpg) no-repeat 0 131px;
}*/

.tools-overview__nav {
  background: #f28035;
  display: table;
  opacity: 0.9;
  width: 100%;
}

.tools-overview__nav li {
  text-transform: uppercase;
  display: table-cell;
  text-align: center;
  position: relative;
  cursor: pointer;
  color: #fff;
}

.tools-overview__nav.sub {
  background: #f38136; /* Old browsers */
  background: -moz-linear-gradient(top, #dc6d24 0%, #f38136 40%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dc6d24), color-stop(0%,#f38136)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #dc6d24 60%,#f38136 40%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #dc6d24 0%,#f38136 40%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #dc6d24 0%,#f38136 40%); /* IE10+ */
  background: linear-gradient(to bottom,  #dc6d24 0%,#f38136 40%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc6d24', endColorstr='#f38136',GradientType=0 ); /* IE6-9 */
}

.tools-overview__nav.sub li {
  padding: 0 15px;
}

.tools-overview__nav.sub {
  height: 40px;
}

.tools-overview__shadow {
  margin-top: -50px;
  max-width: 1400px;
}

.tools-overview__opening {
  margin-top: -50px;
}

.tools-overview__img {
  margin-bottom: -50px;
}

.tools-overview__arrow {
  margin-bottom: -20px;
  margin-top: 20px;
}

.tools-overview .orange {
  margin: 10px 0;
  display: block;
}

.tools-overview__nav .button {
  background-color: transparent;
  padding: 0.3rem 3rem;
  margin: 8px 25% 6px;
  height: auto;
}
.tools-overview__nav .button:hover {
  background-color: #fff;
  color: #dd6825;
}

.tools-overview__logo {
  border-left: #a4a4a4 1px dotted;
  padding-left: 16px;
  margin-top: 12px;
}

#photo-gallery {
  background: url(../images/_overview/bg-sub_floor.jpg) no-repeat 50% 100%;
}

#photo-gallery img {
  margin: 0 auto;
  display: block;
}

.videos {
  /*background: url(../images/_overview/bg-sub_floor.jpg) no-repeat 50% 100%;*/
  padding: 30px 0 85px;
}

.selected {
  display: block;
}

.tool-overview__section {
  background-color: rgba(255,255,255,0.75);
  padding: 20px;
  margin-top: 30px
}


/*------------------------------------*\
    #NAV ICONS:
\*------------------------------------*/
.tools-overview__nav.main {
  padding: 10px 0;
  height: 50px;
}

.tools-overview__nav.main b {
  display: none;
}

.tools-overview__nav.sub a {
  display: none;
}

.tools-overview__nav.main li {
  border-right: #f4ab81 1px solid;
  padding: 14px 15px;
}

.tools-overview__nav.main li:last-child {
  border: none;
}

.tools-overview__nav.main .icon {
  position: relative;
  margin: 0 auto;
  display: block;
  max-width: 67px;
  height: 45px;
  bottom: 5%;
}

#drill .icon {
  background: url(../images/icons.png) no-repeat 4px -10px;
}
#drill:hover .icon,
#drill.selected .icon {
  background: url(../images/icons.png) no-repeat 4px -74px;
}

#circ-saw .icon {
  background: url(../images/icons.png) no-repeat -91px -9px;
}
#circ-saw:hover .icon,
#circ-saw.selected .icon {
  background: url(../images/icons.png) no-repeat -92px -76px;
}

#driver .icon {
  background: url(../images/icons.png) no-repeat -183px -8px;
}
#driver:hover .icon,
#driver.selected .icon {
  background: url(../images/icons.png) no-repeat -183px -73px;
}

#recip-saw .icon {
  background: url(../images/icons.png) no-repeat -273px -9px;
}
#recip-saw:hover .icon,
#recip-saw.selected .icon {
  background: url(../images/icons.png) no-repeat -273px -75px;
}

#flashlight .icon {
  background: url(../images/icons.png) no-repeat -360px -9px;
}
#flashlight:hover .icon,
#flashlight.selected .icon {
  background: url(../images/icons.png) no-repeat -360px -73px;
}

.tools-overview__nav.sub span {
  position: absolute;
  margin-left: -20%;
  min-height: 25px;
  min-width: 30px;
}

#overview span {
  background: url(../images/icons.png) no-repeat -17px -161px;
}
#overview.selected span {
  background: url(../images/icons.png) no-repeat -17px -213px;
}

#photos span {
  background: url(../images/icons.png) no-repeat -122px -161px;
}
#photos.selected span {
  background: url(../images/icons.png) no-repeat -122px -213px;
}

#videos span {
  background: url(../images/icons.png) no-repeat -208px -163px;
}
#videos.selected span {
  background: url(../images/icons.png) no-repeat -208px -213px;
}


/*------------------\
  #TWINE SOCIAL
\------------------*/
#twine-toolbar {
  display: none;
}

.twine-item-info-box div p {
  background-color: #c1c1c1;
  border: 1px solid #fff;
}

#twine-load-more a {
  font-family: 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #fff;
}

#twine-load-more a:hover {
  text-decoration: none;
}

#twine-load-more {
  background-color: #f38136;
  width: 40%;
  border: 0;
  display: block;
  margin: 0 auto;
}

#twine-load-more:hover {
  background-color: #f18f57;
}

.official-author {
  background: #f28035;
  border-radius: 4px;
  margin-top: -9px;
  padding: 9px 0;
}

/*------------------------------------*\
    #RESPONSIVE VIDEO
\*------------------------------------*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  margin-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tools-overview__small-img {
  display: none;
  height: auto;
  width: 100%;
}

.reg {
  top: -2px;
  font-size: 0.8em;
  position: relative;
}

.video-select {
  margin-top: 30px;
}

.video-select li {
  list-style: none;
  cursor: pointer;
}

.video-select .selected {
  border: #f38136 solid 4px;
}

.video-container .hide {
  display: none;
}


/*------------------------------------*\
    #FANCY TRANSFORM
\*------------------------------------*/
.fancy-transform {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotate(1.2deg) skew(1.2deg);
  -ms-transform: rotate(1.2deg) skew(1.2deg);
  transform: rotate(1.2deg) skew(1.2deg);
}

.fancy-transform__reverse {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotate(-1.2deg) skew(-1.2deg);
  -ms-transform: rotate(-1.2deg) skew(-1.2deg);
  transform: rotate(-1.2deg) skew(-1.2deg);
}

/*------------------------------------*\
    #GRADIENT
\*------------------------------------*/
.orange-gradient {
  background: #f38136; /* Old browsers */
  background: -moz-linear-gradient(top,  #f38136 60%, #df7631 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f38136), color-stop(100%,#df7631)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f38136 60%,#df7631 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f38136 60%,#df7631 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f38136 60%,#df7631 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #f38136 60%,#df7631 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38136', endColorstr='#df7631',GradientType=0 ); /* IE6-9 */
}