/* ========= INFORMATION ============================
	- document:  Wow-Shortsodes
	- 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; }