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


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  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: 550px) {
  .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.7em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #515d6d; }
@media (max-width: 1250px){
  body {
    font-size: 1.5em;
  }
}
@media (max-width: 500px){
  body {
    font-size: 1.7em;
  }
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 400; 
  color: #61daff;}
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem; font-weight: bold; }
h2 { font-size: 3.4rem; line-height: 1.25; letter-spacing: -.1rem; font-weight: 600; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem;font-weight: 500; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem;font-weight: 400; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; font-weight: 300; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 4.5rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}
p {
  margin-top: 0; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #515d6d;
  text-decoration: none;}
a:hover {
  color: #61daff;
  
}

/* 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: #515D6D;
  border-radius: 4px;
  border: 1px solid #bbb;
  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: #5fbed9;;
  border-color: #888;
  outline: 0; }
.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: #1EAEDB;
  border-color: #1EAEDB; }


/* 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 #61daff;
  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 #33C3F0;
  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: 2px 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; }
@media (max-width: 768px ){
 td {
  padding: 2px 4px;   

}
}
/* 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; }
.resize{
  width: 100%;
}
.content-padding {
  padding: 2%;
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1;
  width: 100%;}


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

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

/* Top Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.top-header{
 width: 100%;
 background-color: #fff;
 padding: 1% 0;
 font-weight: bold;
 border-bottom: 5px solid #61daff; 
 font-size: 1.6rem;
 
 }
.top-header a{
 color: #61daff;
 }
.top-header a:hover{
 color: #38424f;
 transition: 0.3s;   
}
.top-header-container{
 display: flex;
 text-align: center;
 align-items: center;
}
.top-header-logo img {
 width: 100%;
 padding-top: 2%;
}
.top-header-address{
 flex-grow: 1;
 padding: 0.2%;
}
.top-header-phone, .top-header-email{
 flex-grow: 1;
 padding: 0.2%;
}
.top-header-address, .top-header-phone, .top-header-email{
 text-align: center;
 padding: 0.2%;
}

@media (max-width: 1024px) {
.top-header{
 font-size: 1.2rem;
 }
 .top-header-logo img {
 width: 200px;
 }
 }
@media (max-width: 800px) {
 .top-header{
 font-size: 1.5rem;
 }
 .top-header-logo img {
 width: 350px;
 }

.top-header-container {
 display: block;
 align-items: center;
}
}
@media (max-width: 650px){
 .top-header{
  font-size: 1rem;
 }
}

@media (max-width: 500px){
 .top-header{
 font-size: 1.5rem;
 }
 .top-header-container{
 display: block;
 text-align: center;
 }
 .top-header-logo img {
 width: 250px;
 }
 }
/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.nav-container{
 background: linear-gradient(rgba(255,255,255,1) 0%, rgba(104,104,104,0.1%) 100%);
 width: 100%;
 padding: 10px 0;
 }
.nav {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 transition: opacity 2s;
 padding: 0 0;
 
 }
.nav i{
 padding-right: 2%;
 width: 200px;
 }
.socials {
 display: flex;
 align-items: center;
}
.social-icon {
 display: inline-flex;
 width: 50px;
 height: 50px;
 background-color: #61daff;
 border-radius: 50%;
 margin-right: 10px;
 text-align: center;
 line-height: 40px;
 align-items: center;
 justify-content: center;
 text-decoration: none;
}
.social-icon i {
 color: #61daff;
 font-size: 30px;
}
.social-icon:hover {
 background-color: #515d6d;
}
.topnav {
 display: flex;
 flex-direction: row;
 align-items: center;
 text-align: center;
 padding: 0;
 justify-content: flex-end;
 width: 80%;
}
.topnav > li {
 color: #fff;
 list-style: none;
 font-size: 2rem;
 margin-right: 20px;
 
}

.topnav a {
 display: block;
 color: #515d6d;
 margin: 0 0.5rem;
 font-weight: normal;
 background-color: #fff;
 border-radius: 40px;
 padding: 0px 10px 0px 10px;
 text-decoration: none;
 border-bottom: 2px solid transparent;
}
.topnav a:hover{
 color: #61daff;
 
}
.burger-menu {
 display: none; /* Hide the burger menu by default */
}

@media screen and (max-width: 1920px) {
.cta-container {
/*margin-top: 21%;*/
height: 80px;
}
/*.nav {
padding: 2% 0;        
}*/
.social-icon {
display: inline-flex;
}
.social-icon i {
font-size: 30px;
}
}
@media screen and (max-width: 1440px) {
/*.nav {
padding: 4% 0;
} */
.social-icon i {
font-size: 30px;
}
 .socials {
margin-top: -20px;
 }
.topnav >li {
 font-size: 1.6rem;
}
.topnav {
 width: 83%
}
}   
@media (max-width: 1200px) {
.topnav > li {
 font-size: 1.2rem;
 }
.social-icon i {
 font-size: 30px;
}
.topnav {
 width: 83%;
}
}
@media screen and (max-width: 1024px) {
.socials {
 margin-right: 0; /* Remove the right margin for social icons on smaller screens */
 margin-bottom: 10px; /* Add some spacing between social icons and navigation */
 }
.topnav > li {
 font-size: 1.2rem;
}
.social-icon i {
font-size: 20px;
}
.nav {
padding: 2% 0;
}
}
@media (max-width: 1000px) {
.topnav > li {
 font-size: 1.6rem;
}   
.topnav {
 width: 75%;
 }
} 

@media (max-width: 800px) {
.nav {
 display: flex;
 flex-wrap: wrap;
 padding: 0 0;
 align-items: flex-end;
}
.nav img {
 max-width: 100px;
 margin-left: 0;
}
.nav a:hover {
 color: #61daff;
 }
.topnav {
 display: none;
 text-align: center;
 order: 99;
 width: 95%;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 100;
 padding: 1rem;
 margin-bottom: -290px;
 background: #61daff;
 }
.topnav li {
 margin: 1.5rem 0;
 }
 .topnav a {
 color: #38424f;
 }
.burger-menu {
 display: block; /* Display the burger menu for smaller screens */
 padding-top: 2%;
 }
.burger-icon {
 display: flex;
 flex-direction: column;
 cursor: pointer;
 align-items: end;
}
.bar {
 display: block;
 width: 25px;
 height: 3px;
 margin: 4px 0;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 background-color: #61daff;
}
.socials {
  margin-top: 0px;
    }
 .hamburger {
  display: block;
  cursor: pointer;
  }
  .hamburger.active .bar:nth-child(2) {
   opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
   transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
   transform: translateY(-8px) rotate(-45deg);
  }
 }
@media (max-width: 768px) {
.topnav {
  display: none; /* Hide the navigation links by default on smaller screens */
  }
.nav {
 flex-wrap: wrap;
 padding: 0 0;
 align-items: center;
 }
.socials {
 margin-top: 16px;
 }
}
@media (max-width: 650px) {
.nav-container{
 padding-top: 0%;
 }
 }
