/*--------------------------------
# TABLE OF CONTENTS
--------------------------------*/

/*
# BASE
# LAYOUT
# BUTTONS
# ELEMENTS
# PODS
*/

/*--------------------------------
# BASE
--------------------------------*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html{
  font-size: 1.2rem;
  line-height: 1.6;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 992px){
  html{
    font-size: 1.35rem;
  }
}

body{
  background: #eee;
  color: #1c1d1e;
  font-family: 'Karla', sans-serif;
  font-weight: 400;
  margin: 0;
}

h1, h2, h3, h4{
  color: #fff; 
  font-weight: 400;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-family: 'Merriweather', serif;
}

h1{ font-size: 1.85rem; line-height: 1.25; margin-bottom: 1rem; font-weight: 700; }

h2{ font-size: 2.25rem; margin-bottom: 1rem; }

h3{ font-size: 1.7rem; font-weight: bold; line-height: 1.4; margin-bottom: 1rem; }

h4{ color: #212529; font-size: 1.25rem; font-weight: 700; letter-spacing: 2px; }

p{
  margin-top: 0;
  margin-bottom: 2rem;
}

p:last-child{
  margin-bottom: 0;
}

strong{
  color: #000;
}

a:not(.btn){

}

a{
  color: #656e79;
  text-decoration: none;
}

a:hover{
  color: #222;
}

img{
  max-width: 100%;
  height: auto;
  border-style: none;
  vertical-align: middle;
}

figure{ margin: 0 0 1.5rem; }

figcaption{
  margin-top: .75rem;
  font-size: .8rem;
  color: rgba(101,103,118,0.5);
  text-align: center;
}

hr{
  margin: 1.55rem 0;
  height: 1px;
  background-color: #edf0f2;
  border: 0;
}

ul{
  margin: 0 0 1.5rem 1rem;
  padding-left: 1rem;
  list-style: none;
}

ul li::before:not(.main-navigation){
  content: "\2022";
  color: #000;
  font-weight: bold;
  display: inline-block;
  width: .75em;
  margin-left: -1rem;
}

li{ margin-bottom: 0.5rem; }

li > ul{
  margin-top: 0.5rem;
  margin-bottom: 0;
}

em{
  padding: .1rem;
  font-style: italic;
  letter-spacing: 0.03rem;
  background: rgba(255,227,148,0.2);
}

blockquote{
  margin: 0 0 1.5rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #202223;
  line-height: 1.4;
}

cite{
  display: block;
  margin: 0 auto;
  width: 70%;
  font-style: normal;
  font-weight: bold;
}

address{
  font-style: normal;
}

/*--------------------------------
# LAYOUT
--------------------------------*/

/* --- CONTAINER --- */

.container{
  padding-left: 25px;
  padding-right: 25px;
}

.container-sm,
.container-md,
.container-lg,
.container-xl{
  margin-left: auto;
  margin-right: auto;
}

.container-sm{
  max-width: 700px;
}

.container-md{
  max-width: 900px;
}

.container-lg{
  max-width: 1080px;
}

.container-xl{
  max-width: 1300px;
}

.container-flex{
  display: flex;
}

/* --- GRID --- */

