.tabs{width:100%;overflow:hidden;border:1px solid #ccc;display:flex;flex-direction:column}.tabs.is-left,.tabs.is-right{flex-direction:row}.tabs.is-left .tabs-links,.tabs.is-right .tabs-links{flex-direction:column;min-width:100px;flex:0.3}.tabs.is-left .tabs-links .tab-link,.tabs.is-right .tabs-links .tab-link{text-align:left}.tabs.is-left .tabs-contents,.tabs.is-right .tabs-contents{flex:1}.tabs.is-left .tabs-links{border-right:1px solid #ccc}.tabs.is-right{flex-direction:row-reverse}.tabs.is-right .tabs-links{border-left:1px solid #ccc}.tabs.is-top .tabs-links{border-bottom:1px solid #ccc}.tabs.is-bottom{flex-direction:column-reverse}.tabs.is-expanded .tabs-links .tab-link{flex:1}.tabs .tabs-links{display:flex;width:100%;background-color:#f1f1f1}.tabs .tabs-links .tab-link{background-color:inherit;border:none;outline:none;cursor:pointer;padding:14px 16px;transition:.3s;margin:0 0}.tabs .tabs-links .tab-link:hover{background-color:#ddd}.tabs .tabs-links .tab-link.is-active{background-color:#ccc}.tabs .tabs-contents .tab-content{display:none;padding:6px 12px;border-top:none}.tabs .tabs-contents .tab-content.is-active{display:block}.tabs.is-animated .tab-content{-webkit-animation:fadeEffect 1s;animation:fadeEffect 1s}@-webkit-keyframes fadeEffect{0%{opacity:0}to{opacity:1}}@keyframes fadeEffect{0%{opacity:0}to{opacity:1}}.tab-headers .tabs-links .is-active.tab-link{color:#fff}.tab-headers .tabs-links .is-active.tab-link:first-child{background-color:red}.tab-headers .tabs-links .is-active.tab-link:nth-child(2){background-color:green}.tab-headers .tabs-links .is-active.tab-link:nth-child(3){background-color:#00f}.tab-headers .tabs-links .is-active.tab-link:nth-child(4){background-color:orange}.tab-headers .tabs-contents #London{background-color:red}.tab-headers .tabs-contents #Paris{background-color:green}.tab-headers .tabs-contents #Tokyo{background-color:#00f}.tab-headers .tabs-contents #Oslo{background-color:orange}.tab-headers .tabs-contents .tab-content{text-align:center;padding:30px;color:#fff}