/***** theme-blog-mart.css *****/

.blogpost .blogpost-body {
 padding-bottom:2rem;


}

.page-blog .jointitle {
 color:#fff;
 font-weight:900;
 -webkit-transform:translateZ(0) rotate(-2deg) scale(1);
 transform:translateZ(0) rotate(-2deg) scale(1);
 z-index:0;
 animation:beat;
 animation-duration:2.5s;
 animation-delay:.35s;
 transition:transform .5s ease-in-out;
 margin:1rem auto;
 text-shadow:0 5px 60px rgba(0,0,0,.9)
}
@keyframes beat {
 0% {
  transform:scale(1)
 }
 25% {
  transform:scale(.97)
 }
 35% {
  transform:scale(.9)
 }
 45% {
  transform:scale(1.1)
 }
 55% {
  transform:scale(.9)
 }
 65% {
  transform:scale(1.1)
 }
 75% {
  transform:scale(1.03)
 }
 90% {
  transform:scale(.95)
 }
 100% {
  transform:scale(1) rotate(-2deg)
 }
}
.page-blog .jointitle * {
 color:var(--white);
 font-weight:900;
 font-size:3rem
}

.page-blog .blog-newsletter:before {
 width:120px;
 height:90px;
 top:-40px;
 left:50%;
 transform:translateX(-50%);
 background-image:url('../images/art/MARTfoot_mailing-icon.png');
 background-repeat:no-repeat;
 background-size:contain;
 background-position:top
}
.page-blog .blog-newsletter:after {
 width:90px;
 height:90px;
 top:-40px;
 left:51.5%;
 transform:translateX(-50%);
 background-color:var(--mart-dark-blue);
 z-index:-1;
 border-radius:50%;
 border:2px solid #fff
}
.page-blog .blog-newsletter .title {
 margin-bottom:.25rem
}
.page-blog .blog-newsletter .subtitle {
 font-weight:600;
 color:#fff
}
.page-blog .blog-newsletter input {
 height:50px;
 border-radius:2px
}
.page-blog .blog-newsletter input::placeholder {
 color:var(--mart-grey)
}
.page-blog .blog-newsletter button {
 padding:1.25rem 1rem;
 background:var(--mart-purple)
}
.page-blog .blog-newsletter button:hover {
 background-color:var(--mart-purple-hvr);
 border-color:#fff
}
.page-blog .blog-intro h1 {
  position:relative;
  color:var(--mart-blue-1);
  text-transform:capitalize;
font-weight: 600;
}

.page-blog .blog-intro h1:after {
  color:var(--mart-primary);
  content:'\f0c8\f0c8\f0c8\f0c8\f0c8';
  display:block;
  font-size:10px;
  font-family:'Font Awesome 5 Pro';
  letter-spacing:10px;
  margin-top:1rem;
  font-weight:500;
  
}


