/* --------------------------------------- */
/* Notice of Price Change Banner */
/* --------------------------------------- */

            .banner {
                background: #CDC5CB;
            }

            .banner__content {
                padding: 14px;
                max-width: 1000px;
                margin: 0 auto;
                display: flex;
                align-items: center;
            }
 
            .banner__text {
                flex-grow: 1;
                line-height: 1.4;
                font-family: 'Lato', sans-serif;
                text-align: center
            }

            .banner__close {
                background: none;
                border: none;
                cursor: pointer;
            }
            .banner__text,
            .banner__close > span {
                color: #fff;
            }


/* --------------------------------------- */
/* BASIC SETUP */
/* --------------------------------------- */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #fff;
    color: #333;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
   
}

/* --------------------------------------- */
/* REUSABLE COMPONENTS */
/* --------------------------------------- */

.row {
    max-width: 1140px;
    margin: 0 auto;
}

section {
    padding: 50px 0;  
}

.box {
    padding: 1%;
}

.img-icon {
    width: 110%;
}


/* ------------- HEADINGS ---------------- */

h1, h2, h3 { 
    text-transform: uppercase;
    margin-bottom: 20px;
}

h1 {
    font-weight: 100;
    margin: 30px 2%;
    text-align: center;
    color: #d5eeff;
    font-size: 150%;
    letter-spacing: 2px;
    word-spacing: 5px;
    line-height: 140%;
}


h2 {
    font-weight: 300;
    font-size: 110%;
    text-align: center;
    letter-spacing: 2px;
    
}

h2:after {
    display: block;
    height: 2px;
    background-color: #bfe0f5;
    content: " ";
    width: 100px;
    margin: 0 auto;
    margin-top: 20px;
}

h3 {
 
    font-size:100%;
    text-align: left;

}

h4 {
    font-size:65%;
    letter-spacing: 2px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: left;
}

h5, h6 {
    font-size:140%;
    letter-spacing: 2px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: left;
    
}

h6 {
    padding: 3%;
}

h7 {
    font-size:125%;
    font-weight: 500; 
    color: rgba(255, 0, 0, 0.74);
    background-color: rgba(250, 215, 246, 0.45);
    line-height: 125%;
}

/* -------------- PARAGRAPHS ---------------- */
   
.short-copy {
    padding: 0 3%;
    margin-bottom: 50px;
    line-height: 145%;
    width: 80%;
    margin-left: 10%;
    text-align: center;
}

.short-copy-2 {

    margin-bottom: 50px;
    line-height: 145%;
    width: 94%;

    text-align: left;
}

.box p {
    line-height: 125%;
    font-size: 85%;  
    text-align: left;
    margin-bottom: 20px;
}


/* -------------- ICONS ---------------- */
.icon-big {
    font-size:200%;
    display: block;
    position: relative;
    color: #567284;
    margin-bottom: 10px;
}

.icon-small {
    font-size:150%;
    display: block;
    position: relative;
    color: #ffffff;

}

/* -------------- BUTTONS ---------------- */

.btn:link, 
.btn:visited {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    transition: background-color 0.4s;
    
}

.btn:hover,
.btn:active {
    border: 1px solid #fff;
    background-color: #567284;
    color: #ffffff;
}


.btn-ghost:link, 
.btn-ghost:visited {
    margin-top: 20px;
    border-radius: 20px; 
    border: 1px solid #a1daff;
    color: #a1daff;
}



/* -------------- TREATMENT BUTTONS ---------------- */


.container {
  position: relative;
}

.image {
  display: block;
  width: 94%;
  height: auto;
border: 1px solid #999;
}

.overlay,
.overlay_visible    {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(37, 49, 57, 0.97);
}

.overlay{
  
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(37, 49, 57, 0.97);
}

.overlay_visible {
  
  opacity: 1;
  transition: .5s ease;
  background-color: rgba(74, 84, 90, 0.31);
  
}



.container:hover .overlay {
  opacity: 1;
}

.text {
 
  color: #fff;
    width: 100%;
  font-size: 120%;
  font-weight: 100;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}





/* --------------------------------------- */
/* HEADER */
/* --------------------------------------- */


.header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), #2F607C), url(img/bg_blue.jpg);
    background-size: cover;
    background-position: center;
    height: 20vh;
    z-index: 999;
}


