#fancyTabWidget{ overflow-x: hidden;}


#myTabContent{ text-align: center;}

.course-title img{ text-align: center; margin: 0 auto;}



.fancyTab.active .tab-tech .fa, .fancyTab.active a.tab-tech:focus{color:#1ba0ac;}
.fancyTab.active .tab-inter .fa, .fancyTab.active a.tab-inter:focus{color:#8c66b8;}
.fancyTab.active .tab-nature .fa, .fancyTab.active a.tab-nature:focus{color:#49a11a;}
.fancyTab.active .tab-logic .fa, .fancyTab.active a.tab-logic:focus{color:#e1568c;}
.fancyTab.active .tab-language .fa, .fancyTab.active a.tab-language:focus{color:#338dbb;}
.fancyTab.active .tab-art .fa, .fancyTab.active a.tab-art:focus{color:#db7123;}



.title-tab-tech, .title-tab-inter, .title-tab-nature, .title-tab-logic, .title-tab-language, .title-tab-art{ border-radius: 50px; width: 90%; margin: 30px auto; padding: 0;}
.title-tab-tech{ background: #1ba0ac;}
.title-tab-inter{ background: #8c66b8;}
.title-tab-nature{ background: #49a11a;}
.title-tab-logic{ background: #e1568c;}
.title-tab-language{ background: #338dbb;}
.title-tab-art{ background: #db7123;}



#myTabContent h2,h3,i{ display: inline-block; color:#fff;}
#myTabContent h2{ font-size: 40px; font-weight: 800;}
#myTabContent h3{ font-size: 30px; border-left: 1px solid #FFFFFF; margin-left: 20px; padding-left: 20px;}
#myTabContent i{ font-size: 40px; margin-right: 10px;}
.tab-break{ display: inline-block;}



.fancyTab{text-align:center;padding:15px 0;background-color:#eee;box-shadow:0 0 0 1px #ddd;top:15px;transition:top .2s}
.fancyTab.active{top:0;transition:top .2s}
.whiteBlock{display:none}
.fancyTab.active .whiteBlock{display:block;height:2px;bottom:-2px;background-color:#fff;width:99%;position:absolute;z-index:1}
.fancyTab a{font-size:2em;font-weight:600;transition:.2s;color:#333}

/*.fancyTab .hidden-xs {
  white-space:nowrap;
}*/

.fancyTabs{border-bottom:2px solid #ddd;margin:15px 0 0}
li.fancyTab a{padding-top:15px;top:-15px;padding-bottom:0}
li.fancyTab.active a{padding-top:inherit}
.fancyTab .fa{font-size:40px;width:100%;padding:15px 0 5px;color:#666}
.fancyTab.active .fa{color:#cfb87c}
.fancyTab a:focus{outline:none}
.fancyTabContent{border-color:transparent;box-shadow:0 -2px 0 -1px #fff,0 0 0 1px #ddd;padding:0;position:relative;background-color:#fff}
.nav-tabs > li.fancyTab.active > a,.nav-tabs > li.fancyTab.active > a:focus,.nav-tabs > li.fancyTab.active > a:hover{border-width:0}

.nav-tabs > li.fancyTab:hover{background-color:#f9f9f9;box-shadow:0 0 0 1px #ddd}

.nav-tabs > li.fancyTab.active:hover{background-color:#fff;box-shadow:1px 1px 0 1px #fff,0 0 0 1px #ddd,-1px 1px 0 0 #ddd inset}
.nav-tabs > li.fancyTab:hover a{border-color:transparent}
.nav.nav-tabs .fancyTab a[data-toggle="tab"]{background-color:transparent;border-bottom:0}
.nav-tabs > li.fancyTab:hover a{border-right:1px solid transparent}
.nav-tabs > li.fancyTab > a{margin-right:0;border-top:0;padding-bottom:30px;margin-bottom:-30px}
.nav-tabs > li.fancyTab{margin-right:0;margin-bottom:0}
.nav-tabs > li.fancyTab:last-child a{border-right:1px solid transparent}
.nav-tabs > li.fancyTab.active:last-child{border-right:0 solid #ddd;box-shadow:0 2px 0 0 #fff,0 0 0 1px #ddd}
.fancyTab:last-child{box-shadow:0 0 0 1px #ddd}
.tabs .nav-tabs li.fancyTab.active a{box-shadow:none;top:0}
.fancyTab.active{background:#fff;box-shadow:1px 1px 0 1px #fff,0 0 0 1px #ddd,-1px 1px 0 0 #ddd inset;padding-bottom:30px}
.arrow-down{display:none;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:22px solid #ddd;position:absolute;top:-1px;left:calc(50% - 20px)}
.arrow-down-inner{width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:12px solid #fff;position:absolute;top:-22px;left:-18px}
.fancyTab.active .arrow-down{display:block}

@media (max-width: 1200px) {
.fancyTab .fa{font-size:36px}
.fancyTab .hidden-xs{font-size:22px}
	
@media (max-width: 992px) {    
.fancyTab .fa{font-size:33px}
.fancyTab .hidden-xs{font-size:18px;font-weight:400}
}
	
	
@media (max-width: 768px) {
	
.fancyTab > a{font-size:18px}
.nav > li.fancyTab > a{padding:15px 0;margin-bottom:inherit}
.fancyTab .fa{font-size:30px}
.nav-tabs > li.fancyTab > a{border-right:1px solid transparent;padding-bottom:0}
.fancyTab.active .fa{color:#333}
	
	
	.title-tab-tech, .title-tab-inter, .title-tab-nature, .title-tab-logic, .title-tab-language, .title-tab-art{ border-radius: 20px; width: 90%; margin: 30px auto; padding: 20px 10px 0 10px; display: table;}
	
	.tab-break{ display: block;}
	.tab-comma{ display: none;}
	#myTabContent h3{ display: block; color:#fff;}
	#myTabContent h2,i{ display: inline-block; color:#fff;}
#myTabContent h2{ font-size: 32px; font-weight: 800; padding: 0; margin: 0;}
#myTabContent h3{ font-size: 22px; line-height: 130%; border-top: 1px solid #FFFFFF; border-left: none; margin-left: 0px; padding-left: 0px; margin-top: 10px; padding-top: 10px;}
#myTabContent i{ font-size: 30px; margin: 0 5px;}
		
}