* {
  box-sizing: border-box;
  min-height: 1px;
  font-family: "PT Sans Narrow", sans-serif; }

html {
  height: auto;
  overflow-x: hidden; }

body {
  height: auto;
  padding: 0;
  font-family: "Lalezar", cursive;
  overflow: hidden;
  margin: 0; }

  ul {
  list-style-type: none;
  }
  a {
  text-decoration: none;
  }


  #main_logo{
    position: absolute;
    right:40px;
    top:40px;
    z-index:1000;

  }
  #main_logo a img{
    width:10vw;
    display: inline-block;
  }

  @media screen and (max-width:850px) {
    #main_logo a img{
      width:15vw;
      display: inline-block;
    }
  }

  .main-menu {
  float: left;
  position: fixed;
  min-height: 100%;
  width: 500px;
  z-index: 1000;
  -webkit-transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -moz-transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);

  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  transform-origin: 100% 0;

  -webkit-transform: translate(-336px, 0);
  -moz-transform: translate(-336px, 0);
  transform: translate(-336px, 0);
  }
  .main-menu.open {
  -webkit-transform: translate(0, 0) skew(0);
  -moz-transform: translate(0, 0) skew(0);
  transform: translate(0, 0) skew(0);
  }
  .main-menu.open .main-menu-form {
  -webkit-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
  transform: skewX(-25deg);
  }
  @media query (max-width:600px) {
    .main-menu.open .main-menu-form {
    -webkit-transform: skewX(0deg);
    -moz-transform: skewX(0deg);
    transform: skewX(0deg);
    }
  }
  @media screen and (min-width:1400px) {
    .main-menu-left{
      top:68px!important;
    }
    #app{
      padding:134px 80px!important;
    }
    .card-wrap{
      margin:35px!important;
    }
    .sb-contanier{
      top:28vh!important;
    }
    #main .container .left{
      left: 38vw!important;
      top: 20vh!important;
    }
  }
  .main-menu.open .main-menu-form:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #2980B9;
  box-shadow: 0px 0px 6px 1px rgba(93, 173, 226, 0.7);
  }
  .main-menu-form {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #283747;
  z-index: 1001;
  opacity: 1;
  -webkit-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -moz-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);

  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  transform-origin: 100% 0;

  -webkit-transform: skewX(-38deg);
  -moz-transform: skewX(-38deg);
  transform: skewX(-38deg);
  }

  .main-menu.open .main-menu-btn {
    opacity: 0;
    visibility: hidden;
    left:50px;
    transform: rotate(0deg);
    -webkit-transition: opacity 0s, visibility 0s;
    -moz-transition: opacity 0s, visibility 0s;
    transition: opacity 0s, visibility 0s;
  }

  /*main menu content*/
  .main-menu-content {
  position: relative;
  padding: 35px 55px 35px 25px;
  font: normal 16px/1.25 'Open Sans';
  }
  .main-menu.open .main-menu-content {
  z-index: 1002;
  }
  .main-menu-logo h2 {
  font-size: 28px;
  opacity: 0;
  }
  .main-menu.open .main-menu-logo h2 {
  opacity: 1;
  -webkit-transition: opacity .5s ease-in .3s;
  -moz-transition: opacity .5s ease-in .3s;
  transition: opacity .5s ease-in .3s;
  }
  .main-menu-nav {
  margin-top: 35px;
  }

  .main-menu.open .main-menu-nav a {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: color .2s ease-in-out 0s, opacity .3s ease, transform .3s ease;
  -moz-transition: color .2s ease-in-out 0s, opacity .3s ease, transform .3s ease;
  transition: color .2s ease-in-out 0s, opacity .3s ease, transform .3s ease;
  opacity: 1;
  }
  .main-menu-nav a {
  opacity: 0;
  display: inline-block;
  padding: 10px 15px;
  font-size: 20px;
  color: #5DADE2;
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  transform: translate(0, 100%);
  }
  .main-menu-nav i {
  color: #fff;
  -webkit-transition: color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
  }
  .main-menu.open .main-menu-nav a:hover {
  color: #3498DB;
  -webkit-transition-delay: 0s !important;
  -moz-transition-delay: 0s !important;
  transition-delay: 0s !important;
  }
  .main-menu.open .main-menu-nav a.orange {
  -webkit-transition-delay: .4s;
  -moz-transition-delay: .4s;
  transition-delay: .4s;
  }
  .main-menu.open .main-menu-nav a.yellow {
  -webkit-transition-delay: .5s;
  -moz-transition-delay: .5s;
  transition-delay: .5s;
  }
  .main-menu.open .main-menu-nav a.green {
  -webkit-transition-delay: .6s;
  -moz-transition-delay: .6s;
  transition-delay: .6s;
  }
  .main-menu.open .main-menu-nav a.purple {
  -webkit-transition-delay: .7s;
  -moz-transition-delay: .7s;
  transition-delay: .7s;
  }
  .main-menu.open .main-menu-nav a.red {
  -webkit-transition-delay: .8s;
  -moz-transition-delay: .8s;
  transition-delay: .8s;
  }
  .main-menu-nav a.orange:hover i {
  color: #5DADE2;
  }
  .main-menu-nav a.yellow:hover i {
  color: #F5AB35;
  }
  .main-menu-nav a.green:hover i {
  color: #00B16A;
  }
  .main-menu-nav a.purple:hover i {
  color: #9A12B3;
  }
  .main-menu-nav a.red:hover i {
  color: #F64747;
  }

  /*toggle button*/
  .main-menu-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 38px;
  right: 39px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  border: 2px solid #AEB6BF;
  -webkit-transition: opacity .4s cubic-bezier(0.95, 0.05, 0.795, 0.035), visibility .4s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  -moz-transition: opacity .4s cubic-bezier(0.95, 0.05, 0.795, 0.035), visibility .4s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition: opacity .4s cubic-bezier(0.95, 0.05, 0.795, 0.035), visibility .4s cubic-bezier(0.95, 0.05, 0.795, 0.035);

  -webkit-transform: skew(38deg) rotate(38deg);
  -moz-transform: skew(38deg) rotate(38deg);
  transform: skew(38deg) rotate(38deg);

  }
  .main-menu-btn i {
  -webkit-transform: rotate(-38deg);
  -moz-transform: rotate(-38deg);
  transform: rotate(-38deg);
  color: #AEB6BF;
  }
  .main-menu-btn:hover i{
  color: #3498DB;
  }

  /*close button*/
  .main-menu.open .main-menu-close {
  opacity: 1;
  -webkit-transition: color .2s ease, opacity 1s ease 1s, transform .3s ease 1s;
  -moz-transition: color .2s ease, opacity 1s ease 1s, transform .3s ease 1s;
  transition: color .2s ease, opacity 1s ease 1s, transform .3s ease 1s;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
  }
  .main-menu-close {
  opacity: 0;
  display: inline-block;
  margin-left: 15px;
  font-size: 18px;
  color: #BDC3C7;
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  transform: translate(0, 100%);
  }
  .main-menu-close:hover {
  color: #5DADE2;
  cursor: pointer;
  }

  /*main content*/
  .main-wrapper {
  max-width: 1280px;
  padding: 0 10px;
  margin: 0 auto;
  background: #212F3D;
  font: normal 16px 'Open Sans';
  }

  .main-content {
  padding: 45px 55px;
  }
  .main-content h4 {
  font-size: 26px;
  line-height: 1.25;
  color: #3498DB;
  text-align: center;
  }
  .main-content .posts li {
  margin: 10px 0;
  }
  @media only screen and (max-width: 500px) {
    .main-menu.open .main-menu-form {
      -webkit-transform: skewX(0deg);
      -moz-transform: skewX(0deg);
      transform: skewX(0deg);
    }

  }

