/* Created August 2021 by John Teesdale */

/* VoiceComm Colors

 green, #C7D82F
 orange, #F8A51C
 blue, #05B1CC
 pink, #ED3D71
 purple, #734E9D
 VCgrey, #353F42
 grey, #F3F3F3

*/

/* Global Styles */

h1, h2, h3, h4, h5, h6 {
  margin: 30px 0px;
}

h1 {
  font-size: 2.25em;
  font-weight: 700;
}

h2 {
  font-size: 1.5em;
  font-weight: 700;
}

h3 {
  font-size: 1.25em;
  font-weight: 700;
}

h4 {
  font-size: 1.25em;
  font-weight: 700;
}

h5 {
  font-size: 1em;
}

h6 {
 font-size: 1em;
 font-weight: 700;
}

p {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  margin: 15px 0px 30px;
}

p .specialBody {
  font-family: 'Roboto Slab', serif;
  font-weight: 200;
}

.section {
  margin: 30px -15px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.button, .buttonDark, .buttonLight {
  background-color: #C7D82F;
  color: #353F42;
  border: none;
  border-radius: 6px;
  padding: 10px 30px;
  text-align: center;
  margin: 30px 0px;
  max-width: 400px;
  display: inline-block;
}

.button:hover {
  background-color: #BBCB2D;
  color: #353F42;
  transform: scale(1.05);
}

.buttonDark {
  background-color: #353F42;
  color: white;
}

.buttonDark:hover {
  background-color: #2F3739;
  color: white !important;
  transform: scale(1.05);
}

/* End of Global Styles */

/* Header Styles */

.badge.cartnumberheader {
  background-color: #353F42;
}

/* Footer Styles */

#footer {
  background-color: #353F42 !important;
}

.footerBody {
  font-size: 14px;
}

#footer .container-fluid h1, #footer .container-fluid h2, #footer .container-fluid h3, #footer .container-fluid h4, #footer .container-fluid h5, #footer .container-fluid h6, #footer .container-fluid p {
  color: white;
}

#footer p {
  font-size: 14px;
}

#footer a:hover {
  color: #C7D82F
}

#footer .button {
  margin: 0px;
}

#footer .socialLinks {
  display: flex;
  justify-content: space-between;
}

#footer .socialLinks a {
  margin: 0px 5px;
}

#footer form.ctct-form-custom {
  display: flex;
}

#footer form p {
  display: none;
}

#footer form .ctct-form-field {
  width: 150%;
  flex-grow: 2;
}

#footer form .ctct-form-button {
  flex-grow: 1;
  height: 45px;
  margin: 0px 15px;
  font-size: 14px;
}

#footer div.ctct-form-embed div.ctct-form-defaults {
  padding-bottom: 0px !important;
}

#footer .footerFlex {
  display: flex;
  margin-bottom: 30px;
}

#footer .footerFlex div {
  flex-grow: 1;
  padding: 0px 10px;
}

#footer iframe .form-wrapper-empty-header {
  height: 0px;
}

#footer iframe .form-content-component {
  color: white;
  box-shadow: none;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 0px;
  font-weight: bold;
}

#footer iframe .form-titles.form-content {
  margin-top: 10px;
}

#footer iframe .form-content-component .form-title {
  font-size: 21px;
  font-weight: bold;
}

#footer iframe .form-content-component .form-description {
  font-size: 14px;
  line-height: 1.5em;
}

#footer iframe .form-content-component .form-question {
  padding-bottom: 0px;
}

#footer iframe .form-content-component .form-question .form-question-title {
  font-size: 10px;
}

/* End of Footer Styles */

/* Home Page Styles */

#fp_carousel .carousel-inner{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.items {
  display: inline-block;
}

.grow a:hover img {
  transform: scale(1.05);
}

.banners a:hover img {
  transform: scale(1);
}

.section a:hover {
  color: #353F42;
}

.productLayout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#homePage div .flex1 {
  flex-grow: 1;
  max-width: 20%;
  padding: 0px 15px;
  min-width: 200px;
}

.flex2 {
  flex-grow: 1;
  width: 45%;
}

.flex2 img {
  margin: auto;
}

#newsLetterSignUp .ctct-form-header, #footer .ctct-form-header {
  color:white !important;
}

#newsLetterSignUp #email_address_field_5 {
  width: 200%;
}

#newsLetterSignUp {
  background-color: #353F42;
  display: flex;
  min-height: 125px;
  align-items: center;
  padding: 15px;
}

#newsLetterSignUp .newsLetterPart {
  padding: 0px 45px;
}

#newsLetterSignUp .newsLetterPart .ctct-form-defaults {
  height: 80px;
  padding: 0px;
}

#newsLetterSignUp .newsLetterPart .ctct-form-button {
  margin: 0px 30px;
  height: 45px;
  font-size: 14px;
}

