/****************************************************************************************************
*** Fonts
****************************************************************************************************/
@font-face { font-family: 'Imperial'; src: url('../fonts/imperial-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Imperial'; src: url('../fonts/imperial-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-v40-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gemeli'; src: url('../fonts/gemeli-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gemeli'; src: url('../fonts/gemeli-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/****************************************************************************************************
*** Generelle Einstellungen
****************************************************************************************************/
a[type=button] { -webkit-appearance: none; }
::selection { background: var(--bs-primary); color: rgb(255, 255, 255); text-shadow: none; }
:active, :focus { outline: none !important; }
html, body { font-family: "Open Sans"; font-size: 1rem; line-height: 1.75; margin: 0; padding: 0; width: 100%; }
@media(min-width: 1200px){ html, body { font-size: 1.125rem; line-height: 2; } }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: var(--bs-primary); }
body { position: relative; height: 100%; line-height: 1.5; -ms-word-wrap: break-word; word-wrap: break-word; }
/* Icons / Farben (Basis: schwarz) usw. */
img[class*='icon-'] { width: auto; vertical-align: sub; margin-bottom: 2px; }
.icon-primary { filter: invert(13%) sepia(8%) saturate(5057%) hue-rotate(167deg) brightness(97%) contrast(98%); }
.icon-secondary { filter: invert(50%) sepia(41%) saturate(579%) hue-rotate(11deg) brightness(99%) contrast(103%); }
.icon-tertiary { filter: invert(100%) sepia(67%) saturate(1578%) hue-rotate(177deg) brightness(105%) contrast(99%); }
.icon-white { filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(164deg) brightness(101%) contrast(100%); }
/* <picture>-Element */
picture { display: block; position: relative; }
/* Image => Lightbox (Zoomansicht) */
img.pswp__img { object-fit: contain; }
/* Image-Overlay */
picture .image-overlay { position: absolute; bottom: 0; width: 100%; }
picture .image-overlay h1, picture .image-overlay h2, picture .image-overlay h3, picture .image-overlay h4, picture .image-overlay h5 { font-size: 1.5rem; text-transform: uppercase; }
picture .image-overlay p { font-size: 1rem; line-height: 1.2;}
/* Bootstrap-Alarmmeldungen */
.alert ul { list-style-type: none; margin: 0; padding: 0; }
/* line-height für <p>-Absätze ändern */
p { line-height: 2; }
p.reduced_lineheight { line-height: 1.5; }
.card-text p { font-size: 1rem; line-height: 1.75; hyphens: auto; }
/* Kleiner Text */
.fs-small { font-size: 0.875rem; }
/* vertical align */
.valign-center { vertical-align: super; }

.border-top-bottom { border-top: 0.75rem solid rgb(var(--bs-primary-rgb)); border-bottom: 0.75rem solid rgb(var(--bs-secondary-rgb)); }
.border-top { border-top: 0.75rem solid rgb(var(--bs-secondary-rgb)) !important; }
.border-bottom { border-bottom: 0.75rem solid rgb(var(--bs-secondary-rgb)) !important; }

/***************************************************************************************************
*** <section>
***************************************************************************************************/
section { position: relative; overflow: hidden; }
section img.background { display: none; }
@media(min-width: 1200px){ section img.background { display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 100%; z-index: -1; pointer-events: none; object-fit: cover; } }
/*section ul, section ol { padding-left: 1.5rem; }
section ul li, section ol li { margin-bottom: 0.5rem; }
section ul li:last-child, section ol li:last-child { margin-bottom: 2rem; }*/
.ptzero { padding-top: 0 !important; }
.ptsm { padding-top: 1rem !important; }
.pt { padding-top: 2rem !important; }
.ptxl { padding-top: 4rem !important; }
.pbzero { padding-bottom: 0 !important; }
.pbsm { padding-bottom: 1rem !important; }
.pb { padding-bottom: 2rem !important; }
.pbxl { padding-bottom: 4rem !important; }
.mtzero { margin-top: 0 !important; }
.mtsm { margin-top: 1rem !important; }
.mt { margin-top: 2rem !important; }
.mtxl { margin-top: 4rem !important; }
.mbzero { margin-bottom: 0 !important; }
.mbsm { margin-bottom: 1rem !important; }
.mb { margin-bottom: 2rem !important; }
.mbxl { margin-bottom: 4rem !important; }
/***************************************************************************************************
*** <header>
***************************************************************************************************/
header:not(.index) { background-color: rgb(var(--bs-primary-rgb)); z-index: 1 }
header.index { position: absolute; width: 100%; z-index: 1; }
header .address { font-size: 0.875rem; color: rgb(255, 255, 255); }
@media(min-width: 1200px){ header .address { font-size: 1rem; }}
@media(min-width: 1400px){ header .address { font-size: 1.125rem; }}
header .main-menu-toggler { width: 50px; height: 50px; top: 15px; right: 15px; border: 0; border-radius: 0; font-size: 1.25rem; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6ICQkJC9HZW5lcmFsU3RyLzE5Nj1BZG9iZSBJbGx1c3RyYXRvciAyNy42LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIgoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIKCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ExOEEyRDt9Cgkuc3Qxe2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjkuNzk4NDtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLW1pdGVybGltaXQ6MTAyLjQ7fQo8L3N0eWxlPgo8cmVjdCBjbGFzcz0ic3QwIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTA4LjUsMTc0LjFoMjk1IE0xMDguNSwyNTZoMjk1IE0xMDguNSwzMzcuOWgyOTUiLz4KPC9zdmc+Cg=="); background-repeat: no-repeat; margin-right: 0.75rem; }
/* Sprachen-Schalter */
#clang_switch, #clang_switch_mobile { line-height: 0; }
#clang_switch a, #clang_switch_mobile a { position: relative; width: 24px; height: 18px; display: inline-block; padding: 0; box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 1px; }
#clang_switch a:not(#clang_switch a:last-child) { margin-right: 0.5rem; }
@media (min-width: 576px){ #clang_switch_mobile a:not(#clang_switch_mobile a:last-child) { margin-right: 0.5rem; } }
#clang_de::before, #clang_en::before, #clang_ru::before { position: absolute; top: 0; left: 0; width: 24px; height: 18px; content: ''; background-repeat: no-repeat; }
#clang_de::before { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZsYWctaWNvbnMtZGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIKCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NDAgNDgwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGQ0MwMDt9Cgkuc3Qxe2ZpbGw6I0ZGMDAwMDt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0wLDMyMGg2NDB2MTYwSDBWMzIweiIvPgo8cGF0aCBkPSJNMCwwaDY0MHYxNjBIMFYweiIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMCwxNjBoNjQwdjE2MEgwVjE2MHoiLz4KPC9zdmc+Cg=="); }
#clang_en::before { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZsYWctaWNvbnMtZ2IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIKCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NDAgNDgwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzAwMjQ3RDt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cgkuc3Qye2ZpbGw6I0NGMTQyQjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0wLDBoNjQwdjQ4MEgwVjB6Ii8+CjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik03NSwwbDI0NCwxODFMNTYyLDBoNzh2NjJMNDAwLDI0MWwyNDAsMTc4djYxaC04MEwzMjAsMzAxTDgxLDQ4MEgwdi02MGwyMzktMTc4TDAsNjRWMEg3NXoiLz4KPHBhdGggY2xhc3M9InN0MiIgZD0iTTQyNCwyODFsMjE2LDE1OXY0MEwzNjksMjgxSDQyNHogTTI0MCwzMDFsNiwzNUw1NCw0ODBIMEwyNDAsMzAxeiBNNjQwLDB2M0wzOTEsMTkxbDItNDRMNTkwLDBINjQweiBNMCwwCglsMjM5LDE3NmgtNjBMMCw0MlYweiIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjQxLDB2NDgwaDE2MFYwSDI0MXogTTAsMTYwdjE2MGg2NDBWMTYwSDB6Ii8+CjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0wLDE5M3Y5Nmg2NDB2LTk2SDB6IE0yNzMsMHY0ODBoOTZWMEgyNzN6Ii8+Cjwvc3ZnPgo="); }
#clang_ru::before { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZsYWctaWNvbnMtZGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIKCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NDAgNDgwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0Q1MkIxRTt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cgkuc3Qye2ZpbGw6IzAwMzlBNjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0wLDMyMGg2NDB2MTYwSDBWMzIweiIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMCwwaDY0MHYxNjBIMFYweiIvPgo8cGF0aCBjbGFzcz0ic3QyIiBkPSJNMCwxNjBoNjQwdjE2MEgwVjE2MHoiLz4KPC9zdmc+Cg=="); }
#clang_switch_mobile { margin-top: 15px; }
#clang_switch_mobile a { height: 33px; }

/***************************************************************************************************
*** <footer>
***************************************************************************************************/
footer ul.footer-nav { list-style-type: none; text-transform: uppercase; margin-bottom: 0; line-height: 2; }
@media (min-width: 576px) and (max-width:767px) {
  footer ul.footer-nav { width: 100%; }
  footer ul.footer-nav li { display: inline-block; text-align: center; margin-right: 1rem; }
  footer ul.footer-nav li:last-child { margin-right: 0; }
}
footer a { color: rgb(255, 255, 255); }
footer a:hover { color: rgb(var(--bs-secondary-rgb)); }
/***************************************************************************************************
*** Navigation
***************************************************************************************************/
/*** Aufflackern der Mobile-Navigation beim Pageload vermeiden... ***/
#mobile_menu:not(.mm-menu) { display: none; }
/*** kleine Displays: Logo verkleinern ***/
#main_menu .navbar .logo img { width: 150px; height: auto; }
@media(min-width: 350px){ #main_menu .navbar .logo img { width: 180px; } }
@media(min-width: 370px){ #main_menu .navbar .logo img { width: 200px; } }
@media(min-width: 420px){ #main_menu .navbar .logo img { width: 240px; } }
@media(min-width: 470px){ #main_menu .navbar .logo img { width: 270px; } }
#main_menu ul li { list-style-type: none; }
#main_menu ul li a { font-size: 1.125rem; letter-spacing: 0.125rem; text-decoration: none; border-top: 1px solid rgb(255, 255, 255); color: rgb(255, 255, 255); }
#main_menu ul li a:hover { color: rgb(var(--bs-secondary-rgb)); border-top: 1px solid rgb(var(--bs-secondary-rgb)); }
#main_menu ul li a:hover img.icon-white { filter: invert(50%) sepia(41%) saturate(579%) hue-rotate(11deg) brightness(99%) contrast(103%); }
/*** Mobilnavigation ***/
.mm-menu { --mm-color-background: var(--bs-secondary); --mm-color-text: rgb(255, 255, 255); --mm-color-button: rgb(255, 255, 255); --mm-color-text-dimmed: rgb(255, 255, 255); --mm-color-border: rgba(255, 255, 255, 0.5); }
.mm-navbars .mm-navbar:first-child { background: rgb(255, 255, 255); color: rgb(var(--bs-primary-rgb)); padding: 1.5rem 0; font-size: 1.75rem; }
.mm-navbars .mm-navbar:first-child a { font-weight: 700; }
.mm-navbars .mm-navbar:first-child .spaced { letter-spacing: 0.5rem; }
.mm-navbar { font-weight: bold; justify-content: end; min-height: 35px; }
.mm-btn--close { font-size: 150%; }
.mm-panel { background-color: rgb(var(--bs-primary-rgb)); }
.mm-wrapper__blocker { background: rgba(0, 0, 0, 0.8); }
.mm-wrapper--opened .mm-wrapper__blocker { opacity: 1; --mm-blocker-opacity-delay: 0.1s; }

/***************************************************************************************************
*** Fragment: headline.php
***************************************************************************************************/
.heading { font-family: 'Imperial'; position: relative; text-align: center; padding-top: 2rem; line-height: 1; }
.heading .headline { text-transform: uppercase; }
.heading + hr.splitter { opacity: 1; border: 0; height: 5px; margin: 2rem 0 3rem; background: linear-gradient(to right, rgb(var(--bs-secondary-rgb)), transparent); }
.heading .subline { font-size: 1.5rem; }

/***************************************************************************************************
*** Modul: Pagebanner
***************************************************************************************************/
.pagebanner img { object-fit: cover; }
.pagebanner .bannertext { position: absolute; top: 20%; left: 50%; padding: 1rem; transform: translate(-50%, -20%); width: 100%; color: rgb(255, 255, 255); line-height: 1.25; text-shadow: 3px 3px 3px rgb(0, 0, 0) }
.pagebanner .bannertext .title { font-family: 'Imperial'; font-size: 2rem; font-weight: 400; letter-spacing: 0.125rem; margin-bottom: 1rem; }
.pagebanner .bannertext .subline { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.25rem; font-weight: 400; line-height: 2; }
@media(orientation: portrait){
    .pagebanner img { height: 100vh; max-width: 100%; }
}
@media(orientation: landscape){
    .pagebanner img { width: 100%; max-height: 100vh; }
    .pagebanner .bannertext { top: 30%; transform: translate(-50%, -30%); background-color: rgb(var(--bs-primary-rgb)); mix-blend-mode: screen; }
}
@media(min-width: 360px){
    .pagebanner .bannertext .title { font-size: 2.5rem; }
    .pagebanner .bannertext .subline { font-size: 1rem; letter-spacing: 0.25rem; }
}
@media(min-width: 1200px){
    .pagebanner .bannertext .title { font-size: 3.75rem; margin-bottom: 1rem; }
    .pagebanner .bannertext .subline { font-size: 1.5rem; letter-spacing: 0.75rem; padding-bottom: 1rem; }
}
@media(min-width: 1600px){
    .pagebanner .bannertext .title { font-size: 4rem; }
}

/***************************************************************************************************
*** Modul: Open Street Maps
***************************************************************************************************/
/* Modifkation für Kartenanzeige auf Startseite */
#osm_map .leaflet-popup p { line-height: 1.5; }
.minimap #osm_map { width: 100%; height: 100%; aspect-ratio: 1; }

/***************************************************************************************************
*** Fragment: boote_einzeln.php
***************************************************************************************************/
.techdata { border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin: 0; padding: 0.25rem 0; font-size: 0.875rem; }
@media(min-width: 576px) { .techdata { font-size: 1rem; }}
.techdata .col-5 { font-weight: 700; }
.accessoires { line-height: 2; font-size: 0.875rem; }
.accessoires img { width: 25px; height: 25px; vertical-align: middle; margin-bottom: 4px; }
@media(min-width: 576px) {
   .accessoires { font-size: 1rem; }
   .accessoires img { width: 30px; height: 30px;}
}
/***************************************************************************************************
*** Fragment: yachtbox.php // boote_alle.php
***************************************************************************************************/
/*.yacht-iconbar .col-auto { padding-left: 0.75rem; padding-right: 0.75rem; }
.yacht-iconbar .col-auto:first-child { padding-left: calc(var(--bs-gutter-x) * 0.5) }
.yacht-iconbar .col-auto:last-child { padding-right: 0 calc(var(--bs-gutter-x) * 0.5) }
@media(min-width: 370px) { .yacht-iconbar .col-auto { padding-left: calc(var(--bs-gutter-x) * 0.5); padding-right: calc(var(--bs-gutter-x) * 0.5); }}
@media(min-width: 1200px) { .yacht-iconbar .col-auto { padding-left: 0.5rem; padding-right: 0.5rem; } }
*/


.yacht-iconbar img[class*='icon-'] { height: 10px; }
@media(min-width: 370px) { .yacht-iconbar img[class*='icon-'] { height: 13px; }}
@media(min-width: 400px) { .yacht-iconbar img[class*='icon-'] { height: 18px; }}
@media(min-width: 768px) { .yacht-iconbar img[class*='icon-'] { height: 13px; }}

/***************************************************************************************************
*** Modul: Buchungskalender - Kalender
***************************************************************************************************/
label.control-label { font-size: 0.875rem;  }
input.form-control, textarea.form-control { background-color: rgb(var(--bs-tertiary-rgb));}
label + p.help-block { display: inline-block; }
#bookingform-step2 label { font-weight: 700; }
#bookingform-step2 input[type="checkbox"] { margin-right: 1rem; width: 1rem; height: 1rem; }
/***************************************************************************************************
*** Modul: Buchungskalender - Buchung Zusammenfasssung
***************************************************************************************************/
.summary .label { font-weight: 700; }
.summary .row.underline { padding: 1rem 0; line-height:  1.5; border-bottom: 1px solid rgb(0, 0, 0); }
.summary .row.underline + .row.underline { }
/***************************************************************************************************
*** Modul: Kontaktformular
***************************************************************************************************/
.weiba_formular input, .weiba_formular textarea { margin-bottom: 1.5rem; }



/***************************************************************************************************
*** Modul: FAQ - Frage/Antwort
***************************************************************************************************/
.accordion-item:nth-child(odd) .accordion-header button { background-color: rgb(var(--bs-tertiary-rgb)); }
.accordion-body { padding: 1rem 1rem 3rem; }
.accordion-button { font-family: 'Open Sans'; font-size: 1.125rem; font-weight: 700; }



/***************************************************************************************************
*** Vendor-Extension: tiny-slider
***************************************************************************************************/
.tns-nav .controls { text-align: center; }
.tns-nav .controls li {
  display: block;
  position: absolute;
  top: 50%;
  height: 60px;
  line-height: 60px;
  margin-top: -30px;
  padding: 0 15px;
  cursor: pointer;
  transition: background 0.3s;
}
.tns-nav .controls li img { display: inline-block; vertical-align: middle; }
.tns-nav .controls .prev { left: 0; }
.tns-nav .controls .next { right: 0; }
.tns-nav .controls li:hover { background: #f2f2f2; }

.tns-controls { text-align: center; margin-bottom: 10px; }
.tns-controls [aria-controls] {
  font-size: 15px;
  margin: 0 5px;
  padding: 0 1em;
  height: 2.5em;
  color: #000;
  background: #66CCFF;
  border-radius: 3px;
  border: 0;
}
.tns-nav .controls [data-action] {
  display: block;
  margin: 10px auto;
  font-size: 17px;
  min-width: 3em;
  text-align: center;
  background: transparent;
  border: 0;
}
.tns-controls [disabled] { 
  color: #999999;
  background: #B3B3B3; 
  cursor: not-allowed !important;
}
.tns-nav {
  text-align: center;
  margin: 10px 0;
}
.tns-nav > [aria-controls] {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0 5px;
  border-radius: 50%;
  background: #ddd;
  border: 0;
}
.tns-nav > .tns-nav-active { background: #999; }