/*-------------------------------------------------------------------------------------------------------------------------------*/
/* TAB SIMPLE BLOCK */
/*-------------------------------------------------------------------------------------------------------------------------------*/
.tab-one .tab-nav {position: relative;display: block;width: 100%;margin-bottom: 20px;}
.tab-one .tab-title {position: relative;display: none;padding: 12px 15px;letter-spacing: 1px;background: #2980b9;cursor: pointer;font-size: 18px;color: #fff;}
.tab-one .tab-title::before {position: absolute;content: '';top: 50%;right: 20px;margin-top: -8px;width: 12px;height: 12px;border-right: 2px solid #fff;border-bottom: 2px solid #fff;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.tab-one .tab-nav.active .tab-title::before {transform: rotate(-135deg);margin-top: -3px;}
.tab-one .tab-toggle div {cursor: pointer;display: inline-block;padding: 10px 15px;letter-spacing: 1px;font-size: 18px;color: #282828;-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.tab-one .tab-toggle div.active {background: #eee;color: #2980b9;}
.tab-one .tab {display: none;}
.tab-one .tab:first-child {display: block;}
/*media*/
@media(min-width: 1200px) {
	.tab-one .tab-toggle div:hover {color: #2980b9;}
}
@media (max-width: 991px) {
	.tab-one .tab-title {display: block;}
	.tab-one .tab-toggle {display: none;position: absolute;left: 0;top: 100%;width: 100%;background: #FFF;border: 1px solid #eee;}
	.tab-one .tab-nav.active .tab-toggle {display: block;}
	.tab-one .tab-toggle div {display: block;padding: 12px 15px;}
}
@media(max-width: 575px) {
	.tab-one .tab-nav {margin-bottom: 10px;}
	.tab-one .tab-title,.tab-one .tab-toggle div {font-size: 16px;padding: 12px;}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* TAB BLOCK ON LEFT*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
.tab-two {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-wrap: wrap;flex-wrap: wrap;width: 100%;}
.tab-two .tab-nav {position: relative;display: block;width: 30%;}
.tab-two .tab-title {position: relative;display: none;padding: 12px 15px;letter-spacing: 1px;background: #2980b9;cursor: pointer;font-size: 18px;color: #fff;}
.tab-two .tab-title::before {position: absolute;content: '';top: 50%;right: 20px;margin-top: -8px;width: 12px;height: 12px;border-right: 2px solid #fff;border-bottom: 2px solid #fff;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.tab-two .tab-nav.active .tab-title::before {transform: rotate(-135deg);margin-top: -3px;}
.tab-two .tab-toggle {position: relative;display: block;width: 100%;padding: 20px;}
.tab-two .tab-toggle div {cursor: pointer;display: inline-block;width: 100%;padding: 10px 15px;letter-spacing: 1px;font-size: 18px;color: #282828;-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.tab-two .tab-toggle div.active {background: #eee;color: #2980b9;}
.tab-two .tabs {position: relative;display: block;width: 70%;padding: 20px;border-left: 2px solid #2980b9;}
.tab-two .tab {display: none;}
.tab-two .tab:first-child {display: block;}
/*tab on right*/
.tab-two.right .tabs {border-left: none;border-right: 2px solid #2980b9;}
/*media*/
@media(min-width: 1200px) {
	.tab-two .tab-toggle div:hover {color: #2980b9;}
}
@media(max-width: 1366px) {
	.tab-two .tab-nav {width: 35%;}
	.tab-two .tabs {width: 65%;}
}
@media (max-width: 991px) {
	.tab-two .tab-title {display: block;}
	.tab-two .tab-toggle {display: none;position: absolute;left: 0;top: 100%;width: 100%;padding: 0;z-index: 1;background: #FFF;border: 1px solid #eee;}
	.tab-two .tab-nav {width: 100%;margin-bottom: 20px;}
	.tab-two .tab-nav.active .tab-toggle {display: block;}
	.tab-two .tab-toggle div {display: block;padding: 12px 15px;}
	.tab-two .tabs {width: 100%;border: none;padding: 0;}
}
@media(max-width: 575px){
	.tab-two .tab-nav {margin-bottom: 10px;}
	.tab-two .tab-title,.tab-one .tab-toggle div {font-size: 16px;padding: 12px;}
}