/*  ==================
    2. ITEM RESET
    ==================  */

#tabbed * {

}
#tabbed label {
  cursor: pointer;
}
#tabbed input[type="radio"] {
  display: none;
  visibility: hidden;
  opacity: 0;
}
#tabbed a {
  text-decoration: none;
}
#tabbed {
  width: 940px; /* <-- Adjust this value to change the width of the tabs 600*/
  position: relative;
  float: left;
  text-align: left; /* This value positions the tab labels on top. You can set: left, right or center. */
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}
/* === Note === If you experience issues with reset above, please adjust the selectors and values according to your template/website.
When adjusting the reset is adviced to check up the elements on your page, as they might distort. */


/*  ==================
    3. MAIN STYLES
    ==================  */

/***** Wrapper *****/

#tabbed .wrapper {
  background: #747578;
  position: relative;
  width: 100%;
  height: auto;
  float: left;
  text-align: left;
}
#tabbed .wrapper > div {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  background: #F0F0F0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  padding: 5px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

/***** Tab labels *****/

#tabbed input#t-1:checked ~ .wrapper .tab-1,
#tabbed input#t-2:checked ~ .wrapper .tab-2,
#tabbed input#t-3:checked ~ .wrapper .tab-3 {
  position: relative;
  float: left;
  z-index: 10;
  opacity: 1;
  visibility: visible;
}
#tabbed label.tabs {
  display: inline-block;
  background: #ccc; /*EDITED LH*/
  color: #fff;
  font-weight:bold;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  padding: 0 40px;
  width: auto;
  height: 44px;
  line-height: 44px;
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}
#tabbed label.tabs:hover,
#tabbed label.tabs:focus {
  background: #4877cb;
  
}
#tabbed input:checked + label.tabs {
  background: #6e98e3;
  color: #fff;
  font-weight:bold;
}
#tabbed label.tabs:hover,
#tabbed label.tabs:focus,
#tabbed input:checked + label.tabs {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  
}
#tabbed label.tabs:before {
  padding-right: 10px;
}


/*  ==================
    4. LAYOUT
    ==================  */

/***** 6 column grid *****/

#tabbed .row {
  display: block;
  float: left;
  width: 100%;
  clear: both;
}
#tabbed .cell {
  display: inline-block;
  float: left;
  position: relative;
  margin: 1% 2% 1% 0;
}
#tabbed .cell:last-child {
  margin-right: 0;
}
/* full width */
#tabbed .cell.w-100 {
  width: 100%;
}
/* four fifths */
#tabbed .cell.w-83 {
  width: 83%;
}
/* three fifths */
#tabbed .cell.w-66 {
  width: 66%;
}
/* half width */
#tabbed .cell.w-49 {
  width: 49%;
}
/* two fifths */
#tabbed .cell.w-32 {
  width: 32%;
}
/* one fifth */
#tabbed .cell.w-15 {
  width: 15%;
}
/* table */
#tabbed .cell.table.first {
  padding-left: 10px;
}
#tabbed .cell.table.first.blue {
  background: #6E98E3;
}
#tabbed .cell.table.first.black {
  background: #333;
}
#tabbed .cell.table.first p {
  color: #fff;
}
#tabbed .cell.table.exposed p {
  color: #f00;
}

/***** Helper margins *****/

#tabbed .mt-5 {
  margin-top: 5px;
}
#tabbed .mt-10 {
  margin-top: 10px;
}
#tabbed .mt-15 {
  margin-top: 15px;
}
#tabbed .mt-20 {
  margin-top: 20px;
}
#tabbed .mt-30 {
  margin-top: 30px;
}

/***** Clearfixes *****/

#tabbed .clrfx {
  display: block;
  float: left;
  width: 100%;
  height: auto;
  clear: both;
  content: "";
}

/***** Floats *****/

#tabbed .fl-left {
  float: left;
}
#tabbed .fl-right {
  float: right;
}





/***** Form layout *****/

#tabbed input,
#tabbed select,
#tabbed textarea {
  display: inline-block;
  width: 100%;
  float: left;

}
#tabbed input:hover,
#tabbed input:focus,
#tabbed select:hover,
#tabbed select:focus,
#tabbed textarea:hover,
#tabbed textarea:focus {
  border-bottom-color: #333;
  outline: none;
}
#tabbed textarea {
  resize: none;
  overflow: hidden;
  height: 46px;
}
#tabbed textarea:focus {
  height: 140px;
}

