@font-face {
    font-family: 'nunito_sans';
    src: url('fonts/nunitosans-webfont.eot');
    src: url('fonts/nunitosans-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/nunitosans-webfont.woff2') format('woff2'),
         url('fonts/nunitosans-webfont.woff') format('woff'),
         url('fonts/nunitosans-webfont.svg#nunito_sans') format('svg');
    font-weight:100;
    font-style: normal;

}

@font-face {
    font-family: 'nunito_sans_light';
    src: url('fonts/nunitosans-light-webfont.eot');
    src: url('fonts/nunitosans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/nunitosans-light-webfont.woff2') format('woff2'),
         url('fonts/nunitosans-light-webfont.woff') format('woff'),
         url('fonts/nunitosans-light-webfont.svg#nunito_sans') format('svg');
    font-weight:100;
    font-style: normal;

}


body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  font-family:'nunito_sans';
}

html{
  width:100%;
  height:100%;
  background:#fff;
  scroll-behavior: smooth;
}

Section{
  width:100%;
  padding: 0;
  margin: 0;
}

.bg{
  position:absolute;
}

.title{
  width:100%;
  box-sizing:border-box;
  text-align:center;
  position:relative;
  padding:50px;
	z-index:5 !important;
}

.title h3{
  margin-left: calc(50% - 15%);
}

.head-title{
  -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
  top:120px;
  position: relative;
  text-align: center;
}

a{
  color:#fff;
  text-decoration:none;
}
.head-title h1{
  font-size: 80px;
  letter-spacing: 4px;
  color:#fff;
  line-height:1;
  margin-bottom:20px;
  font-family: nunito_sans;
  text-shadow: 15px 30px 20px rgba(0,0,0,.5);
}

.head-title p{
  font-size: 30px;
  color: #000;
  font-family:nunito_sans_light;
  position: relative;
  text-shadow: none;
  box-sizing: border-box;
  font-weight:600;
  line-height:0;
  letter-spacing: 1px;
}

h3{
  font-size: 36px;
  margin:10px;
  color:#000;
  font-family: nunito_sans;
  font-weight:900;
  text-transform: uppercase;
  position: absolute;
  -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
}

h3::after{
  content: '';
  position: absolute;
  top:60%;
  width:100%;
  z-index: -1;
  height: 10px;
  left:0;

}
.white1{
    color:#fff;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
}
.yellow >h3::after{
  background:#ffde00;
}
.white >h3::after{
    background: #ffffff;
  }

.black{
  color:#000 !important;
}
.btn{
  height:40px;
  width:300px;
  font-weight: 10;
  color:#fff;
  font-family: nunito_sans;
  background: #fe2121;
  box-shadow: 5px 5px 18px rgba(250, 12, 12, 0.856);
  border-radius:30px;
  border:none;
  cursor: pointer;
  -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

.round-btn{
  bottom:20px;
  right:20px;
  float:right;
  height:40px;
  width:40px;
  border-radius: 50%;
  position:fixed;
  background:#fe2121;
  box-shadow: 5px 5px 18px rgba(250, 12, 12, 0.856);
  border:none;
  z-index:999;
  cursor: pointer;
}


.video-btn{
  height:160px;
  width:160px;
  left:42%;
  top:48%;
  border-radius: 50%;
  position:absolute;
  background:#fe2121;
  box-shadow: 5px 5px 18px rgba(250, 12, 12, 0.856);
  border:none;
  z-index:999;
  cursor: pointer;

}
.maintitle{
  width:calc(65%);
  color:#fff;
  font-family: nunito_sans;
  text-shadow: 15px 30px 20px rgba(0,0,0,.5);
  padding:50px;
  margin-top:10%;
  box-sizing: border-box;
  line-height: 0;
  position:relative;
  display:inline-block; 
  align-content: center;
}

.maintitle h1{
  font-size: 120px;
  font-family:nunito_sans_light;
  letter-spacing: 4px;
  color: #fe2121;
  display: inline-block;
}

.maintitle h2{
  font-size:36px;
  margin-left:120px;
  font-family:nunito_sans_light;
  color:#fe2121;
}

.nav{
  width:100%;
  height:60px;
  z-index:999;
  padding-top:0;
  display:block;
  position: fixed;
}

.nav-transparent {  
  background: rgba(255, 229, 54, .8);
  height: 60px;
  align-content: center;
  align-items: center;
}


.logo{
  height:100%;
  width:18%;
  padding:10px 20px;
  display:inline-block;
  box-sizing: border-box;
}

.menu{
  float:right;
  margin-right:50px;
}

ul{
  padding:10px;
  box-sizing: border-box;
}

ul li{
  padding-left:20px;
  display:inline;
  cursor: pointer;
  text-align: center;
}

ul li a{
  font-family: nunito_sans;
  font-size: 18px;
  font-weight:bolder;
  padding:5px;
  text-decoration:none;
  color:#000;
  display:inline-block;
  position: relative;
}

.active{
  color:#ffffff !important;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
}

.active::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 6px;
  background: #fe2121;
  top: 56%;
  left:0;
  z-index:-1;
}

