/* old style_extra.css contents */
.phide {
position: absolute;
top: -1000px;
left: -1000px;
}
.middleItemSpaces {
margin: 0 2px 0 3px
}
/*.shopPhotoBox {}
.shopPhotoBox:after {clear: both; display: block; height: 0; content: " "; visibility: hidden;}
.shopPhotoBoxMain {border:1px solid #d1d1d1;min-height:140px;width:190px;background:#f2f2f2;}
.shopPhotoBoxSmall {background:#f2f2f2;border:1px solid #d1d1d1;width:60px;min-height:60px;margin:3px 3px 0 0;display:block;float:left}*/
/*.shopPhotoBox a {display:block;}
.shopPhotoBox a img {max-width:100px;}
.shopPhotoBoxMain {width:auto;float:left;border:1px solid blue;padding:10px;background:#eee}
.shopPhotoBoxMainThumbs {max-width:100px;float:left;border:1px solid blue;padding:10px;background:#eee}
.shopPhotoBoxSmall {border:1px solid red;padding:10px;background:#000}
*/
#website .shopPhotoBoxMainThumbs {
text-align: right;
}
#website .shopPhotoBoxMainThumbs a img {
margin: 0;
padding: 0
}
#website .shopPhotoBoxMainThumbs a {
width: 75px;
background: #eee;
margin: 0 10px 10px 0;
display: block;
float: right;
clear: both
}
#website .shopPhotoBoxMainThumbs {
margin: 0;
padding: 0;
overflow: auto
}
.shopProductDescription {
padding: 10px;
}
.shopProductPrice {
margin: 0 10px;
}
.shopProductOptions {
margin: 20px auto;
}
.shopRelatedBox {
clear: both;
padding: 15px 30px 15px 88px;
font-size: 13px;
border-top: 1px solid #d1cdcd;
;
}
.shopRelatedBox:after {
clear: both;
display: block;
height: 0;
content: " ";
visibility: hidden;
}
.shopRelatedBox h4 {
float: left;
width: 150px;
margin-left: -58px;
padding-right: 15px;
padding-top: 16px;
font-weight: bold;
text-align: right;
}
.shopRelatedBox a {
position: relative;
}
.shopRelatedBox a span {
display: none;
position: absolute;
width: 160px;
left: -1px;
bottom: 105%;
border: 1px solid #000;
padding: 10px;
background: #333;
color: #fff;
}
.shopRelatedBox a:hover span {
display: block
}
.shop-box {
padding: 15px
}
.shop-box a {
display: block;
text-decoration: none !important
}
.shop-box img {
width: 100%;
margin-bottom: 20px;
}
.shop-box:hover {
transition: 0.15s all;
box-shadow: 2px 2px 35px rgba(0, 0, 0, 0.2);
padding: 15px;
position: relative
}
.shop-box:hover a {
text-decoration: none
}
.whiteShadowContainer {
padding: 0;
margin: 0;
background-color: #fff;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
-moz-box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
-webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
color: #333
}
.whiteShadowContainer a:not(.btn) {
color: #000
}
.whiteShadowContainer label a {
text-decoration: underline
}
#content .whiteShadowContainer p {
color: #333
}
.whiteShadowContainer h3,
.whiteShadowContainer table th {
color: #333;
margin: 0
}
.whiteShadowContainer:after {
clear: both;
display: block;
height: 0;
content: " ";
visibility: hidden;
}
.whiteShadowContainer .breadcrumb {
background: none;
border: none;
margin: 0
}
.thumbBar,
.thumbBarEmpty {
margin: 0;
padding: 10px 15px;
background-color: #f2f2f2;
}
.thumbBar:after,
.thumbBarEmpty:after {
clear: both;
display: block;
height: 0;
content: " ";
visibility: hidden;
}
#content .thumbBar p {
margin: 0;
overflow: hidden;
word-wrap: break-word;
font-size: 13px;
color: #333;
}
.thumbBarEmpty {
background-color: #fff;
padding: 6px
}
.thumbTitle {
padding: 20px;
border-bottom: 1px solid #d1cdcd;
clear: both;
}
.thumbTitle .thumbTitleImage {
float: left;
margin-right: 9px;
width: 50px;
}
.thumbTitle .thumbTitleImage img {
display: block;
width: 50px;
height: 50px;
}
.thumbTitle h3 {
font-size: 23px;
line-height: 1em;
margin-bottom: 2px;
}
.thumbTitle h3 a {
text-decoration: none;
color: #333
}
.thumbTitle h3 a:hover {
text-decoration: underline;
}
.thumbTitle p {
display: block;
clear: both;
margin: 10px 0 0;
}
.thumbTitle .fb-like {
margin-top: -2px;
}
.thumbList {
margin: 15px auto;
}
.thumbList#shopItemsGallery {
margin: 0 auto;
}
.thumbList li {
margin-left: 0
}
.thumb {
position: relative;
float: left;
width: 161px;
margin: 0 5px 15px 0;
padding: 15px 15px 0;
font-size: 12px
}
.thumb .thumbBadge {
position: absolute;
z-index: 2;
top: 0
/* -15px*/
;
left: 0;
/* -15px*/
;
width: 110px;
height: 110px;
overflow: hidden;
}
.thumb .thumbBadge strong {
position: absolute;
z-index: 2;
top: 19px;
left: -28px;
width: 125px;
height: 22px;
padding-top: 8px;
text-align: center;
font-size: 11px;
color: #524d4d;
background-color: #f2f0f0;
overflow: hidden;
transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.thumb .thumbLink {
position: relative;
}
.thumb .thumbLink:hover {
text-decoration: none;
}
.thumb .thumbLink img {
/*max-width: 192px;*/
}
.thumb .thumbImage {
/*background-color: #f2f0f0;*/
}
.gallery-box .thumbImage {
margin-bottom: 10px;
display: block;
}
.shop-box .thumbImageWithBottomSpace {
margin-bottom: 10px;
display: block;
}
.thumb .thumbDesc {
margin: 10px 0 5px;
overflow: hidden;
word-wrap: break-word;
}
.thumb .thumbBar {
margin: 0 -15px;
}
.thumb a.thumbBar {
display: block;
color: #666;
text-decoration: none;
}
.thumb a.thumbBar:hover {
background: #e0e0e0
}
.cart-box.thumb {
width: auto;
float: none;
}
.cart-box.thumb .thumbBar {
margin-top: 15px;
}
.cart-box .thumbImage {
margin-right: 15px;
}
#infscr-loading {
text-align: center;
z-index: 100;
position: fixed;
left: 45%;
bottom: 40px;
width: 200px;
padding: 10px;
background: #000;
opacity: 0.8;
color: #FFF;
border-radius: 10px;
}
/*shop*/
.categoryHeader {
margin-bottom: 30px;
}
/* Comments */
#commentListDiv {
clear: both;
margin: 20px 0
}
#commentItemSubmit {
padding: 0;
margin: 0;
margin-top: 10px;
padding-top: 10px;
}
#commentItemSubmit input {
float: right;
font-weight: bold;
color: #000;
padding: 5px 10px;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #d6d6d6);
/*background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.50, #ffffff), to(#d6d6d6));*/
background: gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.50, #ffffff), to(#d6d6d6));
border-radius: 5px;
border: 1px solid #999;
}
#commentItemSubmit input:hover {
border-color: #000;
}
#commentItemSubmit input:active {
color: #fff;
/*background: -moz-linear-gradient(top, #080808 0%, #333333);*/
background: linear-gradient(top, #080808 0%, #333333);
/*background: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#333333));*/
background: gradient(linear, left top, left bottom, from(#080808), to(#333333));
}
#commentItemSubmit span {
display: block;
margin: 5px 0
}
.commentItemCheck {
float: left;
margin-bottom: 15px
}
.commentItem textarea {
height: 100px;
overflow: auto;
width: 100%;
}
.commentItem label {
float: none;
}
#commentItemSubmit input {
width: auto;
}
.commentItem textarea,
.commentItem input {
width: 100%;
text-indent: 7px;
float: none;
padding: 7px 0;
display: block;
font: normal 12px Verdana, Geneva, sans-serif;
border-radius: 5px;
border: 1px solid #999;
color: #555;
/*-moz-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0), inset 2px 2px 0px rgba(230, 230, 230, 1);
-webkit-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0), inset 2px 2px 0px rgba(230, 230, 230, 1);*/
box-shadow: 0px 1px 3px rgba(000, 000, 000, 0), inset 2px 2px 0px rgba(230, 230, 230, 1);
}
input.commentCaptcha {
width: 80px;
float: right
}
img.commentCaptcha {
float: right;
display: block;
margin: 5px;
}
#commentItemCaptcha.commentItemCaptchaAudio {
width: 135px
}
.commentCaption {
padding: 3px;
padding-top: 8px;
width: 250px
}
.commentItem {
display: block;
float: none;
overflow: hidden
}
#commentItemDiv {
padding: 0;
}
#commentItemDiv fieldset {
border: 0;
padding: 0;
background: none;
width: auto;
float: none
}
/*#commentListItem{background-color:#FFF;background-image:url("editor_images/admin_14.jpg.html");background-repeat:repeat-x;background-position:top;border:1px solid #CCC;margin-bottom:5px;color:#000}
#commentListItem span{display:block;background-image:url("editor_images/CommentQuote.gif.html");background-repeat:no-repeat;background-position:10px 10px;padding:15px;padding-left:45px;border-bottom:1px solid #999;border-left:1px solid #FFF;border-right:1px solid #999}*/
#commentListItem {
margin-bottom: 20px;
}
#commentListWroteItem img {
display: block;
float: left;
margin-right: 10px;
}
#commentListWroteItem {
margin-bottom: 5px;
font-size: 14px;
background: #F2F2F2;
color: #000;
border-radius: 5px;
border: 1px solid #DFDFDF;
padding: 10px;
line-height: 50px
}
/*#commentListWroteItem a:link,#commentListWroteItem a:visited,#commentItemDiv a,#admin .mlink a:hover{color:#000;}*/
#commentListCommentItem {
display: block;
background: url("editor_images/quote.png.html") 10px 0 no-repeat;
padding: 15px 15px 15px 65px;
overflow: auto;
font-size: 12px;
}
#commentListDateItem {
float: right;
font-size: 11px;
}
#commentListAdminMenu {
display: inline;
position: relative;
left: -45;
top: 10;
background-color: #CCC
}
#commentListNoItem {
padding: 10px;
text-align: center;
font-size: 14px
}
#commentListAdminMenu #commentListAdminMenuItem,
#commentListAdminMenu a:link,
#commentListAdminMenu a:visited {
display: inline;
padding: 3px;
border: 1px solid #000;
text-decoration: none;
color: #000;
background-image: url("editor_images/admin_01.jpg.html");
background-repeat: repeat-x;
margin-right: 1px
}
#commentListAdminMenu a:hover {
text-decoration: none;
color: #FFF;
background-image: url("editor_images/admin_06.png.html");
background-repeat: repeat-x
}
input.commentsName {
display: none
}
.form-horizontal textarea {
min-height: 150px;
}
/*light shadows on alert messages*/
.alert-info {
box-shadow: 0 0 2px #bce8f1;
}
.alert-error {
box-shadow: 0 0 2px #eed3d7;
}
.alert-success {
box-shadow: 0 0 2px #d6e9c6;
}
.alert-corner-btn {
float: right;
margin-right: -25px
}
.fixed-top {
position: fixed;
top: 5px;
left: 5px;
right: 5px;
z-index: 1030;
}
/*twipsy/tooltips*/
.twipsy {
display: block;
position: absolute;
padding: 5px;
font-size: 11px;
z-index: 999
}
.twipsy.above .twipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000
}
.twipsy.left .twipsy-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000
}
.twipsy.below .twipsy-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000
}
.twipsy.right .twipsy-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000000
}
.twipsy-inner {
padding: 10px 15px;
color: #CCC;
max-width: 200px;
text-decoration: none;
border-radius: 4px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background: rgb(19, 19, 19);
background: -o-linear-gradient(top, rgba(19, 19, 19, 1) 0%, rgba(84, 84, 84, 1) 100%);
background: -ms-linear-gradient(top, rgba(19, 19, 19, 1) 0%, rgba(84, 84, 84, 1) 100%);
background: linear-gradient(top, rgba(19, 19, 19, 1) 0%, rgba(84, 84, 84, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131313', endColorstr='#545454', GradientType=0)
}
.twipsy-arrow {
position: absolute;
width: 0;
height: 0
}
.fade {
-ms-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
opacity: 0
}
.fade.in {
opacity: 1
}
#adminToolbar {
position: fixed;
top: 0;
right: 0;
padding: 5px;
z-index: 9998
}
#adminToolbar button {
position: relative;
z-index: 2
}
#adminToolbarControlsOverlay {
opacity: 0.5;
height: 40px;
z-index: 1;
background: #000;
border-radius: 0px 0px 0px 5px;
box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
background: url("editor_images/bg.jpg.html") center center;
opacity: 1;
padding-left: 10px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
#adminToolbarControls {
z-index: 2;
position: relative;
margin: 0 5px 2px 3px;
}
/* admin helpers on page frontend: START */
.adminTip {
display: none
}
.adminTipHolder {
position: relative
}
.adminTipHolder .adminTip {
border-radius: 5px;
opacity: 0.5;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7), 0 0 0 5px rgba(0, 0, 0, 0.2);
position: absolute;
color: #fff;
top: 10px;
left: 10px;
z-index: 2;
display: none;
}
.adminTipHolder .adminTip i {
margin-right: 5px;
}
.adminTipHolder:hover .adminTip {
display: block
}
.adminTipHolder .adminTipRight {
right: 5px;
left: auto
}
.adminTipHolder .adminTip span.adminTipInfo {
/*position:absolute;display:none;background:#f5f5f5; color:#666;padding:5px 5px;left:10px;margin: 0; text-align:center; font-size:10px; text-decoration:none;text-shadow:none;line-height:11px;border:1px solid #ccc;width:100px*/
position: absolute;
display: block;
left: 0px;
background: rgba(255, 255, 255, 0.9);
font-size: 12px;
line-height: 14px;
padding: 10px 10px;
top: 35px;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
color: #000;
text-shadow: none;
display: none;
opacity: 0;
/*F90*/
}
.adminTipHolder .adminTip:hover span.adminTipInfo {
display: block;
opacity: 1;
transition: 0.5s;
text-decoration: none
}
.adminTipHolder .adminTip:hover {
transition: 0.5s;
opacity: 1;
}
.adminTip li {
font-size: 12px;
text-align: left;
}
.adminTip .btn,
.adminTip.btn {
padding: 5px 10px;
font-size: 12px;
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}
ul.adminTip {
top: 5px;
left: 5px;
position: absolute;
margin: 0;
padding: 0;
list-style: none
}
ul.adminTip li {
display: block;
float: left;
margin-right: 10px;
display: none;
}
ul.adminTip li.adminTipMain,
ul.adminTip:hover li {
display: block;
}
ul.adminTip a.adminTip {
position: relative;
top: auto;
left: auto;
}
/* admin helpers on page frontend: END */
.twipsy-arrow {
display: none
}
.horizontalContact .row-fluid .controls {
display: block;
float: none;
clear: both;
padding: 0 15px;
margin: 0;
}
.horizontalContact .row-fluid .controls .span6,
.horizontalContact .row-fluid .controls .span8 {
width: 90%;
}
.horizontalContact .row-fluid .control-group>label {
float: left;
width: auto;
padding: 5px 15px 0;
}
.horizontalContact .row-fluid .form-actions {
padding-left: 15px
}
.social,
.social_fa {
list-style: none;
padding: 0;
margin: 0;
overflow: auto;
text-align: center
}
.social li,
.social_fa li {
position: relative;
display: inline-block;
}
.social a {
display: block;
width: 32px;
height: 32px;
line-height: 32px;
text-indent: -9999px;
background: url("editor_images/sprite.png.html") -32px -127px no-repeat;
margin: 0 3px 0 0
}
.social a:hover {
/*-webkit-transform: rotate(-1deg) scale(1.1);-moz-transform:rotate(-1deg) scale(1.1) ;*/
}
.social_fa a {
display: inline-block;
background: #CCC;
margin: 0 3px 3px 0;
text-align: center;
padding: 3px 0px 0px;
border-radius: 5px
}
.social_fa.social_footer a {
background: none;
padding: 0;
margin: 0;
}
.social_footer,
social_left {
text-align: left
}
.social a.buttonFacebook,
.social_bwh a.buttonFacebook:hover {
background-position: -32px -127px
}
.social_bw a.buttonFacebook {
background-position: -32px -158px
}
.social a.buttonTwitter,
.social_bwh a.buttonTwitter:hover {
background-position: -64px -127px
}
.social_bw a.buttonTwitter {
background-position: -64px -158px
}
.social a.buttonGPlus,
.social_bwh a.buttonGPlus:hover {
background-position: -96px -127px
}
.social_bw a.buttonGPlus {
background-position: -96px -158px
}
.social a.buttonYouTube,
.social_bwh a.buttonYouTube:hover {
background-position: -128px -127px
}
.social_bw a.buttonYouTube {
background-position: -128px -158px
}
.social a.buttonInstagram,
.social_bwh a.buttonInstagram:hover {
background-position: -160px -127px
}
.social_bw a.buttonInstagram {
background-position: -160px -158px
}
/* Bottom Bar */
/*#kopageBar a {color: #333}#kopageBar a:hover {color: #000}*/
.kopageBarOverlay {
background: rgba(0, 0, 0, 0.3);
position: fixed;
margin: auto;
top: 0;
left: 0;
z-index: 999998;
width: 100%;
height: 100%;
display: block;
overflow: hidden;
z-index: 65500;
display: none;
}
.kopageBarWindow {
display: none;
position: fixed;
z-index: 65501;
bottom: 0;
right: 0;
top: 0;
border: 0;
padding: 0;
background: #fff;
width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.kopageBarClose {
display: block;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
line-height: 50px;
text-align: center;
font-size: 30px;
background: rgba(0, 0, 0, 0.2);
color: #fff;
width: 50px;
height: 50px
}
.kopageBarClose:hover {
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
.kopageBarHeader {
font-size: 16px;
font-weight: bold;
top: 0;
left: 0;
;
padding: 0 20px 0 70px;
background: none;
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
line-height: 50px;
height: 50px;
}
.kopageBarHeader a.btn {
text-shadow: none;
position: absolute;
top: 8px;
right: 8px
}
#kopageBar .koBgHover3:hover {
color: #fff
}
.kopageBarContent {
padding: 0;
width: 400px;
background: #fff;
position: fixed;
top: 50px;
bottom: 0;
right: 0;
}
a.kopageBarPowered {
font-size: 10px;
color: #666;
padding: 3px 10px;
position: absolute;
background: #fff;
width: auto;
bottom: 0px;
line-height: 10px;
right: 10px;
text-decoration: none
}
a.kopageBarPowered:hover {
color: #000;
}
/* Sitemap START */
ul.sitemap,
ul.sitemap ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.sitemap {
float: left;
min-width: 50%
}
ul.sitemap ul {
margin-left: 10px;
position: relative;
margin-top: 10px;
padding-top: 10px;
}
ul.sitemap ul:before {
content: "";
display: block;
width: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid;
}
ul.sitemap li {
margin: 0;
padding: 10px 12px;
font-size: 14px;
line-height: 20px;
font-weight: bold;
position: relative;
}
#website ul.sitemap li a {
padding: 10px 15px;
border: 1px solid grey;
background: #fefefe;
background: linear-gradient(to top, #fefefe 0%, #ffffff 50%, #eee 100%);
border-radius: 3px;
text-decoration: none;
color: #666;
box-shadow: inset 2px 2px 0 #fff;
}
#website ul.sitemap li a:hover {
background: #ccc;
background: linear-gradient(to top, #eee 0%, #eee 50%, #ccc 100%);
box-shadow: inset 1px 1px 0 #fff, 0 0 10px rgba(0, 0, 0, 0.5);
transition: 0.3s
}
ul.sitemap ul li:before {
content: "";
display: block;
width: 10px;
height: 0;
border-top: 1px solid;
position: absolute;
top: 20px;
left: 0;
}
ul.sitemap ul li:last-child:before {
height: auto;
top: 20px;
bottom: 0;
/*background:#fff;*/
}
/* Sitemap END */
#SearchResult li a,
.galleryList li a {
display: inline-block;
padding: 10px 0;
text-align: left;
list-style: square
}
.galleryList li {
list-style: square
}
@media (max-width: 767px) {
div#content {
display: table;
}
div.span8.pagecontent {
display: table-header-group;
}
div.span4.sidebarLeft {
display: table-footer-group;
}
div#splash,
div.WxEditableArea {}
div#splash {
text-align: center
}
div.span8.topmenuHolder {
display: none
}
}
div.keditModuleEditPlaceholder {
height: 200px;
max-height: 200px;
overflow: hidden
}
div.keditPlaceholderEdit {
z-index: 65000;
right: 0;
left: 0;
color: #fff;
padding: 70px;
font-size: 18px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
border: 25px solid rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.7);
}
div.keditPlaceholderEdit a {
color: #eee;
text-decoration: underline
}
div.keditPlaceholderEdit a.keditPlaceholderEdit {
color: #eee;
text-decoration: none;
border: 1px solid #ccc;
padding: 3px 10px;
}
div.keditPlaceholderEdit a.keditPlaceholderEdit:hover {
background: #ccc;
color: #fff;
}
div.keditPlaceholderEdit a i.icon-white {
margin-top: 5px;
}
#mobileMenuBodyHolder.menuOverlay {
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0
}
#mobileMenuBodyHolder.menuSlide {
position: relative;
left: 75%;
right: 0;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
}
.mobileMenuOpen_Body {
height: 100%;
overflow: hidden;
overflow-y: scroll;
}
.mobileMenuOpen,
.mobileMenuOpen:hover,
.mobileMenuClose,
.mobileMenuClose:hover {
display: block;
text-align: center;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
font-size: 20px;
line-height: 20px;
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
color: #fff;
text-decoration: none;
/*border:3px solid #fff;border-radius:100px;box-shadow:0 0 10px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);*/
background: #000
}
.mobileMenuClose {
display: none
}
.mobileMenuClose,
.mobileMenuClose:hover {
top: 0;
left: auto;
right: 25%;
margin-right: -50px
}
#mobileMenuHolder {
display: none;
position: absolute;
;
top: 0;
left: 0;
right: 25%;
margin: 0;
padding: 0;
background: #fff;
}
.mobileMenu {
margin: 0;
padding: 0
}
.mobileMenu li {
display: block;
margin: 0;
}
.mobileMenu li a {
display: block;
color: #222;
font-size: 16px;
line-height: 30px;
padding: 10px 25px 10px 15px;
border-bottom: 1px solid #eee;
word-wrap: break-word;
text-decoration: none;
}
.mobileMenu li a:hover {
text-decoration: none;
display: block;
color: #222;
background: #f8f8f8;
}
.mobileMenu li a.mobileActive {
font-weight: bold;
background: #eee
}
.mobileMenu li a i {
margin: 8px 0 0 20px;
opacity: 0.5;
display: inline
}
.mobileMenu li a:hover i {
opacity: 1
}
.mobileMenu li li a i {
margin: 2px 10px 0 0;
}
.kvideo-centered {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
background: #eee;
background-image: url("editor_images/video.png.html");
background-position: center center;
background-repeat: no-repeat
}
.kvideo-centered iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*map*/
.kmapHolder {
background: #eee;
background-image: url("editor_images/mapdrop.png.html");
background-position: center center;
background-repeat: no-repeat;
box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.03)
}
.row-full-width {
padding: 80px
}
.galleria {
height: 200px;
overflow: hidden;
margin: 0 auto;
}
.galleriaLoading {
background: #000 url("inc/js/galleria/classic-loader.gif.html") center center no-repeat;
opacity: 0.5;
}
.galleriaLoading img,
.galleriaLoading span,
.galleriaLoading a {
opacity: 0;
}
.galleriaLayer {
width: 100%;
height: 100%;
display: block
}
.galleriaLayer span {
color: #fff;
padding: 15px;
display: block;
width: 50%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
left: 0;
}
.galleriaLayer:hover span {
background: rgba(0, 0, 0, 0.8);
}
.galleriaLayer.lightbox span {
opacity: 0
}
.galleriaShadow {
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
.galleriaBorder {
border: 5px solid white;
}
.galleriaBorderBlack {
border: 5px solid black;
}
.galleriaBorderRound {
border-radius: 7px
}
.rss_title {
font-size: 22px;
margin-bottom: 10px;
}
.rss_date {
margin: -10px 0 20px;
}
.rss_desc {
font-size: 14px;
padding-bottom: 50px
}
.scrollToContent {
text-align: center;
padding: 30px 0 60px;
}
.scrollToContent a {
outline: none;
padding: 5px;
border-radius: 50px;
text-indent: 0;
color: #fff;
display: inline-block;
text-decoration: none;
text-align: center;
background: rgba(0, 0, 0, 0.2);
}
.scrollToContent a span {
padding: 16px 5px 0;
border: 2px solid #fff;
display: block;
border-radius: 50px;
min-width: 40px;
min-height: 34px;
}
.scrollToContent a span i {
vertical-align: central;
height: 12px;
line-height: 12px
}
.scrollToContent a:hover {
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5)
}
#spinnerHolder {
text-align: center;
}
#k_spinner {
background: rgba(0, 0, 0, 0.5);
padding: 5vw;
display: inline-block;
border-radius: 100vw;
margin-top: 30vh;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5)
}
#k_spinner img {
height: 10vw;
width: 10vw;
}
a.moduleNewItemButton {
white-space: normal;
display: block;
height: 100%;
width: 100%;
float: left;
font-size: 2vw;
line-height: 20vw;
display: table-cell;
padding: 0 1vw
}
a.moduleNewItemButton span {
display: inline-block;
vertical-align: middle;
line-height: normal;
padding: 0;
margin: 0;
}
.koSwitch input {
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 100;
}
/* Container */
.koSwitch {
height: 30px;
position: relative;
/*width: 65px;*/
line-height: 1em;
overflow: hidden;
border-radius: 50px;
}
/* Background unchecked */
.koSwitch label {
background: #e9513a;
background: rgba(255, 255, 255, 0.3);
border-radius: 50px;
display: block;
height: 100%;
width: 100%;
position: relative;
height: 2.75em;
width: 5.5em;
-ms-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
.koSwitchLive .koSwitch label {
background: #ccc
}
.koSwitchLabel label {
display: block;
font-size: 14px;
clear: both;
color: #000;
font-weight: normal
}
.koSwitchLabel small {
display: block;
font-size: 12px;
color: rgba(0, 0, 0, 0.5)
}
/* Slider unchecked */
.koSwitch label div {
background: #fff;
border-radius: 50px;
display: block;
height: 2.25em;
left: .25em;
position: absolute;
top: .25em;
width: 2.5em;
z-index: 3;
-ms-transition: 0.15s cubic-bezier(0.175, 0.285, 0.2, 1.275) all;
-o-transition: 0.15s cubic-bezier(0.175, 0.285, 0.2, 1.275) all;
transition: 0.15s cubic-bezier(0.175, 0.285, 0.2, 1.275) all;
}
/* Slider on touch */
.koSwitch:active label div {
/*box-shadow:0 0 25px rgba(0,0,0,0.5);
width: 2.5em; transform: scale(1.25, 1.25);
*/
width: 3em;
}
/* Vertical lines on slider */
.koSwitch label div:before {
background: #e0dcdd;
bottom: 0;
box-shadow: -.33em 0 0 0 #e0dcdd, .33em 0 0 0 #e0dcdd;
content: '';
display: block;
height: 32%;
top: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 5%;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
/* Subtle switch hover */
.koSwitch:hover label div:before {
background: #c7c3c4;
box-shadow: -.33em 0 0 0 #c7c3c4, .33em 0 0 0 #c7c3c4;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
/* Icon styles */
.koSwitch i {
font-size: 1.5em;
position: relative;
line-height: 1em;
z-index: 2;
}
.koSwitch i.fa-check {
color: #165CB2;
left: 15%;
top: 25%;
}
.koSwitch i.fa-times {
color: #c72f18;
color: #bbb;
left: 30%;
top: 23%;
}
#admin .koSwitch label {
background: linear-gradient(to bottom, #FF3019 0%, #CF0404 100%) repeat scroll 0% 0%;
font-size: 1em;
}
#admin .koSwitch i.fa-times {
color: #c72f18;
}
/* Checked States */
.koSwitch input:checked~label,
#admin .koSwitch input:checked~label {
background: #1865C5;
background: linear-gradient(to bottom, #36A8F3 0%, #37ACF5 4%, #1865C5 100%);
transition: background-color .2s;
}
.koSwitch.koSwitchDark input:checked~label {
background: rgba(255, 255, 255, 0.1);
}
.koSwitch.koSwitchDark i.fa-check {
color: #fff;
}
.koSwitch input:checked~label div {
left: auto;
right: .25em;
;
/* 3.25em;*/
}
.koSwitchInput .koSwitchMore {
display: none;
right: 65px;
top: 10px;
position: absolute;
background: rgba(255, 255, 255, 0.7);
border-radius: 50px;
top: 50%;
transform: translateY(-50%);
}
.koSwitchInput .kSwitchMore {
display: none;
right: 0;
top: 0;
position: absolute;
z-index: 10;
background: rgba(255, 255, 255, 0.7);
border-radius: 50px;
}
.koSwitchInput {
padding: 5px;
text-align: left;
clear: both;
overflow: auto;
}
.koSwitchInput.koSwitchLive {
text-align: left;
clear: both;
padding: 0;
background: rgba(255, 255, 255, 1.0);
padding: 10px;
position: relative;
margin-bottom: 1px
}
.koSwitchInput.koSwitchLive:hover {
background: rgba(255, 255, 255, 1.0);
}
.koSwitchInput.koSwitchLive:hover .koSwitchMore,
.koSwitchInput.koSwitchLive:hover .kSwitchMore {
display: block
}
.koSwitch {
float: left
}
.koSwitchLive .koSwitch {
float: none;
position: absolute;
right: 10px;
padding: 0;
font-size: .75em;
top: 50%;
transform: translateY(-50%);
}
.koSwitchLabel {
float: left;
padding: 4px 4px 4px 10px;
}
.koSwitchLive .koSwitchLabel {
padding: 0;
width: 165px
}
/* end of old style_extra.css contents */
.kopageInModuleToolbar {
display: none
}
a:not(.btn),
a.btn-link {
text-decoration: underline;
}
.nav a,
.basicModal a {
text-decoration: none
}
.btn.btn-ghost {
background: rgba(0, 0, 0, 0);
color: #000;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7);
border: 0;
transition: 0.2s all;
}
.btn.btn-ghost:hover {
background: rgba(0, 0, 0, 0.9);
color: #eee
}
.keditDark .btn.btn-ghost {
background: rgba(255, 255, 255, 0.1);
color: #FFF;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 1);
border: 0;
transition: 0.2s all;
}
.keditDark .btn.btn-ghost:hover {
background: rgba(255, 255, 255, 0.9);
color: #000
}
.btn.btn-xl {
padding: 16px 26px;
font-size: 24px;
line-height: 1.3333333;
border-radius: 6px
}
.btn {
text-shadow: none;
}
h2 img#WebsiteLogo {
margin-right: 10px;
}
/*#website:not(.logoCentered) #WebsiteLogo{display:block;float:left;line-height:80px;}*/
/*Dark*/
body.koThemeDark {
background: #333;
color: #eee
}
body.koThemeDark .menuHolder li a {
color: #eee
}
body.koThemeDark .logoHolder a {
color: #fff
}
.koTheme3 body.koThemeDark {
background: #666
}
.koTheme3 body.koThemeDark #website {
background: #333
}
.koTheme4 body.koThemeDark {
background: #222
}
.koTheme4 body.koThemeDark #website {
background: #333
}
#header {
position: relative;
/*z-index:3*/
clear: both;
}
#headerMenu {
position: relative;
/*z-index:3;*/
clear: both;
top: 0;
left: 0;
right: 0;
padding: 0;
}
#headerContent {
position: relative;
clear: both;
}
#headerContent:not(.koZeroPadding) {
padding: 40px;
}
.logoHolder {
float: left;
padding: 10px 10px 10px 40px;
line-height: 80px;
height: 100px;
}
/*.logoLeft .koMenu2 .logoHolder{padding-left:0}
.logoLeft .koMenu2 #logoReplacer{padding-left:15px}*/
.logoHolder img {
max-height: 80px;
}
.logoHolder h2 {
padding: 0;
margin: 0;
text-decoration: none;
letter-spacing: -1px
}
/*:not(.koTheme3) .logoHolder h2 span{line-height:80px;}*/
html:not(.koTheme4) .logoHolder #logoReplacer h2 {
line-height: 80px;
}
.logoHolder a {
text-decoration: none !important;
line-height: 80px;
color: rgba(0, 0, 0, 0.8)
}
.logoHolder a:hover {
color: rgba(0, 0, 0, 0.8)
}
.menuHolder {
margin: 0;
padding: 0 40px 0 0;
list-style: none;
float: right
}
.menuHolder li {
display: inline-block;
padding: 25px 0;
}
.menuHolder li a {
text-decoration: none;
display: block;
color: #fff;
font-size: 18px;
line-height: 50px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
padding: 0 15px
}
.logoCentered .logoHolder {
float: none;
display: block;
text-align: center;
border: 0;
padding: 20px 0;
height: auto
}
.logoCentered .menuHolder {
float: none;
display: block;
text-align: center;
padding: 20px 0
}
.logoCentered .menuHolder li {
padding: 0
}
.logoRight .logoHolder {
float: right !important;
padding: 10px 40px 10px 10px;
}
/*.logoRight .koMenu2 .logoHolder{padding-right:0}
.logoRight .koMenu2 #logoReplacer{padding-right:15px}*/
.logoRight .menuHolder {
float: left !important;
padding: 0 0 0 40px
}
#headerBanner,
#subpageHeaderContent {
min-height: 100vh;
width: 100%;
bottom: 0;
top: 0;
right: 0;
left: 0;
position: relative;
/*overflow: hidden;*/
text-align: center;
}
/*.koHeaderAutoHeight*/
#headerMenu.koMenu9 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background: #fff;
z-index: 13;
position: relative;
overflow: auto
}
.koMenu9 .logoHolder {
padding: 15px;
line-height: 30px;
height: 60px;
}
.koMenu9 .logoHolder img {
max-height: 30px;
}
.koMenu9 .logoHolder a {
line-height: 30px;
}
.koMenu9 .logoHolder a h2 {
font-size: 20px;
color: #000
}
.koMenu9 .logoHolder #logoReplacer h2 {
line-height: 30px !important
}
.koMenu9 .menuHolder {
padding: 0 15px 0 0;
line-height: 60px
}
.koMenu9 .menuHolder li {
padding: 0;
}
.koMenu9 .menuHolder li a {
font-size: 16px;
line-height: 30px;
text-shadow: none;
padding: 0 10px;
color: rgba(0, 0, 0, 0.5)
}
.koMenu9 .menuHolder li a span {
color: rgba(0, 0, 0, 0.5)
}
.koMenu9 .menuHolder li.active a span,
.koMenu9 .menuHolder li a:hover span {
color: rgba(0, 0, 0, 1);
}
.koMenu9 .menuHolder li.active a,
.koMenu9 .menuHolder li a:hover {
background: none
}
.headerBanner.kedit {
text-align: center;
}
#subpageHeaderContent,
#headerBanner.koHeaderHide,
.koTheme2 #headerBanner.koHeaderHide,
.koTheme3 #headerBanner.koHeaderHide {
height: 0;
min-height: 0
}
#headerBanner .btn {
margin-top: 30px;
}
#headerBanner {
/*display: flex;*/
position: relative;
}
#headerBanner .kedit {
position: relative;
/*margin:0 40px;*/
/*display: flex; flex-direction: column;justify-content: center; width:100%;*/
/*
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
z-index: 2;
*/
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.headerBanner.kedit {
font-size: 20px;
/*color:rgba(255,255,255,0.8);*/
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
/*
.koGrid{display: flex; flex-wrap: wrap;}
.koGrid .col-sm-6{display: flex; flex-direction: column;justify-content: center}
*/
#headerBanner.koHeaderAutoHeight {
min-height: 0;
height: auto
}
/*.koTheme6 #headerBanner.koHeaderAutoHeight:not(.koHeaderHide){min-height:200px;height:auto;}
.koTheme6 #headerBanner.koHeaderAutoHeight .k_Edit{
margin-top:150px;
}
.koTheme1 #headerBanner.koHeaderAutoHeight .k_Edit{
margin-top:100px;
}*/
.koTheme6 #headerMenu {
/*z-index:2*/
}
.koTheme6 #headerContent {
/*padding-top: 170px; position:relative;top:-200px;z-index:1*/
/*position:static; */
}
.koTheme2 #headerBanner.koHeaderAutoHeight,
.koTheme3 #headerBanner.koHeaderAutoHeight,
.koTheme5 #headerBanner.koHeaderAutoHeight {
height: auto;
}
.koTheme1 #headerBanner.koHeaderAutoHeight .kedit {
margin-top: 100px
}
.koTheme1 #headerContent:not(.koZeroPadding) {
padding-top: 250px
}
.koTheme1 #subpageHeaderContent:not(.koZeroPadding) {
padding-top: 100px
}
.koTheme1 .logoLeft #headerContent:not(.koZeroPadding),
.koTheme1 .logoRight #headerContent:not(.koZeroPadding) {
padding-top: 150px
}
.koTheme1 #headerContent.koZeroPadding {
padding-top: 210px
}
.koTheme1 .logoLeft #headerContent.koZeroPadding,
.koTheme1 .logoRight #headerContent.koZeroPadding {
padding-top: 110px
}
.koTheme5 #headerBanner.koHeaderAutoHeight .kedit {
margin-bottom: 100px
}
.koTheme1 #headerBanner.koHeaderAutoHeight .kedit,
.koTheme2 #headerBanner.koHeaderAutoHeight .kedit,
.koTheme3 #headerBanner.koHeaderAutoHeight .kedit,
.koTheme4 #headerBanner.koHeaderAutoHeight .kedit,
.koTheme5 #headerBanner.koHeaderAutoHeight .kedit {}
/* different position for this block on other layouts */
.koTheme1 #headerBanner .kedit,
.koTheme6 #headerBanner .kedit {
margin-top: 20vh;
/*top: 70%;transform: translateY(-70%);-webkit-transform: translateY(-70%);-ms-transform: translateY(-70%);*/
}
.koTheme2 #headerBanner .kedit,
.koTheme5 #headerBanner .kedit {
/*top: 40%;transform: translateY(-40%);-webkit-transform: translateY(-40%);-ms-transform: translateY(-40%);*/
}
/*.headerBanner.kedit h1{
font-size:60px;
}
.headerBanner.kedit h2{
font-size:50px;;
}
.headerBanner.kedit h3{
font-size:40px;;
}*/
.headerBanner.kedit h1,
.keditColumn .headerBanner.kedit h1 {
font-size: 40px;
opacity: 1;
}
.headerBanner.kedit h2,
.keditColumn .headerBanner.kedit h2 {
font-size: 28px;
opacity: 0.6;
}
.headerBanner.kedit h3,
.keditColumn .headerBanner.kedit h3 {
font-size: 22px;
opacity: 0.6;
}
.headerBanner.kedit .koSubtitle {
font-size: 20px;
opacity: 0.5;
}
@media (min-width: 750px) {
.headerBanner.kedit h1 {
font-size: 60px;
}
.headerBanner.kedit h2 {
font-size: 30px;
}
.headerBanner.kedit h3 {
font-size: 25px;
}
}
#headerBanner .filter,
#subpageHeaderContent .filter {
z-index: 1;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
#headerBanner.koHeaderHide .kedit {
display: none;
}
.koTheme1 #headerMenu {
padding: 0;
margin: 0 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
}
.koTheme1 #headerMenu a {
color: #fff
}
.koTheme1 #headerContent {
padding-top: 110px
}
.koTheme1 .logoCentered #headerBanner {
min-height: 110vh
}
.koTheme1 .logoCentered #headerBanner .kedit {
/*top: 70%;*/
}
.koTheme1 #subpageHeaderContent,
.koTheme1 #headerBanner.koHeaderHide {
/* height: 110px; */
}
.koTheme2 #header {
position: relative
}
.koTheme2 #headerMenu {
position: relative;
clear: both
}
.koTheme2 .menuHolder li a {
color: #000;
text-transform: uppercase
}
.koTheme2 .menuHolder li a:hover,
.koTheme2 .menuHolder li.active a {
color: #fff
}
.koTheme3 body {
background: #CCC;
}
.koTheme3 #website {
margin: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #fff
}
@media (max-width: 750px) {
.koTheme3 #website {
margin: 0;
}
}
.koTheme3 #header {
position: relative
}
.koTheme3 #headerMenu {
position: relative;
clear: both
}
.koTheme3 .menuHolder li a {
color: #000;
text-transform: uppercase
}
.koTheme3 .menuHolder li a:hover,
.koTheme3 .menuHolder li.active a {
color: #fff
}
.koTheme3 #headerBanner {
min-height: 80vh
}
.koTheme4 #headerMenu {
padding: 0;
width: 20vw;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 2;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5)
}
.koTheme4 #website {
float: right;
width: 80vw;
}
.koTheme4 .logoHolder {
margin: 30px 0
}
.koTheme4 .logo {
text-align: center
}
.koTheme4 .logo img#WebsiteLogo {
float: none;
clear: both;
margin: 0 0 10px;
;
}
.koTheme4 .logo h2 span {
text-align: center;
line-height: 35px;
display: block;
clear: both;
float: none;
}
/*Right*/
.koTheme4 #website.logoRight {
float: left;
width: 80vw;
}
.koTheme4 #website.logoRight #headerMenu {
padding: 0;
width: 20vw;
position: fixed;
left: auto;
right: 0;
top: 0
}
.koTheme4 .logoHolder {
max-width: 20vw;
padding: 20px 0;
height: auto;
text-align: center;
width: 100%
}
.koTheme4 .logoHolder img {
max-width: 100%;
height: auto
}
.koTheme4 .menuHolder {
clear: both;
margin: 0;
padding: 0;
display: block;
width: 100%
}
.koTheme4 .menuHolder li {
display: block;
float: none;
clear: both;
text-align: left;
padding: 0 0 3px 0;
margin: 0
}
.koTheme4 .menuHolder li a {
color: #000;
line-height: 30px;
margin: 0;
text-shadow: none;
}
.koTheme4 .menuHolder li a:hover,
.koTheme4 .menuHolder li.active a {
color: #fff
}
.koTheme4 .WxEditableArea {
box-shadow: inset -5px -10px 25px rgba(0, 0, 0, 0.2);
/*padding-bottom:50px*/
}
.koTheme4 .koThemeDark .WxEditableArea {
box-shadow: none
}
@media (max-width: 750px) {
ul.menuHolder:not(.menuStack) {
display: none;
}
ul.menuHolder.menuStack {
position: absolute;
top: 0;
right: 0;
z-index: 10
}
.koTheme4 #headerMenu {
display: none
}
.koTheme4 #website {
float: none;
width: 100vw;
}
}
@media (min-width: 750px) and (max-width: 1024px) {
.koTheme4 #website,
.koTheme4 #website.logoRight {
width: 70vw;
}
.koTheme4 #headerMenu {
min-width: 30vw
}
.koTheme4 .logoHolder {
max-width: 29vw;
min-width: 29vw;
}
}
.koTheme5 #headerMenu {
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
overflow: auto
}
.koTheme5 .logoHolder a {
color: #fff
}
.koTheme5 #website.logoCentered #headerMenu {
top: 0;
bottom: 0;
background: none
}
.koTheme5 #website.logoCentered .menuHolder {
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: 0;
}
.koTheme5 #website.logoCentered .keditHeader {
z-index: 100;
}
.koTheme5 #headerContent,
.koTheme5 #subpageHeaderContent {
padding-bottom: 140px;
}
.koTheme5 #headerContent.koZeroPadding {
padding-bottom: 100px;
}
/*hamburger menu on centered logo*/
html:not(.koTheme4):not(.koTheme5) #website.logoCentered #headerMenu.koMenu6 .menuStack,
html:not(.koTheme4):not(.koTheme5) #website.logoCentered #headerMenu.koMenu8 .menuStack {
float: right;
position: absolute;
top: 10px;
right: 0
}
#headerMenu.koMenu8 ul.menuStack.menuHolder li a {
border-radius: 5px;
background: #000;
color: #fff
}
.koTheme5 #subpageHeaderContent,
.koTheme5 #headerBanner.koHeaderHide {
height: 110px;
}
.koMenu1 {}
.koMenu2 {}
.koMenu3 {}
:not(.koTheme4) #headerMenu.koMenu2 {
padding: 0;
margin: 0;
background: #555;
background: linear-gradient(to bottom, #666 0%, #333 100%);
}
:not(.koTheme4) #headerMenu.koMenu7 {
padding: 0;
margin: 0;
background: #FEFEFE;
background: linear-gradient(to bottom, #FFF 0%, #F2F2F2 100%)
}
:not(.koTheme4) #headerMenu.koMenu2:after,
:not(.koTheme4) #headerMenu.koMenu7:after {
content: "";
display: table;
clear: both;
}
.koTheme6 #headerMenu {
margin: 50px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow: auto;
z-index: 3;
}
.koTheme6 #headerMenu .logoHolder h2 {
color: #000
}
.koTheme6 #headerMenu:not(.koMenu2):not(.koMenu5):not(.koMenu7):not(.koMenu8) .menuHolder li:not(.active) a:not(:hover) {
color: #000
}
.koTheme6 #headerMenu.koMenu1 {}
.koTheme6 #headerMenu.koMenu2,
.koTheme6 #headerMenu.koMenu7 {
margin: 50px
}
.koTheme6 #subpageHeaderContent {
/*height:200px;*/
}
.koTheme6 #headerBanner.koHeaderHide {
height: 200px;
/*margin-bottom:200px;*/
}
/*.koTheme6 #headerContent{z-index:1;padding-top:180px;position:relative;margin-top:-200px;clear:both;}*/
.koTheme6 #headerContent {
z-index: 1;
padding-top: 180px;
position: relative;
margin-top: -200px;
clear: both;
}
/*
.koTheme6 .logoCentered .logoHolder{float:none;display:block;text-align:center;border:0;padding:20px 0;height:auto}
.koTheme6 .logoCentered .menuHolder{float:none;display:block;text-align:center;padding:20px 0}
.koTheme6 .logoCentered .menuHolder li{padding:0}
*/
#headerMenu.koMenu2 .logoHolder h2,
#headerMenu.koMenu7 .logoHolder h2 {
line-height: 80px;
}
#headerMenu.koMenu2 .menuHolder li:not(.menuAddItem),
#headerMenu.koMenu7 .menuHolder li:not(.menuAddItem) {
padding: 0;
margin: 0;
display: inline;
float: left
}
#headerMenu.koMenu2 .menuHolder li a,
#headerMenu.koMenu7 .menuHolder li a {
line-height: 80px;
height: 80px;
border-right: 1px solid rgba(0, 0, 0, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.2);
color: #fff
}
#headerMenu.koMenu7 .menuHolder li a {
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(255, 255, 255, 1);
color: #777
}
#headerMenu.koMenu2 .menuHolder li a:hover,
#headerMenu.koMenu2 .menuHolder li.item_active a {
background: rgba(0, 0, 0, 0.3);
}
#headerMenu.koMenu7 .menuHolder li a:hover,
#headerMenu.koMenu7 .menuHolder li.item_active a {
background: rgba(0, 0, 0, 0.1);
color: #333;
box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.125);
}
html:not(.koTheme4) #headerMenu.koMenu2 .logoHolder,
html:not(.koTheme4) #headerMenu.koMenu7 .logoHolder {
max-height: 80px;
line-height: 80px;
padding-top: 0;
padding-bottom: 0
}
#headerMenu.koMenu2 .logoHolder img,
#headerMenu.koMenu7 .logoHolder img {
max-height: 50px;
}
#headerMenu.koMenu2 .logoHolder h2 {
color: #fff;
}
#headerMenu.koMenu7 .logoHolder h2 {
color: #555;
}
#headerMenu.koMenu3 .topmenu a:hover,
#headerMenu.koMenu3 .topmenu .active a,
#headerMenu.koMenu4 .topmenu a:hover,
#headerMenu.koMenu4 .topmenu .active a,
#headerMenu.koMenu5 .topmenu a:hover,
#headerMenu.koMenu5 .topmenu .active a {
background: none
}
#headerMenu.koMenu2 .menuHolder,
#headerMenu.koMenu7 .menuHolder {
padding: 0
}
#headerMenu.koMenu2,
#headerMenu.koMenu7 {
border: 0
}
.koTheme4 #headerMenu.koMenu2,
.koTheme4 #headerMenu.koMenu3,
.koTheme4 #headerMenu.koMenu4,
.koTheme4 #headerMenu.koMenu5,
.koTheme4 #headerMenu.koMenu7 {
left: 0;
width: 20vw;
}
.koTheme4 #headerMenu.koMenu2 li:not(.menuAddItem),
.koTheme4 #headerMenu.koMenu7 li:not(.menuAddItem) {
display: block;
clear: both;
float: none;
width: 100%
}
.koTheme4 #headerMenu.koMenu2 li a {
line-height: 45px;
height: 45px;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.koTheme4 #headerMenu.koMenu7 li a {
line-height: 45px;
height: 45px;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 1);
}
.koTheme4 #headerMenu.koMenu2 .logoHolder,
.koTheme4 #headerMenu.koMenu5 .logoHolder,
.koTheme4 #headerMenu.koMenu7 .logoHolder {
max-width: 20vw;
padding: 20px
}
.koTheme4 #website.logoRight #headerMenu.koMenu2,
.koTheme4 #website.logoRight #headerMenu.koMenu3,
.koTheme4 #website.logoRight #headerMenu.koMenu4,
.koTheme4 #website.logoRight #headerMenu.koMenu5,
.koTheme4 #website.logoRight #headerMenu.koMenu7 {
padding: 0;
right: 0;
left: auto;
;
width: 20vw
}
.koTheme4 #headerMenu.koMenu3 .topmenu a {
text-align: center;
padding: 0
}
.koTheme4 #headerMenu.koMenu3 .topmenu a span {
display: block;
border-left: 10px solid rgba(0, 0, 0, 0);
line-height: 40px;
height: 40px
}
.koTheme4 #website.logoRight #headerMenu.koMenu3 .topmenu a span {
border-right: 10px solid rgba(0, 0, 0, 0);
border-left: 0;
}
.koTheme4 #headerMenu.koMenu3 .logoHolder,
.koTheme4 #headerMenu.koMenu4 .logoHolder {
max-width: 20vw;
padding: 20px
}
/* Menu Style #4 */
#headerMenu.koMenu4 {
border-width: 10px 0 0 0;
border-style: solid;
}
.koTheme1 #headerMenu.koMenu4 {
margin: 0
}
.koTheme5 #headerMenu.koMenu4 {
border-width: 0 0 10px 0;
}
.koTheme4 #headerMenu.koMenu4 .menuHolder {
padding: 0 0 0 20px
}
.koTheme4 #website.logoLeft #headerMenu.koMenu4 {
border-width: 0 0 0 10px;
border-style: solid;
min-height: 100vh
}
.koTheme4 #website.logoRight #headerMenu.koMenu4 {
border-width: 0 10px 0 0;
border-style: solid;
min-height: 100vh
}
/* Menu Style #5 */
#headerMenu.koMenu5 {
overflow: auto;
}
#headerMenu.koMenu5 .topmenu a {
color: #fff
}
.koTheme1 #headerMenu.koMenu5 {
margin-left: 0;
margin-right: 0;
}
.koTheme4 #website.logoLeft #headerMenu.koMenu2,
.koTheme4 #website.logoLeft #headerMenu.koMenu5,
.koTheme4 #website.logoLeft #headerMenu.koMenu7 {
min-height: 100vh
}
.koTheme4 #website.logoRight #headerMenu.koMenu2,
.koTheme4 #website.logoRight #headerMenu.koMenu5,
.koTheme4 #website.logoRight #headerMenu.koMenu7 {
min-height: 100vh
}
#headerMenu.koMenu6 .menuHolder:not(.menuStack),
#headerMenu.koMenu8 .menuHolder:not(.menuStack) {
display: none
}
#headerMenu.koMenu6 a.mobileMenuOpen,
#headerMenu.koMenu8 a.mobileMenuOpen {
position: relative;
left: auto;
top: auto;
;
border: 1px solid red
}
/*website.logoRight
.koTheme4 #headerMenu{padding:0;margin-left:-18vw;width:16vw;float:left;}
.koTheme4 #website{float:right;width:80vw;}
.koTheme4 .logoHolder {margin:30px 0}
.koTheme4 .logo {text-align:center}
.koTheme4 .logo img#WebsiteLogo{float:none;clear:both;margin:0 0 10px;;}
.koTheme4 .logo h2 span{text-align:center;line-height:35px;display:block;clear:both;float:none;}
===RIGHT===
.koTheme4 #website.logoRight{float:left;width:80vw;}
.koTheme4 #website.logoRight #headerMenu{padding:0;margin-left:auto;margin-right:-18vw;width:16vw;float:right;}
.koTheme4 .logoHolder{max-width:16vw;padding:20px 0;height:auto;text-align:center;width:100%}
.koTheme4 .logoHolder img{max-width:100%;height:auto}
.koTheme4 .menuHolder{clear:both;margin:0;padding:0;display:block;width:100%}
.koTheme4 .menuHolder li {display:block;float:none;clear:both;text-align:left;padding:0 0 3px 0;margin:0}
.koTheme4 .menuHolder li a{color:#000;line-height:30px;margin:0;text-shadow:none;}
.koTheme4 .menuHolder li a:hover,.koTheme4 .menuHolder li.active a{color:#fff}
.koTheme4 .WxEditableArea {box-shadow:inset -5px -10px 25px rgba(0,0,0,0.2);padding-bottom:50px}
.koTheme4 .koThemeDark .WxEditableArea {box-shadow:none}*/
/*.logoHolder{float:left;padding:10px 10px 10px 40px;line-height:80px;height:100px;}
.menuHolder li{display:inline-block;padding:25px 0;}
.menuHolder li a{text-decoration:none;display:block;color:#fff;font-size:16px;line-height:50px;text-shadow:1px 1px 2px rgba(0,0,0,0.5);padding:0 15px}
*/
.logoHolder,
.menuHolder {
position: relative;
z-index: 4
}
.logoHolder .logoHelper,
.menuHolder li.menuAddItem {
position: absolute;
display: none;
bottom: -25px;
padding: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0);
margin: 0;
line-height: 30px;
min-width: 150px;
}
#headerMenu.koMenu2 .menuHolder li.menuAddItem a,
#headerMenu.koMenu7 .menuHolder li.menuAddItem a {
line-height: 30px;
height: 30px;
}
.logoHolder .logoHelper a,
.menuHolder li.menuAddItem a {
margin: 0;
text-decoration: none;
text-transform: none;
color: #fff;
height: 30px;
line-height: 30px;
padding: 0;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
width: 50%;
display: inline-block;
box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.8);
width: auto;
padding: 0 15px
/*outline:1px solid rgba(255,255,255,0.5); outline-offset:-2px;*/
}
.logoHolder .logoHelper a {
white-space: nowrap
}
.menuHolder li.menuAddItem a:hover {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
transition: 0.3s all ease;
}
.logoHolder:hover .logoHelper,
.menuHolder:hover li.menuAddItem {
display: block;
}
.koTheme4 .logoHolder .logoHelper,
.koTheme4 .menuHolder li.menuAddItem {
bottom: auto;
top: 30%;
left: 15vw;
;
width: 15vw
}
.koTheme4 .logoHolder .logoHelper a,
.koTheme4 .menuHolder li.menuAddItem a {
width: 100%;
text-align: left
}
.koTheme4 .logoRight .logoHelper,
.koTheme4 .logoRight .menuHolder li.menuAddItem {
left: -15vw;
}
.koTheme5 .logoHolder .logoHelper,
.koTheme5 .menuHolder li.menuAddItem {
bottom: auto;
top: -30%;
right: 0;
left: auto
}
.logoCentered .logoHelper {
bottom: 0
}
/* Fixed Headers */
/*
to be reviewed again after v3.1 changes.
.koTheme1 #header.is-fixed,.koTheme5 #header.is-fixed{z-index:65501}
.koTheme1 .kopageEditingMode #header.is-fixed,.koTheme5 .kopageEditingMode #header.is-fixed{z-index:998}
.koTheme1 .is-fixed #headerMenu:not(.koMenu6),.koTheme5 .is-fixed #headerMenu:not(.koMenu6),
.koTheme1 .is-fixed #headerMenu:not(.koMenu8),.koTheme5 .is-fixed #headerMenu:not(.koMenu8) {
transition: all 300ms;position:fixed;top:0;left:0;right:0;bottom:auto;background-color: rgba(0,0,0,0.5);;margin:0;border:0;box-shadow:0 0 50px rgba(0,0,0,0.8),inset 0 50px 50px rgba(0,0,0,0.8)
}
.koTheme1 .is-fixed #headerMenu .logoHolder {height:60px;line-height:50px;transition: all 300ms;}
.koTheme1 .is-fixed #headerMenu .logoHolder h2 {line-height:50px}
.koTheme1 .is-fixed #headerMenu .logoHolder img{max-height:50px;}
.koTheme1 .is-fixed #headerMenu .menuHolder {}
.koTheme1 .is-fixed #headerMenu .menuHolder li {}
.koTheme1 .is-fixed #headerMenu .menuHolder li a {transition: all 300ms;line-height: 20px;}
*/
.footerHolder {
min-height: 40px;
}
#keditFooterModule {
text-align: right
}
.text-center #keditFooterModule {
text-align: center
}
#keditFooterModule.social_footer {
text-align: inherit;
}
#keditFooterModule .social,
#keditFooterModule .social_fa {
text-align: inherit;
}
@media (min-width: 767px) {
.kedit {
padding: 50px;
}
.kedit .kedit {
padding: 25px;
}
}
@media (max-width: 767px) {
.kedit {
padding: 20px;
}
.kedit .kedit {
padding: 10px;
}
}
@media (min-width: 767px) {
.keditRight:not(.headerBanner) {
padding-left: 40%
}
.keditLeft:not(.headerBanner) {
padding-right: 40%
}
.keditRight.headerBanner {
margin-left: 40%
}
.keditLeft.headerBanner {
margin-right: 40%
}
}
.ContactForm,
.ContactForm.whiteShadowContainer {
max-width: 700px;
margin: 0 auto;
font-size: 16px
}
/*.kedit .kedit .ContactForm{margin:-25px}*/
body div.parallax-window {
background-attachment: fixed !important;
background-position: 50% 0px;
background-repeat: no-repeat;
background-size: cover !important;
}
.koBg1,
.koBgHover1:hover {
background: #1865C5;
background: linear-gradient(to bottom, #36A8F3 0%, #37ACF5 4%, #1865C5 100%);
}
.koBg2,
.koBgHover2:hover {
background: #fbdd32;
background: linear-gradient(to bottom, #fbdd32 0%, #ffeb34 4%, #fed430 50%, #ffcf31 100%);
}
.koBg3,
.koBgHover3:hover {
background: #555;
background: linear-gradient(to bottom, #666 0%, #333 100%);
}
.koBg4,
.koBgHover4:hover {
background: #BABEC7;
background: linear-gradient(to bottom, #999DA9 10%, #E5E4E9 100%);
}
.koBg5,
.koBgHover5:hover {
background: rgb(255, 48, 25);
background: linear-gradient(to bottom, rgba(255, 48, 25, 1) 0%, rgba(207, 4, 4, 1) 100%);
}
.koBgHover-1:hover {
background: #1865C5;
background: linear-gradient(to bottom, #37ACF5 4%, #1865C5 50%);
}
.koBgHover-2:hover {
background: #ffeb34;
background: linear-gradient(to bottom, #ffeb34 4%, #fed430 50%);
}
.koBgHover-3:hover {
background: #555;
background: linear-gradient(to bottom, #666 0%, #333 50%);
}
.koBgHover-5:hover {
background: rgb(255, 48, 25);
background: linear-gradient(to bottom, rgba(255, 48, 25, 1) 0%, rgba(207, 4, 4, 1) 50%);
}
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
@media (min-width: 992px) {
.featurette-heading {}
}
/* Content Blocks Style */
#contentArea,
#headerContent {
font-size: 18px;
clear: both;
}
#contentArea small {
font-size: 14px
}
#contentArea .col-sm-3,
#contentArea .col-sm-4 {
font-size: 17px
}
#contentArea .col-sm-4 h3 {
margin-top: 0
}
#contentArea hr {
margin: 20px 0
}
#contentArea .breadcrumb {
font-size: 16px;
background: rgba(255, 255, 255, 0.7);
}
#contentArea .breadcrumb a {
text-decoration: none;
color: #000 !important
}
#contentArea .breadcrumb a i {
margin-right: 10px;
}
#contentArea .breadcrumb>li+li:before {
content: "\203a";
color: rgba(0, 0, 0, 0.2);
}
#contentArea .breadcrumb>.active {
color: rgba(0, 0, 0, 0.5);
}
#contentArea .breadcrumb li>a:before {
font-family: FontAwesome;
content: "\f015";
display: inline-block;
margin-right: 7px;
font-size: 16px;
padding: 0;
}
.koButtons {
margin: 20px 0 10px;
clear: both
}
.kedit.koZeroPadding {
padding: 0;
}
.kedit.koZeroPadding .row {
margin: 0;
}
.kedit.koZeroPaddingRight {
padding-right: 0;
}
.kedit.koZeroPaddingLeft {
padding-left: 0;
}
.kedit.koZeroPaddingTop {
padding-top: 0;
}
.kedit.koZeroPaddingBottom {
padding-bottom: 0;
}
.keditPullRight:not(.kedit) {
padding-right: 0;
margin-right: 0
}
.kedit.keditPullRight {
padding-right: 0
}
.keditPullLeft:not(.kedit) {
margin-left: 0;
padding-left: 0
}
.kedit.keditPullLeft {
padding-left: 0
}
img.boxShadow50 {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5)
}
.kedit.koBlock1 {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/*-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;*/
}
.koBlock1 .row {
/* position:relative;
margin:0 auto;
top:50%;
transform:translateY(-50%);-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);*/
max-width: 60vw;
}
.koBlock1 h2 {
font-size: 40px;
margin: 30px 0
}
.koBlock1 .koButtons {
margin-top: 40px
}
/*no padding*/
.kedit.koBlock2 {
padding: 0 15px
}
.koBlock2_A .row {
overflow: hidden;
background-image: -moz-linear-gradient(left,
rgba(0, 0, 0, 0.03),
rgba(0, 0, 0, 0.03) 33.33%,
rgba(0, 0, 0, 0.06) 33.33%,
rgba(0, 0, 0, 0.06) 66.66%,
rgba(0, 0, 0, 0.09) 66.66%,
rgba(0, 0, 0, 0.09) 100%);
}
.koBlock2_A .col-sm-4 {
padding-top: 30px;
padding-bottom: 30px;
}
img.img-bw {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.koGreyLogos img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
max-height: 40px;
max-width: 200px;
opacity: 0.5;
margin: 0 20px 40px;
}
.koGreyLogos {
text-align: center;
}
.koGreyLogos {
margin: -20px 0 -60px
}
/* new, since inline-editables are in use */
.koGreyLogos-2 img {
max-height: 40px;
max-width: 200px;
opacity: 0.5;
margin: 0 20px 40px;
}
.koGreyLogos-2 {
text-align: center;
}
.koGreyLogos-2 {
margin: -20px 0 -60px
}
.koOpacity {
opacity: 0.5
}
/* general content color */
#contentArea,
.koThemeDark #contentArea .whiteShadowContainer {
color: rgba(0, 0, 0, 0.7)
}
#contentArea h1,
#contentArea h2,
#contentArea h3,
#contentArea h4,
.koThemeDark #contentArea .whiteShadowContainer strong,
.koThemeDark #contentArea .whiteShadowContainer h1,
.koThemeDark #contentArea .whiteShadowContainer h2,
.koThemeDark #contentArea .whiteShadowContainer h3,
.koThemeDark #contentArea .whiteShadowContainer h4 {
color: rgba(0, 0, 0, 1);
}
#contentArea h1 {
letter-spacing: -1px;
}
.h1,
.h2,
.h3,
h1,
h2,
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
.koThemeDark #contentArea {
color: rgba(255, 255, 255, 0.5)
}
.koThemeDark #contentArea strong {
color: rgba(255, 255, 255, 0.7)
}
.koThemeDark #contentArea select {
color: #000
}
.koThemeDark #website {
color: rgba(255, 255, 255, 0.5)
}
.koThemeDark #website h1,
.koThemeDark #website h2,
.koThemeDark #website h3:not(.thumbTitle),
.koThemeDark #website h4 h3:not(.thumbTitle) {
color: rgba(255, 255, 255, 1)
}
#website .keditDark {
color: rgba(255, 255, 255, 0.7)
}
#website .keditDark strong {
color: rgba(255, 255, 255, 0.9)
}
#website .keditDark h1,
#website .keditDark h2,
#website .keditDark h3:not(.thumbTitle),
#website .keditDark h4:not(.thumbTitle) {
color: rgba(255, 255, 255, 1)
}
#website .keditDark a:not(.btn):not(.page-link),
#website .keditDark a.btn.btn-link {
color: rgba(255, 255, 255, 0.7)
}
#website .keditDark a:not(.btn):not(.page-link):hover,
#website .keditDark a.btn.btn-link:hover {
color: rgba(255, 255, 255, 1)
}
#contentArea .btn.btn-ghost {
color: #000;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
}
#contentArea .btn.btn-ghost.btn-xl {
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 1);
}
#contentArea .btn.btn-ghost:hover {
background: rgba(255, 255, 255, 0.7)
}
#contentArea .keditDark .btn.btn-ghost {
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 1);
}
#contentArea .keditDark .btn.btn-ghost.btn-xl {
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 1);
}
#contentArea .keditDark .btn.btn-ghost:hover {
background: rgba(255, 255, 255, 0.3)
}
/*
- before version 3.1
#footerContent {color:rgba(0,0,0,0.5);}
#footerContent a {color:rgba(0,0,0,0.75);}
#footerContent h1,#footerContent h2,#footerContent h3,#footerContent h4,#footerContent a:hover {color:rgba(0,0,0,1);}
#footerContent h1,#footerContent h2,#footerContent h3,#footerContent h4{font-size:18px;}
*/
#footerContent {
color: rgba(0, 0, 0, 0.5);
}
#footerContent a:not(.btn) {
color: rgba(0, 0, 0, 0.75);
}
.kimgfilter1 {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3)
}
.kimgfilter2 {
border-radius: 10px;
}
.kimgfilter3 {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.kimgfilter4 {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
border: 7px solid #fff;
}
.kimgfilter5 {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.kimgfilter6 {
/*.img-circle*/
border-radius: 50%;
}
.kimgfilter7 {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.kedit.kfilter,
.keditActive.kedit.kfilter,
.keditActive.kedit.kfilter:hover {
border: 5px dotted blue;
box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.4);
/*black*/
}
.kedit {
position: relative;
}
/*
.kfilter1::before,.kfilter2:before,.kfilter3::before,.kfilter4::before,.kfilter5::before,
.kfilter6::before,.kfilter11::before,.kfilter12::before,.kfilter13::before,.kfilter14::before,
.kfilter15::before,.kfilter16::before,.kfilter21::before,.kfilter22::before,.kfilter23::before{
content:'';display:block;position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none;
}
.kfilter1::before{box-shadow: inset 0 0 0 100vw rgba(0,0,0,0.5);}
.kfilter2::before{box-shadow: inset 0 0 100vw 10vw rgba(0,0,0,0.7);}
.kfilter3::before{box-shadow: inset 60vw 0 100vw rgba(0,0,0,0.7);}
.kfilter4::before{box-shadow: inset -60vw 0 100vw rgba(0,0,0,0.7);}
.kfilter5::before{box-shadow: inset 65vw 0 0 0 rgba(0,0,0,0.5);}
.kfilter6::before{box-shadow: inset -65vw 0 0 0 rgba(0,0,0,0.5);}
.kfilter11::before{box-shadow: inset 0 0 0 100vw rgba(255,255,255,0.8);}
.kfilter12::before{box-shadow: inset 0 0 100vw 10vw rgba(255,255,255,0.8);}
.kfilter13::before{box-shadow: inset 60vw 0 100vw rgba(255,255,255,0.8);}
.kfilter14::before{box-shadow: inset -60vw 0 100vw rgba(255,255,255,0.8);}
.kfilter15::before{box-shadow: inset 65vw 0 0 rgba(255,255,255,0.8);}
.kfilter16::before{box-shadow: inset -65vw 0 0 rgba(255,255,255,0.8);}
.kfilter21::before,.kfilter22::before{box-shadow: inset 0 0 0 100vw rgba(0,0,0,0.3);}
.kfilter23{border-radius:25px;}
.kfilter23::before{border-radius:25px;box-shadow: inset 0 0 0 100vw rgba(0,0,0,0.3), 0 0 30px rgba(0,0,0,0.4);}
*/
#website div.kfilter1,
div.kfilter1,
div.keditActive.kfilter1,
div.keditActive.kfilter1:hover {
/*black*/
box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.5);
}
#website div.kfilter2,
div.keditActive.kfilter2,
div.keditActive.kfilter2:hover {
box-shadow: inset 0 0 100vw 10vw rgba(0, 0, 0, 0.7);
}
#website div.kfilter3,
div.keditActive.kfilter3,
div.keditActive.kfilter3:hover {
box-shadow: inset 60vw 0 100vw rgba(0, 0, 0, 0.7);
}
#website div.kfilter4,
div.keditActive.kfilter4,
div.keditActive.kfilter4:hover {
box-shadow: inset -60vw 0 100vw rgba(0, 0, 0, 0.7);
}
#website div.kfilter5,
div.keditActive.kfilter5,
div.keditActive.kfilter5:hover {
box-shadow: inset 65vw 0 0 0 rgba(0, 0, 0, 0.5);
}
#website div.kfilter6,
div.keditActive.kfilter6,
div.keditActive.kfilter6:hover {
box-shadow: inset -65vw 0 0 0 rgba(0, 0, 0, 0.5);
}
#website div.kfilter11,
div.keditActive.kfilter11,
div.keditActive.kfilter11:hover {
box-shadow: inset 0 0 0 100vw rgba(255, 255, 255, 0.8);
}
#website div.kfilter12,
div.keditActive.kfilter12,
div.keditActive.kfilter12:hover {
box-shadow: inset 0 0 100vw 10vw rgba(255, 255, 255, 0.8);
}
#website div.kfilter13,
div.keditActive.kfilter13,
div.keditActive.kfilter13:hover {
box-shadow: inset 60vw 0 100vw rgba(255, 255, 255, 0.8);
}
#website div.kfilter14,
div.keditActive.kfilter14,
div.keditActive.kfilter14:hover {
box-shadow: inset -60vw 0 100vw rgba(255, 255, 255, 0.8);
}
#website div.kfilter15,
div.keditActive.kfilter15,
div.keditActive.kfilter15:hover {
box-shadow: inset 65vw 0 0 rgba(255, 255, 255, 0.8);
}
#website div.kfilter16,
div.keditActive.kfilter16,
div.keditActive.kfilter16:hover {
box-shadow: inset -65vw 0 0 rgba(255, 255, 255, 0.8);
}
#website div.kfilter21 .keditHeader,
div.keditActive.kfilter21 .keditHeader,
div.keditActive.kfilter21:hover .keditHeader,
#website div.kfilter22 .keditHeader,
div.keditActive.kfilter22 .keditHeader,
div.keditActive.kfilter22:hover .keditHeader {
box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.3);
}
#website div.kfilter22 .keditHeader,
div.keditActive.kfilter22 .keditHeader,
div.keditActive.kfilter22:hover .keditHeader,
#website div.kfilter23 .keditHeader,
div.keditActive.kfilter23 .keditHeader,
div.keditActive.kfilter23:hover .keditHeader,
#website div.kfilter23 .headerBanner,
div.keditActive.kfilter23 .headerBanner,
div.keditActive.kfilter23:hover .headerBanner,
#website div.headerBanner.kfilter23,
div.headerBanner.keditActive.kfilter23,
div.headerBanner.keditActive.kfilter23:hover {
border-radius: 25px;
}
#website div.kfilter23 .keditHeader,
div.keditActive.kfilter23 .keditHeader,
div.keditActive.kfilter23:hover .keditHeader,
#website div.kfilter23 .headerBanner,
div.keditActive.kfilter23 .headerBanner,
div.keditActive.kfilter23:hover .headerBanner,
#website div.headerBanner.kfilter23,
div.headerBanner.keditActive.kfilter23,
div.keditActive.headerBanner.kfilter23:hover,
div.kedit.headerBanner.kfilter23:hover {
box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.4);
}
/*kedit headerBanner keditDark keditLeft kfilter23*/
/* header decoration */
.koHeader1 {
text-align: center;
position: relative;
line-height: 2;
overflow: hidden;
}
body:not(.kopageEditingMode) .koHeader1:before,
body:not(.kopageEditingMode) .koHeader1:after {
content: "";
display: inline-block;
bottom: .5ex;
left: -2ex;
width: 100%;
margin-left: -100%;
height: 2px;
position: relative;
background: rgba(255, 255, 255, 0.4);
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
body:not(.kopageEditingMode) .koHeader1::after {
left: 2ex;
margin-right: -100%;
margin-left: auto;
}
/*.kedit:before{
content:'';border:5px solid red;
z-index: 1;
position: absolute;top:10px;left:10px;bottom:0;right:0; overflow:auto;
background: rgba(255, 255, 255, 0.4); box-shadow:0 0 10px rgba(0,0,0,1);display:block;
width: 100%;height:100vh;
}*/
/*make images responsive by default*/
#website img {
display: inline-block;
height: auto;
max-width: 100%;
flex: none;
}
#website .input-group-addon img {
max-width: none
}
.loginWithPanel img {
display: block;
float: left;
margin-right: 20px;
}
.btn.loginWithPanel {
display: block;
overflow: auto;
padding: 20px 30px;
text-align: left;
color: #666
}
.loginWithPanel span {
line-height: 20px;
padding: 10px;
display: block
}
.btn-facebook:before {
font-family: FontAwesome;
content: "\f082";
margin-right: 7%;
}
.btn-twitter:before {
font-family: FontAwesome;
content: "\f099";
margin-right: 7%;
}
.btn-google:before {
font-family: FontAwesome;
content: "\f0d5";
margin-right: 7%;
}
.btn-linkedin:before {
font-family: FontAwesome;
content: "\f08c";
margin-right: 7%;
}
.btn-youtube:before {
font-family: FontAwesome;
content: "\f167";
margin-right: 7%;
}
.btn-email:before {
font-family: FontAwesome;
content: "\f0e0";
margin-right: 7%;
}
.btn-addtoany:before {
font-family: FontAwesome;
content: "\f1e0";
text-indent: 0px
}
.btn-facebook {
background: #3B5998;
color: #fff;
text-decoration: none;
margin-bottom: 5px;
}
.btn-facebook:hover {
background: #3A5795;
color: #fff;
text-decoration: none
}
.btn-twitter,
.btn-twitter:hover {
background: #55ACEE;
color: #fff;
text-decoration: none;
margin-bottom: 5px
}
.btn-twitter:hover {
background: #0084B4
}
.btn-google,
.btn-google:hover {
background: #E53935;
color: #fff;
text-decoration: none;
margin-bottom: 5px
}
.btn-google:hover {
background: #C9322E
}
.btn-linkedin,
.btn-linkedin:hover {
background: #1D87BD;
color: #fff;
text-decoration: none;
margin-bottom: 5px
}
.btn-linkedin:hover {
background: #0077B5
}
.btn-youtube,
.btn-youtube:hover {
background: #E32524;
color: #fff;
text-decoration: none;
margin-bottom: 5px
}
.btn-youtube:hover {
background: #CC181E
}
.btn-email,
.btn-addtoany,
.btn-email:hover,
.btn-addtoany:hover {
background: #8899A6;
color: #fff;
text-decoration: none;
margin-bottom: 5px
}
.btn-email:hover,
.btn-addtoany:hover {
background: #777
}
.btn-addtoany span {
display: none
}
.btn-addtoany {
font-family: FontAwesome;
content: "\f1e0";
;
margin-bottom: 5px
}
/*
Facebook
Email
*/
.topmenu .topmenuSocial a {
display: inline-block;
padding: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
text-shadow: none;
}
#headerMenu.koMenu2 .topmenu .topmenuSocial a,
#headerMenu.koMenu7 .topmenu .topmenuSocial a {
padding: 0 15px;
width: auto;
}
html:not(.koTheme4) #headerMenu:not(.koMenu2):not(.koMenu7) .topmenuSocial span {
margin-left: 10px;
padding-left: 10px;
display: inline-block;
border-left: 1px solid rgba(0, 0, 0, 0.3)
}
html:not(.koTheme4) #headerMenu.koMenu5 .topmenuSocial span,
.koTheme5 #headerMenu .topmenuSocial span {
border-left: 1px solid rgba(255, 255, 255, 0.3)
}
.koTheme4 #headerMenu.koMenu2 li.topmenuSocial a,
.koTheme4 #headerMenu.koMenu7 li.topmenuSocial a {
border: 0
}
.koTheme4 #headerMenu .topmenuSocial span {
display: block;
text-align: center;
border: none;
padding: 25px 0 0;
margin: 0
}
#headerMenu .topmenu .topmenuSocial span a:hover {
border-radius: 3px
}
#headerMenu .topmenu .topmenuSocial span a.koSocialFacebookHover:hover {
color: #fff;
background: #44619D
}
#headerMenu .topmenu .topmenuSocial span a.koSocialTwitterHover:hover {
color: #fff;
background: #55ACEE
}
#headerMenu .topmenu .topmenuSocial span a.koSocialGoogleHover:hover {
color: #fff;
background: #DE5347
}
#headerMenu .topmenu .topmenuSocial span a.koSocialYouTubeHover:hover {
color: #fff;
background: #CC181E
}
#headerMenu .topmenu .topmenuSocial span a.koSocialSkypeHover:hover {
color: #fff;
background: #009EE5
}
#headerMenu .topmenu .topmenuSocial span a.koSocialInstagramHover:hover {
color: #fff;
background: #125688
}
#headerMenu .topmenu .topmenuSocial span a.koSocialPinterestHover:hover {
color: #fff;
background: #BD1D23
}
#headerMenu .topmenu .topmenuSocial span a.koSocialLinkedInHover:hover {
color: #fff;
background: #1A85BC
}
#contentArea figure.image {
display: inline-block;
border: 1px solid #ccc;
margin: 10px 2px 10px 1px;
background: #f5f2f0;
}
#contentArea figure.align-left {
float: left;
}
#contentArea figure.align-right {
float: right;
}
#contentArea figure.image img {
margin: 10px 10px 0;
}
#contentArea figure.image figcaption {
margin: 6px 10px;
text-align: center;
font-size: 12px;
}
.kedit .page-header {
margin-top: 0;
}
.WxEditableArea .pagination>.active>a,
.WxEditableArea .pagination>.active>a:hover {
color: #fff;
}
ul.koCheckList {
margin: 0;
padding: 0;
list-style: none
}
ul.koCheckList li {
line-height: 40px;
color: #000
}
.koThemeDark ul.koCheckList li,
.keditDark ul.koCheckList li {
color: #FFF
}
ul.koCheckList li:before {
content: "\f00c";
font-family: "FontAwesome";
padding: 0;
margin-right: 10px;
background: #ccc;
color: #fff;
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
line-height: 32px;
border-radius: 50%
}
.koThemeDark ul.koCheckList li:before,
.keditDark ul.koCheckList li:before {
color: rgba(0, 0, 0, 0.7)
}
/*koGrid Content Block (6 items grid, with icons)*/
.koGrid {
display: flex;
flex-wrap: wrap;
}
.koGrid .col-sm-6 {
flex-grow: 0;
flex-shrink: 0;
justify-content: center
}
.koGrid .col-sm-6:nth-of-type(1),
.koGrid .col-sm-6:nth-of-type(2),
.koGrid .col-sm-6.col-md-4:nth-of-type(3) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.koGrid .col-sm-6 {
border-right: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.keditDark .koGrid .col-sm-6.col-md-4:nth-of-type(1),
.keditDark .koGrid .col-sm-6.col-md-4:nth-of-type(2),
.keditDark .koGrid .col-sm-6.col-md-4:nth-of-type(3),
.koThemeDark .koGrid .col-sm-6.col-md-4:nth-of-type(1),
.koThemeDark .koGrid .col-sm-6.col-md-4:nth-of-type(2),
.koThemeDark .koGrid .col-sm-6.col-md-4:nth-of-type(3) {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.keditDark .koGrid .col-sm-6.col-md-4,
.koThemeDark .koGrid .col-sm-6.col-md-4 {
border-right: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
}
.koGrid .col-sm-6:hover {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.025) 100%);
}
.koGrid .col-sm-6.col-md-4:nth-of-type(3n) {
border-right: 0;
}
.koGrid .col-sm-6.col-md-6:nth-of-type(2n) {
border-right: 0;
}
.koGrid .col-sm-6 {
padding: 45px 20px 30px;
}
.koGrid h2 {
font-size: 120%;
font-weight: 500;
margin: 34px 0px 18px;
}
.koGrid i:not(.fa-lg):not(.fa-2x):not(.fa-3x):not(.fa-4x):not(.fa-5x),
.koGrid span.fa {
font-size: 200%;
}
@media (max-width: 991px) {
.koGrid .col-sm-6.col-md-4:nth-of-type(n) {
border-bottom: 0;
border-right: 0;
border-top: 0;
}
}
.koSquares {
overflow: auto
}
.koSquares .koSquare {
float: left;
position: relative;
margin: 0;
background-color: #eee;
overflow: hidden;
}
.koSquares3 .koSquare {
width: 33.3333%;
padding-bottom: 33.3333%;
}
.koSquares4 .koSquare {
width: 25%;
padding-bottom: 25%;
}
.koSquareContent {
position: absolute;
height: 100%;
/* = 100% - 2*5% padding */
width: 100%;
/* = 100% - 2*5% padding */
padding: 0;
}
#website .koSquareContent a:not(.keditInlineEdit) {
position: absolute;
top: 0;
left: 0;
color: #555;
text-decoration: none;
display: block;
bottom: 0;
right: 0;
text-align: left;
padding: 10% 5% 5%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);
transition: 0.2s all;
margin-top: -5%
}
#website .koSquareContent a:not(.keditInlineEdit):hover {
/*background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);*/
padding-top: 7%;
margin-top: 0
}
.koSquareContent a strong {
display: block;
font-size: 150%;
color: #000
}
/* for 3.1+ */
.koSquare_content {
position: absolute;
height: 100%;
width: 100%;
padding: 0;
z-index: 1
}
.koSquare_content strong {
display: block;
font-size: 150%;
color: #000
}
.koSquare_content a {
position: absolute;
top: 0;
left: 0;
text-decoration: none;
display: block;
bottom: 0;
right: 0;
text-align: left;
height: 100%;
}
.koSquare_content a span {
padding: 10% 5% 5%;
position: absolute;
color: #555;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
transition: 0.2s all;
margin-top: -5%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);
}
.koSquare_content a em {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover
}
.koSquare_content a:hover span {
padding-top: 7%;
margin-top: 0
}
#website .keditDark .koSquareContent a:not(.keditInlineEdit) {
color: rgba(255, 255, 255, 0.8);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0) 50%);
}
#website .keditDark .koSquareContent a:not(.keditInlineEdit):hover {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0) 70%);
}
#website .keditDark .koSquareContent a strong {
color: #fff
}
.keditDark .koSquare_content a span {
color: rgba(255, 255, 255, 0.8);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0) 50%);
}
.keditDark .koSquare_content a:hover span {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0) 70%);
}
.keditDark .koSquare_content a strong {
color: #fff
}
#website .kedit.mce-content-body .koSquareContent a:not(.keditInlineEdit) {
background: rgba(255, 255, 255, 0.7);
bottom: auto;
}
#website .kedit.mce-content-body.keditDark .koSquareContent a:not(.keditInlineEdit) {
background: rgba(0, 0, 0, 0.5);
bottom: auto;
}
@media (max-width: 900px) {
.koSquares .koSquare {
width: 50%;
padding-bottom: 50%;
}
}
@media (max-width: 600px) {
.koSquares .koSquare {
width: 100%;
padding-bottom: 100%;
}
}
/*kedit koBlock2 koBlock2_A container-fluid text-center koZeroPadding keditActive mce-content-body mce-edit-focus*/
#website .koSquareContent img {
/*max-width:100%;
display: inline-block;
*/
height: 100%;
width: auto;
max-height: 100%;
max-width: none
}
.koCount ol {
counter-reset: li;
margin: 20px 0;
padding: 0;
}
.koCount ol>li {
position: relative;
margin: 0 0 10px 30px;
padding: 4px 8px 4px 60px;
list-style: none;
overflow: hidden;
min-height: 50px
}
.koCount ol>li::before {
content: counter(li);
counter-increment: li;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
line-height: 55px;
margin-right: 8px;
padding: 0;
font-size: 150%;
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
}
.koCount ol ol li:last-child {
margin-bottom: 0;
}
/*pricing tables:*/
.kopt_plan ul {
list-style: none;
font-size: 15px;
color: #9095aa;
padding: 0px;
margin: 0px;
}
.kopt_plan li {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 0px;
margin: 0px;
text-align: center;
height: 52px;
line-height: 52px;
}
.kopt_plan {
background-color: #2b2937;
border-radius: 0px 0px 5px 5px;
color: white;
text-align: center;
}
.kopt_header {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 20px;
font-size: 90px;
}
.kopt_header sub {
font-size: 32px;
margin-top: -30px;
bottom: .25em
}
.kopt_header sup {
font-size: 40px;
}
.kopt_header small {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.2);
padding: 0px;
margin: -20px 0 0;
}
.kopt_price {
padding: 20px;
}
.koPricingTableClean .kopt_plan {
background: #fff;
color: #555
}
.koPricingTableClean .kopt_header,
.koPricingTableClean .kopt_plan li {
border-bottom-color: rgba(0, 0, 0, 0.2);
}
.koPricingTableClean .kopt_header small {
color: rgba(0, 0, 0, 0.2);
}
span.kopt_type {
display: block;
margin: 0;
box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 0 0;
font-size: 29px;
color: #fff;
text-align: center;
padding: 20px;
}
.koPricingTable .col-md-4:nth-of-type(1) .kopt_type {
background: #eac80d;
}
.koPricingTable .col-md-4:nth-of-type(2) .kopt_type {
background: #1abc9c;
}
.koPricingTable .col-md-4:nth-of-type(3) .kopt_type {
background: #5d6a9a;
}
.koPricingTable .col-md-4 {
padding: 0;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
}
.koPricingTable .col-md-4:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transform: scale(1.02);
transition: all 0.2s
}
.koPricingTable .col-md-4:nth-of-type(2) {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
transform: scale(1.05);
z-index: 2
}
.koPricingTable .col-md-4:nth-of-type(2):hover {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
transform: scale(1.07);
}
.koPricingTable {
overflow: auto
}
/*submenu*/
.koMenuVertical,
.koMenuHorizontal {
text-align: center;
overflow: auto
}
.koMenuVertical ul,
.koMenuHorizontal ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
max-width: 400px;
display: inline-block;
}
.koMenuHorizontal ul {
width: auto;
max-width: 100%;
}
.koMenuVertical li {
display: block;
text-align: left;
padding: 0;
margin: 0
}
.koMenuHorizontal li {
display: inline-block;
text-align: left;
padding: 0;
margin: 0
}
.koMenuVertical li a,
.koMenuHorizontal li a {
display: block;
padding: 0;
margin: 0 0 3px;
line-height: 35px;
text-indent: 10px;
background: #f5f5f5;
border-radius: 5px;
text-decoration: none;
color: #555
}
.koMenuHorizontal li a {
text-indent: 0;
padding: 0 20px;
line-height: 40px;
margin: 0
}
.koMenuVertical li a span,
.koMenuHorizontal li a span {
color: #555
}
.koMenuVertical li a:hover,
.koMenuHorizontal li a:hover {
background: #eee
}
.koMenuVertical li a:hover span,
.koMenuHorizontal li a:hover span {
color: #333
}
.koMenuVertical li ul li {
margin-left: 10%;
}
.koMenuHorizontal li ul {
position: absolute;
display: none;
width: 200px
}
.koMenuHorizontal li ul li {
display: block;
padding-top: 5px;
}
.koMenuHorizontal li:hover ul li ul {
display: none;
right: -200px;
top: 0
}
.koMenuHorizontal li:hover ul {
display: block;
}
.koMenuHorizontal li:hover ul li:hover ul {
display: block;
}
/*
@media (min-width:768px){
@media (min-width:992px){
*/
@media (min-width:900px) {
.rowVCenter {
display: flex;
align-items: center
}
.rowVCenter .col-md-1,
.rowVCenter .col-md-2,
.rowVCenter .col-md-3,
.rowVCenter .col-md-4,
.rowVCenter .col-md-5,
.rowVCenter .col-md-6,
.rowVCenter .col-md-7,
.rowVCenter .col-md-8,
.rowVCenter .col-md-9,
.rowVCenter .col-md-10,
.rowVCenter .col-md-11,
.rowVCenter .col-md-12 {
/*
flex-direction: column;justify-content: flex-start;;
align-items: center;
align-items:flex-start;
align-content:flex-start;
*/
}
}
audio.kopageAudio {
display: block;
text-align: center;
margin: 0 auto;
border-radius: 5px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1)
}
[data-balloon] {
position: relative;
}
[data-balloon]::before {
opacity: 0;
pointer-events: none;
transition: all .18s ease-out;
background: rgba(17, 17, 17, 0.9);
border-radius: 4px;
color: #fff;
text-shadow: none;
text-align: center;
content: attr(data-balloon);
font-size: 12px;
padding: 0 10px;
line-height: 30px;
position: absolute;
white-space: nowrap;
pointer-events: none;
z-index: 10;
}
[data-balloon]::after {
background: no-repeat url('data:image/svg+xml;utf8,');
background-size: 100% auto;
width: 18px;
height: 6px;
opacity: 0;
pointer-events: none;
transition: all .18s ease-out;
content: '';
position: absolute;
z-index: 10;
}
[data-balloon]:hover::before,
[data-balloon]:hover::after {
opacity: 1;
pointer-events: none;
}
[data-balloon][data-balloon-pos="in"]::before {
top: 3px;
left: 3px;
margin-left: 3px;
opacity: 0;
padding: 0 10px;
line-height: 25px;
font-size: 12px;
background: #555;
background: linear-gradient(to bottom, #666 0%, #333 100%);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
/*margin-bottom: 11px;
transform: translate3d(-50%, 10px, 0);
transform-origin: top; */
}
[data-balloon][data-balloon-pos="in"]::after {
display: none;
}
[data-balloon][data-balloon-pos="in"]:hover::before {
margin-left: 0;
opacity: 1;
}
[data-balloon][data-balloon-pos="up"]::before {
bottom: 100%;
left: 50%;
margin-bottom: 11px;
transform: translate3d(-50%, 10px, 0);
transform-origin: top;
}
[data-balloon][data-balloon-pos="up"]::after {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
transform: translate3d(-50%, 10px, 0);
transform-origin: top;
}
[data-balloon][data-balloon-pos="up"]:hover::before {
transform: translate3d(-50%, 0, 0);
}
[data-balloon][data-balloon-pos="up"]:hover::after {
transform: translate3d(-50%, 0, 0);
}
[data-balloon][data-balloon-pos='down']::before {
left: 50%;
margin-top: 11px;
top: 100%;
transform: translate3d(-50%, -10px, 0);
}
[data-balloon][data-balloon-pos='down']::after {
background: no-repeat url('data:image/svg+xml;utf8,');
background-size: 100% auto;
width: 18px;
height: 6px;
left: 50%;
margin-top: 5px;
top: 100%;
transform: translate3d(-50%, -10px, 0);
}
[data-balloon][data-balloon-pos='down']:hover::before {
transform: translate3d(-50%, 0, 0);
}
[data-balloon][data-balloon-pos='down']:hover::after {
transform: translate3d(-50%, 0, 0);
}
/**/
[data-balloon][data-balloon-pos='downleft']::before {
margin-right: 0;
right: 0;
margin-top: 14px;
top: 100%;
/*transform: translate3d(-50%, -10px,0)*/
;
}
[data-balloon][data-balloon-pos='downleft']::after {
background: no-repeat url('data:image/svg+xml;utf8,');
background-size: 100% auto;
width: 18px;
height: 6px;
/*left: 50%;*/
right: 10px;
margin-top: 8px;
top: 100%;
/*transform: translate3d(-50%, -10px, 0)*/
;
}
[data-balloon][data-balloon-pos='downleft']:hover::before {
/*transform: translate3d(-50%, 0, 0);*/
margin-top: 11px;
}
[data-balloon][data-balloon-pos='downleft']:hover::after {
/*transform: translate3d(-50%, 0, 0);*/
margin-top: 5px;
}
/**/
[data-balloon][data-balloon-pos='downright']::before {
margin-left: 0;
left: 0;
margin-top: 14px;
top: 100%;
/*transform: translate3d(-50%, -10px,0)*/
;
}
[data-balloon][data-balloon-pos='downright']::after {
background: no-repeat url('data:image/svg+xml;utf8,');
background-size: 100% auto;
width: 18px;
height: 6px;
/*left: 50%;*/
left: 10px;
margin-top: 8px;
top: 100%;
/*transform: translate3d(-50%, -10px, 0)*/
;
}
[data-balloon][data-balloon-pos='downright']:hover::before {
/*transform: translate3d(-50%, 0, 0);*/
margin-top: 11px;
}
[data-balloon][data-balloon-pos='downright']:hover::after {
/*transform: translate3d(-50%, 0, 0);*/
margin-top: 5px;
}
[data-balloon][data-balloon-pos='left']::before {
margin-right: 11px;
right: 100%;
top: 50%;
transform: translate3d(10px, -50%, 0);
}
[data-balloon][data-balloon-pos='left']::after {
background: no-repeat url('data:image/svg+xml;utf8,');
background-size: 100% auto;
width: 6px;
height: 18px;
margin-right: 5px;
right: 100%;
top: 50%;
transform: translate3d(10px, -50%, 0);
}
[data-balloon][data-balloon-pos='left']:hover::before {
transform: translate3d(0, -50%, 0);
}
[data-balloon][data-balloon-pos='left']:hover::after {
transform: translate3d(0, -50%, 0);
}
[data-balloon][data-balloon-pos='right']::before {
left: 100%;
margin-left: 11px;
top: 50%;
transform: translate3d(-10px, -50%, 0);
}
[data-balloon][data-balloon-pos='right']::after {
background: no-repeat url('data:image/svg+xml;utf8,');
background-size: 100% auto;
width: 6px;
height: 18px;
left: 100%;
margin-left: 5px;
top: 50%;
transform: translate3d(-10px, -50%, 0);
}
[data-balloon][data-balloon-pos='right']:hover::before {
transform: translate3d(0, -50%, 0);
}
[data-balloon][data-balloon-pos='right']:hover::after {
transform: translate3d(0, -50%, 0);
}
[data-balloon][data-balloon-length='small']::before {
white-space: normal;
width: 80px;
}
[data-balloon][data-balloon-length='medium']::before {
white-space: normal;
width: 150px;
}
[data-balloon][data-balloon-length='large']::before {
white-space: normal;
width: 260px;
}
[data-balloon][data-balloon-length='xlarge']::before {
white-space: normal;
width: 380px;
}
@media screen and (max-width: 768px) {
[data-balloon][data-balloon-length='xlarge']::before {
white-space: normal;
width: 90vw;
}
}
[data-balloon][data-balloon-length='fit']::before {
white-space: normal;
width: 100%;
}