* {
box-sizing: border-box;
}
.strips {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.strips__strip {
will-change: width, left, z-index, height;
position: absolute;
/* width: 20%; */
width:16.67%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip:nth-child(1) {
left: 0;
}
.strips__strip:nth-child(2) {
left: 16.67vw;
}
.strips__strip:nth-child(3) {
left: 33.33vw;
}
.strips__strip:nth-child(4) {
left: 50vw;
}
.strips__strip:nth-child(5) {
left: 66.667vw;
}
.strips__strip:nth-child(6) {
left: 83.333vw;
}
.strips__strip:nth-child(1) .strip__content {
background: #244f75;
transform: translate3d(-100%, 0, 0);
animation-name: strip1;
animation-delay: 0.1s;
}
.strips__strip:nth-child(2) .strip__content {
background: #60bfbf;
transform: translate3d(0, 100%, 0);
animation-name: strip2;
animation-delay: 0.2s;
}
.strips__strip:nth-child(3) .strip__content {
background: #8c4b7e;
transform: translate3d(0, -100%, 0);
animation-name: strip3;
animation-delay: 0.3s;
}
.strips__strip:nth-child(4) .strip__content {
background: #f8bb44;
transform: translate3d(0, 100%, 0);
animation-name: strip4;
animation-delay: 0.4s;
}
.strips__strip:nth-child(5) .strip__content {
background: #f24b4b;
transform: translate3d(100%, 0, 0);
animation-name: strip5;
animation-delay: 0.5s;
}
.strips__strip:nth-child(6) .strip__content {
background: #ffffff;
transform: translate3d(100%, 0, 0);
animation-name: strip6;
animation-delay: 0.5s;
}
@media screen and (max-width: 760px) {
.strips__strip {
min-height: 20vh;
}
.strips__strip:nth-child(1) {
top: 0;
left: 0;
width: 100%;
}
.strips__strip:nth-child(2) {
top: 20vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(3) {
top: 40vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(4) {
top: 60vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(5) {
top: 80vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(6) {
top: 100vh;
left: 0;
width: 100%;
}
}
.strips .strip__content {
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-fill-mode: both;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.strips .strip__content:hover:before {
transform: skew(-30deg) scale(3) translate(0, 0);
opacity: 0.1;
}
.strips .strip__content:before {
content: "
"
;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.05;
transform-origin: center center;
transform: skew(-30deg) scaleY(1) translate(0, 0);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips .strip__inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
/* width: 70%; */
width: 100%;
overflow: hidden scroll;
height: 100vh;
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip--expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 51;
cursor: default;
}
@media screen and (max-width: 760px) {
.strips__strip--expanded {
min-height: 100vh;
}
}
.strips__strip--expanded .strip__content:hover:before {
transform: skew(-30deg) scale(1) translate(0, 0);
opacity: 0.05;
}
.strips__strip--expanded .strip__title {
opacity: 0;
}
.strips__strip--expanded .strip__inner-text {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.strip__title {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
/* font-size: 3.5vw; */
color: white;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
@media screen and (max-width: 760px) {
.strip__title {
font-size: 28px;
}
}
.strip__close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 52;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
transition-delay: 0.5s;
box-shadow: 3px 3px 0px 0px #00000029;
color: #cfc9c9;
}
.strip__close--show {
opacity: 1;
}
@keyframes strip1 {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip2 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip3 {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip4 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip5 {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip6 {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
/* Demo purposes */
body {
font-family: '
Lato'
;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
line-height: 1.5;
}
h1, h2 {
font-weight: 300;
}
.fa {
font-size: 20px;
/* color: white; */
}
h2 {
font-size: 36px;
margin: 0 0 16px;
}
p {
margin: 0 0 16px;
}
.img_call_women-active{
/* position: absolute;
left: 52.5%;
top: 9%;
z-index: -1; */
animation-name: focus-in-contract;
animation-duration: 2.2s;
animation-timing-function: ease;
animation-delay: 0.2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
}
@keyframes focus-in-contract {
0% {
letter-spacing:1em;
filter:blur(12px);
opacity:0;
}
100% {
filter:blur(0);
opacity:1;
}
}