.div-centered
{
    
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.tab-pane 
{
    padding:40px;
    font-size: 18px;
	text-align: center;	
	text-decoration: none;
	color: #ffffff;
	background: #FFF7ED;
	
    -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	   -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        	border: 0px solid #000000;
	-webkit-transition: padding 0.2s ease, margin 0.2s ease;
       -moz-transition: padding 0.2s ease, margin 0.2s ease;
         -o-transition: padding 0.2s ease, margin 0.2s ease;
        -ms-transition: padding 0.2s ease, margin 0.2s ease;
            transition: padding 0.2s ease, margin 0.2s ease;
}

.tab-pane h3 
{
    color:#7C2011;
	
}

ul .nav-tabs 
{
    width: 390px;
	height: 80px;
	margin: 0 auto;
	list-style: none;
	overflow: hidden;
    padding: 0;
}


ul .nav-tabs li a
{
    text-align: center;	
	text-decoration: none;
	color: #7C2011;/*#ffffff;*/
	background: #6edeef;
	
    -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	   -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        	border: 0px solid #000000;
	-webkit-transition: padding 0.2s ease, margin 0.2s ease;
       -moz-transition: padding 0.2s ease, margin 0.2s ease;
         -o-transition: padding 0.2s ease, margin 0.2s ease;
        -ms-transition: padding 0.2s ease, margin 0.2s ease;
            transition: padding 0.2s ease, margin 0.2s ease;
}

ul.nav-tabs li a 
{
    background-color: #FFF7ED;
    color: #7C2011;/*#ffffff;*/
    font-weight:800;
}

 
ul.tabs li a:hover {
	margin: 35px 0 0 0;
	padding: 10px 0 5px 0;
}
ul.tabs li a.active {
	margin: 30px 0 0 0;
	padding: 10px 0 10px 0;
	background: #545f60;
	color: #6edeef;
	/*color: #ff6831;*/
	z-index: 4;
	outline: none;
}

.nav-tabs {
    display: flex;
    justify-content: center;
    flex-direction: row;
}


    
  /*ANIMATIONS*/

  /*fade-in*/
    .fade-in 
    {
      animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.95);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
      /*end fade-in*/
    
    
    
    /*slide-in*/ 
    .slide-in 
    {
      animation: slide-in 0.5s ease-in-out;
    }

    @keyframes slide-in 
    {
    from {
        transform: translateX(-100%);
      }
      to {
        transform: translateX(0%);
      }
    }
    /* end slide-in*/ 

     
    /*slide-new*/ 
    .slide-new {
      animation: slide-new 0.5s ease-in-out;
    }

    @keyframes slide-new {
  from {
    transform: translateX(300%);
  }
  to {
    transform: translateX(0%);
  }
}
/*end slide-new*/ 


/*slide*/

    @keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

.sliding-element {
  animation: slide 2s ease infinite;
}
/*end slide*/

/*drop-in*/ 

    .drop-in {
      animation: drop-in 0.5s ease-in-out;
    }
    @keyframes drop-in {
    from {
      transform:
        rotate(-30deg) translateY(-100%);
      opacity: 0;
    }
    to {
      transform:
        rotate(0deg) translateY(0%);
      opacity: 1;
    }
  }

    /*end drop-in*/ 

    /*fancy-spin*/


    @keyframes fancy-spin {
    0% {
      transform: rotate(0turn) scale(1);
    }
    25% {
      transform: rotate(1turn) scale(1);
    }
    50% {
      transform: rotate(1turn) scale(1.5);
    }
    75% {
      transform: rotate(0turn) scale(1.5);
    }
    100% {
      transform: rotate(0turn) scale(1);
    }
  }
  
/*end fancy-spin*/

  
/*spinner*/
.spinner {
    animation: fancy-spin 2000ms;
    animation-iteration-count: infinite;
  }

  @keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.element {
  animation: slide 2s ease infinite;
}

/*end spinner*/
/*END ANIMATIONS*/