* {
	 box-sizing: border-box;
	 padding: 0;
	 margin: 0;
}
 body {
	 font-family: 'Open Sans', sans-serif;
	 color: #50555a;
	 padding: 10px 0px;
}
 nav {
	 z-index: 9;
	 border-bottom: 1px solid rgba(0, 0, 0, .1);
	 color: white;
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 padding: 20px 0;
	 text-align: center;
}
 .bg-color {
	/* background-color: #46a1de; */
	 transition-duration: 0.5s;
}
 .text-color {
	 color: #46a1de;
	 transition-duration: 0.5s;
}
 footer {
	 padding: 40px 0;
	 text-align: center;
	 opacity: 0.33;
	 color: white;
}
 .wrapper {
	 min-width: 600px;
	 max-width: 980px; /* 900px; */
	 margin: 0 auto;
}
 .tabs {
	 display: table;
	 table-layout: fixed;
	 width: 100%;
	 -webkit-transform: translateY(5px);
	 transform: translateY(5px);
}
 .tabs > li {
	 transition-duration: 0.25s;
	 display: table-cell;
	 list-style: none;
	 text-align: center;
	 /* padding: 20px 20px 25px 20px; */
         padding: 5px 5px 10px 5px;
	 position: relative;
	 overflow: hidden;
	 cursor: pointer;
	 color: white;
}
 .tabs > li:before {
	 z-index: -1;
	 position: absolute;
	 content: "";
	 width: 100%;
	 height: 120%;
	 top: 0;
	 left: 0;
	 background-color: rgba(255, 255, 255, .3);
	 -webkit-transform: translateY(100%);
	 transform: translateY(100%);
	 transition-duration: 0.25s;
	 border-radius: 5px 5px 0 0;
}
 .tabs > li:hover:before {
	 -webkit-transform: translateY(70%);
	 transform: translateY(70%);
}
 .tabs > li.active {
	 /* color: #50555a; */
         color: white;
}
 .tabs > li.active:before {
	 transition-duration: 0.5s;
	 background-color: #484547; /* HERE */
	 -webkit-transform: translateY(0);
	 transform: translateY(0);
}
 .tab__content {
	 background-color: #484547;  /* HERE; */
	 position: relative;
	 width: 100%;
	 border-radius: 5px;
}
 .tab__content > li {
	 width: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
	 display: none;
	 list-style: none;
}
 .tab__content > li .content__wrapper {
	 text-align: center;
	 border-radius: 5px;
	 width: 100%;
	 padding: 45px 40px 40px 40px;
	 background-color: #484547; /* HERE */ 
}
 .content__wrapper h2 {
	 width: 100%;
	 text-align: center;
	 padding-bottom: 20px;
	 font-weight: 300;
}
 .content__wrapper img {
	 width: 100%;
	 height: auto;
	 border-radius: 5px;
}
 .colors {
	 text-align: center;
	 padding-top: 20px;
}
 .colors > li {
	 list-style: none;
	 width: 50px;
	 height: 50px;
	 border-radius: 50%;
	 border-bottom: 5px solid rgba(0, 0, 0, .1);
	 display: inline-block;
	 margin: 0 10px;
	 cursor: pointer;
	 transition-duration: 0.2s;
	 box-shadow: 0 2px 1px rgba(0, 0, 0, .2);
}
 .colors > li:hover {
	 -webkit-transform: scale(1.2);
	 transform: scale(1.2);
	 border-bottom: 10px solid rgba(0, 0, 0, .15);
	 box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
}
 .colors > li.active-color {
	 -webkit-transform: scale(1.2) translateY(-10px);
	 transform: scale(1.2) translateY(-10px);
	 box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
	 border-bottom: 20px solid rgba(0, 0, 0, .15);
}
 .colors > li:nth-child(1) {
	 background-color: #2ecc71;
}
 .colors > li:nth-child(2) {
	 background-color: #d64a4b;
}
 .colors > li:nth-child(3) {
	 background-color: #8e44ad;
}
 .colors > li:nth-child(4) {
	 background-color: #46a1de;
}
 .colors > li:nth-child(5) {
	 background-color: #bdc3c7;
}