.menu {
  position: fixed;
  right: 3%;
  background: transparent;
  width: 60%;
  z-index: 101;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.5);
  padding: 0.2em; }
  .menu ul {
    display: inline-flex;
    width: 100%;
    text-align: center;
    height: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer; }
    .menu ul li {
      flex-grow: 1;
      text-align: center;
      list-style: none;
      font-size: 24px;
      transition: border 0.4s linear 0s; }
      .menu ul li a {
        color: white;
        text-decoration: none;
        transition: all 0.3s linear;
        outline: none; }
      .menu ul li.active a {
        color:#1c679e; }

.img {
  background-image: url("../bg.jpg") !important;
}


.img2 {
  background-image: url("../bg.jpg") !important;
}

.img3 {
  background-image: url("../bg.jpg") !important;
}

.img,.img2,.img3 {
  opacity: 0.9;
  position: relative;
  background-attachment: fixed !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;

}
.bg-one {
    background:url('pattern.png'),linear-gradient(#222,#222) !important;
	opacity:0.87;
}
@media screen and (max-width:850px)
{
  .bg-one{
    opacity:1;
  }
}
.myBorder {
    border-top: 2px solid rgba(236, 239, 241, 0.07);
    height: 1px;
    line-height: 50px !important;
    margin: 15px auto 0;
    position: relative;
    width: 30%;
}


.myBorder::before {

    background-color: #fff;
    content: '';
    height: 6px;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    top: -4px;
    width: 50px;
    background-color: #57cbcc;

}


section {
  position: relative;
  top: 0;
  left: 0;
  margin: -10px;
  min-height: 105vh;
  display: none; }
  section h2 {
    display: inline-block;
    font-size: 32px;
    font-family: "PT Sans Narrow", sans-serif;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.95);
    text-align: center;
    width: 100%;
    z-index: 10;
    letter-spacing: -2px;
  }
.pg-canvas{
  opacity:0.6;
  width: 100vw;
  height: 100vh;
}
#main {
  background-color: rgba(0,0,0,0.4);
  background-position: center center;
  background-size: 100% 100%; }
  #main .container {
    display: block;
        background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    height: 100%;
        width: 100vw; }
    #main .container:before {
      display: none;
      position: absolute;
      content: "";
      top: 0;
      right: 0;
      width: 50%;
      background: rgba(40, 95, 135, 0.62);
      height: 100%;
      transform: skewX(-20deg);
      margin-right: -10%;
      box-shadow: 23px 0px 30px -23px rgba(40, 95, 135, 0.62); }
    #main .container:after {
      display: none;
      position: absolute;
      content: "";
      top: 0;
      right: 0;
      width: 45%;
      background: rgb(40, 95, 135);
      height: 100%;
      transform: skewX(-20deg);
      margin-right: -10%;
      box-shadow: 23px 0px 30px -23px rgba(230, 126, 34, 0.6); }
    #main .container img {
      display: block;

      margin: 30px auto; }
    #main .container .left {

      position: absolute;
          left: 35vw;
    top: 10vw;
      display: inline-flex;
      flex-direction: column; }

      @media screen and (max-width:850px){
        #main .container .left{
          left: 30vw !important;
          top: 20vh !important;

        }
        #faq .main{
          margin-left:-25vw!important;
        }

      }
      @media screen and (max-width: 600px){
        #main .container .left{
          left: 0vw !important;
          top: 15vh !important;
          width: 100% !important;
        }
        #faq .main{
          margin-left:-35vw!important;
        }
        #footer .row {
          padding: 0 10%!important;
      }
      }
      #main .container .left .title-desc, #main .container .left .title, #main .container .left .hashtag {
        display: inline-block;
        text-align: center; }
      #main .container .left .title span {
        display: inline-block;
        text-align: center;
        font-size: 115px;
        line-height: 74px;
        color: white;
        font-family: "Oswald", sans-serif; }
         #main .container .left .title #stroky{
              -webkit-text-stroke-color: #285f87;
               -webkit-text-stroke-width: 2px;
         }

        #main .container .left .title span:last-child {
          color: #285f87; }
      #main .container .left .title-desc {
        color: rgba(255, 255, 255, 0.7);
        font-size: 20px;
        margin-top:10px;
        }
      #main .container .left .hashtag {
        font-size: 42px;
        line-height: 52px;
        margin: 10px;
        color: #27597c; }
    #main .container .right {
      position: absolute;
      right: 100px;
      bottom: auto;
      z-index: 5;
      top: 20%; }
      #main .container .right .box {
        display: flex;
        padding: 20px 30px; }
        #main .container .right .box i {
          display: inline-block;
          font-size: 32px;
          color: white;
          margin: 5px;
          padding: 4px; }
        #main .container .right .box span {
          display: inline-block;
          color: white;
          font-size: 24px;
          margin: 5px;
          padding: 2px; }
        #main .container .right .box a {
          display: block;
          padding: 20px 30px;
          font-size: 28px;
          text-decoration: none;
          background: rgba(255, 255, 255, 0.7);
          box-shadow: 0px 23px 30px -10px rgba(0, 0, 0, 0.6);
          border-radius: 4px;
          color: #285f87;
          font-weight: 600; }