#newsLetterSignUp .newsLetterPart p {
  color: white;
  font-family: 'Open Sans';
  font-size: 18px;
  font-weight: bold;
  margin: 0px;
}

div.ctct-form-embed form.ctct-form-custom button.ctct-form-button {
  margin-top: 25px !important;
}

#newsLetterSignUp .newsLetterPart:nth-of-type(2) {
  min-width: 600px;
}

#newsLetterSignUp form {
  display: flex;
}

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

  #newsLetterSignUp .newsLetterPart:nth-of-type(2) {
    min-width: 1px;
    width: 100%;
  }

  #newsLetterSignUp form {
    margin-top: 30px;
  }

}

#newsLetterSignUp #email_address_field_6 {
  width: 150%;
}

#newsLetterSignUp h3 {
  color: white;
  margin: 0px;
  font-size: 1.25em;
  font-weight: 700;
}

#newsLetterSignUp form input {
  margin: 0px 10px 0px 0px;
}

#newsLetterSignUp form input#email {
  width: 400px;
  border-radius: 6px;
  padding-left: 5px;
}

#newsLetterSignUp #email_address_field_6 label {
  margin-left: 15px;
}

#footer h2{
  text-align: left;
}

.VC-intro {
  background: url(/images/home-about-section-bg.jpg) no-repeat center center;
  padding: 60px 0px;
  background-color: #F3F3F3;
  background-position: 0% 115%;
  margin: 30px 0px 0px;
  background-size: 90%;
}

.VC-intro a.buttonDark {
  margin-inline: 32px;
}

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

  .VC-intro {
    background-position: center;
  }

}

.VC-intro .section {
  max-width: 700px;
  margin: auto;
  width: 90%;
}

#homePage .deviceBrand {
  margin: 15px 15px;
}

#homePage .VC-intro .section .buttonDark {
  margin: 0px 15px 15px;
}

#homePage .VC-intro h1 {
  margin-top: 0px;
}

#homePage .VC-intro .section div {
  display: flex;
}

#homePage .section.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#homePage .featured-brand-logo {
  margin: auto;
  display: block;
}

#footer .form-control {
    color: #555;
    background-color: #fff;
}

/* Brand Guide Page */

body#BrandGuide {
  padding-top: 150px;
}

#BrandGuideTitle {
  background-color: #C7D82f;
  height:100px;
  display:flex;
  justify-content: center;
}

#BrandGuideTitle h1 {
  text-align: center;
}

#colors, #Typography, #uiElements {
  max-width: 1100px;
  margin:auto;
}

.colorSection {
  display: flex;
  justify-content: space-between;
}

.colorSample .colorBlock{
  background-color: red;
  width: 100px;
  height: 100px;
}

.colorSample#Green .colorBlock {
  background-color: #C7D82f;
}

.colorSample#Orange .colorBlock {
  background-color: #F8A51C;
}

.colorSample#Blue .colorBlock {
  background-color: #05B1CC;
}

.colorSample#Pink .colorBlock {
  background-color: #ED3D71;
}

.colorSample#Purple .colorBlock {
  background-color: #734E9D;
}

.colorSample#VCGrey .colorBlock {
  background-color: #353F42;
}

.colorSample#Grey .colorBlock {
  background-color: #F3F3F3;
}

.colorSample#NavSearch .colorBlock {
  background-color: #F7F7F7;
}

.colorSample#Background .colorBlock {
  background-color: #CCCCCC;
}

.colorSample#Background2 .colorBlock {
  background-color: #EEEEEE;
}

.colorSample#Hover .colorBlock {
  background-color: #E6E6E6
}

.colorSample#Border .colorBlock {
  background-color: #CCCCCC;
}

#RobotoSlab div, #OpenSans div {
  display: flex;
  justify-content: flex-start;
}

#RobotoSlab div div, #OpenSans div div {
  min-width: 200px;
}

.well p {
  margin: 10px 0px;
}

.vmi-box {    
  line-height: 2.2em; 
}

.vmi-box .large {
  font-weight: 500;
}

.well.largeMin {
  min-height: 225px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.VC-intro .section p {
  margin-bottom: 0px;
  width: 100%;
}

.VC-intro .section p:last-of-type {
  margin-bottom: 30px;
}

.lcbtn {
  width: 125px !important;
  margin-left: -5px;
}

.lcbtn img {
  width: 100% !important;
}

iframe.accessTokenIframe {
  display: block;       /* iframes are inline by default */
  background: #ffffff;
  border: none;         /* Reset default border */
  height: 80vh;        /* Viewport-relative units */
  width: 100%;
}

#aboutPage .aboutIntro {
  background-image: url(../../about/images/whyVC.jpg);
  background-color: #F6F6F6;
  min-height: 500px;
  display: grid;
  align-items: end;
  background-size: cover;
  background-position: right;
  margin-bottom: 40px;
  background-repeat: no-repeat;
}

