D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
realadss
/
www
/
partymaker.in
/
assets
/
front_end
/
css
/
Filename :
styles.css
back
Copy
@charset "UTF-8"; body { font-size: 14.2px; font-family: 'Ubuntu', sans-serif; color: #313131; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Atma', cursive; } h1 { font-size: 36px; font-weight: 600; margin-top: 0; margin-bottom: 5px; line-height: 1.3; } h2 { font-size: 28px; font-weight: 600; margin-top: 0; margin-bottom: 5px; } h3 { font-size: 24px; font-weight: 600; margin-top: 0; margin-bottom: 5px; } h4 { font-size: 20px; font-weight: 600; margin-top: 0; margin-bottom: 5px; } h5 { font-size: 18px; line-height: normal; margin-top: 0; margin-bottom: 5px; } h6 { font-size: 16px; font-weight: 500; line-height: 22px; margin-top: 0; margin-bottom: 5px; } h2.section-heading { color: #ff0000; font-size: 40px; font-weight: 700; } h2.section-heading span { color: #ff0000; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .hidden { opacity: 0; } .visible { opacity: 1 !important; } .text-upper { text-transform: uppercase; } .cover-fix { background-repeat: no-repeat; position: relative; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .cover { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; } .bg-image { background-position: top center; background-repeat: repeat-y; } .section-padding { padding: 50px 0 40px 0; } .section-paddingin { padding: 50px 0 50px 0; } .page-inner { padding: 60px 0 50px 0; } .circle-line { position: absolute; height: 11px; width: 100%; z-index: 100; } .circle-line-top { top: 0; } .circle-line-bottom { bottom: 0; } .circle-line1 { background: url(../images/happykiddo_circle-line1.png) top left repeat; } .circle-line2 { background: url(../images/happykiddo_circle-line2.png) top left repeat; } .circle-line3 { background: url(../images/happykiddo_circle-line3.png) top left repeat; } .white { color: #ffffff; } .white-bg { background-color: #ffffff !important; } .black { color: #313131; } .black-bg { background-color: #313131 !important; } .blue { color: #03b9d7; } .blue-bg { background-color: #ff0000 !important; } .red { color: #ff0000; } .red-bg { background-color: #da2a88 !important; } .yellow { color: #fcc005; } .yellow-bg { background-color: #fcc005 !important; } .orange { color: #f48e40; } .orange-bg { background-color: #f48e40 !important; } .green { color: #96c667; } .green-bg { background-color: #96c667 !important; } .gray { color: #f6f6f6; } .gray2 { color: #7e7e7e; } .gray-bg { background-color: #f6f6f6 !important; } .relative { position: relative; } .absolute { position: absolute; } .marginb-3 { margin-bottom: 3px; } .marginb-5 { margin-bottom: 5px; } .marginb-10 { margin-bottom: 10px; } .marginb-15 { margin-bottom: 15px; } .marginb-20 { margin-bottom: 20px; } .marginb-30 { margin-bottom: 30px; } .marginb-40 { margin-bottom: 40px; } .marginb-50 { margin-bottom: 50px; } .marginb-60 { margin-bottom: 60px; } .marginb-70 { margin-bottom: 70px; } .marginb-80 { margin-bottom: 80px; } .margint-5 { margin-top: 5px; } .margint-10 { margin-top: 10px; } .margint-15 { margin-top: 15px; } .margint-20 { margin-top: 20px; } .margint-30 { margin-top: 30px; } .margint-40 { margin-top: 40px; } .margint-50 { margin-top: 50px; } .margint-60 { margin-top: 60px; } .margint-70 { margin-top: 70px; } .margint-80 { margin-top: 80px; } .paddingb-0 { padding-bottom: 0px; } .paddingb-5 { padding-bottom: 5px; } .paddingb-10 { padding-bottom: 10px; } .paddingb-15 { padding-bottom: 15px; } .paddingb-20 { padding-bottom: 20px; } .paddingb-30 { padding-bottom: 30px; } .paddingb-40 { padding-bottom: 40px; } .paddingb-50 { padding-bottom: 50px; } .paddingb-60 { padding-bottom: 60px; } .paddingb-70 { padding-bottom: 70px; } .paddingb-80 { padding-bottom: 80px; } .paddingb-90 { padding-bottom: 90px; } .paddingb-100 { padding-bottom: 100px; } .paddingb-190 { padding-bottom: 190px; } .paddingt-0 { padding-top: 0px; } .paddingt-5 { padding-top: 5px; } .paddingt-10 { padding-top: 10px; } .paddingt-15 { padding-top: 15px; } .paddingt-20 { padding-top: 20px; } .paddingt-30 { padding-top: 30px; } .paddingt-40 { padding-top: 40px; } .paddingt-50 { padding-top: 50px; } .paddingt-60 { padding-top: 60px; } .paddingt-70 { padding-top: 70px; } .paddingt-80 { padding-top: 80px; } .paddingt-90 { padding-top: 90px; } .paddingt-100 { padding-top: 100px; } .paddingt-190 { padding-top: 190px; } .scroll-time1 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .scroll-time2 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .scroll-time3 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .scroll-time4 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .scroll-time5 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .scroll-time6 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .scroll-time7 { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .scroll-time8 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .scroll-time9 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .scroll-time10 { -webkit-animation-delay: 1s; animation-delay: 1s; } .scroll-tim11 { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } @media (max-width:980px) { .scroll-time1 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .scroll-time2 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .scroll-time3 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .scroll-time4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .scroll-time5 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .scroll-time6 { -webkit-animation-delay: 0.1s; animation-delay: 01s; } .scroll-time7 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .scroll-time8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .scroll-time9 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .scroll-time10 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .scroll-tim11 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } } .back-to-top { background: #ffffff; border: 1px solid #f1f1f1; padding: 2px; display: inline-block; position: fixed; bottom: 15px; right: 15px; visibility: hidden; z-index: 1000; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; opacity: 0; filter: alpha(opacity=0); -webkit-border-radius: 5px; border-radius: 50%; width: 44px; height: 44px; } .back-to-top i { font-size: 17px; padding: 9px 10px; background-color: #da2a88; color: #ffffff; border-radius: 50%; width: 38px; height: 38px; } .back-to-top:hover { text-decoration: none; } .back-to-top:hover i { background-color: #03b9d7; } .back-to-top:active { text-decoration: none; } .back-to-top:link { text-decoration: none; } .back-to-top:visited { text-decoration: none; } .btt-visible { visibility: visible; opacity: .8; filter: alpha(opacity=80); } .fade-btt { opacity: 1; filter: alpha(opacity=60); } .fade-btt:hover { opacity: 1; filter: alpha(opacity=100); } .btn-box { margin-top: 20px; } .transparent-btn { color: #ffffff; text-shadow: none; font-weight: 600; background-color: transparent; font-size: 15px; border: 2px solid #ffffff; border-radius: 3px; padding: 10px 25px 9px 25px; margin: 0 3px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; text-transform: uppercase; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .transparent-btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .transparent-btn:hover, .transparent-btn:focus, .transparent-btn:active { color: #313131; text-decoration: none; } .transparent-btn:hover:before, .transparent-btn:focus:before, .transparent-btn:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .filled-btn { color: #313131; text-shadow: none; font-weight: 600; background-color: #ffffff; font-size: 15px; border: 2px solid #ffffff; border-radius: 3px; padding: 10px 25px 9px 25px; margin: 0 3px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; text-transform: uppercase; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .filled-btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #313131; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .filled-btn:hover, .filled-btn:focus, .filled-btn:active { color: #ffffff; text-decoration: none; } .filled-btn:hover:before, .filled-btn:focus:before, .filled-btn:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .widget-btn { color: #ffffff; font-weight: 600; background-color: #da2a88; font-size: 12px; border: 2px solid #da2a88; border-radius: 3px; padding: 7px 20px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .widget-btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .widget-btn:hover, .widget-btn:focus, .widget-btn:active { color: #da2a88; text-decoration: none; } .widget-btn:hover:before, .widget-btn:focus:before, .widget-btn:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } ul.social-links { padding-top: 10px; padding-left: 20px; margin: 0; padding-left: 0; } ul.social-links li { display: inline; font-size: 17px; padding: 0; } ul.social-links li a { width: 32px; height: 33px; display: inline-block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } ul.social-links li a.facebook { background: url(../images/happykiddo_social-links.png) -10px -7px no-repeat; } ul.social-links li a.facebook:hover { background: url(../images/happykiddo_social-links.png) -10px -45px no-repeat; } ul.social-links li a.twitter { background: url(../images/happykiddo_social-links.png) -49px -7px no-repeat; } ul.social-links li a.twitter:hover { background: url(../images/happykiddo_social-links.png) -49px -45px no-repeat; } ul.social-links li a.googleplus { background: url(../images/happykiddo_social-links.png) -88px -7px no-repeat; } ul.social-links li a.googleplus:hover { background: url(../images/happykiddo_social-links.png) -88px -46px no-repeat; } ul.social-links li a.instagram { background: url(../images/happykiddo_social-links.png) -88px -162px no-repeat; } ul.social-links li a.instagram:hover { background: url(../images/happykiddo_social-links.png) -88px -202px no-repeat; } ul.social-links li a.youtube { background: url(../images/happykiddo_social-links.png) -204px -162px no-repeat; } ul.social-links li a.youtube:hover { background: url(../images/happykiddo_social-links.png) -204px -202px no-repeat; } ul.social-links li a.linkedin { background: url(../images/happykiddo_social-links.png) -166px -162px no-repeat; } ul.social-links li a.linkedin:hover { background: url(../images/happykiddo_social-links.png) -166px -202px no-repeat; } @media only screen and (min-width:768px) { .cta2 .row-height, .row-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-height { display: table-cell; vertical-align: middle; float: none; height: 100%; } } .header-box-inner { color: #ffffff; } .header-box-inner .container { height: 100%; padding: 100px 18px; } .header-box-inner h2 { font-size: 36px; line-height: 50px; font-family: 'Ubuntu', sans-serif; color: #ffffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35); } .header-box-inner h2 span { font-family: 'Atma', cursive; } .header-box-inner p { margin-top: 7px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35); } .header-box-inner .circle-icon-box { width: 115px; height: 115px; border-radius: 50%; background-color: #ffffff; position: absolute; left: 0; right: 0; bottom: -55px; margin: 0 auto; text-align: center; padding-top: 22px; z-index: 999; } .page-title-box { background-color: #da2a88; color: #ffffff; } .page-title-box .container { height: 100%; padding: 30px 0; } .page-title-box h2 { font-size: 28px; text-transform: uppercase; font-family: 'Ubuntu', sans-serif; color: #ffffff; margin-left: 15px; text-shadow: 1px 1px 2px #969696; } .page-title-box h2 span { font-family: 'Atma', cursive; } .small-header-box { margin-bottom: 35px; } .slider-home .carousel-inner { height: 80%; } .carousel-inner .fade-carousel { position: relative; } .fade-carousel .carousel-inner .item { height: 100%; } .fade-carousel .carousel-indicators>li { margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; width: 12px; height: 12px; } .fade-carousel .carousel-indicators>li.active { opacity: 1; } .hero-container { height: 100%; position: relative; } .slide-1 { -webkit-animation: lines-moved 20s linear infinite; } .slide-1 .hero { position: absolute; top: 50%; left: 0; z-index: 3; color: #fff; text-align: left; font-size: 14px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75); -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .slide-2 .hero { position: absolute; top: 30%; left: 0; z-index: 3; color: #fff; text-align: left; z-index: 1000; font-size: 14px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75); -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .slide-3 .hero { position: absolute; top: 35%; left: 0; z-index: 3; color: #fff; text-align: left; font-size: 14px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75); -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .slide-3 .hero .hgroup, .slide-3 .hero .btn-box { padding: 0 0 0 15px; } .slide-3 .hero .filled-btn, .slide-3 .hero .transparent-btn:hover { color: #da2a88; } .slide-3 .hero .filled-btn:hover { color: #ffffff; } .slide-3 .hero .filled-btn:before { background-color: #da2a88; } .slide-2 .hero2 { position: absolute; top: 35%; right: 0; z-index: 3; color: #fff; text-align: left; z-index: 1000; font-size: 20px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75); -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .slide-2 .hero2 p { margin: 0; } .slide-2 .hero2 p.phone { font-size: 48px; font-family: 'Atma', cursive; line-height: 50px; margin-top: 20px; } .slide-2 .hero2 .hgroup { border-left: 1px solid #ffffff; padding: 10px 10px 10px 20px; } .hero h1 { font-family: 'Ubuntu', sans-serif; font-size: 40px; } .hero h1 span { font-family: 'Atma', cursive; } @media (max-width:767px) { .hero h1 { font-size: 34px; line-height: 36px; } .slide-2 .hero2 { display: none; } .slide-3 .hero { top: 45%; } .slide-2 .hero { top: 40%; } } .slide-1 .hero .filled-btn { text-shadow: none; color: #352000; } .slide-1 .hero .filled-btn:before { background-color: #352000; } .slide-1 .hero .filled-btn:hover { color: #fff; } .slide-1 .circle-line { bottom: 0; top: inherit; } .fade-carousel .carousel-inner .item .hero .slide-2 .hero, .fade-carousel .carousel-inner .item .hero .slide-3 .hero, .fade-carousel .carousel-inner .item .hero .slide-4 .hero, .fade-carousel .carousel-inner .item .hero .slide-5 .hero { opacity: 0; -webkit-transition: 2s all ease-in-out 0.1s; -moz-transition: 2s all ease-in-out 0.1s; -ms-transition: 2s all ease-in-out 0.1s; -o-transition: 2s all ease-in-out 0.1s; transition: 2s all ease-in-out 0.1s; } .fade-carousel .carousel-inner .item.active .hero .slide-2 .hero, .fade-carousel .carousel-inner .item.active .hero .slide-3 .hero, .fade-carousel .carousel-inner .item.active .hero .slide-4 .hero, .fade-carousel .carousel-inner .item.active .hero .slide-5 .hero { opacity: 1; -webkit-transition: 2s all ease-in-out 0.1s; -moz-transition: 2s all ease-in-out 0.1s; -ms-transition: 2s all ease-in-out 0.1s; -o-transition: 2s all ease-in-out 0.1s; transition: 2s all ease-in-out 0.1s; } .btn.btn-lg { padding: 10px 40px; } .btn.btn-hero, .btn.btn-hero:hover, .btn.btn-hero:focus { color: #f5f5f5; background-color: #1abc9c; border-color: #1abc9c; outline: none; margin: 20px auto; } .fade-carousel .slides .absolute { position: absolute; } .fade-carousel .slides .red-p { display: block; bottom: 0; left: 0; } .fade-carousel .slides .blue-p { display: block; top: 0; left: 30%; } .fade-carousel .slides .green-p { display: block; top: 0; left: 0; } .fade-carousel .slides .clown { display: block; bottom: 30px; left: 38%; z-index: 10; } .fade-carousel .slides .btn-cloud { display: block; bottom: 25px; left: 25%; z-index: 1; } .fade-carousel .slides .bottom-clouds { display: block; bottom: 0; left: 0; z-index: 100; } .fade-carousel .slides .blue-lines { bottom: 0; left: 0; z-index: 100; height: 82px; width: 6666px; background: url(../images/happykiddo_slider_img3_p1.png) repeat-x 0% 0%; -webkit-animation-name: lines-moved; -webkit-animation-duration: 22s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; } .fade-carousel .slides .boat1 { left: 40px; bottom: 45px; -webkit-animation: rock-boat 3s ease-in-out infinite; } .fade-carousel .slides .boat1:after { -webkit-animation: steam 4s 2s infinite; content: ""; display: block; width: 70px; height: 70px; background-size: 70px; position: absolute; top: -65px; left: -20px; opacity: 0; } .fade-carousel .slides .boat2 { left: 340px; bottom: 45px; -webkit-animation: rock-boat 3s ease-in-out infinite; } .fade-carousel .slides .animator { right: 0; bottom: 15px; } @-webkit-keyframes rock-boat { 50% { -webkit-transform: rotate(-5deg) translateY(-10px); } } @-webkit-keyframes steam { 40%, 60% { opacity: .8; } 100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); } } @-webkit-keyframes lines-moved { from { left: 0; } to { left: -2000px; } } @-webkit-keyframes mike-move { 100% { left: 12%; } } @-webkit-keyframes mike-float { 50% { -webkit-transform: rotateZ(5deg) translateY(-5px); } } .fade-carousel .slides .slide-1, .fade-carousel .slides .slide-2 { background-size: cover; background-position: center center; background-repeat: no-repeat; height: 100%; } .fade-carousel .slides .slide-3 { background-size: cover; background-position: top center; background-repeat: no-repeat; height: 100%; } .our_entertaiment { padding: 0; } .steps-section { padding-bottom: 0; } #wrapper-inner .inner-heading { margin-bottom: 0px; font-size: 30px; margin-top: 10px; } .team-btn .transparent-btn { color: #da2a88; border: 2px solid #da2a88; } .team-btn .transparent-btn:before { background: #da2a88; } .team-btn .transparent-btn:hover, .team-btn .transparent-btn:focus, .team-btn .transparent-btn:active { color: #ffffff; } .team-btn .filled-btn { background-color: #da2a88; border: 2px solid #da2a88; color: #ffffff; } .team-btn .filled-btn:before { background-color: #ffffff; } .team-btn .filled-btn:hover, .team-btn .filled-btn:focus, .team-btn .filled-btn:active { color: #da2a88; } .career-section .article-body { padding-left: 25px; padding-right: 25px; } .career-section .article-body a { color: #ffffff; background-color: #da2a88; border: 2px solid #da2a88; margin: 10px auto; text-transform: inherit; font-size: 12px; } .career-section .article-body a:before { background: #ffffff; } .career-section .article-body a:hover, .career-section .article-body a:focus, .career-section .article-body a:active { color: #da2a88; } .video-section { position: relative; } .contact-page .anchor { margin-top: -110px; padding-bottom: 110px; display: block; z-index: 1000; } .contact-page .contact-fixed-menu { position: fixed; right: 0; top: 230px; z-index: 1000; } .contact-page .contact-fixed-menu ul { padding: 0; margin: 0; } .contact-page .contact-fixed-menu ul li { background-color: #da2a88; display: block; margin-bottom: 1px; padding: 10px 10px; position: relative; right: -120px; width: 180px; height: 55px; overflow: hidden; } .contact-page .contact-fixed-menu ul li:first-child { background-color: #03b9d7; } .contact-page .contact-fixed-menu ul li:last-child { background-color: #96c667; } .contact-page .contact-fixed-menu ul li a { color: #fff; font-size: 12px; padding: 3px 0 3px 10px; width: 100%; display: block; } .contact-page .contact-fixed-menu ul li a:hover { text-decoration: none; } .contact-page .contact-fixed-menu ul li a i { top: 2px; position: relative; } .contact-page .contact-fixed-menu ul li a .fa-map-marker { font-size: 26px; width: 20px; left: 2px; margin-right: 18px; } .contact-page .contact-fixed-menu ul li a .fa-phone { font-size: 26px; width: 23px; margin-right: 14px; } .contact-page .contact-fixed-menu ul li a .fa-pencil-square-o { font-size: 26px; width: 28px; left: -2px; margin-right: 12px; } .contact-page .contact-fixed-menu ul li a span { font-size: 13px; position: relative; top: -2px; font-weight: 600; } .contact-page .contact-fixed-menu ul li:hover { background-color: #313131; transition: all 0.8s ease; right: 0; } .contact-page .map-section { position: relative; } .contact-page .map-section iframe { width: 100%; border: 0; } @media (min-width:1201px) { .contact-page .contacts-info .circle { height: 240px; width: 240px; } .contact-page .contacts-info .circle .circle-inner { height: 220px; width: 220px; } .contact-page .contacts-info .circle .circle-inner div { width: 220px; } } @media (min-width:992px) and (max-width:1200px) { .contact-page .contacts-info .circle { height: 220px; width: 220px; } .contact-page .contacts-info .circle .circle-inner { height: 200px; width: 200px; } .contact-page .contacts-info .circle .circle-inner div { width: 200px; } } @media (min-width:768px) and (max-width:991px) { .contact-page .col-blog-layout2 { width: 49.7777%; } } @media (max-width:991px) { .contact-page .contacts-info .circle { height: 240px; width: 240px; margin-bottom: 20px !important; } .contact-page .contacts-info .circle .circle-inner { height: 220px; width: 220px; } .contact-page .contacts-info .circle .circle-inner div { width: 220px; } } .contact-page .contacts-info { position: relative; } .contact-page .contacts-info .circle { border-radius: 50%; color: #313131; border: 1px solid #f1f1f1; margin: 0 auto; position: relative; overflow: hidden; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; padding: 10px; } .contact-page .contacts-info .circle .circle-inner { border-radius: 50%; margin: 0 auto; background-color: #f1f1f1; } .contact-page .contacts-info .circle .circle-inner div { font-size: 13px; line-height: 16px; padding: 0 15px; font-weight: 600; position: relative; top: 50%; transform: translateY(-50%); } .contact-page .contacts-info .circle .circle-inner div img { margin-bottom: 10px; } .contact-page .contact-info_form { position: relative; background-color: #322c2c; color: #ffffff; } .contact-page .contact-info_form h2 { color: #ffffff; } .contact-form { overflow: hidden; } .contact-form label { font-size: 12px; } .contact-form input, .contact-form textarea { background-color: #322c2c; border-color: #504b4b; color: #f6f6f6; } .contact-form input:focus, .contact-form textarea:focus { border-color: #504b4b; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0px 6px rgba(243, 66, 53, 0.6); outline: 0 none; } .contact-form button { color: #ffffff; font-weight: 600; background-color: #da2a88; font-size: 13px; border: 2px solid #da2a88; border-radius: 3px; padding: 7px 25px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; margin: 10px auto; display: block; z-index: 10; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .contact-form button:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #322c2c; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .contact-form button:hover, .contact-form button:focus, .contact-form button:active { color: #da2a88; text-decoration: none; background-color: #da2a88; border-color: #da2a88; } .contact-form button:hover:before, .contact-form button:focus:before, .contact-form button:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .portfolio-masonry.gallery .grid-item { padding: 0px 5px 10px 5px; } figure { float: left; width: 100%; position: relative; } figure img { width: 100%; height: auto; } figure:hover .overlay { opacity: 1; visibility: visible; } figure:hover .overlay-background { opacity: .8; visibility: visible; } figure .overlay-background { z-index: 1; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; width: 100%; height: 100%; } figure .overlay-background .inner { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: 7px; background-color: #c8e9c8; background-color: rgba(0, 0, 0, 0.5); } figure .overlay { z-index: 2; transition: all 0.2s ease-in-out; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; width: 100%; height: 100%; } figure .inner-overlay { display: table; width: 100%; height: 100%; } figure .inner-overlay-content { display: table-cell; vertical-align: middle; width: 100%; padding: 20px 40px; } figure .inner-overlay-content.with-icons { text-align: center; } figure .inner-overlay-content.with-icons a i { border-radius: 50%; background-color: #da2a88; color: #ffffff; padding: 13px; margin: 0 5px; display: inline-block; font-size: 16px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } figure .inner-overlay-content.with-icons a:hover i { background-color: #ffffff; color: #da2a88; } .isotopeSelector img { -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } .isotopeSelector:hover img { -moz-transform: scale(1.5) rotate(2deg); -webkit-transform: scale(1.5) rotate(2deg); -o-transform: scale(1.5) rotate(2deg); -ms-transform: scale(1.5) rotate(2deg); transform: scale(1.5) rotate(2deg); -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -ms-transition: all .8s ease; -o-transition: all .8s ease; transition: all 0.8s ease; } .isotopeSelector figure { overflow: hidden; } .isotopeSelector figure { box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); } .advantages { background-color: #ffffff; } .advantages article { background: #f6f6f6 url(../images/happykiddo_advantages-bg.png) top right repeat-y; padding: 30px 20px; vertical-align: top; } .advantages .article .article-body { margin-top: 18px; } .advantages .article .article-body p { font-size: 13px; line-height: 16px; margin: 5px 0; } .advantages .article .article-body h3 { font-size: 18px; color: #313131; font-weight: 600; } .advantages .article.article-first .article-body h3 { color: #ffffff; font-weight: 600; } .advantages .article.article-first { background: #da2a88 url(../images/happykiddo_advantages-bg.png) top right repeat-y; color: #ffffff; } .advantages .article.article-first p { font-size: 13px; margin: 5px 0; } .advantages .article.article-first .article-first-icon { color: #fff; display: inline-block; font-size: 24px; padding: 10px 11px; margin-bottom: 10px; } .advantages .article-icon i { box-shadow: 0 0 0 2px #fff; -webkit-transition: color .3s; -moz-transition: color .3s; transition: color .3s; color: #fff; display: inline-block; font-size: 0; cursor: pointer; width: 60px; height: 60px; border-radius: 50%; text-align: center; position: relative; z-index: 1; } .advantages .article:hover .article-icon i:after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .advantages .article-icon i:after { top: -2px; left: -2px; padding: 2px; z-index: -1; background: #fff; pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-transition: -webkit-transform 0.2s, opacity 0.3s; -moz-transition: -moz-transform 0.2s, opacity 0.3s; transition: transform .2s, opacity .3s; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); opacity: 0; } .advantages .article-icon i:before { speak: none; font-size: 28px; position: relative; top: 17px; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } .advantages .who-we-are-img { position: absolute; right: 0; left: 0; z-index: 100; } .section.advantages { padding-top: 0; } .features { overflow: hidden; } .features:hover .features-img img { -webkit-animation-name: hvr-bob-float, hvr-bob; animation-name: hvr-bob-float, hvr-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } .features .col-features { background-color: #5e3f2f; color: #ffffff; padding: 70px 30px 60px 30px; } .features .col-features .desription { font-size: 13px; } .features .col-features .features-info-section { margin-top: 30px; } .features .col-features .features-info-section .features-info { margin-top: 20px; } .features .col-features .features-info-section .features-info:last-child { margin-bottom: 0; } .features .col-features .features-info-section .features-img { float: left; margin-right: 20px; position: relative; text-align: center; } .features .col-features .features-info-section .features-img img { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .features .col-features .features-info-section h3 { margin-bottom: 0; font-size: 22px; } .features2 .article-icon { margin-bottom: 10px; } .features2 .article-icon .icon { display: inline-block; width: 75px; height: 75px; border-radius: 50%; text-align: center; position: relative; z-index: 0; border: 1px solid #f1f1f1; color: #ffffff; } .features2 .article-icon .icon i { -webkit-transition: color .3s; -moz-transition: color .3s; transition: color .3s; display: inline-block; cursor: pointer; width: 65px; height: 65px; border-radius: 50%; text-align: center; position: relative; z-index: 1; top: 4px; } .features2 .article-icon .icon i:before { speak: none; font-size: 28px; position: relative; top: 19px; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } .features2 .article-icon .icon i:after { top: 0px; left: 0px; z-index: -1; background: #da2a88; pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-transition: -webkit-transform 0.2s, opacity 0.3s; -moz-transition: -moz-transform 0.2s, opacity 0.3s; transition: transform .2s, opacity .3s; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); opacity: 0; } .features2 .article-icon .icon i:hover { color: #ffffff; } .features2 .article-icon .icon i:hover:after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .features2 .article-icon .img-icon { display: inline-block; width: 75px; height: 75px; border-radius: 50%; text-align: center; position: relative; z-index: 0; border: 1px solid #f1f1f1; color: #ffffff; } .features2 .article-icon .img-icon .img-icon-circle { -webkit-transition: color .3s; -moz-transition: color .3s; transition: color .3s; display: inline-block; cursor: pointer; width: 65px; height: 65px; border-radius: 50%; text-align: center; position: relative; z-index: 1; top: 4px; } .features2 .article-icon .img-icon .img-icon-circle img { position: relative; top: 13px; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } .features2 .article-icon .img-icon .img-icon-circle:after { top: 0px; left: 0px; z-index: -1; background: #da2a88; pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-transition: -webkit-transform 0.2s, opacity 0.3s; -moz-transition: -moz-transform 0.2s, opacity 0.3s; transition: transform .2s, opacity .3s; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); opacity: 0; } .features2 .article-icon .img-icon .img-icon-circle:hover { color: #ffffff; } .features2 .article-icon .img-icon .img-icon-circle:hover:after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .features2 .article-body h3 { font-size: 18px; color: #313131; font-weight: 600; } .features2 .article-body p { font-size: 13px; margin: 5px 0; line-height: 16px; margin-top: 0; } .pie-chart-section .pie-chart-amount { display: inline-block; width: 120px; height: 120px; margin: 0 10px; vertical-align: top; position: relative; font-size: 28px; font-weight: 600; font-family: 'Atma', cursive; padding-top: 44px; } .pie-chart-section .pie-chart-title { margin-top: 15px; } .pie-chart-section .pie-chart-title h2 { font-family: 'Ubuntu', sans-serif; font-size: 14px; text-transform: uppercase; } .pie-chart-section canvas { position: absolute; left: 0; top: 0; } .panel-group .panel { box-shadow: none; border: 0; } .panel-default>.panel-heading { padding: 0; border-radius: 0; background-color: #f6f6f6; border-radius: 5px; } .panel-title { font-size: 12px; font-family: 'Ubuntu', sans-serif; } .panel-title:hover { color: #da2a88; } .panel-title>a { display: block; padding: 5px 20px; text-decoration: none; } .more-less { float: right; color: #212121; } .panel-default>.panel-heading+.panel-collapse>.panel-body { border: 0; font-size: 12px; padding: 10px 20px; line-height: 16px; } .history .history-arrow { position: absolute; top: -80px; } .history .carousel { margin-bottom: 0; padding: 0 60px 0 60px; } .history .carousel .carousel-control { background: transparent; text-shadow: none; color: #dcdde0; font-size: 26px; height: 30px; width: 30px; margin-top: 156px; opacity: 1; } .history .carousel .carousel-control:hover { color: #da2a88; } .history .carousel .carousel-control.right { right: 0; } .history .carousel .carousel-control.left { left: 0; } .history .carousel .carousel-indicators { right: 50%; top: auto; bottom: -10px; margin-right: -19px; } .history .col-history { padding: 0; } .history .col-history:hover .history-header .circle:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .history .col-history:hover .info h3 { color: #da2a88; } .history .col-history .history-header .circle { height: 150px; width: 150px; border-radius: 50%; color: #ffffff; margin: 0 auto; position: relative; overflow: hidden; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .history .col-history .history-header .circle:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #da2a88; height: 150px; width: 150px; border-radius: 50%; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .history .col-history .history-header .circle div { width: 150px; font-size: 13px; line-height: 16px; padding: 0 15px; text-transform: uppercase; font-weight: 600; position: relative; top: 50%; transform: translateY(-50%); } .history .col-history .line { background-color: #dcdde0; height: 1px; position: relative; margin: 20px 0 20px 0; } .history .col-history .line i { color: #dcdde0; position: absolute; left: 0; right: 0; top: -4px; font-size: 11px; } .history .col-history .info { height: 150px; overflow: hidden; } .history .col-history .info div { position: relative; top: 50%; transform: translateY(-50%); } .history .col-history .info h3 { font-size: 20px; margin: 0 0 4px 0; } .history .col-history .info p { font-size: 13px; margin: 0; } @-webkit-keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } .counter-section { padding: 80px 0 40px 0; } .counter-section2 .counters .statsbar .stat-number, .counter-section2 .counters .statsbar .stat-symbol-before, .counter-section2 .counters .statsbar .stat-symbol-after { font-size: 38px; line-height: 1.1; } .counter-section2 .counters { padding: 30px 0 15px 0; } .counters { border: 1px solid #f1f1f1; border-radius: 5px; padding: 35px 0 25px 0; } .counters .statsbar .stat-number, .counters .statsbar .stat-symbol-before, .counters .statsbar .stat-symbol-after { display: inline-block; font-size: 38px; font-weight: 600; font-family: 'Atma', cursive; } .counters .statsbar .stat-title { padding: 0 20px; position: relative; bottom: 10px; } .counters .statsbar .stat-title h3 { font-size: 14px; font-weight: 600; margin-bottom: 5px; font-family: 'Ubuntu', sans-serif; text-transform: uppercase; line-height: 18px; margin-top: 12px; } .counters .statsbar .stat-title p { margin: 0; font-size: 13px; } .counters .statsbar .stat-symbol-before { margin-right: 1px; } .counters .statsbar .stat-symbol-after { margin-left: 1px; } .our_parties-section2 { padding: 40px 0 20px 0; position: relative; background: #f6f6f6 url(../images/bg1.png) top left repeat; } .our_parties-section { padding: 0 0 10px 0; position: relative; } .our_parties-section .our_parties-heading { background: #f6f6f6 url(../images/happykiddo_300x300.jpg) top left repeat; padding: 80px 0 0 0; } .our_parties-section ul { margin-top: 40px; } .our_parties-section ul li { float: none; display: inline-block; } .our_parties-section ul li a { font-family: 'Atma', cursive; color: #ffffff; font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 13px 25px !important; border-radius: 4px 4px 0 0; background-color: #da2a88; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color; } .our_parties-section ul li a:hover { background-color: #ffffff; } .our_parties-section .tab-content { padding: 40px 0 0 0; } .services { text-align: center; } .services .row.blue-bg .transparent-btn:hover, .services .row.blue-bg .transparent-btn:active, .services .row.blue-bg .transparent-btn:focus { color: #03b9d7; } .services .row.orange-bg .transparent-btn:hover, .services .row.orange-bg .transparent-btn:active, .services .row.orange-bg .transparent-btn:focus { color: #f48e40; } .services .row.yellow-bg .transparent-btn:hover, .services .row.yellow-bg .transparent-btn:active, .services .row.yellow-bg .transparent-btn:focus { color: #fcc005; } .services .row.red-bg .transparent-btn:hover, .services .row.red-bg .transparent-btn:active, .services .row.red-bg .transparent-btn:focus { color: #da2a88; } .services .row.green-bg .transparent-btn:hover, .services .row.green-bg .transparent-btn:active, .services .row.green-bg .transparent-btn:focus { color: #96c667; } .services .row:hover { box-shadow: 0 0 12px rgba(0, 0, 0, 0.28); } .services .col-service { margin-bottom: 30px; } .services .service-img .mask { opacity: 0; overflow: visible; border: 0px solid rgba(0, 0, 0, 0.7); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; padding: 7px; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; transition: all 0.35s ease-in; } .services .service-img .mask a { color: #ffffff; } .services .service-img .mask a:hover { text-decoration: none; } .services .service-img .mask .mask-btn { position: relative; height: 100%; vertical-align: middle; background-color: rgba(0, 0, 0, 0.5); z-index: 101; } .services .service-img .mask .mask-btn i { border-radius: 50%; background-color: #da2a88; color: #ffffff; padding: 10px; margin-top: 35%; margin-bottom: 5px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.5); transform: scale(1.5); } .services .service-img .mask .mask-btn span { display: block; font-size: 12px; } .services .service-img:hover .mask { opacity: 1; } .services .service-img:hover .mask .mask-btn i { -webkit-transform: scale(1); transform: scale(1); } .services .service-img:hover .mask .mask-btn i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .services .service-info { padding: 30px 20px; color: #ffffff; } .services .service-info img { margin-bottom: 20px; } .services .service-info h2 { font-size: 26px; font-weight: 500; color: #ffffff; } .services .service-info h2 span { font-weight: 600; } .services .service-info p { font-size: 13px; margin-top: 0; } .services .service-info a.happykiddo-btn { font-size: 10px; } .services2 { padding-top: 0; } @media screen and (max-width:767px) { .services .col-service .service-img { height: 200px; } } .team1 { margin-top: 40px; } .team1 .col-team { margin-bottom: 25px; } .team1 .team-img-border { border: 1px solid #f1f1f1; border-radius: 5px; padding: 7px; overflow: hidden; } .team1 .team-img-border .team-img { position: relative; } .team1 .team-img-border .team-img .btn-baloon { position: absolute; bottom: -6px; right: 10px; z-index: 1000; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .team1 .team-img-border .team-img:hover .btn-baloon { -webkit-animation-name: hvr-bob-float, hvr-bob; animation-name: hvr-bob-float, hvr-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } .team1 .team-img-border .team-img .mask { opacity: 0; overflow: visible; border: 0px solid rgba(0, 0, 0, 0.7); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; transition: all 0.35s ease-in; } .team1 .team-img-border .team-img .mask a { color: #ffffff; } .team1 .team-img-border .team-img .mask a:hover { text-decoration: none; } .team1 .team-img-border .team-img .mask .socials { opacity: 0; position: absolute; top: 5px; left: 15px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-backface-visibility: hidden; } .team1 .team-img-border .team-img .mask .socials li { display: block; list-style-type: none; } .team1 .team-img-border .team-img .mask .mask-btn { position: relative; height: 100%; vertical-align: middle; background-color: rgba(0, 0, 0, 0.5); z-index: 101; text-align: center; } .team1 .team-img-border .team-img:hover .mask { opacity: 1; } .team1 .team-img-border .team-img:hover .mask .socials { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .team1 .team-info { padding-top: 8px; } .team1 .team-info h3 { font-family: 'Ubuntu', sans-serif; font-size: 16px; margin: 0; } .team1 .team-info h3 a { color: #313131; } .team1 .team-info div.position { font-size: 15px; } .team1 .team-info p { font-size: 12px; margin-top: 5px; } .team1 .team-info ul.social-links { padding-top: 0px; } @-webkit-keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @-webkit-keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } .team2 .col-team { float: none; display: inline-block; vertical-align: top; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; margin-bottom: 30px; } @media (min-width:1201px) { .team2 .col-team { width: 23.777%; } } @media (min-width:992px) and (max-width:1200px) { .team2 .col-team { width: 33%; } } @media (min-width:768px) and (max-width:991px) { .team2 .col-team { width: 49.7%; } } @media (max-width:767px) { .team2 .col-team { width: 100%; } } .team2 .blog-layout6.sticky-post .blog-layout6-img .blog-layout6-img_box .mask-wrap { box-shadow: 0 0 0 15px rgba(243, 66, 53, 0.3), inset 0 0 3px rgba(243, 66, 53, 0.3); } .team2 .team2-circle .team2-img { width: 220px; height: 220px; margin: 0 auto; } .team2 .team2-circle .team2-img .team2-border { border: 1px solid #f1f1f1; padding: 7px; border-radius: 50%; width: 100%; height: 100%; } .team2 .team2-circle .team2-img .team2-img_box { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: pointer; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .team2 .team2-circle .team2-img .team2-img_box:hover { box-shadow: inset 0 0 0 110px rgba(250, 250, 250, 0.85), 0 1px 2px rgba(0, 0, 0, 0.1); } .team2 .team2-circle .team2-img .team2-img_box:hover .mask { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .team2 .team2-circle .team2-img .team2-img_box .mask { position: absolute; width: 100%; height: 100%; border-radius: 50%; opacity: 0; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-backface-visibility: hidden; } .team2 .team2-circle .team2-img .team2-img_box .mask h3 { font-family: 'Ubuntu', sans-serif; font-size: 16px; margin: 0; text-transform: uppercase; margin-top: 30%; } .team2 .team2-circle .team2-img .team2-img_box .mask a { width: 100%; height: 100%; display: block; position: absolute; } .team2 .team2-circle .team2-img .team2-img_box .mask div.position { font-weight: 600; font-size: 15px; } .team2 .team2-circle .team2-img .team2-img_box .mask i { border-radius: 50%; background-color: #da2a88; color: #ffffff; padding: 10px; margin-top: 10px; font-size: 15px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.5); transform: scale(1.5); } .team2 .team2-circle .team2-img .team2-img_box:hover .mask { opacity: 1; } .team2 .team2-circle .team2-img .team2-img_box:hover .mask .mask-btn { width: 100%; height: 100%; } .team2 .team2-circle .team2-img .team2-img_box:hover .mask .mask-btn i { -webkit-transform: scale(1); transform: scale(1); } .team2 .team2-circle .team2-img .team2-img_box:hover .mask .mask-btn i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } @-webkit-keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @-webkit-keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } .testimonials-section .col-testimonials1 { float: none; display: inline-block; vertical-align: top; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .testimonials-section .col-testimonials1:nth-child(odd) .testimonials1 .tesimonials1-foot { background-color: #96c667; } @media (min-width:1201px) { .testimonials-section .col-testimonials1 { width: 32.14%; } } @media (min-width:992px) and (max-width:1200px) { .testimonials-section .col-testimonials1 { width: 33.11111%; } } @media (min-width:768px) and (max-width:991px) { .testimonials-section .col-testimonials1 { width: 49.7777%; } } @media (max-width:767px) { .testimonials-section .col-testimonials1 { width: 100%; } } .testimonials1 { border: 1px solid #f1f1f1; -webkit-border-top-left-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-bottomright: 30px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; overflow: hidden; margin-bottom: 35px; } .testimonials1 .tesimonials1-head { font-family: 'Atma', cursive; font-size: 15px; padding: 20px; background-color: #ffffff; } .testimonials1 .tesimonials1-head p { margin: 0; } .testimonials1 .tesimonials1-head img { float: right; margin: 0 0 10px 10px; } .testimonials1 .tesimonials1-foot { background-color: #da2a88; color: #ffffff; padding: 5px 20px; display: inline-block; width: 100%; position: relative; } .testimonials1 .tesimonials1-foot:after { position: absolute; top: 0; left: 95px; content: ''; width: 0px; height: 0px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #ffffff; } .testimonials1 .tesimonials1-foot img { border-radius: 50%; float: left; margin-right: 15px; display: inline-block; } .testimonials1 .tesimonials1-foot div.name { text-transform: uppercase; display: inline-block; font-weight: 600; font-size: 13px; margin-top: 8px; } .testimonials1 .tesimonials1-foot div.type-party { font-size: 13px; } .col-testimonials1:nth-child(odd) .testimonials1 .tesimonials1-foot { background-color: #96c667; } .testimonials2-section_in h2 { color: #ffffff; } .testimonials2-section_in .description { color: #ffffff; } .testimonials2-section_in .testimonials1 { border: 0; } .testimonials2-section .carousel { padding-bottom: 40px; } .testimonials2-section .carousel-indicators { bottom: 0; padding: 0; } .testimonials2-section .carousel-indicators .active { background-color: #da2a88; border: 1px solid #da2a88; } .testimonials2-section .carousel-indicators li { border: 1px solid #da2a88; } .testimonials2-section .carousel-indicators li:hover { background-color: #da2a88; } .testimonials2 .testimonials2-head { background-color: #da2a88; color: #ffffff; overflow: hidden; -webkit-border-radius: 300px; -moz-border-radius: 300px; border-radius: 300px; font-family: 'Atma', cursive; font-size: 16px; line-height: 22px; padding: 50px 110px; position: relative; } .testimonials2 .testimonials2-head:before { content: ''; width: 119px; height: 92px; background-image: url('../images/happykiddo_tesimonials2-quote1.png'); position: absolute; top: 20px; left: -25px; } .testimonials2 .testimonials2-head:after { content: ''; width: 119px; height: 92px; background-image: url('../images/happykiddo_tesimonials2-quote2.png'); position: absolute; bottom: 20px; right: -25px; } .testimonials2 .testimonials2-head p { margin: 0; } .testimonials2 .testimonials2-foot .box { display: inline-block; position: relative; padding-top: 22px; margin-bottom: 10px; } .testimonials2 .testimonials2-foot .box:before { position: absolute; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; content: ''; width: 0px; height: 0px; border-left: 4px solid transparent; border-right: 27px solid transparent; border-top: 20px solid #da2a88; } .testimonials2 .testimonials2-foot img { border-radius: 50%; float: left; margin-right: 15px; display: inline-block; } .testimonials2 .testimonials2-foot div.name { text-transform: uppercase; display: inline-block; font-weight: 600; font-size: 13px; margin-top: 12px; } .testimonials2 .testimonials2-foot div.type-party { font-size: 13px; } .steps-section .first-row { background: url(../images/happykiddo-steps-bg.jpg) top left repeat; color: #ffffff; position: relative; padding-top: 40px; } .steps-section .first-row .steps-img { padding-top: 30px; } .steps-section .second-row { background: #fdfefd; border-bottom: 1px solid #f1f1f1; position: relative; padding-bottom: 20px; } .steps-section .second-row h2 { margin-top: 20px; } .steps-section .second-row .steps-img { position: relative; } .steps-section .second-row .steps-img img { position: absolute; top: 0; left: 0; right: 0; bottom: 25px; } .steps-section .second-row .steps-info { padding: 65px 0 50px 0; position: relative; } .steps-section h2 { font-size: 22px; } .steps-section p { margin-top: 0; } .steps-section .steps-quote { background: url(../images/happykiddo_steps-quote.png) top left no-repeat; color: #ffffff; width: 190px; height: 180px; display: table; margin: 0 auto; font-size: 22px; font-weight: 600; line-height: 30px; } .steps-section .steps-quote div { display: table-cell; vertical-align: middle; text-align: center; } .steps-section .steps-quote div span { color: #96c667; font-family: 'Atma', cursive; font-weight: 600; font-size: 24px; } .steps-section .steps-arrow { position: absolute; } .steps-section .arrow1 { top: 70px; right: -90px; } .steps-section .arrow2 { top: 170px; left: -80px; } .steps-section .arrow3 { top: 0; left: 0; right: 0; } .steps-section .arrow4 { top: auto !important; bottom: 40px; left: 0; right: 0; } @media screen and (max-width:767px) { .steps-section .first-row .steps-info { padding-top: 40px; } .steps-section .first-row .steps-info:last-child { padding-bottom: 50px; padding-top: 50px; } .steps-section .second-row img.steps-arrow, .steps-section .second-row img.clown2 { display: none; } .steps-section .second-row .steps-info { padding: 45px 0 0px 0; } .steps-section .second-row .steps-info:last-child { padding-bottom: 45px; } } .section-info { position: relative; } .section-info h2 span.atma-span { font-family: 'Atma', cursive; font-weight: 600; font-size: 24px; } .section-info1 { background: url(../images/bg4.jpg) top left repeat; color: #ffffff; } .section-info1 h2 { font-family: 'Ubuntu', sans-serif; font-weight: 500; font-size: 26px; } .section-info2 { background: url(../images/bg3.jpg) top left repeat; color: #ffffff; } .section-info2 .transparent-btn:hover { color: #96c667; } .section-info2 .filled-btn { color: #96c667; } .section-info2 .filled-btn:before { background-color: #96c667; } .section-info2 .filled-btn:hover { color: #ffffff; } @media screen and (max-width:767px) { .section-info1, .section-info2 { padding-top: 70px; } } .booking-section .section-info1 { padding-top: 70px; } .booking-section .section-info1 .container { position: relative; } .booking-section .section-info1 h2 { margin-bottom: 310px; } .booking-section .section-info1 img { position: absolute; left: 0; right: 0; bottom: -87px; margin-left: auto; margin-right: auto; } .booking-form { background-color: #f6f6f6; padding: 80px 0 50px 0; overflow: hidden; } .booking-form .booking input, .booking-form .booking textarea, .booking-form .booking select { border: 1px solid #ccc; } .booking-form .booking input:focus, .booking-form .booking textarea:focus, .booking-form .booking select:focus { border: 1px solid #ccc; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0px 6px rgba(243, 66, 53, 0.6); outline: 0 none; } .booking-form .booking label { font-size: 12px; } .booking-form .booking button { color: #ffffff; font-weight: 600; background-color: #da2a88; font-size: 13px; border: 2px solid #da2a88; border-radius: 3px; padding: 7px 25px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; margin: 10px auto; display: block; z-index: 10; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .booking-form .booking button:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .booking-form .booking button:hover, .booking-form .booking button:focus, .booking-form .booking button:active { color: #da2a88; text-decoration: none; } .booking-form .booking button:hover:before, .booking-form .booking button:focus:before, .booking-form .booking button:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .booking-form .booking .btn-row { position: relative; } .booking-form .booking .btn-row .form-arrow { position: absolute; top: 0; left: 55%; z-index: 1; } .booking-form .booking ul { padding: 0; margin: 0; } .booking-form .booking ul li { display: inline-block; list-style-type: none; } .booking-form .booking ul li .checkbox { margin: 5px 20px 0 0; } @media (min-width:768px) and (max-width:980px) { .booking-section .section-info1 img { width: 650px; bottom: -125px; } .booking-section .section-info1 h2 { margin-bottom: 210px; } } @media (max-width:767px) { .booking-section .section-info1 img { width: 280px; bottom: -53px; } .booking-section .section-info1 h2 { margin-bottom: 110px; } } .about-tabs ul.nav.nav-tabs { font-family: 'Atma', cursive; font-size: 18px; font-weight: 600; border: 0; position: relative; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; margin: 0 auto; padding: 0; list-style: none; -ms-box-orient: horizontal; -ms-box-pack: center; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .about-tabs ul.nav.nav-tabs li { position: relative; z-index: 1; display: block; margin: 0; text-align: center; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .about-tabs ul.nav.nav-tabs li a { overflow: visible; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid #dcdde0; -webkit-transition: color 0.2s; transition: color 0.2s; color: #313131; margin: 0; } .about-tabs ul.nav.nav-tabs li a:hover, .about-tabs ul.nav.nav-tabs li a:focus { color: #da2a88; border-left: 0; border-right: 0; border-top: 0; } .about-tabs ul.nav.nav-tabs li.active a, .about-tabs ul.nav.nav-tabs li.active a:hover, .about-tabs ul.nav.nav-tabs li.active a:focus { border-left: 0; border-right: 0; border-top: 0; color: #da2a88; } .about-tabs ul.nav.nav-tabs li.active a:before, .about-tabs ul.nav.nav-tabs li.active a:after { position: absolute; top: 100%; left: 50%; width: 0; height: 0; border: solid transparent; content: ''; pointer-events: none; } .about-tabs ul.nav.nav-tabs li.active a:before { margin-left: -11px; border-width: 11px; border-top-color: rgba(0, 0, 0, 0.2); } .about-tabs ul.nav.nav-tabs li.active a:after { margin-left: -10px; border-width: 10px; border-top-color: #ffffff; } .about-tabs .tab-content { padding: 40px 0; } .blog-layout1 { margin-bottom: 25px; } .blog-layout1 .blog-layout1-img { min-height: 180px; border-radius: 5px; position: relative; overflow: hidden; } .blog-layout1 .blog-layout1-img .blog-date { position: absolute; bottom: -8px; left: 5px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .blog-layout1 .blog-layout1-img .blog-date div { font-family: 'Atma', cursive; color: #ffffff; font-weight: 600; font-size: 15px; position: absolute; bottom: 100px; width: 100%; text-align: center; } .blog-layout1 .blog-layout1-img .blog_post-format { position: absolute; bottom: -8px; left: 52px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .blog-layout1 .blog-layout1-img .blog_post-format div { color: #ffffff; font-weight: 600; font-size: 18px; position: absolute; bottom: 50px; width: 100%; text-align: center; } .blog-layout1 .blog-layout1-img:hover .blog-date, .blog-layout1 .blog-layout1-img:hover .blog_post-format { -webkit-animation-name: hvr-bob-float, hvr-bob; animation-name: hvr-bob-float, hvr-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } .blog-layout1 .blog-layout1-info { padding-left: 0; padding-top: 5px; position: relative; min-height: 180px; } .blog-layout1 .blog-layout1-info h2 { font-family: 'Ubuntu', sans-serif; font-size: 13px; padding-left: 16px; } .blog-layout1 .blog-layout1-info h2 a { color: #da2a88; } .blog-layout1 .blog-layout1-info p { margin: 0; font-size: 12px; padding-left: 15px; height: 90px; overflow: hidden; } .blog-layout1 .blog-layout1-info a.happykiddo-btn { background-color: #da2a88; border-top: 2px solid #da2a88; border-right: 2px solid #da2a88; border-bottom: 2px solid #da2a88; color: #ffffff; font-size: 12px; font-weight: 600; position: absolute; bottom: 15px; padding: 4px 15px; overflow: hidden; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .blog-layout1 .blog-layout1-info a.happykiddo-btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .blog-layout1 .blog-layout1-info a.happykiddo-btn:hover, .blog-layout1 .blog-layout1-info a.happykiddo-btn:focus, .blog-layout1 .blog-layout1-info a.happykiddo-btn:active { color: #da2a88; text-decoration: none; } .blog-layout1 .blog-layout1-info a.happykiddo-btn:hover:before, .blog-layout1 .blog-layout1-info a.happykiddo-btn:focus:before, .blog-layout1 .blog-layout1-info a.happykiddo-btn:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } @-webkit-keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @-webkit-keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @media screen and (max-width:767px) { .blog-layout1 .blog-layout1-info h2, .blog-layout1 .blog-layout1-info p { padding-left: 0; } .blog-layout1 .blog-layout1-info h2 { margin-top: 10px; } } .blog-layout2-section .col-blog-layout2 { float: none; display: inline-block; vertical-align: top; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width:1201px) { .blog-layout2-section .col-blog-layout2 { width: 33.14%; } } @media (min-width:992px) and (max-width:1200px) { .blog-layout2-section .col-blog-layout2 { width: 33.11111%; } } @media (min-width:768px) and (max-width:991px) { .blog-layout2-section .col-blog-layout2 { width: 49.7777%; } } @media (max-width:767px) { .blog-layout2-section .col-blog-layout2 { width: 100%; } } .blog-layout2 { border: 1px solid #f1f1f1; border-radius: 5px; overflow: hidden; position: relative; margin-bottom: 35px; } .blog-layout2 .blog-layout2-img { min-height: 200px; position: relative; overflow: hidden; } .blog-layout2 .blog-layout2-img .blog_post-format { position: absolute; right: 0; bottom: 0; background-color: #ffffff; color: #bebebe; font-size: 15px; padding: 10px 13px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; } .blog-layout2 .blog-layout2-img .mask { opacity: 0; overflow: visible; border: 0px solid rgba(0, 0, 0, 0.7); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; padding: 7px; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; transition: all 0.35s ease-in; } .blog-layout2 .blog-layout2-img .mask a { color: #ffffff; } .blog-layout2 .blog-layout2-img .mask a:hover { text-decoration: none; } .blog-layout2 .blog-layout2-img .mask .mask-btn { position: relative; height: 100%; vertical-align: middle; background-color: rgba(0, 0, 0, 0.5); z-index: 101; text-align: center; } .blog-layout2 .blog-layout2-img .mask .mask-btn i { border-radius: 50%; background-color: #da2a88; color: #ffffff; padding: 10px; margin-top: 70px; margin-bottom: 5px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.5); transform: scale(1.5); } .blog-layout2 .blog-layout2-img .mask .mask-btn span { display: block; font-size: 12px; } .blog-layout2 .blog-layout2-img:hover .mask { opacity: 1; } .blog-layout2 .blog-layout2-img:hover .mask .mask-btn i { -webkit-transform: scale(1); transform: scale(1); } .blog-layout2 .blog-layout2-img:hover .mask .mask-btn i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .blog-layout2 .blog-layout2-info { padding: 20px 15px 0 15px; min-height: 160px; padding-bottom: 50px; } .blog-layout2 .blog-layout2-info h2 { font-family: 'Ubuntu', sans-serif; font-size: 12px; line-height: 16px; } .blog-layout2 .blog-layout2-info h2 a { color: #da2a88; } .blog-layout2 .blog-layout2-info p { margin: 0; font-size: 12px; height: 86px; overflow: hidden; } .blog-layout2 .blog-layout2-btn { position: absolute; bottom: 0; width: 100%; color: #ffffff; font-size: 12px; } .blog-layout2 .blog-layout2-btn div { height: 40px; } .blog-layout2 .blog-layout2-btn div a { color: #ffffff; } .blog-layout2 .blog-layout2-btn div i { margin-right: 3px; } .blog-layout2 .blog-layout2-btn .blog-layout2-comments { padding-top: 12px; padding-left: 5px; padding-right: 5px; } .blog-layout2 .blog-layout2-btn .blog-layout2-date { padding-top: 12px; padding-left: 5px; padding-right: 5px; } .blog-layout2 .blog-layout2-btn .blog-layout2-arrow { padding-top: 6px; } .blog-layout2 .blog-layout2-btn .blog-layout2-arrow img { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .blog-layout2 .blog-layout2-btn .blog-layout2-arrow a:hover img, .blog-layout2 .blog-layout2-btn .blog-layout2-arrow a:focus img, .blog-layout2 .blog-layout2-btn .blog-layout2-arrow a:active img { -webkit-animation-name: hvr-wobble-horizontal; animation-name: hvr-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @media screen and (max-width:767px) { .blog-layout2 .blog-layout2-btn { position: relative; } .blog-layout2 .blog-layout2-info p { height: auto; overflow: auto; } .blog-layout2 .blog-layout2-info { padding-bottom: 20px; } } .blog-layout3-section .col-blog-layout3 { float: none; display: inline-block; vertical-align: top; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; margin-bottom: 40px; } @media (min-width:1201px) { .blog-layout3-section .col-blog-layout3 { width: 48.85555%; } } @media (min-width:992px) and (max-width:1200px) { .blog-layout3-section .col-blog-layout3 { width: 49.82222%; } } @media (min-width:768px) and (max-width:991px) { .blog-layout3-section .col-blog-layout3 { width: 49.77777%; } } @media (max-width:767px) { .blog-layout3-section .col-blog-layout3 { width: 100%; } } .blog-layout3-section .blog-layout3 { color: #ffffff; background-color: #fcc005; -webkit-box-shadow: 0px 5px 0px 0px #e7b11f; -moz-box-shadow: 0px 5px 0px 0px #e7b11f; box-shadow: 0px 5px 0px 0px #e7b11f; -webkit-border-radius: 300px; -moz-border-radius: 300px; border-radius: 300px; padding: 25px 25px; position: relative; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .blog-layout3-section .blog-layout3.sticky-post { background-color: #ff0000; -webkit-box-shadow: 0px 5px 0px 0px #da2a1d; -moz-box-shadow: 0px 5px 0px 0px #da2a1d; box-shadow: 0px 5px 0px 0px #da2a1d; } .blog-layout3-section .blog-layout3.sticky-post a.happykiddo-btn { font-size: 12px; } .blog-layout3-section .blog-layout3.sticky-post a.happykiddo-btn:hover, .blog-layout3-section .blog-layout3.sticky-post a.happykiddo-btn:active, .blog-layout3-section .blog-layout3.sticky-post a.happykiddo-btn:focus { color: #da2a88; } .blog-layout3-section .blog-layout3-img { width: 180px; height: 180px; float: left; border-radius: 50%; margin-right: 30px; border: 8px solid #f1f1f1; } .blog-layout3-section .blog-layout3-img .mask { opacity: 0; overflow: visible; border: 0px solid rgba(0, 0, 0, 0.7); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; transition: all 0.35s ease-in; } .blog-layout3-section .blog-layout3-img .mask a { color: #ffffff; } .blog-layout3-section .blog-layout3-img .mask a:hover { text-decoration: none; } .blog-layout3-section .blog-layout3-img .mask .mask-btn { position: relative; height: 100%; vertical-align: middle; background-color: rgba(0, 0, 0, 0.5); z-index: 101; border-radius: 50%; } .blog-layout3-section .blog-layout3-img .mask .mask-btn i { border-radius: 50%; background-color: #ff0000; color: #ffffff; padding: 10px; margin-top: 35%; margin-bottom: 5px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.5); transform: scale(1.5); } .blog-layout3-section .blog-layout3-img .mask .mask-btn span { display: block; font-size: 12px; } .blog-layout3-section .blog-layout3-img:hover .mask { opacity: 1; } .blog-layout3-section .blog-layout3-img:hover .mask .mask-btn i { -webkit-transform: scale(1); transform: scale(1); } .blog-layout3-section .blog-layout3-img:hover .mask .mask-btn i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .blog-layout3-section .blog-layout3-info img { margin-bottom: 20px; } .blog-layout3-section .blog-layout3-info h2 { font-size: 20px; font-weight: 500; } .blog-layout3-section .blog-layout3-info h2 a { color: #ffffff; } .blog-layout3-section .blog-layout3-info p { font-size: 13px; margin-top: 0; } .blog-layout3-section .blog-layout3-info a.happykiddo-btn { font-size: 12px; } .blog-layout3-section .blog-layout3-info a.happykiddo-btn:hover, .blog-layout3-section .blog-layout3-info a.happykiddo-btn:active, .blog-layout3-section .blog-layout3-info a.happykiddo-btn:focus { color: #fcc005; } @media (max-width:991px) { .blog-layout3-section .blog-layout3-img { float: none; margin: 0 auto; margin-bottom: 30px; } .blog-layout3-section .blog-layout3-info { margin-bottom: 15px; } } .blog-layout4-section .col-blog-layout4 { float: none; display: inline-block; vertical-align: bottom; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; margin-bottom: 40px; } @media (min-width:1201px) { .blog-layout4-section .col-blog-layout4 { width: 33.14%; } } @media (min-width:992px) and (max-width:1200px) { .blog-layout4-section .col-blog-layout4 { width: 33.11111%; } } @media (min-width:768px) and (max-width:991px) { .blog-layout4-section .col-blog-layout4 { width: 49.7777%; } } @media (max-width:767px) { .blog-layout4-section .col-blog-layout4 { width: 100%; } } .blog-layout4-section .blog-layout4 h2 { font-family: 'Ubuntu', sans-serif; font-size: 13px; margin-bottom: 10px; padding-left: 5px; padding-right: 5px; } .blog-layout4-section .blog-layout4 h2 a { color: #313131; } .blog-layout4-section .blog-layout4 h2 a:hover { color: #da2a88; text-decoration: none; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box { overflow: hidden; position: relative; background-color: #da2a88; height: 200px; -webkit-border-top-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomright: 50px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .mask { padding: 15px 20px; color: #ffffff; background-color: #da2a88; font-size: 12px; line-height: 16px; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .mask p { margin-top: 0; height: 44px; overflow: hidden; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .mask .blog-layout4-info a { color: #ffffff; font-size: 11px; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .mask .blog-layout4-info .blog-layout4-comments { float: left; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .mask .blog-layout4-info .blog-layout4-comments i { margin-right: 5px; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .mask .blog-layout4-info .blog-layout4-author { float: right; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .mask .blog-layout4-info .blog-layout4-author span { color: #fcc005; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .blog-layout4-img { height: 220px; width: 100%; position: absolute; left: 0; bottom: 0; cursor: pointer; margin: -12px 0; -webkit-transition: bottom 0.3s ease-in-out; -moz-transition: bottom 0.3s ease-in-out; -o-transition: bottom 0.3s ease-in-out; transition: bottom 0.3s ease-in-out; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .blog-layout4-img:hover { bottom: -107px; padding-top: 100px; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .blog-layout4-img:hover .blog_post-format { background-color: #da2a88; color: #ffffff; } .blog-layout4-section .blog-layout4 .blog-layout4-img-box .blog-layout4-img .blog_post-format { position: absolute; right: 0; top: 0px; background-color: transparent; color: transparent; font-size: 15px; padding: 10px 13px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; } .blog-layout5-section .col-blog-layout5 { float: left; } @media (min-width:768px) { .blog-layout5-section .col-blog-layout5:nth-child(odd) { margin: 30px 0 -30px 0; } } .blog-layout5-section .col-blog-layout5:hover .blog-layout5-img .mask { opacity: 1; } .blog-layout5-section .col-blog-layout5:hover .blog-layout5-img .mask .mask-btn i { -webkit-transform: scale(1); transform: scale(1); } .blog-layout5-section .col-blog-layout5:hover .blog-layout5-img .mask .mask-btn i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .blog-layout5-section .col-blog-layout5:hover .blog-layout5-header { top: -50px; } .blog-layout5-section .col-blog-layout5:hover .blog-layout5-header p { overflow: hidden; opacity: 0; } .blog-layout5-section .col-blog-layout5:hover .blog-layout5-header h2 { top: 40px; } @media (min-width:1201px) { .blog-layout5-section .col-blog-layout5 { width: 25%; } } @media (min-width:992px) and (max-width:1200px) { .blog-layout5-section .col-blog-layout5 { width: 33.33333%; } } @media (min-width:768px) and (max-width:991px) { .blog-layout5-section .col-blog-layout5 { width: 50%; } } @media (max-width:767px) { .blog-layout5-section .col-blog-layout5 { width: 100%; margin-bottom: 20px; } .blog-layout5-section .col-blog-layout5:last-child { margin-bottom: 0; } } .blog-layout5-section .blog-layout5 { border: 1px solid #f1f1f1; position: relative; overflow: hidden; border-radius: 5px; margin: 10px; height: 480px; } .blog-layout5-section .blog-layout5 .blog-layout5-header { color: #313131; background-color: #ffffff; position: absolute; top: -20px; left: -10%; width: 120%; z-index: 1000; height: 170px; color: #000; padding: 45px 45px 20px 45px; transition: all .6s linear; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } .blog-layout5-section .blog-layout5 .blog-layout5-header div { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); height: 140px; overflow: hidden; } .blog-layout5-section .blog-layout5 .blog-layout5-header div h2 { font-family: 'Ubuntu', sans-serif; font-size: 13px; line-height: 16px; margin-bottom: 10px; position: relative; top: 0px; z-index: 1000; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; } .blog-layout5-section .blog-layout5 .blog-layout5-header div h2 a { color: #da2a88; } .blog-layout5-section .blog-layout5 .blog-layout5-header div h2 a:hover { text-decoration: none; } .blog-layout5-section .blog-layout5 .blog-layout5-header div p { font-size: 12px; line-height: 16px; opacity: 1; transition: opacity 0.3s ease-out; } .blog-layout5-section .blog-layout5 .blog-layout5-img { position: absolute; bottom: 30px; width: 100%; height: 350px; z-index: 1; } .blog-layout5-section .blog-layout5 .blog-layout5-img .mask { opacity: 0; overflow: visible; border: 0px solid rgba(0, 0, 0, 0.7); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; color: #ffffff; transition: all 0.35s ease-in; } .blog-layout5-section .blog-layout5 .blog-layout5-img .mask .mask-btn { position: relative; height: 100%; vertical-align: middle; background-color: rgba(0, 0, 0, 0.5); z-index: 101; padding-top: 70px; } .blog-layout5-section .blog-layout5 .blog-layout5-img .mask .mask-btn i { border-radius: 50%; background-color: #da2a88; color: #ffffff; padding: 10px; margin-top: 35%; margin-bottom: 5px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.5); transform: scale(1.5); } .blog-layout5-section .blog-layout5 .blog-layout5-img .mask .mask-btn span { display: block; font-size: 12px; } .blog-layout5-section .blog-layout5 .blog-layout5-img .mask .mask-btn a { color: #fff; } .blog-layout5-section .blog-layout5 .blog-layout5-btn { position: absolute; bottom: 0; width: 100%; color: #ffffff; font-size: 12px; z-index: 100; } .blog-layout5-section .blog-layout5 .blog-layout5-btn i { margin-right: 5px; } .blog-layout5-section .blog-layout5 .blog-layout5-btn .blog-layout5-comments { padding: 10px 5px; } .blog-layout5-section .blog-layout5 .blog-layout5-btn .blog-layout5-comments a { color: #ffffff; } .blog-layout5-section .blog-layout5 .blog-layout5-btn .blog-layout5-date { padding: 10px 5px; } .blog-layout6-section .col-blog-layout6 { float: none; display: inline-block; vertical-align: top; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; margin-bottom: 40px; } @media (min-width:1201px) { .blog-layout6-section .col-blog-layout6 { width: 24.777%; } } @media (min-width:992px) and (max-width:1200px) { .blog-layout6-section .col-blog-layout6 { width: 33%; } } @media (min-width:768px) and (max-width:991px) { .blog-layout6-section .col-blog-layout6 { width: 49.7777%; } } @media (max-width:767px) { .blog-layout6-section .col-blog-layout6 { width: 100%; } } .blog-layout6-section .blog-layout6.sticky-post .blog-layout6-img .blog-layout6-img_box .mask-wrap { box-shadow: 0 0 0 15px rgba(243, 66, 53, 0.3), inset 0 0 3px rgba(243, 66, 53, 0.3); } .blog-layout6-section .blog-layout6 .blog-layout6-img { width: 220px; height: 220px; margin: 0 auto; } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); cursor: pointer; } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box:hover .mask-wrap { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(0, 0, 0, 0.2); } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box:hover .mask-wrap .mask { -webkit-transform: rotate3d(0, 1, 0, -180deg); -moz-transform: rotate3d(0, 1, 0, -180deg); -o-transform: rotate3d(0, 1, 0, -180deg); -ms-transform: rotate3d(0, 1, 0, -180deg); transform: rotate3d(0, 1, 0, -180deg); } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box .mask-wrap { position: absolute; width: 190px; height: 190px; border-radius: 50%; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; top: 15px; left: 15px; box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.2); } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box .mask-wrap .mask { position: absolute; width: 190px; height: 190px; border-radius: 50%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box .mask-wrap .mask .mask-btn { -webkit-transform: rotate3d(0, 1, 0, 180deg); -moz-transform: rotate3d(0, 1, 0, 180deg); -o-transform: rotate3d(0, 1, 0, 180deg); -ms-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg); background: rgba(0, 0, 0, 0.7); display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box .mask-wrap .mask .mask-btn i { border-radius: 50%; background-color: #da2a88; color: #ffffff; padding: 10px; margin-top: 20px; font-size: 15px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.5); transform: scale(1.5); } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box .mask-wrap .mask .mask-btn span { display: block; font-size: 12px; color: #ffffff; margin-bottom: 2px; } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box .mask-wrap .mask .mask-btn span:first-child { margin-top: 28%; } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box:hover .mask { opacity: 1; } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box:hover .mask .mask-btn i { -webkit-transform: scale(1); transform: scale(1); } .blog-layout6-section .blog-layout6 .blog-layout6-img .blog-layout6-img_box:hover .mask .mask-btn i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .blog-layout6-section .blog-layout6 .blog-layout6-info { margin-top: 15px; } .blog-layout6-section .blog-layout6 .blog-layout6-info h2 { font-family: 'Ubuntu', sans-serif; font-size: 12px; line-height: 18px; } .blog-layout6-section .blog-layout6 .blog-layout6-info h2 a { color: #da2a88; } .blog-layout6-section .blog-layout6 .blog-layout6-info h2 a:hover { color: #313131; text-decoration: none; } .blog-layout6-section .blog-layout6 .blog-layout6-info p { margin: 0; font-size: 12px; line-height: 16px; } .portfolio-section .portfolio-col { float: none; display: inline-block; vertical-align: bottom; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; margin-bottom: 40px; } @media (min-width:1201px) { .portfolio-section .portfolio-col2 { width: 49.85555%; } } @media (min-width:992px) and (max-width:1200px) { .portfolio-section .portfolio-col2 { width: 49.82222%; } } @media (min-width:768px) and (max-width:991px) { .portfolio-section .portfolio-col2 { width: 49.77777%; } } @media (max-width:767px) { .portfolio-section .portfolio-col2 { width: 100%; } } @media (min-width:1201px) { .portfolio-section .portfolio-col3 { width: 32.14%; } } @media (min-width:992px) and (max-width:1200px) { .portfolio-section .portfolio-col3 { width: 33.11111%; } } @media (min-width:768px) and (max-width:991px) { .portfolio-section .portfolio-col3 { width: 49.7777%; } } @media (max-width:767px) { .portfolio-section .portfolio-col3 { width: 100%; } } .portfolio-section .portfolio-col2 .portfolio-img-box { height: 240px; } .portfolio-section .portfolio-col2 .portfolio-img-box .portfolio-img { height: 240px; } .portfolio-section .portfolio-col3 .portfolio-img-box { height: 200px; } .portfolio-section .portfolio-col3 .portfolio-img-box .portfolio-img { height: 200px; } .portfolio-section .portfolio-normal h2 { font-family: 'Ubuntu', sans-serif; font-size: 13px; margin-bottom: 3px; padding-left: 30px; padding-right: 5px; } .portfolio-section .portfolio-normal h2 a { color: #313131; } .portfolio-section .portfolio-normal h2 a:hover { color: #da2a88; text-decoration: none; } .portfolio-section .portfolio-normal ul { padding: 0; margin: 0 5px 0px 30px; text-transform: uppercase; font-size: 11px; } .portfolio-section .portfolio-normal ul li { display: inline-block; padding-right: 20px; } .portfolio-section .portfolio-normal ul li i { margin-right: 5px; } .portfolio-section .portfolio-normal ul li a { color: #96c667; } .portfolio-section .portfolio-normal p.description { margin: 0; padding-left: 5px; padding-right: 5px; font-size: 12px; } .portfolio-section .portfolio-normal .portfolio-img-box { position: relative; margin-top: 8px; -webkit-border-top-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomright: 50px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; overflow: hidden; } .portfolio-section .portfolio-normal .portfolio-img-box:hover .date-wrap { opacity: 0; } .portfolio-section .portfolio-normal .portfolio-img-box:hover .overlay { opacity: 1; } .portfolio-section .portfolio-normal .portfolio-img-box:hover .mask-wrap { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .portfolio-section .portfolio-normal .portfolio-img-box:hover .wrap-left { -webkit-transition-delay: .2s; transition-delay: .2s; } .portfolio-section .portfolio-normal .portfolio-img-box:hover .wrap-right { -webkit-transition-delay: .15s; transition-delay: .15s; } .portfolio-section .portfolio-normal .portfolio-img-box .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; z-index: 999; background-color: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-border-top-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomright: 50px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; } .portfolio-section .portfolio-normal .portfolio-img-box .portfolio-img { width: 100%; -webkit-border-top-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomright: 50px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; } .portfolio-section .portfolio-normal .portfolio-img-box .wrap-left { position: absolute; right: 100px; bottom: 20px; } .portfolio-section .portfolio-normal .portfolio-img-box .wrap-left .mask-front { background-color: #da2a88; } .portfolio-section .portfolio-normal .portfolio-img-box .wrap-right { position: absolute; right: 20px; bottom: 20px; } .portfolio-section .portfolio-normal .portfolio-img-box .wrap-right .mask-front { background-color: #fcc005; } .portfolio-section .portfolio-normal .portfolio-img-box .date-wrap { width: 70px; height: 70px; z-index: 100; border-radius: 50%; background-color: #da2a88; color: #ffffff; text-align: center; -webkit-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } .portfolio-section .portfolio-normal .portfolio-img-box .date-wrap p { position: relative; top: 53%; transform: translateY(-50%); margin: 0; padding: 0 8px; font-weight: 600; line-height: 18px; font-size: 14px; text-transform: uppercase; font-family: 'Atma', cursive; } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap { width: 70px; height: 70px; z-index: 1000; -webkit-transition: -webkit-transform 0.35s; transition: transform .35s; -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; -webkit-perspective: 900px; -moz-perspective: 900px; -o-perspective: 900px; -ms-perspective: 900px; perspective: 900px; } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask .mask-info { text-align: center; position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask .mask-info div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask .mask-info .mask-front { color: #ffffff; } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask .mask-info .mask-front p { position: relative; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 8px; font-weight: 600; line-height: 14px; font-size: 11px; text-transform: uppercase; } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask .mask-info .mask-back { background-color: #96c667; color: #ffffff; -webkit-transform: translate3d(0, 0, -70px) rotate3d(1, 0, 0, 90deg); -moz-transform: translate3d(0, 0, -70px) rotate3d(1, 0, 0, 90deg); -o-transform: translate3d(0, 0, -70px) rotate3d(1, 0, 0, 90deg); -ms-transform: translate3d(0, 0, -70px) rotate3d(1, 0, 0, 90deg); transform: translate3d(0, 0, -70px) rotate3d(1, 0, 0, 90deg); opacity: 0; } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask .mask-info .mask-back a { display: block; height: 70px; } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask .mask-info .mask-back i { border-radius: 50%; color: #ffffff; margin-top: 25px; font-size: 22px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1); transform: scale(1); } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask .mask-info .mask-back i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask:hover .mask-front { -webkit-transform: translate3d(0, 77px, 0) rotate3d(1, 0, 0, -90deg); -moz-transform: translate3d(0, 77px, 0) rotate3d(1, 0, 0, -90deg); -o-transform: translate3d(0, 77px, 0) rotate3d(1, 0, 0, -90deg); -ms-transform: translate3d(0, 77px, 0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0, 77px, 0) rotate3d(1, 0, 0, -90deg); opacity: 0; } .portfolio-section .portfolio-normal .portfolio-img-box .mask-wrap .mask:hover .mask-back { -webkit-transform: rotate3d(1, 0, 0, 0deg); -moz-transform: rotate3d(1, 0, 0, 0deg); -o-transform: rotate3d(1, 0, 0, 0deg); -ms-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); opacity: 1; } .page-title-box.green-bg { background-color: #90bb17; } .pricing-btn.filled-btn { background-color: #313131; color: #ffffff; } .pricing-btn.filled-btn:hover { background-color: #da2a88; } .pricing-table .pricing-column { z-index: 1; padding: 0; } .pricing-table .pricing-table-plan { color: #ffffff; background-color: #ff0000; -webkit-border-radius: 300px; -moz-border-radius: 300px; border-radius: 300px; padding: 25px 10px; min-height: 400px; position: relative; margin: 0 8px; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; transition: all 0.1s; -webkit-box-shadow: 0px 6px 0px 0px #da2a1d; -moz-box-shadow: 0px 6px 0px 0px #da2a1d; box-shadow: 0px 6px 0px 0px #da2a1d; } .pricing-table .pricing-table-plan:hover .pricing-table_price div.price p.price { color: #516c05; } .pricing-table .pricing-table-plan .pricing-table_head { width: 200px; height: 200px; margin: 0 auto; -webkit-border-radius: 300px; -moz-border-radius: 300px; border-radius: 300px; border: 10px solid #da2a1d; background-color: #ffffff; position: relative; } .pricing-table .most-popular .pricing-table-plan .pricing-table_head { border: 10px solid #7ea70c; } .pricing-table .pricing-table-plan .pricing-table_head h2.pricing-table_title { font-weight: 600; font-size: 18px; margin-top: 33px; margin-bottom: 15px; color: #313131; } .pricing-table .pricing-table-plan .pricing-table_head .pricing-table_price div.price p.price { padding: 0; margin: 0; color: #313131; line-height: 2.6em; } .pricing-table .pricing-table-plan .pricing-table_head .pricing-table_price div.price p.price .unit { position: relative; display: inline-block; vertical-align: top; top: 9px; font-size: 30px; font-weight: 600; left: 4px; } .pricing-table .pricing-table-plan .pricing-table_head .pricing-table_price div.price p.price .amount { font-size: 60px; } .pricing-table .pricing-table-plan .pricing-table_head .pricing-table_price div.price .billing-type { color: #959494; text-transform: uppercase; font-size: 13px; top: 3px; font-weight: 600; position: relative; display: block; padding: 0 30px; line-height: 16px; } .pricing-table .pricing-table-plan .pricing-table_features ul { padding: 5px 5px 0 5px; } .pricing-table .pricing-table-plan .pricing-table_features li { border-bottom: 1px solid #d2d2d2; list-style-type: none; padding: 6px 0; } .pricing-table .pricing-table-plan .pricing-table_features li:last-child { border-bottom: 0; } .pricing-table .pricing-table-plan .pricing-table_features li .feature-item-inner { font-size: 14px; font-weight: 500; position: relative; } .pricing-table .pricing-table-plan .pricing-table_features li .feature-item-inner i { margin: 0 5px; } .pricing-table .pricing-table-plan .pricing-table_features li .feature-item-inner .tooltip-table { display: none; background: #303841; background: rgba(48, 56, 65, 0.9); z-index: 100; position: absolute; left: 50%; bottom: 35px; color: #ffffff; font-size: 12px; line-height: 16px; font-family: 'Open Sans', sans-serif; padding: 10px 15px; border-radius: 3px; transform: translate(-50%, 0); width: 100%; max-width: 200px; cursor: text; } .pricing-table .pricing-table-plan .pricing-table_features li .feature-item-inner .tooltip-table:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(48, 56, 65, 0); border-top-color: rgba(48, 56, 65, 0.9); border-width: 8px; margin-left: -8px; } .pricing-table .pricing-table-plan .pricing-table_features li .feature-item-inner:hover .tooltip-table { display: block; } .pricing-table .pricing-table-plan .pricing-table_cta .cta-btn .btn { background: #ffffff; color: #4a5664; box-shadow: 0 5px #da2a1d; -webkit-transition: none; -moz-transition: none; transition: none; border-radius: 50%; width: 78px; height: 78px; padding: 0; display: inline-block; position: relative; text-decoration: none; } .pricing-table .pricing-table-plan .pricing-table_cta .cta-btn .btn:hover { box-shadow: 0 3px #da2a1d; top: 2px; text-decoration: none; } .pricing-table .pricing-table-plan .pricing-table_cta .cta-btn .btn:active { box-shadow: 0 0 #da2a1d; top: 5px; text-decoration: none; } .pricing-table .pricing-table-plan .pricing-table_cta .cta-btn .btn span { font-size: 52px; position: relative; font-weight: 300; } .pricing-table .most-popular .pricing-table-plan { background-color: #90bb17; -webkit-box-shadow: 0px 6px 0px 0px #7ea70c; -moz-box-shadow: 0px 6px 0px 0px #7ea70c; box-shadow: 0px 6px 0px 0px #7ea70c; } .pricing-table .most-popular .pricing-table-plan .pricing-table_head h2.pricing-table_title { color: #516c05; } .pricing-table .most-popular .pricing-table-plan .pricing-table_features { color: #ffffff; } .pricing-table .most-popular .pricing-table-plan .pricing-table_cta .cta-btn .btn { box-shadow: 0 5px #7ea70c; } @media (max-width:980px) { .pricing-table .pricing-column { margin-bottom: 20px; } } @media (min-width:981px) and (max-width:1200px) { .pricing-table .pricing-table-plan .pricing-table_head { width: 180px; height: 180px; } } .news-section .news-masonry .news-layout2 .news-layout2-img .mask .mask-btn i { margin-top: 40%; } .news-section .news-masonry .news-layout2 { margin-bottom: 0; } .news-layout2 { border: 1px solid #f1f1f1; border-radius: 5px; overflow: hidden; position: relative; margin-bottom: 35px; } .news-layout2 .news-layout2-info { padding: 20px 15px 0 15px; min-height: 160px; padding-bottom: 50px; } .news-layout2 .news-layout2-info h2 { font-family: 'Ubuntu', sans-serif; font-size: 12px; line-height: 16px; } .news-layout2 .news-layout2-info h2 a { color: #da2a88; } .news-layout2 .news-layout2-info p { margin: 0; font-size: 12px; height: 90px; overflow: hidden; } .news-layout2 .news-layout2-btn { position: absolute; bottom: 0; width: 100%; color: #ffffff; font-size: 12px; } .news-layout2 .news-layout2-btn div { height: 40px; } .news-layout2 .news-layout2-btn div a { color: #ffffff; } .news-layout2 .news-layout2-btn div i { margin-right: 3px; } .news-layout2 .news-layout2-btn .news-layout2-comments { padding-top: 12px; padding-left: 5px; padding-right: 5px; } .news-layout2 .news-layout2-btn .news-layout2-date { padding-top: 12px; padding-left: 5px; padding-right: 5px; } .news-layout2 .news-layout2-btn .news-layout2-arrow { padding-top: 6px; } .news-layout2 .news-layout2-btn .news-layout2-arrow img { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .news-layout2 .news-layout2-btn .news-layout2-arrow a:hover img, .news-layout2 .news-layout2-btn .news-layout2-arrow a:focus img, .news-layout2 .news-layout2-btn .news-layout2-arrow a:active img { -webkit-animation-name: hvr-wobble-horizontal; animation-name: hvr-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .news-layout2 figure { float: left; width: 100%; position: relative; overflow: hidden; margin-bottom: 15px; } .news-layout2 figure img { width: 100%; height: auto; } .news-layout2 figure:hover .overlay { opacity: 1; visibility: visible; } .news-layout2 figure:hover .overlay-background { opacity: .8; visibility: visible; } .news-layout2 figure .overlay-background { z-index: 1; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; width: 100%; height: 100%; } .news-layout2 figure .overlay-background .inner { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: 7px; background-color: #c8e9c8; background-color: rgba(0, 0, 0, 0.5); } .news-layout2 figure .overlay { z-index: 2; transition: all 0.2s ease-in-out; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; width: 100%; height: 100%; } .news-layout2 figure .inner-overlay { display: table; width: 100%; height: 100%; } .news-layout2 figure .inner-overlay-content { display: table-cell; vertical-align: middle; width: 100%; padding: 20px 40px; } .news-layout2 figure .inner-overlay-content.with-icons { text-align: center; } .news-layout2 figure .inner-overlay-content.with-icons a i { border-radius: 50%; background-color: #da2a88; color: #ffffff; padding: 13px; margin: 0 5px; display: inline-block; font-size: 16px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .news-layout2 figure .inner-overlay-content.with-icons a:hover i { background-color: #ffffff; color: #da2a88; } @-webkit-keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .portfolio-section .portfolio-masonry .portfolio { overflow: hidden; -webkit-border-top-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomright: 50px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img { position: relative; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img:hover .date-wrap { opacity: 0; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img:hover .overlay { opacity: 1; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img:hover .mask-wrap { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .portfolio-section .portfolio-masonry .portfolio .portfolio-img:hover .wrap-left { -webkit-transition-delay: .2s; transition-delay: .2s; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img:hover .wrap-right { -webkit-transition-delay: .15s; transition-delay: .15s; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; z-index: 1001; background-color: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-border-top-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomright: 50px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .date-wrap { position: absolute; top: 15px; left: 15px; width: 70px; height: 70px; z-index: 100; border-radius: 50%; background-color: #da2a88; color: #ffffff; text-align: center; -webkit-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .date-wrap p { position: relative; top: 53%; transform: translateY(-50%); margin: 0; padding: 0 8px; font-weight: 600; line-height: 18px; font-size: 14px; text-transform: uppercase; font-family: 'Atma', cursive; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .wrap-left { left: 15px; top: 15px; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .wrap-left .mask-front { background-color: #da2a88; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .wrap-right { left: 100px; top: 15px; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .wrap-right .mask-front { background-color: #fcc005; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap { width: 70px; height: 70px; z-index: 1000; position: absolute; -webkit-transition: -webkit-transform 0.35s; transition: transform .35s; -webkit-transform: translate3d(0, -200%, 0); transform: translate3d(0, -200%, 0); } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; -webkit-perspective: 900px; -moz-perspective: 900px; -o-perspective: 900px; -ms-perspective: 900px; perspective: 900px; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask .mask-info { text-align: center; position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask .mask-info div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask .mask-info .mask-front { color: #ffffff; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask .mask-info .mask-front p { position: relative; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 8px; font-weight: 600; line-height: 14px; font-size: 11px; text-transform: uppercase; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask .mask-info .mask-back { background-color: #96c667; color: #ffffff; -webkit-transform: translate3d(0, 0, -70px) rotate3d(1, 0, 0, 90deg); -moz-transform: translate3d(0, 0, -70px) rotate3d(1, 0, 0, 90deg); -o-transform: translate3d(0, 0, -70px) rotate3d(1, 0, 0, 90deg); -ms-transform: translate3d(0, 0, -70px) rotate3d(1, 0, 0, 90deg); transform: translate3d(0, 0, -70px) rotate3d(1, 0, 0, 90deg); opacity: 0; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask .mask-info .mask-back a { display: block; height: 70px; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask .mask-info .mask-back i { border-radius: 50%; color: #ffffff; margin-top: 25px; font-size: 22px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1); transform: scale(1); } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask .mask-info .mask-back i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask:hover .mask-front { -webkit-transform: translate3d(0, 77px, 0) rotate3d(1, 0, 0, -90deg); -moz-transform: translate3d(0, 77px, 0) rotate3d(1, 0, 0, -90deg); -o-transform: translate3d(0, 77px, 0) rotate3d(1, 0, 0, -90deg); -ms-transform: translate3d(0, 77px, 0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0, 77px, 0) rotate3d(1, 0, 0, -90deg); opacity: 0; } .portfolio-section .portfolio-masonry .portfolio .portfolio-img .mask-wrap .mask:hover .mask-back { -webkit-transform: rotate3d(1, 0, 0, 0deg); -moz-transform: rotate3d(1, 0, 0, 0deg); -o-transform: rotate3d(1, 0, 0, 0deg); -ms-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); opacity: 1; } .portfolio-section .portfolio-masonry .portfolio .portfolio-info { padding: 20px; background-color: #f6f6f6; } .portfolio-section .portfolio-masonry .portfolio .portfolio-info h2 { font-family: 'Ubuntu', sans-serif; font-size: 12px; line-height: 16px; margin-bottom: 3px; } .portfolio-section .portfolio-masonry .portfolio .portfolio-info h2 a { color: #313131; } .portfolio-section .portfolio-masonry .portfolio .portfolio-info h2 a:hover { color: #da2a88; text-decoration: none; } .portfolio-section .portfolio-masonry .portfolio .portfolio-info ul { padding: 0; margin: 0; text-transform: uppercase; font-size: 11px; } .portfolio-section .portfolio-masonry .portfolio .portfolio-info ul li { display: inline-block; padding-right: 20px; } .portfolio-section .portfolio-masonry .portfolio .portfolio-info ul li i { margin-right: 5px; } .portfolio-section .portfolio-masonry .portfolio .portfolio-info ul li a { color: #96c667; } .portfolio-section .portfolio-masonry .portfolio .portfolio-info p { font-size: 12px; line-height: 16px; margin: 5px 0 0 0; } .grid:after { content: ''; display: block; clear: both; } .grid-sizer, .grid-item { width: 33.333%; } @media (min-width:992px) { .grid-sizer, .grid-item { width: 33.333%; } } @media (min-width:450px) and (max-width:991px) { .grid-sizer, .grid-item { width: 50%; } } @media (max-width:449px) { .grid-sizer, .grid-item { width: 100%; } } .grid-item { float: left; padding: 0px 15px 30px 15px; } .blog-inner div.article header { margin-bottom: 15px; } .blog-inner div.article header ul { padding: 0; margin: 0 0 8px 0; } .blog-inner div.article header ul li { display: inline-block; padding-right: 20px; } .blog-inner div.article header ul li i { margin-right: 5px; } .blog-inner div.article header ul.article-tags { text-transform: uppercase; font-size: 11px; } .blog-inner div.article header ul.article-tags a { color: #96c667; } .blog-inner div.article header ul.article-info { color: #bebebe; font-size: 12px; } .blog-inner div.article header ul.article-info a { color: #96c667; } .blog-inner .gallery .carousel i { position: absolute; margin-top: -10px; z-index: 5; display: inline-block; font-size: 28px; } .blog-inner .gallery .carousel i.fa-chevron-right { top: 50%; right: 30%; } .blog-inner .gallery .carousel i.fa-chevron-left { top: 50%; left: 30%; } .blog-inner .gallery .carousel .carousel-caption h3 { font-size: 16px; margin-bottom: 0; } .blog-inner .gallery .carousel .carousel-caption p { margin: 0 0 20px 0; font-size: 13px; } .blog-inner .quote .art-quote { border-left: 5px solid #96c667; font-family: 'Atma', cursive; padding: 10px 15px 10px 18px; margin: 5px 0 20px 0; } .blog-inner .quote .art-quote img { float: left; } .blog-inner .quote .art-quote p.text { padding-left: 80px; margin: 0; font-size: 17px; line-height: 20px; } .blog-inner .quote .art-quote p.author { padding-left: 80px; margin: 10px 0 0 0; font-size: 20px; font-weight: 700; } .blog-inner .article-single { margin-bottom: 20px; } .blog-inner .article-single audio { width: 100%; } .blog-inner .article-single .comment-trigger { color: #da2a88; font-weight: 600; background-color: #ffffff; border: 2px solid #da2a88; border-radius: 3px; padding: 7px 20px; margin: 10px 3px 0 3px; font-size: 12px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .blog-inner .article-single .comment-trigger:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #da2a88; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .blog-inner .article-single .comment-trigger:hover, .blog-inner .article-single .comment-trigger:focus, .blog-inner .article-single .comment-trigger:active { color: #ffffff; text-decoration: none; } .blog-inner .article-single .comment-trigger:hover:before, .blog-inner .article-single .comment-trigger:focus:before, .blog-inner .article-single .comment-trigger:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .blog-inner .article-single .comment-trigger i { margin-right: 5px; } .blog-inner .article-single .gallery { padding: 0 10px; } .blog-inner .article-single .gallery .col { padding-left: 5px; padding-right: 5px; } .blog-inner .article-single .gallery .gallery-col { position: relative; margin-bottom: 10px; border-radius: 5px; overflow: hidden; } .blog-inner .article-single .gallery .gallery-col .mask { opacity: 0; overflow: visible; border: 0px solid rgba(0, 0, 0, 0.7); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; padding: 7px; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; transition: all 0.35s ease-in; } .blog-inner .article-single .gallery .gallery-col .mask a { color: #ffffff; } .blog-inner .article-single .gallery .gallery-col .mask a:hover { text-decoration: none; } .blog-inner .article-single .gallery .gallery-col .mask .mask-btn { position: relative; height: 100%; vertical-align: middle; background-color: rgba(0, 0, 0, 0.5); z-index: 101; text-align: center; } .blog-inner .article-single .gallery .gallery-col .mask .mask-btn i { border-radius: 50%; background-color: #da2a88; color: #ffffff; padding: 10px; margin-top: 50px; margin-bottom: 5px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.5); transform: scale(1.5); } .blog-inner .article-single .gallery .gallery-col .mask .mask-btn span { display: block; font-size: 12px; } .blog-inner .article-single .gallery .gallery-col:hover .mask { opacity: 1; } .blog-inner .article-single .gallery .gallery-col:hover .mask .mask-btn i { -webkit-transform: scale(1); transform: scale(1); } .blog-inner .article-single .gallery .gallery-col:hover .mask .mask-btn i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .blog-inner .article-btn { background-color: #f6f6f6; border-radius: 5px; position: relative; padding: 15px 10px; } .blog-inner .article-btn .btn-right { position: relative; } .blog-inner .article-btn .btn-right:hover img.arrow { -webkit-animation-name: hvr-wobble-horizontal; animation-name: hvr-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .blog-inner .article-btn p { font-size: 13px; font-weight: 600; } .blog-inner .article-btn .happykiddo-btn { color: #ffffff; font-weight: 600; background-color: #da2a88; font-size: 12px; border: 2px solid #da2a88; } .blog-inner .article-btn .happykiddo-btn:before { background: #f6f6f6; } .blog-inner .article-btn .happykiddo-btn:hover, .blog-inner .article-btn .happykiddo-btn:focus, .blog-inner .article-btn .happykiddo-btn:active { color: #da2a88; } .blog-inner .article-btn img.arrow { position: absolute; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .blog-inner .article-btn img.arrow-blue { top: -3px; right: 160px; } .blog-inner .article-btn img.arrow-yellow { top: 25px; right: 170px; } .parties-inner div.article header, .portfolio-inner div.article header { margin-bottom: 15px; } .parties-inner div.article header ul, .portfolio-inner div.article header ul { padding: 0; margin: 0 0 8px 0; } .parties-inner div.article header ul li, .portfolio-inner div.article header ul li { display: inline-block; padding-right: 20px; } .parties-inner div.article header ul li i, .portfolio-inner div.article header ul li i { margin-right: 5px; } .parties-inner div.article header ul.article-tags, .portfolio-inner div.article header ul.article-tags { text-transform: uppercase; font-size: 11px; } .parties-inner div.article header ul.article-tags a, .portfolio-inner div.article header ul.article-tags a { color: #96c667; } .parties-inner div.article header ul.article-info, .portfolio-inner div.article header ul.article-info { color: #bebebe; font-size: 12px; } .parties-inner div.article header ul.article-info a, .portfolio-inner div.article header ul.article-info a { color: #96c667; } .parties-inner .article-single, .portfolio-inner .article-single { margin-bottom: 20px; } .parties-inner .article-single .comment-trigger, .portfolio-inner .article-single .comment-trigger { color: #da2a88; font-weight: 600; background-color: #ffffff; border: 2px solid #da2a88; border-radius: 3px; padding: 7px 20px; margin: 10px 3px 0 3px; font-size: 12px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .parties-inner .article-single .comment-trigger:before, .portfolio-inner .article-single .comment-trigger:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #da2a88; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .parties-inner .article-single .comment-trigger:hover, .portfolio-inner .article-single .comment-trigger:hover, .parties-inner .article-single .comment-trigger:focus, .portfolio-inner .article-single .comment-trigger:focus, .parties-inner .article-single .comment-trigger:active, .portfolio-inner .article-single .comment-trigger:active { color: #ffffff; text-decoration: none; } .parties-inner .article-single .comment-trigger:hover:before, .portfolio-inner .article-single .comment-trigger:hover:before, .parties-inner .article-single .comment-trigger:focus:before, .portfolio-inner .article-single .comment-trigger:focus:before, .parties-inner .article-single .comment-trigger:active:before, .portfolio-inner .article-single .comment-trigger:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } .parties-inner .article-single .comment-trigger i, .portfolio-inner .article-single .comment-trigger i { margin-right: 5px; } .parties-inner .article-single .gallery, .portfolio-inner .article-single .gallery { padding: 0 10px; } .parties-inner .article-single .gallery .col, .portfolio-inner .article-single .gallery .col { padding-left: 5px; padding-right: 5px; } .parties-inner .article-single .gallery .gallery-col, .portfolio-inner .article-single .gallery .gallery-col { position: relative; margin-bottom: 10px; border-radius: 5px; overflow: hidden; } .parties-inner .article-single .gallery .gallery-col .mask, .portfolio-inner .article-single .gallery .gallery-col .mask { opacity: 0; overflow: visible; border: 0px solid rgba(0, 0, 0, 0.7); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; padding: 7px; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; transition: all 0.35s ease-in; } .parties-inner .article-single .gallery .gallery-col .mask a, .portfolio-inner .article-single .gallery .gallery-col .mask a { color: #ffffff; } .parties-inner .article-single .gallery .gallery-col .mask a:hover, .portfolio-inner .article-single .gallery .gallery-col .mask a:hover { text-decoration: none; } .parties-inner .article-single .gallery .gallery-col .mask .mask-btn, .portfolio-inner .article-single .gallery .gallery-col .mask .mask-btn { position: relative; height: 100%; vertical-align: middle; background-color: rgba(0, 0, 0, 0.5); z-index: 101; text-align: center; } .parties-inner .article-single .gallery .gallery-col .mask .mask-btn i, .portfolio-inner .article-single .gallery .gallery-col .mask .mask-btn i { border-radius: 50%; background-color: #da2a88; color: #ffffff; padding: 10px; margin-top: 50px; margin-bottom: 5px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.5); transform: scale(1.5); } .parties-inner .article-single .gallery .gallery-col .mask .mask-btn span, .portfolio-inner .article-single .gallery .gallery-col .mask .mask-btn span { display: block; font-size: 12px; } .parties-inner .article-single .gallery .gallery-col:hover .mask, .portfolio-inner .article-single .gallery .gallery-col:hover .mask { opacity: 1; } .parties-inner .article-single .gallery .gallery-col:hover .mask .mask-btn i, .portfolio-inner .article-single .gallery .gallery-col:hover .mask .mask-btn i { -webkit-transform: scale(1); transform: scale(1); } .parties-inner .article-single .gallery .gallery-col:hover .mask .mask-btn i:hover, .portfolio-inner .article-single .gallery .gallery-col:hover .mask .mask-btn i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .parties-inner .article-btn, .portfolio-inner .article-btn { background-color: #f6f6f6; border-radius: 5px; position: relative; padding: 15px 10px; margin-bottom: 20px; } .parties-inner .article-btn .btn-right, .portfolio-inner .article-btn .btn-right { position: relative; } .parties-inner .article-btn .btn-right:hover img.arrow, .portfolio-inner .article-btn .btn-right:hover img.arrow { -webkit-animation-name: hvr-wobble-horizontal; animation-name: hvr-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .parties-inner .article-btn p, .portfolio-inner .article-btn p { font-size: 13px; font-weight: 600; } .parties-inner .article-btn .happykiddo-btn, .portfolio-inner .article-btn .happykiddo-btn { color: #ffffff; font-weight: 600; background-color: #da2a88; font-size: 12px; border: 2px solid #da2a88; } .parties-inner .article-btn .happykiddo-btn:before, .portfolio-inner .article-btn .happykiddo-btn:before { background: #f6f6f6; } .parties-inner .article-btn .happykiddo-btn:hover, .portfolio-inner .article-btn .happykiddo-btn:hover, .parties-inner .article-btn .happykiddo-btn:focus, .portfolio-inner .article-btn .happykiddo-btn:focus, .parties-inner .article-btn .happykiddo-btn:active, .portfolio-inner .article-btn .happykiddo-btn:active { color: #da2a88; } .parties-inner .article-btn img.arrow, .portfolio-inner .article-btn img.arrow { position: absolute; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; } .parties-inner .article-btn img.arrow-blue, .portfolio-inner .article-btn img.arrow-blue { top: -3px; right: 160px; } .parties-inner .article-btn img.arrow-yellow, .portfolio-inner .article-btn img.arrow-yellow { top: 25px; right: 170px; } .parties-inner aside .parties-info, .portfolio-inner aside .parties-info { background-color: #f6f6f6; border-radius: 5px; padding: 20px 20px; font-size: 12px; line-height: 15px; margin-bottom: 15px; text-align: justify; text-justify: inter-word; } .parties-inner aside .parties-info h3, .portfolio-inner aside .parties-info h3 { font-family: 'Ubuntu', sans-serif; font-size: 15px; margin: 0 0 15px 0; line-height: 20px; } .parties-inner aside .parties-info h3:after, .portfolio-inner aside .parties-info h3:after { content: ""; width: 40px; height: 1px; background-color: #da2a88; display: block; position: relative; top: 5px; } .parties-inner aside .parties-info div, .portfolio-inner aside .parties-info div { margin-top: 5px; } .parties-inner aside .parties-info div span, .portfolio-inner aside .parties-info div span { color: #da2a88; font-weight: 600; margin-bottom: 2px; display: inline-block; } .parties-inner aside .parties-price, .portfolio-inner aside .parties-price { background-color: #f6f6f6; border-radius: 5px; padding: 20px 20px 25px 20px; font-size: 12px; line-height: 15px; margin-bottom: 15px; text-align: justify; text-justify: inter-word; } .parties-inner aside .parties-price h3, .portfolio-inner aside .parties-price h3 { font-family: 'Ubuntu', sans-serif; font-size: 15px; margin: 0; line-height: 20px; } .parties-inner aside .parties-price h3:after, .portfolio-inner aside .parties-price h3:after { content: ""; width: 40px; height: 1px; background-color: #da2a88; display: block; position: relative; top: 5px; } .parties-inner aside .parties-price p, .portfolio-inner aside .parties-price p { font-family: 'Ubuntu', sans-serif; font-size: 20px; margin: 0; line-height: 20px; font-weight: 600; color: #da2a88; } .parties-inner aside .parties-description, .portfolio-inner aside .parties-description { background-color: #f6f6f6; border-radius: 5px; padding: 20px 20px; font-size: 12px; line-height: 15px; margin-bottom: 15px; text-align: justify; text-justify: inter-word; } .parties-inner aside .parties-description h3, .portfolio-inner aside .parties-description h3 { font-family: 'Ubuntu', sans-serif; font-size: 15px; margin: 0 0 15px 0; line-height: 20px; } .parties-inner aside .parties-description h3:after, .portfolio-inner aside .parties-description h3:after { content: ""; width: 40px; height: 1px; background-color: #da2a88; display: block; position: relative; top: 5px; } .inner-team-page .header-box-inner .container { padding: 50px 10px; } .inner-team-page .header-box-inner h2 { font-size: 38px; line-height: 50px; } .inner-team-page .header-box-inner .arrow { position: absolute; top: 30px; right: 80px; -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .inner-team-page .header-box-inner .team-info { margin-top: 20px; } .inner-team-page .header-box-inner .team-info .row1 h3 { font-family: 'Ubuntu', sans-serif; font-size: 22px; line-height: 18px; display: inline-block; margin-right: 30px; float: left; position: relative; top: 7px; } .inner-team-page .header-box-inner .team-info .row1 ul { display: inline-block; padding: 0; } .inner-team-page .header-box-inner .team-info .row2 { color: #d5d5d5; font-weight: 600; } .inner-team-page .header-box-inner .team-info .row3 { margin-top: 20px; } .inner-team-page .header-box-inner .team-info .row3 span { display: block; margin-right: 10px; font-size: 15px; } .inner-team-page .header-box-inner .team-info .row3 span:first-child { margin-bottom: 8px; } .inner-team-page .header-box-inner .team-info .row3 span:first-child i { margin-right: 10px; } .inner-team-page .header-box-inner .team-info .row3 span:nth-child(2) i { margin-right: 12px; top: 2px; position: relative; margin-left: 2px; } .inner-team-page .header-box-inner .team-info .row3 a.filled-btn { color: #ffffff; background-color: #da2a88; border: 2px solid #da2a88; font-size: 12px; } .inner-team-page .header-box-inner .team-info .row3 a.filled-btn:before { background: #313131; } .inner-team-page .header-box-inner .team-info .row3 a.filled-btn:hover, .inner-team-page .header-box-inner .team-info .row3 a.filled-btn:focus, .inner-team-page .header-box-inner .team-info .row3 a.filled-btn:active { color: #ffffff; } .inner-team-page .header-box-inner .col-info { padding-left: 15px; padding-right: 15px; } .inner-team-page .header-box-inner .col-img { position: relative; } .inner-team-page .header-box-inner .col-img .team-img { position: absolute; background: #ffffff; border: 1px solid #f1f1f1; border-radius: 5px; padding: 7px; width: 260px; height: 260px; z-index: 100; } .inner-team-page .header-box-inner .col-img .team-img1 { top: 0; left: 40px; -ms-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .inner-team-page .header-box-inner .col-img .team-img1 .pin { position: absolute; top: -47px; left: 120px; z-index: 1001; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .inner-team-page .header-box-inner .col-img .team-img2 { top: 0; left: 220px; -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .inner-team-page .header-box-inner .col-img .team-img2 .pin { position: absolute; top: -25px; left: 40px; z-index: 1001; -webkit-animation-delay: 1s; animation-delay: 1s; } aside .team-all.aside-section { border: 1px solid #f1f1f1; border-radius: 5px; padding-top: 6px; overflow: hidden; } aside .team-all.aside-section img { border-radius: 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } aside .team-all.aside-section .col-height { padding: 0; } aside .team-all.aside-section .row-height { padding: 6px 12px; } aside .team-all.aside-section .row-height:hover img { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } aside .team-all.aside-section .name { margin-left: 15px; font-size: 15px; font-weight: 600; margin-bottom: 3px; } aside .team-all.aside-section .name a { color: #313131; } aside .team-all.aside-section .position { margin-left: 15px; font-size: 12px; font-weight: 600; } aside .team-all.aside-section .position a { color: #da2a88; } aside .team-all.aside-section .row-more { background-color: #f6f6f6; margin-top: 10px; transition: all 0.25s ease-in; } aside .team-all.aside-section .row-more:hover { background-color: #f48e40; } aside .team-all.aside-section .row-more:hover a { color: #ffffff; text-decoration: none; } aside .team-all.aside-section .row-more a { color: #da2a88; font-weight: 600; font-size: 12px; display: block; padding: 7px 12px; transition: all 0.25s ease-in; } @media screen and (max-width:767px) { .inner-team-page .header-box-inner .arrow, .inner-team-page .header-box-inner .col-img .team-img1 { display: none; } .inner-team-page .header-box-inner .col-img .team-img { position: relative; left: 0; right: 0; margin: 0 auto; } .inner-team-page .header-box-inner .team-info .row3 a.filled-btn { margin-top: 20px; margin-bottom: 60px; } } .bar { height: 28px; background: #f6f6f6; text-align: left; width: 90%; border-radius: 5px; overflow: hidden; margin-bottom: 8px; color: #ffffff; font-weight: 600; } .level { height: 28px; width: 80%; padding-top: 5px; padding-left: 20px; font-size: 13px; overflow: hidden; } .first.start { width: 0px; background: #da2a88; -webkit-animation: first 2s ease-out forwards; -moz-animation: first 2s ease-out forwards; -ms-animation: first 2s ease-out forwards; -o-animation: first 2s ease-out forwards; animation: first 2s ease-out forwards; } .second.start { width: 0px; background: #03b9d7; -webkit-animation: second 2s ease-out forwards; -moz-animation: second 2s ease-out forwards; -ms-animation: second 2s ease-out forwards; -o-animation: second 2s ease-out forwards; animation: second 2s ease-out forwards; } .third.start { width: 0px; background: #f48e40; -webkit-animation: third 2s ease-out forwards; -moz-animation: third 2s ease-out forwards; -ms-animation: third 2s ease-out forwards; -o-animation: third 2s ease-out forwards; animation: third 2s ease-out forwards; } .fourth.start { width: 0px; background: #96c667; -webkit-animation: fourth 2s ease-out forwards; -moz-animation: fourth 2s ease-out forwards; -ms-animation: fourth 2s ease-out forwards; -o-animation: fourth 2s ease-out forwards; animation: fourth 2s ease-out forwards; } @-moz-keyframes first { 0% { width: 0px; } 100% { width: 95%; } } @-webkit-keyframes first { 0% { width: 0px; } 100% { width: 95%; } } @-moz-keyframes second { 0% { width: 0px; } 100% { width: 99%; } } @-webkit-keyframes second { 0% { width: 0px; } 100% { width: 99%; } } @-moz-keyframes third { 0% { width: 0px; } 100% { width: 92%; } } @-webkit-keyframes third { 0% { width: 0px; } 100% { width: 92%; } } @-moz-keyframes fourth { 0% { width: 0px; } 100% { width: 80%; } } @-webkit-keyframes fourth { 0% { width: 0px; } 100% { width: 80%; } } .site-widget.aside-section { margin-bottom: 27px; font-size: 12px; line-height: 15px; } .site-widget.aside-section h2 { font-size: 22px; margin-bottom: 10px; } .site-widget.aside-section h2:after { content: ""; width: 40px; height: 2px; background-color: #da2a88; display: block; margin-top: 13px; } .gallery-widget .row { padding: 0 10px; } .gallery-widget .gallery-col { padding: 5px; } .gallery-widget .gallery-col .img-box-border { height: 80px; border: 1px solid #f1f1f1; border-radius: 5px; padding: 4px; } .gallery-widget .gallery-col .img-box-border .img-box { height: 70px; overflow: hidden; position: relative; } .gallery-widget .gallery-col .img-box-border img { max-width: 130px; min-height: 80px; height: auto; position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; } .gallery-widget .gallery-col .img-box-border .mask { opacity: 0; overflow: visible; border: 0px solid rgba(0, 0, 0, 0.7); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; transition: all 0.35s ease-in; } .gallery-widget .gallery-col .img-box-border .mask a { color: #ffffff; } .gallery-widget .gallery-col .img-box-border .mask a:hover { text-decoration: none; } .gallery-widget .gallery-col .img-box-border .mask .mask-btn { position: relative; height: 100%; vertical-align: middle; background-color: rgba(0, 0, 0, 0.5); z-index: 101; } .gallery-widget .gallery-col .img-box-border .mask .mask-btn i { border-radius: 50%; background-color: #da2a88; color: #ffffff; padding: 10px; margin-top: 30%; margin-bottom: 5px; font-size: 12px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.5); transform: scale(1.5); } .gallery-widget .gallery-col .img-box-border .mask .mask-btn span { display: block; font-size: 12px; } .gallery-widget .gallery-col .img-box-border:hover .mask { opacity: 1; } .gallery-widget .gallery-col .img-box-border:hover .mask .mask-btn i { -webkit-transform: scale(1); transform: scale(1); } .gallery-widget .gallery-col .img-box-border:hover .mask .mask-btn i:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } .header-widget p { text-align: justify; text-justify: inter-word; } .who-we-are-section2 .col-height { vertical-align: bottom; } .cta, .cta2 { padding: 30px 0; } .cta h2 { font-family: 'Ubuntu', sans-serif; color: #ffffff; font-size: 22px; text-shadow: 1px 1px 2px #969696; font-weight: 500; line-height: 1.4; } .cta2 h2 { font-family: 'Ubuntu', sans-serif; color: #ffffff; font-size: 22px; font-weight: 500; } .cta .happykiddo-btn, .cta2 .happykiddo-btn { color: #03b9d7; font-weight: 600; background-color: #ffffff; font-size: 15px; border: 2px solid #ffffff; border-radius: 3px; padding: 12px 25px; margin: 0 3px; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; text-transform: uppercase; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25); } .cta .happykiddo-btn:before, .cta2 .happykiddo-btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #03b9d7; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .cta .happykiddo-btn:hover, .cta .happykiddo-btn:focus, .cta .happykiddo-btn:active, .cta2 .happykiddo-btn:hover, .cta2 .happykiddo-btn:focus, .cta2 .happykiddo-btn:active { color: #ffffff; text-decoration: none; } .cta .happykiddo-btn:hover:before, .cta .happykiddo-btn:focus:before, .cta .happykiddo-btn:active:before, .cta2 .happykiddo-btn:hover:before, .cta2 .happykiddo-btn:focus:before, .cta2 .happykiddo-btn:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } #calendar { padding: 0 15px; } .calendar-description { font-size: 18px; font-weight: 600; } .calendar-description i { color: #bebebe; } .fc-header td { white-space: nowrap; } .fc-header-left { width: 25%; text-align: left; } .fc-header-center { text-align: center; } .fc-header-right { width: 25%; text-align: right; } .fc-header-title { display: inline-block; vertical-align: top; } .fc-header-title { margin-top: 0; white-space: nowrap; font-size: 38px; padding: 15px 0 20px 0; } .fc-header-title span { color: #da2a88; } .fc .fc-header-space { padding-left: 10px; } .fc-header .fc-button { margin-bottom: 1em; vertical-align: top; } .fc-header .fc-button { margin-right: -1px; } .fc-header .fc-corner-right, .fc-header .ui-corner-right { margin-right: 0; } .fc-header .fc-state-hover, .fc-header .ui-state-hover { z-index: 2; } .fc-header .fc-state-down { z-index: 3; } .fc-header .fc-state-active, .fc-header .ui-state-active { z-index: 4; } .fc-content { clear: both; } .fc-view { width: 100%; overflow: hidden; } .fc-widget-header, .fc-widget-content { border: 1px solid #ddd; } .fc-state-highlight { background: #fcf8e3; } .fc-cell-overlay { background: #bce8f1; opacity: .3; filter: alpha(opacity=30); } .fc-button { position: relative; display: inline-block; padding: 0 .6em; overflow: hidden; height: 1.9em; line-height: 1.9em; white-space: nowrap; cursor: pointer; } .fc-state-default { border: 1px solid; } .fc-state-default.fc-corner-left { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .fc-state-default.fc-corner-right { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .fc-text-arrow { margin: 0 .1em; font-size: 2em; font-family: "Courier New", Courier, monospace; vertical-align: baseline; } .fc-button-prev .fc-text-arrow, .fc-button-next .fc-text-arrow { font-weight: bold; } .fc-button .fc-icon-wrap { position: relative; float: left; top: 50%; } .fc-button .ui-icon { position: relative; float: left; margin-top: -50%; *margin-top: 0; *top: -50%; } .fc-state-default { background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #333; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } .fc-state-hover, .fc-state-down, .fc-state-active, .fc-state-disabled { color: #333333; background-color: #e6e6e6; } .fc-state-hover { color: #333333; text-decoration: none; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } .fc-state-down, .fc-state-active { background-color: #cccccc; background-image: none; outline: 0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .fc-state-disabled { cursor: default; background-image: none; opacity: 0.65; filter: alpha(opacity=65); box-shadow: none; } table.fc-border-separate { border-collapse: separate; } .fc-border-separate th, .fc-border-separate td { border-width: 1px 0 0 1px; } .fc-border-separate th.fc-last, .fc-border-separate td.fc-last { border-right-width: 1px; } .fc-border-separate tr.fc-last th, .fc-border-separate tr.fc-last td { border-bottom-width: 1px; } .fc-border-separate tbody tr.fc-first td, .fc-border-separate tbody tr.fc-first th { border-top-width: 0; } .fc-grid th { text-align: center; } .fc .fc-week-number { width: 22px; text-align: center; } .fc .fc-week-number div { padding: 0 2px; } .fc-grid .fc-day-number { float: right; padding: 0 2px; } .fc-grid .fc-other-month .fc-day-number { opacity: 0.3; filter: alpha(opacity=30); } .fc-grid .fc-day-content { clear: both; position: absolute; bottom: 0; width: 100%; } .fc-grid .fc-day-content div { background-color: #e5e5e5; padding: 10px; font-size: 13px; line-height: 16px; } .fc-grid .fc-day-content div a { color: #ffffff; } .fc-grid .fc-day-content div a:hover { text-decoration: none; } .fc-agenda table { border-collapse: separate; } .fc-agenda-days th { text-align: center; } .fc-agenda .fc-agenda-axis { width: 50px; padding: 0 4px; vertical-align: middle; text-align: right; white-space: nowrap; font-weight: normal; } .fc-agenda .fc-week-number { font-weight: bold; } .fc-agenda .fc-day-content { padding: 2px 2px 1px; } .fc-agenda-days .fc-agenda-axis { border-right-width: 1px; } .fc-agenda-days .fc-col0 { border-left-width: 0; } .fc-agenda-allday th { border-width: 0 1px; } .fc-agenda-allday .fc-day-content { min-height: 34px; } .fc-agenda-divider-inner { height: 2px; overflow: hidden; } .fc-widget-header .fc-agenda-divider-inner { background: #eee; } .fc-agenda-slots th { border-width: 1px 1px 0; } .fc-agenda-slots td { border-width: 1px 0 0; background: none; } .fc-agenda-slots td div { height: 20px; } .fc-agenda-slots tr.fc-slot0 th, .fc-agenda-slots tr.fc-slot0 td { border-top-width: 0; } .fc-agenda-slots tr.fc-minor th, .fc-agenda-slots tr.fc-minor td { border-top-style: dotted; } .fc-agenda-slots tr.fc-minor th.ui-widget-header { *border-top-style: solid; } .fc-agenda .ui-resizable-resizing { _overflow: hidden; } body .calendar { margin-bottom: 20px; } body .calendar .fc-header { margin-bottom: 10px; } body .calendar .fc-header .fc-button-effect { display: none; } body .calendar .fc-header .fc-header-left .fc-button, body .calendar .fc-header .fc-header-right .fc-button { background: none; border: none; } body .calendar .fc-header .fc-header-left .fc-button.fc-button-prev, body .calendar .fc-header .fc-header-right .fc-button.fc-button-prev { background: center center !important; text-indent: -9999px; width: 36px; height: 24px; padding: 0; opacity: 0.3; filter: alpha(opacity=30); } body .calendar .fc-header .fc-header-left .fc-button.fc-button-prev:hover, body .calendar .fc-header .fc-header-right .fc-button.fc-button-prev:hover { opacity: 1; filter: alpha(opacity=100); } body .calendar .fc-header .fc-header-left .fc-button.fc-button-next, body .calendar .fc-header .fc-header-right .fc-button.fc-button-next { text-indent: -9999px; width: 36px; height: 24px; padding: 0; opacity: 0.3; filter: alpha(opacity=30); } body .calendar .fc-header .fc-header-left .fc-button.fc-button-next:hover, body .calendar .fc-header .fc-header-right .fc-button.fc-button-next:hover { opacity: 1; filter: alpha(opacity=100); } body .calendar .fc-header .fc-header-left .fc-button.fc-state-default, body .calendar .fc-header .fc-header-right .fc-button.fc-state-default { box-shadow: none; text-shadow: none; background: #f5f5f5; } body .calendar .fc-header .fc-header-left .fc-button.fc-state-active, body .calendar .fc-header .fc-header-right .fc-button.fc-state-active { background: #313131; color: #fff; box-shadow: none; } body .calendar .fc-header .fc-header-left .fc-button .fc-button-inner, body .calendar .fc-header .fc-header-right .fc-button .fc-button-inner { background: none; border: none; color: #bbb; font-weight: 300; font-family: 'Roboto', Helvetica, sans-serif; text-transform: uppercase; font-size: 18px; } body .calendar .fc-header .fc-header-left .fc-button .fc-button-inner .fc-button-content, body .calendar .fc-header .fc-header-right .fc-button .fc-button-inner .fc-button-content { line-height: 48px; -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease; } body .calendar .fc-header .fc-header-left .fc-button:hover .fc-button-inner, body .calendar .fc-header .fc-header-right .fc-button:hover .fc-button-inner { color: #333; } body .calendar .fc-header .fc-header-left .fc-button.fc-state-active .fc-button-inner, body .calendar .fc-header .fc-header-right .fc-button.fc-state-active .fc-button-inner { color: #333; font-weight: 400; } body .calendar .fc-content .fc-state-highlight { background: #f5f5f5; } body .calendar .fc-content .fc-view-month table thead th { border: none; padding: 10px 0; font-size: 14px; color: #313131; } body .calendar .fc-content .fc-view-month table tbody tr td.fc-widget-content { border: #fff solid 2px; background: #f5f5f5; margin: 3px 3px; position: relative; } body .calendar .fc-content .fc-view-month table tbody tr td .fc-day-number { font-size: 20px; font-weight: 300; margin: 15px; } body .calendar .fc-content .fc-view-agendaWeek table.fc-agenda-days thead th { border: none; } body .calendar .fc-content .fc-view-agendaWeek table.fc-agenda-days tbody tr td { border: none; } body .calendar .fc-content .fc-view-agendaWeek table.fc-agenda-days tbody tr td.fc-widget-content { border: #fff solid 2px; background: #f5f5f5; margin: 3px 3px; padding: 10px; } body .calendar .fc-content .fc-view-agendaWeek table.fc-agenda-days tbody tr td.fc-state-highlight { background: #ddd; } body .calendar .fc-content .fc-view-agendaWeek table.fc-agenda-allday thead th { border: none !important; } body .calendar .fc-content .fc-view-agendaWeek table.fc-agenda-slots tr th.fc-agenda-axis { border: none !important; background: #fff; } body .calendar .fc-content .fc-view-agendaWeek table.fc-agenda-slots tr td.fc-widget-content { background: none; border: #fff solid 2px; border-bottom-width: 1px; } body .calendar .fc-content .fc-view-agendaWeek table.fc-agenda-slots tr.fc-minor { border-top: none; } body .calendar .fc-content .fc-view-agendaWeek table.fc-agenda-slots tr.fc-minor td.fc-widget-content { border-top: none; border-bottom-width: 2px; } body .calendar .fc-content .fc-border-separate tr.fc-last th, body .calendar .fc-content .fc-border-separate tr.fc-last td { border: none; } .fc { direction: ltr; text-align: left; } .fc table { border-collapse: collapse; border-spacing: 0; } html .fc, .fc table { font-size: 1em; } .fc td, .fc th { padding: 0; vertical-align: top; } .bg { background-image: url(http://www.ecampusnews.com/wp-content/blogs.dir/3/files/2011/03/students633.jpg); background-size: 100% 100%; content: ""; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated-sm { -webkit-animation-delay: .25s; animation-delay: .25s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-md { -webkit-animation-delay: .5s; animation-delay: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-lg { -webkit-animation-delay: .75s; animation-delay: .75s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-xl { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-xxl { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-xxxl { -webkit-animation-delay: 1.60s; animation-delay: 1.60s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-xxxxl { -webkit-animation-delay: 1.75s; animation-delay: 1.75s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-long { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-longer { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-longest { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flassh; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } body .flip-container { width: 100%; } body .flip-container .flipper { position: relative; } body .flip-container .flipper .front, body .flip-container .flipper .back { left: 0; position: absolute; top: 0; width: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: perspective(1000px) rotateY(180deg); -moz-transform: perspective(1000px) rotateY(180deg); -o-transform: perspective(1000px) rotateY(180deg); transform: perspective(1000px) rotateY(180deg); -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; } body .flip-container .flipper .front { z-index: 2; -webkit-transform: perspective(1000px) rotateY(0); -moz-transform: perspective(1000px) rotateY(0); -o-transform: perspective(1000px) rotateY(0); transform: perspective(1000px) rotateY(0); } body .flip-container:hover .flipper .front { -webkit-animation: 0; opactity: 0; -webkit-transform: perspective(1000px) rotateY(-179.9deg); -moz-transform: perspective(1000px) rotateY(-179.9deg); -o-transform: perspective(1000px) rotateY(-179.9deg); transform: perspective(1000px) rotateY(-179.9deg); } body .flip-container:hover .flipper .back { opcaity: .1; position: absolute; z-index: 3; -webkit-transform: perspective(1000px) rotateY(0); -moz-transform: perspective(1000px) rotateY(0); -o-transform: perspective(1000px) rotateY(0); transform: perspective(1000px) rotateY(0); } .floating { animation-name: floating; -webkit-animation-name: floating; -moz-animation-name: floating; -o-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } @-moz-keyframes floating { 0% { -moz-transform: translateY(0%); } 50% { -moz-transform: translateY(8%); } 100% { -moz-transform: translateY(0%); } } @-o-keyframes floating { 0% { -o-transform: translateY(0%); } 50% { -o-transform: translateY(8%); } 100% { -o-transform: translateY(0%); } } .jumbo-profile { background: #2c3e50; color: #fff; } .jumbo-docs { background: #ecf0f1; color: ; } .jumbo-docs-well { background: ; } .jumbo-singledoc { background: #34495e; } .profile-jumbo-text .small { color: #fff; } .progress { background: transparent !important; box-shadow: none !important; height: 5px; border-radius: 2px; margin-bottom: 10px; } .fc-state-default { background-color: #fff; background-image: none; background-repeat: none; border-color: #ccc; color: #333; text-shadow: none; box-shadow: none; } .fc-state-default:hover { color: #333; background-color: #ebebeb; border-color: #adadad; } .stylish { display: block; width: 100px; height: 100px; border-radius: 66px; border: 4px double #ccc; font-size: 20px; color: #666; line-height: 100px; text-align: center; text-decoration: none; text-shadow: 0 1px 0 #fff; background: #ddd; } .stylish:hover { border: 4px double #bbb; color: #aaa; text-decoration: none; background: #e6e6e6; } .overview-expand { -webkit-transition: all 1s ease-out; } .overview-tabs-expand { -webkit-transition-delay: 2s; opacity: 1; } .ty-page { padding: 0; } .section-ty { background: url(../images/happykiddo_1800x600_2.jpg) top left repeat; color: #ffffff; min-height: 280px; } .section-ty img { position: absolute; left: 0; right: 0; bottom: -161px; margin-left: auto; margin-right: auto; } .section-ty .container { height: 100%; } .ty-page .content { padding: 60px 0 50px 0; overflow: hidden; } .ty-page h3 { font-family: 'Ubuntu', sans-serif; font-size: 18px; text-transform: uppercase; } .ty-page p { font-size: 16px; } .ty-page #order-info { margin-top: 20px; } .ty-page #order-info p { margin: 5px; } .ty-page #order-info p.head { text-transform: uppercase; font-size: 12px; } .ty-page #order-info td { border-right: 1px dotted gray; border-top: 0; padding: 0 15px; } .ty-page #order-info td:last-child { border: 0; } @media (max-width:980px) { .section-ty { overflow: hidden; } } .page404 { position: fixed; top: 0; z-index: 100; width: 100%; height: 100%; text-align: center; -webkit-backface-visibility: hidden; background: #1b1b1b url(../images/happykiddo_300x300_2.jpg) top left repeat; } .page404 .bottom { position: absolute; bottom: 0; width: 100%; height: 10%; background: #fdcf42; } .page404 .container.center { height: 100%; position: relative; } .page404 .sadman { position: absolute; bottom: 4%; right: 18%; } .page404 .quote { background: url(../images/happykiddo_steps-quote-big.png) top left no-repeat; color: #ffffff; width: 200px; height: 184px; display: table; font-size: 48px; font-weight: 600; line-height: 30px; position: absolute; bottom: 450px; right: 40%; line-height: 48px; padding: 37px 0 0 0; } .page404 .text { text-align: left; border-left: 2px solid #fff; padding: 10px 0 10px 20px; color: #fff; font-size: 24px; position: absolute; width: 320px; bottom: 260px; left: 18%; } .page404 .text p { margin: 0 0 15px 0; } .page404 .arrow { position: absolute; bottom: 350px; right: 46%; } a.new:before { content: 'New'; display: inline-block; font-size: 11px; float: right; background-color: #96c667; border-radius: 50%; width: 30px; height: 30px; text-align: center; line-height: 30px; color: #fff; padding: 0px 0 0 0px; position: relative; top: -5px; right: -17px; } @media screen and (max-width:767px) { .page404 .arrow { display: none; } } .cs { overflow: hidden; } .cs-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .cs-container a.cs-link { font-size: 20px; padding-top: 10px; text-align: center; } .cs-container input.cs-input, .cs-container a.cs-link { position: fixed; right: 0; cursor: pointer; width: 50px; height: 50px; line-height: 34px; } .cs-container input.cs-input { opacity: 0; z-index: 1000; } .cs-container a.cs-link { z-index: 10; font-weight: 700; background: #ee4336; color: #fff; text-align: center; right: 0; text-shadow: 1px 1px 1px rgba(151, 24, 64, 0.2); } #cs-control-1, #cs-control-1+a.cs-link { top: 50px; } #cs-control-2, #cs-control-2+a.cs-link { top: 105px; } #cs-control-3, #cs-control-3+a.cs-link { top: 160px; } .cs-container input:checked+a.cs-link, .cs-container input:checked:hover+a.cs-link { background: #3ca2d9; } .cs-container input:hover+a.cs-link { background: #3ca2d9; } .cs-scroll, .cs-panel { position: relative; width: 100%; height: 100%; } .cs-scroll { top: 0; left: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; } .cs-panel { overflow: hidden; } #cs-control-1:checked~.cs-scroll { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } #cs-control-2:checked~.cs-scroll { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } #cs-control-3:checked~.cs-scroll { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); } #cs-control-4:checked~.cs-scroll { -webkit-transform: translateY(-300%); -moz-transform: translateY(-300%); -o-transform: translateY(-300%); -ms-transform: translateY(-300%); transform: translateY(-300%); } #cs-control-5:checked~.cs-scroll { -webkit-transform: translateY(-400%); -moz-transform: translateY(-400%); -o-transform: translateY(-400%); -ms-transform: translateY(-400%); transform: translateY(-400%); } .cs-static { position: fixed; top: 0; left: 0; z-index: 100000; height: 100%; width: 25%; padding: 0; } .cs-static .static-head { height: 55%; padding: 20px; position: relative; overflow: hidden; background: url('../images/happykiddo_300x300_2.jpg') top left repeat; } .cs-static .static-head h2 { font-family: 'Ubuntu', sans-serif; font-size: 34px; line-height: 34px; top: 10%; position: relative; z-index: 10; } .cs-static .static-head h2 span { font-family: 'Atma', cursive; } .cs-static .static-head .img-bottom { position: absolute; bottom: 0; z-index: 1; } .cs-static .static-cont { background-color: #ee4336; color: #fff; height: 45%; } .cs-static .static-cont .countdown { font-family: 'Montserrat', sans-serif; letter-spacing: -0.5px; position: relative; top: 30px; margin-bottom: 50px; } .cs-static .static-cont .countdown .count-top { background: #97cc63; border-radius: 5px; margin: 0 auto; display: block; width: 240px; text-align: center; position: relative; } .cs-static .static-cont .countdown .count-top .num { font-size: 54px; font-weight: 600; } .cs-static .static-cont .countdown .count-top .title { font-size: 22px; border-bottom: 2px solid #fff; padding-bottom: 5px; position: relative; vertical-align: top; top: 14px; margin-left: 15px; } .cs-static .static-cont .countdown .count-bottom { margin: 0 auto; display: block; width: 240px; text-align: center; position: relative; } .cs-static .static-cont .countdown .count-bottom div { width: 74px; margin-right: 8px; border: 2px solid #fff; border-radius: 5px; float: left; padding: 5px 5px; margin-top: 10px; } .cs-static .static-cont .countdown .count-bottom div .num { width: 100%; font-size: 26px; display: block; border-bottom: 2px solid #fff; font-weight: 600; } .cs-static .static-cont .countdown .count-bottom div .title { font-size: 13px; } .cs-static .static-cont .countdown .count-bottom div:last-child { margin-right: 0; } .cs-static .static-cont .description { font-size: 18px; padding: 0 20px; position: relative; } .cs-static .static-cont .countdown .count-bottom .count-arrow { position: absolute; top: 60px; left: -40px; } .cs-static .static-cont ul { position: absolute; bottom: 5px; left: 20px; } .cs-static .static-cont ul li a { color: #fff; width: 20px; } .cs-static .static-cont ul li a:hover { color: #97cc63; } .cs-static .static-cont ul li span { margin-right: 10px; font-size: 15px; } .panel-left { width: 25%; float: left; height: 100%; } .panel-right { width: 75%; float: left; height: 100%; display: table; } .panel-right .content { display: table-cell; vertical-align: middle; padding: 0 50px; color: #fff; } .panel-right .content h2 { font-family: 'Ubuntu', sans-serif; color: #fff; font-size: 66px; line-height: 66px; text-transform: uppercase; } .panel-right .content h3 { font-family: 'Ubuntu', sans-serif; color: #fff; font-size: 40px; line-height: 40px; text-transform: uppercase; } #cs-panel-3 .contacts { margin-top: 20px; } #cs-panel-3 .contacts div { margin-bottom: 10px; } #cs-panel-3 .contacts div i { margin-right: 10px; } #cs-panel-3 .contact-form input, #cs-panel-3 .contact-form textarea { background-color: transparent; border: 1px solid #fff; } #cs-panel-3 .contact-form button { margin-left: 15px; } @media (min-width:981px) and (max-width:1200px) { .cs-static, .panel-left { width: 30%; } .panel-right { width: 70%; } } @media (max-width:980px) { .cs-static, .panel-left { width: 35%; } .panel-right { width: 65%; } .cs-static .static-cont .description, .cs-static .static-cont .countdown .count-bottom .count-arrow { display: none; } } @media (max-width:768px) { .cs-static { width: 100%; } .cs-scroll, .cs-static .static-cont .description, .cs-static .static-cont .countdown .count-bottom .count-arrow { display: none; } } .cs-page .second-row { background: url(../images/happykiddo-steps-bg.jpg) top left repeat; color: #ffffff; position: relative; padding-bottom: 40px; overflow: hidden; } .cs-page .second-row .steps-info { vertical-align: top; } .cs-page .countdown { display: inline-block; margin-top: 20px; margin-bottom: 20px; } .cs-page .countdown div { float: left; margin-right: 10px; } .cs-page .countdown .days { background: #97cc63; border: 2px solid #97cc63; border-radius: 5px; display: block; height: 115px; text-align: center; position: relative; padding: 8px 20px; } .cs-page .countdown .days span.title { font-size: 26px; border-bottom: 2px solid #fff; padding-bottom: 5px; position: relative; vertical-align: top; top: 14px; margin-left: 15px; } .cs-page .countdown .hours, .cs-page .countdown .minutes, .cs-page .countdown .seconds { width: 100px; margin-right: 10px; border: 2px solid #fff; border-radius: 5px; float: left; height: 115px; padding: 8px 5px; } .cs-page .countdown .hours .num, .cs-page .countdown .minutes .num, .cs-page .countdown .seconds .num { width: 100%; font-size: 43px; display: block; border-bottom: 2px solid #fff; margin-bottom: 5px; font-weight: 600; } .cs-page .countdown .hours .title, .cs-page .countdown .minutes .title, .cs-page .countdown .seconds .title { font-size: 15px; } .cs-page .countdown .days .num { font-size: 68px; font-weight: 600; } .cs-page h2 { font-family: 'Ubuntu', sans-serif; font-size: 28px; line-height: 28px; text-transform: uppercase; } @media screen and (max-width:767px) { .cs-page .steps-info { margin-bottom: 30px; } } .tc-modal { margin-top: 120px; } .tc-modal .content { padding: 10px 0 10px 10px; } .tc-modal .tc-content { max-height: 360px; padding-right: 20px; overflow-y: auto; } .tc-modal .tc-content::-webkit-scrollbar { width: 12px; } .tc-modal .tc-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); -webkit-border-radius: 10px; border-radius: 10px; } .tc-modal .tc-content::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255, 0, 0, 0.8); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } .tc-modal .tc-content::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 0, 0, 0.4); } .tc-modal .content-col { padding: 20px; } .tc-modal button.close { position: absolute; right: 16px; top: 10px; font-size: 38px; } .modal { z-index: 1000000; } div#main { padding-top: 140px; } #fvpp-blackout { display: none; z-index: 499; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #000; opacity: 0.5; } #my-welcome-message { z-index: 9999; position: fixed; width: 80%; left: 0; right: 0; max-width: 350px; top: 27% padding: 20px 2%; font-family: Calibri, Arial, sans-serif; background: #FFF; margin: 0 auto; max-height: 90%; 4px solid #337ab7 } #fvpp-close { position: absolute; top: 10px; right: 20px; cursor: pointer; } #fvpp-dialog h2 { font-size: 2em; margin: 0; } p.price { font-size: 16px; } #fvpp-dialog p { margin: 0; } .width25 { width: 25%; } .width75 { width: 75%; float: left; } @media (max-width:768px) { .width25 { width: 100%; } .width75 { width: 100%; float: left; } .nav>li { position: relative; display: block; background-color: #77DD77; } #my-welcome-message { overflow-y: scroll; height: 400px; top: 14%; } } .fancybox-wrap.fancybox-desktop.fancybox-type-image.fancybox-opened { top: 125px !important; } .fix { position: fixed; z-index: 99999; right: 0px; bottom: 34.8%; } .quick-en { position: fixed; left: 0; width: 49px; height: 140px; top: 180px; z-index: 999; } .quickbox-wrapper { position: relative; transform: translateX(-258px); -moz-transform: translateX(-258px); -webkit-transform: translateX(-258px); -o-transform: translateX(-258px); height: 146px; transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; -moz-transition: all 1s ease; width: 307px; } .quickbox { float: left; width: 258px; background: #2e2e2e; padding: 10px; } .openbox { transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -moz-transform: translateX(0px); transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; -moz-transition: all 1s ease; overflow: visible; height: 200px; } @media screen and (max-width: 767px) { .quickbox { height: 400px; overflow-y: scroll; } } .fix2 { position: fixed; z-index: 99999; right: 0px; bottom: 14.8%; } ul.fontbaba li { font-size: 19px; } /* ========================== ACCORDION ============================= */ .rs-accordion .card { margin-bottom: 10px; border-color: transparent; } .rs-accordion .card .card-header { color: #999999; padding: 0; border-color: transparent; } .rs-accordion .card .card-header:first-child { border-radius: 0; } .rs-accordion .card .btn, .rs-accordion .card .btn-primary, .rs-accordion .card .btn-secondary, .rs-accordion .card .btn-light, .rs-accordion .card .btn-ghost-light { display: block; width: 100%; text-align: left; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; background-color: #f2f2f2; color: #222222; font-size: initial; border-bottom: 4px solid #FD4D40; font-weight: 700; } .rs-accordion .card .btn.collapsed, .rs-accordion .card .collapsed.btn-primary, .rs-accordion .card .collapsed.btn-secondary, .rs-accordion .card .collapsed.btn-light, .rs-accordion .card .collapsed.btn-ghost-light { color: #222222; background-color: #f2f2f2; border-bottom-color: transparent; } .rs-accordion .card .btn:focus, .rs-accordion .card .btn-primary:focus, .rs-accordion .card .btn-secondary:focus, .rs-accordion .card .btn-light:focus, .rs-accordion .card .btn-ghost-light:focus { text-decoration: none; } .rs-accordion .card:first-of-type { border-top-left-radius: 0; border-top-right-radius: 0; } .rs-accordion .card:last-of-type { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .rs-accordion .title { font-size: 16px; margin: 0; padding: 0; } .rs-accordion .title .btn, .rs-accordion .title .btn-primary, .rs-accordion .title .btn-secondary, .rs-accordion .title .btn-light, .rs-accordion .title .btn-ghost-light { padding: 20px 50px; position: relative; } .rs-accordion .title .btn:hover, .rs-accordion .title .btn-primary:hover, .rs-accordion .title .btn-secondary:hover, .rs-accordion .title .btn-light:hover, .rs-accordion .title .btn-ghost-light:hover, .rs-accordion .title .btn:active, .rs-accordion .title .btn-primary:active, .rs-accordion .title .btn-secondary:active, .rs-accordion .title .btn-light:active, .rs-accordion .title .btn-ghost-light:active { text-decoration: none; } .rs-accordion .title .btn:before, .rs-accordion .title .btn-primary:before, .rs-accordion .title .btn-secondary:before, .rs-accordion .title .btn-light:before, .rs-accordion .title .btn-ghost-light:before { content: "\29BE"; color: #FD4D40; font-size: 24px; position: absolute; top: 17px; left: 0; line-height: 1; padding: 0 0px 0 20px; } .rs-accordion .title .btn.collapsed:before, .rs-accordion .title .collapsed.btn-primary:before, .rs-accordion .title .collapsed.btn-secondary:before, .rs-accordion .title .collapsed.btn-light:before, .rs-accordion .title .collapsed.btn-ghost-light:before { content: "\29BF"; color: #FD4D40; }