@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,900");
p.warning {
 
}
p.warning a {
 
}
p.warning a.more {

}

.tabs div {
  box-sizing: border-box;
}

h2 {
  margin: 2em auto 0;
  text-align: center;
}



.tabs ul {
  margin: 0;
  padding: 0 0 1em 0;
  font-weight: bold;
  font-family: "GeneralSans-Regular";
}

.tabs ul li {
background: none;
padding: 0.5em 1em;
border-radius: 2em;
transition: all .3s;
transform-origin: center;
margin: auto -.25em;
color: #fff;
letter-spacing: 1px;
font-size: .9em;
}

.tabs ul li a {
transition: all .3s;
transform-origin: center;
}

.tabs ul li a:hover{
  padding: 1em 1.5em;
  border-radius: 2em;
  border: 0px solid #ffe7b61f;
  color: #fff;
  background-color: #d3cec53e;
transition: all .3s;
transform-origin: center;
}

.tabs ul li a.active {
  padding: 1em 1.5em;
  border-radius: 2em;
  border: 0px solid #ffe7b61f;
  color: #fff;
  background-color: #DDB26C;
transition: all .3s;
transform-origin: center;
margin: auto 0em;
}

.item {
  margin-bottom: 2px;
  color: #fff;
  font-family: "GeneralSans-Regular";
}

.item h4{
	margin: 0 0 .2em 0;
}


.item::before {
  cursor: pointer;
background-color: #d3cec53e;
  color: #eee;
  width: calc(100% - 4em);
  border-radius: 2em;
  padding: .5em 1.2em;
  display: inline;
  margin: 1em 5%;
  transition: all 0.3s ease-in-out;
  clear: both;
  float: none;
  font-family: "GeneralSans-Medium.";
  font-size: .9em;

}


.item.active::before {
  background: #DDB26C;
  color: #eee;
  width: calc(100% - 4em);
  border-radius: 2em;
  padding: .5em 1.3em;
  display: inline;
  margin: 1em 5%;
  transition: all 0.3s ease-in-out;
}


.item.active .item-content {
  padding: 1em;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

@media all and (min-width: 800px) {
  .item.active .item-content {
    padding-top: 0;
  }

  .tabs-side .tabs li {
    margin-bottom: 2px;
  }
}
/* 
The project specific CSS starts here
This is the minimum CSS that you will need in order for this to work
*/
.tabbed-content .tabs {
  display: none;
}
.tabbed-content .item {
  min-height: 2em;
  margin: 1em 0;
}
.tabbed-content .item::before {
  content: attr(data-title);
}
.tabbed-content .item .item-content {
  opacity: 0;
  visibility: hidden;
  height: 0;
}
.tabbed-content .item.active .item-content {
  opacity: 1;
  visibility: visible;
  height: auto;
}

@media all and (min-width: 800px) {
  .tabbed-content .tabs {
    display: block;
  }
  .tabbed-content .tabs li {
    display: inline-block;
  }
  .tabbed-content .tabs li a {
    display: block;
  }
  .tabbed-content .item {
    min-height: 0;
  }
  .tabbed-content .item::before {
    display: none;
  }
  .tabbed-content.tabs-side .tabs {
    width: 150px;
    float: left;
  }
  .tabbed-content.tabs-side .tabs li {
    display: block;
  }
  .tabbed-content.tabs-side .item {
    margin-left: 150px;
  }
}