ul li a:before {
  content: '';
  position: absolute;
  height: 6px;
  background: #fe2121;
  top: 56%;
  z-index:-1;
  animation: out 0.5s ease-out 1;
}
  
.menu a:hover:before {
  animation: in 0.5s ease-in 1 both;
}

@keyframes in {
  0% {
    width: 0;
    left: 0;
  }
  100% {
    left: 0;
    width: 100%;
  }
}
@keyframes out {
  0% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 0;
  }
}


.header{
  width:100%;
  height:550px;
  background: radial-gradient(#ffe149, #ffe536);
  overflow:hidden;
  display:block;
  position:relative;
  z-index:1;
}

.header1{
  width:100%;
  min-height:20vh;
  height:480px;
  padding-bottom:50px;
  background: radial-gradient(#ffe149, #ffe536);
  overflow:hidden;
  display:block;
  position:relative;
  z-index:1;
}

.bg1{
  width:42%;
  height:600px;
  position:absolute;
  mix-blend-mode: multiply;
  margin-top:6%;
  margin-left:49%;
  z-index:-1;
}

.bg2{
  width:100%;
  height:100%;
  position:absolute;
  z-index:-1;
  top:5%;
}

.toggle{
  float:right;
  padding:10px;
  display:none;
}

.maintitle p{
  color: #000;
  font-family:nunito_sans_light;
  width: 80%;
  padding: -10px 0px;
  margin-left:50px;
  position: absolute;
  text-shadow: none;
  box-sizing: border-box;
  font-weight:600;
  text-align: center;
  line-height: 1;
  font-weight: 900;
  font-size: 30px!important;
}

.started_box{
  display:inline-table;
  position:relative;
  padding:20px;
  top: -55%;
  z-index: 1;
  box-sizing: border-box;
}

.card {
  -webkit-transform: translateZ(0);
      transform: translateZ(0);
  padding: 30px;
  background: white;
  border-radius: 5px;
  width: 300px;
  height: 420px;
  margin: auto;
  -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
  display: flex;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  position: relative;
}

.card:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 10px;
  border-radius: 50%;
  left: 0;
  bottom: -10px;
  box-shadow: 0 30px 20px rgba(0, 0, 0, 0.3);
}

.card .card-content {
  margin: auto;
  text-align: center;
  -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
  -webkit-transform: translateZ(100px);
      transform: translateZ(100px);
}

.card-title{
  font-family: nunito_sans;
  font-size: 20px;
  margin-bottom:20px;
  display: block;
  font-weight: bold;
  box-sizing: border-box;
  letter-spacing: 3px;
}

.contact-form{
  width:100%;
  height:80%;
}

input, select {
  border-bottom: 2px solid #000 !important;
  font-family: nunito_sans;
  margin: 23px;
  border:none;
  width:80%; 
}

placeholder{
  color:#000;
  font-family: nunito_sans;
  font-size: 16px;
}

input:-webkit-autofill,  textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: transparent !important;
  background-image: none !important;
  color: rgb(0, 0, 0) !important;
}

.get-button{
  width:100%;
  position: relative;
  padding:0;
  line-height: 0;
  margin:0;
}

*:focus {outline:none}

.get-button img{
  width: 40%;
  margin-bottom: -2%;
  float: right;
  margin-right: 5%;

}


.down-arrow{
  position:absolute;
  bottom:0;
  left:50%;
  display:inline-block;
}

.down-arrow img{
  width:80%;
}

.Animate1 {
  animation:mymove 3s infinite;
  -webkit-animation:mymove 3s infinite; /* Safari and Chrome */
  }
  
  
  @keyframes mymove
  {
  0%   {bottom:40px;}
  25%  {bottom:10px;}
  75%  {bottom:30px}
  100% {bottom:0px;}
  }

  
