/* Tabbed section */

#tabnav {
    margin: 35px auto 60px auto;
}
#tabnav li.branding,
#tabnav li.design,
#tabnav li.dev {
    float: left;
    width: 33%;
    text-align: center;
    padding: 2px 0;
    position: relative
}
#tabnav li:hover {
    background: #64b467;
}
#tabnav li a {
    font-size: 16px;
    color: rgb(43, 42, 56);
    -ms-filter: "alpha(opacity=75)";
    display: block;
    padding: 8px 0;
    font-weight: 500;
}
#tabnav li a:hover {
    opacity: 1;
    -ms-filter: "alpha(opacity=100)"
}
#tabnav li a img {
    width: 40px;
    height: 40px
}
#tabnav li a span {
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px
}
#tabnav li.active {
    background: #fafafa!important
}
#tabnav li.active a {
    opacity: 1;
    -ms-filter: "alpha(opacity=100)"
}
media_tag_5 {
    media_subcode: 5
}
#tabnav li.branding,
#tabnav li.dev {
    border: 1px solid rgba(182, 196, 209, 0.3);
}
#tabnav li.design {
    border-top: 1px solid rgba(182, 196, 209, 0.3);
    border-bottom: 1px solid rgba(182, 196, 209, 0.3);
}
.tab-content {
    margin-top: 30px;
}
#tabbed .tab-pane .img-container img {
    margin: auto;
}
#tabbed .right-tabbed {
    position: relative;
}
#tabbed .right-tabbed .link {
    padding: 16px 0 0 25px;
}
#tabbed .right-tabbed .tabbed-content {
    margin: auto;
    display: block;
}
#tabbed .right-tabbed .tabbed-action {
    margin-top: 40px;
}
#tabbed .right-tabbed .tabbed-content .watch-video {
    background: url("../images/video-button-bg.jpg") no-repeat center center;
    background-size: cover;
    color: #FFF;
    cursor: pointer;
    border-radius: 4px;
    display: block;
    float: none;
    margin-bottom: 5px;
    padding: 25px 0;
    text-align: center;
    width: 200px;
}
#tabbed .right-tabbed .tabbed-content .watch-video span {
    letter-spacing: 1px;
    text-transform: uppercase;
}
#tabbed .right-tabbed .tabbed-content .watch-video:hover {
    opacity: 0.7;
}
#tabbed .tab-pane ul.bullet-list {
    margin-bottom: 25px;
}
#tabbed .tab-pane ul.bullet-list li {
    margin-left: 0;
    padding: 13px 0 5px;
    position: relative;
}
.tabbed-info {
    padding: 40px 0px 120px 0px;
    overflow: hidden;
}
.tabbed-info h5 {
    color: #fff;
}
.tabbed-info h2 {
    font-weight: 300;
    font-size: 40px;
    color: #fff;
    margin: 0px 0px 40px 30px;
    text-align: center;
}
.tabbed-info .nav>li>a {
    color: #FFFFFF;
    background: rgba(42, 41, 47, 0.34);
    box-shadow: inset 0px 0px 0px 1px rgba(18, 17, 27, 0.28), 0px 0px 0px 1px rgba(43, 45, 48, 0.15);
    margin: 0px 10px;
    font-size: 20px;
    font-weight: 300;
    font-family: 'Roboto Slab', serif;
}
.tabbed-info .nav-pills>li.active>a,
.tabbed-info .nav-pills>li.active>a:hover,
.tabbed-info .nav-pills>li.active>a:focus {
    color: #fff;
    background-color: #82b440;
    box-shadow: inset 0px 0px 0px 1px #82b440, 0px 0px 0px 1px rgba(14, 13, 16, 0);
}
.tabbed-info .nav-pills>li.active>a:after,
.tabbed-info .nav-pills>li.active>a:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.tabbed-info .nav-pills>li.active>a:after {
    border-color: rgba(36, 44, 56, 0);
    border-top-color: #82b440;
    border-width: 10px;
    margin-left: -10px;
    margin-top: -1px
}
.tabbed-info .nav-pills>li.active>a:before {
    border-color: rgba(31, 30, 40, 0);
    border-top-color: #82b440;
    border-width: 11px;
    margin-left: -11px;
    margin-top: -1px;
}
.tabbed-info .tab-content {
    padding-top: 50px;
}
.tabbed-info .tab-content .tab-pane h5 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
    line-height: 30px;
}
.tabbed-info .tab-content .tab-pane p {
    font-size: 16px;
    line-height: 26px;
}
.tabbed-info .tab-content .tab-pane ul {
    padding-left: 90px;
}
.tabbed-info .tab-content .tab-pane ul li {
    list-style: none;
    margin-bottom: 30px;
}
.tabbed-info .tab-content .tab-pane ul li:before {
    content: "* ";
    color: #fff;
    position: absolute;
    left: 80px;
}
.tabbed-info .tab-content .tab-pane ul h6 {
    color: #FFFFFF;
    font-size: 20px;
}
.tabbed-info .tab-content .tab-pane ul p {
    color: #6d737f;
    line-height: 24px;
}
.content {
  position: relative;
  width: 90%;
  max-width: 150px;
  margin: auto;
  overflow: hidden;
}
.section{
  padding: 1em 0;
  float: left;
  width: 100%;
}
.content .content-overlay {
background: rgba(0,0,0,0.5);  
position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}
.content-title{
color: #fff;
text-decoration: none;
}
.content-text p {
color: #fff;
text-decoration: none;
}
.content:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-right{
  left: 80%;
}

.col-sm-3 { 
  padding-bottom: 20px;
  align-items: center;
  flex-direction: row;
}

p { font-size: 16px; }