body{margin:0;padding:0;overflow-x:hidden}.wrapper{max-width:1200px;margin:20px auto}.wrapper>h1{text-align:center}.wrapper>h1 span{border-bottom:2px solid #069;display:inline-block;padding:0 10px 10px;color:#069;transition:all 0.5s linear}.tab_wrapper{margin:10px 0;display:inline-block;width:100%;position:relative}.tab_wrapper>ul{clear:both;display:inline-block;list-style:none;margin:0;padding:0;width:100%;border-bottom:1px solid #069}.tab_wrapper>ul li{float:left;cursor:pointer;font-weight:bold;padding:8px 18px;text-transform:none;border:1px solid #aaa;font-size:1.05em;border-bottom:0;position:relative;border-top:3px solid #aaa;color:#888;margin:0 5px 0 0}.tab_wrapper>ul li.active{border-color:#069;color:#069}.tab_wrapper>ul li.active:after{content:"";position:absolute;bottom:-1px;height:1px;left:0;background:transparent;width:100%}.tab_wrapper>ul.tab_list>li:not(.active){background:#ddd}.tab_wrapper .controller{display:block;overflow:hidden;clear:both;position:absolute;top:0;right:0}.tab_wrapper .controller span{padding:8px 22px;background:#069;color:transparent;text-transform:none;display:inline-block}.tab_wrapper .controller span.next{float:right;margin-left:10px}.tab_wrapper .content_wrapper{float:left;width:100%;border:1px solid #069;border-top:0;box-sizing:border-box;margin-top:-6px}.tab_wrapper .content_wrapper .tab_content{display:none;padding:15px 20px;width:100%}.tab_wrapper .content_wrapper .tab_content.active{}.tab_wrapper .content_wrapper .tab_content .error{color:red}.tab_wrapper .content_wrapper .accordian_header{display:none;padding:10px 20px;text-transform:none;font-weight:bold;border-top:1px solid #aaa;border-bottom:1px solid transparent;background:transparent;position:relative;cursor:pointer}.tab_wrapper .content_wrapper .accordian_header.active{color:#069;border-bottom:1px solid #aaa;background:transparent}.tab_wrapper .content_wrapper .accordian_header.active:after{position:absolute;top:0;left:0;content:"";width:5px;height:100%}.tab_wrapper .content_wrapper .accordian_header .arrow{float:right;display:inline-block;width:12px;height:12px;position:relative;border-radius:2px;transform:rotate(-135deg);background:transparent;border-top:3px solid #aaa;border-left:3px solid #aaa}.tab_wrapper .content_wrapper .accordian_header.active .arrow{transform:rotate(45deg);margin-top:5px;border-top:3px solid #069;border-left:3px solid #069;background:transparent !important}.tab_wrapper.left_side>ul{width:25%;float:left;border-bottom:1px solid #aaa}.tab_wrapper.left_side>ul li{width:100%;box-sizing:border-box;margin:0;padding:12px 18px;border-width:1px;border-right:0;border-left:0}.tab_wrapper.left_side>ul li:after{left:0;top:0;content:"";position:absolute;width:5px;height:100%;background:#aaa}.tab_wrapper.left_side>ul li.active{border-color:#aaa}.tab_wrapper.left_side>ul li.active:after{left:0;top:0;width:5px;height:100%;background:#069}.tab_wrapper.left_side>ul li.active:before{right:-1px;position:absolute;top:0;content:"";width:2px;height:100%;background:transparent}.tab_wrapper.left_side .content_wrapper{width:75%;border:1px solid #aaa;float:left}.tab_wrapper.left_side .controller{top:-50px}.tab_wrapper.right_side>ul{width:25%;float:right;border-bottom:1px solid #aaa}.tab_wrapper.right_side>ul li{width:100%;box-sizing:border-box;margin:0;padding:12px 18px;border-width:1px;border-right:0;border-left:0;text-align:right}.tab_wrapper.right_side>ul li:after{right:0;left:inherit;top:0;content:"";position:absolute;width:5px;height:100%;background:#aaa}.tab_wrapper.right_side>ul li.active{border-color:#aaa}.tab_wrapper.right_side>ul li.active:after{right:0;left:inherit;top:0;width:5px;height:100%;content:"";background:#069}.tab_wrapper.right_side>ul li.active:before{left:-2px;right:inherit;position:absolute;top:0;content:"";width:2px;height:100%;background:transparent}.tab_wrapper.right_side .content_wrapper{width:75%;float:left;border:1px solid #aaa}.tab_wrapper.right_side .controller{top:-50px}.tab_wrapper.accordion .content_wrapper{border-color:#aaa}.tab_wrapper.accordion .content_wrapper .accordian_header{display:block}.tab_wrapper.accordion>ul{display:none}@media only screen and (max-width:736px){.tab_wrapper>ul{display:none}.tab_wrapper .content_wrapper{border:0;display:block}.tab_wrapper .content_wrapper .accordian_header{display:block}.tab_wrapper.left_side .content_wrapper,.tab_wrapper.right_side .content_wrapper{width:100%;border-top:0}.tab_wrapper .controller{display:none}}.tab_content,.tab_list li{animation:fadeEffect 0.7s}@keyframes fadeEffect{from{opacity:0}to{opacity:1}}