/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 18, 2018, 1:09:53 PM
    Author     : hp
*/

@import url(//fonts.googleapis.com/css?family=Abril+Fatface|Droid+Serif:400,700,400italic,700italic);
html,body{
  height:100%
}
body {
  /*background: linear-gradient(to bottom, rgba(0,5,10,0.4) 0%,rgba(0,0,0,0) 100%);*/
  font-family: 'Droid Serif', serif;
}

.blog-card {
  max-width: 550px;
  width:100%;
  height: 300px;
  position: relative;
  font-family: 'Droid Serif', serif;
  color:#fff;
  top: 20%;
  right: 0;  
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5);
  text-align: center;
  transition:all 0.4s;
  background: url(https://unsplash.it/600/800?image=1061) center no-repeat;
  background-size: 100%;
  padding-top: 2%;
}
.blog-card a{ 
color:#fff;
  text-decoration:none;
  transition:all 0.2s
}
.blog-card .color-overlay {
  
  width: 550px;
  height: 285px;
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;
  transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}
.blog-card .gradient-overlay {  
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
  width: 550px;
  height: 500px;
  position: absolute;
  top: 350px;
  left: 0;
  z-index: 15;
}
.blog-card:hover{
    box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75);
}
.blog-card:hover .card-info {
  opacity: 1;
  bottom: 100px;
}
.blog-card:hover .color-overlay {
  background: rgba(64, 64, 70,0.8);
}
.blog-card:hover .title-content-services{
  margin-top:70px
}
.title-content {
  text-align: center;
  margin: 260px 0 0 0;
  position: absolute;
  z-index: 20;
  width: 100%;
  top: 0;
  left: 0;
  transition:all 0.6s
}
.title-content-services {
  text-align: center;
  margin: 170px 0 0 0;
  position: absolute;
  z-index: 20;
  width: 100%;
  top: 0;
  left: 0;
  transition:all 0.6s
}

.blog-card:hover h3:after{
 
  animation: changeLetter 0.3s 1 linear;
  width:80%
}

.blog-card h3,h1 {
  font-size: 1.9em;
  font-weight: 400;
  letter-spacing: 1px;
  font-family: 'Abril Fatface', serif;
  margin-bottom: 0;
  display:inline-block;
}
.blog-card h3 a{  
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
  transition:all 0.2s
}
.blog-card h3 a:hover{
  text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.95);
}
h3:after {
  content: " ";
  display: block; 
  width: 10%;
  height: 2px;
  margin: 20px auto;
  border: 0;
  background: #BDA26B;
  transition:all 0.2s
}

@keyframes changeLetter {
  0% {
    width: 10%;
  }
  100% {
    width: 80%;
  }
}