@media (max-width: 500px) {
.nav-container{
 padding-top: 0;
 }
.topnav{
 text-align: center;
 margin-bottom: -200px;
 }
.topnav li {
 margin: 0.5rem 0;
 }
.socials {
 padding-top: 6%;
 margin-right: 50%;
 }
.banner-text{
 padding: 9% 10%;
 }
}
@media (max-width: 400px) {
    .socials {
        padding-top: 0%;
    }
}
@media (max-width: 330px) {
.nav-container{
 padding-top: 0%;
 }
 .banner-text h2 {
 font-size: 1.8rem;
}
.banner-cta {
 font-size: 1.2rem;
}
    
.socials {
 margin-right: 30%;
    }
.nav {
align-items: center;
  }
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero {
 background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://www.allistonvillagedental.com/images/office1.jpg");
 background-size: cover;
 max-height: 700px;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: -1;
}
.banner-text {
 padding: 4% 22%;
 text-shadow: 2px 2px 4px #000000;
}
.banner-text:hover{
 color: #515d6d;
}
.banner-text h2{
 color: #fff;
 font-size: 5rem;
 }
.banner-title {
 color: #61daff;
}
.banner-cta {
 background-color: #38424f;
 border-radius: 40px;
 padding: 10px 30px 10px 30px;
 color: #61daff;
 font-weight: 600;
}
.banner-cta:hover{
 color: #fff;
}


@media (max-width: 2000px){
.hero {
max-height: 900px;
}
.banner-text {
 padding: 10% 20%;
}
}
@media (max-width: 1920px){
.banner-text {
 padding: 9% 14%;
}
.hero {
max-height: 800px;
}
}
@media (max-width: 1440px){
.banner-text {
 padding: 9% 9%;
}
.hero {
max-height: 700px;
}
}
@media screen and (max-width: 1350px){
.banner-text {
 padding: 12% 9%;
}
}
@media screen and (max-width: 1300px){
.banner-text {
 padding: 14% 9%;
}
}
@media screen and (max-width: 1200px){
.banner-text {
 padding: 16% 9%;
}
.hero {
max-height: 800px;
}
}
@media (max-width: 1100px){
.hero {
 max-height: 600px;
 }
.banner-text {
 padding: 10% 9%;
}
}
@media (max-width: 1024px){
.banner-text {
 padding: 10% 10%;
}
.hero {
max-height: 600px;
}
}

@media (max-width: 900px){
.hero {
 max-height: 500px;
}
.banner-text h2{
 font-size: 4rem;
}
.banner-text {
 padding: 10% 10%;
} 
}
@media (max-width: 800px) {
 .banner-text {
  padding: 6% 10%;
 }
}
@media (max-width: 768px){
.banner-text h2{
 font-size: 4rem;
}
.banner-text {
 padding: 11% 10%;   
}
.banner-text h2 {
 font-size: 3.5rem;
}
}
@media (max-width: 600px){
.hero{
 top: 5%;
 }
.banner-cta{
 font-size: 1.2rem;
 }
.banner-text h2 {
 font-size: 2.2rem;} 
}

@media (max-width: 500px){
.banner-text {
 padding: 7% 10%;
 }
.hero {
 max-height: 500px;
 }
.banner-cta{
 font-size: 1.2rem;
 }
.banner-text h2{
 font-size: 2.2rem;
}
}
@media (max-width: 425px){
.banner-text {
 padding: 11% 10%;
}
}
@media (max-width: 320px){
.banner-text {
 padding: 3% 10%;
}
.banner-cta {
 font-size: 1.2rem;
}
}
/* CTA
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cta-container{
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 position: relative;
 margin-bottom: 1%;
 background-color: #515d6d;
 height: 80px;
}
.cta-contact{
 display: flex;
 width: 400px;
 /*padding: 2%;*/
 color: #fff;
 align-items: center;
 }
.cta-appt{
 display: flex;
 width: 400px;
 
 align-items: center;
 color: #fff;
}
.contact-label {
 color: #fff;
}
.phone-number {
 color: #61daff;
}
.circle {
 width: 30px; 
 height: 30px;
 background-color: #61daff;
 border-radius: 50%; 
 color: #515d6d;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-left: 10px;
 }
.divider {
 width: 2px; /* Width of the white line */
 background-color: white; /* Color of the white line */
 position: absolute; /* Absolute positioning */
 top: 0;
 bottom: 0;
 left: 50%; /* Position it in the middle of the container */
 transform: translateX(-50%); /* Center it horizontally */
}
.cta-appt a, .cta-contact a{
 display: flex;
 align-items: center;
 color: #fff;
 font-size: 2.5rem;
}
.cta-appt:hover, .cta-contact:hover{  
 -ms-transform: scale(1.1); /* IE 9 */
 -webkit-transform: scale(1.1); /* Safari 3-8 */
 transform: scale(1.1); 
 transition: 0.3s;
}

.cta-text{
  /*text-align: left;
  margin-right: 10px; */
 display: flex;
 align-items: center; 
}

@media (max-width: 1920px){
.cta-appt, .cta-contact {
 
 }
.cta-appt a, .cta-contact a{
 font-size: 2.4rem;
 }
}
@media (max-width: 1440px){
.cta-appt a, .cta-contact a {
 font-size: 2.4rem;
}
}
@media (max-width: 900px){
.cta-appt, .cta-contact {
 width: 350px;
 }
}
@media (max-width: 800px){
.divider {
 width: 2px; 
 height: auto; 
 background-color: white; 
 position: absolute; 
 top: 0;
 bottom: 0;
 left: 50%; /* Position it in the middle of the container horizontally */
 transform: translateX(-50%); /* Center it horizontally */
 }
.cta-appt, .cta-contact {
 width: 300px;
 padding: 0;
}
.cta-appt a, .cta-contact a {
 font-size: 1.8rem;
 }
}
@media (max-width: 650px){
.cta-appt, .cta-contact {
 width: 200px;
 }
.cta-icon{
 width: 30px;
 height: 30px;
 }
.cta-container{
 display: flex;
 flex-direction: column;
 text-align: center;
 
 margin-top: 0%;
}
.cta-appt, .cta-contact {
 width: 300px;
 }
.divider {
 display: block; 
 width: 100%; 
 height: 2px; /* Height of the horizontal line */
 background-color: white; /* Color of the horizontal line */
 position: absolute; /* Absolute positioning */
 top: 50%; /* Position it in the middle of the container vertically */
 left: 0;
 transform: translateY(-50%); /* Center it vertically */
 }
}  

@media (max-width: 600px){
.banner-text {
 padding: 22% 10%;
}

}
@media screen and (max-width: 520px){

.banner-text {
 padding: 6% 10%;
}
}
@media screen and (max-width: 500px){
.cta-container{
 display: flex;
 flex-direction: column;
 text-align: center;
 height: 100px;
 margin-top: 0%;
} 
.banner-text {
 padding: 14% 10%;
}
.banner-text h2 {
 font-size: 2.2rem;} 
.cta-appt, .cta-contact {
 width: 300px;
 padding-left: 0;
 }
.divider {
 display: block; 
 width: 100%; 
 height: 2px; 
 background-color: white; 
 position: absolute; 
 top: 50%; 
 left: 0;
 transform: translateY(-50%); 
 }
}
@media screen and (max-width: 400px){
.cta-text {
 font-size: 1.8rem;
}
}
@media (max-width: 320px){
.cta-text {
 font-size: 1.2rem;
}
.banner-cta{
 font-size: 1.2rem;
 }
.cta-appt, .cta-contact {
 padding-left: 20px;
}
}
/* Index
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro {
 background-color: #515d6d;
 color: #fff;
 padding: 40px 0 40px 0;
}
.intro h1{
 text-align: left;
 padding-top: 2%;
}
.intro a{
 color: #fff;
}
.intro a:hover{
 color: #61daff;
}
.intro p{
 font-size: 2rem;
 }
.intro-image{
 max-width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;    
 }
.intro-image img {
 padding-top: 0;
 }

.intro-cta {
 background-color: #fff; 
 border-radius: 30px; 
 display: inline-block;
 padding: 10px 20px; 
 color: #515d6d;
 margin-top: 2%;
}
.text-container-below {
  display: none;
}
.intro.content-padding .container {
  display: flex;
  flex-direction: column;
}

.row.content-padding {
  display: flex;
  flex-direction: column;
}

.intro-image {
  text-align: center;
  margin-top: 20px; /* Add some space between images */
}
.intro.content-padding .container {
  display: flex;
  flex-direction: column;
}

