.about {
background-color: #2c303a;
width: 100%;
min-width: 480px;
height: 50px;
position: absolute;
bottom: 0;
color: #888888;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
font-weight: 300;
z-index: 3;
border-bottom: solid 1px #131418;
}
.about a {
color: white;
margin: 0 5px;
padding: 2px 3px;
text-decoration: none;
position: relative;
transition: all 0.3s ease;
z-index: 1;
display: flex;
align-items: center;
}
.about a:after {
content: "";
position: absolute;
width: calc(100% - 6px);
height: 1px;
background-color: #46b7a7;
bottom: 0;
transition: all 0.3s ease;
}
.about a:before {
content: "";
position: absolute;
width: 0;
height: 0px;
background-color: #46b7a7;
right: 0;
bottom: 0;
transition: all 0.3s 0.3s ease;
z-index: -1;
}
.about a:hover:after {
width: 0;
left: 0;
}
.about a:hover:before {
width: 100%;
height: 100%;
left: 0;
}
.about .one {
width: 2px;
height: 20px;
background-color: #444857;
margin: 0 10px 0 5px;
}
.about .two {
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #444857;
margin: 0 5px;
}
#wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.content {
width: 100%;
min-width: 260px;
margin: 0 5% 0 0;
transition: 0.3s ease;
}
@media screen and (max-width: 512px) {
.content {
margin: 0 4%;
margin-top: 5%;
/*      display: none; */
}
}
/* Tabs menu */
.tabs {
margin: 0;
background-image: linear-gradient(135deg, #f5f7fa 0%, #ecfffc 100%);
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
border-radius: 2px 2px 0px 0px;
}
@media screen and (max-width: 512px) {
.tabs {
height: 40px;
}
}
/* Tab Links */
.tablinks {
background: transparent;
/* background-image: linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, 0.2) 100%); */
border: none;
outline: none;
cursor: pointer;
width: 25%;
/*change depending on the number of tabs*/
height: 80px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
overflow: hidden;
transition: 0.3s ease;
}
@media screen and (max-width: 512px) {
.tablinks {
height: 40px;
font-size: 12px;
}
}
.tablinks:before {
background-image: linear-gradient(135deg, #42d9be 0%, #1a89fb 100%);
content: "";
width: 100%;
height: 0px;
position: absolute;
top: 0;
left: 0;
transition: 0.3s ease-in-out;
z-index: 2;
}
/*tab buttons hover*/
.tablinks:hover::before {
height: 100%;
z-index: 2;
bottom: 0;
}
@media screen and (max-width: 512px) {
.tablinks:hover::before {
height: 0;
}
}
/* Tab active */
.tablinks.active {
/*! background-color: white; */
z-index: 0;
border-right: 0px;
border-left: 0px;
/*! height: 110px; */
bottom: 0px;
overflow: hidden;
background-image: linear-gradient(135deg, #42d9be 0%, #1a89fb 100%);
}
@media screen and (max-width: 512px) {
/*  .tablinks.active {
height: 60px;
} */
}
.tablinks.active:before {
content: "";
width: 100%;
/*! height: 5px; */
top: 0;
left: 0;
}
/* Tabs text */
.tablinks.active p,
.tablinks.active:hover p {
opacity: 1;
color: #fff;
/*! font-size: 20px; */
font-weight: bold;
/* background: -webkit-linear-gradient(135deg, #42d9be 0%, #1a89fb 100%); */
/* -webkit-background-clip: text; */
/* -webkit-text-fill-color: transparent; */
}
.tablinks p {
z-index: 2;
opacity: 0.6;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: 0.5s ease;
padding: 0;
margin: 0;
color: #686868;
backface-visibility: hidden;
font-weight: 400;
}
.tablinks:hover p {
color: white;
opacity: 1;
}
@media screen and (max-width: 512px) {
.tablinks:hover p {
color: #686868;
opacity: 0.6;
}
}
/* Tabs text bigger */
.tablinks p:before {
content: attr(data-title);
position: absolute;
height: auto;
width: auto;
color: white;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.1;
font-size: 40px;
transition: 1s ease-out;
z-index: -1;
font-weight: 600;
top: 110%;
}
@media screen and (max-width: 512px) {
.tablinks p:before {
display: none;
}
}
.tablinks:hover p:before {
opacity: 0.1;
font-size: 40px;
top: -80%;
}
/* tab content */
.wrapper_tabcontent {/*  background-color: white; */margin-top: 0px;position: relative;opacity: 1;padding: 40px 60px;overflow: hidden;transition: all 1s ease;top: 0;min-height: 240px;line-height: 36px;}
.wrapper_tabcontent a:link,.wrapper_tabcontent a:visited,.wrapper_tabcontent a:hover {
color: #fff;
}
.tabcontent {
display: none;
min-height: 100px;
}
@keyframes tabEffect {
from {
top: -40px;
}
to {
top: 0px;
}
}
.tabcontent.active {
transition: all 1s ease;
display: block;
}
/* Tab content line */
.wrapper_tabcontent:after {
content: "";
height: 5px;
width: 100%;
position: absolute;
/* background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
left: 0;
bottom: 0;
z-index: -2;
transition: all 1s ease;
}
/* Title */
.tabcontent h3 {
font-size: 40px;
top: 75px;
transform: rotate(90deg);
position: absolute;
left: -90px;
opacity: 0.1;
width: 200px;
height: 60px;
background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 0;
animation: city 1s ease;
}
@media screen and (max-width: 512px) {
.tabcontent h3 {
top: 65px;
}
}
@keyframes city {
from {
left: -150px;
}
to {
left: -90px;
}
}
/* Text*/
.tabcontent p {
color: #fff;
margin: 0;
padding: 0;
/* line-height: 28px; */
font-weight: 100;
transition: all 1s ease;
animation: fadeEffect 0.6s ease;
width: 100%;
font-size: 16px;
}
@media screen and (max-width: 512px) {
.tabcontent p {
font-size: 14px;
line-height: 26px;
}
}
@keyframes fadeEffect {
from {
opacity: 0;
margin-left: 30px;
}
to {
opacity: 1;
margin-left: 0;
}
}
@media (max-width: 1000px) {
.tabs {
display: inline-table;
justify-content: initial;
align-items: initial;
height: auto;
}
.tablinks {
width: 33.3333333%;
display: inherit;
height: 50px;
/* 		transition: none; */
}
.tablinks:hover p:before {
display: none;
}
.tablinks.active:before {
display: none;
}
.content {
margin: 0px;
}
.wrapper_tabcontent {
padding: 40px;
min-height: auto;
}
}
@media (max-width: 768px) {
.wrapper_tabcontent {
padding: 20px;
}
}