.intro {
  width: 170px;
  margin: 0 auto;
  color: #ddd;
  font-style: italic;
  line-height: 18px;
}
.intro a{
  color: #ddd
}
.intro a:hover{
  text-decoration:underline
}
.card-info {
   box-sizing: border-box;
  padding: 0;
  width: 100%;
  position: absolute;
  bottom: -40px;
  left: 0;
  margin: 0 auto;
  padding: 0 50px;
  font-style: 16px;
  line-height: 24px;
  z-index: 20;
  opacity: 0;
  transition: bottom 0.64s, opacity 0.63s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.card-info a{
  display:block;
  width:100px;
  margin:15px auto;
  background:#fff;
  color:#444;
  padding:3px 10px;
  border-radius:2px;
  font-size:0.8em
}
.card-info a:hover{
  background: #8e7c49;
  color:#fff;
}
.card-info a:hover span{
   filter: brightness(10);
   opacity:1
}
.utility-info {
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 20;
  width:100%;
  text-align:left
}
.utility-info:after{
  content:" ";
  background: url(https://nodws.github.io/NodPen/postItem/crown.svg) center no-repeat;
  background-size: 30px auto;
  display:block;
  opacity: 0.4;
  position:absolute;
  bottom:25px;
  right:15px;
  width:30px;
  height:15px
}
.utility-info a:hover{
  text-decoration:underline
}
.utility-list {
  list-style-type: none;
  margin: 0 0 10px 20px;
  padding: 0;
  width: 100%;

}
.utility-list li {
  margin: 0 5px 0 0;
  padding: 3px 0 15px 0px;
  display: inline-block;
  
  font-size:0.8em
}

.licon{
  position:relative;  
   width:23px;
   height:15px;
   display:inline-block;
   vertical-align:middle;
}
.licon:before{
  content:"";
   background:url(https://nodws.github.io/NodPen/postItem/licons.svg?) -2px -6px no-repeat;
   background-size:250px;
   width:26px;
   height:20px;
   display:inline-block;
   vertical-align:middle;
   position:absolute;
   top:-3px;
   left:0;
}
.icon-white{
   filter: brightness(10);
}
.icon-black{
   filter: brightness(0);
   opacity:0.6
}
.icon-like:before{
  background-position: -183px -6px;

}
.icon-com:before{
  background-position: -63px -4px;

}
.icon-dat:before{
  background-position: -94px -7px;
}
.icon-tag:before{
  background-position: -33px -6px;

}

@media (max-width:750px)
{
  .utility-info {
    text-align:center;
  }
  .utility-info ul{
    width:100%;
    margin:0;
    box-sizing:border-box
  }
  .utility-info li{
    width:49%;
    display:inline-block;
    box-sizing:border-box;
    margin:0
  }
}

@media (max-width:500px){
  .utility-info li:last-of-type{
    width:100%
  }
  .card-info{
    display:none
  }
  .blog-card:hover .title-content,.title-content{
  margin-top:40px
}
.blog-card{
  height:300px
}
.blog-card h3{
  font-size:1.3em
}
.intro{
  font-size:0.8em
}
}


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

/* ignore this bit :P */

.profile-header{ background:#333 url(https://images.unsplash.com/photo-1435783099294-283725c37230?dpr=1&auto=compress,format&fit=crop&w=1376&h=635&q=80&cs=tinysrgb&crop=&bg=) top center no-repeat; background-size:cover; font-size:3em;position:relative}
.profile-header:after{
  position:absolute;
  content:"";
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(23, 23, 31, 0.42);
  z-index:0
}
#profile-links a{
  font-family: 'Abril Fatface', serif;
  font-size:1.2em
}


.profile-links a[href*=nodws\.com]:before{
    content:"\2616";
    color:#0a45b5;
    padding-right:3px
}

.profile-links a[href*=twitter]:before{
    content:"\1f426";
    color:#08c
}

.profile-links a[href*=dribbble]:before{
    content:"\26BE";
    color:#d055bf
}
#following-this-user{
  pointer-events:none
}
#follow-this-user{
    font-size:1.2em;
    border-color:#359ef9
}
#follow-this-user:after{
    content:"\1f448"
}
.links-and-stats {
    background: rgb(20, 20, 21);
}
.profile-name h1 {
   text-shadow:0 6px 9px rgba(0, 0, 0, 0.48)
}
.profile-avatar {
    bottom: -10px;
    width: 150px;
    height: 150px;
    border: 0px solid #1E1E1E;
    background: rgba(2, 2, 2, 0.49);
    box-shadow:0 19px 19px -10px rgba(0, 0, 0, 0.63)
}
.profile-username, .upsell,.profile-location,.primary-pro{
  opacity:0;
}
.upsell,#pen-as-header-question{
  display:none
}
.profile-nav-1 a{
  font-size:1.2rem;
}
.profile-bio, .profile-nav-1 a.active,.profile-nav-1 a:hover {
    color: rgba(20, 20, 21, 0.59) !important;
    font-size: 1.2rem
}
.meta .pen-title {
  font-family: 'Droid Serif', serif;
  text-align:center
}
.pagination-button{
  background-color:#2f2f31;
  border-color:#2f2f31;
  transition:all 0.2s
}
.pagination-button:hover{
  box-shadow:0 3px 8px rgba(0,0,0,0.2)
}
.single-project .stats,.single-pen .stats {
    text-align:center;
    width:100%
}
.stats svg {
    fill: #bda26b;
}
.stats svg, .loves .icon-heart {
    fill: rgba(47, 47, 49, 0) !important;
    stroke:#ba6 !important;
    stroke-width:0.1em !important;
}
.loves .icon-heart {
   stroke-width:0.5em !important;
}
.comments svg {
   stroke-width:0.35em !important;
}
.single-stat.loves.loved-1 svg
{
    stroke:#fff !important
}

