/* ========= INFORMATION ============================
	- document:  Shortcode Set
	- author:    Dmytro Lobov & Wow-Company
	- version:   1.0
	- email:     support@wow-company.com
==================================================== */

/* = Row and Columns
-------------------------------------------------------------- */
.wrow {
	display: flex;	
}
.wcolumn {
	width:100%;
	padding: 0 20px;	
}
.wcolumn:first-child {
	width:100%;
	padding-left: 0;	
}
.wcolumn:last-child {
	width:100%;
	padding-right: 0;	
}

@media screen and (max-width: 780px) { 
	.wrow {
		flex-wrap: wrap;
	}
	.wcolumn {
		padding: 0;
	}
}

/* = Tabs
-------------------------------------------------------------- */
.tabs {	
	margin: 0 0 30px;
}
.tabs__caption {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style: none;
	position: relative;
	margin: -1px 0 0 -1px;
}
.tabs__caption li:last-child:before {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	right: -2px;
	z-index: -1;
	height: 5px;
	
}
.tabs__caption:after {
	content: '';
	display: table;
	clear: both;
}
.tabs__caption li {
	padding: 9px 15px;	
	margin: 1px 0 0 1px;		
	position: relative;
	border:solid;
	border-width: 1px 1px 0;	
	text-align: center;	
	font-weight: bold;
}
.tabs__caption li:not(.active) {
	cursor: pointer;
}
.tabs__caption li:not(.active):hover {
	
}
.tabs__caption .active {
	
}
.tabs__caption .active:after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	right: 0;
	height: 5px;
}
.tabs__content {
	display: none;
	border: 1px solid;	
	padding: 7px 15px;
}
.tabs__content.active {
	display: block;
}
.tabs-left .tabs__caption {
	float: left;
	display: block;
}
.tabs-left .tabs__caption li {
	float: none;
	border-width: 1px 0 1px 1px;
	
}
.tabs-left .tabs__caption li:last-child:before {
	display: none;
}
.tabs-left .tabs__caption .active:after {
	left: auto;
	top: 0;
	right: -1px;
	bottom: 0;
	width: 1px;
	height: auto;
}
.tabs-left .tabs__content {
	overflow: hidden;
}
.tabs-right .tabs__caption {
	float: right;
	display: block;
}
.tabs-right .tabs__caption li {
	float: none;
	border-width: 1px 1px 1px 0;	
}
.tabs-right .tabs__caption li:last-child:before {
	display: none;
}
.tabs-right .tabs__caption .active:after {
	right: auto;
	top: 0;
	left: -1px;
	bottom: 0;
	width: 1px;
	height: auto;
}
.tabs-right .tabs__content {
	overflow: hidden;
	
}
@media screen and (max-width: 650px) {
	
	.tabs__caption li {
		-webkit-flex: 1 0 auto;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
	}
	.tabs-left .tabs__caption, .tabs-right .tabs__caption {
		float: none;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
	.tabs-left .tabs__caption li, .tabs-right .tabs__caption li {
		border-width: 1px 1px 0;		
	}
	.tabs-left .tabs__caption li:last-child:before, .tabs-right .tabs__caption li:last-child:before {
		display: block;
	}
	.tabs-left .tabs__caption .active:after, .tabs-right .tabs__caption .active:after {
		top: auto;
		bottom: -5px;
		left: 0;
		right: 0;
		width: auto;
		height: 5px;
		background: #FFF;
	}	
	
}

/* =Accordion
-------------------------------------------------------------- */
.accordion-wrap {
	max-width: 700px;	
	margin: 0 0 22px;
}
.accordion-wrap .accordion-block {
	border-top: 1px;	
	border-style: solid;
}
.accordion-wrap .accordion-block:last-child {
	border-bottom: 1px;	
	border-style: solid;
}
.accordion-wrap .accordion-title {
	font-size: 20px;	
	padding: 10px 15px;			
	cursor:pointer;
	margin-top: 1px;
}
.accordion-wrap .accordion-title a {
	display:block;	
	outline:none;
}
.accordion-wrap .accordion-title a:hover {
	text-decoration:none;
}
.accordion-wrap .accordion-content {	 
	padding: 9px 15px;
}
.accordion-wrap .accordion-title .plus, .accordion-wrap .accordion-title .minus {
	font-weight: bold;
	float: right;  
  text-align: center;
  width: 10px;
	display:none;
}
.accordion-wrap .accordion-title .plus {
	display:block;
}
.accordion-wrap .accordion-title.active .minus  {
	display:block;
}
.accordion-wrap .accordion-title.active .plus  {
	display:none;
}

/* =Toggle
-------------------------------------------------------------- */
.wow-toggle {
	border:1px solid;
	margin: 0 0 22px;	
}
.wow-toggle a {
	display:block;	
	outline:none;
}
.wow-toggle a:hover {
	text-decoration:none;
}
.wow-toggle-action {	
	font-size: 20px;
	padding: 10px 15px;
}
.wow-toggle-action .plus, .wow-toggle-action .minus {
	float: left;
	font-weight: bold;
	margin: 0 5px 0 0;
	text-align: center;
	width: 10px;
	display:none;
}
.wow-toggle-action .plus {
	display:block;
}
.wow-toggle-action.active .minus {
	display:block;
}
.wow-toggle-action.active .plus {
	display:none;
}
.wow-toggle-content {
	border-top: 1px solid #E5E5E5;
	padding: 9px 15px;
}
.collapse {
	-webkit-transition: height 0.35s ease;
	-moz-transition: height 0.35s ease;
	-ms-transition: height 0.35s ease;
	-o-transition: height 0.35s ease;
	transition: height 0.35s ease;
	position: relative;
	overflow: hidden;
	height: 0;
}
.collapse.in {
	height: auto;
}

/* =Buttons
-------------------------------------------------------------- */
.wow-button {
  padding: 10px 25px;  
  font-weight: 500;
  background: transparent;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

/**** BTN No. 1 ****/

.btn-1 {
	border: 2px solid;
	}
.btn-1:hover {
  
}
.btn-1:active {
	top: 2px;
}

/**** BTN No. 2 ****/

.btn-2 {
  border: none;
  border-bottom: 2px solid;
  border-left: 2px solid;
}
.btn-2:before, .btn-2:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;  
  transition: all 0.3s ease;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:after {
  width: 0%;
  height: 2px;
}
.btn-2:hover:before {height: 100%;}
.btn-2:hover:after {width: 100%;}

/**** BTN No. 3 ****/

.btn-3 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-3:before, .btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;  
  transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover:before {height: 100%;}
.btn-3:hover:after {width: 100%;}
.btn-3 span:before, .btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;  
  transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover span:before {height: 100%;}
.btn-3:hover span:after {width: 100%;}

/**** BTN No. 4 ****/

.btn-4 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-4 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-4:before, .btn-4:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0; 
  transition: all 0.3s ease;
}
.btn-4:before {
  height: 50%;
  width: 2px;
}
.btn-4:after {
  width: 20%;
  height: 2px;
}
.btn-4:hover:before {height: 100%;}
.btn-4:hover:after {width: 100%;}
.btn-4 span:before, .btn-4 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  transition: all 0.3s ease;
}
.btn-4 span:before {
  width: 2px;
  height: 50%;
}
.btn-4 span:after {
  width: 20%;
  height: 2px;
}
.btn-4:hover span:before {height: 100%;}
.btn-4:hover span:after {width: 100%;}