.page-blog .dropdown .dropdown-toggle {
 text-align:center;
 border-color:var(--mart-secondary);
 background-color:#fff;
 border-width:2px
}
.page-blog .dropdown .dropdown-toggle:hover,
.page-blog .dropdown.show {
 background-color:var(--mart-secondary);
 color:#fff
}
.page-blog .dropdown.show .dropdown-item {
 position:relative
}
.page-blog .dropdown.show .dropdown-toggle::after {
 transform:rotate(180deg)
}
.page-blog .dropdown.show .dropdown-item {
 overflow:hidden
}
.page-blog .dropdown.show .dropdown-item:before {
 content:'';
 position:absolute;
 width:10px;
 height:30%;
 top:50%;
 transform:translateY(-50%);
 left:10px;
 background-color:var(--mart-secondary);
}
.page-blog .dropdown.show>.btn-secondary.dropdown-toggle {
 color:#fff;
 background-color:var(--mart-blue-2);
 border-color:var(--mart-blue-2)
}
.blogpost-grid .card {
 box-shadow:0 0 10px 3px rgba(10,10,10,.2);
 border-radius:calc(.25rem - 1px)
}
.blogpost-grid .card-body .blog-category {
 position:relative;
 border:2px solid #03263e;
 background-color:var(--mart-secondary);
 color:#fff;
 padding:3px 7px 4px;
 z-index:0;
 left:-5px
}
.blogpost-grid .card-body .blog-category:before {
 background:none
}
.blogpost-grid .card .card-date {
 font-size:14px;
 font-weight:500;
 position:relative;
 padding-left:1rem
}
.blogpost-grid .card .card-date:before {
 content:'\f017';
 font-family:'Font Awesome 6 Pro';
 position:absolute;
 width:10px;
 height:10px;
 left:0;
 font-weight:400;
 color:#74024d
}
.blogpost-grid .card-body .card-summary {
 font-size:16px;
 height:auto
}
.page-blog .blogpost-grid .card-summary:after,
.blogpost-category .blogpost-grid .card-summary:after {
 background:none
}
.blogpost-grid .card .card-overlay:hover:before {
 background-color:var(--mart-cta)!important
}
.page-blogcategory .jumbotron {
  position: relative;
  overflow: hidden;
  z-index: 0;
 background-color:var(--mart-primary);
   background: rgb(51,153,204);
background: -moz-linear-gradient(45deg, rgba(51,153,204,1) 0%, rgba(42,122,168,1) 14%, rgba(14,30,58,1) 76%);
background: -webkit-linear-gradient(45deg, rgba(51,153,204,1) 0%, rgba(42,122,168,1) 14%, rgba(14,30,58,1) 76%);
background: linear-gradient(45deg, rgba(51,153,204,1) 0%, rgba(42,122,168,1) 14%, rgba(14,30,58,1) 76%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3399cc",endColorstr="#0e1e3a",GradientType=1); 
}
.page-blogcategory .jumbotron:before,
.page-blogcategory .jumbotron:after {
    content:'';
  position: absolute;
  top:0;
    height: 400px;

  background: #2d7e9c;
    width:100%;
}
.page-blogcategory .jumbotron:before {

  left:-40vw;
     mix-blend-mode: multiply;
  transform: skew(-50deg);




}
.page-blogcategory .jumbotron:after {

  right:-40vw;
     mix-blend-mode: overlay;
  transform: skew(50deg);





}
.page-blogcategory .jumbotron h1 {
 color:#fff;
 font-weight:700;
 margin: 0;
 letter-spacing: 1px;
 font-style: italic;
  z-index: 1;
  position: relative;
}

.page-blogpost .blogpost-hero {
  position: relative;
 background:var(--mart-dark-blue) no-repeat center / cover;

}

 .page-blog .jumbotron {
  min-height:460px;
  margin-bottom:3rem;
 }



/*contrast overlay*/
.blogpost .blogpost-hero:before {
   content:'';
 position:absolute;
 left:0;
 top:0;
  width: 100%;
  height: 100%;
  background: rgb(255,255,255);
background: -moz-linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(34,34,34,0.3) 34%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(34,34,34,0.3) 34%, rgba(0,0,0,1) 100%);
background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(34,34,34,0.3) 34%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1); 
  mix-blend-mode: multiply;
 
}

