/* @import url("brand-stonethro.css"); */
@import url("brand-stonethro-barn.css");

body{
    font-size: 16px;
    line-height: 1.5;
    color: var(--brand-body-color);
    font-family: var(--brand-font-main);
    background: var(--brand-body-bg);
    font-weight: var(--brand-font-main-weight);
}

.youtube-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-height:50vw;
  }

#report-content{ font-family: var(--brand-font-main); font-weight: var(--brand-font-main-weight); }
h1{ font-family: var(--brand-font-main); letter-spacing: 0.075rem; font-weight: var(--brand-font-main-weight); }

h2,h3,h4,h5,h6{ font-family: var(--brand-font-second); font-weight: var(--brand-font-second-weight); }

h4, .font-para{ font-family: var(--brand-font-second); letter-spacing: 0.075rem; font-weight: var(--brand-font-second-weight); }

.display-4{ font-family: var(--brand-font-second); font-weight: var(--brand-font-second-weight); }  

hr.seperator{
  margin-top: 42px;
  margin-bottom: 42px;
}

p{
    line-height: 1.5;
    padding: 0;
    margin: 0 0 10px;
    color: inherit;
}

p:last-child{
    margin: 0;
}

button:focus{
    box-shadow: none !important;
    outline: none !important;
}

ul,ol{
    list-style: none;
    padding: 0;
    margin: 0;
}


.fs-32{
    font-size: 32px;
}

 .fs-14{
    font-size: 14px;
}

 .border-radius-10{
    border-radius: 10px;
}

 .color-seagreen{
    color: var(--brand-darker-green);
}


.border-seagreen{
    border-color: var(--brand-darker-green)!important;
    color: var(--brand-darker-green)!important;
}

.border-tangerine{
    border-color: #fd967c!important;
    color: #fd967c!important;
}

.f-w-400{
    font-weight: 400 !important;
}

.bg-light-green{
    /* background: #7fc3a9 !important; */
    background: var(--brand-darker-green)!important;
}

hr.separator {
    margin: 30px 0;
    border-top: 1px solid #eaeaea;
    opacity: 1;
}

 .border-bottom-2{
 	border-bottom: 3px solid transparent;
 }

.border-2{
 	border: 2px solid transparent;
 }

.bdr-gray{
	border-color: #f8f8f8;
}

.bdr-red {
 	border-color: #ff4f6e;
 }

.bdr-red .js-good{ display:none; }
.bdr-red .js-bad{ display:inline-block !important; }

.js-border-diff .js-bad{ display:none; }

 .text-red {
    color: #ff4f6e;
 }


.border-tl-radius-10{
    border-top-left-radius: 10px !important;}
.border-tr-radius-10{
    border-top-right-radius: 10px!important;}
    .border-bl-radius-10{
    border-bottom-left-radius: 10px!important;}
.border-br-radius-10{
    border-bottom-right-radius: 10px!important;}


 .bg-gray {
    background: #f8f8f8;
 }

 .bdr-seagreen {
 	  border-color: var(--brand-color-a);
 }

 .bdr-neutral {
 	  border-color: #ccc;
 }

.top-logo{ max-width:220px; height:auto; }

.custom-btn{
	background: var(--brand-button-a);
    display: inline-block;
    line-height: 1;
    border: 0;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    color: #000;
    padding: 5px 10px 6px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s ease;
}