.row.content-padding {
  display: flex;
  flex-direction: column;
}

.intro-image {
  text-align: center;
  margin-top: 20px; /* Add some space between images */
}

@media (max-width: 1920px){
.intro h1{
 font-size: 6rem;
}
.intro p{
 font-size: 1.5rem;
}
.intro a{
 font-size: 1.5rem;   
}
.intro-image{
 max-width: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;    
 }
.index-image {
 max-width: 100%; 
 width: 400px;
}
.intro-cta {
 background-color: #fff; 
 border-radius: 30px; 
 display: flex;
 padding: 10px 20px; 
 color: #515d6d;
 margin-top: 2%;
}    
}
@media (max-width: 1440px){
.intro h1{
 font-size: 5rem;
}
.intro p{
 font-size: 2rem;
}
.intro a{
 font-size: 1.5rem;   
 }
.intro-image {
 max-width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}
.intro-image img {
 max-width: 100%;
 width: 300px;/* Ensure the image does not exceed its container's width */
}
.index-image {
 max-width: 100%; 
}
.intro-cta {
 background-color: #fff; 
 border-radius: 30px; 
 display: flex;
 padding: 10px 20px; 
 color: #515d6d;
 margin-top: 10px;

}    
}
@media (min-width: 1024px) {
.intro-image {
 display: flex;
 flex-direction: column; /* Change to row for larger screens */
 justify-content: center; /* Center items horizontally */
 align-items: center; /* Center items vertically */
 gap: 20px; 
 }
.intro-image img {
  max-width: 100%; 
  }
.intro-cta {
 margin-top: 10px; 
 text-align: center;
 }
}
@media (max-width: 1024px) {
.intro-image {
 display: flex;
 flex-direction: column; 
 align-items: center; 
    }
.intro p {
 font-size: 1.4rem;
}
.intro-image img {
 max-width: 100%;
 width: 300px;
}
.intro-cta {
 margin-top: 10px; 
 text-align: center;
 
 }
.dentists {
 margin-left: 20px;
    }
}
@media (max-width: 800px){
.intro-image {
 display: block;
 flex-direction: column;
 align-items: center;
 }
.intro h1 {
 font-size: 4.5rem;
 text-align: left;
 }
.intro-image img {
 padding-top: 0%;
 width: 200px;
}
.intro {
   padding: 10px 0 10px 0; 
   }
 
}
@media (min-width: 768px) {
  .row.content-padding {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }
}
@media (min-width: 768px) {
  .row.content-padding {
    flex-direction: row-reverse; 
    justify-content: center;
    align-items: flex-start;
  }
  .dentists {
  margin-left: 20px;
  }
   .intro-image {
    text-align: right;
   } 
}


@media (max-width: 500px){
 .intro {
  flex-direction: column;  
 }
.intro-image {
 display: flex;
 flex-direction: column;
 align-items: center;
}
.intro-image img {
padding-top: 0;
 
 }
.intro h1 {

 font-size: 4rem;
 }
.intro-cta {
 padding: 4px 20px; 
}    
.index-services-item img{
 width: 150px;
 padding-bottom: 5%;
}
}
/* Services
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.dental-services-index {
 color: #515d6d;
}
.index-intro-image{
 border-radius: 40px 40px 0 0;
 /*margin-left: 8%;
 padding-left: 2%;*/
 }
 .intro-image img {
  padding-top: 0%;
  width: 200px;
  
}
.intro-cta p{
 font-size: 1.7rem;
}
.intro-text {
 padding: 0 2%;
 font-size: 1.6rem;
 line-height: 2;
}
.intro-text h2{
 font-size: 5rem;
}
.intro-text p{
 font-size: 2rem;
}
.index-services-item li{
 font-size: 3.5rem;
 margin-bottom: 0;
 color: #61daff;
}
.index-services-item li:hover{
 color: #515d6d;
 transition: 0.2s;
}

.index-services-item:hover{
 color: #fff;
 -ms-transform: scale(1.1); /* IE 9 */
 -webkit-transform: scale(1.1); /* Safari 3-8 */
 transform: scale(1.1); 
 transition: 0.3s;
}
.learn-more-container {
 display: inline-flex; 
 align-items: center; 
}
 .learn-more {
   font-size: 2.5rem;
}
.learn-more:hover {
 color: #61daff; /* Hover color for "LEARN MORE" text */
 transition: 0.3s;
}

.circle1 {
 display: inline-block;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: #61daff;
 color: #515d6d;
 text-align: center;
 line-height: 20px; /* Centers the content vertically */
 margin-left: 5px; /* Adjust as needed for spacing */
}
.circle1:hover {
 background-color: #fff; /* Hover color for circle */
}
@media screen and (max-width: 1920px) {
.index-intro-image {
 margin-left: 4%;
}
 .intro-text {
  padding: 0 2%;
  line-height: 1.2;
 }
.intro-text h2{
 font-size: 6rem;
 line-height: 5.5rem;
  }
.intro p {
 font-size: 2rem;
 }
.intro-text p{
 font-size: 2rem;
 padding-top: 4px;
 }
.index-services-container {
 line-height: 4rem;
 padding-top: 6px;
}
.index-services-item li{
 font-size: 3rem;
}
.learn-more{
 font-size: 2.5rem;
 }
}
@media screen and (max-width: 1440px) {
.index-intro-image {
 margin-left:0%;
}
.intro-text {
 padding: 0 2%; 
 }
.intro-text h2{
 font-size: 5rem;
}
.intro-text p{
 font-size: 2rem;
 }
.index-services-container {
 line-height: 5rem;
}
.index-services-item li{
 font-size: 3.5rem;
}
}

@media screen and (max-width: 1100px) {
.intro-text h2 {
 font-size: 4rem;
}
.intro-text p {
 font-size: 2rem;
 }
.index-services-container {
  line-height: 4rem;
}
.index-services-item li {
    font-size: 3rem;
}
.index-intro-image {
  margin-left: 0%;
}
.intro-text {
line-height: 1.5;
 }
}
    
@media screen and (max-width: 1024px) {
/*.intro-text {
 padding: 0 4%; 
 margin-left: 4rem;
}*/
.intro-text h2{
 font-size: 3rem;
 line-height: 4rem;
}
.intro-text p{
 font-size: 1.6rem;
 }
.index-services-item li {
 font-size: 2.5rem;
 }
.index-services-container {
 line-height: 3.5rem;
}
}
@media screen and (max-width: 900px) {
.intro p {
 font-size: 1.2rem;
}
.learn-more {
 font-size: 1.8rem;
}
.intro-cta p{
font-size: 1.2rem;
  }
.intro-text h2{
 font-size: 3.2rem;
 line-height: 3rem;
}
.intro-text p{
 font-size: 1.6rem;
 }
.index-services-item li {
 font-size: 2rem;
 }
.index-services-container {
 line-height: 3rem;
}

.office {
    height: 450px;
}
}