.chits{
  width:100%;
  padding-bottom:50px;
  box-sizing: border-box;
  text-align: center;
  overflow:hidden;
  -webkit-perspective: 1000px;
      perspective: 1000px;

}

.explain{
  width:100%;
  position:relative;
  display:block;
  display:grid;
  justify-content: center;
  align-items: center;
}

.explain p{
  font-size:25px;
  font-family:nunito_sans_light;
  font-weight:200;
  color:#000;
  padding:0% 20%;
  word-spacing: 6px;
  line-height:30px;
}

.chit-3d{
  width:100%;
  display:inline-block;
  position:relative;
}

.cards-3d {
  width: 220px;
  height: 300px;
  border-radius: 20px;
  position: relative;
  display:inline-block;
  margin:20px;
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #fff;
  border-radius: 23px;
}

.content {
  width: 100%;
  height: 100%;
  margin-top:calc(50% - 50px);
  transform: scale(.7) ;
  align-items: center;
  perspective: 900;
  justify-content: center;
}

.content img {
  display:inline-block;
  position: relative;
}

.content p {
  line-height: 1.3;
  font-weight: 900;
  position:relative;
  font-size:23px;
}

.front {
  z-index: 2;
  background:rgba(0,0,0,.8);
}

.square{
  height:200px;
  width:200px;
  top:0;
  left:0;
  position:absolute;
  border-radius:20px;
  overflow:hidden;
}

.square > h1{
  position:absolute;
  z-index:1;
  top:-2%;
  left:3%;
  font-size:30px;
  font-weight:900;
  text-shadow:0px 0px 10px rgba(0,0,0,.3);
}
.square:after{
  content:"";
  height:130px;
  width:130px;
  transform:rotate(45deg) translate(-70%,0%);
  top:0;
  left:0;
  background:#ffde00;
  position:absolute;
}

.back {
  z-index: 1;
  background:rgba(0,0,0,.8);
  transform: rotateY(-180deg);
}

.cards-3d:hover {
  transition: .2s cubic-bezier(1, 0, 0, 1);
  -webkit-transform: rotateY(-180deg);
      transform: rotateY(-180deg);

}

.cards-3d >img{
  width:100%;
  height:100%;
  border-radius:20px;
}


.choose{
  width: 100%;
  min-height:25vh;
  max-height: 150vh;
  height:auto;
  padding-bottom:50px;
  position:relative;
}
.choose > img{
  width:100%;
  height:108%;
  z-index:0;
  top:0%;
  position:absolute;
}
.points{
  width:100%;
  padding:20px;
  margin-top:50px;
  box-sizing: border-box;
}

.points >img{
  width:calc(80%);
  height:calc(100%);
  padding:20px;
  z-index:1;
  left:10%;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  position:relative;
}

.logo1 img{
  width:200px;
  height:250px;
  z-index:2;
  position:absolute;
  left:43%;
  margin-top: 30px;
}

.achievements{
  width: 100%;
  min-height:14vh;
  height:auto;
  padding-bottom:50px;
  text-align: center;
  background-image: linear-gradient(rgba(0, 0,0, 0.8) 0%,rgba(0, 0, 0,.8) 80%),url('../assests/achievements bg.png');
  background-blend-mode:multiply;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: absolute;

}


.numbers{
  width:100%;
  padding:10px;
  box-sizing: border-box;
  max-height:20%;
  top:10%;
  display:grid;
  grid-template-columns: auto auto auto auto;
  position:relative;
  overflow:hidden;
}

.achive-card{
  padding:20px;
  overflow:hidden;
  position:relative;

}

.number{
  height:80%;
  display:inline-block;
  line-height:0;
  color:#fff;

}

.number img{
  height:120px;
  padding:20px;
  position:relative;
  display:block;
  align-items: center;
  margin-bottom:20px;
}

.number >h1{
  font-size: 60px;
  font-family: nunito_sans;
  font-weight:900;
  display:inline;
  line-height:.5;

}

.number >p{
  font-size:18px;
  line-height:0;
  font-family:nunito_sans_light;
  text-transform: uppercase;
}