#tabbed select {
  background: none;
  background-color: rgba(0,0,0,0);
  height: auto;
  padding-left: 8px;
  z-index: 2;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#tabbed select.grayed {
  color: #999;
}
#arrow-select,
#arrow-select-svg {
  background: #fff url('img/select.png') no-repeat 0 11px;
  width: 44px;
  height: 35px;
  position: absolute;
  right: 0;
  top: 1px;
  pointer-events: none;
  vertical-align: middle;
  outline: none;
  border: none;
  z-index: 3;
}
#tabbed select:hover ~ #arrow-select,
#tabbed select:focus ~ #arrow-select,
#tabbed select:hover ~ #arrow-select-svg,
#tabbed select:focus ~ #arrow-select-svg {
  background: #fff url('img/select-focus.png') no-repeat 0 11px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #arrow-select-svg {
    display: none; /* <-- Hide svg arrow in webkit browsers and IE9/10 (pointer events don't work in those IE) */
  }
}
x:-o-prefocus, #arrow-select {
  display: none; /* <-- Hack for Opera 12 */
}
/*-- Webkit placeholder --*/
#tabbed input::-webkit-input-placeholder,
#tabbed textarea::-webkit-input-placeholder {
  color: #999;
}
#tabbed input:focus::-webkit-input-placeholder,
#tabbed textarea:focus::-webkit-input-placeholder {
  color: #ccc;
}
/*-- Firefox 19 down placeholder --*/
#tabbed input:-moz-placeholder,
#tabbed textarea:-moz-placeholder {
  color: #999;
}
#tabbed input:focus:-moz-placeholder,
#tabbed textarea:focus:-moz-placeholder {
  color: #ccc;
}
/*-- Firefox 19 up placeholder --*/
#tabbed input::-moz-placeholder,
#tabbed textarea::-moz-placeholder {
  color: #999;
}
#tabbed input:focus::-moz-placeholder,
#tabbed textarea:focus::-moz-placeholder {
  color: #ccc;
}
/*-- IE 10+ placeholder --*/
#tabbed input:-ms-input-placeholder,
#tabbed textarea:-ms-input-placeholder {
  color: #999;
}
#tabbed input:focus:-ms-input-placeholder,
#tabbed textarea:focus:-ms-input-placeholder {
  color: #ccc;
}
/*-- IE 9 placeholder --*/
#tabbed .ie9-placeholder {
  color: #999 !important;
}
#tabbed .ie9-placeholder:focus {
  color: #ccc !important;
}
/* Required field */
#tabbed input:required,
#tabbed textarea:required,
#tabbed select:required {
  background: #fff url(img/required.png) no-repeat 100% 18px;
  outline: none;
  box-shadow: none;
}
/* Invalid field */
#tabbed input:hover:invalid,
#tabbed textarea:hover:invalid,
#tabbed select:hover:invalid {
  background: #fff url(img/focused.png) no-repeat 100% 18px;
  outline: none;
  box-shadow: none;
}
/* Valid field */
#tabbed input:required:valid,
#tabbed textarea:required:valid,
#tabbed select:required:valid {
  background: #fff url(img/valid.png) no-repeat 100% 18px;
  outline: none;
  box-shadow: none;
}
/* Invalid field */
#tabbed input:focus:invalid,
#tabbed textarea:focus:invalid,
#tabbed select:focus:invalid {
  background: #fff url(img/invalid.png) no-repeat 100% 18px;
  outline: none;
  box-shadow: none;
}


/*  ==================
    6. VISUAL CANDIES
    ==================  */

/***** Transitions *****/

#tabbed a,
#tabbed input,
#tabbed select,
#tabbed textarea,
#tabbed label.tabs,
#tabbed input:checked ~ .wrapper > div {
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.2s;
}






/*  ==================
    7. MEDIA QUERIES
    ==================  */

/***** Max width 1024px *****/

@media screen and (max-width:1024px){
  #tabbed {
    width: 100%;
  }
  #tabbed label.tabs {
    padding: 0 30px;
  }
}

/***** Max width 800px *****/

@media screen and (max-width:800px){
  #tabbed .cell.w-83,
  #tabbed .cell.w-66,
  #tabbed .cell.w-49,
  #tabbed .cell.w-32,
  #tabbed .cell.w-15 {
    width: 100%;
  }
  #tabbed .cell {
    margin: 2% 0;
  }
  #tabbed p.framed-quote:before {
    display: none;
  }
  #tabbed label.tabs {
    width: 100%;
    height: 56px;
    line-height: 56px;
    font-size: 20px;
    text-align: left;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  #tabbed label.tabs:before {
    display: inline-block;
    padding: 0;
    width: 30px;
  }
  #tabbed input:checked + label.tabs.shadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  
  #tabbed .fl-right {
    float: left;
  }
  #tabbed iframe {
    height: 380px;
  }
  #tabbed .map {
    width: 100%;
  }
}

.feature img {margin:0 auto;display:block;}
article {max-width:940px;}
.tab-3 img {margin: 20px 0;}