#about {
  margin-top: 10px;
  text-align: center;
  min-height: 400px;
  }

.about {
  padding: 20px 40px;
  margin: auto;
  width:50%;
  height: 110vh;
  font-size: 24px;
  color: rgba(255, 255, 255,0.6);
  padding: 40px 20px; }
  .about .about-container {
    margin-left: 200px;
    position: relative;
    top: 50%; }
    .about .about-container p {
      display: block;
      margin: 0;
	  margin-top:20px;
      text-align:justify; }
    .about .about-container .span {
      display: block;
      color: #285f87;
      padding: 10px 20px;
      text-align: center; }
    .about .about-container .icon-group {
      margin: 20px auto;
      display: inline-flex;
      text-align: center;
      width: 100%;
      justify-content: center; }
      .about .about-container .icon-group .icons {
        display: inline-flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: spaced-around; }
      .about .about-container .icon-group span {
        display: inline-block;
        text-align: center;
        font-size: 18px;
        padding: 0; }
      .about .about-container .icon-group i {
        display: inline-block;
        width: 100%;
        font-size: 42px; }
    .about .about-container #about-head {
      font-family: "PT Sans Narrow", sans-serif;
      text-align: center; }

@media screen and (max-width:599px) {
  #media{
    display: none !important;
  }
}
#main{
  height: 105vh;
}
#media {

  margin:10px 2px 2px 2px;
  height: auto;
  min-height: 0;
}
  #media .gallary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    cursor: pointer; }
    #media .gallary .grid-item, #media .gallary .grid-sizer {
      width: 33.33%; }
    #media .gallary .grid-item {
      padding:20px;
      float: right;
      overflow: visible; }
      #media .gallary .grid-item img:hover {
        transform: scale(1.1);
        transition: transform 0.6s linear;
        z-index:999;
        box-shadow:4px 4px 3px 4px rgba(0,0,0,0.5);  }
      #media .gallary .grid-item img {
        border-radius: 15px;
        display: block;
        width: 100%;
        height: 100%;
        transition: all 0.6s linear; }

      #media .gallary .grid-item .landscape {
        height: 40%; }
      #media .gallary .grid-item .potrait {
        height: 40%; }
      #media .gallary .grid-item .square {
        height: 40%; }



        .mib-container div.blur{
        filter :blur(5px);
        -webkit-filter: blur(5px);
        transition: filter ease .5s;
        }

        .mib-container div.active{
        -webkit-filter: none;
        filter: none;
        transition: filter ease .5s;
        }


        @media screen and (min-width:600px)
        {
          #stage{display:none;}
        }
        #stage {
          margin: 25% auto 1em 50%;
          height: 160px;
          -webkit-perspective: 700px;
          -webkit-perspective-origin: 0 50%;
          position:relative ;
          top:2px;
        }

        #rotator a {
          position: absolute;
          left: -81px;
        }
        #rotator a img {
        	/* padding: 3px;
          border: .5px solid rgba(40, 95, 135,0.6); */
          background: #fff;
          -webkit-backface-visibility: hidden;
          border-radius: 15px;
          box-shadow:2px 2px 2px 3px rgba(0,0,0,0.6);
        }

        #rotator a:nth-of-type(1) img {
          -webkit-transform: rotateY(-90deg) translateZ(300px);
          -moz-transform: rotateY(-90deg) translateZ(300px);
        }
        #rotator a:nth-of-type(2) img {
          -webkit-transform: rotateY(-60deg) translateZ(300px);
          -moz-transform: rotateY(-60deg) translateZ(300px);
        }
        #rotator a:nth-of-type(3) img {
          -webkit-transform: rotateY(-30deg) translateZ(300px);
          -moz-transform: rotateY(-30deg) translateZ(300px);
        }
        #rotator a:nth-of-type(4) img {
          -webkit-transform: translateZ(300px);
          -moz-transform: translateZ(300px);
          background: rgba(40, 95, 135,0.5);
        }
        #rotator a:nth-of-type(5) img {
          -webkit-transform: rotateY(30deg) translateZ(300px);
          -moz-transform: rotateY(30deg) translateZ(300px);
        }
        #rotator a:nth-of-type(6) img {
          -webkit-transform: rotateY(60deg) translateZ(300px);
          -moz-transform: rotateY(60deg) translateZ(300px);
        }
        #rotator a:nth-of-type(n+7) { display: none; }



        @-webkit-keyframes rotator {
          from { -webkit-transform: rotateY(0deg);  -moz-transform: rotateY(0deg);}
          to   { -webkit-transform: rotateY(30deg); -moz-transform: rotateY(30deg);  }
        }

        #rotator {
          -webkit-transform-origin: 0 0;
          -moz-transform-origin: 0 0;
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
          -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
          -moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
          -webkit-animation-duration: 3s;
          -moz-animation-duration: 3s;
          -webkit-animation-delay: 0s;
          -moz-animation-delay: 0s;
        }
        #rotator:hover {
          -webkit-animation-play-state: paused;
          -moz-animation-play-state: paused;
        }



        #app {
          margin: 0 0;
          font-family: "Raleway";
          font-size: 14px;
          font-weight: 500;
          -webkit-font-smoothing: antialiased;
        }


        #app p {
          line-height: 1.3em;
        }

        #app h1 + p,#app  p + p {
          margin-top: 10px;
        }

        #app {
          padding: 40px 150px!important;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;

        }

        #app .card-wrap {
          margin: 10px;
          -webkit-transform: perspective(800px);
                  transform: perspective(800px);
          -webkit-transform-style: preserve-3d;
                  transform-style: preserve-3d;
          cursor: pointer;
        }
        #app .card-wrap:hover .card-info p {
          opacity: 1;
        }
        #app .card-wrap:hover .card-info,#app  .card-wrap:hover .card-info p {
          -webkit-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }
        #app .card-wrap:hover .card-bg {
          -webkit-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
          transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
          opacity: 0.8;
        }
        #app  .card-wrap:hover .card {
          -webkit-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), -webkit-box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
          transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), -webkit-box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
          transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
          transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1), -webkit-box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
          -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, white 0 0 0 1px, rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset white 0 0 0 6px;
                  box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, white 0 0 0 1px, rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset white 0 0 0 6px;
        }

        #app .card {
          position: relative;
          -webkit-box-flex: 0;
              -ms-flex: 0 0 240px;
                  flex: 0 0 240px;
          width: 240px;
          height: 490px;
          background-color: #333;
          overflow: hidden;
          border-radius: 10px;
          -webkit-box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
                  box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
          -webkit-transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
          transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
        }

        #app .card-bg {
          opacity: 0.5;
          position: absolute;
          top: -20px;
          left: -20px;
          width: 100%;
          height: 100%;
          padding: 20px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          -webkit-transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
          transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
          pointer-events: none;
        }

        #app .card-info {
          padding: 20px;
          position: absolute;
          top: 0;
          color: #fff;
          -webkit-transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
          transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        #app .card-info p {
          -webkit-transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
          transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        #app .card-info * {
          position: relative;
          z-index: 1;
        }
        #app .card-info:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
          width: 100%;
          height: 100%;
          background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.6)));
          background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
          background-blend-mode: overlay;
          opacity: 0;
          -webkit-transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
          transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
        }

        #app .card-info h1 {
          font-family:Arial, Helvetica, sans-serif;
          font-size: 24px;
          color: white !important;
          font-weight: 400;
          text-align: center;
          text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;
        margin-top:7px;
        }
        #app .card-info p{
          font-size: 14px;
          color:#bbb;
        font-weight:lighter;
        font-family: "PT Sans Narrow", sans-serif;
        text-align:justify;

        }
        #app img{
        margin-bottom:7px;
        }
        #app .vv{
        text-align:center;
        font-size:14px;
        color:#ccc;

        width:100%;
        font-family: "PT Sans Narrow", sans-serif;
        font-stretch:extra-expanded;
        letter-spacing:1px;
        text-decoration:underline;


        }