.get-started{
  width: 100%;
  min-height:14vh;
  height:auto;
  padding-bottom:50px;
  text-align: center;
  background-image: linear-gradient(to right,#ffe149 0%,#ffe149 100%),url('../assests/get started bg.png');
  background-blend-mode:multiply;
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: absolute;
}


.footer{
  width: 100%;
  max-height: 15vh;
  bottom:0!important;
  background-color: #000;
  position:relative;
  display:block;
  z-index:999;
}

.fa-heart{
  color:#fe2121;
}

.options{
  display:inline-flex;
  font-size:12px;
  padding-left:30px;
}

.options >p{
  padding:0px 10px;
}

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

.team{
  font-size:12px;
  display:block-flex;
  color:rgba(255, 255, 255, .8);
  text-align:center;
}


.team a{
  font-size:16px;
  padding-left:5px;
  text-decoration:none;
  color:#fff;
}
.team a b{
  font-size:16px;
  color:#fe2121;
  display:inline-block;
  text-decoration:none;
}
i{
  color:#fff;
  padding:0;
  margin:2px;
  font-size:20px!important;
}
.social{
  float:right;
  position:reltive;
  display:block-flex;
}

.social img{
  width:15%;
  padding:5px;
  display:inline-block;
}

.board{
  width:100%;
  height:auto;
  box-sizing: border-box;
  text-align: center;
}
.board-member{
  width:100%;
  padding:20px 80px;
  height:100vh auto;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;

}

.board-member > .right{
  float:right;
  width:30%;
  box-sizing: border-box;
}

.board-member > .left{
  float:left;
  width:30%;
  box-sizing: border-box;
}

.board-member img{
  height:500px;
  width:100%;
  box-shadow:0px 0px 50px rgba(0, 0, 0, .1);
  border:none;
}

.board-member > p{
  width:70%;
  font-size: 23px;
  font-style: normal;
  font-weight: 100;
  padding:50px;
  margin:0;
  position:relative;
  box-sizing: border-box;
  text-align: justify;
  font-family: nunito_sans_light;
}

.text-right{
  float:right;
}


/* --------------------- card for schemes --------------------- */
.scheme{
  width:100%;
  height:auto;
  min-height: 71vh;
  box-sizing: border-box;
  text-align: center;
  overflow:hidden;
}
.row{
  width:100%;
  padding:20px;
  position:relative;
  overflow:hidden;
  display: grid grid grid grid;
}

.row:nth-child(1){
  margin-top:80px;
}

.row:last-child{
  margin-bottom:80px;
}


.blue{
  background-color: #00a9f7 !important;
}

.blue1{
  color:#00a9f7 !important;
}

.green{
  background-color: #19fb49 !important;
}

.green1{
  color:#19fb49 !important;
}

.red{
  background-color:#fe2121 !important;
}

.red1{
  color:#fe2121 !important;
}

h4{
  font-size:16px;
  font-family: nunito_sans_light;
  text-align: center;
}

.scheme-card{
  width:23%;
  height:100%;
  padding:10px;
  display:inline-flex;
}

.value{
  width:18.5%;
  margin-top:20px;
  box-sizing: border-box;
  position:absolute;
  border-radius:10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, .3);
}

.value>h1{
  font-size:23px;
  color:#fff;
  text-align:center;
  text-shadow:0 6px 6px rgba(0, 0, 0, .5);
}

.value-details{
  width:70%;
  margin:0% 6%;
  height:300px;
  padding-top:100px;
  box-sizing: border-box;
  border-radius:10px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .3);

}

.scheme-card h2{
  display:inline-block;
  line-height: 0;
  margin:0;
  padding:0;
}

.scheme-card h4{
  display:inline-block;
  line-height: 0;
  margin:0;
  padding:0;
}

.divident{
  padding:25px 0px;
}

.row2{
  display:inline-block;
  width:100%;
  padding:0px;
}

.col{
  display: table-cell;
  padding-left:10px;
  line-height:.5;
  
}

.col>p{
  font-size:12px;
}





.about{
  min-height:71vh;
  display:block;
  position:relative;
}


[v-cloak] {
  display: none;
}


.overlay {
  width: 100%;
  visibility: hidden;
  flex: 0 0 100%;
  padding: 3em;
  overflow: hidden;
  will-change: transform;
  transform: translate(var(--x, 0%), var(--y, 0%));
  transition: transform 300ms ease-out;
  position: relative;

}
.overlay h3 {
  margin-top: 0;
  right:120px;
  font-size:50px;
  
}
.overlay.current {
  visibility: visible;
}


.boardal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 630px;
  align-items: center;
  justify-content: center;
}