.single-pen:hover h3:after{
    width:40%;
    transition:all 0.2s
}
.pen-actions{
  border:0px !important
}
.meta{
  box-shadow:none !important
}
#cards{
    background: linear-gradient(to bottom, rgba(0,5,10,0.4) 0%,rgba(0,0,0,0) 100%);
}

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

/* This is Drop Down Card Img css */

.blog-card-drop-down1 {
  max-width: 250px;
  width:100%;
  height: 200px;
  position: relative;
  font-family: 'Droid Serif', serif;
  color:#fff;
  top: 20%;
  right: 0;  
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5);
  text-align: center;
  transition:all 0.4s;
  background: url("../images/demo/dropdown/11.jpeg") center no-repeat;
  background-size: contain;
  padding-top: 2%;
}
.blog-card-drop-down1 .title-content h3 a{ 
  color:#fff;
  text-decoration:none;
  transition:all 0.2s
}
.blog-card-drop-down1 .color-overlay {
  background: rgba(64, 84, 94,0.5);
  width: 550px;
  height: 200px;
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;
  transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}
.blog-card-drop-down1 .gradient-overlay {  
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
  width: 550px;
  height: 200px;
  position: absolute;
  top: 150px;
  left: 0;
  z-index: 15;
}
.blog-card-drop-down1:hover{
    box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75);
}
.blog-card-drop-down1:hover .card-info {
  opacity: 1;
  bottom: 40px;
}
.blog-card-drop-down1:hover .color-overlay {
  background: rgba(64, 64, 70,0.8);
}
.blog-card-drop-down1:hover .title-content{
  margin-top:50px
}
.blog-card-drop-down1:hover h3:after{
  
  animation: changeLetter 0.3s 1 linear;
  width:80%
  
}

.blog-card-drop-down1 h3,h1 {
  font-size: 1.9em;
  font-weight: 100;
  letter-spacing: 1px;
  font-family: 'Abril Fatface', serif;
  margin-bottom: 0;
  display:inline-block;
}
.blog-card-drop-down1 h3 a{  
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
  transition:all 0.2s;
      background-color: transparent;
}
.blog-card-drop-down1 h3 a:hover{
  text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.95);
  background-color: transparent;
}
/*----*/

.blog-card-drop-down2 {
  max-width: 250px;
  width:100%;
  height: 200px;
  position: relative;
  font-family: 'Droid Serif', serif;
  color:#fff;
  top: 20%;
  right: 0;  
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5);
  text-align: center;
  transition:all 0.4s;
  background: url("../images/demo/dropdown/22.jpeg") center no-repeat;
  background-size: contain;
  padding-top: 2%;
}
.blog-card-drop-down2 .title-content h3 a{ 
  color:#fff;
  text-decoration:none;
  transition:all 0.2s
}
.blog-card-drop-down2 .color-overlay {
  background: rgba(64, 84, 94,0.5);
  width: 550px;
  height: 200px;
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;
  transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}
.blog-card-drop-down2 .gradient-overlay {  
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
  width: 550px;
  height: 200px;
  position: absolute;
  top: 150px;
  left: 0;
  z-index: 15;
}
.blog-card-drop-down2:hover{
    box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75);
}
.blog-card-drop-down2:hover .card-info {
  opacity: 1;
  bottom: 40px;
}
.blog-card-drop-down2:hover .color-overlay {
  background: rgba(64, 64, 70,0.8);
}
.blog-card-drop-down2:hover .title-content{
  margin-top:50px
}
.blog-card-drop-down2:hover h3:after{
  
  animation: changeLetter 0.3s 1 linear;
  width:80%
  
}