.custom-btn:hover,
.custom-btn:focus{box-shadow: none; background: #000; outline: none;color: var(--brand-green); }

.custom-btn.bg-grey{ background: #f8f8f8; color: #000; }
.custom-btn.bg-grey:hover{ background: #000; color: white; }

.textblock-even{ margin-bottom: 0.2em!important; }

.loading-timeline-box-row{
 	margin:0 -1.5px !important;
 }

 .loading-timeline-box-row .col{
 	padding: 0 1.5px;
 	flex: 0 0 10%;
 	max-width: 10%;
}

.loading-timeline-box .box-img img{
    border-radius: 5px;
    border: 0;
    margin-bottom: 5px;
    width: 100%;
}

.loading-timeline-box .box-img {
    margin-bottom: 10px;
    box-shadow: 1px 1px 3px #ccc;
}

.loading-timeline-box .title {
    font-size: 15px;
    font-weight: 400;
    color: #797979;
    line-height: 1;
}

.score-message-heading{
	font-size: 25px;
    line-height: 1.1;
    font-weight: 500;
}


.heading-text {
    font-weight: 500;
    font-size: 25px;
    line-height: 1.2;
    margin-bottom: 30px;
    color: #000;
    font-family: var(--impact-font-second);
}

.heading-text.icon{
	padding-left: 30px;
	position: relative;
}

.heading-text.icon:before{
	left: 0;
	top: 5px;
	position: absolute;
	content: '';
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23d93025'/%3E%3Ccircle cx='14' cy='17' r='2.5' fill='white'/%3E%3Ccircle cx='26' cy='17' r='2.5' fill='white'/%3E%3Cpath d='M13,28 Q20,21 27,28' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
	width: 20px;
	height: 20px;
}

.heading-text.icon.thumbs-up:before{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%2397cc6d'/%3E%3Ccircle cx='14' cy='17' r='2.5' fill='white'/%3E%3Ccircle cx='26' cy='17' r='2.5' fill='white'/%3E%3Cpath d='M13,24 Q20,31 27,24' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.view-card-icon img{ display:none; } /* TODO remove the images */
.view-card-icon{
  background: url(../../images/face_icons_2.png) no-repeat;
  width: 20px;
  height: 20px;
  background-size: contain;
}
.view-card-icon.red-icon{
  background: url(../../images/face_icons_1.png) no-repeat;
  background-size: contain;
}
.view-card{
	padding: 18px;
}




.view-card-title-box{
	margin-bottom: 25px;
}

.view-card-title-box .view-card-left{
	flex: 1;
	padding-right: 5px:
}

.view-card-title-box .view-card-left span{
	display: block;
  color: #000;
  line-height: 1.2;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 15px;
}

.view-card-title-box .view-card-left p{
    padding: 0;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    color: var(--brand-darker-green);
}


.view-card-title-box .view-card-left p.red-text{
	color: var(--brand-red);
}

.view-card-title-box-green .view-card-left p{
	color: var(--brand-darker-green);
}


.view-card-title-box .view-card-icon{
	width: 20px;
}


.progress-wrapper {
    margin-bottom: 15px;
}
.progress-wrapper .progress-contain{
      display: flex;
    justify-content: space-between;
    font-size: 11px;
    align-items: center;
    line-height: 1;
    margin-bottom: 5px;
}

.progress-wrapper .progress-contain span{
 	  margin: 0 0 3px 2px;
    line-height: 1.1;
    font-weight: 500;
    color: #000;
}


.progress-wrapper .progress-contain strong{
    color: #767676;
    font-size: 15px;
    font-weight: 700;
}


.progress-wrapper  .progress {
    height: 7px;
}


.progress-wrapper.big {
    margin-bottom: 20px;
}

.progress-wrapper.big .progress {
	  height: 6px;
}

.progress-wrapper.big .progress-contain strong{
    font-size: 18px;
}

.progress-wrapper.big .progress-contain{
  font-size: 16px;
}



.progress-wrapper  .progress-bar{
	background: var(--color-new-green);
}
.progress-wrapper .progress{
	background: #e1e1e1;
}

.progress-wrapper.progress-red .progress-bar{
	background: #ff4f6e;
}

.progress-wrapper.progress-red .progress{
	background: #e1e1e1;
}

.progress-wrapper.progress-red  .progress-contain span{
	color: #ff4f6e;
}

.progress-wrapper.progress-red  .progress-contain strong{
	color: #ff4f6e;
}


.progress-wrapper.progress-seagreen .progress-bar{
	background: var(--brand-color-a);
}

.progress-wrapper.progress-seagreen .progress-contain span{
	color: var(--brand-color-a);
}
.progress-wrapper.progress-seagreen .progress-contain strong{
	color: var(--brand-color-a);
}

.progress-wrapper.progress-red  .progress-contain span.text-black,
.progress-wrapper.progress-red  .progress-contain span.text-black span,
.progress-wrapper.progress-seagreen .progress-contain span.text-black,
.progress-wrapper.progress-seagreen .progress-contain span.text-black span{
	color: #000;
}


.core-web-vitals-row{
	margin: 0 -9px;
}

.core-web-vitals-row div[class*='col-']{
	/*
	flex: 0 0 20%;
	max-width: 20%;
	*/
	flex: 0 0 25%;
	max-width: 25%;
	padding: 0 9px;
}

.view-number-text {
    font-size: 28px;
    line-height: 1;
    padding: 0 0 22px;
    font-weight: 700;
    color: #00c989;
}

.view-number-text.red-text {color: var(--brand-red); }

@media (min-width: 992px){
  .total-weight-contain {max-width: 580px;}
}
@media (min-width: 1200px){
  .total-weight-contain {max-width: 690px;}
}
@media (min-width: 1400px){
  .total-weight-contain {max-width: 800px;}
}

.total-page-weight-box .progress-wrapper .progress-contain strong{
	font-size: 12px;
}
.progress-wrapper {
    margin-bottom: 25px;
}

.page-weight-card hr.separator {
    margin: 5px 0;
}
.page-weight-card p {
    padding: 0;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 500;
}

.total-page-weigh-img {
    margin: 25px 0 10px;
}

.page-weight-card p.desktop {
    min-height: 20px;
}

.libraries-tbl-wrapper {
    overflow-x: auto;
    padding: 0px 40px 40px;
}

.libraries-tbl-wrapper table{
	min-width: 300px;
}
.libraries-tbl-wrapper table > thead > tr > th {
background: transparent;
padding-top: 20px !important;
padding-bottom:20px !important;

}

.desc-box{
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}

.libraries-tbl-wrapper table > tbody > tr >  td {
    padding: 10px;
}


.title-url-desc-text{
	font-weight: 400;
	margin-top: 40px;
}


.title-url{
    line-height: 36px;
    font-weight: 500;
}

.title-url-text a {
    font-weight: 500 !important;
    font-size: 36px !important;
    font-family: var(--brand-font-second);
    font-weight: var(--brand-font-second-weight);
}


.report-nav-tabs {
    justify-content: center;
    border: 0;
    margin-top: 30px;
    border-bottom: none !important;
}

.report-nav-tabs .nav-item{
    padding: 0 10px;
}

.report-nav-tabs .nav-item a.nav-link {
 padding: 8px 15px!important;
    margin: 0;
    border: 0;
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    border-radius: 10px;
    display: inline-block;
    min-width: 137px;
    background: var(--brand-very-light-gray); 
    text-align: center;
    transition: 0.5s ease;
    letter-spacing: 0.075rem;
    box-shadow: #00000024 1px 1px 4px 0px;
}

.report-nav-tabs .nav-item a.nav-link:hover,
.report-nav-tabs .nav-item a.nav-link.active {
    color: var(--brand-body-color);
    background: var(--brand-color-a);
}

#logo-tagline-wrap{
    width: 100%;
}
.navbar-dark .navbar-brand{ float:left }
.navbar-brand img{ max-width:216px; }
#top-description { float:right; padding: 12px 10px 10px 10px; }

.desc-box1 {
    border: 1px solid transparent;
    width: 90px;
    padding: 9px 5px;
    line-height: 1;
    border-radius: 5px;
    text-align: center;
    display: block;
    margin: 0 auto;
    font-weight: 700;
    font-size: 12px;
    color: #808080;
}



.black-box{
    background: #000;
    padding: 40px 50px 50px;
}


.banner-image-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 35px 0 60px 0;
  }

.banner-image-box .text-area-section{
    width: 90%;
    margin: auto;
    text-align: center;
}

.banner-image-box .text-area-section h1 {
    font-family: var(--brand-font-second);
    font-size: 86px;
    line-height: 1.18;
    margin-bottom: 0px;
    font-weight: var(--brand-font-second-weight);
}

.banner-image-box .text-area-section p{
    font-size: 14px;
}

.banner-image-box .image-section{
    width: 40%;
}

.banner-image-box .image-section img{
    width: 100%;
}


.icon-img-section ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.icon-img-section ul li {
   padding: 0;
   width: 20%;
   font-family: var(--brand-font-second);
   font-weight: var(--brand-font-second-weight);
}

.icon-img-section ul li img {
    margin-bottom: 6px;
    max-width:62px;
}

.icon-img-section ul li p {
    font-size: 20px;
    line-height: 1.3;
}

.footer-section {
    font-size: 13px;
    background: var(--brand-footer-bg);
    color: var(--brand-footer-color);
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 80px;
}

.footer-section p {
    text-align: center;
}

.custom-btn1{
    border: 0;
    color: white;
    background: black;
    border-radius: 10px;
    height: 55px;
    line-height: 55px;
    padding: 0 58px;
    display: inline-block;
    text-transform: uppercase;
    transition: 0.5s ease;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    letter-spacing: 0.075rem;
    transition: 0.5s ease;
}

.custom-btn1:hover,
.custom-btn1:focus{
    outline: none;
    box-shadow: none;
    color: var(--brand-green);
    background: var(--brand-blue);
}

.form-control{
    width: 100%;
    border: 1px solid #000;
    border-radius: 10px;
    background: #fff;
    padding: 0 20px;
    height: 55px;
    line-height: 53px;
}

.form-control:focus{
    border-color: var(--brand-green);
    box-shadow: none;
    outline: none;
}

.form-select.form-control{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:#fff url('../../images/down-arrow.png') no-repeat scroll calc(100% - 20px) center;
    background-size: 20px;
    padding-right: 46px;
}

.services-list li {
    padding-left: 65px;
    position: relative;
    min-height: 40px;
    margin-bottom: 20px;
    padding-top: 10px;
    font-size: 12px;
    font-weight: 700;
}

.services-list li:last-child {
    margin-bottom: 0;
}

.services-list li::before{
    content: '';
    position: absolute;
    left: 45px;
    top: 14px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: var(--brand-green);
}

.best-store-card p{
    margin-bottom: 35px;
}

.best-store-card .custom-btn{
    width: 100%;
    max-width: 540px;
}

.best-store-section{
    padding: 120px 0;
}

.site-performance-section{
    margin-bottom: 100px;
}

.site-performance-section .black-box-inner{
    max-width: 700px;
    margin: 0 auto;
}

.site-performance-section p {
    margin-bottom: 20px;
}

.site-performance-section p:last-child{
    margin-bottom: 0;
}

.secondary-section{
    padding-top:70px;
    padding-bottom: 45px;
}

.secondary-section h2 {
    font-family: var(--brand-font-second);
    text-align: center;
    font-weight: var(--brand-font-second-weight);
}

.search-section h2 {
    font-family: var(--brand-font-second);
    margin-bottom: 16px;
    font-size:2.5em;
    font-weight: var(--brand-font-second-weight);
}

.search-contain .search-btn {
    padding: 0 10px;
    width: 100%;
    background-color: var(--brand-search-button-bg);
    color: var(--brand-search-button-color);
}

.search-contain .search-btn:hover,
.search-contain .search-btn:focus{
	color: var(--brand-white);
  background: var(--brand-very-light-gray);
}

.search-contain {
    background: var(--brand-search-bg);
    color: var(--brand-search-color);
    padding: 35px 40px 50px;
}

/*
.search-contain .form-row div[class*='col-']{
    flex: 1;
    display: inline-block;
}
*/

/* .search-contain .form-row div[class*='col-']:last-child */
.small-column{
    flex: 0 0 285px!important;
    display: inline-block;
}
/*
.search-contain .message-row div[class*='col-']:last-child{
    flex: 0 0 370px;
    display: inline-block;
    text-align: right;
}
*/
.search-contain .form-control {
    border: 0;
}


.bg-very-light-gray{
    background: var(--brand-very-light-gray);
}

.demo-section{
    padding-top: 70px;
    background-color: rgb(245, 245, 245);
    color:black;
}

.demo-section.icon-img-section {
    padding: 60px 0 90px 0;
}

.icon-img-section h2 {
    text-align: center;
    font-family: var(--brand-font-second);
    margin-bottom: 60px;
    font-weight: var(--brand-font-second-weight);
}

.demotbl-wrapper{
    overflow-x: auto;
}

.demotbl-wrapper .table{
    /* min-width: 500px; */
}

.demotbl-wrapper .table tr > th {
    padding: 22px 10px;
    text-align: center;
    border-top: 1px solid var(--brand-body-color2);
    border-bottom: 1px solid var(--brand-body-color2);
    color: black;
    text-transform: uppercase;
    min-width: 136px;
    font-size:12px;
}
.demotbl-wrapper .table tr > th:last-child {
    min-width: 100px;
    width: 100px;
}

.demotbl-wrapper .table tr > th:first-child, .demotbl-wrapper .table tr > td:first-child{
    text-align: left;
    padding-left: 5px;
}

.demotbl-wrapper .table tr > td:first-child{
    padding-top: 15px;
}

.demotbl-wrapper .table tr > td {
    padding: 24px 10px 15px;
    text-align: center;
    border-bottom: 1px solid var(--brand-body-color2);
}

.brand-box .icon {
    width: 60px;
    height: 60px;
    box-shadow: 0 0 2px rgb(0 0 0 / 30%);
    border-radius: 12px;
    background-color: white;
    overflow: hidden;
}
.brand-box .icon img{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.brand-box .info {
    flex: 1;
    padding-left: 20px;
    padding-top: 6px;
}

.brand-box .info p {
    color: var(--brand-body-color2);
}

.brand-box .info span {
    color: black;
}

.face-icon{ width:28px; height:28px; }

.header  .navbar-collapse {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
}

.header {
    padding: 42px 0;
    background-color: var(--brand-body-bg);
}



.header .navbar-nav li{
    padding: 0 0 0 60px;
    margin: 0;
}

.header .navbar-nav li a{
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 !important;
    margin: 0;
    color: var(--brand-body-color);
    transition: 0.5s ease;
    font-size: 12px;
    letter-spacing: 0.015rem;
    font-family: var(--brand-font-main);
}

.header .navbar-nav li a:hover,
.header .navbar-nav li.current-menu-item a{
    color: var(--brand-green);
}

.login-box a{
    color: var(--brand-blue);
    background:  var(--brand-green);
    border-radius: 7px;
    padding: 7px 25px;
    text-transform: uppercase;
    transition: 0.5s ease;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    font-size: 14px;
    display: inline-block;
    letter-spacing: 2px;
}

.login-box a:hover,
.login-box a:focus{
	color: var(--brand-green);
    background: var(--brand-blue);
}

.result-box.result-box-left{
	padding-right: 33px;
}

.result-box.result-box-right {
    padding-left: 33px;
}

.result-box.result-box-left  canvas.js-canvas-weight,
.result-box.result-box-right canvas.js-canvas-theme {
    width: 150px !important;
    height: 150px !important;
    margin-left: auto;
    margin-right: auto;
}

.result-box.result-box-left .js-display-theme,
.result-box.result-box-right .js-display-theme{
	display: flex;
	flex-direction: column;
	/* height: 100%; */
}

.result-box.result-box-left .js-display-theme .view-card,
.result-box.result-box-right .js-display-theme .view-card{
	flex-grow: 1;
}

.result-wrapper-box .site-poster {
	height: auto;
}

.result-wrapper-box .site-poster img {
    height: auto;
    max-height: 200px;
    width: 100%;
}


/* standard pages */

.st-page li {
    padding-bottom: 1em;
    margin-left: 1.5em;
}
.st-page ul, .st-page ol {
    list-style: initial;
    margin-block-start: 0.5em;
    margin-block-end: 1em;
}

.st-page ol.hidden-bullets {
    list-style: none;
}

.shortcut-score{
    text-align: center;
    width:100%;
}
.shortcut-score a, .shortcut-score a:hover, .shortcut-score a:focus, .shortcut-score a:visited{
    border:0;
    color:#000000;
    text-decoration: none;
}

/* CSS - pie with label */
  .circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 200px;
    max-height: 250px;
  }
  
  .circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8;
  }

  .circle-grey {
    fill: #eee;
    stroke: #eee;
    stroke-width: 3.8;
  }

  .circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
  .circular-chart.red .circle{
    stroke: var(--brand-red);
  }
  .circular-chart.normal .circle{
    stroke: var(--color-new-green);
  }

  .percentage {
    fill: #000;
    font-family: sans-serif;
    font-size: 0.5em;
    text-anchor: middle;
  }

  .bg-light{
    background-color: var(--brand-body-bg);
  }

  #menu-legal{ text-align: center; margin-top:10px; padding-left:0; }

  #menu-legal li.menu-item {
    display: inline-block;
    margin: 0 20px;
  }

  #menu-legal li.menu-item a {
    color: var(--brand-body-color);
    text-decoration: none;
    font-size: 12px;
  }

  #menu-legal li.menu-item a:hover{
    color: var(--brand-darker-green);
  }

  .st-page a{
    color: var(--brand-darker-green);
  }

  .st-page a:hover{
    color: white;
  }
  

  .fca_eoi_form_button_element{
    font-family: var(--brand-font-main);
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.015rem;
  }

  .mobile-margin-bottom{ margin-bottom:0px; }