.port-orangebg {background-color: #d55e35;}
.port-bluebg {background-color: #1c2232;}
.port-whitebg {background-color: #fff;}
.port-orangetext {color: #d55e35;}
.port-whitetext {color: #fff !important;}
.port-bluetext {color: #1c2232;}
.port-20pad {padding: 20px;}
.port-herobar {font-family: 'Roboto Slab', serif;font-size: 16px;font-weight: 100;margin: 0;}
.port-offsetbg {background-position: right: 50% !important;}
.port-ctabutton-white {padding: 10px 20px; color: #1c2232; background-color: #fff;text-transform: uppercase;}
.port-ctabutton-white:hover {color: #fff !important; background-color: #1c2232;}

@media only screen and (max-width: 767px) {
.port-rightsidebg {background-position: right !important;}
.port-leftsidebg {background-position: left !important;background-size: auto !important;}
.port-whitebg-mobile {background-color: #fff;}
}

.htagfix {font-family: 'Roboto Slab' !important;color: #d55e35;text-transform: uppercase;}

.port-graphicdotsbg {
   background-image: url('/portfolio-assets/bkgd.jpg');
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
}
.TESbubble {
   background-color: #3883b3;
   padding: 40px;
   color: #fff;
}
.TESattribute {
   color: #fff;
}
.TESbubble:before,
.TESbubble:after{
   position: absolute;
   font-size: 90px;
   color: #ffffff78;
   font-weight: 700;
}
.TESbubble:before{
   content: '\201c';
   top: 0;
   left: 10px;  
   line-height: 1;  
}
.TESbubble:after{
   content: '\201d';
   bottom: 0; right: 10px;    
}
.TESarrows {
   margin-top:-20px;
}
.TEStriangle {
    width: 50px;
    height: 50px;
    background: linear-gradient(to top right, #3883b300 0%, #3883b300 50%, #3883b3 50%, #3883b3 100%);
    margin: 0;
    display: inline-block;
}
.TESname {
   display: inline-block;
   margin-left: 20px;
}

@media only screen and (max-width: 576px) {
.TESarrows {margin-top:20px;}
.TEStriangle {display: none;}
}

.carousel-control-next, .carousel-control-prev {width: auto !important;}
/* Base block*/
.stats{
   display: flex;
   justify-content: center;
   align-items: center;
   max-width: 60rem;
}
.block {
   margin: 1rem;
}

.checkerboard-cta{color: #0083b3;} 
.checkerboard-cta:hover{color: #0071a6;}

/* STATS */
svg { 
   fill: transparent;
   stroke-width: 20px;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}
.show-hidden {
   font-size: 1.6rem; 
   fill: #000; 
   transition: all .3s;
}
.amount {
   font-size: 2.4rem;
   font-weight: bold;
   color: #000;
}
.title {
   font-size: 1.2rem;
   color: #000;
}
.stroke{
  stroke: #d55e35;
  stroke-dasharray: 565.2; /* (3.14 * 180) */ 
  stroke-dashoffset: 565.2;
  transition: all 1s;
  animation: offset 1s 1s forwards;
}

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

/* 100-PERCENTAGE=V1, (565.2 / 100) * V1) = offset */
@keyframes stat1 { 100% { stroke-dashoffset: 101; }} /*82*/
@keyframes stat2 { 100% { stroke-dashoffset: 254; }} /*55*/
@keyframes stat3 { 100% { stroke-dashoffset: 0; }} /*100*/

.show-hidden { animation: showHidden 0.3s 3.0s forwards; opacity: 0; }
.fade-in { animation: fadeIn 1.0s 0.5s forwards; opacity: 0; }
.stat1 { animation: stat1 1.0s 1.0s forwards; }
.stat2 { animation: stat2 1.0s 1.0s forwards; }
.stat3 { animation: stat3 1.0s 1.0s forwards; }