body { background-color: white;
       /* #afe2f7; #00bdfb*//* background-image: url('https://smartandslick.com/blog/wp-content/uploads/2021/04/syto3xs06fu.jpg');*/
font-family: Poppins;
  }

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

#logo a {text-decoration: none;}

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

#header {width: 100%; position: absolute; left: 0; right: 0; /* background-color: black; */}

#topbar {font-family: Poppins;}

.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;
}

/*======================================================
======================================================
======================================================*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

body {
  background-color: white; /* #afe2f7;
  #00bdfb background-image: url('https://smartandslick.com/wp-content/uploads/2020/08/bg-var-6.jpg'); */
  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;
}

h2 {
  font-size: 1.3em;
}

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

#header {
  background-color: black;
  width: 100%;
  height: 105px;
  position: absolute;
  left: 0;
  right: 0;
}

#logo {
  width: 350px;
  margin: 0 auto;
}

#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*/

#body {
  width: 375px; 
  margin: 0 auto; 
  margin-top: 120px ; 
  font-family: Arial; 
}

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

#the_team img {
  width: 315px;
  border-bottom: 2f0px;
}

#video_teaser {
  width: 375px;
  height: 170px;
  background-color: black;
}

#loop_column {width: 375px; float: left;}

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

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

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

#lower_fold {
  font-family: Poppins; 
  font-size: 1em;
}

#navbar {
  display: none;
}

#first_fold_front_page {

  width: 100%; 
  height: 430px; 
  background-image: url('https://smartandslick.com/blog/wp-content/uploads/2021/04/syto3xs06fu.jpg'); 
  background-size: 1024px 430px; 
  background-attachment: center;
}

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

#grey_box {
  height: 430px; 
  width: 375px; 
  margin: 0 auto; 
  opacity: 1;
}

#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;}

#lower_fold {
        padding-left: 10px;
        padding-right: 10px;
}

#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;
}


.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 */
}



/*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: 0;
  background-color: #111; /* 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 */
}

/* 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;
}

/* 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 */


.service_tile {
  width: 315px; 
  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;
}

.CTA_button {
  width: 150px; 
  height: 50px; 
  background-color: #0fda00; 
  border-radius: 5px 5px 5px 5px;
  margin: 0 auto;
  line-height: 50px;
  color: white;
  text-align: center;
  opacity: 1;
}

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


}



/*

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {

#topbar {width: 100%; margin: 0 auto; height: 40px;}

#header {background-color: black; height: 105px;}

#logo {width: 380px; margin: 0 auto; margin-top: 0; line-height: 0; padding-top:0;}

#logo h1 {font-size: 0.7em; color: white; font-family: Arial; letter-spacing: 6.6px; text-transform: uppercase; line-height: 0; }

#logo h2 {font-size:  1em; line-height: 0; text-align: center;}

#body {
  margin-top: 150px;
}

#navbar {display: none;}

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

#product-header-left {width: 600px;}

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

#push {height: 50px; clear: both;}

#vsl {width: 560px; height: 600px; margin: 0 auto;}

#product-CTA-mobile {width: 300px; height: 40px; background-color: black; border-radius: 5px 5px 5px 5px; margin: 0 auto; font-family: Poppins; color: white;}
#product-CTA-mobile a:visited {color: white;}

}

/* MR MODHA's IPAD */

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {

#topbar {width: 100%; margin: 0 auto; font-family: Poppins; height: 40px;}

#header {background-color: black; width: 100%; height: 105px; position: absolute; left: 0; right: 0;}

#logo {width: 380px; margin: 0 auto; margin-top: 0; line-height: 0; padding-top:0;}

#logo h1 {font-size: 0.7em; color: white; font-family: Arial; letter-spacing: 6.6px; text-transform: uppercase; line-height: 0; }

#logo h2 {font-size:  1em; line-height: 0; text-align: center;}

#body {
  margin-top: 115px;
}

#first_fold_front_page {

  width: 100%; 
  height: 430px; 
  background-image: url('https://smartandslick.com/blog/wp-content/uploads/2021/04/syto3xs06fu.jpg'); 
  background-size: 1024px 430px; 
  background-attachment: center;
}

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

#grey_box {
  height: 430px; 
  width: 375px; 
  margin: 0 auto; 
  opacity: 1;
}

.CTA_button {
  width: 150px; 
  height: 50px; 
  background-color: #0fda00; 
  border-radius: 5px 5px 5px 5px;
  margin: 0 auto;
  line-height: 50px;
  color: white;
  text-align: center;
  opacity: 1;
}

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

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

#the_team img {
  width: 315px;
  border-bottom: 2f0px;
}

.service_tile {
  width: 722px; 
  background-color: /*#00aeff*/ #eb2020;
  height: 300px;
  padding-left: 10px;
  padding-right: 10px;
  border: 5px solid #eb2020;
  margin-bottom: 30px;

}

.service_tile h2 {
  color: white;
}

#service_image {

  width: 300px; 
  height: 200px; 
  border: 1px solid black; 
  float: left;

}

#summary_of_benefits {
  color: grey; 
  width: 600px; 
  font-family: Poppins; 
  margin-bottom: 50px; 
  float: left;
}

#video_teaser {
  width: 560px; 
  height: 315px; 
  background-color: black; 
  margin: 0 auto;
}

#lead_form {
  width: 350px; 
  height: auto; 
  font-family: Poppins; 
  float: right;
}

#service_blurb {
  float: right; 
  width: 350px; 
  height: 200px;
  color: white;

}

#navbar {display: none;}

#mobile-menu-button {float: left;}

#page-content {font-family: Arial; width: 800px; margin: 0 auto;}

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

#container {/*background-color: blue;*/ width: 768px; margin: 0 auto; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1;}

#desktop-form {display: none;}

#mobile-form {display: none;}

#product-header {width: 100%; position: absolute; left: 0; background-color: orange;}

#product-header-left {width: 700px; height: 450px; font-family: Poppins; margin: 0 auto;}

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

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

#push {height: 50px; clear: both;}

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

#vsl {width: 560px; height: 600px; margin: 0 auto;}

#clients ul {display: inline;}

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

/*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: 0;
  background-color: #111; /* 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 */
}

/* 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;
}

/* 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 */



}

/*



}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

	body {/*background-image: url('https://smartandslick.com/wp-content/uploads/2020/08/bg-var-6.jpg');*/ background-size: cover;}

h2 {
  font-family: Poppins; 
  font-size: 2.5em;
} 

h3 {
  font-family: Poppins; 
}

.product_heading {font-family: Poppins; font-size: 2.5em;}

#topbar {font-family: Poppins;}

#header {background-color: black; width: 100%; height: 105px; position: absolute; left: 0; right: 0;}

#header-content {width: 1024px; margin: 0 auto; /*height: 100px;*/}

#linkbox {
  border: 2px solid white; 
  height: 67px; 
  margin-top: 0px; 
  color: white; 
  font-family: Poppins;
}

#logo {
  width: 380px; 
  float: left; 
  padding-top: 10px;
}

#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*/

#container {background-color: lightgreen; width: 992px; margin: 0 auto; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1;}

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

#right_column {
  height: 160px;
}

#navbar { float: right; width: 640px; }

#navbar ul li {display: inline-block; padding-left: 7px; color: white;}

#navbar a {color: white; text-decoration: none;}

#linkbox:hover {background-color: white;}

#navbar a:hover {color: red;}

#navbar a:active {color: red;}

#first_fold_front_page {

  width: 100%; 
  height: 430px; 
  background-image: url('https://smartandslick.com/blog/wp-content/uploads/2021/04/syto3xs06fu.jpg'); 
  background-size: 1024px 430px; 
  background-attachment: center;
}

#background_div {
  background-color: rgba(134, 134, 134,0.7); 
  height: 430px; 
  width: 400px; 
  margin: 0 auto;
}

#grey_box {
  height: 430px; 
  width: 400px; 
  margin: 0 auto; 
  opacity: 1;
}

#lower_fold {
  font-family: Poppins; font-size: 1em;
}

#mySideNav {display: none;}
#mobile-menu-button {display: none;}

#body {
  width: 1024px; 
  margin: 0 auto;
  margin-top: 140px; 
  /*
  border: 1px solid black;*/
}

#sidebar {float: right; width: 340px;}

#orange_tile {width: 500px; height: 300px; background-color: orange;}

#page-content {float: left; width: 600px;}

#product-header ul li {font-family: Poppins; font-size: 1.8em;}

#product-header {background-color: orange; width: 992px; margin: 0 auto; height: 550px;}

#product-header-left { width: 60%; float: left;}

#product-header-right {float: right;}

#product-CTA-mobile {display: none;}

#frontpage-top {width: 992px; height: 380px; margin: 0 auto;/* padding-left: 10px;*//* padding-right: 10px;*/ padding-top: 10px;}

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

#clients ul {display: inline;}

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

#desktop-logos {
  width: 200px; 
  margin: 0 auto;
}

#vsl {width: 560px; height: 515px; margin: 0 auto; box-shadow: 10px grey;}

#mobile-dropdown {display: none;}

#callback {display: none;}

.service_tile {
  width: 992px; 
  background-color: /*#00aeff*/ #eb2020;
  height: 300px;
  padding-left: 10px;
  padding-right: 10px;
  /*border: 5px solid #eb2020;*/
  /*margin-bottom: 30px;*/
  color: white;

}

#the_team img {
  width: 315px;
  border-bottom: 20px;
}

#service_image {

  width: 300px; 
  height: 200px; 
  border: 1px solid black; 
  float: left;

}

#summary_of_benefits {
  color: grey; 
  width: 600px; 
  font-family: Poppins; 
  margin-bottom: 50px; 
  float: left;
}

#video_teaser {
  width: 560px; 
  height: 315px; 
  background-color: black; 
  margin: 0 auto;
}

#lead_form {
  width: 350px; 
  height: auto; 
  font-family: Poppins; 
  float: right;
}

#service_blurb {
  float: right; 
  width: 650px; 
  height: 200px;
  color: white;
}

.CTA_button {
  width: 150px; 
  height: 50px; 
  background-color: #0fda00; 
  border-radius: 5px 5px 5px 5px;
  margin: 0 auto;
  line-height: 50px;
  color: white;
  text-align: center;
  opacity: 1;
}

}