/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/*
.service-image {
 float: right;
 padding: 2% 2%;
 max-width: 250px;
}*/

.services-hero img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 20px 0;
  display: block;
}
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 650px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  color: #222; 
  margin: 0;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; 
}
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: 0.25rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; font-weight: 500; }
h3 { font-size: 3.6rem; line-height: 1.25;  letter-spacing: -.1rem; font-weight: 500; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 4.0rem; }
  h2 { font-size: 3.6rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 2.4rem; }
  h5 { font-size: 1.8rem; }
  h6 { font-size: 1.5rem; }
}

@media (max-width: 450px) {
  h1 {font-size: 3.0rem;}
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #36454F;
  text-decoration: none;}
a:hover {
  color: #3a3476; }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: #36454F;
  border-radius: 4px;
  border: 1px solid #fff;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #1A388B;
  background-color: #fff;
  border-color: #1A388B;
  outline: 0;
  transition: 0.2s;}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color:  #C0C0C0;
  border-color: #36454F; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #36454F;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }

.nobr{
  white-space: nowrap;
}

.center {
  text-align: center;
}

.resize {
  width: 100%;
  height: auto;
}

.bisque {
  background: #ffe4c4;
}

.grey-bg {
  background: #36454F;
}

.flex {
  display: flex;
}

@media (max-width: 650px) {
  .flex {
  display: block;
}
}
.middle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.middle a{
color: #fff;
}
.general-padding {
  padding: 3% 0;
}

.responsive-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 84.1%; 
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.beside-form {
  width: calc(100% - 500px);
  float: left;
}

.screenform {
  width: 500px;
  float: left;
}

@media (max-width: 1000px) {
  .beside-form, .screenform {
  width: 100%;
  float: left;
}
}
.img-left img, .img-right img {
	width: 60%;
	height: auto;
}
@media (max-width: 800px) {
.middle{

font-size: 16px;

    }
}
@media (min-width: 550px) {
.img-right {
	float: right;
	padding-left: 2%;
}

.img-left {
	float: left;
	padding-right: 2%;
}

.img-left img, .img-right img {
	width: 250px;
	height: auto;
}
}
@media (max-width: 500px) {
.logo img{
width: 200px
}
.middle{
align-items: center;
text-align: center;
font-size: 16px;
    padding: 0 2% 2% 0;
    }
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header {
  font-size: 1.8rem;
}

.logo {
  display: flex;
  align-items: baseline;
}

.logo img {
  width: 100px;
  padding: 5px 0 0 0;
}

.logo h2 {
  white-space: nowrap;
  color: #36454F;
  padding-left: 8px;
}

/* Nav - added by Nihar April 29
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu{
  padding-top: 2%;
}
.logo img {
 width: 100%;
    }
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
}

.nav-menu {
  flex-grow: 2;
  padding: 0 2%;
}

@media (max-width: 650px) {
  .logo {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5%;}
  .nav-container {
    width: 100%;
    flex-direction: column;}
  .nav-logo, .nav-menu {
    text-align: center;}
}

.navbar {
	overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-content: center;
}

.navbar a {
  color: #006792;
  text-align: center;
  padding: 0.5% 2.5%;
  text-decoration: none;
  font-size: calc(10px + (15 - 10) * ((100vw - 300px) / (1600 - 300)));
  line-height: 1.7rem;
  display: block;
  white-space: nowrap;
  font-weight: 400;
}

.drop-content {
  text-overflow: clip;
}

.navbar a:hover, .dropdown:hover .dropbtn {
	color:#4f4e8b; 
}

.navbar-services {
  overflow: hidden;
  display: flex;
  padding: 2% 0;
}

.navbar-services a {
  color: #ffffff;
  text-align: center;
  padding: 1%;
  text-decoration: none;
  font-size: calc(10px + (15 - 10) * ((100vw - 300px) / (1600 - 300)));
	font-weight:600;
  display: block;
}

.navbar-services a:hover, .dropdown:hover .dropbtn {
	color:#df8821; 
}

/* Hide the link that should open and close the topnav on small screens */
.navbar .icon /*.navbar-services*/{
  display: none
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  overflow: hidden;
  padding: 0.4% 1%;
  z-index: 100;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: calc(10px + (15 - 10) * ((100vw - 300px) / (1600 - 300)));
  border: none;
  outline: none;
  color: #ffffff;
  background-color: inherit;
  font-family: inherit;
  font-weight: 600;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #36454F;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  word-wrap: normal;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #ffffff;
  padding: 4%;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: #000000;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
  .navbar a, .dropdown .dropbtn {
    display: none;
  }
  .navbar a.icon {
    display: block;
    font-size: 2.5rem;
    padding-bottom: 10%;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
  .navbar {
    justify-content: center;
  }
  .navbar.responsive {
    position: relative;
    display: block;
    padding-top: 50px;
  }
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 2.5rem;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: center;
    font-size: 16px;
  }
  .navbar.responsive .dropdown {float: none;}
  .navbar.responsive .dropdown-content {position: relative;}
  .navbar.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 16px;
  }
  .dropdown-content a {
    padding: 1%;
  }
  
  .dropdown:hover .dropdown-content {
    display: none;
  }
}

