@-webkit-keyframes content-slide-top {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@-moz-keyframes content-slide-top {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@-o-keyframes content-slide-top {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes content-slide-top {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* used for wrapper animation after the load of the page */
.tabs-wrapper {
	width: 100%;
	background-color: #cfbc90;
	border-top: #aaaaaa solid thin;
	border-left: #aaaaaa solid thin;
	border-right: #aaaaaa solid thin;
}

.tabs-wrapper input[type=radio] {
  display: none;
}
.tabs-wrapper label {
  font-family: arial;
  font-size: 12px;
  display: inline-block;
  color: #222222;
  background: #f3ecd5;
  text-align: center;
  line-height: 2.5em;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 4px;
}
.tabs-wrapper label:hover {
  color:#222222;
  background-color: #ffffff;
}
@media screen and (max-width: 1600px) {
  .tabs-wrapper label {
    /*width: 15%;*/
  }
}
@media screen and (max-width: 900px) {
  .tabs-wrapper label {
    /*width: 20%;*/
  }
}
@media screen and (max-width: 768px) {
  .tabs-wrapper label {
    width: 100%;
    display: block;
    /*border-bottom: 2px solid #4d4c47;*/
    border-radius: 0;
	border: #aaaaaa solid thin;
  }
}
@media screen and (max-width: 768px) {
  .tabs-wrapper {
    margin: 0;
  }
}

/*#tab1:checked + label, #tab2:checked + label, #tab3:checked + label, #tab4:checked + label*/
.tabs-wrapper {
	width: 100%;
	background-color: #cfbc90;
}

.tab-head:checked + label {
  	background-color: #ffffff;
    color: #222222;
}

.tab-body {
  position: absolute;
  /*top: -9999px;*/
  opacity: 0;
  padding-left: .5em;
  padding-right: .1em;

}

.tab-body-wrapper {
  background: #ffffff;
  border-bottom: #aaaaaa solid thin;
  border-top: #ffffff solid thin;
}
#tab1:checked ~ .tab-body-wrapper #tab-body-1, #tab2:checked ~ .tab-body-wrapper #tab-body-2, #tab3:checked ~ .tab-body-wrapper #tab-body-3, #tab4:checked ~ .tab-body-wrapper #tab-body-4, #tab5:checked ~ .tab-body-wrapper #tab-body-5, #tab6:checked ~ .tab-body-wrapper #tab-body-6, #tab7:checked ~ .tab-body-wrapper #tab-body-7, #tab8:checked ~ .tab-body-wrapper #tab-body-8, #tab9:checked ~ .tab-body-wrapper #tab-body-9, #tab10:checked ~ .tab-body-wrapper #tab-body-10
{
  position: relative;
  -webkit-animation-name: content-slide-top;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: content-slide-top;
  -moz-animation-fill-mode: forwards;
  -o-animation-name: content-slide-top;
  -o-animation-fill-mode: forwards;
  animation-name: content-slide-top;
  animation-fill-mode: forwards;
  opacity: 1;
}
@media only screen and (max-width: 768px) {
  .tab-body-wrapper {
    border: #aaaaaa solid thin;
    border-radius: 0;
  }
  .tab-body {
  position: absolute;
  /*top: -9999px;*/
  opacity: 0;
  padding-left: .5em;
  padding-right: .1em;

}
  #tab1:checked ~ .tab-body-wrapper #tab-body-1, #tab2:checked ~ .tab-body-wrapper #tab-body-2, #tab3:checked ~ .tab-body-wrapper #tab-body-3, #tab4:checked ~ .tab-body-wrapper #tab-body-4, #tab5:checked ~ .tab-body-wrapper #tab-body-5, #tab6:checked ~ .tab-body-wrapper #tab-body-6, #tab7:checked ~ .tab-body-wrapper #tab-body-7, #tab8:checked ~ .tab-body-wrapper #tab-body-8, #tab9:checked ~ .tab-body-wrapper #tab-body-9, #tab10:checked ~ .tab-body-wrapper #tab-body-10
{
  position: relative;
  -webkit-animation-name: content-slide-top;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: content-slide-top;
  -moz-animation-fill-mode: forwards;
  -o-animation-name: content-slide-top;
  -o-animation-fill-mode: forwards;
  animation-name: content-slide-top;
  animation-fill-mode: forwards;
  opacity: 1;
}
}