AlkantarClanX12
Current Path : /home/dilseshaadi/public_html/wp-content/themes/wedding-planner/css/ |
Current File : /home/dilseshaadi/public_html/wp-content/themes/wedding-planner/css/expandable.callbox.css |
.strips { position: relative; text-align: center; overflow: hidden; } @media screen and (min-width: 768px) { .strips { min-height: 100vh; } } .strips .strip__close { display: inline-block; border: 1px solid currentColor; border-radius: 50%; width: 48px; height: 48px; line-height: 44px; font-size: 18px; font-style: normal; font-family: cursive; } .strips__strip { will-change: width, left, z-index, height; position: absolute; min-height: 100vh; overflow: hidden; cursor: pointer; -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .strips__strip:nth-child(1) { left: 0; } .strips__strip:nth-child(1) .strip__content { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-animation-name: strip1; animation-name: strip1; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .strips__strip:nth-child(2) .strip__content { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-animation-name: strip2; animation-name: strip2; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .strips__strip:nth-child(3) .strip__content { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-animation-name: strip3; animation-name: strip3; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .strips__strip:nth-child(4) .strip__content { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-animation-name: strip4; animation-name: strip4; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .strips__strip:nth-child(5) .strip__content { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-animation-name: strip5; animation-name: strip5; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } @media screen and (max-width: 768px) { .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%; } /*following rules added to make sure menu is draggable on mobile devices and close button visible*/ .strips .strip__close { top: 5%; right: 3%; } .strips { height: 100vh } } .strips .strip__content { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-decoration: none; } .strips .strip__content>div.color-overlay, .strips .strip__content>div.bg { position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; background-size:cover !important; background-repeat:no-repeat !important; background-position:center center !important; transition:all .5s ease; } .strips .strip__content>div.color-overlay { background-color:rgba(0,0,0, .75); } .strips .strip__content:hover>div.bg { -webkit-transform: scale(1.1); transform: scale(1.1); } .strips .strip__content:hover>div.color-overlay { opacity:0; } .strips .strips__strip.strips__strip--expanded .strip__content:hover>div.color-overlay {opacity:1;} .strips .strips__strip.strips__strip--expanded .strip__content>div.bg { -webkit-transform: scale(1); transform: scale(1); } .strips .strip__inner-text { will-change: transform, opacity; position: absolute; z-index: 5; top: 50%; left: 50%; width: 70%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .strips .strip__inner-text>h2 { display:inline-block; } .strips .strip__inner-text>h2:after { content:''; display: block; height: 2px; height:2px; background-color:currentColor; } .strips .strip__inner-text * { -webkit-transform: translateZ(0); transform: translateZ(0); } .strips__strip--expanded { width: 100%; height: 100%; top: 0 !important; left: 0 !important; z-index: 3; cursor: default; text-align:left; } body.fade-logo-menu-to-top .logo , body.fade-logo-menu-to-top .wedding-planner-nav-trigger { top:-20%; } body.fade-logo-menu-to-top .wedding-planner-btt-container { top:120%; } @media screen and (max-width: 768px) { .strips__strip--expanded { min-height: 100vh; } } .strips__strip--expanded .strip__content:hover:before { -webkit-transform: skew(-30deg) scale(1) translate(0, 0); transform: skew(-30deg) scale(1) translate(0, 0); opacity: 0.05; } .strips__strip--expanded .strip__title { opacity: 0; } .strip__title { display: inline-block; margin: 0; position: relative; z-index: 2; font-size: 3.5vw; color: white; padding:10px 20px; -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .strips .strips__strip:not(.strips__strip--expanded):hover .strip__title { border:1px solid currentColor; } @media screen and (max-width: 768px) { .strip__title { font-size: 28px; } } .strip__close { position: absolute; right: 3vw; top: 3vw; opacity: 0; z-index: 10; -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .strip__close--show { opacity: 1; } @-webkit-keyframes strip1 { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes strip1 { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes strip2 { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes strip2 { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes strip3 { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes strip3 { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes strip4 { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes strip4 { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes strip5 { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes strip5 { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }