a {
    color: #44C1F0;
}

a:hover, a:focus {
    color: #132c51;
    text-decoration: none; 
}

/* Font family */

.fourpi-font-family-nunito{
    font-family: 'Nunito', sans-serif;
}  

.fourpi-font-open-sans{ 
    font-family: 'Open Sans', sans-serif; 
}

/* Slider */

.bg-slider{

}
.bg-slider .slide{
    padding-top: 0px;
}
.bg-slider-cover{
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
}

/* color */

.fourpi-color-333333{
    color:#333333;
}

.fourpi-color-B3B3B3{
    color:#B3B3B3;
}

.logo-pacakages a{
    color:#44C1F0;
}

.g-background-color-ligh-blue{
    background-color:#44C1F0;
}

.g-color-primary--active.cbp-filter-item{
    color:#44C1F0 !important;
}

.cbp-filter-item-active.list-inline-item{
    color:#44C1F0 !important;
    font-weight:700;
}

.logo-pacakages a:hover{
    color:#44C1F0 !important;
}

.g-color-blue--hover:hover{
    color:#44C1F0 !important;
}

.fourpi-color-dark-blue{
    color:#132c51 !important;
}

.fourpi-color-dark-blue.else{
    color:#132c51 !important;
}

.else{
    color:#132c51 !important;
}

.fourpi-color-light-blue{
    color: #44C1F0 !important;
}

.fourpi-color-light-blue.active{
    color: #44C1F0 !important;
}

.fourpi-color-grey{
    color: #b8b8b8 !important;
}

.hide-case{
    display:none;
}


.g-bg-dark-footer-blue{
    background-color: #0d2138;
}

section.home-pictures.our-work .container p{
    color: #597A96;
}

.nav-gray-color{
    background-color: #f5f7fa;
}

.contact h5{
    color:#404040;
}

.contact a{
    color: #52d8f3;
}

.fourpi-color-kashmir-blue{
    color: #597A96;
}

.u-accordion-color-primary .u-accordion__header [aria-expanded=true] {
    color: white !important;
}

.g-color-main, .g-color-main--hover:hover {
    color: #B3B3B3!important;
}

.logo-accordian .u-arrow-v1:before {
    color:#132c51;
}

.g-bgcolor-dark-blue{
    background-color:#132c51 !important;
}

.g-bgcolor-dark-blue-nav, .g-bgcolor-dark-blue-nav--active.active, .g-bgcolor-dark-blue-nav--after:after, .g-bgcolor-dark-blue-nav--before:before, .g-bgcolor-dark-blue-nav--hover:hover, .g-parent:hover .g-bgcolor-dark-blue-nav--parent-hover{
    background:#132c51 !important;
}

.g-bg-FAFAFA{
    background-color: #FAFAFA;
}

.g-bg-light-blue{
    background-color: #44C1F0;
}

/* .website-design-and-developemnt{
    background-image: url('../img/4pi-hero-image-header.jpg') !important;
} */

.website-design-and-developemnt.blue-background{
    background-color: #132C51;
}

/* .website-design-and-developemnt .fourpi-color-dark-blue {
    color: #fff !important;
} */

.card{
    background-color: transparent !important; 
}

.g-bg-button-background{
    background-color: #1b1b1c;
}

.services-list li {
    color: #44C1F0;
}

.services-list{
    padding-left:20px !important;
}

/* Letter spacing */

.g-letter-spacing-minus-2_6{
    letter-spacing: -2.6px;   
}

.g-letter-spacing-minus-2_2{
    letter-spacing: -2.2px;
}

.g-letter-spacing-minus-1_9{
    letter-spacing: -1.9px;
}

.g-letter-spacing-minus-1_6{
    letter-spacing:-1.6px;
}

.g-letter-spacing-minus-1_2{
    letter-spacing: -1.2px;
}

.g-letter-spacing-minus-1{
    letter-spacing: -1px;
}

.g-letter-spacing-minus-0_9{
    letter-spacing:-0.9px;
}

.g-letter-spacing-minus-0_5{
    letter-spacing:-0.5px;
}


.g-letter-spacing-minus-0_3{
    letter-spacing:-0.3px
}

.g-letter-spacing-minus-0_2{
    letter-spacing:-0.2px
}

.g-letter-spacing-minus-0_1{
    letter-spacing:-0.1px;
}

.g-letter-spacing-0_2{
    letter-spacing: 0.2px;
}

.g-letter-spacing-0_3{
    letter-spacing: 0.3px;
}

.g-letter-spacing-1{
    letter-spacing:1px;
}

.ul-margin-top{
    letter-spacing:2px;
}


/* Line heights */

h1.title{
    line-height:60px;
}

.g-line-height-25{
    line-height:25px;
}

.g-line-height-28{
    line-height:28px;
}

.g-line-height-30{
    line-height:30px;
}

.g-line-height-45{
    line-height:45px;
}

.g-line-height-50{
    line-height:50px;
}


.g-line-height-60{
    line-height:60px;
}
/* miscellaneous */

.hamburger{
    padding-right:30px;
}

::selection {
    color: #fff;
    background-color: #52d8f3 !important;
}

.g-customised-button-border{
    border: 1px solid white;
}

.circle-icon{
    border: 2px solid #132C51;
    background-color:white;
}

.logo-pacakages a{
    text-decoration: underline;
    text-decoration-color: #44C1F0;
}

.u-accordion-brd-primary .u-accordion__header [aria-expanded=true] {
    border-color: white !important;
}

.typing-text{
    height:330px;
}

.text-underline{
    text-underline-position: under;
}

.compass h5{
    font-weight:300 !important; 
}

a.case-studies-links{
    color: #132c51;
    text-decoration: none;
}

a.case-study.btn:hover {
    color: white;
    background-color: #132c51;
}

.fourpi-btn {
    background-color: #132C51;
    color: #fff;
    font-size: 12px;
    padding: 20px 35px;
    border-radius: 0;
}

.footer .form-control {
    border: 1px solid white !important;
    border-right: none!important;
}

.footer ::placeholder{
    color: white !important;
    opacity: 1 !important;;
}

.footer .input-group-addon{
    border-color:white !important;
}
 
.custom-styling-case-study-name{
    font-size: 65px;
}

.fourpi-btn:hover {
    color: #fff;
}

.border-shadow{
    box-shadow: 0 0px 100px 0 rgba(0, 0, 0, 0.0), 0 6px 20px 0 rgba(0, 0, 0, 0.13);
}

.compass-cta{
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    height:1087px;
} 

.logo-pacakages p.text{ 
    line-height:23px;
}

.compass-logo .col-lg-8, .compass-logo .col-lg-4, .queen-logo .col-lg-8, .queen-logo .col-lg-4{
    padding:0px;
}

.website-four-benefits .see-all-projects a:hover{
    color:#132c51; 
    text-decoration: none;
}

.btn-theme-bg{ 
    background-color: #2ac4ea !important;
    color: #fff;
}

.four-pi-footer hr{
    border-top: 1px solid white !important;
}

.form-control {
    border: 2px solid #ddd;
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .form-control:focus{
    border-color:#999;
}

.four-pi .active .g-brd-primary--active, .g-brd-primary, .g-brd-primary--active.active, .g-brd-primary--before--active.active:before, .g-brd-primary--before:before, .g-brd-primary--hover:hover, :hover>.g-brd-primary--hover-parent {
    border-color: #44C1F0 !important;
}

.ourwork.btn{
    background-color: #B2E3F8;
    border-bottom-color:#132c51 !important;
    border-top-color:#132c51 !important;
    border-left-color:#132c51 !important;
    border-right-color:#132c51 !important;
}

.case-study.btn{
    padding: 15px 41px 15px 43px;
    border-bottom-color:#132c51 !important;
    border-top-color:#132c51 !important;
    border-left-color:#132c51 !important;
    border-right-color:#132c51 !important;
}

.case-study.btn:hover{
    
    color:white !important;
}

.copyright:hover{
    color:#41c1f0 !important;
    text-decoration: none;
}

#contact-section .email  a{
    color: #41c1f0 !important
}

.social-1 li a i.fa-facebook {
    background-color: #3b5998;
}

.social-1 li a i.fa-linkedin {
    background-color: #0077b5;
}

.social-1 li a i.fa-youtube {
    background-color: #e52d27;
}

.social-1 li a i.fa-twitter {
    background-color: #0084b4;
}

.social-1 li a i.fa-instagram {
    background-color: #fb3958;
}

.social-1 li a i {
    width: 40px;
    margin-bottom: 5px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    font-size: 16px;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

.proud-to-support-community  .arrow-buttons.btn.latrobe{
    margin-top: -33px;
    margin-left: 30px;
}

.proud-to-support-community  .arrow-buttons.btn.macleod{
    margin-top: -76px;
    margin-left: 180px;
}

.proud-to-support-community  .arrow-buttons.btn.vmj{
    margin-top: 0px;
    margin-left: 20px;
}

.proud-to-support-community  h5.heading{
    display:inline;
}

.proud-to-support-community img.logo{
    display:block;
}

.logo-images{
    min-height:130px;
    position: relative;
}

.proud-to-support-community .image-absolute{
    position: absolute;
    bottom:0px;
}

.footer-border-top{
    border-top:1px solid #2ac4ea;
}

#contact-section .email a:hover{
    text-decoration: none;
}

.video-icon{
    position: absolute;
    left: 20px;
    top: 3px;
}

.our-sevices .service{

}

/* .our-services .btn{ 
    padding: 15px 20px 15px 25px;
    border-bottom-color:#132c51 !important;
    border-top-color:#132c51 !important;
    border-left-color:#132c51 !important;
    border-right-color:#132c51 !important;
    margin-bottom:220px;
}

.our-services .btn:hover{ 
    padding: 15px 20px 15px 25px;
    border-bottom-color:#132c51 !important;
    border-top-color:#132c51 !important;
    border-left-color:#132c51 !important;
    border-right-color:#132c51 !important;
    background-color:white !important;
    color: #132c51 !important;
    margin-bottom:220px;
} */

/* .our-services-small .btn{ 
    padding: 15px 20px 15px 25px;
    border-bottom-color:#132c51 !important;
    border-top-color:#132c51 !important;
    border-left-color:#132c51 !important;
    border-right-color:#132c51 !important;
}

.our-services-small .btn:hover{ 
    padding: 15px 20px 15px 25px;
    border-bottom-color:#132c51 !important;
    border-top-color:#132c51 !important;
    border-left-color:#132c51 !important;
    border-right-color:#132c51 !important;
    background-color:#132c51 !important;
    color: #ffffff !important;
} */



.btn-hover{
    color:#132C51 !important;
}

.details .btn{
    margin-bottom:0px;
    border-color:#132C51 !important;
}

.ourwork.btn:hover{
    background-color: #132c51 ;
    color:#B2E3F8;
    border-bottom-color:#132c51 !important;
    border-top-color:#132c51 !important;
    border-left-color:#132c51 !important;
    border-right-color:#132c51 !important;
}

.u-accordion.u-accordion-color-primary.package i.icon-check{
    position: absolute;
    padding-top:3px;
}

u.case-study {
    text-decoration: none;
    border-bottom: 1px solid #132c51;
}

.u-accordion-brd-primary.package .u-accordion__header [aria-expanded=true] {
    border-color: #eee !important;
}

.overlay-div{
    position: relative;
    overflow: hidden;
}

.animation{
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.overlay-div:hover  .animation{
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.overlay-div:hover .this-opac-div{
    z-index:2;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(19, 44, 81, 0.2);
    background-image: linear-gradient(to bottom left, transparent, #132c51);
    -webkit-transition: all 0.10s ease-in-out;
    -moz-transition: all 0.10s ease-in-out;
    -o-transition: all 0.10s ease-in-out;
    -ms-transition: all 0.10s ease-in-out;
    transition: all 0.10s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.this-opac-div{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-transition: all 0.10s ease-in-out;
    -moz-transition: all 0.10s ease-in-out;
    -o-transition: all 0.10s ease-in-out;
    -ms-transition: all 0.10s ease-in-out;
    transition: all 0.10s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}


.overlay-div:hover  .this-opac-info{
    z-index:20;
    position: absolute;
    bottom:25px;
    left:25px;
    transition: all ease 0.5s;
}

.this-opac-info{
    z-index:20;
    position: absolute;
    bottom:10px;
    left:10px;
    transition: all ease 0.5s;
}

.website-type{
    text-decoration:none !important;
}


.input-group input:not([type=checkbox]):not([type=radio]):first-child{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group-addon:last-child{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.list-inline li{
    display:inline-block;
    margin-right:10px;
}
.list-inline li a{
    color:white;
}
.list-inline li a:hover{
    opacity:0.6;
}
i.fa-facebook.contact{
    background-color: #3b5998;
    height:40px;
    width:40px;
    padding: 1px 11px 0px 13px;
    border-radius:4px;
}
i.fa-linkedin.contact{
    background-color: #0077b5;
    height:40px;
    width:40px;
    padding: 1px 11px 0px 13px;
    border-radius:4px;
}
i.fa-youtube.contact{
    background-color: #e52d27;
    height:40px;
    width:40px;
    padding: 1px 11px 0px 13px;
    border-radius:4px;

}

[class*=u-heading-v4-] {
    border-left-style: none !important;
}

.blog-next{
    color: #333 !important;
}

.arrow-icon{
    position: absolute;
}

.fixed-row{
    position: fixed;
}

.about-header{
    margin-left:-70px;
}

.whitebg{
    background-color: white;
    z-index: 1;
    position: relative;

}

/* #js-header{
    z-index: 30;
} */

.home-border-bottom{
    border-bottom: 2px solid #ECF1F3;
}

.g-brd-primary.header{
    border-color: #2ac4ea !important;
}

.g-bg-primary.slider{
    background-color: #ffffff !important;
    color:#132c51 !important;
}

.home .g-bg-img-hero{
    height:850px !important;
}

.case-study-chat .case-study.btn:hover{
    color:white !important;
}

/* Navbar */

#js-header .container-fluid{
    width:100%;
    padding-left:0px;
}

.not-color.active{
    color: white !important;
}

.hs-sub-menu{
    min-width: 190px !important;
}

.g-bg-primary.slider.cta
{ 
    background-color: #2ac4ea !important; 
}

.explore-div .arrow-buttons:hover{
    background-color: #2ac4ea !important; 
    border-color:#2ac4ea !important; 
}

.dropdown-item:hover{
    background-color: transparent !important;
}

.hs-has-sub-menu.fourpi > a::after {
    content: "\e900";
    font-family: "hs-icons" !important;
    font-size: 10px;
    display: inline;
    margin-left: 7px;
}

.navbar-brand{
    display:inline-block;
    padding-top:0px;
    padding-bottom:0px; 
}

.navbar{
    padding:0px 0px;
}

.navbar-collapse{
    float:right;
    width:auto !important;
}

.navbar-nav .nav-links{
    padding-top:2px !important;
}

.nav-button{
    border-color:white;
    border-radius:0px;
}

.nav-button-2E4262{
    border-color:#2E4262;
    border-radius:0px;
}

/* .u-header__section--dark .hamburger-inner.hamburger-white, .u-header__section--dark .hamburger-inner.hamburger-white:before, .u-header__section--dark .hamburger-inner.hamburger-white:after{
    background:white !important;
} */


.header-services{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: inherit;
    padding-right: 40px;
}

.padding-15{
    padding-right:-15px !important;

}

/* EO Navbar */

/* Headings */

.section-title {
    color: #132C51;
    font-family: "Open Sans";
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.section-subtitle {
    font-family: 'Nunito';
    font-size: 35px;
    font-weight: 300;
    color: #132C51;
    line-height: 55px;
}

.section-subtitle::first-line {
    line-height: 35px;
}

.list-inline.ul-home li {
    display: block !important;
    margin-right: 10px;
}

.dotted-home-background{
    background-position: center;
    background-repeat: no-repeat;
}

.dotted-home-backgrounds-left{
    background-size: cover;
    background-repeat: no-repeat; 
}

/* EO Headings */



.hidden-md-up{
    display:none;
}

.hidden-sm-down{
    display:block;
}

.show-more{
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    text-align: center;
    /* -webkit-animation: bounce 3s 3s infinite;
    animation: bounce 3s 3s infinite; */
    z-index: 10;
}
.scroll-btn{
    background-color: #44C1F0;
    height: 40px;
    width: 40px;
    display: inline-block;
    border-radius: 50%;
}
.scroll-btn i{
    font-size: 2em;
    padding-top: 6px;
    color: #fff;
}
.home-header{
    position: relative;
}
/* animations */

.holder{
    /* background-color: #def2ff; */
    height: 200px;
    position: relative;
}
svg#cloud-animation {
    max-width: 350px;
    padding: 10px;
    display: block;
    margin: auto;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -175px;
    margin-left: -100px;
}

svg#rocket-animation {
    max-width: 800px;
    padding: 10px;
    display: block;
    margin: auto;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -400px;
}

.fill-color {
    fill: #41c1f0;
}

.stroke-color {
    stroke: #41c1f0;
}

.fill-grey {
    fill: #0A4D74;
}

.stroke-grey {
    fill: #0A4D74;
}

#rocket {
    animation: rocket-rotate 10s linear reverse infinite;
}

.path {
    stroke-dasharray: 20;
    animation: dash 1s linear reverse infinite;
}

.home-header{
    background-image: url('../../assets/img/slider/4pi-web-design-branding-melbourne.jpg');
}

.case-studying-cover{
    background-repeat:no-repeat;
    background-size:cover;
}

.line-45{
    line-height:45px
}

.min-105{
    min-height:105px;
}

.brands.new{
    background-image: url('../../assets/img/bg/4pidots4.jpg'); 
    margin-bottom:0px; 
    background-repeat:no-repeat; 
    background-size:100%
}

#map{
    height:400px
}

.alpha{
    display:none;
}

.navbar-toggler{
    top:0px;
}

.nav-submenu-1{
    display:none;
}

.navbar-nav .nav-link.active{
    border-bottom:2px solid #41c1f0;
}

/* .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    background-color: #fff !important;
} */

.new-hero-image{
    background-image:url('../img/4pi-hero-1920.jpg');
    height:100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.new-hero-image .header-container-new{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    height:440px;
}

.new-hero-image .p-four-pi{
    font-weight: 700;
    letter-spacing:4px;
    line-height:27px;
    font-size: 20px;
    color:#44C1F0;
    font-family: 'Nunito', sans-serif;
}

.new-hero-image h2{
    font-weight: 300;
    line-height:35px;
    font-size: 25px;
    color:#FFFFFF;
}

.new-hero-image .main-heading{
    font-weight: 300;
    line-height:68px;
    font-size: 48px;
    color:#FFFFFF;
    letter-spacing:0px;
    font-family: 'Nunito', sans-serif;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    width: 25px !important;
    height: 1.5px !important;
}

.main-links:hover{
    color: #807f7f !important;
}

.sub-main-links:hover{
    color: #807f7f !important;
}

.nav-item.full-nav-item{
    font-size:50px;
    font-weight:500;
    opacity: 0;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    transition: opacity .3s ease,-webkit-transform .3s ease;
    transition: opacity .3s ease,transform .3s ease;
    transition: opacity .3s ease,transform .3s ease,-webkit-transform .3s ease;
}

.nav-item.full-nav-item.in{
    font-size:50px;
    font-weight:500;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    transition: opacity .3s ease,transform .3s ease,-webkit-transform .3s ease;
}

#navBar > ul > li.rounded-box > ul{
    border-radius: 5px;
    box-shadow: 5px 10px 20px 0 rgba(0,0,0,0.15);
    width: 100%;
    justify-content: space-evenly;
    border-top:none;
}

#navBar > ul > li.rounded-box > ul:after {
    position: absolute;
    left: 50%;
    margin-left: -10px;
    top: -10px;
    width: 0;
    height: 0;
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
}

#navBar .border-bottom-nav{
    border-bottom: 1px solid #E7E7E7;
}

.show-case{
    display:none;
}

#show-hide-case-studies .show-case:nth-child(-n + 2) {
    display:block;
}

.home-button{
    border:1px solid #44C1F0;
    color:white;
    border-radius:25.5px;
    font-size:14px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.home-button:hover{
    border:1px solid #44C1F0;
    color:white;
    background-color: #44C1F0;
}

.change-thinking-buttons{
    font-weight: 600;
    color:#03101E;
    font-size:10px;
    letter-spacing:0.4px;
    padding:7px 30px;
    background-color:rgba(68,193,240,0.11);
    border-radius:25.5px;
    margin-right:12px;
}

.change-thinking-buttons:hover{
    color:white;
    background-color:#03101E;
}

.change-thinking-category .category-selector{
    border-top: 1px solid #BDC1C5;
    padding-top:19px;
}

.non-active{
    margin-top:1px;
}

.change-thinking-category .category-selector:hover .text{
    color:#132C51;
}

.change-thinking-category .category-selector:hover{
    border-top: 1px solid #132C51;
    padding-top:20px;
    cursor: pointer;
}

.change-thinking-category .category-selector.active:hover{
    border-top: 2px solid #132C51;
}

.change-thinking-category .active{
    border-top: 2px solid #132C51;
    padding-top:20px;
}

.change-thinking-category p.text{
    font-size:20px;
    font-weight:400;
    line-height:25px;
    font-family: 'Nunito', sans-serif;
    color:#BDC1C5;
}

.change-thinking-category .active p.text{
    font-size:20px;
    font-weight:400;
    line-height:25px;
    font-family: 'Nunito', sans-serif;
    color:#132C51
}

.categories-home .categories-home-content{
    display:none;
}

.categories-home .categories-home-content.category-1{
    display:block;
}

.image-min-height-container{
    min-height:226px;
}

.categories-home .g-line-height-30{ 
    line-height: 24px;
}

.vidgap{
    display:none;
    width:100%;
}

.new-hero-image .u-icon-v1{
    height:84px;
    width:84px;
    background-color:#44C1F0;
    border-radius:50%;
    transition: all .2s ease-in-out;
}

.new-hero-image  .u-icon-v1{
    position: absolute;
    top: 10px;
    left: 25px;
}


.new-hero-image  .u-icon-v1>i,.new-hero-image  .u-icon-v2>i,.new-hero-image  .u-icon-v3>i,.new-hero-image  .u-icon-v4>span>i {
    left: 5px;
    font-size:30px;
}

.outer-circle{
    height:104px;
    width:104px;
    background-color:rgba(68,193,240,0.37);
    border-radius:50%;
}

.outer-circle:hover .u-icon-v1{
    transform: scale(1.1);
    cursor: pointer;
}

.new-hero-image .texting{
    letter-spacing:-0.5px;
    margin-left:-15px;
    font-family: 'Work Sans', sans-serif;
}

.new-banner{
    background-image: url("../img/4pi-hero-image-header.jpg");
}

.new-banner h1.fourpi-color-dark-blue {
    color:white !important;
    padding-top:5px;
}

.new-banner h2.fourpi-color-dark-blue {
    color:white !important;
}


.fade-in {
    animation: fadeIn ease 2s;
    -webkit-animation: fadeIn ease 2s;
    -moz-animation: fadeIn ease 2s;
    -o-animation: fadeIn ease 2s;
    -ms-animation: fadeIn ease 2s;
}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

  
@keyframes dash {
    to {
      stroke-dashoffset: 80;
    }
}

@keyframes rocket-rotate {
    0%, 20% {
      transform: rotate(85deg);
    }
    60% {
      transform: rotate(40deg);
    }
    85%, 100% {
      transform: rotate(0deg);
    }
}
/* end animations*/

/*break points */

@media (min-width:1920px){
    .website-design-and-developemnt{
        height:50vh;
        background-repeat: no-repeat;
        /* background-position: center;*/
        background-size: contain;
        background-attachment: fixed;
    
    }
}
@media (min-width:1200px){

    .negative-margin-top{
        margin-top: -75px !important;
    }

    .on-big-screen{
        display:block;
    }
    .on-mobile{
        display:none;
    }

    h1, .h1{
        font-size:50px; 
    }
    
    h2, .h2{
        font-size:45px;
    }
    
    h3, .h3{
        font-size:40px;
    }
    
    h4, .h4{
        font-size:35px;
    }
    
    h5, .h5{
        font-size:30px;
    }
    
    h6 ,.h6{
        font-size:25px;
    }

    h1.new-h1{
        font-size: 30px;
    }


    .blogs .h6 {
        font-size: 20px;
        min-height:56px;
    }
    
    .p1{
        font-size:20px;
    }

    .font-sixty{
        font-size:48px;
    }

    .attract-and-speaks h5{
        font-size:55px;
        line-height:60px;
    }

    .g-line-height-35{
        line-height:35px;
    }

    .ul-margin-top{
        margin-top:-55px
    }

    .widget-title{
        border-bottom: 1px solid #41c1f0;
        margin-right:270px;
        padding-bottom:5px;
        font-weight: 600;
    }
    

    .website-design-and-developemnt.blue-background{
        padding-top:250px;
    }

    .website-design-and-developemnt.blue-background .container{
        padding-bottom: 150px;
    }

    .website-design-and-developemnt{
        height:500px;
        background-repeat: no-repeat;
        /* background-position: center;*/
        background-attachment: fixed;
    
    }

    .custom-width{
        width:1400px;
    }

    .fourpi-home-cta{
        height:1155px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .g-brd-top.g-brd-primary.fourpi{
        border-color: #2ac4ea !important;
    }

    .slider-max-width{
        max-width:870px;
        min-height:486px;
    }

    .homepage-team-cta{
        height:650px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .aboutpage-team-cta{
        height:750px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .g-line-height-15{
        line-height:15px;
    }

    .right-dashed-border {
        border-right-style: dashed;
        border-right-width: 1px;
        border-right-color: #B3B3B3;
    }
    .our-service-hr{
        width:100%;
        margin-top:0px;
        margin-bottom:0px;
        border-top: 1px solid #D7D7D7;

    }

    .before-after{
        margin-left:90px;
    }

    .what-we-do-min-height{
      min-height: 335px !important;
    }

    .logo-pacakages p.text{
        min-height:92px;
    }

    .logo-package-divs{
        padding:50px 80px;
    }

    .background-fourpi{
        background-repeat: no-repeat;
        background-position-y: center;
        background-attachment: fixed;
    }
    .background-fourpi-casestudies{

        background-repeat: no-repeat;
        background-position-y: center;

    }

    .website-design-and-developemnt .g-line-height-40{
        line-height:40px;
    }

    .compass-logo .ladies, .compass-logo .compass, .queen-logo .ladies, .queen-logo .compass{
        height:100%;
        width:100%;
        object-fit: cover;
    }

    .try-yourself .arrow-text{
        margin-left:50px;
        display: inline-block;
    }

    .home-blocks{
        padding-right:2px;
        padding-left:2px;
    }
    .home-block{
        padding-right:3px;
        padding-left:2px;
    }

    .home-what-we-do .u-block-hover__visible{
        padding: 25px 70px 40px 50px;
    }

    .explore-div{
        padding-left:50px;
    }

    .hs-sub-menu, .hs-mega-menu {
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 2;
        margin-top: 15px !important;
        visibility: hidden;
        background-color: transparent;
        max-width: 120px !important;
    }

    .home-hr{
        margin-top:80px; 
        margin-bottom:70px;
    }

    .blog-info{
        min-height:85px !important;
    }

    .home-header{
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-top: 100px;
        padding-bottom:140px;
    }

    .slick-slider{
        margin-top:110px;
    }

    .header-container{
        margin-top: 80px
    }
}

@media (min-width:1250px){
    .home-header{
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-top: 100px;
        padding-bottom: 30px;
    }

    .slick-slider{
        margin-top:0px;
    }
}

@media (min-width:1400px){
    .home-header{
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-top: 100px;
        padding-bottom:100px;
    }

    .slick-slider{
        margin-top:30px;
    }

    
}



@media (min-width:992px){
    .negative-margin-top{
        margin-top: -45px !important;
    }
}



@media (max-width:1904px){
    .home-what-we-do .titles{
        min-height:117px !important;
    }
}

@media (max-width:1704px){
    .home-what-we-do .description{
        min-height:110px !important;
    }

    .home-what-we-do .u-block-hover__visible{
        padding: 25px 30px 22px 30px;
    }

    .explore-div{
        padding-left:30px;
    }

}

@media (max-width:1250px){
    .home-what-we-do .u-block-hover__visible{
        padding: 25px 15px 22px 15px;
    }

    .explore-div{
        padding-left:15px;
    }

}

/*large devices, Desktops*/

@media (max-width:1199px){

    .fixed-row {
        position: inherit;
    }

    .on-big-screen{
        display:block;
    }

    .new-hero-image {
        height: 100vh;
    }

    .on-mobile{
        display:none;
    }

    h1, .h1{
        font-size:50px;
    }
    
    h2, .h2{
        font-size:45px;
    }
    
    h3, .h3{
        font-size:40px;
    }
    
    h4, .h4{
        font-size:35px;
    }
    
    h5, .h5{
        font-size:30px;
    }

    .h5.logo-packages-font{
        font-size:29px;
    }
    
    h6, .h6 {
        font-size:25px;
    }
    
    .p1{
        font-size:20px;
    }

    .font-sixty{
        font-size:50px;
    }

    .our-services .service{
        padding-bottom: 60px;
    }

    .attract-and-speaks h5{
        font-size:55px;
        line-height:60px;
    }

    .header-container{
        margin-top:70px
    }

    .custom-width{
        width:1100px;
    }

    .g-brd-top.g-brd-primary.fourpi{
        border-color: #2ac4ea !important;
    }

    .ul-margin-top{
        margin-top:-55px
    }

    .website-design-and-developemnt.blue-background{
        padding-top:200px;
    }

    .widget-title{
        border-bottom: 1px solid #41c1f0;
        margin-right:170px;
        padding-bottom:5px;
        font-weight: 600;
    }
    

    .website-design-and-developemnt{
        height:500px;
        background-repeat: no-repeat;
        /* background-position: center;*/
        /* background-size: 100%; */
        background-attachment: fixed;
    
    }

    .website-design-and-developemnt.blue-background .container{
        padding-bottom: 100px;
    }

    .g-line-height-35{
        line-height:35px;
    }

    .slider-max-width{
        max-width:870px;
    }

    .fourpi-home-cta{
        height:1155px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #blog-min-height h2{
        font-size:23px;
    }

    .hs-sub-menu, .hs-mega-menu {
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 2;
        margin-top: 15px !important;
        visibility: hidden;
        background-color: transparent;
        max-width: 120px !important;
    }

    .homepage-team-cta{
        height:650px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .aboutpage-team-cta{
        height:750px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .g-line-height-15{
        line-height:15px;
    }

    .our-service-hr{
        width:100%;
        margin-top:0px;
        margin-bottom:0px;
        border-top: 1px solid #D7D7D7;

    }

    .before-after{
        margin-left:90px;
    }

    .what-we-do-min-height{
      min-height: 372px !important;
    }

    .logo-pacakages p.text{
        min-height:92px;
    }

    .logo-package-divs{
        padding:50px 40px;
    }

    .background-fourpi{
        background-repeat: no-repeat;
        background-position-y: center;
        background-attachment: fixed;
    }

    .background-fourpi-casestudies{

        background-repeat: no-repeat;
        background-position-y: center;

    }
    .digital-and-branding-presence .heading{
        min-height:44px;
    }

    .website-design-and-developemnt .g-line-height-40{
        line-height:40px;
    }

    .compass-logo .ladies, .compass-logo .compass, .queen-logo .ladies, .queen-logo .compass{
        height:100%;
        width:100%;
        object-fit: cover;
    }

    .try-yourself .arrow-text{
        margin-left:50px;
        display: inline-block;
    }
    .home-blocks{
        padding-right:2px;
        padding-left:2px;
    }

    .home-block{
        padding-right:3px;
        padding-left:2px;
    }

    .home-what-we-do .u-block-hover__visible{
        padding: 0px 10px 15px 10px;
    }

    .explore-div{
        padding-left:10px;
    }

    .home-hr{
        margin-top:80px; 
        margin-bottom:70px;
    }

    .blog-info{
        min-height:150px !important;
    }
    
    .blog-title{
        min-height:96px !important;
    }

    .home-header{
        /* height: calc(100vh - 120px); */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-top: 25px;
        padding-bottom: 100px;
    }
    
    .slick-slider{
        margin-top:140px;
    }

    
}

@media (max-width:1100px){

    .home-header{
        /* height: calc(100vh - 120px); */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-top: 25px;
        padding-bottom: 100px;
    }
}

@media (max-width:1025px){
    .home-what-we-do .titles{
        min-height:90px !important;
        font-size:22px;
    }

    .home-what-we-do .description{
        display:none;
    }
}

/*medium devices, Tablets*/

@media (max-width:991px){
    .hidden-md-down{
        display:none;
    }

    .proud-to-support-community .g-font-size-18{
        font-size:15px !important;
    }

    .proud-to-support-community .arrow-buttons.btn.latrobe {
        margin-top: -33px;
        margin-left: 9px;
    }

    .proud-to-support-community .arrow-buttons.btn.macleod {
        margin-top: -76px;
        margin-left: 160px;
    }

    .proud-to-support-community .arrow-buttons.btn.vmj {
        margin-top: -7px;
        margin-left: 7px;
    }

    h1, .h1{
        font-size:42px;
    }
    
    h2, .h2{
        font-size:38px;
    }
    
    h3, .h3{
        font-size:35px;
    }
    
    h4, .h4{
        font-size:32px;
    }
    
    h5, .h5{
        font-size:27px;
    }
    
    h6, .h6{
        font-size:22px;
    }
    
    .p1{
        font-size:18px;
    }

    .attract-and-speaks h5{
        font-size:47px;
        line-height:50px;
    }

    .ul-margin-top{
        margin-top:0px
    }

    .g-line-height-15{
        line-height:50px;
    }

    .website-design-and-developemnt{
        height:500px;
        background-repeat: no-repeat;
        /* background-position: center;*/
        background-size: cover;
        background-attachment: fixed;
        background-position-x: 35%;
    
    }

    .widget-title{
        border-bottom: 1px solid #41c1f0;
        margin-right:550px;
        padding-bottom:5px;
        font-weight: 600;
    }
    

    .website-design-and-developemnt.blue-background{
        padding-top:150px;
    }

    .custom-width{
        width:720px;
    }
    
    .website-design-and-developemnt.blue-background .container{
        padding-bottom: 100px;
    }

    .g-brd-top.g-brd-primary.fourpi{
        border-color: transparent !important;
    }

    .our-service-hr{
        width:0%;
        margin-top:0px;
        margin-bottom:0px;
        border-top: 1px solid #D7D7D7;

    }

    .hs-sub-menu, .hs-mega-menu {
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 2;
        margin-top: 0px !important;
        visibility: hidden;
        background-color: transparent;
        max-width: 120px !important;
    }

    .before-after{
        margin-left:0px;
    }

    .what-we-do-min-height{
      min-height: 250px !important;
    }

    .logo-pacakages p.text{
        min-height:80px;
    }

    .digital-and-branding-presence .heading{
        min-height:auto;
    }

    .who-we-are h5.headings, .attract-and-speaks h5.headings{
        line-height: 34px;
    }

    .website-design-and-developemnt .g-line-height-40{
        line-height:45px;
    }

    .logo-package-divs{
        padding:40px 80px;
    }

    .compass-logo .ladies, .queen-logo .ladies{
        height:100%;
        width:100%;
        object-fit: cover;
    }

    .compass-logo .compass,.queen-logo .compass{
        height:60%;
        width:100%;
        object-fit: cover;
    }

    .osa-logo .compass{
        height:500px;
        width:100%;
        object-fit: cover;
    }
    .flawless-logo .compass{
        height:350px;
        width:100%;
        object-fit: cover;
    }

    .compass-logo-information, .ibn-logo-information, .queen-logo-information{
        margin-top:-250px;
    }

    .try-yourself .arrow-text{
        margin-left:0px;
        display: inline-block;
    }

    .navbar-collapse{
        padding-left:15px;
        padding-bottom:20px;
    }

    .home-what-we-do .titles {
        min-height: 58px !important;
        font-size: 22px;
    }

    .home-what-we-do .description {
        display:block;
    }

    .home-hr{
        margin-top:80px; 
        margin-bottom:50px;
    }

    .blog-info{
        min-height:150px !important;
    }
    
    .blog-title{
        min-height:92px !important;
    }
    .bg-slider-cover{
        position: relative;
        padding-top: 0px;
        top: 0;
    }

    .home-header{
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left;
        padding-top: 25px;
        padding-bottom: 100px;
    }

    .slick-slider {
        margin-top: 40px;
    }

    .header-container{
        margin-top:0px
    }
}

/*small devices, Landscape phones*/

@media (max-width:767px){

    .new-hero-image {
        height: 100vh;
    }

    .new-hero-image .main-heading {
        font-weight: 400;
        line-height: 80px;
        font-size: 60px;
        color: #FFFFFF;
        letter-spacing: -1.75px;
    }

    .new-hero-image .header-container-new {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 410px;
    }

    .new-hero-image .main-heading {
        font-weight: 400;
        line-height: 60px;
        font-size: 50px;
        color: #FFFFFF;
        letter-spacing: -1.2px;
    }

    .hamburger-box {
        width: 25px !important;
        height: 25px;
    }

    .main-links.full-header{
        font-size:32px;
    }

    .h5.logo-packages-font {
        font-size: 23px;
    }

    .on-big-screen{
        display:none;
    }
    .on-mobile{
        display:block;
    }

    .hidden-md-up{
        display:block;
    }

    .hidden-sm-down{
        display:none;
    }

    h1, .h1{
        font-size:38px;
    }
    
    h2, .h2{
        font-size:33px;
    }
    
    h3, .h3{
        font-size:30px;
    }
    
    h4, .h4{
        font-size:28px;
    }
    
    h5, .h5{
        font-size:24px;
    }
    
    h6, .h6{
        font-size:20px;
    }
    
    .p1{
        font-size:17px;
    }

    .attract-and-speaks h5{
        font-size:42px;
        line-height:47px;
    }

    .website-design-and-developemnt.blue-background{
        padding-top:220px;
    }

    .website-design-and-developemnt.blue-background .container{
        padding-bottom: 80px;
    }

    .what-we-do-min-height{
        min-height: 290px !important;
    }

    .logo-pacakages p.text{
        min-height:50px;
    }

    .website-design-and-developemnt .g-line-height-40{
        line-height:48px;
    }

    .logo-package-divs{
        padding:30px 80px;
    }

    .compass-logo-information{
        margin-top:-230px;
    }

    .home-block{
        padding-right:4px;
        padding-left:2px;
    }

    .widget-title{
        border-bottom: 1px solid #41c1f0;
        margin-right:380px;
        padding-bottom:5px;
        font-weight: 600;
    }
    
    .home-hr{
        margin-top:70px; 
        margin-bottom:40px;
    }

    .custom-width{
        width:560px;
    }

    .slider-logo{
        width: 100px;
        height: auto;
    }

    .logo-images {
        min-height: 0px;
        position: relative;
    }

    .mobile-logo-brands .macleod.arrow-buttons{
        margin-left: 71px;
        margin-top: -33px;
    }

    .mobile-logo-brands .latrobe.arrow-buttons{
    margin-left: 2px;
    margin-top: -30px;
    }

    .mobile-logo-brands .vmj.arrow-buttons{
        margin-left: 67px;
    }

    .custom-width {
        width: auto;
    }

}

@media (max-width:650px){
    .compass-logo-information, .ibn-logo-information, .queen-logo-information{
        margin-top:-200px;
    }
}

/*extra small devices, Potrait Phones*/

@media (max-width:575px){

    h1, .h1{
        font-size:35px;
    }
    
    h2, .h2{
        font-size:30px;
    }
    
    h3, .h3{
        font-size:28px;
    }
    
    h4, .h4{
        font-size:26px;
    }
    
    h5, .h5{
        font-size:23px;
    }
    
    h6, .h6{
        font-size:19px;
    }

    .new-template .test-class .h5{
        font-size:30px !important;
        line-height: 35px;
    }
    
    .p1{
        font-size:17px;
    }

    .font-sixty {
        font-size: 29px;
    }

    .attract-and-speaks h5{
        font-size:38px;
        line-height:40px;
    }

    .what-we-do-min-height{
        min-height: 250px !important;
    }

    .logo-pacakages p.text{
        min-height:92px;
    }

    .g-line-height-35{
        line-height:30px;
    }

    .widget-title{
        border-bottom: 1px solid #41c1f0;
        margin-right:220px;
        padding-bottom:5px;
        font-weight: 600;
    }

    .website-design-and-developemnt .g-line-height-40{
        line-height:43px;
    }

    .who-we-are h5.headings, .attract-and-speaks h5.headings{
        line-height: 27px;
    }

    .logo-package-divs{
        padding:25px 40px;
    }

    .compass-logo-information, .ibn-logo-information, .queen-logo-information{
        margin-top:-120px;
    }

    .home-blocks{
        padding-right:15px;
        padding-left:15px;
    }
    .home-block{
        padding-right:15px;
        padding-left:15px;
    }

    .home-hr{
        margin-top:50px; 
        margin-bottom:30px;
    }

    .blog-info{
        min-height:75px !important;
    }
    
    .blog-title{
        min-height:25px !important;
    }
    .osa-logo .compass, .flawless-logo .compass{
        height:220px;
        width:100%;
        object-fit: cover;
    }

    .custom-styling-case-study-name{
        font-size: 40px;
    }
}

@media (max-width:330px){
    .compass-logo-information, .ibn-logo-information, .queen-logo-information{
        margin-top:-80px;
    }

    .attract-and-speaks h5{
        font-size:35px;
        line-height:38px;
    }

    .widget-title{
        border-bottom: 1px solid #41c1f0;
        margin-right:200px;
        padding-bottom:5px;
        font-weight: 600;
    }

    .mobile-logo-brands span.g-font-size-18{
        font-size:14px !important;
    }
    .mobile-logo-brands .latrobe.arrow-buttons {
        margin-left: 16px;
        margin-top: -30px;
    }
}

/* 
Harsh */
@media (max-width:1920px)
{
    .fourpi-padding-media-queries
    {
        padding-left: 65px !important;
        padding-right: 30px !important;
    }
}

.u-header{
    background-color: transparent;
    /* transform: translateZ(0);  */
}

/* Blog Editor Styles */
/* h4.blog-subtitle-1,
p.blog-normal {
    font-family: 'Open Sans', sans-serif;
}

h4.blog-subtitle-1 {
    font-size: 22px;
    font-weight: 700;
    color: #132c51 !important;
}

p.blog-normal {
    color: #132c51 !important;
    font-size: 15px;
    margin-bottom: 15px;
}

@media (max-width: 992px) {
    p.blog-normal {
        margin-bottom: 10px;
    }
} */

.blog-subtitle-1,
.blog-normal {
    font-family: 'Open Sans', sans-serif;
}

.blog-subtitle-1 {
    font-size: 22px;
    font-weight: 700;
    color: #132c51 !important;
}

.blog-normal {
    color: #132c51 !important;
    font-size: 15px;
    margin-bottom: 15px;
}

@media (max-width: 992px) {
    .blog-normal {
        margin-bottom: 10px;
    }
}
/* End Blog Editor Styles */

/* new case studies */

.slider-case-studies{
    background-color: rgba(246,246,246,0.5);
}

.new-case-studies .u-carousel-indicators-v1 span {
    background-color: rgba(246,246,246,0.5) !important;
    width: 12px !important;
    height: 12px !important;
    border: 1px solid #979797;
}

.new-case-studies.cd3-case-study .u-carousel-indicators-v1 li.slick-active span, .new-case-studies.cd3-case-study .u-carousel-indicators-v1--white li.slick-active span {
    background-color: #000 !important;
    border: 1px solid #000 !important;
    width: 12px !important;
    height: 12px !important;
}

.new-case-studies.phelan-shilo-case-study .u-carousel-indicators-v1 li.slick-active span, .new-case-studies.phelan-shilo-case-study .u-carousel-indicators-v1--white li.slick-active span {
    background-color: #353F45 !important;
    border: 1px solid #353F45 !important;
    width: 12px !important;
    height: 12px !important;
}

.new-case-studies .u-carousel-indicators-v1 li, .new-case-studies .u-carousel-indicators-v1--white li {
    margin: 0 18px;
}

.new-case-studies.cd3-case-study .progress {
    font-size: 1rem;
    line-height: inherit;
    background-color: #d3d3d3 !important;
}

.new-case-studies.phelan-shilo-case-study .progress {
    font-size: 1rem;
    line-height: inherit;
    background-color: #d3d3d3 !important;
}


.new-case-studies.cd3-case-study .progress-bar {
    height: auto;
    min-height: 12px;
    background-color: #d3d3d3;
}

.new-case-studies.phelan-shilo-case-study .progress-bar {
    height: auto;
    min-height: 12px;
    background-color: #d3d3d3;
}

.new-case-studies.cd3-case-study .u-progress__pointer-v1 {
    top: 50%;
    width: 15px !important;
    height: 15px !important;
    margin: -7px -9px 0 0 !important;
    line-height: 42px;
    background-color: #fc7036!important;
}

.new-case-studies.phelan-shilo-case-study .u-progress__pointer-v1 {
    top: 50%;
    width: 15px !important;
    height: 15px !important;
    margin: -7px -9px 0 0 !important;
    line-height: 42px;
    background-color: #fff !important;
}

.cd3-brand-personality{
    background-color: #15161A;
}

.phelan-brand-personality{
    background-color: #353F45;
}

.new-case-studies .case-studies .fourpi-color-dark-blue{
    color: #000 !important;
}

.website-design-and-developemnt.cd3-case{
    background-image: url('/assets/img/case-studies/cd3-case-study-hero.jpg');
    height:545px;
}

.website-design-and-developemnt.phelan-case{
    background-image: url('/assets/img/case-studies/PSP-Case-Study-Hero.jpg');
    height:545px;
}

.phelan-case h2.h5, .cd3-case h2.h5{
    font-size:60px;
}

.website-design-and-developemnt.cd3-case h2.h5{
    font-size:60px;
}

.website-design-and-developemnt.cd3-case .case-heaidng{
    line-height: 17px;
}

.whitebg.cd3-case-study .custom-color{
    color:black;
}

.whitebg.phelan-shilo-case-study .custom-color{
    color:#353F45;
}

.new-case-studies.cd3-case-study .case-studies .fourpi-color-dark-blue {
    color: #000 !important;
}

.new-case-studies.phelan-shilo-case-study .case-studies .fourpi-color-dark-blue {
    color: #353F45 !important;
}

@media (max-width:767px){
    .new-case-studies .g-absolute-centered,.new-case-studies .g-absolute-centered--x {
        left: 47%!important;
    }

    .new-case-studies .g-line-height-35 {
        line-height: 35px;
    }

    .new-case-studies .u-carousel-indicators-v1 li, .new-case-studies .u-carousel-indicators-v1--white li {
        margin: 0 14px;
    }

    .new-case-studies td.first-td{
        width:26%;
        padding-right: 10px;
    } 

    .new-case-studies td.second-td{
        width:50%;
    } 

    .new-case-studies td.third-td{
        width:33%;
        padding-left:8px;
        text-align:right;
    } 

    .new-case-studies td.third-td p, .new-case-studies td.first-td p{
        margin-bottom:4px;
    } 

    .phelan-case .g-line-height-35 {
        line-height: 45px;
    }

    .phelan-case h2.h5, .cd3-case h2.h5 {
        font-size: 40px;
    }

    .new-case-studies .u-carousel-indicators-v1 li, .new-case-studies .u-carousel-indicators-v1--white li {
        margin: 0 10px;
    }

}

@media (max-width:575px){
    .website-design-and-developemnt.cd3-case{
        background-image: url('/assets/img/CD3-mobile-case-study-hero.jpg');
        height:555px;
    }

    .website-design-and-developemnt.phelan-case{
        background-image: url('/assets/img/case-studies/phelan-mobile-case-study-hero-mob.jpg');
        height:555px;
        background-attachment: inherit;
    }
}