.page-blogpost .blogpost-date i {
 color:var(--mart-blue-1);
 padding-right:2px
}
.blogpost .blogpost-hero .container {
 display:flex;
 height:100%
}
.blogpost .blogpost-hero .row {
 padding-right:15px;
 padding-left:15px;
 align-items:center
}
.blogpost .blogpost-hero .blogpost-category {
 border:2px solid var(--mart-blue-1);
 background-color:var(--mart-blue-1);
 color:#fff;
 font-size:12px;
 display:inline-block;
 padding:4px 9px
}
.page-blogpost .blogpost .container:first-of-type .row {
 -ms-display:flex;
 display:flex;
 align-items:center
}
.page-blogpost .social-share {
 margin-top:.75rem
}
.page-blogpost .social-share a {
 background-color:var(--mart-purple);
 text-align:center
}
.page-blogpost .social-share a:hover {
 background-color:var(--mart-purple-hvr)
}
.page-blogpost .social-share a:hover i {
 color:#fff
}
.page-blogpost .social-share a:first-of-type {
 margin-right:4px
}
.page-blogpost .blogpost-sidebar h3 {
 font-size:13px
}
.page-blogpost .blogpost-sidebar li a {
 font-size:13px;
 padding-left:1rem
}
.page-blogpost .blogpost-sidebar li a:before {
 content:'';
 position:absolute;
 width:6px;
 height:15%;
 top:50%;
 transform:translateY(-50%);
 left:.25rem;
 background-color:var(--mart-blue-1)
}
.page-blogpost .blogpost-body p {
 font-size:17px
}
.page-blogpost .first:first-letter {
 float:left;
 font-size:65px;
 position:relative;
 line-height:40px;
 font-style:italic;
 z-index:0;
 font-weight:600;
 padding-right:.55rem;
 padding-top:5px;
 color:var(--mart-blue-1)
}
.page-blogpost .blogpost-body h2,
.page-blogpost .blogpost-body h3,
.page-blogpost .blogpost-body h4 {
 margin-bottom:1rem;
 margin-top:2rem
}
.page-blogpost .blogpost-body h2 {
 color:var(--mart-blue-1);
 font-weight:700
}
.page-blogpost .blogpost-body h2.step {
 counter-increment:a
}
.page-blogpost .blogpost-body h2.step .numb {
 display:block;
 width:55px;
 height:50px;
 position:relative;
margin-bottom:.5rem;

}
.page-blogpost .blogpost-body h2.step .numb:before {
 content:counter(a);
 position:absolute;
 font-size:30px;
 color:#fff;
 width:inherit;
text-align:center;
 font-style:italic;
 line-height: 50px;
 font-weight: 600;
}
.page-blogpost .blogpost-body h2.step .numb:after {
 content:'';
 position:absolute;
 left:0;
 top:0;
 width:55px;
 height:50px;
 display:inline-block;
 border-radius:10%;
 z-index:-1;
 border:2px solid var(--mart-dark-blue);
  background: var(--mart-blue-1);
}
.page-blogpost .blogpost-body h3 {
 font-weight:600
}
.page-blogpost .blogpost-body h4 {
 font-weight:500
}
.page-blogpost figure {
 margin:1.5rem 0
}

.page-blogpost figcaption {
 color:var(--mart-grey);
 position:relative;
 padding:8px;
 padding-left:20px;
 font-size:13px;
 z-index:1;

 border-bottom:1px solid;
}
.page-blogpost figcaption:before {
 content:'\f0d8';
 position:absolute;
 left:8px;
 font-family:'Font Awesome 6 Pro';
 font-weight:500;
 width:20px;
 z-index:0;
 height:20px;
 top:8px;
 color:var(--mart-blue-1);
}
.blogpost-body ul li,
.blogpost-body ol li {
 margin-bottom:1rem
}
.blogpost-body ul {
 list-style-type:none;
 padding-left:2.75rem
}
.blogpost-body ul li {
 position:relative
}
.blogpost-body ul li:before {
 content:'\f058';
 position:absolute;
 font-family:'Font Awesome 6 Pro';
 width:8px;
 height:8px;
 top:0;
 left:-20px;
color:var(--mart-purple);
}
.blogpost-body ol {
 list-style-type:none;
 margin-bottom:2em;
 padding-left:2.75rem
}
.blogpost-body ol li {
 counter-increment:b;
 position:relative
}
.blogpost-body ol li:before {
 content:counter(b);
 display:inline-block;
 position:absolute;
 font-size:18px;
 color:var(--mart-blue-1);
 width:37px;
 height:37px;
 left:-40px;
 top:-2px;
 text-align:center;
 font-weight:900;
 font-style:italic
}
.blogpost-body ol li:after {
 content:'';
 position:absolute;
 z-index:-1;
 width:30px;
 height:32px;
 left:-37px;
 top:-5px;
 background:#000;
 border-radius:10%
}
.source-wrapper {
 border:1px solid var(--mart-secondary);
 border-radius:2px;
 padding:1rem;
 margin-top:2rem;
 margin-bottom:1rem
}
.source-wrapper strong {
 color:var(--mart-secondary);
}
.source-wrapper p:last-of-type {
 margin-bottom:.25rem
}
.quoteblock {
 position:relative;
 padding-top:1rem;
 padding-bottom:1rem;
 padding-left:3rem;
 font-style:italic
}
.quoteblock * {
 font-size:1.5rem;
 color:var(--mart-primary);
}
.quoteblock:before {
 content:'\f10d';
 font-family:'Font Awesome 6 Pro';
 font-weight:800;
 position:absolute;
 top:.15rem;
 left:-.75rem;
 color:var(--mart-blue-1);
 font-style:italic;
 font-size:3rem;
 z-index:-1
}
.page-blogpost .cta-disclaimer {
 padding:1rem 1.5rem;
 font-style:italic;
 border:1px solid var(--mart-blue-2);
 border-radius:4px;
 margin-top:1.75rem;
 margin-bottom:2.25rem
}
.page-blogpost .cta-disclaimer h4 {
 margin-top:.75rem;
 font-size:.9rem;
 color:var(--mart-blue-2)
}
.cta-disclaimer p {
 font-size:.9rem;
 color:var(--mart-dark-grey)
}
.cta-disclaimer i {
 padding-right:.25rem;
 color:var(--mart-blue-2)
}
/*ALERTS*/
.cta-alert {
 display:flex;
 -ms-display:flex;
 padding:1.5rem 1rem;
 border:1px solid var(--mart-secondary);
 border-radius:2px;
 box-shadow:0 0 10px 2px rgba(0,0,0,.1);
 margin:1.75rem 0 1.75rem
}
.cta-alert p {
 margin:0;
 padding-left:.5rem;
 padding-right:2rem;
 align-self:center;
 font-size:.95rem;
 color:var(--mart-blue-2)
}
.cta-alert a {
 font-weight:700
}


