h1, h2, h3, h4, h5, p, a, ul, ol{
    margin: 0;
    padding: 0;
  }
  html{
    font-size: 100%;
  }
  h1{
    text-align: center;
    /*color: #D1B57C;*/
    color: #333;
    font-variant: small-caps;
    font-size: 28px;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    animation: fadeInDown .4s ease-in-out;
  }
  h2{
    padding: 15px 10px;
    text-align: center;
    color: #333;
    font-size:26px;
    font-variant: small-caps;
    background: rgba(255,255,255,10); /*rgba(146, 147, 147, .8)*/
    text-shadow: 0 2px 3px rgba(0,0,0,.3);
    animation: fadeInOnly .5s ease-in-out;
    box-shadow: 0 3px 2px rgba(0,0,0,.1);
    -webkit-animation: fadeInOnly .8s linear ease-in-out;
  }
  h3{
    font-size: 25px;
    text-align: center;
    padding: 15px 10px;
    color: #D1B57C;/*rgba(75,75,75,.8)*/ 
    background: #FFF;
    font-weight: 600;
    font-variant: small-caps;
    border-bottom: 1px solid rgba(146,147,147,.2);
  }
  h4{
    font-variant: small-caps;
    font-weight: 200;
    color: #D1B57C;
  }
  h5{
    font-size: 18px;
    font-weight: 200;
    color: #D1B57C;
  }
  h6{
    font-variant: small-caps;
    font-size: 16px;
    color: #777;
  }
  a{
    cursor: pointer;
  }
  body{
              font-family: 'Hind Siliguri', sans-serif;
              background: rgba(90, 84, 84, .7) url('https://clloud.githubusercontent.com/assets/8037580/18605179/85a080d2-7cbd-11e6-9079-ec09a8024662.png')repeat;
              height: 100%;
              width: 100%;
              font-size: 15px;
              line-height: 1.5em;
          }
          .card{
              position: relative;
              height: auto;
              margin: 20px auto;
              display: flex;
              justify-content: center;
              
  }
  .front{
    width: 350px;
    background: #EEE;
    box-shadow: 0 2px 3px rgba(0,0,0,0.16), 0 2px 3px rgba(0,0,0,0.23);
  }
          .top{
              padding-bottom: 50px;
          }
          .img-container img{
              height: 150px;
              width: 150px;
              left: 100px;
              top:50px;
              position: relative;
              overflow: hidden;
              border: 1px solid #DDD;
              padding: 5px;
              background: #FFF;
              border-radius: 50%;
              box-shadow: 0 1px 3px 0 rgba(75,75,75,0.5);
              animation: fadeInOnly .8s ease-in-out;
          }
          @keyframes fadeInOnly{
              0%{
                  opacity: 0;
              }
              100%{
                  opacity: 1;
              }
          }
          .img-rounded img{
              position: relative;
              border-radius: 50%;
              -moz-border-radius:50%;
              -webkit-border-radius:50%;
              border: 1px solid rgba(203,202,202,.2);
              top:20px;
              left: 0;
              width: 100px;
              height: 100px;
              z-index: 10;
              margin-left: 120px;
              animation: fadeIn .8s ease-in-out;
              margin-bottom: 20px;
              background: rgba(0,0,0,.10);
          }
          .description{
              padding: 15px;
              line-height: 1.6em;
          }
          .description p{
              animation: fadeInDown .6s ease-in-out;
              font-size: 15px;
/*               color: #888; */
              color: #333;
              text-align: center;
              text-shadow: 0 1px 1px rgba(0,0,0,.020);
          }
          @keyframes fadeInDown {
            from {
              opacity: 0;
              -webkit-transform: translate3d(0, -100%, 0);
              -o-transform: translate3d(0, -100%, 0);
              transform: translate3d(0, -100%, 0);
            }
  
            to {
              opacity: 1;
              -webkit-transform: none;
              transform: none;
            }
          }
          .list li{
              list-style: none;
              background: rgba(255,255,255,10);
              display: block;
              border-bottom: 1px solid rgba(75,75,75,.080);
              font-size: 17px;
          }
          .list li a{
              display: block;
              text-decoration: none;
              padding: 15px 10px;
/*               color: #888; */
              color: #333;
              font-variant: small-caps;
              font-weight: 500;
              text-shadow: 0 1px 2px rgba(75, 75, 75, .1);
          }
  .list li a i{
    color:#D1B57C;
    padding-right:5px;
  }
          .list li:first-child{
              animation: slideInLeft .2s ease-in-out;
          }
          .list li:nth-child(2){
              animation: slideInLeft .4s ease-in-out;
          }
          .list li:nth-child(3){
              animation: slideInLeft .6s ease-in-out;
          }
          .list li:nth-child(4){
              animation: slideInLeft .8s ease-in-out;
          }
          .list li:last-child{
              animation: slideInLeft 1s ease-in-out;
              border: 0;
          }
          .list li a:hover{
              background: rgba(0,0,0,.4);
              color: #FFF !important;
          }
          .list li span i{
              display: block;
          }
          @keyframes slideInLeft {
            from {
              -webkit-transform: translate3d(-25%, 0, 0);
              transform: translate3d(-25%, 0, 0);
              visibility: visible;
            }
  
            to {
              -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
            }
          }
  
          .list-content{
              background: #F5F5F5;
              height: auto;
              z-index: 10;
                display: none; 
              animation: fadeIn .5s ease-in-out;
              overflow-x:hidden;
              box-shadow: 0 2px 0px 0px rgba(0,0,0,0.16), 0 2px 0px 0px rgba(0,0,0,0.23);
              width: 100%;
              
          }
          .list-border li{
              list-style: none;
              padding: 10px;
              padding-bottom: 10px;
              color: #888;
              margin: 10px 15px 10px 15px;
              background: #FFF;
              border: 1px solid rgba(203,202,202,.4);
              border-radius: 4px;
              animation: fadeInUp .8s ease-in-out;
          }
          @keyframes fadeIn{
              from{
                  opacity: 0;
                  transform: rotateY(180deg);
                  transform-style: preserve-3d;
              }
              to{
                  opacity: 1;
              }
          }
          @keyframes fadeInUp {
            from {
              opacity: 0;
              -webkit-transform: translate3d(0, 50%, 0);
              transform: translate3d(0, 50%, 0);
            }
  
            to {
              -webkit-transform: none;
              transform: none;
            }
          }
          .profile{
            width: 350px;
            height: auto;
             display: none; 
          }
          .profile ul{
              margin-top: 20px;
          }
          .profile li strong{
              color: #56b880;
              font-weight: 200;
          }
          .profile p{
              margin: 10px;
              padding: 10px;
              color: #777;
          }
          .profile li i{
              font-size: 20px;
          }
          .skills{
              width: 350px;
              display: none;
          }
          .skills p{
              padding: 10px;
              margin: 10px;
          }
          .myLinks{
            width: 350px;
            display: none;
          }
          .myLinks p{
              padding: 10px;
              margin: 10px;
          }
          .myLinks .list-border a{
            display: block;
        }
          .myLinks .list-border h4{
              display: inline;
              vertical-align: 11px;
              font-size: 30px;
          }
           .myLinks .list-border h4:hover{
              cursor: pointer;
              -webkit-transition: all 0.3s;
              -moz-transition: all 0.3s;
              -ms-transition: all 0.3s;
              -o-transition: all 0.3s;
              transition: all 0.3s;
          }  
          .myLinks .list-border a{
            text-decoration: none;
        }
        .myLinks .list-border li:nth-child(1) h4:hover{
            color: black;

        }
        .myLinks .list-border li:nth-child(2) h4:hover{
            color: green;
        }
        .myLinks .list-border li:nth-child(3) h4:hover{
            color: #DB6D62;
        }
        
        .myLinks .list-border li:nth-child(1) i{
            font-size: 50px;
            color: black;
        }
        .myLinks .list-border li:nth-child(2) i{
            font-size: 50px;
            color: green;
        }
        .myLinks .list-border li:nth-child(3) img{
            width: 50px;
            height: 50px;
            color: black;
        }
          .btn-close{
              font-size: 20px;
              position: absolute;
              top:10px;
              cursor: pointer;
              text-align: center;
              background: #92C7C7;
              border-radius: 50%;
              -moz-border-radius:50%;
              -webkit-border-radius:50%;
              line-height: 35px;
              width: 35px;
              height: 35px;
              -webkit-transition: all 0.3s;
              -moz-transition: all 0.3s;
              -ms-transition: all 0.3s;
              -o-transition: all 0.3s;
              transition: all 0.3s;
          }
          a.btn-close i{
              color: rgba(0, 0, 0, .4);
          }
          .btn-close:hover{
              animation: fa-spin-fast .5s ease-in-out;
              -moz-animation:fa-spin-fast .5s ease-in-out;
              -webkit-animation: fa-spin-fast .5s ease-in-out;
          }
          @keyframes fa-spin-fast{
               0% {
                  -webkit-transform: rotate(0deg);
                  transform: rotate(0deg);
              }
              100% {
                  -webkit-transform: rotate(359deg);
                  transform: rotate(359deg);
              }
          }
          .fa-lg{
              font-size: 20px;
              color: #878;
          }
          .fa-times{
              color: #888;
          }
          
          @media only screen and (max-width: 700px) {
            /* For mobile phones: */
            .card {
              flex-direction: column;
            }
            .btn-close{
              top:515px;
              left: 3px;
            }
          }