.boardal__mask {
  background: rgba(0, 0, 0, 0.65);
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.boardal__wrapper {
  position: relative;
  width: 93%;
  height: 95%;
  transform: translate(4%,4%);
  background: #fff;
  color: #000;
  display: flex;
  flex-direction: var(--cross, column);
  border-radius: .2em;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1em 2em -1em;
}
.boardal__x {
  cursor: pointer;
  font-size: 2em;
  line-height: .5;
  opacity: .15;
}
.boardal__x:hover {
  opacity: .65;
}
.boardal-enter-active, .boardal-leave-active {
  transition: opacity 0.25s;
}
.boardal-enter, .boardal-leave-to {
  opacity: 0;
}

article {
  flex: 1 1 100%;
  height: 100%;
  display: flex;
  flex-direction: var(--axis, row);
  overflow: hidden;
}

.btn1{
  height:40px;
  width:60px;
  font-weight: 10;
  color:#fff;
  font-family: nunito_sans;
  background: #fe2121;
  border-radius:50px;
  border:none;
  cursor: pointer;

}

.footer1 {
  height:50px;
  position: relative;
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: var(--axis-reverse, row-reverse);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}
.footer1:not(:empty) {
  padding: 1em;
}

.step-dots {
  display: flex;
  flex-direction: var(--axis, row);
}

.step-dot {
  cursor: pointer;
  width: 1em;
  height: 1em;
  margin: .5ch;
  border-radius: 1em;
  background:#fe2121;
  opacity: .2;
  transition: transform 100ms ease-out, opacity 150ms linear;
}
.step-dot.active1 {
  opacity: 1;
  box-shadow: 0 0 6px rgba(0, 0, 0, .1);
}
.step-dot:hover {
  transform: scale(1.2);
}

.forward-actions,
.back-actions {
  flex: 1;
  display: flex;
  flex-direction: var(--axis, row);
}

.forward-actions {
  justify-content: flex-end;
}

.back-actions {
  justify-content: flex-start;
}

.large-number{
  font-family: nunito_sans_light;
  font-weight:800;
  margin:0;
  padding:0;
  left:0;
  right:0;
  z-index:-1;
  font-size: 500px;
  position:absolute;
  color:#fff;
  text-shadow: 0 6px 30px rgba(254, 33, 33, .15);
}

.overlay> img{
  height:100%;
  left:-200px;
  display:inline-block;
  position: relative;
}

.step-details{
  width:23%;
  right:250px;
  top:150px;
  display:inline-block;
  position: absolute;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 40px 40px rgba(254, 33, 33, .2);
}

.step-text{
  display:inline-block;
  padding:20px;
  line-height: 60px;
  font-size: 23px;
  color:#000;
  font-weight:600;
  font-family: nunito_sans_light;
}



/* gallery */
.gallery-content{
    width:100%;
    display:grid;
    min-height:23.5vh;
    grid-template-columns: 300px auto;
}

.date{
    padding:20px;
    margin-left:30px;
    float:right;
    right:0;
    position:relative;

}
.gallery {
  position: relative;
  margin:50px;
  border-radius: 10px !important;
  overflow: hidden;
}

.img-c {
  width: 180px;
  height: 180px;
  float: left;
  position: relative;
  overflow: hidden;
}

.img-w {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform ease-in-out 300ms;
}

.img-w img {
  display: none;
}

.img-c {
  transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}

.img-c.view {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  z-index: 2;
  border-radius:10px;
}

.img-c.postview {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.img-c.view.positioned {
  left: 0 !important;
  top: 0 !important;
  transition-delay: 50ms;
}



.conditions{
    width:100%;
    padding:80px;
    box-sizing: border-box;
}
#terms-and-conditions h1{
  font-family: nunito_sans;
  text-transform: uppercase;
  font-size: 28px;
  text-align: center;
}

#terms-and-conditions h2{
  font-family: nunito_sans;
  font-size: 23px;
  text-align: center;
  margin-bottom:80px;
}

#terms-and-conditions h5{
  font-family: nunito_sans;
  font-size: 20px;
  text-align: justify;
  font-weight: 500;
  margin: 0;
}

#terms-and-conditions p{
  font-family: nunito_sans_light;
  font-size: 16px;
  font-weight: 100;
  text-align: justify;
}

.address{
  width:100%;
  min-height:23.5vh;
  padding-bottom:230px!important;
  position:relative;
  display:block;
  margin-top:30px;
  text-align: center;
  overflow:hidden;
  background-color:rgba(255, 255, 255, 1);
}
.address-row{
  width: 100%;
  min-height:20vh;
  display:grid;
  grid-template-columns:300px 300px 300px 300px;
  grid-column-gap:30px;
  align-items: center;
  justify-content: center;
  margin:50px 0;
    
}

