.tabcontainer {
    margin: 10%;
  }
  
h1, h2, h3, h4, h5, h6 {
    font-family: 'Source Sans Pro';
    font-weight:700;
  }
  
  .fancyTab {
      text-align: center;
    padding:15px 0;
    background-color: #eee;
      box-shadow: 0 0 0 1px #ddd;
      top:15px;	
    transition: top .2s;
  }
  
  .fancyTab.activetab {
    top:0;
    transition:top .2s;
  }
  
  .whiteBlock {
    display:none;
  }
  
  .fancyTab.activetab .whiteBlock {
    display:block;
    height:2px;
    bottom:-2px;
    background-color:#fff;
    width:99%;
    position:absolute;
    z-index:1;
  }
  
  .fancyTab a {
      font-family: 'Source Sans Pro';
      font-size:1.65em;
      font-weight:300;
    transition:.2s;
    color:#333;
  }
  
  /*.fancyTab .hidden-xs {
    white-space:nowrap;
  }*/
  
  .fancyTabs {
      border-bottom:2px solid #ddd;
    margin: 15px 0 0;
  }
  
  li.fancyTab a {
    padding-top: 15px;
    top:-15px;
    padding-bottom:0;
  }
  
  li.fancyTab.activetab a {
    padding-top: inherit;
  }
  
  .fancyTab .fa {
    font-size: 40px;
      width:100%;
      padding: 15px 0 5px;
    color:#666;
  }
  
  .fancyTab.activetab .fa {
    color: #1cc3b2;
  }
  
  .fancyTab a:focus {
      outline:none;
  }
  
  .fancyTabContent {
    border-color: transparent;
    box-shadow: 0 -2px 0 -1px #fff, 0 0 0 1px #ddd;
    padding: 30px 15px 15px;
    position:relative;
    background-color:#fff;
  }
  
  .nav-tabs > li.fancyTab.activetab > a, 
  .nav-tabs > li.fancyTab.activetab > a:focus,
  .nav-tabs > li.fancyTab.activetab > a:hover {
      border-width:0;
  }
  
  .nav-tabs > li.fancyTab:hover {
      background-color:#f9f9f9;
      box-shadow: 0 0 0 1px #ddd;
  }
  
  .nav-tabs > li.fancyTab.activetab:hover {
    background-color:#fff;
    box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
  }
  
  .nav-tabs > li.fancyTab:hover a {
      border-color:transparent;
  }
  
  .nav.nav-tabs .fancyTab a[data-toggle="tab"] {
    background-color:transparent;
    border-bottom:0;
  }
  
  .nav-tabs > li.fancyTab:hover a {
    border-right: 1px solid transparent;
  }
  
  .nav-tabs > li.fancyTab > a {
      margin-right:0;
      border-top:0;
    padding-bottom: 30px;
    margin-bottom: -30px;
  }
  
  .nav-tabs > li.fancyTab {
      margin-right:0;
      margin-bottom:0;
  }
  
  .nav-tabs > li.fancyTab:last-child a {
    border-right: 1px solid transparent;
  }
  
  .nav-tabs > li.fancyTab.activetab:last-child {
    border-right: 0px solid #ddd;
      box-shadow: 0px 2px 0 0px #fff, 0px 0px 0 1px #ddd;
  }
  
  .fancyTab:last-child {
    box-shadow: 0 0 0 1px #ddd;
  }
  
  .tabs .nav-tabs li.fancyTab.activetab a {
      box-shadow:none;
    top:0;
  }
  
  .nav>li {
    position: relative;
    display: block;
}
  .fancyTab.activetab {
    background: #fff;
      box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
    padding-bottom:30px;
  }
  
  .arrow-down {
      display:none;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 22px solid #ddd;
    position: absolute;
    top: -1px;
    left: calc(50% - 20px);
  }
  
  .arrow-down-inner {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 12px solid #fff;
    position: absolute;
    top: -22px;
    left: -18px;
  }
  
  .fancyTab.activetab .arrow-down {
    display: block;
  }

  hr { 
    border : 0;
    height: 1px; 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 
  }
  
  @media (max-width: 1200px) {
    
    .fancyTab .fa {
        font-size: 36px;
    }
    
    .fancyTab .hidden-xs {
      font-size:22px;
      }
          
  }
      
      
  @media (max-width: 992px) {
      
    .fancyTab .fa {
        font-size: 30px;
    }
      
    .fancyTab .hidden-xs {
        font-size:12px;
      font-weight:normal;
    }
          
  }
      
      
  @media (max-width: 768px) {
      
    .fancyTab > a {
      font-size:15px;
    }
      
    .nav > li.fancyTab > a {
      padding:15px 0;
      margin-bottom:inherit;
    }
      
    .fancyTab .fa {
      font-size:25px;
    }
      
    .nav-tabs > li.fancyTab > a {
      border-right:1px solid transparent;
      padding-bottom:0;
    }
      
    .fancyTab.activetab .fa {
      color: #333;
      }
          
  }


  .a , .b , .c , .d , .e  {
    background-color:#eee;
    width : 80%;
    height: auto;
    padding: 10px;
    border-left:5px solid;
    margin: 25px;
    outline: 10px solid #eee;
    }
    .a {
    border-left-color:#fdcf00
    }

    .b {
    border-left-color:#c5316a;
    

    }
    .c {
     border-left-color:#25cfbe
    }

    .d {
        border-left-color:#2680d4
       }

    .e {
        border-left-color:#c91f28
       }