#faq {
  margin-top: 10px;
  width: auto;
  height: auto;
  padding: 40px 0;
  min-height: 110vh;}

.faq-span{
  font-weight:bold;
      font-size:1.6em;
      letter-spacing:-0.4px;
    }
#sponsors {
  margin-top: 10px;
  height: auto;
  padding: 20px 30px;
  padding-bottom: 250px;
  overflow: hidden; }
  #sponsors .bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -10;
    background-position: center center;
    background-size: 100% 120%; }
  #sponsors .mega, #sponsors .others, #sponsors .media-partners {
    display: inline-block;
    flex-direction: column;
    text-align: center;
    width: 100%; }
    #sponsors .mega .comp-logo, #sponsors .others .comp-logo, #sponsors .media-partners .comp-logo {
      display: inline-flex;
      flex-direction: column;
      padding: 10px 20px; }
      #sponsors .mega .comp-logo img, #sponsors .others .comp-logo img, #sponsors .media-partners .comp-logo img {
        display: inline-block;
        margin: 10px;
        vertical-align: center; }
      #sponsors .mega .comp-logo span, #sponsors .others .comp-logo span, #sponsors .media-partners .comp-logo span {
        display: inline-block;
        font-size: 24px;
        color: rgba(0, 0, 0, 0.9); }
  #sponsors .mega img {
    width: 240px;
    height: auto; }
  #sponsors .others img {
    max-width: 180px;
    height: auto;
    min-width: 120px; }
  #sponsors .media-partners img {
    max-width: 120px;
    height: auto; }
    .snip1344 {
    font-family: 'Open Sans', Arial, sans-serif;
    position: relative;
    /* float: left; */
    overflow: hidden;
    margin: 10px auto;
    min-width: 230px;
    max-width: 315px;
    width: 100%;
    color: #ffffff;
    text-align: center;
    line-height: 1.4em;
    background-image:url(Hackfest_files/pattern.png);
    max-height: 266px;
    border-radius: 20px;
    border:3px solid #4c4a4a;
    }




    .snip1344 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    }
    .snip1344 .background {
    width: 100%;
    opacity: 0.3;
    -webkit-filter: grayscale(100%) blur(4px);
    filter: grayscale(100%) blur(4px);
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    }
    .snip1344 figcaption {
    width: 100%;
    padding: 15px 25px;
    position: absolute;
    left: 0;
    top: 50%;
    }
    .snip1344 .profile {
    border-radius: 50%;
    position: absolute;
    bottom: 50%;
    left: 50%;
    max-width: 100px;
    opacity: 1;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.5);
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    }
    .snip1344 h3 {
    margin: 0 0 5px;
    font-weight: 400;
    font-size: 1.5em;
    }
    .snip1344 h3 span {
    display: block;
    font-size: 0.6em;
    color: #4355c7;
    opacity: 0.75;
    }
    .snip1344 i {
    padding: 10px 5px;
    display: inline-block;
    font-size: 22px;
    color: #ffffff;
    text-align: center;
    opacity: 0.65;
    }
    .snip1344 a {
    text-decoration: none;
    }
    .snip1344 i:hover {
    opacity: 1;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    }
    .snip1344:hover .background,
    .snip1344.hover .background {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    }
    body {
    background-color: #212121;
    }


