* {
    
}
@font-face {
    font-family: 'SofiaPro';
    src: url('../fonts/SofiaPro-Black.eot');
    src: url('../fonts/SofiaPro-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaPro-Black.woff2') format('woff2'), url('../fonts/SofiaPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'SofiaPro';
    src: url('../fonts/SofiaPro-Bold.eot');
    src: url('../fonts/SofiaPro-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaPro-Bold.woff2') format('woff2'), url('../fonts/SofiaPro-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'SofiaPro';
    src: url('../fonts/SofiaPro-SemiBold.eot');
    src: url('../fonts/SofiaPro-SemiBold.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaPro-SemiBold.woff2') format('woff2'), url('../fonts/SofiaPro-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'SofiaPro';
    src: url('../fonts/SofiaProRegular.eot');
    src: url('../fonts/SofiaProRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaProRegular.woff2') format('woff2'), url('../fonts/SofiaProRegular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'SofiaPro-MediumItalic';
    src: url('../fonts/SofiaPro-MediumItalic.eot');
    src: url('../fonts/SofiaPro-MediumItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaPro-MediumItalic.woff2') format('woff2'), url('../fonts/SofiaPro-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-stretch: normal;
}
header.header-overlay{
    padding-top: 1rem;
    padding-bottom: 1rem;
    -webkit-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;
}
.home-header.header-overlay{
    background-color: #FFFFFF;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}
.home-header.header-overlay li{
    color:#333333;
}

.logo-header{
    background-image: url('../image/svg/logo-valtanix.svg');
    width: 164px;
height: 24px;
background-size: cover;
}
.home-header.header-overlay .logo-header{
    background-image: url('../image/svg/logo-valtnix-black.svg');
}
.enroll-toggle.active{
    display: block;
    flex: 0 0 100%;
}

.home-header.header-overlay .icon-bar{
    background-color: #333333;
}
.bottom-bar {
    margin-left: 3px;
    margin-right: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90% 0;
    transform-origin: 10% 90% 0;
    -webkit-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;
}
.middle-bar {
    opacity: 0;
}
.top-bar {
    margin-left: 3px;
    margin-right: 3px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10% 0;
    transform-origin: 10% 10% 0;
    -webkit-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;
}
.navbar-toggler.collapsed .icon-bar {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    display: block;
    border-radius: 1px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    -webkit-transform: translateX(13%);
    transform: translateX(13%);
}
.product-hero-img::before{
    content: '';
    position: absolute;
    background-image: url('../image/hero-bg-pattern.png');
    width: 42.75rem;
    height: 21.375rem;
    background-repeat: no-repeat;
    bottom:-13.75rem;
}
.product-hero-360 .product-hero-img::before{
    width: 21.75rem;
    height: 21.375rem;
    bottom: -10.75rem;
}
.open-text{
    background: #FFFFFF;
    box-shadow: 0px 4px 70px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 40px 50px;
    -webkit-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;
}
.open-text .logo-img svg path{
    stroke: #00069D;
}
.open-text .arrow-icon{
    transform: rotate(180deg);
    transition: all 0.25s;
}
.open-text .content,
.second-product-img figure.active{
    display: block;
}

.rotate {
    -webkit-animation: circle 50s infinite linear;    
   
} 

 .counterrotate {
    top: -50px;
    left: 115px;
    -webkit-animation: ccircle 50s infinite linear;    
} 

 .multi-img  .rotate {
    -webkit-animation: circle 60s infinite linear;    
   
}  
.slack.counterrotate {
    top:auto;
    left: 5px;
    bottom: 55px;
    -webkit-animation: ccircle 60s infinite linear;    
} 
.salesforce.counterrotate {
    top: 140px;
    left: auto;
    bottom: auto;
    right: -15px;
    -webkit-animation: ccircle 60s infinite linear;    
} 

.calender .rotate{
    -webkit-animation: circle 70s infinite linear;    
   
}
.calender .counterrotate{
    top: auto;
    left: auto;
    bottom: 66px;
    right: 80px;
    -webkit-animation: ccircle 70s infinite linear;  
}
  
.expensify .rotate{
    -webkit-animation: circle 80s infinite linear;    
   
}
.expensify .counterrotate{
    top: 190px;
    left: 30px;
    bottom: auto;
    right: auto;
    -webkit-animation: ccircle 80s infinite linear;
} 
.jira .rotate{
    -webkit-animation: circle 90s infinite linear;    
   
}
.jira .counterrotate{
    top: 20px;
    left: auto;
    bottom: auto;
    right: 220px;
    -webkit-animation: ccircle 90s infinite linear;
}
.pros-logo .docusign .counterrotate{
    bottom: 80px;
    right: 50px;
}
.pros-logo .okta{
    top: 170px;
}
.pros-list-description .open-text .logo-img svg path{
    stroke :#FFB555;
}
@-webkit-keyframes circle {
    from {-webkit-transform: rotateZ(0deg)}
    to {-webkit-transform: rotateZ(360deg)}
}

@-webkit-keyframes ccircle {
    from {-webkit-transform: rotateZ(360deg)}
    to {-webkit-transform: rotateZ(0deg)}
}

.author-details:hover .author-description{
    transform: translateY(0);
}
@media (max-width: 991px) {
    .product-hero-img::before {
        content: '';
        position: absolute;
        background-image: url(../image/hero-bg-pattern.png);
        width: 17rem;
        height: 21rem;
        background-repeat: no-repeat;
        bottom: -12.75rem;
        left: 3rem;
    }
    .counterrotate {
        left: 60px;
    }
    .slack.counterrotate {
        left: -20px;
        bottom: 22px;
    }
    .salesforce.counterrotate {
        top: 100px;
        right: 0px;
    }
    .calender .counterrotate {
        bottom: 20px;
        right: 50px;
    }
    .expensify .counterrotate {
        top: 125px;
        left: 10px;
    }
    .jira .counterrotate {
        top: 8px;
        right: 125px;
    }
    .open-text{
        padding: 30px;
    }
}
@media (max-width: 580px){
.product-hero-img::before {
    display: none;
}
.logo-header{
    width: 30px;
}
.open-text{
    border-radius: 10px;
    padding: 20px;
}
}

.product-list-image figure.active{
    display: block;
}


.tabs .active{
    opacity: 1;
    border-bottom:3px solid #1A5AFB;
}