.cta-alert i {
 font-size:2rem;
 color:var(--mart-secondary);
 font-weight:300
}


.fw400 {
 font-weight:400
}
.fw600 {
 font-weight:600
}
.fw900 {
 font-weight:900
}
.mart-blue-1 {
 color:var(--mart-secondary);
}
.mart-blue-3 {

     
      color:var(--mart-tertiary);
}



/*Styling scrollable elements*/
.js-scroll {
opacity: 0;
transition: opacity 500ms;
}
.js-scroll-1 {
opacity: 0;
transition: opacity 250ms;
}
.js-scroll.scrolled {
opacity: 1;
}
.scrolled.fade-in {
animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left {
animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
animation: slide-in-right 1s ease-in-out both;
}
.scrolled.slide-right-2 {
animation: slide-in-right .2s ease-in both;
}
.scrolled.slide-down {
animation: slide-in-down 1s ease-in-out both;
}
.scrolled.slide-down-2 {
animation: slide-in-down-2 .2s ease-in both;
}
.scrolled.slide-up {
animation: slide-in-up 1s ease-in-out both;
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-down-2 {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-down {
0% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-up {
0% {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/**********  RESPONSIVE  *********/


@media(min-width:768px) {
    

 .page-blog .blog-intro h1 {
  font-size:1.75rem
 }
 .page-blogpost .blogpost-body h2 {
  font-size:26px
 }
 .page-blogpost .blogpost-body h3 {
  font-size:23px
 }
 .page-blogpost .blogpost-body h4 {
  font-size:20px
 }
    
}
@media(max-width:768px) {

 .page-blog .jointitle {
  margin-bottom:4rem
 }
 .page-blog .jointitle * {
  font-size:2rem
 }
 .page-blog .jointitle .j-o-text {
  font-size:2.7rem
 }
 .page-blogpost .blogpost-body p {
  font-size:15px
 }
 .page-blogpost .blogpost-hero {
  background-position:-130vw;
  background-size:cover;
  background-repeat:no-repeat;
  height:350px
 }
 .page-blogpost .blogpost-hero:before {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.75)
 }
 .page-blogpost h1 {
  font-size:1.75rem
 }

}
@media(hover) {
 .blogpost-grid .card:hover .card-overlay {
  display:none!important
 }
}