/*
#####################################################################  
 1 .profile card
 2 .contents
 3 .footer
#####################################################################
*/





@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");

* {
  box-sizing: border-box;
}


/*
#####################################################################  
 1 .profile card
#####################################################################
*/

@media screen and (max-width: 768px) {
    #secondary{
        margin-top: 50px;
    }
}

#secondary a{
    text-decoration: none;
}

#secondary .card {
      
      margin: auto;
      overflow-y: auto;
      position: relative;
      z-index: 1;
      overflow-x: hidden;
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      transition: 0.3s;
      flex-direction: column;
      border-radius: 10px;
      box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
      margin-bottom: 30px;
    }
    #secondary .card[data-state="#about"] {
      height: 550px;
    }
    #secondary .card[data-state="#about"] .card-main {
      padding-top: 0;
    }
    #secondary .card[data-state="#contact"] {
      height: 430px;
    }
    #secondary .card[data-state="#experience"] {
      height: 550px;
    }
    #secondary .card.is-active .card-header {
      height: 80px;
    }
    #secondary .card.is-active .card-cover {
      height: 100px;
      top: -50px;
    }
    #secondary .card.is-active .card-avatar {
      transform: none;
      left: 20px;
      width: 50px;
      height: 50px;
      bottom: 10px;
    }
    #secondary .card.is-active .card-fullname,
    #secondary .card.is-active .card-jobtitle {
      left: 86px;
      transform: none;
    }
    #secondary .card.is-active .card-fullname {
      bottom: 18px;
      font-size: 19px;
    }
    #secondary .card.is-active .card-jobtitle {
      bottom: 16px;
      letter-spacing: 1px;
      font-size: 10px;
    }
    #secondary .card-header {
      position: relative;
      display: flex;
      height: 220px;
      flex-shrink: 0;
      width: 100%;
      transition: 0.3s;
      border: none;
      /*! padding-bottom: 40px; */
    }
    #secondary .card-header * {
      transition: 0.3s;
    }
    #secondary .card-cover {
      width: 100%;
      height: 100%;
      position: absolute;
      height: 160px;
      top: -20%;
      left: 0;
      will-change: top;
      background-size: cover;
      background-position: center;
      filter: blur(30px);
      transform: scale(1.2);
      transition: 0.5s;
    }
    #secondary .card-avatar {
      width: 100px;
      height: 100px;
      box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      object-position: center;
      object-fit: cover;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-64px);
    }
    #secondary .card-fullname {
      position: absolute;
      bottom: 23px;
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
      transform: translateY(-10px) translateX(-50%);
      left: 50%;
    }
    #secondary .card-jobtitle {
      position: absolute;
      bottom: 13px;
      font-size: 11px;
      white-space: nowrap;
      font-weight: 500;
      opacity: 0.7;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin: 0;
      left: 50%;
      transform: translateX(-50%) translateY(-7px);
    }
    #secondary .card-main {
      position: relative;
      flex: 1;
      display: flex;
      padding-top: 10px;
      flex-direction: column;
    }
    #secondary .card-subtitle {
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 8px;
    }
    #secondary .card-content {
      padding: 20px;
    }
    #secondary .card-desc {
      line-height: 1.6;
      color: #636b6f;
      font-size: 14px;
      margin: 0;
      font-weight: 400;
      font-family: "DM Sans", sans-serif;
    }
    #secondary .card-social {
      display: flex;
      align-items: center;
      padding: 0 20px;
      margin-bottom: 30px;
    }
    #secondary .card-social svg {
      fill: #a5b5ce;
      width: 16px;
      display: block;
      transition: 0.3s;
    }
    #secondary .card-social a {
      color: #8797a1;
      height: 32px;
      width: 32px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s;
      background-color: rgba(93, 133, 193, 0.05);
      border-radius: 50%;
      margin-right: 10px;
    }
    #secondary .card-social a:hover svg {
      fill: #637faa;
    }
    #secondary .card-social a:last-child {
      margin-right: 0;
    }
    #secondary .card-buttons {
      display: flex;
      background-color: #fff;
      margin-top: auto;
      position: sticky;
      bottom: 0;
      left: 0;
    }
    #secondary .card-buttons button {
      flex: 1 1 auto;
      user-select: none;
      background: 0;
      font-size: 13px;
      border: 0;
      padding: 15px 5px;
      cursor: pointer;
      color: #5c5c6d;
      transition: 0.3s;
      font-family: "Jost", sans-serif;
      font-weight: 500;
      outline: 0;
      border-bottom: 3px solid transparent;
    }
    #secondary .card-buttons button.is-active,
    #secondary .card-buttons button:hover {
      color: #2b2c48;
      border-bottom: 3px solid #fd3838;
      background: linear-gradient(
        to bottom,
        rgba(127, 199, 231, 0) 0%,
        rgba(207, 204, 255, 0.2) 44%,
        rgba(211, 226, 255, 0.4) 100%
      );
    }
    #secondary .card-section {
      display: none;
    }
    #secondary .card-section.is-active {
      display: block;
      animation: fadeIn 0.6s both;
    }
    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: translatey(40px);
      }
      100% {
        opacity: 1;
      }
    }
    #secondary .card-timeline {
      margin-top: 30px;
      position: relative;
    }
    #secondary .card-timeline:after {
      background: linear-gradient(
        to top,
        rgba(255, 229, 59, 0) 0%,
        rgba(253, 56, 56, 1) 100%
      );
      content: "";
      left: 42px;
      width: 2px;
      top: 0;
      height: 100%;
      position: absolute;
      content: "";
    }
    #secondary .card-item {
      position: relative;
      padding-left: 60px;
      padding-right: 20px;
      padding-bottom: 30px;
      z-index: 1;
    }
    #secondary .card-item:last-child {
      padding-bottom: 5px;
    }
    #secondary .card-item:after {
      content: attr(data-year);
      width: 10px;
      position: absolute;
      top: 0;
      left: 39px;
      width: 8px;
      height: 8px;
      line-height: 0.6;
      border: 2px solid #fff;
      font-size: 11px;
      text-indent: -35px;
      border-radius: 50%;
      color: rgba(134, 134, 134, 0.7);
      background: linear-gradient(to bottom, #ffe53b 0%, #fd3838 100%);
    }
    #secondary .card-item-title {
      font-weight: 500;
      font-size: 14px;
      margin-bottom: 5px;
    }
    #secondary .card-item-desc {
      font-size: 13px;
      color: #6f6f7b;
      line-height: 1.5;
      font-family: "DM Sans", sans-serif;
    }
    #secondary .card-contact-wrapper {
      margin-top: 20px;
    }
    #secondary .card-contact {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #6f6f7b;
      font-family: "DM Sans", sans-serif;
      line-height: 1.6;
      cursor: pointer;
    }
    #secondary .card-contact + .card-contact {
      margin-top: 16px;
    }
    #secondary .card-contact svg {
      flex-shrink: 0;
      width: 30px;
      min-height: 34px;
      margin-right: 12px;
      transition: 0.3s;
      padding-right: 12px;
      border-right: 1px solid #dfe2ec;
    }
    #secondary .contact-me {
      border: 0;
      outline: none;
      background: linear-gradient(
        to right,
        rgba(83, 200, 239, 0.8) 0%,
        rgba(81, 106, 204, 0.8) 96%
      );
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
      color: #fff;
      padding: 12px 16px;
      width: 100%;
      border-radius: 5px;
      margin-top: 25px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      font-family: "Jost", sans-serif;
      transition: 0.3s;
    }


    .file-manager h5 {
        text-transform: uppercase;
    }
    
    .folder-list li a {
        color: #666666;
        display: block;
        padding: 5px 0;
    }
    
    .folder-list li {
        border-bottom: 1px solid #e7eaec;
        display: block;
        font-size: 14px;
    }
    
    .folder-list li i {
        margin-right: 8px;
        color: #3d4d5d;
    }
    
    .file-manager h5.tag-title {
        margin-top: 20px;
    }
    
    .tag-list li {
        float: left;
    }
    
    .tag-list li a {
        font-size: 13px;
        background:linear-gradient(147deg, #ffe53b 0%, #fd3838 74%);
        padding: 5px 12px;
        color: inherit;
        border-radius: 2px;
        border: 1px solid linear-gradient(147deg, #ffe53b 0%, #fd3838 74%);;
        margin-right: 5px;
        margin-top: 5px;
        display: block;
        color: #FFF;
        border-radius: 5px;

    }
    
    ul.tag-list li {
        list-style: none;
    }
    
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }

    .ibox{
        margin-top: 30px;
    }


    .display-none {display:none;}

    .title-text {text-align:center;font-size:40px;color:#EEE;}
.sidebar-tabs-menu-1 {position:relative;margin:40px auto;width:275px;}

/* TAB RULES */
.sidebar-tabs-menu-1 .tab {position:relative;float:left;margin-bottom:-300%;}
.sidebar-tabs-menu-1 .tab .title {cursor:pointer;position:absolute;padding:18px 10px;background-color:#EEE;border-bottom:3px solid #E0346A;width:50%;z-index:1;text-align:center;}
.sidebar-tabs-menu-1 .tab .title.not-first {right:0;}

/* CHANGE TABS */
.sidebar-tabs-menu-1 input[type="radio"]:checked ~ .title {background-color:#E0346A;color:#EEE;}
.sidebar-tabs-menu-1 input[type="radio"]:checked ~ .reveal .lay-frame div {transform:translateX(0px);-webkit-transform:translateX(0px);opacity:1;z-index:1;}
.sidebar-tabs-menu-1 input[type="radio"]:checked ~  .reveal .text-frame div {transform:translateX(0px);-webkit-transform:translateX(0px);opacity:1;z-index:1;}

/* REVEALED RULES */
.sidebar-tabs-menu-1 .reveal {margin:58px 0 0 0;overflow:hidden;}

/* LAY RULES */
.sidebar-tabs-menu-1 .reveal .lay-frame {position:relative;float:left;cursor:pointer;overflow:hidden;margin-top:30px;margin-bottom:20px;width:100%;height:160px;}
.sidebar-tabs-menu-1 .reveal .lay-frame div {opacity:0;z-index:0;transform:translateX(200%);-webkit-transform:translateX(200%);}
.sidebar-tabs-menu-1 .reveal .underlay {position:relative;float:left;width:100%;height:100%;box-shadow:0 0 160px #444 inset;}
.sidebar-tabs-menu-1 .reveal .underlay h2 {text-align:center;color:#EEE;line-height:62px;}
.sidebar-tabs-menu-1 .reveal .overlay {position:relative;width:100%;height:100%;color:#EEE;background-color:rgba(0,0,0,0.35);z-index:1;top:100%;opacity:0;}

/* LAY HOVER RULES */
.sidebar-tabs-menu-1 .reveal .underlay:hover + .overlay {opacity:1;top:0;}
.sidebar-tabs-menu-1 .reveal .overlay:hover {opacity:1;top:0;}

/* READ MORE RULES */
.sidebar-tabs-menu-1 .reveal .overlay .readMore {position: absolute;bottom: 0;right: 0;padding: 14px 10px 15px;font-size: 22px;width: 100%;border-top: 1px solid #999;background-color: rgba(0,0,0,0.6);color: #fff;font-weight: 300;}
.sidebar-tabs-menu-1 .reveal .overlay .readMore > a {float: left;width: 100%;color:#EEE;text-decoration:none;}
.sidebar-tabs-menu-1 .reveal .overlay .readMore:hover {background-color:rgba(224, 52, 106,0.7);}
.sidebar-tabs-menu-1 .reveal .overlay .readMore:hover .arrow {cursor: pointer;border-color: transparent;border-width: 0;}
.sidebar-tabs-menu-1 .reveal .overlay .readMore:hover .arrow .arrow-mask {left: -15px;top: -29px;}

/* ARROW RULES */
.sidebar-tabs-menu-1 .reveal .overlay .arrow {border: 4px solid #DADADA;border-radius: 100%;width: 40px;height: 40px;position: absolute;right: 20px;bottom:9px;}
.sidebar-tabs-menu-1 .reveal .overlay .arrow .arrow-mask {position: relative;top: -33px;left: -32px;border: 21px solid transparent;}
.sidebar-tabs-menu-1 .reveal .overlay .arrow .arrow-mask:before {content: '';position: relative;float: left;top: 16px;left: 28px;width: 4px;height: 16px;background-color: #DADADA;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
.sidebar-tabs-menu-1 .reveal .overlay .arrow .arrow-mask:after {content: '';position: relative;float: left;top: 9px;left: 28px;width: 4px;height: 16px;background-color: #DADADA;transform: rotate(45deg);-webkit-transform: rotate(45deg);}

/* UNDERTEXT RULES */
.sidebar-tabs-menu-1 .reveal .text-frame div {position:relative;float:left;width:100%;opacity:0;z-index:0;transform:translateX(-300%);-webkit-transform:translateX(-300%);}
.sidebar-tabs-menu-1 .reveal .text-frame h2 {cursor:pointer;margin-top:-8px;margin-bottom:-8px;line-height:0.9;}
.sidebar-tabs-menu-1 .reveal .text-frame h2 a {font-size:16px;font-weight:300;text-transform:uppercase;color:#E0346A;}
.sidebar-tabs-menu-1 .reveal .text-frame h2 a:hover {color:rgba(224, 52, 106,0.75);}
.sidebar-tabs-menu-1 .reveal .text-frame p {cursor:auto;color:#EEE;}
.sidebar-tabs-menu-1 .reveal .text-frame .border-bottom {border-bottom:1px solid #9a9a9a;}


.sidebar-wrap .card{
  border: none;
  margin-top: 1px!important;
  margin-bottom: 0!important;
  border-radius: 0!important;
}

.sidebar-wrap .card::after{
  border-bottom:1px solid #e2e2e2;
  content:'';
}

.sidebar-wrap .card-text{
  margin-bottom: 0;
}

.sidebar-wrap p{
  margin-bottom: 0;
}

.sidebar-wrap .card-body{
  padding:15px 0 15px 0;
}

.sidebar-wrap .card-img{
  padding:15px 0 15px 0;
}

.sidebar-wrap .card-title{
  margin-top: 5px;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

aside#secondary{
  margin-bottom: 40px;
}


@media (min-width: 768px) and (max-width: 1024px) {

  #secondary .card-avatar{
    bottom:20%;
  }

  #secondary .card-header{
    height: 210px;
  }

  #secondary .card-fullname{
    bottom:0px;
  }
  
}