/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your landing pages
look if there is anything specific to your landing pages.
*********************************************************************************
****************************************************************************** */
  
.easy-font {
font-family: Roboto,sans-serif !important; }


/* ******************************************************************************
*********************************************************************************
Header/Nav
*********************************************************************************
****************************************************************************** */
.hs-form-13a8e1e2-db06-4241-a8b1-fad959de56d4_5a00557f-023f-496f-aa21-2c0f17f1c70e .hs-form-field label {text-align: center!important;}

html {
  scroll-behavior: smooth;
}

.header {height: 80px;
background-color: #333;}

.header-logo
{
    padding-left: 15%;
  padding-right: 15%;
  margin-top: 20px;
 
}

.mobile-nav {height: 115px;
background-color: #333;}


.header-number
{
    padding-left: 15%;
  padding-right: 15%;
  margin-top: 30px;
 
}


.header-number
{
    padding-left: 15%;
  padding-right: 15%;
  margin-top: 30px;
 
}

@media (max-width: 991px) {   
  .right-side {margin: 0px!important; padding: 0px!important}}

@media (max-width: 767px) {    
.header-logo {padding-left: 5%; padding-right: 5%; margin-top: 20px; width: 49%!important; float: left!important}
.header-number {padding-left: 5%; padding-right: 5%; margin-top: 30px; width: 49%!important; float: right!important}
  .hero-title h1 {padding-left: 5%; padding-right: 5%; padding-top: 30px; padding-bottom: 30px}
  .segment {margin-bottom: 20px}
  .graphic-text {margin-bottom: 20px}
  .graphic-text p {margin-bottom: 0px}
}

@media (max-width: 480px) {

  .hide-mobile {

    display:none!important;}}



@media (min-width: 481px) {

  .mobile-header {

    display:none!important;}}


@media (max-width: 480px) {

  .right-side{

    text-align: center!important;}}


@media (max-width: 968px) {

  .hide-tablet {

    display:none!important;}}

@media (min-width: 968px) {

  .tablet-reveal {

    display:none!important;}}

@media (max-width: 991px) {

  .left-side, .right-side {width: 100%!important; margin: 0px auto;!important}}


/* ******************************************************************************
*********************************************************************************
Hero Elements
*********************************************************************************
****************************************************************************** */


.hero-left {padding-right: 5vw;}


.long-hero {
   /* Sizing */
    width: 100vw;
  height: 20vw!important;}



.long-hero img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
        height: 300px;
}


.hero-image {
  background-image: url("https://7872840.fs1.hubspotusercontent-na1.net/hubfs/7872840/hero-CharlesIT-ads.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 220px;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}


.image-responsive {
  max-width: 100%; height: auto;}


/* Centered text */ {
  @media ( min-width: 776px ) { .centered text-align: center;
  }}


/* ******************************************************************************
*********************************************************************************
Body Elements
*********************************************************************************
****************************************************************************** */


.blue-list ul {margin:0px}
.blue-list ul li {list-style-type: none}
.blue-list ul li:before {content: "•"; color: #00ADEE; padding-right: 8px; background: transparent!important}
.blue-list li {margin-left: 0px;margin-bottom:.5em;}


.blue-list  ol {
   list-style: none;
   counter-reset: item;
 }
.blue-list  ol li {
   counter-increment: item;
   margin-bottom: 15px;
   margin-left: 0;
 }
.blue-list  ol li:before {
   margin-right: 10px;
  font-size: 90%;
  padding-top: .1em;
   content: counter(item);
   background: #00ADEE;
   border-radius: 100%;
   color: white;
   width: 1.5em;
  height: 1.5em;
   text-align: center;
   display: inline-block;
  font-family: Roboto,sans-serif !important;
 }

.segment {
    padding-left: 5%;
  padding-right: 5%;
padding-top: 2.5%;
  padding-bottom: 2.5%;
}

.video-segment {
    padding-left: 15%;
  padding-right: 15%;
padding-top: 40px;
  padding-bottom: 40px;
}


.small-column-segment {
    padding-left: 25%;
  padding-right: 25%;
padding-top: 30px;
  padding-bottom: 30px;
}

@media (max-width: 800px) {
.small-column-segment {
    padding-left: 5%;
  padding-right: 5%;
padding-top: 2.5%;
  padding-bottom: 2.5%;
} }

.center-button .hs-submit, h3.form-title {text-align: center!important}

.grey-box { background-color: #f5f5f5; padding: 20px 30px; border-radius: 5px; margin-bottom: 30px; text-align: left;}
 

.grey-box h2 {
color: #45c3f3;
font-weight: 700;
font-size: 30px !important;
margin-bottom 20px;
}

.lp-icon {padding: 20px 0px 20px; border-top: 1px solid #999}
.lp-icon-short {padding-top: 20px}
.lp-icon-short2 {padding-top: 20px}
.lp-icon-short3 {padding-top: 20px}
.font18 {font-size: 18px; }
.center {text-align: center}
.form-ads {margin-bottom: 50px}

@media (max-width: 1700px) { .lp-icon-short2 { padding-top: 0px }}
@media (max-width: 1400px) { .lp-icon-short3 { padding-top: 0px }}
@media (max-width: 1190px) { .lp-icon-short { padding-top: 0px }}


@media (max-width: 768px) { .grey-box h2 { font-size: 28px } .graybox-intro {margin-bottom: 20px} .form-ads {margin-bottom: 20px} .lp-icon-last {padding-bottom: 0px}}

@media (max-width: 768px) { .grey-box { text-align: center !important;}}

@media (max-width: 768px) { .mobile-marg { margin-bottom: 15px; !important;}}
  
.small-column-segment h2 {
color: #45c3f3!important;
font-weight: 700!important;
font-size: 30px !important;
}

.small-column-segment h3 {
font-weight: 700;
font-size: 24px !important;
}

.segment-background {
background-image: url('https://mk0charlesitoque7mqw.kinstacdn.com/wp-content/uploads/sites/2/2019/06/bg-creating-relationships.jpg'); 
background-repeat: no-repeat; background-position: top center; background-attachment: scroll; background-size: cover;}


.hero-text-white h1 { color:#fff; font-size:38px; line-height:auto; font-weight: 600; padding-top: 50px; padding-bottom: 50px;  padding-left: 12.5%; padding-right: 12.5%; }
.hero-text-white h3 { color:#fff; font-size:24px;!important line-height:auto; }
.hero-text-white p { color:#fff; font-size:18px;!important line-height:auto; }
}
@media ( min-width: 991px ) {
.hero-text-white h1 {color:#fff; font-size:32px;!important line-height:auto; font-weight: 600;}}
@media ( max-width: 767px ) {
.hero-text-white h1 {color:#fff; font-size:30px;!important line-height:auto; font-weight: 700;}}

.header-padding {padding-bottom: 20px;}

@media ( max-width: 991px ) {
.form-size { display: block;
margin: 0 auto; }}

.hs-cta-img {
  max-width: 100%;
  height: auto;
}

.content-left 

{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 850px;
}

.form-styles
{padding-left: 10px; ; display: block;
}

@media (max-width: 767px) {
.form-styles {padding-left: 0px;} }

.left-border {
    border-left: 1px solid #999999;
  padding-left: 30px;}

.small-section {
 padding-right: 20px;}

.rounded-box { background-color: #f5f5f5; 
  padding: 20px;
 border-radius: 10px;
margin-bottom: 20px; }


.inner-content {
padding: 20px;
}

  


/* ******************************************************************************
*********************************************************************************
Credential/Awards Section
*********************************************************************************
****************************************************************************** */

.featured-text {
 display: block;
   text-align: center;
 }

.featured-container
{
 padding-left: 15%;
  padding-right: 15%;
 padding-top: 2.5%;
  padding-bottom: 2.5%;

}

.featured-image
{
  
  display: block;
  vertical-align: middle;
  text-align: center;
  padding: 10px 0px 10px 0px;
}



.my-pretty-background-image-wrapper{
background-size:cover;
background-position:center center;
}


.hs-rss-description a { 
  
  margin-left: auto; 
  margin-right: auto;
  width: 120px;
  border-radius: 20px;}

.hs-rss-item.hs-with-featured-image .hs-rss-item-text {
  height: 330px;}

@media (max-width: 740px) { .hs-rss-item.hs-with-featured-image .hs-rss-item-text {
  height: auto !important;}}

  
  /* ******************************************************************************
*********************************************************************************
TYPS
*********************************************************************************
****************************************************************************** */


  
/* ******************************************************************************
*********************************************************************************
Backgrounds - delete if LPS become voided
*********************************************************************************
****************************************************************************** */

.managed-lp-hero{
  background-image: url('https://mk0charlesitoque7mqw.kinstacdn.com/wp-content/uploads/sites/2/2020/02/Banner-bg-Dont-just-settle-for-average-IT-support.jpg');
  background-repeat: no-repeat; background-position: top center; background-attachment: scroll; background-size: cover;
}

.wide-CTA-background { background-image: url('https://mk0charlesitoque7mqw.kinstacdn.com/wp-content/uploads/sites/2/2020/01/HP-CharlesIT-Network_eBook-Bg.jpg'); 
  background-repeat: no-repeat; 
  background-position: top center; background-attachment: scroll; background-size: cover;}

.space-huge {background-image: url('https://mk0charlesitoque7mqw.kinstacdn.com/wp-content/uploads/sites/2/2018/02/bg-testimonial_r1.jpg'); 
  background-repeat: no-repeat;
  background-position: center center; background-attachment: scroll; background-size: cover;}
  
.hero-back {
/* background-image: url('https://7872840.fs1.hubspotusercontent-na1.net/hubfs/7872840/hero-background.jpg');  */
background-repeat: no-repeat; background-position: top center; background-attachment: scroll; background-size: cover;}

.video-map {
/* background-image: url('https://7872840.fs1.hubspotusercontent-na1.net/hubfs/7872840/video-section-background.jpg');  */
background-repeat: no-repeat; background-position: top center; background-attachment: scroll; background-size: cover;}