.blog-card-drop-down2 h3,h1 {
  font-size: 1.9em;
  font-weight: 100;
  letter-spacing: 1px;
  font-family: 'Abril Fatface', serif;
  margin-bottom: 0;
  display:inline-block;
}
.blog-card-drop-down2 h3 a{  
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
  transition:all 0.2s;
      background-color: transparent;
}
.blog-card-drop-down2 h3 a:hover{
  text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.95);
  background-color: transparent;
}

/*------*/

.blog-card-drop-down3 {
  max-width: 250px;
  width:100%;
  height: 200px;
  position: relative;
  font-family: 'Droid Serif', serif;
  color:#fff;
  top: 20%;
  right: 0;  
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5);
  text-align: center;
  transition:all 0.4s;
  background: url("../images/demo/dropdown/33.jpeg") center no-repeat;
  
  background-size: contain;
  padding-top: 2%;
}
.blog-card-drop-down3 .title-content h3 a{ 
  color:#fff;
  text-decoration:none;
  transition:all 0.2s
}
.blog-card-drop-down3 .color-overlay {
  background: rgba(64, 84, 94,0.5);
  width: 550px;
  height: 200px;
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;
  transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}
.blog-card-drop-down3 .gradient-overlay {  
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
  width: 550px;
  height: 200px;
  position: absolute;
  top: 150px;
  left: 0;
  z-index: 15;
}
.blog-card-drop-down3:hover{
    box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75);
}
.blog-card-drop-down3:hover .card-info {
  opacity: 1;
  bottom: 40px;
}
.blog-card-drop-down3:hover .color-overlay {
  background: rgba(64, 64, 70,0.8);
}
.blog-card-drop-down3:hover .title-content{
  margin-top:50px
}
.blog-card-drop-down3:hover h3:after{
  
  animation: changeLetter 0.3s 1 linear;
  width:80%
  
}

.blog-card-drop-down3 h3,h1 {
  font-size: 1.9em;
  font-weight: 100;
  letter-spacing: 1px;
  font-family: 'Abril Fatface', serif;
  margin-bottom: 0;
  display:inline-block;
}
.blog-card-drop-down3 h3 a{  
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
  transition:all 0.2s;
      background-color: transparent;
}
.blog-card-drop-down3 h3 a:hover{
  text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.95);
  background-color: transparent;
}


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

/* This is Drop Down Card Img css End */




#serviceimg1{
    background-image: url('../images/demo/carousel/REG BATCH.jpeg');
    background-size: 200%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#serviceimg2{
    background-image: url("../images/demo/carousel/PERSONAL TRAINING.jpeg");
    background-size: 200%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#serviceimg3{
    background-image: url("../images/demo/carousel/PROGRAMS.jpeg");
   background-size: 200%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#serviceimg4{
    background-image: url("../images/demo/carousel/WORKSHOPS.jpeg");
    background-size: 200%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#serviceimg5{
    background-image: url("../images/demo/carousel/STUDIO ON HIRE.jpeg");
    background-size: 200%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#serviceimg6{
    background-image: url("../images/demo/carousel/WELLNESS.jpeg");
    background-size: 200%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#serviceimg7{
    background-image: url("images/demo/Service/Dance/7.jpeg");
    background-size: auto;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#serviceimg8{
    background-image: url("images/demo/Service/Dance/8.jpeg");
    background-size: auto;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}





#brocherimg1{
    background-image: url('../images/demo/brochers/SANGEET1.jpeg');
    background-size: 94%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#brocherimg2{
    background-image: url('../images/demo/brochers/SANGEET2.jpeg');
    background-size: 94%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#brocherimg3{
    background-image: url('../images/demo/brochers/SANGEET3.jpeg');
    background-size: 94%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#brocherimg4{
    background-image: url('../images/demo/brochers/SANGEET4.jpeg');
    background-size: 94%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}