@media screen and (max-width: 768px) {
.index-intro-image {
 padding-top:2%;
 margin-left: 0%;
}
.intro-text {
 padding: 0 2.5%; 
}
.intro-text p {
  font-size: 1.4rem;
  
}
    .intro p {
    font-size: 1.4rem;
}
.intro-text h2{
 font-size:  3rem;
 line-height: 3rem;  
}
.index-services-container {
 line-height: 2.4rem;
}
.index-services-item li {
    font-size: 2rem;
}
}

@media (max-width: 780px) {
.intro-text h2 {
 font-size: 3rem;
}
.intro-text p {
 font-size: 2rem;
 }
.index-services-container {
  line-height: 4rem;
}
.index-services-item li {
    font-size: 3rem;
}
.index-intro-image {
 margin-left: 0%;
}
.intro-text {
line-height: 1.5;
 }
.intro-text h2{
 font-size: 3rem;
}
.intro-text p{
 font-size: 1.4rem;
 }
.index-services-item li {
 font-size: 2rem;
 }
.index-services-container {
 line-height: 2.5rem;
}
.hero {
max-height: 580px;
  }
}
@media (max-width: 500px){
.index-intro-image{
 border-radius: 30px 30px 0 0;
 display: block;
 margin: 0 auto;
 margin-bottom: 5%;
}
.intro-text {
 margin-left: 1rem;
 padding: 0;
}
.learn-more {
  font-size: 2rem;
  }
.hero {
max-height: 500px;
  }
.index-intro-image {
padding-left: 0;
}
.intro-text p {
  font-size: 1.6rem;
}
.intro p {
 font-size: 1.6rem;
}
    .dentists {
padding: 0 0.5%
    }
}
@media (max-width: 425px){
.index-services-item li {
 font-size: 2rem;
 }
  
.hero {
 max-height: 450px;
    }
}
@media (max-width: 320px) {
.intro p {
font-size: 1.4rem;
 }
}
/* Our Office - Homepage
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.office {
 background-image: url("../images/alliston-office-1920.jpg");
 
 height: 400px;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 overflow: hidden;
 display: flex; 
 justify-content: center; /* Center horizontally */
 align-items: center; /* Center vertically */
 }
.office-container {
 position: relative; 
 width: 80%; 
 z-index: 3;
 justify-content: center;
 align-items: center;
 display: flex; 
 }
.office-content{
 text-align: center;
 z-index: 2; 
 text-wrap:balance;
 width: 75%;
}
.office h4 {
 font-weight: normal;
 font-size: 2.5rem;
}
.office::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(78, 85, 96, 0.7); /* Adjust color and opacity as needed */
 z-index: 1; /* Ensure the overlay is above the image */
}
.office-text-box {
 background-color: #fff;
 border-radius: 40px;
 padding: 5%;
 display: inline-block; /* Ensure inline-block for centering */
 }
.office img {
 position: relative; 
 display: block;
 width: 100%;
 height: auto;
 }
.office-text {
 background-color: #fff;
 border-radius: 40px;
 font-size: 2.5rem; 
 text-wrap: wrap;
 line-height: 1.2;
}
.office-text p{
 color: #515d6d;
 text-wrap: wrap;
 font-size: 2rem;
}
.learn {
  margin: 10px 0;
  background-color: #61daff;
  color: #38424f;
  border-radius: 40px;
  padding: 10px 40px 10px 40px;
  text-decoration: none;
}
.learn:hover {
 color: #fff; /* Hover color for "LEARN MORE" text */
 transition: 0.3s;
}
@media (max-width: 1920px){
.office {
 height: 400px;
}
.office h4 {
 font-size: 2rem;
}
.office-text {
 font-size: 2.5rem; 
 text-wrap: wrap;
 line-height: 1.2;
}
}
@media (max-width: 1440px){
.office-text {
 font-size: 2rem;
}
}
@media (max-width: 1024px){
.office h4 {
 font-size: 2rem;
}
}
@media (max-width: 800px){
.office-container {
 width: 100%;}
.intro-text {
 padding: 0 0.5%; 
 line-height: normal;
 }
.office-text {
  font-size: 1.8rem;
}
}
@media (max-width: 500px){
.office-container {
 width: 100%; }
.office-text {
 font-size: 1.6rem;
 padding: 1.5%;
}
}
@media (max-width: 320px){
.office-text {
 font-size: 1.4rem;
 }
}
/* Services Template
–––––––––––––––––––––––––––––––––––––––––––––––––– */   
.hero-services{
 background: linear-gradient(180deg, rgba(26, 48, 64, 0.6) 0%, rgba(58, 109, 146, 0.6) 100%), url("../images/alliton-dental-services-hero.png");
 background-position: center;
 background-size: cover;
 max-height: 400px;
 text-align: center;
 justify-content: center;
 padding-top: 20rem;
 padding-bottom: 4rem;
 display: flex;
 color: white;
 align-items: center;
 margin-top: -90px;
 }
.collapsibles > li {
  border-bottom: 1px solid #d3d3d3;
  padding: 0.5rem 0;
}
.collapsibles .content {
  display: block;
  margin-bottom: 0;
  padding: 0 2rem;
}
.collapsibles .content li {
  font-size: 1.5rem;
}
.collapsibles .content a, .collapsibles .content a:active, .collapsibles .content a:focus {
  color: #3072f9;
}
.collapsibles .content a:hover {
  color: var(--var-pink);
}

[class$=collapsible],
[class$="collapsible active"] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1rem;
  transition: all 0.2s;
}
[class$=collapsible] > h3,
[class$="collapsible active"] > h3 {
  font-size: 2rem;
  margin-bottom: 0;
  margin-right: auto;
}
[class$=collapsible] i,
[class$="collapsible active"] i {
  transition: transform 0.2s;
  margin-left: 1rem;
}
[class$=collapsible].active > i,
[class$="collapsible active"].active > i {
  transform: rotate(180deg);
}
[class$=collapsible]:hover,
[class$="collapsible active"]:hover {
  background-color: lightgrey;
}

.services-nav h4 {
	margin-bottom: 2.5rem;
	display: none;
	font-weight: bold;
	margin-top: 20px;
}

.services-nav h5,.services-nav-2 h5 {
	background: #515d6d;
	color: #fff;
	padding: 1rem 1.5rem;
	margin-bottom: 1rem;
    border-radius: 40px;
}

.services-nav h6 {
	margin-top: 1.5rem;
	margin-bottom: 0.7rem;
	font-size: 1.2em;
}

.services-nav h5 a:hover, .active, .collapsible-service:hover, .service-content a:hover {
	color: #61daff;
	cursor: pointer;
}

.service-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
	list-style: none;
}

.service-content li {
	border-bottom: 1px solid #61daff;
	color: #61daff;
	margin-left: 2rem;
}

.collapsible-service:before {
  content: '+'; 
  font-size: 24px;
  color: #fff;
  margin-right: 10px;
}

.services-nav .active:before {
  content: '-'; 
	font-size: 24px;
  color: #61daff;
  margin-right: 10px;
}

.services-nav {
	min-width: 200px;
}

.services-nav a {
	color: #515D6D;
}

.services-navigation {
	padding: 2rem 0 0;
}

@media only screen and (max-width: 1440px) {
 .hero-services {
  margin-top: -82px;
  
  }
  }
@media only screen and (max-width: 1024px) {
  .hero-services {
   margin-top: -109px;
  }
  }
@media only screen and (max-width: 1000px) {
    .hero-services {
        margin-top: -139px;
 }
}
@media only screen and (max-width: 900px) {
  .hero-services {
   margin-top: -136px;
  }
  }