.contact {
  background-color: #fff;
  color: #000;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  padding: 1% 0;
}
.contact a{
  color: #000;
  text-decoration: none;
}
.contact a:hover{
  color: #2999D3;
}
@media (max-width: 500px){
  .contact {
    font-size: 1.5rem;}
}
.appt-header {
  flex-grow: 1;
}  
.appt-header button{
  background-color: #36454F;
  color: #fff;
  font-size: 2.5vmin;
  font-weight: 500;
  white-space: normal;
  line-height: normal;
  border: none;
  height: auto;
  padding: 2% 4%;
  text-transform: none;
  float: right;
}
  

/* Index - Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero-container {
  width: 100%;
  height: 500px;
  background-image: url("file://///OFFICEMONKEY/www/images/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-content{
  text-align: left;
  color: #1A388B;
  text-shadow: 2px 2px 5px white;
  top: 10%;
  left: 15%;
}
@media (max-width: 1200px) {
  .hero-content {
    top: 10%;
    left: 5%;}
}
@media (max-width: 800px) {
  .hero-container{
    height: 450px;
  }
}
@media (max-width: 500px){
  .hero-container {
    height: 250px;}
  .hero-content {
    visibility: hidden;}
}

/* Index- CTA
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.cta {
  display: flex;
  justify-content: space-around;
}

.cta div {
  width: 30%;
  text-align: center;
  background-image: linear-gradient(to top right, #3a3476, #36454F );
  color: #ffffff;
  padding: 3% 0;
  border-radius: 25px;
}

@media (max-width: 650px) {
  .cta {
  display: block;
}

.cta div {
  width: 100%;
  }
}
.cta div a {
  color: #ffffff;
  font-size: 2.0rem;
}

.cta div a:hover {
  color: #333333;
}

.cta-container {
  margin-bottom: 2%;
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(51,77,161,1) 0%, rgba(93,177,223,1) 100%);
  border-bottom-left-radius: 200px;
  border-bottom-right-radius: 200px;
}

.cta-content{
  padding: 4%;
  color: #fff;
  text-align: center;
  font-size: 2.5rem;
}
.cta-content a{
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.cta-content a:hover {
  color: #000;
  transition: 0.2s;
}

@media (max-width:780px) {
  .cta-content {
    font-size: 1.7rem;}
}

@media (max-width: 500px) {
  .cta-container {
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
    }
  .cta-content {
    font-size: 2.0rem;}
}


/* Box
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.box {
  margin-bottom: 0;
  position: relative;
}
.box-content {
  border: 2px solid #2999D3;
  border-radius: 25px;
  position: absolute;
  padding: 2%;
  text-align:center;
}
@media (max-width: 500px) {
  .box-content{
    border: none;}
}

.box-content-whitening {
  border: 2px solid #2999D3;
  border-radius: 25px;
  position: absolute;
  padding: 2%;
  text-align: center;
}

@media (max-width: 500px) {
  .box-content-whitening{
    border: none;
    text-align: right;}
}

/* Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro-content {
  font-size: 2.0rem;
}
@media (max-width: 500px) {
  .intro-content{
    font-size: 1.7rem;}
}

.main-content {
  padding: 2% 0;
}
.main-content h1{
  font-size: 3.0rem; color: #36454F;
}
  }
.main-content h2, h3, h4{
  font-size: 2.0rem; color: #36454F;
}
.main-content li{
  list-style-type: disc;
  list-style-position: inside;
}
.main-content a{
  font-weight: bold;
  color: #2999D3;
}
.main-content a:hover{
  color: #1A388B;
}
@media (max-width: 500px){
  .main-content {
    padding: 2% 5%;
  }
}

.services-image {
  max-width: 250px;
  float: right;
  margin-left: 2%;
}
@media (max-width: 500px){
  .services-image {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

.form {
  border: 2px solid #2999D3;
  border-radius: 25px;
  padding: 2%;
}

.alert {
  padding: 10px;
  background-color: #E41616;
  color: #FFF;
  text-align: center;
  font-size: 14pt;
}

.alert a {
  color: #ffffff;
}


.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.closebtn:hover {
  color: black;
}

.thankyou h1 {
	color:#36454F;
	font-weight:600;
}

/* Sidebar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sidebar {
	padding: 2% 0;
	text-align:center;
	font-size:1.6rem;
	color:#fff;
}	

.sidebar ul{
	margin-top:0;
	list-style:none;
	padding-inline-start: 0px;
}

.sidebar li{
	background-color: #424174;
	color:#fff;
	margin-bottom:2%;
	padding: 5px 5px;
}

.sidebar li:hover{
	filter: brightness(120%);
	color:#fff;
}

.sidebar a {
  display: block;
  text-decoration:none;
  color:#fff;
}

.sidebar a:hover {
	color: #fff;
 }
 
.sidebar h1 {
	color:#006b91;
}

/* Index - Teeth Whitening Promo
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.whitening-container {
  width: 100%;
  height: 500px;
  background-image: url("file://///OFFICEMONKEY/www/images/hero-whitening.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.whitening-content{
  text-align: center;
  color: #1A388B;
  font-size: 1.8rem;
  text-shadow: 2px 2px 5px white;
  top: 35%;
  left: 65%;
}

@media (max-width: 950px) {
  .whitening-content {
    left: 45%;}
}
@media (max-width: 500px) {
  .whitening-container {
    height: 300px;}
  .whitening-content {
    top: 15%;
    left: 0%;
    text-align: right;
    color: #fff;
    text-shadow: 2px 2px 5px black;}
  .whitening-content a{
    text-shadow: none;}
  .whitening-content h3{
    font-size: 2.5rem;}
}
@media (max-width: 400px) {
  .whitening-content {
    left: 0%;
  }
}

/* Index - Services
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.services {
  text-align: center;
  font-size: 1.8rem;
}
.services h4 {
  color: #1A388B;
}
.services img{
  border-radius: 10%;
  max-width: 200px;
  max-height: 100px;
  margin: 2% 0;
}

.services-button {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  margin: 2% 0;
  color: #fff;
  border-radius: 20px;
  background-image: linear-gradient(to right, #334DA1 0%, #5DB1DF 51%, #334DA1 100%);
  transition: 0.5s;
  background-size: 200% auto;
}
.services-button:hover {
  background-position: right center;
}


.services2 {
	background: #36454F; /* For browsers that do not support gradients */
   /* background: linear-gradient(#36454F, #22b7ec); Standard syntax (must be last) */
	padding:2% 1%;
	font-size:1.5rem;
}

