
.servicesTitle {
   display: flex;
   justify-content: right;
   margin-top: -20px;
   height: 80px;
   background: linear-gradient(to right, rgba(230, 233, 235, 0.7), rgb(172, 34, 107, 1.0));
}

.servicesTitle h2 {
   color: #E7E7E7;
   font-weight: bold;
   letter-spacing: 2px;
   font-size: 180%;
   margin-top: 34px;
   margin-right: 60px;
}

.serviceContainer {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}

.serviceGoldBg {
   background-image: url(/images/ServicesBgTextureGold.jpg);
}

.serviceBluishBg {
   background-image: url(/images/ServicesBgTextureBluish.jpg);
}

.serviceYellowishBg {
   background-image: url(/images/ServicesBgTextureYellowish.jpg);
}

.titleImage {
   width: 80%;
   margin-top: 8%;
   margin-bottom: 6%;
}

.serviceImage {
   width: 100%;
   border: 1px;
   border-style: solid;
   border-color: #979797;
   border-radius: 8px;
}

#serviceImageNoBorder {
   width: 100%;
}

.rowSep {
   margin: 5%;
}

.lastImage {
   margin-bottom: 8%;
}

.serviceTextLeft {
   max-width: 20%;
   margin: 3%;
   font-size: 130%;
   text-align: right;
   color: #545454;
}

.serviceImage300 {
   max-width: 30%;
}

.serviceImageThin {
   max-width: 20%;
}

#romanShield {
   max-width: 100%;
}

.serviceImage400 {
   max-width: 40%;
}

.serviceImage500 {
   max-width: 50%;
}

.serviceImage800 {
   max-width: 80%;
}

.dropShadowRight {
   filter: drop-shadow(5px 5px 10px rgb(50, 50, 50));
}

.serviceTextRight {
   max-width: 20%;
   margin: 3%;
   font-size: 130%;
   text-align: left;
   color: #545454;
}

.serviceTextBottom {
   max-width: 60%;
   margin-top: -20px;
   margin-bottom: 8%;
   font-size: 130%;
   text-align: center;
   color: #545454;
}

.serviceTextCenter {
   margin: 30px;
   text-align: center;
}

#appleBadge {
   width: 70%;
}

@media screen and (max-width: 850px) and (min-width: 619px) {

   .servicesTitle h2 {
      margin-right: 40px;
   }

   .serviceTextLeft {
      max-width: 30%;
      font-size: 120%;
   }

   .serviceTextRight {
      max-width: 30%;
      font-size: 120%;
   }
   
   #appleBadge {
      width: 65%;
   }

   .serviceTextBottom {
      font-size: 120%;
   }
   
}

@media screen and (max-width: 618px) {

   .titleImage {
      margin-top: 16%;
   }

   .servicesTitle h2 {
      font-size: 160%;
      margin-top: 36px;
      margin-right: 20px;
   }

   .rowSep {
      margin: 8% 3%;
   }

   .serviceTextLeft {
      max-width: 35%;
      font-size: 100%;
   }

   .serviceTextRight {
      max-width: 35%;
      font-size: 100%;
   }

   .serviceImage300 {
      max-width: 40%;
   }

   .serviceImageThin {
      max-width: 30%;
      margin: 7%;
   }

   #appleBadge {
      width: 120%;
   }

   .serviceTextBottom {
      font-size: 100%;
      max-width: 80%;
   }

}