@media only screen and (max-width: 800px) {
   .hero-services {
    margin-top: -80px;
    max-height: 400px;
   }
.services-nav h5, .services-nav-2 h5 {
    font-size: 4.5rem;
  }
 .hero-services h1{
  font-size: 3rem;
  }
  }
@media only screen and (max-width: 768px) {
   .hero-services {
    margin-top: -96px;
    max-height: 400px;
   }
    
  }
@media only screen and (max-width: 650px) {
   .hero-services {
    margin-top: -86px;
   
   }
.services-nav h5, .services-nav-2 h5 {
    font-size: 1.8rem;
  }
 .hero-services h1{
  font-size: 2rem;
  }
    .hero-services p{
font-size: 1.5rem;
    }
}
@media only screen and (max-width: 600px) {
   .hero-services {
    margin-top: -86px;
    max-height: 400px;
   }
  }
@media only screen and (max-width: 500px) {
   .hero-services {
    margin-top: -112px;
   }
  }
@media only screen and (max-width: 450px) {
   .hero-services {
    margin-top: -108px;
   }
  }
@media only screen and (max-width: 400px) {
   .hero-services {
    margin-top: -86px;
   }
  }
@media (max-width: 350px){
 .service-image {
 max-width: 300px;
 }
.hero-services h1{
 font-size: 2rem;
 }
}
/* General-Blog
–––––––––––––––––––––––––––––––––––––––––––––––––– */   
.general-blog{
 /*background: linear-gradient(180deg, rgb(164 173 179 / 60%) 0%, rgb(55 57 59 / 60%) 100%), url("../responsive/images/alliston-office.jpg"); */
 background: linear-gradient(180deg, rgba(26, 48, 64, 0.6) 0%, rgba(58, 109, 146, 0.6) 100%), url("../images/alliston-dental-blog.png");
 background-position: center;
 background-size: cover;
 max-height: 400px;
 text-align: center;
 justify-content: center;
 padding-top: 20rem;
 padding-bottom: 4rem;
 display: flex;
 color: white;
 align-items: center;
 margin-top: -90px;
 }
@media only screen and (max-width: 1440px) {
 .general-blog {
  margin-top: -82px;
 }
 }
@media only screen and (max-width: 1024px) {
  .general-blog {
   margin-top: -110px;
  }
  }
@media only screen and (max-width: 800px) {
  .general-blog {
   margin-top: -80px;
  }
  }
@media only screen and (max-width: 768px) {
  .general-blog {
   margin-top: -96px;
 }
  .general-blog h1{
  font-size: 4rem;
    }
  }
@media only screen and (max-width: 650px) {
  .general-blog {
   margin-top: -86px;
  }
   .general-blog h1{
  font-size: 3.5rem;
    }
    }
@media only screen and (max-width: 600px) {
  .general-blog {
   margin-top: -86px;
  }
  }
@media only screen and (max-width: 500px) {
   .general-blog {
    margin-top: -112px;
   }
  }

@media only screen and (max-width: 400px) {
   .general-blog {
    margin-top: -86px;
   }
  }


/* General Template
–––––––––––––––––––––––––––––––––––––––––––––––––– */   
.general{
 /*background: linear-gradient(180deg, rgb(164 173 179 / 60%) 0%, rgb(55 57 59 / 60%) 100%), url("../responsive/images/alliston-office.jpg"); */
 background: linear-gradient(180deg, rgba(26, 48, 64, 0.6) 0%, rgba(58, 109, 146, 0.6) 100%), url("../images/alliton-dental-services-hero.png");
 background-position: center;
 background-size: cover;
 max-height: 400px;
 text-align: center;
 justify-content: center;
 padding-top: 20rem;
 padding-bottom: 4rem;
 display: flex;
 color: white;
 align-items: center;
 margin-top: -90px;
 }
.general h4 {
 margin-bottom: 2.5rem;
 display: none;
 font-weight: bold;
 margin-top: 20px;
}
.general-text h6 {
 margin-top: 1.5rem;
 margin-bottom: 0.7rem;
 font-size: 1.2em;
}
.general h5 a:hover, .active, .general-content a:hover {
 color: #61daff;
 cursor: pointer;
}
.general-content {
 padding: 0 18px;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 list-style: none;
}

@media only screen and (max-width: 1440px) {
 .general {
  margin-top: -82px;
 }
 }
@media only screen and (max-width: 1024px) {
  .general {
   margin-top: -110px;
  }
  }
@media only screen and (max-width: 800px) {
  .general {
   margin-top: -80px;
   max-height: 300px;
   }
  .general h1{
  font-size: 3rem;
  }
  }
@media only screen and (max-width: 768px) {
  .general {
   margin-top: -96px;
  }
  }
@media only screen and (max-width: 650px) {
  .general {
   margin-top: -86px;
   }
   .general h1{
  font-size: 2.5rem;
  }
 .general p{
font-size: 1.5rem;
    }
  }
@media only screen and (max-width: 600px) {
  .general {
   margin-top: -86px;
}
  .general h1{
font-size: 3.5rem;
    }
  }
@media only screen and (max-width: 500px) {
   .general {
    margin-top: -96px;
   }
  }
@media only screen and (max-width: 450px) {
   .general {
    margin-top: -108px;
   }
  }
@media only screen and (max-width: 425px) {
   .general {
    margin-top: -108px;
   }
  }
@media only screen and (max-width: 400px) {
   .general {
    margin-top: -92px;
   }
  }
@media (max-width: 390px) {
   .general {
    margin-top: -86px;
   }
  }