.blog-card-brocher {
  max-width: 520px;
  width:100%;
  height: 400px;
  position: relative;
  font-family: 'Droid Serif', serif;
  color:#fff;
  top: 20%;
  right: 0;  
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5);
  text-align: center;
  transition:all 0.4s;
  background: url(https://unsplash.it/600/800?image=1061) center no-repeat;
  background-size: 100%;
  padding-top: 2%;
  background-color: aliceblue;
  cursor: pointer;
}
.blog-card-brocher .title-content h3 a{ 
  color:#fff;
  text-decoration:none;
  transition:all 0.2s
}
.blog-card-brocher .color-overlay {
  background: rgba(64, 84, 94,0.5);
  width: 550px;
  height: 200px;
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;
  transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}
.blog-card-brocher .gradient-overlay {  
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
  width: 550px;
  height: 200px;
  position: absolute;
  top: 150px;
  left: 0;
  z-index: 15;
}
.blog-card-brocher:hover{
    box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75);
}
.blog-card-brocher:hover .card-info {
  opacity: 1;
  bottom: 40px;
}
.blog-card-brocher:hover .color-overlay {
  background: rgba(64, 64, 70,0.8);
}
.blog-card-brocher:hover .title-content{
  margin-top:120px
}
.blog-card-brocher:hover h3:after{
  
  animation: changeLetter 0.3s 1 linear;
  width:80%
  
}

.blog-card-brocher h3,h1 {
  font-size: 1.9em;
  font-weight: 100;
  letter-spacing: 1px;
  font-family: 'Abril Fatface', serif;
  margin-bottom: 0;
  display:inline-block;
}
.blog-card-brocher h3 a{  
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
  transition:all 0.2s;
      background-color: transparent;
}
.blog-card-brocher h3 a:hover{
  text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.95);
  background-color: transparent;
}



#corpimg1{
    background-image: url('../images/demo/brochers/corporateimg1.jpeg');
    background-size: 94%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}
#corpimg2{
    background-image: url('../images/demo/brochers/corporateimg2.jpeg');
    background-size: 94%;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
}

/****************************/
/****************************/
/***************************/


.cardnew{ /*width:370px; height:500px;*/ margin:10px; float:left; padding: 10px; }
           .cardnew > .frontnew{
            position:absolute;
            background-image: url('');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            color: #122b40;
            transform: perspective( 600px ) rotateX( 0deg );
            backface-visibility: hidden;
            background-color: whitesmoke;
            /*height: 500px; width: 370px; */
            margin: 10px; border-radius: 7px;
            transition: transform .5s linear 0s;
           }
            .cardnew > .backnew{
             position:absolute;
             transform: perspective( 600px ) rotateX( 180deg );
             backface-visibility: hidden;
             /*height: 500px; width: 370px; */
             margin: 10px; border-radius: 7px;
             background-color: crimson;
             transition: transform .5s linear 0s;
            }
            .cardnew:hover > .frontnew{
             transform: perspective( 600px ) rotateX( -180deg );
            }
            .cardnew:hover > .backnew{
             transform: perspective( 600px ) rotateX( 0deg );
            }
            
            
            .background-color-for-text{
                background-color: #1E1E1E;
                opacity: 0.6;
            }
            
            
            
            
            /**************/
            
            
