@font-face {
   font-family:siteFont;
   src: url('../fonts/Montserrat-VariableFont_wght.ttf');
}

html, body {
   background:#221E13;
   font-family:siteFont !important;
}

nav {
   padding-left:0 !important;
   padding-right:0 !important;
}

nav ul li a.nav-link {
   margin-right:0;
   margin-left:0;
}

 
 .close {
   float: right;
   cursor: pointer;
 }


@keyframes fadeUp {
from {
 opacity: 0;
 transform: translate(-50%, -100%);
}
to {
 opacity: 1;
 transform: translate(-50%, -50%);
}
}
 


/* ///////////////////// */
 /* Moving Steps */
 .line {
   z-index: 1;
   border-top: 1px solid white;
   margin: 0 20px;
   position: absolute;
   top: 13px;
   left: 0;
   right: 0;
   bottom: 0;
}
.progress-step {
   z-index: 9;
   color: #002a45;
   width: 45px;
   text-align:center;
}

.number {
   background-color:white;
   font-size: 16px;
   border: 2px solid #042a59;
   border-radius: 50%;
   width: 26px;
   height: 26px;
   margin: 0 auto;
}
.progress-step.active .number {
   background-color: #042a59;
   border: 1px solid white;
   color: rgb(232, 225, 216);
   font-size: 16px;
   border-radius: 50%;
   width: 26px;
   height: 26px;
   margin: 0 auto;
}

#step_1 .text {
   color:#FFF;
   font-size:10px;
}
#step_2 .text,
#step_3 .text {
   color:#1261C9;
   font-size:10px;
}

/* ///////////////////// */
/* NAV BAR */
.nav-container {
   width:auto;
   max-width:none;
}
.nav-container > .row {
   width:100%;
}

.cover-img {
   background:url('../img/kids-playing-outside-1.webp');
   position:relative;
   background-size:cover;
   background-position:center;
   border-bottom:5px solid #900000;
   padding:20px 15px;
   background-repeat: no-repeat;
}

#step_4 {
   background:url('../img/safe-ship-moving-yard.jpg');
   position:relative;
   background-size:cover;
   background-position:center;
   border-bottom:5px solid #900000;
   padding:20px 15px;
   background-repeat: no-repeat;
}


.callnowlink {
   margin-top: 5px; 
   margin-bottom: 5px; 
   font-size: 20px; 
   color: white;
   text-shadow: #000000 2px 2px;
   text-decoration: none;
}

.callnowlink:hover {
   color: #808080;
   text-shadow: #000000 3px 3px;
   text-decoration: none;
}

.about-img {
   position:relative;
   background:url('../img/safe-ship-moving-yard.jpg');
   background-size:cover;
   background-position:center;
   border-bottom:3px solid #910f15;
   padding:60px 15px;
}
.contact-img {
   position:relative;
   background:url('../img/safe-ship-contact.webp');
   background-size:cover;
   background-position:center;
   border-bottom:3px solid #910f15;
   padding:60px 15px;
}

.about-img section {
   justify-content:center;
}
.contact-img section {
   justify-content:center;
}

.kicker {
   color:#FFF !important;
   text-transform:initial;
   text-shadow:0.1em 0.05em 0 rgba(0, 0, 0, 0.5);
   font-size:16pt;
   letter-spacing:1px;
   font-weight:normal;
}

.main-heading {
   font-size: 3.5vmax;
   font-weight:600;
   text-transform:uppercase;
   color:#FFF;
   -webkit-text-stroke-color: #000;
   stroke: #000;
   text-shadow: 3px 3px 15px #000000;
   letter-spacing:2px;
   line-height:1;
   padding-top:30px;
}
 

.load-content {
   border-top:3px solid #910f15;
}

.affiliates {
   background:#FFF;
   padding:40px 0;
}
.affiliates img {
   max-height:80px;
   margin:0 15px;
}



#step_2, #moveInfo,
#step_3, #moveProfile,
.city-state-move {
   display:none;
}

#consad {
   height: 38px; 
   margin:auto 5px; 
   margin-left:1vw;
}

#safeshiplogo {
   display:inline-block;
   height:60px; 
   margin-left:1vw;
}

.top-left,
.top-right {
   text-align:center;
}
.top-right {
   margin-top:15px;
   margin-bottom:15px;
}
.top-left div {
   justify-content:center;
}

.honesty-banner {
   color:#5F5758;
   font-size:42px;
   font-weight:600;
   text-transform:uppercase;
   letter-spacing:2px;
}

.moving-services {
   margin-bottom:70px;
}


.moving-services h3 {
   width:100%;
   color:#221E13;
   text-align:center;
   padding:0;
   margin:0;
   text-transform:uppercase;
   letter-spacing:2px;
   font-size:20px;
   font-weight:600;
   line-height:1.1em;
}