.address-card{
  height:400px;
  padding:10px;
  border-radius:10px;
  box-sizing: border-box;
  background-color:#fff;
  box-shadow:0 6px 30px rgba(0, 0, 0, .1); 
}

.address-card:hover{
  box-shadow:0 6px 30px rgba(254, 33, 33, .4);
  cursor: pointer;
}

.location>img{
  width:100%;
  height:100%;
}

.location{
  height:150px;
  width:150px;
  overflow:hidden;
  border-radius:50%;
  font-size:20px;
  transform: translate(50% 50%);
  margin:30% auto ;
  display:inline-block;
  text-align: center;
  line-height:5;
  color:#000;
  margin-bottom:50px;
  border:8px solid rgba(255, 225, 73, .8);
}

.address-card:hover .location{
  height:80px;
  width:80px;
  font-size:18px;
  transform: translate(50% 50%);
  margin:10% auto ;
  display:inline-block;
  text-align: center;
  line-height:4;
  color:#fff;
  border:3px solid rgba(254, 33, 33, 1);
  transition-duration: .6s;
  background-image: linear-gradient(120deg, rgba(252, 50, 47, 0.8) 50% , rgba(255, 220, 20, 0.6) 80%);
}

.branch{
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  font-style:bold;
  color:#000;
  line-height:0 !important;
  margin:-6px !important;
  padding:0 !important;
}

.branch-content{
  display:none;
  padding:20px 0px;
  box-sizing: border-box;
}

.bttn{
  width:150px;
}

.branch-content>h2{
  font-size:14px;
  line-height:1;
}
.branch-content>p{
  line-height:1;
  font-size:12px;
  animation:fade 0.8s ease-in 1;
}
.address-card:hover .branch-content{
  display:block;
}

@keyframes fade {
  0% {
    opacity:0;
  }
  100% {
    opacity:100;
  }
}

  

.work-card {
  position: relative;
  height: 450px;
  width: 80%;
  margin: 200px auto;
  background-color: #FFF;
  box-shadow: 10px 10px 60px rgba(254, 33, 33, .1);
  animation: pop .8s ;
}

@keyframes pop{

  0%{
      height:0px;
      width: 0px; 
  }

  100%{
      height: 450px;
      width: 900px; 
  }

}


.thumbnail {
  float: left;
  position: relative;
  left: 30px;
  top: -30px;
  height: 360px;
  width: 540px;
  overflow: hidden;
  animation:in-left 1.1s both;
  animation-delay: .8s ;
  background:#fff;
}

@keyframes in-left{

  0%{
      left:-330px;
  }

  40%{
      left:60px;
  }

  70%{
      left:10px;
  }

  100%{
      left:30px;
      -webkit-box-shadow: 10px 18px 80px 0px rgba(87, 86, 82, 0.3);
      -moz-box-shadow: 10px 18px 80px 0px rgba(87, 86, 82, 0.3);
      box-shadow: 10px 18px 80px 0px rgba(87, 86, 82, 0.3);
  }
}

img.left{
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  width: 60%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation: opacity .9s 1 both;
}

@keyframes opacity{

  0%{
      opacity:0;
  }
  99%{
      opacity:0;
  }
  100%{
      opacity:1;
  }
}

.work-card>.right{
  margin-left: 590px;
  margin-right: 20px;
}

.work-card h1 {
  padding-top: 15px;
  font-size: 1.3rem;
  color: #000;
}

.work-card p {
  text-align: justify;
  padding-top: 10px;
  font-size: 0.95rem;
  line-height: 150%;
  color: #666;
  font-weight:200;

}

/* DATE of release */
.work-card h5 {
  position: absolute;
  left: 40px;
  bottom: -110px;
  font-size: 6rem;
  color: rgba(0, 0, 0, 0.5);
}



.separator {
  margin-top: 10px;
  border: 1px solid #C3C3C3;
}

.fab {
  position: absolute;
  right: 50px;
  bottom: -20px;
  box-sizing: border-box;
  padding-top: 18px;
  background-color: rgb(99, 99, 99);
  width: 60px;
  height: 60px;
  color: white;
  text-align: center;
  border-radius: 50%;
  
}

.fab:hover{
  box-shadow: 2px -5px 23px rgba(0, 0, 0, 0.2);
}