.card-shop {
  padding-top: 4%;
  padding-bottom: 0%;
 
  
}
.card-shop .menu-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.card-shop .menu-content::before, .card .menu-content::after {
  content: "";
  display: table;
}
.card-shop .menu-content::after {
  clear: both;
}
.card-shop .menu-content li {
  display: inline-block;
}
.card-shop .menu-content a {
  color: red;
}
.card-shop .menu-content span {
  position: absolute;
  left: 50%;
  top: 0;
  font-size: 10px;
  font-weight: 700;
  font-family: "Open Sans";
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.card-shop .wrapper {
  background-color: transparent;
  min-height: 450px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.card-shop .wrapper:hover .data {
  
}
.card-shop .data {
  position: relative;
  bottom: 0;
  width: 100%;
 
}
.card-shop .data .content {
  padding: 1em;
  position: relative;
  z-index: 1;
}
.card-shop .author {
  font-size: 12px;
}
.card-shop .title {
  margin-top: 10px;
}
.card-shop .text {
  height: 70px;
  margin: 0;
}
.card-shop input[type="checkbox"] {
  display: none;
}

.card-shop input[type="checkbox"]:checked + .menu-content {
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
}

.example-1 .wrapper {
  background: url(https://images.unsplash.com/photo-1496979551903-46e46589a88b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cda12b505afa1beb06e49d89014cbd65&auto=format&fit=crop&w=634&q=80) 20% 1%/cover no-repeat;
}
.example-1 .date {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #77d7b9;
  color: #fff;
  padding: 0.8em;
}
.example-1 .date span {
  display: block;
  text-align: center;
}
.example-1 .date .day {
  font-weight: 700;
  font-size: 24px;
  text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.example-1 .date .month {
  text-transform: uppercase;
}
.example-1 .date .month,
.example-1 .date .year {
  font-size: 12px;
}
.example-1 .content {
  background-color: #fff;
  box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3);
}
.example-1 .title a {
  color: gray;
}
.example-1 .menu-button {
  position: absolute;
  z-index: 999;
  top: 16px;
  right: 16px;
  width: 25px;
  text-align: center;
  cursor: pointer;
}
.example-1 .menu-button span {
  width: 5px;
  height: 5px;
  background-color: gray;
  color: gray;
  position: relative;
  display: inline-block;
  border-radius: 50%;
}
.example-1 .menu-button span::after, .example-1 .menu-button span::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background-color: currentColor;
  position: absolute;
  border-radius: 50%;
}
.example-1 .menu-button span::before {
  left: -10px;
}
.example-1 .menu-button span::after {
  right: -10px;
}
.example-1 .menu-content {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.example-1 .menu-content li {
  width: 33.333333%;
  float: left;
  background-color: #77d7b9;
  height: 60px;
  position: relative;
}
.example-1 .menu-content a {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 24px;
}
.example-1 .menu-content span {
  top: -10px;
}

.example-2 .wrapper {
  background: url(https://tvseriescritic.files.wordpress.com/2016/10/stranger-things-bicycle-lights-children.jpg) center/cover no-repeat;
}
.example-2 .wrapper:hover .menu-content span {
  -webkit-transform: translate(-50%, -10px);
          transform: translate(-50%, -10px);
  opacity: 1;
}
.example-2 .header {
  color: #fff;
  padding: 1em;
}
.example-2 .header::before, .example-2 .header::after {
  content: "";
  display: table;
}
.example-2 .header::after {
  clear: both;
}
.example-2 .header .date {
  float: left;
  font-size: 12px;
}
.example-2 .menu-content {
  float: right;
}
.example-2 .menu-content li {
  margin: 0 5px;
  position: relative;
}
.example-2 .menu-content span {
  transition: all 0.3s;
  opacity: 0;
}
.example-2 .data {
  color: #fff;
  -webkit-transform: translateY(calc(70px + 4em));
          transform: translateY(calc(70px + 4em));
}
.example-2 .title a {
  color: #fff;
}
.example-2 .button {
  display: block;
  width: 100px;
  margin: 2em auto 1em;
  text-align: center;
  font-size: 12px;
  color: #fff;
  line-height: 1;
  position: relative;
  font-weight: 700;
}
.example-2 .button::after {
  content: "\2192";
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  transition: all 0.3s;
}
.example-2 .button:hover::after {
  -webkit-transform: translate(5px, -50%);
          transform: translate(5px, -50%);
  opacity: 1;
}

.card-shop:hover{
    box-shadow: 10px 18px 20px 10px rgba(0, 10, 30, 0.75);
}

.cart_symbol:hover{
    background-color: white;
}

            
            /**************/