/*	Responsive Tabs v1.0, Copyright 2014, Joe Mottershaw, https://github.com/joemottershaw/
//	======================================================================================= */

/*	Table of Contents
//	==================================================
//		#Reset
//		#Themes


/*	#Reset
//	================================================== */

.tabs {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul.tabs {
  float: left;
  width: 13%;
  margin-right: 4%;
}
.tabs li {
  margin: 0px 0px 25px 0px;
  text-align: center;
}
.tabs li i {
  font-size: 30px;
  margin-bottom: 8px;
  text-align: center;
  display: block;
}
.tabs li a {
  color: #454545;
  display: block;
  height: 120px;
  padding: 20px 10px 20px 10px;
  text-decoration: none;
  font-size: 14px;
  background-color: #eee;
  position: relative;
}

.tabs li a:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(238, 238, 238, 0);
  border-left-color: #eee;
  border-width: 10px;
  margin-top: -10px;
}
.tabs li.active a {
  color: #fff;
  background-color: #e54c4c;
}
.tabs li.active a:after {
  border-color: rgba(19, 175, 235, 0);
  /* border-right-color: #e54c4c; */
  border-left-color: #3183d7;
}

.tabs-content {
  float: left;
  width: 80%;
  padding: 0;
  text-align: left;
}
.tabs-content img {
  width: 100%;
}
.tabs-content img.img_left2 {
  width: auto;
}
.tabs-content .tabs-panel {
  padding: 20px;
}
.tabs-content .tabs-panel .tab-title {
  display: none;
}

.tabs-content .tabs-panel.bgimg1 {
  background: url(../../../../images/site-img54.jpg) no-repeat right 10px;
  height: 340px;
}
.tabs-content .tabs-panel.bgimg2 {
  background: url(../../../../images/site-img55.jpg) no-repeat right 10px;
  height: 340px;
}
.tabs-content .tabs-panel.bgimg3 {
  background: url(../../../../images/site-img56.jpg) no-repeat right 10px;
  height: 340px;
}

@media only screen and (min-width: 768px) and (max-width: 999px) {
  .tabs li i {
    font-size: 20px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  ul.tabs {
    width: 25%;
    margin-right: 3%;
  }
  .tabs-content {
    width: 72%;
  }

  .tabs-content .tabs-panel.bgimg1,
  .tabs-content .tabs-panel.bgimg2,
  .tabs-content .tabs-panel.bgimg3 {
    background: none;
  }
}

@media only screen and (max-width: 479px) {
  ul.tabs {
    width: 30%;
    margin-right: 1%;
  }
  .tabs-content {
    width: 69%;
  }

  .tabs-content .tabs-panel.bgimg1,
  .tabs-content .tabs-panel.bgimg2,
  .tabs-content .tabs-panel.bgimg3 {
    background: none;
  }
}