/**** BTN No. 5 ****/

.btn-5 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-5 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-5:before, .btn-5:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  transition: all 0.3s ease;
}
.btn-5:before {
  height: 50%;
  width: 2px;
}
.btn-5:after {
  width: 20%;
  height: 2px;
}
.btn-5:hover:before {height: 100%;}
.btn-5:hover:after {width: 100%;}
.btn-5 span:before, .btn-5 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  transition: all 0.3s ease;
}
.btn-5 span:before {
  width: 2px;
  height: 50%;
}
.btn-5 span:after {
  width: 20%;
  height: 2px;
}
.btn-5:hover span:before {height: 100%;}
.btn-5:hover span:after {width: 100%;}

/**** BTN No. 6 ****/

.btn-6 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-6:before, .btn-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 2px;
}
.btn-6:before {
  right: 0;
  top: 0;
  transition: all 0.1s ease;
}
.btn-6:after {
  left: 0;
  bottom: 0;
  transition: all 0.1s 0.2s ease;
}
.btn-6:hover:before {
  transition: all 0.1s 0.2s ease;
  height: 100%;
}
.btn-6:hover:after {
  transition: all 0.1s ease;
  height: 100%;
}
.btn-6 span:before, .btn-6 span:after {
  position: absolute;
  content: "";
}
.btn-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: 2px;
  transition: all 0.1s 0.1s ease;
}
.btn-6 span:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
}
.btn-6:hover span:before {width: 100%;}

