:root {
    --red: #ff2e63;
    --black: #23262c;
    --blue: #10BEBE;
    --white: #eaeaea;
    --gray: #959e9d;
} 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*/ *,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}


/****/


/****/

#header {
    position: relative;
    width: 100%;
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #23262c;
    ;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
}

.menu .logo-box {
    margin-left: 20px;
}

.menu .logo-box h1 a {
    text-decoration: none;
    font-size: var(--title);
    font-weight: 400;
    color: var(--white);
}

.menu .list-container {
    margin-right: 20px;
}

.menu .list-container ul {
    display: flex;
}

.menu .list-container ul li {
    list-style: none;
}

.menu .list-container ul li a {
    text-decoration: none;
    margin: 0px 10px;
    padding: 8px;
    color: var(--white);
    border-radius: 24px;
    transition: 0.3s;
    font-size: 16px;
}

.menu .list-container ul li a.active {
    background: var(--gray);
    color: #fff;
}

.menu .list-container ul li a:hover {
    background: var(--gray);
    color: #fff;
}

.btn-menu>.fa-bars {
    display: none;
}

@media only screen and (max-width:900px) {
    .btn-menu>.fa-bars {
        display: block;
        position: absolute;
        right: 30px;
        top: 20px;
        font-size: 28px;
        color: var(--gray);
        transition: 0.5s;
        cursor: pointer;
    }
    .btn-menu>.fa-times {
        color: var(--white);
    }
    .btn-menu>.fa-bars:hover {
        color: var(--white);
    }
    .menu .logo-box {
        margin-left: 30px;
    }
    .menu .list-container {
        position: fixed;
        top: 60px;
        left: -100%;
        background: #959e9d;
        width: 100%;
        height: calc(100vh - 60px);
    }
    .menu .list-container .lists {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-top: 4px solid var(--gray);
    }
    .menu .list-container ul li {
        width: 90%;
        border-bottom: 2px solid var(--black);
        display: flex;
        justify-content: center;
    }
    .menu .list-container ul li a {
        font-size: 20px;
        text-align: center;
        padding: 12px 0px;
    }
    .menu .list-container ul li a.active {
        background: none;
        color: var(--white);
    }
    .menu .list-container ul li a:hover {
        background: none;
        color: var(--black);
    }
}


/** IMG **/

.img-header {
    position: relative;
    top: 60px;
    width: 100%;
    height: 400px;
    background: #ffffff;
    background: #ffffff; 
    background-position: center;
    background-size: cover;
}
/**se movio codigo**/
.img-header .welcome {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-content: space-between;
}
.img-header .welcome-1 img{
    width: 490px;
    height: auto;
}

.img-header .welcome-1  .h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20%;
}
.img-header .welcome-1 .h3 h3 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 500;
    color: #074F01;
    font-size: 50px;
    text-align: center;
}
.img-header .welcome-1 .h3 p {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 300;
    color: #074F01;
    text-transform: uppercase;
    margin: 10px 10px;
    font-size: 25px;
    text-align: left;
}
.img-header .welcome-1 .welcome1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 20px;
}
.img-header .welcome-1 .welcome1 h3 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 500;
    font-size: 30px;
    color: #074F01;
}
.img-header .welcome-1 .btn {
    width: 100px;
    height: 65px;
    border: 4px solid #FB0C17;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}
.img-header .welcome-1 .btn .icon {
    font-size: 40px;
    color: #FB0C17;
    cursor: pointer;
}



@media only screen and (min-width:1440px){
    .img-header .welcome h2 {
        font-family: Arial, Helvetica, sans-serif;
        margin: 10px 10px;
        padding: 10px 10px;
        font-size: 25px;
        color:var(--black);
        font-weight: 400;
        text-align: left;
    }
    
    .img-header .welcome-1 ul {
        height: 125px;
        margin: -10px -10px;
        padding: 0;
        list-style: circle;
        color: #000;
    }
    
    .img-header .welcome-1 li>strong {
        color: var(--black);
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
    }
    
    .img-header .welcome-1 ul>li {
        font-family: Arial, Helvetica, sans-serif;
        margin: 10px 10px;
        font-size: 20px;
        color: #000;
    }
}

@media only screen and (max-width:1024px){
    .img-header .welcome {
        position: absolute;
        top: -30%;
        left: 12px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
    }
    .img-header .welcome-1 {
        position: absolute;
        top: 10%;
        right: 2%;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .img-header .welcome h2 {
        font-family: Arial, Helvetica, sans-serif;
        margin: 10px 10px;
        padding: 10px 10px;
        font-size: 22px;
        color:var(--black);
        font-weight: 400;
        text-align: left;
    }
    
    .img-header .welcome-1 ul {
        height: 125px;
        margin: -10px -10px;
        padding: 0;
        list-style: circle;
        color: #000;
    }
    
    .img-header .welcome-1 li>strong {
        color: var(--black);
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
    }
    
    .img-header .welcome-1 ul>li {
        font-family: Arial, Helvetica, sans-serif;
        margin: 10px 10px;
        font-size: 16px;
        color: #000;
        font-weight: 400;
    }
}

@media only screen and (max-width:773px) {
    .img-header .welcome h2 {
        display: none;     
    }
    .img-header .welcome-1 ul {
        display: none;
    }

    .img-header {
        position: relative;
        width: 100%;
        height: 10vh;
        background: url();
        background-position: center;
        background-size: cover;
    }
}

@media only screen and (max-width:590px) {
    .img-header .welcome h2 {
        font-size: 30px;
    }
    .img-header .welcome li {
        font-size: 17px;
    }
}


/****/


/****/


/****/


/**iva**/
 #iva {
     margin: 10px 10px;
     padding: 10px;
 }   
 .iva {
     display: flex;
     justify-content: flex-end;
     text-align: left;
     align-items: flex-end;
 }
 .iva h2 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 15px;
     font-weight: 400;
     color: #000000;
 }

