body { 
  background-color: white;
  /* #afe2f7; #00bdfb*//* background-image: url('https://smartandslick.com/blog/wp-content/uploads/2021/04/syto3xs06fu.jpg');*/
  font-family: Poppins;
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  height: 100%;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;

  }

  .laptop_only {
    display: none;
  }

  .standard_text {font-family: Poppins; color: grey;}

  h2 {
  font-size: 1.4em;
}

/* ====== COMPONENTS ========= */

.CTA_button_container {
  width: 250px; 
  height: 50px; 
  margin: 0 auto;
  line-height: 50px;
  text-align: center;
  opacity: 1;
}

.CTA_button {
  width: 250px; 
  height: 50px; 
  margin:  0 auto;
  background-color: #0fda00; /*  BRIGHT GREEN  */
  font-size: 1.5em;
  border-radius: 5px 5px 5px 5px;
  color: white;
  border:  none;
  cursor: pointer;
  line-height: 50px;
  color: white;
  text-align: center;
  opacity: 1;
  font-size: 1.5em;
}

.centred_image {
  display: block;
  margin: auto;
}

.CTA_button a {
  color: white;
  text-decoration: none;
}

/* ============================== HEADER ============================== */

img {
  width: 365px;
}

#master{
}

/*=================== TOPBAR =================*/

#topbar {
  display: none;
  font-family: Poppins;
  height: 40px;
  line-height: 40px;
  /*width: 100%;*/
}

#contactinfo{}

#socials{}

#flip_me_sideways {
  display: none;
}

/* ================= MAIN HEADER ================*/

#header { 
  width: 100%;
  background-color: #eb2020;
  position: absolute; 
  left: 0; 
  right: 0;
  height: 70px; /* original 105 */
       }

#header-content{}

#mobile-menu-button {
  float: right;
  width: 60px;
  margin-top: 15px;
  /*border: 1px solid white;*/
}

.menu_text {
 /* padding-right: 20px;*/
  color: white;
}

#logo {
  padding-left: 5px;
  padding-top: 5px;
  width: 290px;  /* original was 350 */
  height: 100px;
  /*margin: 0 auto;*/
}

#logo a {text-decoration: none;}

#logo img {
  width: 100%;
}

#logo h1 {
  font-size: 0.5em;
  color: white;
  font-family: Arial;
  letter-spacing: 7px;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
} /* SUBTITLE */

#logo h2 {
  text-align: center; 
  font-size: 2.4em !important; 
  line-height: 0;} /* SMART & SLICK*/


/*====================== mobile menu ========================*/

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: -5;
  background-color: white; /* #111;  Black*/
  border-right: 5px solid #eb2020;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#mySidenav li {
  list-style: none;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* END MOBILE MENU */

/*=============== body.blade.php ==================*/

#index_body {
  width: 100%;
  max-width: 414px;
  margin: 0 auto; 
  margin-top: 0px ;  /* original 120 */
  font-family: Arial; 
}

#first_fold_front_page {
  padding-top: 75px;
  /*min-width: 375px;*/
  width: 100%;
  max-width: 414px;
  height: 530px; 
  margin:  0 auto;
  background-image: url('https://smartandslick.com/blog/wp-content/uploads/2021/04/syto3xs06fu.jpg'); 
  background-size: 1024px 667px; 
  background-attachment: center;
}

#intro_video {
  width: 100%; 
/*  height: 188px; */
  height: 0;
  padding-bottom: 50%; 
  position: relative;
  background-color: grey;
}

.youtube_embed {
  -webkit-transform: translate(0, 0);
  position: absolute; 
  top: -webkit-0; 
  left: -webkit-0;
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  -webkit-object-fit: cover;
}

#background_div {
  /*background-color: rgba(194, 194, 194,0.5); */
  /* opacity: 0.7; */
  height: 430px; 
  width: 375px; 
  margin: 0 auto;
}

.mobile_padding {
  padding-left: 10px;
  padding-right: 10px;
}

#top_panel_left {

}

.video {
  width:  100%;
  height: 200px;
}

.heading_image {
  margin: auto;
  display: block;
}

/*#grey_box {
  height: 430px; 
  width: 375px; 
  margin: 0 auto; 
  opacity: 0.5;
}*/

/*  
#product-header-left h2 {font-family: Poppins; text-align: center; line-height: 1em; font-size: 1em;}
*/

#screen {
  height: 100%; width: 365px; margin: 0 auto;
}

#job_text {
  width: 350px;
  height: 150px;
  border-radius: 10px; 
  font-family: Arial; 
  font-size: 14px;
}

#lead_form_part1_left {
  width:  350px;
}

#lead_form_part1_right {
display: none;
}

.select-css {
  display: block;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 700;
  color: #444;
  line-height: 1.3;
  padding: .6em 1.4em .5em .8em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: .5em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
  display: none;
}
.select-css:hover {
  border-color: #888;
}
.select-css:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}
.select-css option {
  font-weight:normal;
}

.product_heading {
  font-size: 1.3em;
}

#body {
  width: 365px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 0 auto; 
  margin-top: 0px ;  /* original 120 */
  font-family: Arial; 
}

#blog_body {
  font-family: Poppins;
}

#sidebar {
  width: 375px;
  margin: 0 auto;
}

#left_column {
  margin-left: -10px; 
  background-color: #eb2020; 
  width: 335px; 
  color: white; 
  float: left;
}

#the_team {
  width: 100%;
  margin-bottom: 10px;
}

#the_team img {
  width: 100%;
}

#video_teaser {
  width: 365px;
  height: 200px;
  background-color: black;
}

#loop_column {
  margin-top: 40px;
  width: 375px; 
  float: left;
}

#loop_column p {
  margin-left: 5px; 
  margin-right: 5px;
}

#loop_column h2 {
  margin-left: 5px; 
  margin-right: 5px; 
  text-align:  center; 
  font-size: 3em; 
  line-height: 1em; 
}

#loop_column img {
  width: 365px; 
  height: auto;
}

.post_date {
  text-align: center;
}

#lower_fold {
  font-family: Poppins; 
  font-size: 1em;
  padding-left: 10px;
  padding-right: 10px;
}

#blog_header {
  width: 100%; 
  height: 130px; 
  padding-top: 40px; 
  border-bottom: 1px solid grey;
}

#navbar {
  display: none;
}

#spacer {
  height: 65px;
}

#desktop-form {
  display: none;
}

#mobile-form {
  display: none;
}

#page-content h2 {
  font-family: Poppins;
}

#product-header {width: 100%; margin: 0 auto; height: 650px;}

#product-header h2 {font-size: 2em; text-align: center; line-height: 1em;}

#product-header-left {width: 100%; /* float: left; */ }

#product-header-left h2 {font-family: Poppins; font-size: 1em;}

#product-header-right {display: none;}

#mobile-call-to-action {width: 300px; margin: 0 auto; line-height: 40px;}

#vsl img {width: 375px;}

#product-CTA-mobile {width: 300px; height: 40px; background-color: orange; border-radius: 5px 5px 5px 5px; margin: 0 auto; font-family: Poppins; color: white; text-align: center;}

#product-CTA-mobile a {color: blue;}
#product-CTA-mobile a:visited {color: blue;}

#product-header ul li {font-family: Poppins; font-size: 1em; list-style: none;}

#vsl {width: 100%; height: 300px; margin: 0 auto; }

#sales-letter-content {
      width: 355px;
      padding-left: 10px;
      padding-right: 10px;
}

#clients ul {display: inline; /*border-bottom: 3px solid black;*/}

#clients h2 {font-size: 1.1em;}

#clients ul li {list-style: none; display: inline; padding-left: 20px;}

#footer {padding-top: 40px;}

#boxes {}

#blog-body {
  padding-top: 100px; 
  width: 355px; 
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
}

#box1 {width: 95%; padding-left: 10px; margin: 1px 1px 1px 1px; border: 1px solid orange;}

#box2 {width: 95%; border: 1px solid orange; margin: 5px 5px 5px 5px;}

#offer {}

#offer1 {
  width: 355px; 
  padding-left: 10px; 
  padding-right: 10px; 
  padding-bottom: 10px; 
  padding-top: 10px; 
  margin-bottom: 10px;
  background-color: orange;
}

#offer2 {width: 375px;}

#product-header-left ul li:before {
  content: '✓'; color: red;
}


#callBack {
  padding-left: 10px;
  padding-right:10px;
  margin-top: 10px;
}

#intro {
  width: 360px; 
  font-family: Poppins; 
  font-size: 0.9em; 
  float: right;
}


.call_back {
  height: 0%; /* height to change with javascript */
  width: 100%; /* full width */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  bottom: 0; /* Stay at the bottom */
  left: 0;
  background-color: orange; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  /* padding-top: 60px;  Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}






.service_tile {
  margin:  0 auto; 
  background-color: white;
  height: auto;
  border: 10px solid #eb2020;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}

.service_tile h2 {
  color: #eb2020;
  font-family: Poppins;
  text-transform: uppercase;
  text-align: center;
}

#service_image {

  width: 315px;
  margin: 0 auto; 
  height: 200px; 
  /*border: 1px solid black; */

}

#service_image img {
  width: 100%;
}

#service_blurb {
  width: 315px; 
  height: 200px;
}



}