.logo {
position: absolute;
    height: 100px;
    width: auto;
    margin-top: 30px;
    padding: 0 1%;
    z-index: 1;
   
}


/* ------------- NAV ------------ */
/*menu bar*/

.container nav.desk,
.container nav.mob{
    right: 0;
    top: 0; 
    
                        /*sticky nav bar height: height: 60px;  */  
                        /*for sticky nav: use  position: fixed;*/
                        /*for sticky bar to appear over contents: z-index: 5; */
}

.container nav.desk {
padding-top: 60px;;
}

/*menu list*/
nav.desk ul {
    list-style: none;
    
    margin: 5px auto;
   text-align: right;
}

/*menu style*/
nav.desk ul li{
    display: inline-block;
    width: 100%
    position: absolute;
   /*if need a full bar use: width: %*/
    margin-right: 30px;
    font-size: 80%;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 0; 
}


/*menu hover*/
nav.desk  ul li a:hover,
nav.desk  ul li a:active {
    color: #fff;
    font-weight: 300;
    border-bottom: 1px solid;
    transition: border-bottom 0.2s;
    padding: 6px 0;
}


/*submenu*/

nav.desk ul li ul {
    background-color: #2f5970;
  visibility: hidden;
  opacity: 0;
  display: none;
  position:relative;
   
}

nav.desk ul li.t ul li{
    display: block;
    margin-left: 25px;
    margin-top: 4px;  /*check again*/
}

nav.desk ul li:hover > ul,
nav.desk ul li:focus-within > ul, 
nav.desk ul li ul:hover {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    margin-left: -15px; /*check again*/
    
   
}


/*menu text*/

nav ul li a,
nav.desk ul li.t li a {
        color:#99bcd3;
        font-weight: 300;
        font-size: 90%;
        letter-spacing: 1px;
        text-decoration: none;
    }

/*submenu text on hover*/
nav.desk ul li.t li a:hover {
        color:#fff;
        font-weight: 300;
        font-size: 90%;
        letter-spacing: 1px;
        text-decoration: none;
    }


/*hamburger hiding list*/

nav.mob,
.hamburger-btn{
     position: fixed;
    display: none;
    color: #fff;
   
    background: #475e6d;
}



@media screen and  (max-width: 1440px){ /*on mob. hamburger menu will show*/  
    nav.desk{
        display: none;
    }
    
    
.container nav.mob{
    width: 100%; /*on mob. the menu will cover horizontal*/  
}
    
    nav.mob,
    .hamburger-btn{
        display: block;
        z-index: 1;
    }  
    
    
    
    .mob ul.t {
        color:#99bcd3;
        font-weight: 300;
        font-size: 90%;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
    }
    
    .mob ul.t li a{
        color:#fff;
        list-style: none;
        text-transform: uppercase;
        text-align: center;
        font-weight: 300;
        font-size: 90%;
        letter-spacing: 1px;
        text-decoration: none;
       
    }
    
    
    
    .hamburger-btn {
        position: relative;
    }
     .hamburger-btn .ion-android-menu,
    .hamburger-btn .ion-android-close {
        position: fixed;
        right: 25px;
        top: 15px;
        font-size: 180%;
        cursor: pointer; 
    }
    
    .mob ul {
        margin-top: 20px;
        background: #475e6d;
        display: none;
        
    }
    
    .mob li {
            text-transform: uppercase;
            text-align: center;
            padding: 20px;
            cursor: pointer;
            border-bottom: 0;
        }
    .mob ul.active {
        
        display: block;
    }
    
    
    .mob ul li:hover {
        background-color: #2f404d;
    }
    
}
    
    
    

/* --------------------------------------- */
/* SECTIONS */
/* --------------------------------------- */



.section-info {
    background-color: rgb(247, 247, 247);
     padding: 3%;
}

.section-footer {
    background-color: #435a69;
   color: #fff;  
    padding: 3%;
}

footer {
    background-color: #1f2a31;
   color: rgba(161, 218, 255, 0.46);
    font-size: 48%;
    text-align: center;
    letter-spacing: 1px;
    padding: 20px 0;  
}



/* --------------------------------------- */
/* FOOTER */
/* --------------------------------------- */