/* ERROR MESSAGE BOX */
.error-message {
   color: white;
   background-color: rgb(232, 61, 61);
   border-radius: 10px;
   width: auto;
   padding: 10px;
   text-align: center;
   font-size: 14px;
   height: auto;
}

.moving-services img {
   margin-bottom:32px;
   max-height:128px;
}
.moving-services .card {
   box-shadow:0 1px 2px rgba(0,0,0,0.12);
   border:1px solid #4f0b0e45;
   background:#FFFFFF7D;
   padding-bottom:20px;
}
.moving-services .service-body {
   display:inherit;
   padding:0;
   width:100%;
   height:80px;
}
.moving-services .card-text {
   word-spacing:9999px;
   /*
   width: min-intrinsic;
   width:-webkit-min-content;
   width:-moz-min-content;
   width:min-content;
   display:table-caption;
   display:-ms-grid;
   -ms-grid-columns:min-content;
   margin:auto;
   */
}

nav ul,
ul.logos {
   display:flex;
   list-style:none;
   padding:0;
   margin:0;
}
ul.logos {
   height:70px;
   justify-content:space-between;
   align-items:baseline;
   margin:30px 0;
}
ul.logos li {
   height:100%;
   width:100%;
   text-align:center;
}
ul.logos img {
   max-height:100%;
   max-width:100%;
}
nav ul li a {
   display:block;
   margin:0 25px;
   text-transform:uppercase;
   text-decoration:none;
   color:#910F15;
   font-weight:bold;
   padding:10px 0;
   border-top:3px solid transparent;
   border-bottom:3px solid transparent;
   transition:.4s;
}
nav ul li a:active,
nav ul li a:visited,
nav ul li a:hover {
   text-decoration:none;
   color:#910F15;
}
nav ul li:first-child a {
   margin-left:0;
}
nav ul li:last-child a {
   margin-right:0;
}
nav ul li a.active,
nav ul li a:hover {
   color:#000;
   border-top:3px solid #000;
   border-bottom:3px solid #000;
}

.error-msg {
   display:none;
   width:100%;
   color:#FFF;
   text-align:center;
}

.stat-bar {
   background:#F6F4EC;
}

.stat-bar .badge,
.badges .badge {
   background: #910f15;
   color: #FFF;
   border-radius: 50px;
   font-size: 38pt;
   height: 100px;
   width: 100px;
   display: flex;
   margin: auto;
   justify-content: center;
   align-items: center;
   margin-bottom: 20px;
   padding-top:0 !important;
   padding-bottom:0 !important;
}

.badges {
   font-size:27px;
   font-weight:800;
   line-height:40px;
   color:#64625A;
}
.badges strong {
   font-size:22pt;
   text-transform:uppercase;
   letter-spacing:2px;
   font-weight:600;
}
.badges b {
   letter-spacing:2px;
}
.badges .last-badge {
   margin-top:20px;
}

footer a,
footer a:hover,
footer a:visited,
footer a:active {
   color:#F6F4EC;
   text-decoration:none;
}


input, select{
   border-radius: 10px;
   border: none;
   height: 40px;
   padding-left: 10px;
   text-align: center;
}