#footer {
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.78);
  z-index: 16;
  height: auto;
  font-family: "PT Sans Narrow", sans-serif;
  padding: 10px 0; }
  #footer:after {
    display: none;
    content: "";
    position: absolute;
    top: -100px;
    background: #222222;
    left: 0;
    z-index: -1;
    transform: skewY(-6deg);
    width: 100%;
    height: 83%; }
  #footer .footer {
    width: 100%; }
    #footer .footer h2 {
      display: inline-block;
      width: 100%;
      text-align: center;
      color: white;
      font-size: 32px; }
    #footer .footer span {
      width: 100%;
      display: inline-block;
      text-align: center;
      color: white; }
    #footer .footer .contact {
      display: flex;
      flex-direction: column;
      height: auto;
      justify-content: center;
      margin: 10px auto;
      color: #eee;
      opacity: 0; }
      #footer .footer .contact .links {
        width: auto;
        padding:0px;
        text-align: center; }
        #footer .footer .contact .links i {
          font-size: 25px;
          color: white;
          margin: 0px;
          background: white;
          padding: 3px 0px;
          border-radius: 4px;
          width: 25px; }

      #footer .footer .contact .details {
        width: auto;
        padding: 20px 30px;
        text-align: center;
        line-height: 32px;
        font-size: 22px; }
        #footer .footer .contact .details a {
          background: transparent;
          text-decoration: underline;
          color: #073ca8; }
    #footer .footer .team {
      display: flex;
      justify-content: center; }

      #footer .footer .team .team-card {
        width: auto;
        height: auto;
        margin: 10px;
        padding: 10px;
        background: #999;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow-y: hidden;
            border-radius: 20px;
                box-shadow: 7px 5px 6px 0px rgba(0,0,0,0.6);
             }
        #footer .footer .team .team-card span {
          display: block;
          text-align: center; }
    #footer .footer .footer-links {
      display: inline-block;
      text-align: center;
      width: 100%; }
      #footer .footer .footer-links a {
        color: white; }
        #footer .our-team-box h3{
          color:white;
        }

        #footer .row{
          padding:0 5%;
        }

        .team_card {
          background-color: #aaa6a6;
          box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
          transition: 0.3s;
          border-radius: 5px;
          margin: 4%;
              padding: 10px;
        }
        .team_card:hover {
          box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }

        .card_content {
          padding: 2px 16px;
        }
        .our-team-box{
          color:black;
          text-align: center;
        }
  #footer .our-team-box {
    width: 70%;
    margin: 0px auto;
  }
  #footer .our-team-box .our-team-indiv {
    display: flex;
    margin: 20px auto;
    justify-content: center;
    color: white; }
  #footer .our-team-box h3 {
    color: white;
    font-size: 2em;
    font-family: "PT Sans Narrow", sans-serif;
    text-align: center; }



@keyframes anim {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1); }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1); } }