.footer-nav {
    margin-bottom: 20px;
}

.footer-nav li {
     display: block;
     list-style: none;
     color: #fff;
    
}

.footer-nav li a:link, 
.footer-nav li a:visited {
    padding: 4px 0;
    color: #d4ecf9;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 65%;
    letter-spacing: 1px;
    
   
}

.footer-social li {
    display: inline-block;
    list-style: none;
    margin-right: 20px;
    margin-bottom: 10px;
}

.logo_small {
     height: 70px;
    width: auto;
    float: center;

    margin-bottom: 20px;
}


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

/*---------------------------------------------------------------- Page Skin Care */

.red {
    font-size: 90%;
    line-height: 120%;
    font-weight: 400;
    color: #ff4e00;
    margin-bottom: 50px;
}

* {
  box-sizing: border-box;  
}

#parent {
  display: flex;
  flex-wrap: wrap;
    padding: 3%;
}

.child {
  height: 300px;
  background: rgb(206, 219, 227);
  flex: 1;
  min-width: 45%;
    overflow: hidden;   
}

.map {
    width: 100%;
    height: 100%;
}

@media (max-width: 700px) {
  .child {
    min-width: 60%; 
  }
}

@media (max-width: 400px) {
  .child {
    min-width: 60%; 
  }
}


/*  COLUMN SETUP  */
.col {
   
    flex: 1; /* additionally, equal width */
   display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden;
	display: block;
	float:left;
	margin: 0%;
    flex: 1;
    
}
.col:first-child { margin: 0; overflow: hidden;}


/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }


/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
    
}
.span_1_of_2 {
	width: 50%; 
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}


.intro-bg {
     background-color: rgb(206, 219, 227);
}

.item-info {
    display: inline-block;
    margin: 20px 0;
    padding: 0 20px;
    
}

.intro-info {
font-size: 18px;
  line-height: 145%;
    text-align: left;
    padding: 3%;
    
}

.item-detail {
  margin: 0;
    padding: 0 3%;
    line-height: 125%;
    margin-bottom: 50px;
     line-height: 140%;
}
  


/*---------------------------------------------------------- Page Contact */

.section-careers {
    background-color: #fff;
}
.image-contact {
  display: block;
  width: 94%;
  height: auto;
border: 1px solid #999;
    margin-bottom: 20px;
}

/*--------------------------------------------------------- Page Treatment */

.form {
    margin-bottom: 50px;
}


/*---------------------------------------------------------------- Page Press */


.flex {
    display: -ms-flexbox;
    display: flex;
    margin-left: -10px;
    width: calc(100% + 10px);
    flex-wrap: wrap;
    transition: all .3s ease;
}


.section-press {
    padding: 3%;   
}


.image_press {
    width:100%;
    height: auto;
     border: 1px solid #999;
    padding: 3% 3%;
    margin-bottom: 10px;

}

.each-press {
    margin-bottom: 50px;
}

/*---------------------------------------------------------------- Photos */

.image-photos {
  display: block;
  width: 100%;
  height: auto;
border: 1px solid #999;

    margin-bottom: 20px;
}

.section-photos {
    padding: 3%;
}


/*---------------------------------------------------------------- Form */

.appointment {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.submit {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit:hover {
  background-color: #45a049;
}

.error {color: #FF0000;}
/*---------------------------------------------------------------- Gift Card */


.section-giftcard {
     width: 100%;
    background-color: rgba(250, 238, 238, 0.88);
    margin-bottom: 50px;
    line-height: 125%;
    text-align: center;
    color: #666;
    padding: 12px 20px;
    letter-spacing: 0.03em;
 
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
  

.amount {
        color: #666;
    letter-spacing: 0.05em;
    font-weight: 300;
}

/*---------------------------------------------------------------- Sitemap */

.list {
    text-decoration: none;
    line-height: 220%;
    color: #809db1;
    text-indent: 2%;
    letter-spacing: 1px;
    font-weight: 300;
}

.list li ul {
    text-indent: 10%;
     
}

a.sitemap {
    color:#809db1;     
 text-decoration: none;
}
/*---------------------------------------------------------------- Page Press Articles */



/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  background-color: #a1daff;
  top: 200px;
  width: auto;
  padding: 16px;

  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: #567284;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}