.tabs {/*position: relative;margin: 40px auto; */ height:555px}
.tabs::after{ clear:both}
.tabs input {position: absolute;z-index: 1000;width: 120px;height: 40px;left:-20px;top: 10px;
opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);cursor: pointer;}
.tabs input#tab-2{top: 64px}
.tabs input#tab-3{top: 125px}
.tabs input#tab-4{top: 180px}
.tabs label {display:block;width: 100px; color:#33c1ba; font-size:20px}
.tabs label:before {margin-left: -25px;content: '.';font-size: 98px;
    /* width: 50px; */
    /* height: 2px; */
    display: inline-block;margin-top: -54px; color:#888}
.tabs input:hover + label {box-shadow:4px 0 0px rgba(0,0,0,0.1)}
.tabs label:first-of-type {z-index: 4;box-shadow: 2px 0 2px rgba(0,0,0,0.1)}
.tab-label-2 {z-index: 3}
.tab-label-3 {z-index: 2}
.tab-label-4 {z-index: 1}
.tabs input:checked + label {border-right:1px solid #00b2a9;z-index: 6;
	-webkit-animation: page 0.2s linear;
    -moz-animation: page 0.2s linear;
    -ms-animation: page 0.2s linear;
    -o-animation: page 0.2s linear;
    animation: page 0.2s linear;
}

.clear-shadow {clear: both}

.tabs .content {/*position: relative; */float:right; width:80%}

.tabs .content div {
  	position: absolute;
	top:-30px;left:100px;
	padding: 10px 40px;
	z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.content-1, .content-3 {
	-webkit-transform: translateX(-150px);
	-moz-transform: translateX(-150px);
	-o-transform: translateX(-150px);
	-ms-transform: translateX(-150px);
	transform: translateX(-150px);
}

.content-2, .content-4 {
    -webkit-transform: translateX(150px);
	-moz-transform: translateX(150px);
	-o-transform: translateX(150px);
	-ms-transform: translateX(150px);
	transform: translateX(150px);
}

.tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 {
    -webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
    -moz-transition: all ease-out 0.2s 0.1s;
    -o-transition: all ease-out 0.2s 0.1s;
    -ms-transition: all ease-out 0.2s 0.1s;
    transition: all ease-out 0.2s 0.1s;
}

@keyframes "page" {
 0% {
    left: 0;
 }
 50% {
    left: 10px;
 }
 100% {
    left: 0;
 }

}

@-moz-keyframes page {
 0% {
   left: 0;
 }
 50% {
   left: 10px;
 }
 100% {
   left: 0;
 }

}

@-webkit-keyframes "page" {
 0% {
   left: 0;
 }
 50% {
   left: 10px;
 }
 100% {
   left: 0;
 }

}

@-ms-keyframes "page" {
 0% {
   left: 0;
 }
 50% {
   left: 10px;
 }
 100% {
   left: 0;
 }

}

@-o-keyframes "page" {
 0% {
   left: 0;
 }
 50% {
   left: 10px;
 }
 100% {
   left: 0;
 }

}