/**** BTN No. 7 ****/

.btn-7 {
  border: 2px solid;
  transition: all 0.3s ease;
}
.btn-7:before {
  position: absolute;
  content: ' ';  
  width: 15%;
  top: 50%;
  left: -15%;
  height: 2px;
  transition: all 0.3s ease;
}
.btn-7:hover {
  padding-left: 30px;
  padding-right: 20px;
}
.btn-7:hover:before {left: -10%; width: 10%;}

/**** BTN No. 8 ****/

.btn-8 {
  padding-left: 30px;
  padding-right: 20px;  
  border: 2px solid;
  transition: all 0.3s ease;
}
.btn-8:before {
  position: absolute;
  content: ' ';  
  width: 10%;
  top: 50%;
  left: -10%;
  height: 2px;
  transition: all 0.3s ease;
}
.btn-8:hover {
  border-color: transparent;
  padding-left: 25px;
  padding-right: 25px;
}
.btn-8:hover:before {left: -15%; width: 15%;}

/**** BTN No. 9 ****/

.btn-9 { 
  border: 2px solid;
  transition: all 0.3s ease;
}
.btn-9:before, .btn-9:after {
  position: absolute;
  content: ' '; 
  width: 10%;
  top: 50%;
  height: 2px;  
  transition: all 0.3s ease;
}
.btn-9:before {left: -10%;}
.btn-9:after {right: -10%}
.btn-9:hover {
  
}
.btn-9:hover:before {left: -15%; width: 15%;}
.btn-9:hover:after {right: -15%; width: 15%;}

/**** BTN No. 10 ****/

.btn-10 {  
  border: 2px solid;
  transition: all 0.3s ease;
}
.btn-10:before, .btn-10:after {
  position: absolute;
  content: ' '; 
  width: 15%;
  top: 50%;
  height: 2px;  
  transition: all 0.3s ease;
}
.btn-10:before {left: -15%;}
.btn-10:after {right: -15%}
.btn-10:hover {
  
}
.btn-10:hover:before {left: -10%; width: 10%;}
.btn-10:hover:after {right: -10%; width: 10%;}

/**** BTN No. 11 ****/

.btn-11 {  
  border: 2px solid;
  transition: all 0.3s ease;
}
.btn-11:before, .btn-11:after {
  position: absolute;
  content: ' ';
  width: 10%;
  top: 50%;
  height: 2px;  
  transition: all 0.3s ease;
}
.btn-11:before {left: -10%;}
.btn-11:after {right: -10%}
.btn-11:hover {
 
}
.btn-11:hover:before {left: 0%; width: 0%;}
.btn-11:hover:after {right: 0%; width: 0%;}

/**** BTN No. 12 ****/

.btn-12 {
  border: 2px solid;
  z-index: 1;
}
.btn-12:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;  
  transition: all 0.3s ease;
}
.btn-12:hover { 
}
.btn-12:hover:after {
  top: 0;
  height: 100%;
}
.btn-12:active {top: 2px;}


/* = Message Alerts
-------------------------------------------------------------- */
.message_info, .message_success, .message_warning, .message_error {
	margin: 10px 0px;
	padding:12px;
	
}
.message_info {
	color: #00529B;
	background-color: #BDE5F8;
}
.message_success {
	color: #4F8A10;
	background-color: #DFF2BF;
}
.message_warning {
	color: #9F6000;
	background-color: #FEEFB3;
}
.message_error {
	color: #D8000C;
	background-color: #FFD2D2;
}
.message_info i, .message_success i, .message_warning i, .message_error i {
	margin:10px 22px;
	font-size:2em;
	vertical-align:middle;
}