/* Google Review - Homepage
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.google-review {
 background-color: #fff;
 display: flex; 
 justify-content: center;
 align-items: center; 
 text-align: center;
}
.google-review-img {
  background-color: transparent;
 }
.google-review-img img {
 width: 200px; 
 height: auto;
}
.google-review-content {
 background-color: #39434F;
 border-radius: 40px;
 padding: 2%;
 color: #fff;
}

.google-review-content p {
 text-wrap: balance;
 text-align: left;
 padding: 0 8%;
}
.google-review h1{
 font-size: 7rem;
 }
@media screen and (max-width: 1920px){
.google-review h1{
 font-size: 6rem;
 }
}

@media screen and (max-width: 1440px){
.google-review h1 {
 font-size: 5rem;  
} 
.google-review-content p {
 font-size: 2.5rem;
 text-wrap: wrap;
 }
 }
@media screen and (max-width: 1024px){
.google-review-img img{
 width: 200px;
 }
.google-review-content p{
 font-size: 1.8rem;
 margin-bottom: 11px;
 text-align: left;
 }
.google-review h1 {
 font-size: 4rem;
} 
}

@media screen and (max-width: 1024px){
.google-review h2 {
    font-size: 3.4rem;
    }
}
@media screen and (max-width: 500px){
.google-review-content p {
 font-size: 1.4rem;
 margin-bottom: 11px;
 padding-top: 10px;  
} 
.google-review h1{
 font-size: 3rem;
 }
.google-review-img img{
 width: 150px;
}
}
@media screen and (max-width: 320px){
 .google-review h2 {
  font-size: 2rem;
 }
}
/* New Patients Welcome
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
.new-patients {
 background-color: #fff;
 color: #515d6d;
 font-weight: 600;
 text-align: center;
 padding-top: 12px;
 
}
.new-patients h3{
 font-size: 5rem;
 }
 .new-patients a:hover{
  color: #61daff;
  transition: 0.3s;
 }
.new-patients a{
 color:#515d6d;
 }
@media screen and (max-width: 1440px){
.new-patients h3{
 font-size: 5rem;
 }
 }
@media screen and (max-width: 1024px){
.new-patients h3{
 font-size: 4rem;
 }
 }
@media screen and (max-width: 900px){
.new-patients h3{
 font-size: 3.4rem;
 }
 }

@media screen and (max-width: 500px){
.new-patients h3{
 font-size: 2rem;
 }
}
@media screen and (max-width: 500px){
.new-patients h3{
 font-size: 1.6rem;
 }
}

/* Direct Insurance Billing
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
.insurance {
 background-color: #515d6d;
 font-weight: 600;
 text-align: center;
 padding-top: 12px;
 }
.insurance a {
 color: #61daff;
 transition: 0.3s;
 }
.insurance h3{
 font-size: 5rem;
 }
.insurance a:hover {
 color: #fff;
 transition: 0.3s;
 }
 @media screen and (max-width: 1920px){
.insurance h3{
 font-size: 5rem;
 }
 }
 @media screen and (max-width: 1440px){
.insurance h3{
 font-size: 5rem;
 }
 }
@media screen and (max-width: 1200px){
.insurance h3 {
 font-size: 5rem;
    }
}
@media screen and (max-width: 1024px){
.insurance h3 {
 font-size: 4rem;
    }
}

@media screen and (max-width: 800px){
.insurance h3{
 font-size: 3.5rem;
 }
 }
@media screen and (max-width: 500px){
.insurance h3{
 font-size: 2rem;
 }
 }
@media screen and (max-width: 320px){
.insurance h3{
 font-size: 1.8rem;
 }
 }
/* Testimonial Slider
----------------------------------------------------- */
.testim{
  width: 100%;
  background-color: #39434F;
  border-radius: 40px;
    
}
.testim .wrap{
  position: relative;
  width: 100%;
  max-width: 1020px;
  margin: auto;
  height: 280px;  
}
.testim .arrow{
  display: block;
  position: absolute;
  color: #eee;
  cursor: pointer;
  font-size: 2em;
  top: 50%;
  transform: translateY(-50%);
  transition: all .3s ease-in-out;
  padding: 5px;
  z-index: 22222222;
}
.testim .arrow:before{
  cursor: pointer;
}
.testim .arrow.left{
  left: 10px;
}
.testim .arrow.right{
    right: 10px;
}
.testim .arrow:hover{
  color: #66cccc;
}
.testim .dots{
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 10px;
  left: 0;
  display: block;
  z-index: 3333;
  height: 12px;
}
.testim .dots .dot{
  list-style-type: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #eee;
  margin: 0 10px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  position: relative;
}
.testim .dots .dot.active,
.testim .dots .dot:hover{
  background: #fff;
  border-color: #fff;
}

.testim .dots .dot.active{
  animation: testim-scale .5s ease-in-out forwards;
}
.testim .cont{
  position: relative;
  overflow: hidden;
}
.testim .cont > div{
  text-align: center;
  position: absolute;
  top: 46px;
  left: 0;
  padding: 0 0 30px 0;
  opacity: 0;
}
.testim .cont > div.inactive{
  opacity: 1;
}
.testim .cont > div.active{
  position: relative;
  opacity: 1;
}
.testim .cont div .img img{
  display: block;
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
}
.testim .cont div h2{
  font-size: 2rem;
  margin: 15px 0;
}
.testim .cont div p{
  font-size: 1.15em;
  color: #eee;
  width: 80%;
  margin: auto;
}

.testim .cont div.active .img img{
  animation: testim-show .5s ease-in-out forwards;
}
.testim .cont div.active h2{
  animation: testim-content-in .4s ease-in-out forwards;
}
.testim .cont div.active p {
  animation: testim-content-in .5s ease-in-out forwards;
}
.testim .cont div.inactive .img img{
  animation: testim-hide .5s ease-in-out forwards;
}
.testim .cont div.inactive h2{
  animation: testim-content-out .4s ease-in-out forwards;
}
.testim .cont div.inactive p {
  animation: testim-content-out .5s ease-in-out forwards;
}

@keyframes testim-scale {
  0% {
    box-shadow: 0px 0px 0px 0px #eee;
  }
  35% {
    box-shadow: 0px 0px 10px 5px #eee;
  }
  70% {
    box-shadow: 0px 0px 10px 5px #66cccc;
  }
  100% {
    box-shadow: 0px 0px 0px 0px #66cccc;
  }
}