/****/


/****/


/**Titulo**/

.Titulo {
    margin: auto;  
}


/**se modifico codigo y se agrego otro class titulo-hik**/

@media (min-width:768px) {
    .Titulo-1 {
        margin: 1rem 1rem;
        padding: 1rem 1rem;
    }
    .titulo-hik {
        margin: 1rem 1rem;
        padding: 1rem 1rem;
    }
}

.Titulo-desc {
    margin: auto;
}
.titulo-hik-desc {
    margin: auto;
}
.titulohik-img-desc {
    margin: auto;
}

@media (min-width:768px) {
    .Titulo-desc {
        padding: 15px 15px;
        height: 100px;
    }
    .titulo-hik-desc {
        padding: 15px 15px;
        height: 100px;
    }
    .titulohik-img-desc {
        margin: 15px 15px;
        height: 100px;
    }
}

.Titulo-desc h2 {
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.titulo-hik-desc h1 {
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.Titulo-desc p {
    margin: auto;
    font-size: 20px;
    text-align: center;
}

.titulo-hik-desc p {
    margin: auto;
    font-size: 20px;
    text-align: center;
}
.titulohik-img-desc p {
    margin: auto;
    font-size: 20px;
    text-align: center;
}

@media only screen and (max-width:590px){
    .titulo-hik-desc h1 {
        margin-top: 20px;
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }
    .titulo-hik-desc p {
        margin: 15px 15px;
        font-size: 20px;
        text-align: left;
    } 
    .titulohik-img-desc p {
        margin: 15px 15px;
        font-size: 20px;
        text-align: left;
    }  
    .Titulo-desc p {
        margin: 15px 15px;
        font-size: 20px;
        text-align: left;
    }
}

/**titulo-hik-img**/

@media (min-width:768px){
.titulohik-img {
    margin:1rem 1rem;
    padding: 1rem ;
}
}
@media only screen and (max-width:773px){
    .titulohik-img .titulo-hik-img .titulo-hik-img-desc img {
       max-width: 100%;
       height: auto;
   }

   .titulohik-img .titulo-hik-img {
       flex-direction: column;
       align-items: center;
   }
}

.titulo-hik-img {
    margin: 20px 20px;
}

@media (min-width:768px){
    .titulo-hik-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.titulo-hik-img-desc {
    margin: 30px 30px;
    padding: initial;
}

.titulo-hik-img-desc img {
    width: 350px;
    height: 700;
}

.titulo-hik-img-desc {
    margin: 15px 15px;
    padding: inherit;
}


.titulo-hik-img-desc h3 {
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.titulo-hik-img-desc p {
    margin: inherit;
    font-size: 20px;
}




/**videos-termica**/

.videos-termica {
    margin: 1rem 1rem;
    padding: 0rem 1rem;
}

@media (min-width:768px) {
    .videos-camara {
        margin: auto;
        padding: 1rem 1rem;
    }
}

.video-zk {
    margin: auto;
}

@media (min-width:768px) {
    .videos-zk {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}

.video-1 {
    margin: 10px 10px;
    padding: auto;
}

.video-1 img {
    width: 300px;
    height: 300px;
}

.video-1 h2 {
    color: var(--black);
    margin: 2px 2px;
    font-size: 1.4rem;
    text-align: center;
}

@media only screen and (max-width:773px) {
    .videos-termica .videos-camara .videos-zk img {
        max-width: 100%;
        height: auto;
    }
}


/****/


/*****/


/**contexto**/

.contexto {
    margin: 1rem 1rem;
    padding: 0;
}

@media (min-width:768px) {
    .contexto-1 {
        margin: 1rem 1rem;
        padding: 1rem 1rem;
    }
}

@media only screen and (max-width:773px) {
    .contexto .contexto-1 .contexto- img {
        max-width: 100%;
        height: auto;
    }
}

.contexto- {
    margin: auto;
}

.contexto- img {
    float: left;
    width: 300px;
    height: 300px;
}

.contexto-img img {
    margin: 10px 10px;
    padding: 10px 10px;
}

@media (min-width:768px) {
    .contexto- .contexto-desc {
        padding: 15px 15px;
        height: auto;
    }
}

.contexto-desc h2 {
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.contexto-desc p {
    text-align: justify;
    margin: auto;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
@media only screen and (max-width:590px){
    .contexto-desc h2 {
        margin: 15px 15px;
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }
    
    .contexto-desc p {
        text-align: left;
        margin: 10px 10px;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
    }   
}


/****/


/****/


/**titulos**/


/***
.titulos {
    margin: 2rem 2rem;
    padding: 2rem 2rem;
}

.titulos h2 {
    text-align: center;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
}**/


/*****/


/*****/


/**cama-termica**/

.cama-termica {
    width: 100%;
    height: auto;
    margin: auto;
    padding: auto;
    background-image: url(../img-covid/virus-coronavirus-1920x1200-psp-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

@media (min-width:768px) {
    .cama-termi {
        margin: auto;
        padding: 1rem 1rem;
    }
}

@media only screen and (max-width:773px) {
    .cama-termica .cama-termi .cama-t .camara-ter-img img {
        max-width: 100%;
        height: auto;
    }
    .cama-termica .cama-termi .cama-t .camara-ter-img .cama-ter-desc {
        flex-direction: column;
    }
}

.cama-t {
    margin: auto;
}

.cama-t img {
    float: left;
    width: 350px;
    height: 350px;
}

.camara-ter-img img {
    margin: 10px 10px;
    padding: 10px 10px;
}

@media (min-width:768px) {
    .cama-t .cama-ter-desc {
        margin: 15px 15px;
        height: 400px;
    }
}

.cama-ter-desc h2 {
    color: #F2F2F2;
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.cama-ter-desc p {
    color: #F2F2F2;
    margin: auto;
    font-size: 20px;
    text-align: justify;
}

@media only screen and (max-width:590px){
    .cama-ter-desc h2 {
        color: #F2F2F2;
        margin: 15px 15px;
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }
    
    .cama-ter-desc p {
        color: #F2F2F2;
        margin: 10px 10px;
        font-size: 20px;
        text-align: left;
    }   
}
/**pistola zk**/
#pistola {
    width: 100%;
    height: auto;
    margin: auto;
    padding: auto;
    background-image: url(../camara-termica/camara-portatil-termica-zkteco.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
#pistola {
    margin: auto;
}
.pistola {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
@media (min-width:768px){
    #pistola .pistola {
        margin: 15px 15px;
        height: 400px;
    }
}
.pistola ul {
    font-family: Arial, Helvetica, sans-serif;
    margin: 15px 15px;
    text-align: left;
}
.pistola ul>li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    margin: 15px 15px;
    text-align: left;
    align-items: flex-start;
    padding: 15px 15px;
    color: #000000;
}
.pistola ul>li>h2>a {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
}
/*****/


/**imagenes-camaras**/

.imagenes-camaras {
    margin: 1rem 1rem;
    padding: initial;
}

@media (min-width:768px) {
    .camara-i {
        margin: auto;
        padding: 1rem;
    }
}

@media only screen and (max-width:773px) {
    .camara-i .camara-images .ca-te-img img {
        max-width: 100%;
        height: auto;
    }
    .camara-i .camara-images {
        flex-direction: column;
    }
}

.camara-images {
    margin: auto;
}

@media (min-width:768px) {
    .camara-images {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.ca-te-img {
    margin: 1rem 1rem;
    padding: auto;
}

.ca-te-img img {
    width: 600px;
    height: 400px;
}

.images-desc {
    margin: 15px 15px;
    padding: inherit;
}

.images-desc h2 {
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.images-desc p {
    margin: inherit;
    font-size: 20px;
}

@media only screen and (max-width:590px){
    .images-desc h2 {
        margin: 15px 15px;
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }
    
    .images-desc p {
        margin: 10px 10px;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        text-align: left;
    }   
}


/**Titulo-2**/

.Titulo-2 {
    margin: 1rem 1rem;
    padding: 1rem 1rem;
}

@media (min-width:768px) {
    .Titulo- {
        margin: auto;
        padding: initial;
    }
}

.Titulo-2-desc {
    margin: auto;
}

@media (min-width:768px) {
    .Titulo-2-desc {
        padding: 15px 15px;
        height: 200px;
    }
}

.Titulo-2-desc h2 {
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.Titulo-2-desc p {
    margin: auto;
    font-size: 20px;
    text-align: left;
}

/****/


/**imagenes-camaras-1**/

.imagenes-camaras-1 {
    margin: auto;
    padding: initial;
}

@media (min-width:768px) {
    .camara-i-1 {
        margin: auto;
        padding: 1rem;
    }
}

.camara-images-1 {
    margin: auto;
}

@media only screen and (max-width:773px) {
    .imagenes-camaras-1 .camara-i-1 .camara-images-1 img {
        max-width: 100%;
        height: auto;
    }
}

@media (min-width:768px) {
    .camara-images-1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.ca-te-img-1 {
    margin: 1rem 1rem;
    padding: auto;
}

.ca-te-img-1 img {
    width: 900px;
    height: 600px;
}


/****/


/****/


/**D-tecnias**/

.D-tecnias {
    padding: 2rem 2rem;
    margin-bottom: auto;
}

@media (min-width:768px) {
    .tecnicas-1 {
        margin: 1rem 1rem;
        padding: initial;
    }
}

@media only screen and (max-width:773px) {
    .D-tecnias .tecnicas-1 .especificaciones {
        flex-direction: column;
        align-items: center;
    }
}

@media(min-width:768px) {
    .especificaciones {
        padding-top: auto;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap;
        height: 60vh;
    }
    .tecnicas-1 {
        margin-bottom: 700px;
    }
}

.especificaciones .cam {
    width: 300px;
    height: 1100px;
    border-radius: 10px;
    background-color: white;
    margin: 60px;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    position: relative;
    box-shadow: 0px 0px 15px background;
    /* Link */
}

.especificaciones .cam .camara-termi {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    padding: 15px;
}

.especificaciones .cam .camara-termi img {
    font-size: 100px;
    width: 180px;
    height: 120px;
    padding: 15px;
}

.especificaciones .cam .camara-termi .title {
    font-size: 35px;
    color: #000;
    font-weight: bold;
    padding: 10px;
}

.especificaciones .cam .camara-termi .desc li {
    margin: 2rem 2rem;
    letter-spacing: normal;
    color: #000000;
    font-size: 20px;
    height: 20%;
    text-align: left;
}

.especificaciones .cam a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.especificaciones .cam {
    margin: 2rem 2rem;
    background: linear-gradient(130deg, #f1f8f8 0%, #959e9d 100%);
    box-shadow: none;
}

.especificaciones .cam:hover .icon,
.especificaciones .cam:hover .title,
.especificaciones .cam:hover .desc {
    color: #000;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}


/**nvr**/

@media(min-width:768px) {
    .especificaciones {
        padding-top: auto;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: space-evenly;
        justify-content: space-evenly;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap;
        height: 60vh;
    }
}

.especificaciones .nvr {
    width: 300px;
    height: 1100px;
    border-radius: 10px;
    background-color: white;
    margin: 60px;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    position: relative;
    box-shadow: 0px 0px 15px background;
    /* Link */
}

.especificaciones .nvr .nvr-cam {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    padding: 15px;
}

.especificaciones .nvr .nvr-cam img {
    font-size: 100px;
    width: 180px;
    height: 120;
    padding: 15px;
}

.especificaciones .nvr .nvr-cam .title {
    font-size: 35px;
    color: #000000;
    font-weight: bold;
    padding: 10px;
}

.especificaciones .nvr .nvr-cam .desc li {
    margin: 2rem 2rem;
    letter-spacing: normal;
    color: #000000;
    font-size: 20px;
    height: 20%;
    text-align: left;
}

.especificaciones .nvr a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.especificaciones .nvr {
    margin: 2rem 2rem;
    background: linear-gradient(130deg, #f1f8f8 0%, #959e9d 100%);
    box-shadow: none;
}

.especificaciones .nvr:hover .icon,
.especificaciones .nvr:hover .title,
.especificaciones .nvr:hover .desc {
    color: #000;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}


/**BLACKBODY**/

@media(min-width:768px) {
    .especificaciones {
        padding-top: auto;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: space-evenly;
        justify-content: space-evenly;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap;
        height: 60vh;
    }
}

.especificaciones .black {
    width: 300px;
    height: 1100px;
    border-radius: 10px;
    background-color: white;
    margin: 60px;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    position: relative;
    box-shadow: 0px 0px 15px background;
    /* Link */
}

.especificaciones .black .blackbody {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    padding: 15px;
}

.especificaciones .black .blackbody img {
    font-size: 100px;
    width: 180px;
    height: 120px;
    padding: 15px;
}

.especificaciones .black .blackbody .title {
    font-size: 35px;
    color: #000000;
    font-weight: bold;
    padding: 10px;
}

.especificaciones .black .blackbody .desc li {
    margin: 2rem 2rem;
    letter-spacing: normal;
    color: #000000;
    font-size: 20px;
    height: 20%;
    text-align: left;
}

.especificaciones .black a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.especificaciones .black {
    margin: 2rem 2rem;
    background: linear-gradient(130deg, #f1f8f8 0%, #afafaf 100%);
    box-shadow: none;
}

.especificaciones .black:hover .icon,
.especificaciones .black:hover .title,
.especificaciones .black:hover .desc {
    color: #000;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}


/*****/


/**Titulo-3**/

.Titulo-3 {
    margin: 1rem 1rem;
    padding: 0;
}

@media (min-width:768px) {
    .Titulo-3- {
        margin: auto;
        padding: initial;
    }
}

.Titulo-3-desc {
    margin: auto;
}

@media(min-width:768px) {
    .Titulo-3-desc {
        padding: 15px 15px;
        height: auto;
    }
}

.Titulo-3-desc h2 {
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}


/****/


/**imagenes-camaras-2**/

.imagenes-camaras-2 {
    margin: auto;
    padding: initial;
}

@media(min-width:768px) {
    .camara-i-2 {
        margin: auto;
        padding: 1rem;
    }
}

.camara-images-2 {
    margin: auto;
}

@media (min-width:768px) {
    .ca-te-img-2 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.ca-te-img-2 {
    margin: 1rem 1rem;
    padding: auto;
}

.ca-te-img-2 img {
    width: 800px;
    height: 600px;
}

@media only screen and (max-width:773px) {
    .camara-i-2 .camara-images-2 .ca-te-img-2 img {
        max-width: 100%;
        height: auto;
    }
}


/****/


/****/


/**H-tecnicas**/

.H-tecnicas {
    padding: 2rem 2rem;
    margin-bottom: auto;
}

@media (min-width:768px) {
    .tecnicas-1-hik {
        margin: 1rem 1rem;
        padding: initial;
    }
}

@media only screen and (max-width:773px) {
    .H-tecnicas .tecnicas-1-hik .especificaciones-hik {
        flex-direction: column;
        align-items: center;
    }
}

@media(min-width:768px) {
    .especificaciones-hik {
        padding-top: auto;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: space-evenly;
        justify-content: space-evenly;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap;
        height: 60vh;
    }
    .tecnicas-1-hik {
        margin-bottom: 800px;
    }
}

.especificaciones-hik .cam {
    width: 300px;
    height: 1100px;
    border-radius: 10px;
    background-color: white;
    margin: 60px;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    position: relative;
    box-shadow: 0px 0px 15px background;
    /* Link */
}

.especificaciones-hik .cam .camara-termi {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    padding: 15px;
}

.especificaciones-hik .cam .camara-termi img {
    font-size: 100px;
    width: 180px;
    height: 120px;
    padding: 15px;
}

.especificaciones-hik .cam .camara-termi .title {
    font-size: 35px;
    color: #000;
    font-weight: bold;
    padding: 10px;
}

.especificaciones-hik .cam .camara-termi .desc li {
    margin: 2rem 2rem;
    letter-spacing: normal;
    color: #000000;
    font-size: 20px;
    height: 20%;
    text-align: left;
}

.especificaciones-hik .cam a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.especificaciones-hik .cam {
    margin: 2rem 2rem;
    background: linear-gradient(130deg, #f1f8f8 0%, #959e9d 100%);
    box-shadow: none;
}

.especificaciones-hik .cam:hover .icon,
.especificaciones-hik .cam:hover .title,
.especificaciones-hik .cam:hover .desc {
    color: #000;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}


/**nvr**/

@media(min-width:768px) {
    .especificaciones-hik {
        padding-top: auto;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: space-evenly;
        justify-content: space-evenly;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap;
        height: 60vh;
    }
}

.especificaciones-hik .nvr {
    width: 300px;
    height: 1100px;
    border-radius: 10px;
    background-color: white;
    margin: 60px;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    position: relative;
    box-shadow: 0px 0px 15px background;
    /* Link */
}

.especificaciones-hik .nvr .nvr-cam {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    padding: 15px;
}

.especificaciones-hik .nvr .nvr-cam img {
    font-size: 100px;
    width: 180px;
    height: 120;
    padding: 15px;
}

.especificaciones-hik .nvr .nvr-cam .title {
    font-size: 35px;
    color: #000000;
    font-weight: bold;
    padding: 10px;
}

.especificaciones-hik .nvr .nvr-cam .desc li {
    margin: 2rem 2rem;
    letter-spacing: normal;
    color: #000000;
    font-size: 20px;
    height: 20%;
    text-align: left;
}

.especificaciones-hik .nvr a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.especificaciones-hik .nvr {
    margin: 2rem 2rem;
    background: linear-gradient(130deg, #f1f8f8 0%, #959e9d 100%);
    box-shadow: none;
}

.especificaciones-hik .nvr:hover .icon,
.especificaciones-hik .nvr:hover .title,
.especificaciones-hik .nvr:hover .desc {
    color: #000;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}


/**BLACKBODY**/

@media(min-width:768px) {
    .especificaciones-hik {
        padding-top: auto;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: space-evenly;
        justify-content: space-evenly;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap;
        height: 60vh;
    }
}

.especificaciones-hik .black {
    width: 300px;
    height: 1100px;
    border-radius: 10px;
    background-color: white;
    margin: 60px;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    position: relative;
    box-shadow: 0px 0px 15px background;
    /* Link */
}

.especificaciones-hik .black .blackbody {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    padding: 15px;
}

.especificaciones-hik .black .blackbody img {
    font-size: 100px;
    width: 180px;
    height: 120px;
    padding: 15px;
}

.especificaciones-hik .black .blackbody .title {
    font-size: 35px;
    color: #000000;
    font-weight: bold;
    padding: 10px;
}

.especificaciones-hik .black .blackbody .desc li {
    margin: 2rem 2rem;
    letter-spacing: normal;
    color: #000000;
    font-size: 20px;
    height: 20%;
    text-align: left;
}

.especificaciones-hik .black a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.especificaciones-hik .black {
    margin: 2rem 2rem;
    background: linear-gradient(130deg, #f1f8f8 0%, #afafaf 100%);
    box-shadow: none;
}

.especificaciones-hik .black:hover .icon,
.especificaciones-hik .black:hover .title,
.especificaciones-hik .black:hover .desc {
    color: #000;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}


/*****/


/****/

.titulos-4- {
    margin: 2rem 2rem;
    padding: 2rem 2rem;
}

.titulos-4- h2 {
    text-align: center;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
}

@media only screen and (max-width:590px) {
    .titulos-4- h2 {
        font-size: 30px;
    }
}


/****/


/****/


/****/


/****/


/****/


/*****/


/**Banners-only-img**/

.Banners-only-img {
    padding: 2rem 2rem;
    margin-bottom: auto;
}

@media (min-width:768px) {
    .banners-only {
        margin: 1rem 1rem;
        padding: initial;
    }
}

@media only screen and (max-width:773px) {
    .Banners-only-img .banners-only .banners img {
        max-width: 100%;
        height: auto;
    }
}

.banners {
    margin: auto;
}

@media (min-width:768px) {
    .banners {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }
}

.banners-img {
    margin: 10px 10px;
    padding: auto;
}

.banners-img img {
    width: 500px;
    height: 300px;
}


/**banners-only-2**/

@media (min-width:768px) {
    .banners-only-2 {
        margin: 1rem 1rem;
        padding: 1rem 1rem;
    }
}

@media only screen and (max-width:773px) {
    .banners-only-2 .banners-2 .banners-img-2 img {
        max-width: 100%;
        height: auto;
    }
}

@media (min-width:768px) {
    .banners-2 {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}

.banners-img-2 {
    margin: 10px 10px;
    padding: auto;
}

.banners-img-2 img {
    width: 600px;
    height: 400px;
}


/*****/


/**SpeedFace-V5L**/

.SpeedFace-V5L-ProFaceXTD {
    padding: 1rem 1rem;
}

@media (min-width:768px) {
    .SpeedFace-V5L-td {
        margin: 1rem 1rem;
        padding: 1rem 1rem;
    }
}

@media only screen and (max-width:773px) {
    .SpeedFace-V5L-ProFaceXTD .SpeedFace-V5L-td .SpeedFace-V5L- img {
        max-width: 100%;
        height: auto;
    }
}

.SpeedFace-V5L- {
    margin: auto;
}

.SpeedFace-V5L- img {
    float: left;
    width: 400px;
    height: 400px;
}

.SpeedFace-V5L-img img {
    margin: 10px 10px;
    padding: 10px 10px;
}

@media (min-width:768px) {
    .SpeedFace-V5L- .SpeedFace-V5L-desc {
        padding: 15px 15px;
        height: 400px;
    }
}

.SpeedFace-V5L-desc h2 {
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.SpeedFace-V5L-desc p {
    margin: auto;
    font-size: 20px;
    text-align: justify;
}

@media only screen and (max-width:590px){
    .SpeedFace-V5L-desc h2 {
        margin: 15px 15px;
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }
    
    .SpeedFace-V5L-desc p {
        margin: 10px 10px;
        font-size: 20px;
        text-align: left;
    }   
}


/**ProFaceXTD**/

@media (min-width:768px) {
    .ProFaceXTD-td {
        margin: 1rem 1rem;
        padding: 1rem 1rem;
    }
}

.ProFaceXTD- {
    margin: auto;
}

.ProFaceXTD- img {
    float: right;
    width: 400px;
    height: 400px;
}

.ProFaceXTD-img img {
    margin: 10px 10px;
    padding: 10px 10px;
}

@media (min-width:768px) {
    .ProFaceXTD- .ProFaceXTD-desc {
        padding: 15px 15px;
        height: 400px;
    }
}

.ProFaceXTD-desc h2 {
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.ProFaceXTD-desc p {
    margin: auto;
    font-size: 20px;
    text-align: justify;
}

@media only screen and (max-width:590px){
    .ProFaceXTD-desc h2 {
        margin: 15px 15px;
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }
    
    .ProFaceXTD-desc p {
        margin: 10px 10px;
        font-size: 20px;
        text-align: left;
    }   
}


/**ProFaceXTD-td-2**/

@media (min-width:768px) {
    .ProFaceXTD-td-2 {
        margin: 1rem 1rem;
        padding: 1rem 1rem;
    }
}

@media only screen and (max-width:773px) {
    .ProFaceXTD-td .ProFaceXTD- img {
        max-width: 100%;
        height: auto;
    }
}

.ProFaceXTD-td-2- {
    margin: auto;
}

.ProFaceXTD-td-2- img {
    float: left;
    width: 400px;
    height: 350px;
}

.ProFaceXTD-td-2-img img {
    margin: 10px 10px;
    padding: 10px 10px;
}

@media (min-width:768px) {
    .ProFaceXTD-td-2- .ProFaceXTD-td-2-desc {
        padding: 15px 15px;
        height: 400px;
    }
}

.ProFaceXTD-td-2-desc h2 {
    margin: 15px 15px;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.ProFaceXTD-td-2-desc p {
    margin: auto;
    font-size: 20px;
    text-align: justify;
}

@media only screen and (max-width:590px){
    .ProFaceXTD-td-2-desc h2 {
        margin: 15px 15px;
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }
    
    .ProFaceXTD-td-2-desc p {
        margin: 10px 10px;
        font-size: 20px;
        text-align: left;
    }   
}


/****/


/****/
.play-btn {
    width: 100px;
    height: 100px;
    background: radial-gradient( rgba(255, 0, 128, 0.8) 60%, rgba(255, 255, 255, 1) 62%);
    border-radius: 20%;
    display: block;
    margin: auto;
    box-shadow: 0px 0px 25px 3px rgba(255, 0, 128, 0.8);
  }
  
  /* triangle */
  .play-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-40%) translateY(-50%);
    transform: translateX(-40%) translateY(-50%);
    transform-origin: center center;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #fff;
    z-index: 100;
    -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  
  /* pulse wave */
  .play-btn:before {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation: pulsate1 2s;
    animation: pulsate1 2s;
    -webkit-animation-direction: forwards;
    animation-direction: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps;
    animation-timing-function: steps;
    opacity: 1;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, .75);
    top: -30%;
    left: -30%;
    background: rgba(198, 16, 0, 0);
  }
  
  @-webkit-keyframes pulsate1 {
    0% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 1;
      box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
      box-shadow: none;
  
    }
  }
  
  @keyframes pulsate1 {
    0% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 1;
      box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
    }
    100% {
      -webkit-transform: scale(1, 1);
      transform: scale(1);
      opacity: 0;
      box-shadow: none;
  
    }
  }


/****/
/***row***/
@media (min-width:768px){
    .col-lg5 {
        display: flex;
        justify-content: space-between;
        padding: 5px;
        margin: 2rem 0px;
    } 
    #row {
        margin: 0rem 3rem;
    }
 }
 .col-lg5 .collg {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: left;
     margin: 10px 10px;
     padding: 1rem 1rem;
 }
 .col-lg5 .collg img {
     width: 300px;
     height: 200px;
     align-items: center;
 }
 .col-lg5 .collg5 .collg {
     width: 100%;
     height: auto;
     color: #000;
 }
 .col-lg5 .collg5 .collg h2 {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 500;
     font-size: 2rem;
     text-align: center;
 }
 .col-lg5 .collg5 .collg .p {
     align-items: center;
     text-align: center;
     color: #000;
     font-size: 22px;
 }
 .col-lg5 .collg5 .collg p{
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 500;
     font-size: 1rem;
     text-align: left;
     margin: 15px 15px;
 }


/****/


/**Footer**/


/* DESKTOP */

@media all and (max-width: 999999999px) and (min-width: 1340px) {
    /* Footer Parent Div Styling */
    #footer {
        width: 100%;
        background-color: #23262c;
        margin: 0 auto;
    }
    /* H3 Styling */
    h3.left {
        padding-top: 3rem;
        color: #ffffff;
        font-size: 16px;
        font-family: Mallory, Sans-Serif;
        font-weight: bold;
        margin: 0 0 10px 0;
        text-align: left;
    }
    h3.center {
        color: #ffffff;
        font-size: 16px;
        font-family: Mallory, Sans-Serif;
        font-weight: bold;
        margin: 0 0 10px 0;
        text-align: center;
    }
    /* List Styling */
    ul {
        margin: 0;
        list-style-type: none;
    }
    li {
        margin: 0;
        color: #666666;
        font-size: 13px;
        font-weight: 300;
        line-height: 22px;
        list-style-type: none;
        text-align: left;
    }
    /* Utility Links Div Styling */
    #utility-links {
        width: 50%;
        height: 150px;
        background-color: #23262c;
        margin: 40px auto 0 auto;
    }
    .rectangle {
        width: 1px;
        height: 100px;
        background: #23262c;
        margin: 0 30px 0 0;
        float: left;
        display: inline-block;
    }
    /* Help Styling */
    .help {
        width: 30%;
        height: 100px;
        float: left;
        margin: 0;
        display: inline-block;
    }
    /* Help Img Icons*/
    .help-img-icon {
        float: left;
        margin: 0 5px 0 0;
    }
    /* About Styling */
    .about {
        width: 30%;
        height: 100px;
        float: left;
        margin: 0;
        display: inline-block;
    }
    /* Card Services Styling */
    .card {
        width: 30%;
        height: 100px;
        float: left;
        margin: 0;
        display: inline-block;
    }
    /* Newsletter-Social Container */
    #newsletter-social {
        width: 40%;
        margin: 0 auto;
        text-align: center;
    }
    /* Newsletter Styling */
    #newsletter {
        width: 65%;
        margin: 30px 0 0 0;
        text-align: center;
        float: left;
        display: inline-block;
    }
    p.deals {
        color: #f1f8f8;
        font-size: 13px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
        line-height: 0;
        text-align: center;
    }
    input[type=text] {
        width: 60%;
        padding: 15px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 1px #D9D6D6;
        background-color: #F2F2F2;
        border-radius: 4px;
        font-size: 13px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    input[type=button],
    input[type=submit],
    input[type=reset] {
        background-color: #0677FF;
        border: 2px;
        border-radius: 4px;
        color: white;
        padding: 15px 35px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
        font-size: 13px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 900;
    }
    /* Social Media Styling */
    #social {
        width: 35%;
        margin: 80px 0 0 0;
        float: right;
        display: inline-block;
    }
    /* Copyright Styling */
    .rectangle-horiz {
        width: 100%;
        height: 2px;
        background: #10BEBE;
        margin: 170px 0 0 0;
    }
    #copyright {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
    }
    .copy {
        color: #a7a7a7;
        font-size: 10px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
        margin-left: 20px;
        display: inline-block;
        overflow: hidden;
    }
    /* Link Styling */
    a:link {
        color: #F2F2F2;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    a:visited {
        color: #F2F2F2;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    a:hover {
        color: #0677FF;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    a:active {
        color: #0677FF;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
}


/* =TABLET */

@media all and (max-width: 1339px) and (min-width: 600px) {
    /* Footer Parent Div Styling */
    #footer {
        width: 100%;
        background-color: #23262c;
        margin: 0 auto;
    }
    /* H3 Styling */
    h3.left {
        padding-top: 3rem;
        color: #ffffff;
        font-size: 16px;
        font-family: Mallory, Sans-Serif;
        font-weight: bold;
        margin: 0 0 10px 0;
        text-align: left;
    }
    h3.center {
        color: #ffffff;
        font-size: 16px;
        font-family: Mallory, Sans-Serif;
        font-weight: bold;
        margin: 0 0 10px 0;
        text-align: center;
    }
    /* List Styling */
    ul {
        margin: 0;
        list-style-type: none;
    }
    li {
        margin: 0;
        color: #666666;
        font-size: 13px;
        font-weight: 300;
        line-height: 22px;
        list-style-type: none;
        text-align: left;
    }
    /* Utility Links Div Styling */
    #utility-links {
        width: 90%;
        height: 150px;
        background-color: #23262c;
        margin: 40px auto 0 auto;
    }
    .rectangle {
        width: 1px;
        height: 100px;
        background: #23262c;
        margin: 0 30px 0 30px;
        float: left;
        display: inline-block;
    }
    /* Help Styling */
    .help {
        width: 25%;
        height: 100px;
        float: left;
        margin: 0;
        display: inline-block;
    }
    /* Help Img Icons*/
    .help-img-icon {
        float: left;
        margin: 0 5px 0 0;
    }
    /* About Styling */
    .about {
        width: 25%;
        height: 100px;
        float: left;
        margin: 0;
        display: inline-block;
    }
    /* Card Services Styling */
    .card {
        width: 25%;
        height: 100px;
        float: left;
        margin: 0;
        display: inline-block;
    }
    /* Newsletter Styling */
    #newsletter {
        width: 50%;
        margin: 30px 0 0 0;
        text-align: center;
        float: left;
        display: inline-block;
    }
    p.deals {
        color: #f1f8f8;
        font-size: 13px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
        line-height: 0;
        text-align: center;
    }
    input[type=text] {
        width: 40%;
        padding: 15px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 1px #D9D6D6;
        background-color: #F2F2F2;
        border-radius: 4px;
        font-size: 13px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    input[type=button],
    input[type=submit],
    input[type=reset] {
        background-color: #0677FF;
        border: 2px;
        border-radius: 4px;
        color: white;
        padding: 15px 35px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
        font-size: 13px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 900;
    }
    /* Social Media Styling */
    #social {
        width: 50%;
        margin: 80px 0 0 0;
        float: right;
        display: inline-block;
    }
    /* Copyright Styling */
    .rectangle-horiz {
        width: 100%;
        height: 2px;
        background: #10BEBE;
        margin: 0 0 0 0;
    }
    #copyright {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 160px;
    }
    .copy {
        color: #a7a7a7;
        font-size: 10px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
        margin-left: 20px;
    }
    /* Link Styling */
    a:link {
        color: #000;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    a:visited {
        color: #000;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    a:hover {
        color: #0677FF;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    a:active {
        color: #0677FF;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
}


/* MOBILE */

@media all and (max-width: 599px) and (min-width: 100px) {
    /* Footer Parent Div Styling */
    #footer {
        width: 100%;
        background-color: #23262c;
        margin: 0 auto;
    }
    /* H3 Styling */
    h3.left {
        padding-top: 1rem;
        color: #ffffff;
        font-size: 16px;
        font-family: Mallory, Sans-Serif;
        font-weight: bold;
        margin: 0 0 10px 0;
    }
    h3.center {
        color: #ffffff;
        font-size: 16px;
        font-family: Mallory, Sans-Serif;
        font-weight: bold;
        margin: 0 0 10px 0;
        text-align: center;
    }
    /* List Styling */
    ul {
        margin: 0;
        list-style-type: none;
    }
    li {
        margin: 0;
        color: #666666;
        font-size: 13px;
        font-weight: 300;
        line-height: 22px;
        list-style-type: none;
        text-align: center;
    }
    /* Utility Links Div Styling */
    #utility-links {
        width: 90%;
        height: 150px;
        background-color: #23262c;
        margin: 40px auto 0 auto;
    }
    /* Help Styling */
    .help {
        width: 100%;
        height: 100px;
        float: left;
        margin: 0;
    }
    /* Help Img Icons*/
    .help-img-icon {
        margin: 0 5px 0 0;
    }
    /* About Styling */
    .about {
        width: 100%;
        height: 100px;
        float: left;
        margin: 50px 0 0 0;
    }
    /* Card Services Styling */
    .card {
        width: 100%;
        height: 100px;
        float: left;
        margin: 0;
    }
    /* Newsletter Styling */
    #newsletter {
        width: 100%;
        margin: 210px 0 0 0;
        text-align: center;
    }
    p.deals {
        color: #f1f8f8;
        font-size: 13px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
        line-height: 0;
        text-align: center;
    }
    input[type=text] {
        width: 40%;
        padding: 15px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 1px #F2F2F2;
        background-color: #F2F2F2;
        border-radius: 4px;
        font-size: 13px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    input[type=button],
    input[type=submit],
    input[type=reset] {
        background-color: #0677FF;
        border: 2px;
        border-radius: 4px;
        color: white;
        padding: 15px 35px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
        font-size: 13px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 900;
    }
    /* Social Media Styling */
    #social {
        width: 100%;
        margin: 30px 0 0 0;
    }
    /* Copyright Styling */
    .rectangle-horiz {
        width: 100%;
        height: 2px;
        background: #10BEBE;
        margin: 30px 0 0 0;
    }
    #copyright {
        width: 100%;
        margin: 0 auto;
        margin-top: 30px;
    }
    .copy {
        color: #F2F2F2;
        font-size: 8.5px;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
        margin: 0;
        white-space: nowrap;
    }
    /* Link Styling */
    a:link {
        color: #F2F2F2;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    a:visited {
        color: #F2F2F2;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    a:hover {
        color: #0677FF;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
    a:active {
        color: #0677FF;
        text-decoration: none;
        font-family: Helvetica, Arial, Sans-Serif;
        font-weight: 500;
    }
}