.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ct-div-block,
.oxy-post-content,
.ct-text-block,
.ct-headline,
.oxy-rich-text,
.ct-link-text { max-width: 100%; }
img { flex-shrink: 0; }
body * { min-height: 1px; }
}            .oxy-testimonial {
flex-direction: row;
align-items: center;
}
.oxy-testimonial .oxy-testimonial-photo-wrap {
order: 1;
}
.oxy-testimonial .oxy-testimonial-photo {
width: 125px;                height: 125px;                margin-right: 20px;
}
.oxy-testimonial .oxy-testimonial-photo-wrap, 
.oxy-testimonial .oxy-testimonial-author-wrap, 
.oxy-testimonial .oxy-testimonial-content-wrap {
align-items: flex-start;                text-align: left;            }
.oxy-testimonial .oxy-testimonial-text {
margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
}
.oxy-testimonial .oxy-testimonial-author {
font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
}
.oxy-testimonial .oxy-testimonial-author-info {
font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
}
.oxy-icon-box {
text-align: left;                flex-direction: column;            }
.oxy-icon-box .oxy-icon-box-icon {
margin-bottom: 12px;
align-self: flex-start;            }
.oxy-icon-box .oxy-icon-box-heading {
font-size: 21px;
margin-bottom: 12px;            }
.oxy-icon-box .oxy-icon-box-text {
font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
.oxy-icon-box .oxy-icon-box-link {
margin-top: 20px;                            } .oxy-pricing-box .oxy-pricing-box-section {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
.oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
justify-content: center;            } .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
justify-content: center;            } .oxy-pricing-box .oxy-pricing-box-title-title {
font-size: 48px;
}
.oxy-pricing-box .oxy-pricing-box-title-subtitle {
font-size: 24px;
} .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
flex-direction: row;                                            }
.oxy-pricing-box .oxy-pricing-box-currency {
font-size: 28px;
}
.oxy-pricing-box .oxy-pricing-box-amount-main {
font-size: 80px;
line-height: 0.7;
}
.oxy-pricing-box .oxy-pricing-box-amount-decimal {
font-size: 13px;
}
.oxy-pricing-box .oxy-pricing-box-term {
font-size: 16px;
}
.oxy-pricing-box .oxy-pricing-box-sale-price {
font-size: 12px;
color: rgba(0,0,0,0.5);
margin-bottom: 20px;            } .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
font-size: 16px;
color: rgba(0,0,0,0.5);
} .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
justify-content: center;            }
.oxy-progress-bar .oxy-progress-bar-background {
background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
.oxy-progress-bar .oxy-progress-bar-progress-wrap {
width: 85%;        }
.oxy-progress-bar .oxy-progress-bar-progress {
background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
}
.oxy-progress-bar .oxy-progress-bar-overlay-text {
font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
}
.oxy-progress-bar .oxy-progress-bar-overlay-percent {
font-size: 12px;
}
.ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
padding: 0px;			}
.oxy-superbox .oxy-superbox-secondary, 
.oxy-superbox .oxy-superbox-primary {
transition-duration: 0.5s;            }
.oxy-shape-divider {
width: 0px;
height: 0px;
}
.oxy_shape_divider svg {
width: 100%;
}
.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}
.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}
.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}
.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}
.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}
.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}
.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}
.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}
.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}
.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}
.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}
.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}
.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
flex-direction: row;
}
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
text-align: left;
justify-content: flex-start;
}
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
align-items: flex-start;
}
.oxy-pro-menu .oxy-pro-menu-off-canvas-container{
top: 0;
bottom: 0;
right: auto;
left: 0;
}
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
text-align: left;
justify-content: flex-start;
}
.oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}
.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}
.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
--oxynav-animation-name: none; 
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
background-color: var(--oxynav-brand-color);
transition: var(--oxynav-transition-duration);
margin-left: var(--oxynav-other-spacing);
border: none;
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
background: transparent;
border: 1px solid currentColor;
transition: var(--oxynav-transition-duration);
margin-left: var(--oxynav-other-spacing);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
filter: invert(0) !important;
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
background-color: var(--oxynav-activehover-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
color: var(--oxynav-neutral-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
color: var(--oxynav-brand-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
color: var(--oxynav-brand-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
color: var(--oxynav-neutral-color);   
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
color: var(--oxynav-brand-color);   
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
color: var(--oxynav-brand-color);   
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
display: none;
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
display: none;
}
.ct-section-inner-wrap, .oxy-header-container{
max-width: 1312px;
}
body {font-family: 'DM Sans';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'DM Sans';font-size: 36px;font-weight: 700;}h2, h3, h4, h5, h6{font-size: 30px;}h3, h4, h5, h6{font-size: 24px;}h4, h5, h6{font-size: 20px;}h5, h6{font-size: 18px;}h6{font-size: 16px;}a {color: #543086;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {color: #543086;text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
}.ct-new-columns > .ct-div-block {
}.oxy-header-container {
}@media (max-width: 992px) {
.ct-columns-inner-wrap {
display: block !important;
}
.ct-columns-inner-wrap:after {
display: table;
clear: both;
content: "";
}
.ct-column {
width: 100% !important;
margin: 0 !important;
}
.ct-columns-inner-wrap {
margin: 0 !important;
}
}
.testimonials {
position:relative;
}
.services {
width:100%;
position:relative;
margin-top:63px;
}
.services-dots {
}
.custom-dots {
}
.logos {
width:100%;
}
.logos2 {
}
.menu-main-menu-mobile {
}
.oxy-stock-content-styles {
}
.menu-toggle {
}
.mobile-menu {
}
.mobile-nav {
}
@media (max-width: 767px) {
.mobile-nav {
}
.mobile-nav:not(.ct-section):not(.oxy-easy-posts),
.mobile-nav.oxy-easy-posts .oxy-posts,
.mobile-nav.ct-section .ct-section-inner-wrap{
display:flex;
}
}
.flipbox {
}
.flipbox-front {
}
.flipbox-back {
}
.card {
}
.team-name {
}
.team-name1 {
}
.team-positio {
}
.team-position {
}
.ct-link-button {
transition: all 0.5s;
}
.slider-for .slick-next.slick-arrow {
background-color: #fff;
width: 50px;
height: 50px;
background-position: center;
background-repeat: no-repeat;
border-radius: 100px;
background-size: 15px;
z-index: 100;
padding: 0;
}
.slider-for .slick-prev.slick-arrow {
background-color: #fff;
width: 50px;
height: 50px;
background-position: center;
background-repeat: no-repeat;
border-radius: 100px;
background-size: 15px;
padding: 0;
}
.slick-slide .full-image img {
height: 560px;
border-radius: 30px;
object-fit: cover;
width: 100%;
}
.slider-nav.slick-initialized.slick-slider {
margin-top: 17px;
}
.slick-slide.project-slider-nav img {
height: 118px;
border-radius: 28px;
width: 100%;
}
.project-slider-nav {
margin: 0 10px;
}
.slick-prev.slick-arrow {
background: url(https://gvc.webtechevo.nz/wp-content/uploads/2024/02/Arrow1.svg);
font-size: 0;
width: 19px;
height: 33px;
left: 41px;
position: absolute;
top: 40%;
cursor: pointer;
border: none;
}
.slick-next.slick-arrow {
background: url(https://gvc.webtechevo.nz/wp-content/uploads/2024/02/Arrow2.svg);
font-size: 0;
width: 19px;
height: 33px;
right: 41px;
cursor: pointer;
position: absolute;
top: 40%;
border: none;  
}
.slick-prev::before{
content: none !important;
}
.slick-next::before{
content: none !important;
}
.slick-tabs li {
display: inline-block;
font-size: 21px;
background: #543086;
color: #fff;
padding: 10px 20px;
border-radius: 10px;
margin: 0 8px;
border: 1px solid #543086;
cursor: pointer;
transition: .4s ease;
}
.slick-tabs {
padding: 0;
}
.slick-tabs li.active {
border: 1px solid #543086;
background: none;
color: #543086;
}
.services-dots .slick-tabs li {
background: #ccc;
border: none;
height: 5px;
padding: 0;
width: 78px;
}
.services-dots .slick-tabs li.active {
background: #543086;
}
.slick-dots {
padding: 0;
}
.slick-dots {
padding: 0;
}
.slick-dots li button {
font-size: 0;
height: 5px;
width: 78px;
border: none;
background: #cccc;
margin-right: 15px;
}
.slick-dots li.slick-active button {
background: #543086 !important;
}
.custom-dots {
position: absolute;
top: 700px;
}
.custom-dots .slick-dots li {
display: inline-block;
}
.custom-dots .slick-dots {
margin: 0;
}
#section-19-44 > .ct-section-inner-wrap {
position: relative;
}
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
border-radius: 30px;
border: none;
height: 66px;
line-height: 66px;
padding: 0 30px;
width: 100%;
font-family: DM Sans;
font-size: 18px;
background: #e4e4e4;
color: #1b1b1b;
}
.col2 {
grid-template-columns: repeat(2,minmax(200px,1fr));
display: grid;
grid-column-gap: 20px;
}
textarea {
border-radius: 30px;
border: none;
padding: 30px;
width: 100%;
background: #e4e4e4;
font-family: DM Sans;
font-size: 18px;
height: 215px;
}
.wpcf7-form-control.wpcf7-submit.has-spinner {
transition: .4s ease;
}
.wpcf7-form [type="reset"], .wpcf7-form [type="submit"], .wpcf7-form button, html .wpcf7-form [type="button"] {
-webkit-appearance: button;
width: 100%;
background: #543086;
font-family: DM Sans;
color: #fff;
font-size: 21px;
border-radius: 10px;
border: none;
padding: 10px 20px;
line-height: 21px;
width: auto;
}
#menu-item-50 a {
font-size: 21px;
color: #543086 !important;
background-color: #bddb31;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-radius: 10px;
transition: .5s all;
}
#menu-item-50 a:hover {
box-shadow: inset 5em 0 0 0 #1b023e, inset -5em 0 0 0 #1b023e;
color: #fff !important;
border-color: ##1b023e;
}
#link_button-80-10{
font-size: 21px;
color: #543086 !important;
background-color: #bddb31;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-radius: 10px;
transition: .5s all;
transition-duration: 0.5s;
border: none;
}
#link_button-104-10 {
font-size: 21px;
color: #fff !important;
background-color: #543086;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-radius: 10px;
transition: .5s all;
transition-duration: 0.5s;
border: none;
}
#link_button-80-10:hover, #link_button-104-10:hover {
box-shadow: inset 5em 0 0 0 #1b023e, inset -5em 0 0 0 #1b023e;
color: #fff !important;
border-color: ##1b023e;
}
a#link_button-104-10 {
margin-top: 20px;
}.main-nav a:after {
content: "";
background: url(//gvc.co.nz/wp-content/uploads/2024/06/Group-43.svg);
width: 19px;
height: 19px;
display: block;
position: absolute;
right: 0px;
top: 15px;
}
.open-nav #div_block-158-7 { display: block;
width: 80px;
height: 49px;
left: 30px;
top: 0;
position: absolute;
}
button.back {
background: #fff;
font-size: 12px;
border: none;
margin-bottom: 20px;
color: #00558b;
padding: 5px 10px;
line-height: 1;
}
.mobile-submenu h3 {
color: #fff;
font-weight: normal;
margin-bottom: 20px;
font-size: 25px;
}
.mobile-submenu h3 span {
font-weight: 700;
}
.main-nav {
padding: 20px;
}
.main-nav a {
display: block;
font-size: 16px;
color: #fff;
font-weight: 600;
padding: 10px 0;
position: relative;
}
.mobile-menu a {
display: block;
width: 100%;
padding: 10px 0;
font-size: 30px !important;
line-height: 1;  color: #543086 !important;
}
a.mobile-subtitle {
color: #fff;
font-size: 16px;
font-weight: 600;
font-family: 'Inter';
margin: 10px 0;
display: block;
}
.uk-accordion-content a {
display: block;
color: #ffffff7d;
margin: 10px 10px;
}
.mobile-submenu .uk-accordion-content {
margin-top: 10px;
margin-bottom: 20px;
}
.mobile-submenu .uk-accordion-title:before {
content: "";
background: url(//gvc.co.nz/wp-content/uploads/2024/06/Group-43.svg);
width: 19px;
height: 19px;
position: relative;
top: 15px;
}
.mobile-submenu .uk-open > .uk-accordion-title::before{
content: "";
background: url(//gvc.co.nz/wp-content/uploads/2024/06/Group-43.svg);
width: 19px;
height: 19px;
position: relative;
top: 15px; 
}
.mobile-nav {
position: absolute;
top: 70px;
width: 100%;
left: 0;
z-index: 999;
background:#bddb31;
}
.tb-menu-toggle {
border: 0;
position: relative;
background: transparent;
cursor: pointer;
} .tb-menu-toggle i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
-webkit-transition:all .2s;
-moz-transition:all .2s;
-o-transition:all .2s;
transition:all .2s;
}
.tb-menu-toggle i:nth-child(2) {
top: 50%; }
.tb-menu-toggle i:nth-child(3) {
top: 100%;
} .tb-menu-toggle.tb-active-toggle i {  } .tb-menu-toggle.tb-animate-toggle i:first-child,
.tb-menu-toggle.tb-animate-toggle i:nth-child(2){ 
top: 40%;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
} 
.tb-menu-toggle.tb-animate-toggle i:nth-child(3){ 
top: 40%;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
@media (max-width: 600px){
.col2 {
display: block;
}
.logos .slick-slide img, .logos2 .slick-slide img{
display: block;
margin: 0 auto;
}
.slick-next.slick-arrow {
right: 0px;
top: 30%;
z-index: 999;
}
.slick-prev.slick-arrow {
left: 0px;
top: 30%;
}
.testimonials .slick-next.slick-arrow {
right: 10px;
}
.testimonials .slick-prev.slick-arrow {
left: 10px;
}
.slick-slide.project-slider-nav img {
height: 50px;
border-radius: 0;
}
.slider-nav ul.slick-dots {
display: none;
}
li.tab-link {
margin: 5px 0;
width: 100%
}
}.card{
position: relative;
}
.flipbox-front:hover {
box-shadow: 1px 2px 20px rgba(0,0,0,.6);
border-radius: 30px;
transform: scale(1.05);
}
.flipbox-front:hover::after {
color: #bddb31;
}
.flipbox-front::after {
content: ">";
position: absolute;
right: 30px;
bottom: 30px;
transition: .4s ease;
}
.flipbox-front {
transition: .4s ease;
border-radius: 30px;
}
.card img {
height: 100%;
}
.flipbox:nth-child(2n) .team-name1 {
background: #bddb31;
}
.flipbox:nth-child(2n) .flipbox-back {
background: #bddb31;
color: #543086;
}
.team-position {
background: #fff;
color: #543086;
font-size: 14px;
line-height: 1;
padding: 5px 10px;
text-transform: uppercase;
}
.team-name1 {
background: #543086;
color: #fff;
font-size: 20px;
line-height: 1;
padding: 10px;
}
.team-name {
position: absolute;
bottom: 20px;
left: 20px;
}
.flipbox-front, .flipbox-back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flipbox {
width: 99%;
border-radius: 30px;
height: 550px;
cursor: pointer;
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flipbox.flipped{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.flipbox-back.is-overflowing > div::after {
content: "▼";
position: absolute;
bottom: 30px;
left: 30px;
transform: translateX(-50%);
color: rgba(255,255, 255, 0.4);
animation: bounce 1.5s infinite;
pointer-events: none;
}
.flipbox-back {
background: #543086;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
border-radius: 30px;
padding: 30px;
height: 550px;
text-align:left;
position: relative;
}
.flipbox-back.is-overflowing div {
height: 100%;
overflow: scroll;
}
.flipbox-back {
padding-bottom: 70px;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-5px); }
60% { transform: translateY(-3px); }
}
@media (max-width: 1400px){
.flipbox, .flipbox-back {
height: 400px;
padding-bottom: 70px;
}
}