@keyframes testim-content-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes testim-content-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes testim-show {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes testim-hide {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}

/* Responsive */
@media all and (max-width: 1100px) {
  .testim .cont div p{
  font-size: 1em;
  }
}
@media all and (max-width: 500px) {
  .testim .arrow{
    font-size: 1.5rem;
  }
  .testim .cont div p{
    line-height: 25px;
  }
  .testim .wrap{
    height: 350px;
  }
}

/* Map
–––––––––––––––––––––––––––––––––––––––––––––––––– */    
.map{
 padding:0;
 background-color: #fff;
}
    
/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer{
 background-color: #ffffff;
 padding-top:2%;
 }
.footer-container {
 display: flex;
 justify-content: space-evenly;
 align-items: flex-start;
 text-align: left;
 font-size: 2rem;
  line-height: 1.2;
 }
.footer-content img {
 width: 300px;
 padding-top: 10px;
 }
.footer-content h5{
 color: #515d6d;
 font-size: 3.5rem;
 }

.footer-content a {
 text-decoration: none;
 color: #515d6d;
 font-weight: 500;
}
.footer-content a:hover {
 color: #61daff;
 transition: 0.3s;
 } 	
.footer td{
 padding: 2px 10px 2px 0px;
 text-decoration: none;
 color: #515d6d;
 font-weight: 500;
 border-bottom: none;
 line-height: 2.5
}
.footer-table {
 line-height: 3;
 }
.reviews {
 width: 200px;
 border-radius: 40px;
 }
.reviews img {
 width: 200px;
}
.footer-content.menu a {
 line-height: 2.5;
}
.footer-content h5{
 font-size: 3rem;
 display: flex; 
 align-items: center;
 }
.hr-line{
 width: 50%; 
 margin: 0; 
 border-top: 3px solid #61daff;
 margin-left: 10px;  
}
.post-footer {
 background-color: #515d6d;
 padding: 1rem 0;
 font-size: 1.2rem;
 color: #61daff;
 }
.uponline {
 text-align: right;
}
.uponline img{
  max-width:80px;
}

.post-footer span:first-child {
 margin-right: auto;
}
.post-footer_quick-links > a {
 margin: 0 1rem;
}
@media (max-width:2560px){
.footer-content.menu {
 margin-left: 14%;    
}
}

@media (max-width:1920px){
.footer-container {
 font-size: 1.8rem;
}
.footer-content.menu{
 padding: 0px 0px 0px 90px;
 }
.footer-table {
 line-height: 1.4;
 }
.footer-content.menu a {
 line-height: 2.6;
}
.footer td {
 padding: 2px 22px 2px 0px;
}
.footer-content img {
 width: 350px;
 }
}
@media (max-width:1440px){
/*.footer-container {
 font-size: 2.4rem;
}*/
.footer-content.menu{
 padding: 0px 0px 0px 70px;
 }
.footer td {
 padding: 2px 22px 2px 0px;
}
.footer-content img {
 width: 350px;
 }
}
@media (max-width:1200px){
.footer-container {
 font-size: 1.8rem;
 line-height: 1.2;
}
}
@media (max-width:1050px){
.footer-container {
 font-size: 1.7rem;
}
}
    
@media (max-width:960px){
.footer-container {
 display: flex;
 justify-content: space-evenly;
 align-items: flex-start;
 text-align: left;
 font-size: 1.4rem;
 }
.footer-content img {
 width: 200px;
 }
.footer-content a {
 text-decoration: none;
 color: #515d6d;
 font-weight: 500;
}
.footer-content h5{
 font-size: 2rem;
 display: flex; 
 align-items: center;
 }
.footer-content.menu {
 line-height: 2.7;
 }
.hr-line{
 width: 50%; 
 margin: 0; 
 border-top: 2px solid #61daff;
 margin-left: 10px;  
}
.footer-content a:hover {
 color: #61daff;
 } 	
.footer td{
 padding: 2px 10px 2px 0px;
 text-decoration: none;
 color: #515d6d;
 font-weight: 500;
 border-bottom: none;
}
.footer-content.menu a {
 line-height: 2.5;
}
.footer-table {
 line-height: 3;
  }
.reviews {
 width: 200px;
 border-radius: 40px;
 }
.footer-content {
 text-align: left;
}
.footer-content img {
 width: 300px;
 }
.footer-table {
 line-height: 2.7;
 }
.footer-content h4{
 padding-top: 15px;
 }
.reviews {
 width: 200px;
 border-radius: 40px;
 }  
} 
@media (max-width:768px){
.footer-container {
 font-size: 1.4rem;
 display: block;
 text-align: left;
 flex-direction: column;
 justify-content: center;
 }		
.footer-content {
 text-align: left;
}
.footer-content.menu {
 margin-left: 0%;}
.footer-content img {
 width: 400px;
 }
.footer-table {
 line-height: 1.5;
 }
.footer-content h4{
 padding-top: 15px;
}
.footer-content img {
 width: 250px;
 }
.footer-content.menu {
 line-height: 2.8;
 }
.reviews {
 width: 200px;
 border-radius: 40px;
 }  
.footer td {
 padding: 2px 8px 2px 0px;
}    

@media (max-width:500px){
.footer-container {
 display: block;
 text-align: left;
 flex-direction: column;
 align-content: stretch;
 justify-content: center;
 padding: 3% 3%;	
 font-size: 1.6rem;
}	
.footer-content {
 text-align: left;
}
.footer-content img {
 width: 250px;
 }
.footer-table {
 line-height: 1.5;
 }
.footer-content.menu{
 padding: 0px 0px 0px 0px;
 line-height: 2;
 }
.footer-content h5{
 padding-top: 15px;
 }
.footer td{
  line-height: 2;
 }
.footer-content.menu a {
 line-height: 1.5;
}
.reviews {
 width: 200px;
 border-radius: 40px;
 }  
 .footer2, .uponline {
 text-align: left;
  }
}
}

.service-image {
 padding: 10px;
 float: right;
 max-width: 350px;
 border-radius: 40px;
}
  
@media (max-width: 600px){
 .service-image {
  padding: 5px;
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 .hero-services h1{
 font-size: 3.5rem;
 }
}
@media (max-width: 350px){
 .service-image {
 max-width: 300px;
 }
}
@media (max-width: 200px){
 .service-image {
 max-width: 120px;
 }
.hero-services h1{
 font-size: 2rem;
 }
}


.contact-form {
    border: 2px solid #515D6D;
    border-radius: 40px;
    padding: 5%;
}
.nl-form {
    border: 1px solid #515D6D;
    border-radius: 20px;
    background-color: #fff;
    padding: 2%;
}
@media (max-width: 768px){
 .nl-form {
 margin-left: 80px;
 }    
}
 @media (max-width: 500px){
 .nl-form {
 margin-left: none;
 }    
}   
.office-images {
   border-radius: 40px;
}
@media (max-width: 768px){
 .office-images {
 width: 100%;       
    }
}
@media (max-width: 500px){
 .office-images {
 width: 100%;       
 }
}
@media (max-width: 768px){
 .newsletter h4 {
 margin-left: 80px;
 }    
}

/* Landing Page
----------------------------------------------------- */
.lp-sidebar {  
  position: -webkit-sticky;
  position: sticky;
  width: 34%;
	top: 0;
	background-color: #fff;
	padding: 2%;
	text-align:center;
	float:right;
	margin-left:1%;
  border: 1px solid #63DBFF;
  border-radius: 4px;
}
.lp-sidebar img{
	max-width:200px;
	margin-bottom:2%;
}

.lp-sidebar input[type="submit"]{
	background-color: #515D6D;
	color: #ffff;
}
.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;
}
.bio-lp{
 border: 1px solid #63DBFF;
 border-radius: 4px;
 padding:2%;
}	
.main-lp{
	width:60%;
	float:left;}
.left-lp{
	width:25%;
	float:left;
	margin-right:2%;
}

.right-lp{
	width:35%;
	float:right;
	margin-left:2%;
}


@media screen and (max-width:1724px){
	.main-lp{
		width:58%;
	}}
	
@media screen and (max-width:1635px){
	.main-lp{
		width: 56%;
	}}	
@media screen and (max-width:1555px){
	.main-lp{
		width:54%;
	}}	
	
@media screen and (max-width:1483px){
	.main-lp{
		width:52%;
	}}	
	
@media screen and (max-width:1417px){
	.lp-sidebar{
		width:40%;
	}}		

@media screen and (max-width:770px){
	.lp-sidebar {
		display: none;
		width:100%;
		position:relative;
		margin-bottom:2%;
		float:none;
		margin-left:0;

	}
	.main-lp {
		width:100%;
		float:none;}
		
    /*
  .bio-lp{
    background-color:#515D6D;
    padding:2%;
    color:#ffffff;
  }*/

  .left-lp{
    width:25%;
    float:left;
    margin-right:2%;
  }

  .right-lp{
    width:35%;
    float:right;
    margin-left:2%;
  }
}


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



/*request button
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chat-form-contact-form-page{
  height: 50px;
  width: 50px;
  display: block;
  border-radius: 50%;
  position: fixed;
  bottom: 75px;
  right: 8px;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  background: #61daff;	
}
.chat-form-show-profile{
    background: #383838;
	color: #fff;
    height: 100%;
    display: block;
    width: 336px;
    bottom: 0;
    right: 0;
    position: absolute;
    border-radius: 0;
	overflow-y: scroll;
	z-index: 99999;	
}
.chat-form-form-profile-img{
    float: left;
}
.chat-form-form-profile-img img{
    border-radius: 50%;
    margin: 20px 0 0 14px;
}
.chat-form-contact-form-page h3{
    font-size: 18px;
    color: #fff;
    margin: 20px 26px;
    padding: 0px;
    line-height: 29px;
    padding-right: 30px;
}
.chat-form-top-btn{
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    text-align: center;
}

.chat-form-header-btn, .chat-form-footer-btn a{
    font-size: 20px;
    color: #fff;
    background: #61daff;
    float: right;
}
.chat-form-form-head{
    display: block;
}
.chat-form-cancel-btn-img{
    position: relative;
}
.chat-form-footer-btn{
    position: relative;
}
.chat-form-buttom-btn{
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: #383838;
    color: #fff;
    padding: 21px;
    text-align: center;
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    opacity: 1;
}
.chat-form-buttom-btn i{
    font-size: 30px;
}
.chat-form-buttom-btn:hover{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    background: #61daff;	
    color: #fff
}
input.chat-form-form-control {
    height: 40px;
    border-radius: 0;
    outline: none;
}
textarea.chat-form-form-control {
    height: 150px;
    border-radius: 0;
}
.chat-form-contact-form-page form{
    padding: 0 26px;
}
.chat-form-contact-form-page .chat-form-submit-buttom{
    padding: 10px 40px;
    text-align: center;
    display: block;
    border-radius: 0;
    background: #49aa46;
    border: none;
    border-bottom: 5px solid #184e77;
    text-shadow: none;
    box-shadow: none;
    font-size: 16px;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;
}
.chat-form-form-group label{
    font-size: 14px;
    color: #fff;
}

@media screen and (min-width:770px){
.chat-form-contact-form-page {
	display: none;
}
}

/*
    BUTTON OPACITY STYLE
*/
.chat-form-top-btn-show{
    opacity: 1 !important;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.chat-form-buttom-btn-hide{
    opacity: 0 !important;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.fixed-chat-button {
 	position: fixed;
  	bottom: 70px;
  	right: 5px; 
	width: 30px;
  	z-index: 9999999999999;
}

@media screen and (min-width:770px){
.fixed-chat-button {
 	display: none;
}
}

.request-frame {
  position: relative;
  padding-bottom: 800px;
  height: 0;
  overflow: hidden;
}

.request-frame iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  border: 1px solid #006b91;
	border-radius: 15px;
}

.alert {
  padding: 20px;
  background-color:  #4aab47;
  color: #FFF;
}

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

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

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

@media (max-width: 1000px) {
  .beside-form, .screenform {
  width: 100%;
  float: left;
}
}
/* Ad Landing Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ad-landing {
  background: linear-gradient(180deg, rgba(26, 48, 64, 0.6) 0%, rgba(58, 109, 146, 0.6) 100%), url("https://www.allistonvillagedental.com/new-patients/images/invisalign-alliston.jpg");
 background-position: center;
 background-size: cover;
 max-height: 400px;
 text-align: center;
 justify-content: center;
 padding-top: 20rem;
 padding-bottom: 4rem;
 display: flex;
 color: white;
 align-items: center;
 margin-top: -90px;
 }
.ad-landing h4 {
 margin-bottom: 2.5rem;
 display: none;
 font-weight: bold;
 margin-top: 20px;
}
.ad-landing h6 {
 margin-top: 1.5rem;
 margin-bottom: 0.7rem;
 font-size: 1.2em;
}
.ad-landng h5 a:hover, .active, .general-content a:hover {
 color: #61daff;
 cursor: pointer;
}
.ad-landing-content {
 padding: 0 18px;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 list-style: none;
}

@media only screen and (max-width: 1440px) {
 .ad-landing {
  margin-top: -82px;
 }
 }
@media only screen and (max-width: 1024px) {
  .ad-landing {
   margin-top: -110px;
  }
  }
@media only screen and (max-width: 800px) {
  .ad-landing{
   margin-top: -80px;
   max-height: 300px;
   }
  .ad-landing h1{
  font-size: 3rem;
  }
  }
@media only screen and (max-width: 768px) {
  .ad-landing {
   margin-top: -96px;
  }
  }
@media only screen and (max-width: 650px) {
  .ad-landing {
   margin-top: -86px;
   }
   .ad-landing h1{
  font-size: 2.5rem;
  }
 .ad-landing p{
font-size: 1.5rem;
    }
  }
@media only screen and (max-width: 600px) {
  .ad-landing {
   margin-top: -86px;
}
  .ad-landing h1{
font-size: 3.5rem;
    }
  }
@media only screen and (max-width: 500px) {
   .ad-landing {
    margin-top: -96px;
   }
  }
@media only screen and (max-width: 450px) {
   .ad-landing {
    margin-top: -108px;
   }
  }
@media only screen and (max-width: 425px) {
   .ad-landing {
    margin-top: -108px;
   }
  }
@media only screen and (max-width: 400px) {
   .ad-landing {
    margin-top: -92px;
   }
  }
@media (max-width: 390px) {
   .ad-landing {
    margin-top: -86px;
   }
  }
/* Ad Landing General
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ad-landing-family {
  background: linear-gradient(180deg, rgba(26, 48, 64, 0.6) 0%, rgba(58, 109, 146, 0.6) 100%), url("https://www.allistonvillagedental.com/new-patients/images/family-general-dentistry.jpg");
 background-position: center;
 background-size: cover;
 max-height: 400px;
 text-align: center;
 justify-content: center;
 padding-top: 20rem;
 padding-bottom: 4rem;
 display: flex;
 color: white;
 align-items: center;
 margin-top: -90px;
 }
.ad-landing-family h4 {
 margin-bottom: 2.5rem;
 display: none;
 font-weight: bold;
 margin-top: 20px;
}
.ad-landing-family h6 {
 margin-top: 1.5rem;
 margin-bottom: 0.7rem;
 font-size: 1.2em;
}
.ad-landng-family h5 a:hover, .active, .general-content a:hover {
 color: #61daff;
 cursor: pointer;
}
.ad-landing-content {
 padding: 0 18px;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 list-style: none;
}

@media only screen and (max-width: 1440px) {
 .ad-landing-family {
  margin-top: -82px;
 }
 }
@media only screen and (max-width: 1024px) {
  .ad-landing-family {
   margin-top: -110px;
  }
  }
@media only screen and (max-width: 800px) {
  .ad-landing-family{
   margin-top: -80px;
   max-height: 300px;
   }
  .ad-landing-family h1{
  font-size: 3rem;
  }
  }
@media only screen and (max-width: 768px) {
  .ad-landing-family {
   margin-top: -96px;
  }
  }
@media only screen and (max-width: 650px) {
  .ad-landing-family {
   margin-top: -86px;
   }
   .ad-landing-family h1{
  font-size: 2.5rem;
  }
 .ad-landing-family p{
font-size: 1.5rem;
    }
  }
@media only screen and (max-width: 600px) {
  .ad-landing {
   margin-top: -86px;
}
  .ad-landing h1{
font-size: 3.5rem;
    }
  }
@media only screen and (max-width: 500px) {
   .ad-landing-family {
    margin-top: -96px;
   }
  }
@media only screen and (max-width: 450px) {
   .ad-landing-family {
    margin-top: -108px;
   }
  }
@media only screen and (max-width: 425px) {
   .ad-landing-family {
    margin-top: -108px;
   }
  }
@media only screen and (max-width: 400px) {
   .ad-landing-family {
    margin-top: -92px;
   }
  }
@media (max-width: 390px) {
   .ad-landing-family {
    margin-top: -86px;
   }
}

/* CDCP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cdcp {
 background-color: #515d6d;
 font-weight: 600;
 text-align: center;
 padding-top: 14px;

 color: #fff;
 }
.cdcp a {
 color: #61daff;
 transition: 0.3s;
 }

.cdcp a:hover {
 color: #fff;
 transition: 0.3s;
 }
@media (max-width: 1440px){
 .cdcp h4{
 font-size: 2.5rem
    }
}
@media (max-width: 550px){
 .cdcp h4{
 font-size: 2rem
    }
}
/* Overlay
---------------------------------------- */
#overlay {
  position: fixed;
  display: block;
  width: 100%;
  height: 110%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
  cursor: pointer;
  text-align: center;
}
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  color: #464646;
  background: #FFFFFF;
  padding: 30px;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
#close-box {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 15px;
    font-size: 3rem;
}

@media (max-width:770px){
  #text {
    overflow-y: scroll;
    position: relative;
    top: 50%;
    width: 300px;
  }
 }
/* 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) {}