/* quote form buttons */
.backbtn {
   border: 1px solid white;
   border-radius: 10px;
   width: 49%;
   height: 40px;
   background: linear-gradient(to bottom, #e7010c, #8c1d22);
   color: white;
   font-weight: bold;
}
.backbtn:hover {
   background: linear-gradient(to bottom, #c5020c, #671216);
}

.nextbtn1 {
   border: 2px solid white;
   border-radius: 20px;
   width: 95%;
   height: 40px;
   background: linear-gradient(to bottom, #48d73b, #0d6d04);
   color: white;
}
.nextbtn:hover {
   background: linear-gradient(to bottom, #14a207, #0d6d04);
   transition: 500ms;
   width:100%;
   font-weight: bolder;
   box-shadow: #023c53 0px 0px 10px 2px;
}
.nextbtn1:hover {
   background: linear-gradient(to bottom, #14a207, #0a5703);
   transition: 500ms;
   width:100%;
   font-weight: bolder;
   box-shadow: #023c53 0px 0px 10px 2px;
}

/* quote form buttons */
.nextbtn {
   border: 2px solid white;
   border-radius: 20px;
   width: 95%;
   height: 40px;
   background: linear-gradient(to bottom, #48d73b, #0d6d04);
   color: white;
}

.call-now {
   box-shadow:0px 0px 10px rgba(0,0,0,.5);
   border-radius:20px !important;
   border:2px solid #FFF;
   transition-duration:.3s;
   transition-property:transform;
}
.call-now:hover {
   transition-duration:.3s;
   transition-property:transform;
   transform:scale(0.9);
   border:2px solid #FFF;
}

.quote-headings {
   text-transform:uppercase;
   color:#910F15;
   font-weight:600;
}

.safeicon{
   height: 86px;
   width: auto;
}

.sm-desc {
   padding-left:0;
   padding-right:0;
   background:url('../img/safe-ship-red-icon.webp');
   background-position:top center;
   background-repeat:no-repeat;
   background-size:100% auto;
}
.about-desc {
   padding-left:0;
   padding-right:0;
   background:url('../img/safe-ship-red-icon.webp');
   background-color:#f67c7cb5;
   background-position:center center;
   background-repeat:no-repeat;
   background-size:cover;
}

.services .row:nth-child(even) {
   background-color:#910F15;
   color:#FFF;
}
.services .row:nth-child(odd) {
   background-color:#F6F4EC;
   color:#221E13;
}


.contact-info {
   list-style:none;
   padding:0;
   color:#64625A;
   font-size:20px;
   text-align:left;
}
.contact-info span {
   display:inline-block;
   width:calc(100% - 60px);
}
.contact-info li {
   display:flex;
   align-items:center;
   padding:20px 0;
}
.contact-info i {
   display:inline-block;
   font-size:14px;
   color:#910F15;
   width:60px;
   text-align:left;
}
.contact-info li:last-child i {
   color:#64625A;
}
.contact-info li a,
.contact-info li a:active,
.contact-info li a:visited,
.contact-info li a:hover {
   color:#64625A;
   text-decoration:none;
}
.contact-info li a:hover {
   color:#910F15;
}

.available-box {
   margin-top:80px;
   padding:30px 0;
   text-align:center;
}
.available-box h4 {
   font-size:28px;
}
.available-box h4 span {
   font-size:20px;
}

.message-us .img-box {
   height:270px;
}
.message-us {
   background-color:#F6F4EC;
   color:#221E13;
   text-align:center;
}
.message-us h4 {
   text-align:center;
}
.message-us h4 span {
   font-size:14px !important;
   font-style:italic;
}


iframe#map {
   width:100%;
   height:calc(100% - 80px);
   min-height:250px;
}


.footer-content-left {
   display:flex;
   flex-direction:column;
   justify-content:center;
   height:100%;
   text-align:center;
}
.footer-content-right {
   display:flex;
   flex-direction:column;
   justify-content:left;
   height:100%;
   text-align:center;
}

.faded {
   animation: 1s fadedAnim;
   animation-fill-mode: forwards;
}
@keyframes fadedAnim {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}


/* THEME FIXES */
input.form-control,
select.form-control {
   background:#F2F2F2;
}
select.form-control {
   padding:.0rem 1.25rem;
}

/* BS FIXES */


/* ANIM BS */
.animated {
   animation-duration:1.25s;
}



@media(min-width: 768px){
   nav ul li a {
      margin-right:25px;
      margin-left:25px;
   }
   .nav-link {
      margin-right:0;
   }

   
   ul.logos {
      margin:10px;
   }

   /* .top-left {
      text-align:left;
   }
   .top-left div {
      justify-content:left;
   }
   .top-right {
      text-align:right;
      margin-top:0;
      margin-bottom:0;
   } */

   .safe-ship-moving-services {
      display:inline-block;
   }
   .safe-ship-moving-services img {
      height:50px;
   }

   .available-box {
      margin-top:0;
   }
   .message-us .img-box {
      height:570px;
   }
   .moving-services .card img {
      max-height:200px;
   }
   .service-img {
      width:calc(100% - 60px);
      height:calc(100% - 60px);
   }
   
   .services .row:nth-child(odd) .service-img {
      margin:30px;
   }
   .services .row:nth-child(even) .service-img {
      margin:30px;
   }
}

.callNowLink{
  margin-top:10px;
}

@media(max-width: 992px){
   .safeicon{
      height: 70px;
      width: auto;
      margin-left:-30px;
      margin-top:-2px;
   }
   .callnow{
      font-size: 12px;
      margin-right: -10px;
   }
}

@media(min-width: 992px){
   
   .safe-ship-moving-services img {
      height:90px;
   }

   .available-box h4 {
      font-size:36px;
   }
   .available-box h4 span {
      font-size:.75em;
   }

   .about-img section {
      justify-content:end;
   }
   .contact-img section {
      justify-content:end;
   }

   .available-box {
      margin-top:0;
      padding:30px 50px;
      text-align:left;
   }
   iframe#map {
      margin:40px;
      width:calc(100% - 80px);
      height:calc(100% - 80px);
      min-height:350px;
   }

   nav {
      padding:0 15px;
   }

   .cover-img {
      padding:100px 15px;
   }

   .main-heading {
      font-size:40px;
      line-height:45px;
      padding-top:0;
   }

   .footer-content-left {
      padding-left:20%;
   }
   .footer-content-right {
      padding-right:20%;
   }

   .moving-services .service-body {
      height:auto;
   }

   .badges .last-badge {
      margin-top:0;
   }

   .sm-desc {
      padding-left:35px;
      padding-right:35px;
      background-position:top left;
      background-size:50% auto;
   }
}

@media(min-width: 1200px){
   .nav-container {
      max-width:1140px;
   }
}