:root {
    --gray-tan: #eeede9;
}

.hero-section {
    background-color: #000000;
    border: 1px solid #707070;
    min-height: 190px;
}
.content-spacing {
    padding-top: 48px;
    padding-bottom: 48px;
}
.w-100 {
    width: 100%;
}
.gap-16 {
    gap: 16px;
}
.gap-32 {
    gap: 32px;
}
.p-16 {
    padding: 16px;
}
.m-top-0 {
    margin-top: 0px;
}
.bg-secondary {
    background-color: var(--gray-tan);
}
.grid {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    justify-content: center;
    margin-top: 32px;
    padding-top: 32px;
    background-color: #ffffff;
    border: 2px solid #727172;
}

/*
.grid-icon-img {
    width: 50%;
}
*/
@media only screen and (max-width: 499px) {
    .grid {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(12, 1fr);
    }
/*
    .grid-icon-img {
        width: 45%;
    }
*/
}

.m-0 {
  margin-top: 10px;
}

.d-flex {
    display: flex;
    flex-direction: column;
}
.align-items-center {
    align-items: center;
}
.h-100 {
    height: 100%;
}
.flex-col {
    flex-direction: column;
}
.justify-content-center {
    justify-content: center;
}
.justify-content-right {
    justify-content: right;
}
.text-align-center {
    text-align: center;
}
.txt-white {
    color: #ffffff;
}
.m-btm-16 {
    margin-bottom: 16px;
}
/*
.lead {
    color: #005670;
}
*/
.grid-icon-img {
    width: 95px;
    padding-bottom: 5px;
}
.content-block {
    padding: 16px;
}
.row-spacing {
    padding-top: 32px;
    padding-bottom: 32px;
}
a.btn.btn-light {
    background-color: #ffffff;
    color: #0065bd;
    border: 1px solid #cccccc;
    transition: all 200ms ease-in-out;
}
a.btn.btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}
.hero-section {
    background-image: none;
    padding-bottom: 32px;
}
#security-solutions h1 {color: #48a9c5; line-height: 1.1em;}
#security-solutions .hero-section p.h4 {color: #ffffff;}
#featured-resources a:link {border: 1px solid transparent; border-radius: 4px;}
#featured-resources a:hover, #featured-resources a:focus {background-color: var(--gray-tan); border: 1px solid #999;}
#featured-resources a:focus {border: 2px solid #000000;}

.mobile-reverse, .row.d-flex.align-items-center.row-spacing.mobile-reverse {
    flex-direction: column-reverse;
}
.col-lg-4.col-sm-12 {
    width: 100%;
}
/*
.row.h-100.d-flex.flex-col.gap-8.justify-content-center {
    align-items: center;
}
*/
.row {
/*    flex-direction: column;*/
    gap: 16px;
}

.content-spacing {
    padding-top: 24px;
    padding-bottom: 24px;
}
.row-spacing {
    padding-top: 15px;
    padding-bottom: 15px;
}

#demo-form iframe {
height: 1085px;
}

@media handheld, only screen and (max-width:767px) {
    .mobile-text-center {text-align: center;}
    a.btn-primary {text-align: center;} 
    #security-types .text { order: 2;}
    #security-types .image {order: 1;}
    #featured-resources h2 {border-top: 1px solid #cccccc;}
    
}
@media only screen and (min-width: 768px) {
    .d-flex {flex-direction: row; justify-content: center;}
    .hero-section {
        background-image: image-set(url(/portals/0/images/security-solutions-hero-black.png) 1x, url(/portals/0/images/security-solutions-hero-black@2x.png) 2x);
        /*
  background-position: right center, center top;
  background-size: 45%;
*/
        background-size: contain;
        background-position: 250px;
        background-repeat: no-repeat;
        padding-top: 32px;
    }
    .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}
    .security-elements .d-flex {flex-direction: column;}
}

@media handheld, only screen and (min-width:767px) {
  .m-0 {
  margin-top: 50px;
}

    
}

@media handheld, only screen and (min-width:1000px) {
    .hero-section{background-position: right;}
    
}

@media handheld, only screen and (min-width:1200px) {
 #demo-form iframe {
height: 1025px;
}
}
@media handheld, only screen and (min-width: 1300px) {
  .hero-section {
    height: 300px;
/*      background-size: cover;*/
  }
}
/*
@media only screen and (max-width: 1200px) {
  .mobile-w {
    width: 100%;
    margin-bottom: 16px;
  }
}

@media only screen and (max-width: 1060px) {
  .hero-section {
    background-size: 50%;
  }
}

@media only screen and (max-width: 976px) {
  .hero-section {
    background-size: 55%;
  }
}

*/