.services2 a{
	color:#fff;
	text-decoration:none;
}

.services2 a:hover {
  color: #222282; }

/*.services2 ul{
	list-style-image:url(../images/logo.png);
}/*

.services-images {
	width:30%;
	float:right;
	margin-left: 1%;
	text-align:right;
}
/*
@media (max-width: 550px) {
.services-images {
	width: 100%;
}
}
*/
/* Google Map
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.map{  
  margin: -1% 0;
  padding: 0;
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
    background-color: #748191;
  color: #fff;
  padding: 2% 0;
}
.footer a{
  color: #fff;
  text-decoration: none;
}
.footer a:hover{
  color: #000;
  transition: 0.2s;
}
.footer ul{
  list-style-type:none;
  line-height: 1.6rem;
  padding-top: 2%;
}
.footer td{
  border-bottom: none;
  padding: 2px 10px 2px 0px;
}

.footer-table {
  line-height: 1.4;
}

.footer-logo{
 
  width: 100%;
}

.footer2 {
  background-color: #fff;
  color: #000;
  font-size: 1.2rem;
  padding: 1% 0 1%;
}

.uponline{
  text-align:right;
}
.uponline img{
  max-width:80px;
}
.footer-logo {
    width: 100%;}
@media (max-width: 780px){
  .footer-logo {
    max-width: 300px;}
  .footer {
    font-size: 1.6rem;}
}
@media (max-width: 450px){
  .footer {
    text-align: center;}
  .footer-table {
    margin-left: auto;
    margin-right: auto;}
  .footer2, .uponline {
    text-align: center;
  }
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

/* Landing Page
----------------------------------------------------- */
.lp-sidebar {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
	border: 2px solid #36454F;
  border-radius: 15px;
	padding:1%;
	text-align:center;
  float: right;
  margin-left: 2%;
  width: 35%;
}

.lp-sidebar input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
	color:#333;
}

.main-lp{
  width:65%;
	float:left;}

.main-lp h1{
	color: #36454F;
  font-size: 3.8rem;
	font-weight: 600;
}
.main-lp a {
  font-weight: bold;
  text-decoration: none;
}
		
.bio-lp{
	padding:2%;
	background-color: #36454F;
}

.bio-lp h1{
	color:#ffffff;
	font-weight: 600;
}
.bio-lp p {
	color:#fff;
}
	
@media screen and (max-width:2000px){
	.main-lp{
		width: 58%;
	}}
	
@media screen and (max-width:1310px){
	.main-lp{
		width:55%;
	}}	
	
@media screen and (max-width:1216px){
	.lp-sidebar{
		width:40%;
	}}		

@media screen and (max-width:770px){
	.lp-sidebar {
		width:100%;
		position:relative;
		padding:0;
	}
	.main-lp {
		width:100%;
        padding-top: 2%;}}

@media (max-width:650px){
.right-lp{
	width:100%;
	text-align:center;
	margin-left:0;
}
.left-lp{
	width:100%;
	text-align:center;
	margin-right:0;}
}