.row{
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 661px){
  .col-padding-sm{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .col-padding-md{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .col-padding-lg{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.col-1{
  -ms-flex: 0 0 8.33333%;
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

.col-2{
  -ms-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

.col-3{
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4{
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.col-5{
  -ms-flex: 0 0 41.66667%;
  flex: 0 0 41.66667%;
  max-width: 41.66667%;
}

.col-6{
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7{
  -ms-flex: 0 0 58.33333%;
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}

.col-8{
  -ms-flex: 0 0 66.66667%;
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.col-9{
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10{
  -ms-flex: 0 0 83.33333%;
  flex: 0 0 83.33333%;
  max-width: 83.33333%;
}

.col-11{
  -ms-flex: 0 0 91.66667%;
  flex: 0 0 91.66667%;
  max-width: 91.66667%;
}

.col-12{
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 601px){

  .col-md-1{
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  .col-md-2{
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-md-3{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4{
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .col-md-5{
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  .col-md-6{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7{
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  .col-md-8{
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  .col-md-9{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10{
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  .col-md-11{
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  .col-md-12{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 993px){
  .col-lg-1{
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  .col-lg-2{
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-lg-3{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4{
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .col-lg-5{
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  .col-lg-6{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7{
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  .col-lg-8{
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  .col-lg-9{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10{
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  .col-lg-11{
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  .col-lg-12{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- PADDING --- */

.p-1{
  padding: 1rem 0;
}
.p-2{
  padding: 2rem 0;
}
.p-3{
  padding: 3rem 0;
}
.p-4{
  padding: 4rem 0;
}
.p-5{
  padding: 5rem 0;
}

.pt-1{
  padding-top: 1rem;
}
.pt-2{
  padding-top: 2rem;
}
.pt-3{
  padding-top: 3rem;
}
.pt-4{
  padding-top: 4rem;
}
.pt-5{
  padding-top: 5rem;
}

.pb-1{
  padding-bottom: 1rem;
}
.pb-2{
  padding-bottom: 2rem;
}
.pb-3{
  padding-bottom: 3rem;
}
.pb-4{
  padding-bottom: 4rem;
}
.pb-5{
  padding-bottom: 5rem;
}

@media (min-width: 993px){
  .p-lg-1{
    padding: 1.2rem 0!important;
  }
  .pt-lg-2{
    padding-top: 2rem!important;
  }
}

/* --- ORDER --- */

@media (min-width: 601px){
  .order-md-1{
    order: 1;
  }
  .order-md-2{
    order: 2;
  }
  .order-md-3{
    order: 3;
  }
  .order-md-4{
    order: 4;
  }
}

@media (min-width: 991px){
  .order-lg-1{
    order: 1;
  }
  .order-lg-2{
    order: 2;
  }
  .order-lg-3{
    order: 3;
  }
  .order-lg-4{
    order: 4;
  }
}

/* --- OFFSET --- */

@media (min-width: 993px){
  div.offset-lg-1{
    margin-left: 8.33333%;
  }

  div.offset-lg-2{
    margin-left: 16.66667%;
  }

  div.offset-lg-3{
    margin-left: 25%;
  }

  div.offset-lg-4{
    margin-left: 33.33333%;
  }

  div.offset-lg-5{
    margin-left: 41.66667%;
  }

  div.offset-lg-6{
    margin-left: 50%;
  }
}

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

.btn{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .85rem;
  letter-spacing: 1px;
  line-height: 1;
  padding: 1rem 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 25px;
  border: 2px solid transparent;
}

.btn-primary{
  color: #fff;
  letter-spacing: 2px;
  background-color: #6d48e5;
}

.btn-primary:hover{
  color: #fff;
  background-color: #764ff5;
}

.btn-outline-primary{
  color: #764ff5;
  border: 2px solid #764ff5;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 2px;
}

.btn-outline-primary:hover{
  color: #fff;
  background-color: #764ff5;
  border: 2px solid #764ff5;
}

.btn-outline-white{
  color: #fff;
  border: 2px solid #fff;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 3px;
}

.btn-outline-white:hover{
  color: #000;
  background-color: #fff;
  border: 2px solid #fff;
}

.btn-outline-black{
  color: #000;
  border: 1px solid #dadada;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 2px;
}

.btn-outline-black:hover{
  color: #fff;
  background-color: #000;
  border: 1px solid #000;
}

@media (min-width: 993px){
  .btn{
    padding: 1rem 1.5rem;
  }
}

/*--------------------------------
# ELEMENTS
--------------------------------*/

/* --- COLORS --- */

.bg-primary h1{
  color: #fff;
}

.bg-primary{
  color: #241c15;
}

.bg-primary{
  background-color: #152E45;
}

.bg-black h2{
  color: #fff;
}

.bg-black{
  color: #888;
}

.bg-black{
  background-color: #000;
}

.bg-white h2,
.bg-white h3{
  color: #292a2c;
}

.bg-white{
  color: #1c1d1e;
}

.bg-white{
  background-color: #fff;
}

.bg-light h2{
  color: #292a2c;
}

.bg-light{
  color: #a3a3a3;
}

.bg-light{
  background-color: #F2F1F1;
}

.bg-gray{
  color: #444;
  background-color: #f5f5f5;
}

/* --- AVATAR --- */

.avatar{
  border-radius: 50%;
}

.avatar-sm{
  width: 48px;
  height: 48px;
}

.avatar-md{
  width: 64px;
  height: 64px;
}

.avatar-lg{
  width: 96px;
  height: 96px;
}

/* --- FORM --- */

button,
input,
optgroup,
select,
textarea{
  font-family: inherit;
}

input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: button;
}

::-webkit-input-placeholder{
  color: #6d757e;
}

:-ms-input-placeholder{
  color: #6d757e;
}

::-ms-input-placeholder{
  color: #6d757e;
}

::placeholder{
  color: #6d757e;
}

label{
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

select{
  border: 1px solid #dee2e6;
}

textarea{
  overflow: auto;
  resize: vertical;
  width: 100%;
}

/* --- OPACITY --- */

.alpha-2{
  opacity: .2;
}

.alpha-5{
  opacity: .6;
}

/* --- ICON --- */

.icon{
  width: 48px;
  height: 48px;
}

/* --- OTHER --- */

.align-center{
  text-align: center;
}

.no-margin{
  margin-bottom: 0!important;
}

.spacer{
  margin-bottom: 1rem;
  height: 0.5rem;
  background-color: #fff;
}

.form-group{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.form-control{
  border: 1px solid #dee2e6;
  color: #23273c;
  display: block;
  font-size: .85rem;
  line-height: 1.25;
  padding: .9rem;
  width: 100%;
}

.form-control:focus{
  border-color: #6d48e5;
  outline: 0;
}

/*--------------------------------
# PODS
--------------------------------*/

/* --- HEADER --- */

.header-site .container-flex{
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* --- LOGO --- */

.logo a{
  text-decoration: none;
  font-size: 1.05rem;
  color: #000;
  font-weight: 400;
}

.logo img{
  width: 4rem;
}

@media (min-width: 993px){
  .logo a{
    font-size: 1.2rem;
  }
  .logo img{
    width: 5rem;
  }
  .logo a:hover{
    color: #6d48e5;
  }
}

/* --- NAVIGATION MAIN --- */

.nav-main-toggle{
  position: absolute;
  right: 25px;
  top: 40px;
  color: black;
  font-size: 1.5rem;
  text-decoration: none;
  background-color: initial;
}

nav.nav-main{
  display: none;
  width: 100%;
  margin-top: 1.5rem;
  text-transform: uppercase;
}

nav.nav-main ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav.nav-main ul li a{
  display: block;
}

@media (min-width: 993px){
  .nav-main-toggle{
    display: none;
  }

  nav.nav-main{
    display: inline-block;
    margin-top: initial;
    font-size: 1rem;
    width: inherit;
  }

  nav.nav-main a{
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.65px;
    font-size: .75rem;
    color: #000;
    font-weight: 400;
  }

  nav.nav-main ul{
    margin: 0;
    padding: 0.25rem 0 0.25rem;
  }

  nav.nav-main ul li{
    display: inline;
  }

  nav.nav-main li.current-page a{
    color: #6d48e5;
  }

  nav.nav-main ul li a{
    display: inline;
    padding: 1.6rem 0.6rem 1.65rem;
  }

  nav.nav-main ul li a:hover{
    color: #6d48e5;
  }

  nav.nav-main ul li:first-child a{
    padding-left: 0;
  }
}

/* --- HERO --- */

.section-hero .hero-image{
  position: relative;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.section-hero .hero-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section-hero .bg-primary{
  background-color: #2b2525;
}

.hero-details{
  padding-top: 2.5rem;
  position: relative;
}

.hero-details p{
  font-size: 1.2rem;
  font-weight: 400;
  color: white;
}

@media (min-width: 992px){
  .section-hero .hero-image{
    padding-bottom: 5rem;
  }
  .hero-details h1{
    font-size: 2.5rem;
  }
  .btn{
    font-size: .8rem;
  }
}

/* --- FEATURES --- */

.feature-details img{
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.feature-details span{
  display: block;
  margin-bottom: 0.5rem;
  color: #fff;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.feature-details .btn{
  margin-bottom: 3rem;
}

@media (min-width: 993px){
  .section-features h2{
    margin-bottom: 5rem;
    font-size: 2.75rem;
  }
  .feature-details{
    margin-bottom: 2.5rem;
  }
  .feature-details{
    text-align: center;
  }
  .feature-details h3{
    margin-top: 4rem;
    font-size: 2.25rem;
  }
  .feature-details p{
    line-height: 180%;
  }
  .feature-details .btn{
    display: inline-block;
    font-size: .8rem;
  }
}

/* --- ARTICLE --- */

article h2{
  margin-bottom: 1.4rem;
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 2rem;
}

article h3{
  text-transform: uppercase;
  font-size: 1rem;
  font-family: 'Karla', sans-serif;
  letter-spacing: 1px;
}

article hr{
  margin: 3rem 0;
}

article ul{
  list-style-type: disc;
}

@media (min-width: 993px){
  article h2{
    font-size: 2.3rem;
  }
  article h3{
    font-size: .95rem;
  }
}

/* --- PICTURES --- */

.section-pictures .container-xl{
  max-width: 1275px;
}

/* --- PRICING --- */

.section-pricing h2{
  margin-bottom: 4rem;
  font-size: 2.5rem;
  font-weight: 700;
}

.pricing-details{
  font-size: 1rem;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  margin-bottom: 3rem;
  border-radius: .5rem;
  border: 4px solid #fff;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.075);
}

.pricing-details h3{
  font-weight: 400;
  font-size: 1.5rem;
}

.pricing-details span{
  display: block;
  font-family: "Merriweather", serif;
  color: #a3a3a3;
}

.pricing-details .price{
  font-family: "Merriweather", serif;
  margin-bottom: 0.5rem;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: #202223;
}

.pricing-details header{
  padding: .75rem 1.25rem 1.25rem;
  margin: 0 1rem 0 1rem;
  border-bottom: 1px solid rgba(201,200,205,0.5);
}

.pricing-details ul{
  font-family: "Merriweather", serif;
  margin-left: 0;
  padding-left: 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.7;
  color: #444;
}

.pricing-details ul li::before{
  content: initial;
}

.pricing-details.pricing-featured{
  border: 4px solid #6d48e5;
}

@media (min-width: 993px){
  .pricing-details{
    font-size: .9rem;
  }
}

/* --- FAQ --- */

.section-faq h2{
  margin-bottom: 4rem;
  text-align: center;
  font-size: 4rem;
  font-weight: 400;
}

.faq-details{
  margin-bottom: 3rem;
}

.faq-details h3{
  margin-bottom: 1.5rem;
  font-size: 1.65rem;
  color: #292a2c;
}

.faq-details p{
  font-size: 1rem;
  font-weight: 300;
  color: #5e5e5e;
}

@media (min-width: 992px){
  .faq-details h3{
    font-size: 1.3rem;
  }
}

/* --- CALL TO ACTION --- */

.section-calltoaction .calltoaction-image{
  position: relative;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.section-calltoaction .calltoaction-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section-calltoaction .bg-primary{
  background-color: #2b2525;
}

.calltoaction-details{
  position: relative;
}

.calltoaction-details p{
  font-size: 1.2rem;
  font-weight: 400;
  color: white;
}

@media (min-width: 992px){
  .btn{
    font-size: .8rem;
  }
}

/* --- CONTACT --- */

.contact-details{
  margin-bottom: 3rem;
}

.contact-details h3{
  font-family: 'Karla', sans-serif;
  text-transform: uppercase;
}

.contact-details address{
  margin-bottom: 1rem;
}

.contact-details span{
  display: block;
}

.section-contact aside h3{
  font-size: 1.25rem;
}

@media (min-width: 992px){
  .contact-details{
    margin-bottom: initial;
  }
}

/* --- FORM--- */

.contact-details .uniform__potty{
  position: absolute;
  left: -9999px;
}

.contact-details .error{
  font-size: 1rem;
  line-height: 1.25;
  padding: 1rem;
  width: 100%;
  border: 1px solid #ff0000;
}

.contact-details .error:focus{
  border-color: #ff0000;
  outline: 0;
}

.contact-details .form-errors{
  color: #ff0000;
}

/* --- PAGE NOT FOUND --- */

.section-pagenotfound header p{
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  line-height: 140%;
}

.pagenotfound-details p{
  font-size: 1.05rem;
}

@media (min-width: 992px){
  .section-pagenotfound header h1{
    font-size: 3.3rem;
  }
  .section-pagenotfound header p{
    font-size: 1.7rem;
  }
  .pagenotfound-details p{
    font-size: 1.15rem;
  }
}

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


.footertop-details{
  margin-top: 3rem;
  color: #222;
  font-size: 1rem;
}

.footertop-details ul{
  margin: 0;
  padding: 0;
  line-height: 130%;
}

.footertop-details ul a{
  display: block;
}

@media (min-width: 991px){
  .footertop-details h4{
    font-size: 1.1rem;
  }
}

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

.footerbottom-wrap{
  padding-top: 1rem;
  color: #222;
  font-size: .9rem;
  border-top: 1px solid rgba(0,0,0,.1);
}

.footer-bottom .container-flex{
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 991px){
  .col-margin-lg{
      margin-left: 1rem;
      margin-right: 1rem;
  }
}

/* --- ZOOM VANILLA JS --- */

/* https://github.com/spinningarrow/zoom-vanilla.js */

img[data-action="zoom"]{
  cursor: zoom-in;
}

.zoom-img,
.zoom-img-wrap{
  position: relative;
  z-index: 666;
  transition: all 300ms;
}

img.zoom-img{
  cursor: zoom-out;
}
.zoom-overlay{
  cursor: zoom-out;
  z-index: 420;
  background: #0e0e0e;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: "alpha(opacity=0)";
  opacity: 0;
  transition: opacity 300ms;
}
.zoom-overlay-open .zoom-overlay{
  filter: "alpha(opacity=100)";
  opacity: 1;
}