#servicesPage #servicesIntro {
  background-image: url(../../services/assets/ServicesBanner.jpg);
  background-color: #F6F6F6;
  min-height: 500px;
  display: grid;
  align-items: end;
  background-size: cover;
  background-position: right;
  margin-bottom: 40px;
  background-repeat: no-repeat;
}

#servicesPage #servicesIntro img, #aboutPage .aboutIntro img {
  object-fit: cover;
  height: 500px;
  width: 100%;
  object-position: right;
  display: none;
}

#aboutPage .aboutIntro h1 {
  max-width: min-content;
  font-size: 60px;
  padding-left: 25px;
}

#servicesPage #servicesIntro h1 {
  font-size: 60px;
  padding-left: 25px;
  max-width: 600px;
}

#aboutPage .sectionHeader, #servicesPage .sectionHeader {
  display: flex;
  justify-content: center;
  padding: 50px 100px;
  color: white !important;
  margin-block: 100px 20px;
  background-size: cover;
  text-align: center;
}

#servicesPage h3 {
  font-size: 30px;
  max-width: 800px;
  margin: 30px auto;
  padding: 0px 20px;
}

#aboutPage .sectionHeader h2, #servicesPage .sectionHeader h2 {
  font-size: 40px;
  color:white;
  font-weight: normal;
  padding: 0px 20px;
}

#aboutPage #support {
  background-image: url(../../about/images/Support.jpg);
}

#aboutPage #partner {
  background-image: url(../../about/images/Partner.jpg);
}

#aboutPage #transparency {
  background-image: url(../../about/images/Transparency.jpg);
}

#aboutPage #services {
  background-image: url(../../about/images/Services.jpg);
}

#aboutPage #analytics {
  background-image: url(../../about/images/Analytics.jpg);
}

#aboutPage #operational {
  background-image: url(../../about/images/Operational.jpg);
}

#aboutPage .lead, #servicesPage .lead {
  font-weight: bold;
  font-size: 24px;
}

#aboutPage p, #servicesPage p {
  font-size: 18px;
  line-height: 1.4em;
  max-width: 800px;
  margin-inline: auto;
  padding: 0px 20px;
}

#aboutPage .button p, #servicesPage .button p {
  font-size: 16px;
}

#servicesPage li {
  font-size: 18px;
  max-width: 800px;
  margin: 10px auto;
  padding: 0px 20px;
}

#servicesPage #servicesVMI {
  background-image: url(../../services/assets/Vendor-Managed-Inventory.jpg);
}

#servicesPage #servicesDropship {
  background-image: url(../../services/assets/DropShip-Banner.jpg);
}

#servicesPage #servicesPhygrid {
  background-image: url(../../services/assets/phygrid.jpg);
}

@media only screen and (max-width: 700px) {
  #aboutPage h1 {
    background-color: white;
    padding: 20px;
    width: 100%;
    max-width: none !important;
    margin: 0px;
  }

  #servicesPage h1 {
    background-color: white;
    padding: 20px;
    width: 100%;
    max-width: none !important;
    margin: 0px;
  }

  #homePage .VC-intro {
    background-image: none;
  }

  #servicesPage #servicesIntro, #aboutPage .aboutIntro {
    min-height: 0px;
  }

  #servicesPage #servicesIntro img, #aboutPage .aboutIntro img {
    display: block;
  }
}

#policyNav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#policyPage {
  max-width: 800px;
  margin: auto;
}

#policyNav div {
  background-color: #F3F3F3;
  color: #353F42;
  border: none;
  border-radius: 6px;
  padding: 10px 30px;
  text-align: center;
  max-width: 400px;
  font-size: 14.66px;
}

#policyNav div:hover {
  transform: scale(1.05);
}

.policyBody {
  transition: .2s;
  display: none;
  min-height: 500px;
}

#returnWarrantyText {
  display: block;
}

label#label-email-cee7766d-a90c-49df-97b5-79630fa5c04a {
  display: none;
}

form#hsForm_cee7766d-a90c-49df-97b5-79630fa5c04a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field {
  width: 100%;
}

input#email-cee7766d-a90c-49df-97b5-79630fa5c04a {
  width: 100%;
  padding: 5px 10px;
}

input#email-cee7766d-a90c-49df-97b5-79630fa5c04a {
  width: 100%;
  padding: 5px 10px;
}

input.hs-button.primary.large {
  background-color: #C7D82F;
  color: #353F42;
  border: none;
  border-radius: 6px;
  padding: 10px 30px;
  text-align: center;
  margin: 30px 0px;
  max-width: fit-content;
}

input#email-55143d32-a4c0-431f-bafa-3573e6f28db9 {
  width: 100%;
  padding: 5px 10px;
}

label#label-email-55143d32-a4c0-431f-bafa-3573e6f28db9 {
  display: none;
}

form#hsForm_55143d32-a4c0-431f-bafa-3573e6f28db9 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}