/* =Kunde: 	Zahnarzt Gfeller
-----------------------------------------------------------------------------*/

/* =Imports
-----------------------------------------------------------------------------*/
@import "css/cookie-modal.css";
@import url("https://use.typekit.net/kwi5nvk.css");


/* =General
-----------------------------------------------------------------------------*/

html  {
	/* 2 */
	-webkit-text-size-adjust: 100%;
	/* 3 */
	background: rgba(255,255,255,1);
	color: rgba(84,84,88,1);
	font: 20px/28px "seravek-web", Arial, Helvetica, Geneva, sans-serif;
}
body  {
	text-decoration: none;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}
header, section, footer {
	display: block;
	clear: both;
	float: none;
}


/* =Helper
-----------------------------------------------------------------------------*/


/* =Links
-----------------------------------------------------------------------------*/

a, .uk-link {
  color: rgba(55,75,155,1);
  text-decoration: none;
  cursor: pointer;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}
a:hover, a:focus, a:hover, .uk-link:hover {
  color: rgba(0,0,0,1);
  text-decoration: none;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}
::-moz-selection { 
	background: rgba(0,0,0,1); color: #fff; text-shadow:none; 
}
::selection { 
	background: rgba(0,0,0,1); color: #fff; text-shadow:none; 
}



/* =Typography
-----------------------------------------------------------------------------*/

* + h1, * + .uk-h1, * + h2, * + .uk-h2, * + h3, * + .uk-h3, * + h4, * + .uk-h4, * + h5, * + .uk-h5, * + h6, * + .uk-h6 {
    margin-top: 0px;
}
h1 {
	font: normal normal 3.5em/1em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
	color: rgba(55,75,155,1);
	padding-bottom: 80px;
}
h2, .uk-h2 {
	font: normal 600 1.2em/1.4em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
}
h3, .uk-h3, .uk-accordion-title {
	font: normal 600 1.2em/1.4em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
	color: rgba(55,75,155,1);
	text-transform: uppercase;
}
h4, .uk-h4 {
	font: 1em/1.4em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
}
strong, .uk-strong {
	font: 1em/1.45em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
}
ul, ol{
	padding-left: 16px;
}
ul li, ol li {
	padding-left: 0px;
}
strong {
	font-weight: bold;
	color: rgba(55,75,155,1);
}
.grid > .column-8 p {
	padding-left: 80px;
}

/* =Color
-----------------------------------------------------------------------------*/
.blau, .uk-primary {
	background-color: rgba(55,75,155,1);
	color: rgba(255,255,255,1);
}
.blau-80, .uk-primary-80 {
	background-color: rgba(55,75,155,.8);
	color: rgba(255,255,255,1);
}
.grey, .uk-secondary {
	background-color: rgba(99,101,105,1);
	color: rgba(255,255,255,1);
}
.hellgrau {
	background-color: rgba(240,242,244,1);
}
.text-weiss, .text-weiss strong, .text-weiss a {
	color: rgba(255,255,255,1) !important;
}

/* =Grid
-----------------------------------------------------------------------------*/
.uk-container {
	max-width: 1400px;
}
section, footer {
	z-index: 2;
	position: relative;
}
.grid(last-of-type) {
	margin-bottom: 60px;
}
.grid > *:not(:last-child) {
	margin-right: 20px;
	margin-bottom: 60px;
}
.grid > .column-12 {
	width: calc(100% - 0px);
}
.grid > .column-8 {
	width: calc(66% - 20px);
}
.grid > .column-6 {
	width: calc(50% - 20px);
}
.grid > .column-4 {
	width: calc(33% - 20px);
}
.grid > .column-3 {
	width: calc(25% - 20px);
}
.grid figure {
	overflow: hidden;
}
.video iframe {
    height: 675px;
    width: 100%;
}


/* =Header
-----------------------------------------------------------------------------*/

header .uk-navbar-transparent {
	position: fixed;
	z-index: 1000;
	top: 0px;
	right: 0;
	left: 0;
	background-color: rgba(255,255,255,1);
	height: 100px;
}
header .uk-navbar-sticky {
	height: 50px;
	background-color: rgba(255,255,255,1);
	-webkit-transition: all .35s ease-in-out;
	   -moz-transition: all .35s ease-in-out;
	     -o-transition: all .35s ease-in-out;
	        transition: all .35s ease-in-out;
}
header .uk-navbar-transparent a.logo img:first-of-type {
	display: block;
	position: absolute;
	height: 70px;
	top: 15px;
	left: 40px;
	opacity: 1;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}
header .uk-navbar-sticky a.logo img:first-of-type {
	display: block;
	position: absolute;
	height: 30px;
	top: 10px;
	left: 40px;
	opacity: 0;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}

header .uk-navbar-transparent a.logo img:nth-of-type(2) {
	display: block;
	position: absolute;
	height: 60px;
	top: 20px;
	left: 40px;
	opacity: 0;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}
header .uk-navbar-sticky a.logo img:nth-of-type(2) {
	display: block;
	position: absolute;
	height: 30px;
	top: 10px;
	left: 40px;
	opacity: 1;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}

header .uk-navbar-transparent .icons {
	position: fixed;
	top: 35px;
	right: 20px;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}
header .uk-navbar-sticky .icons {
	position: fixed;
	top: 10px;
	right: 20px;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}
.icons > * {
	margin-left: 20px;
	color: rgba(55,75,155,1);
}

.uk-sticky-fixed .hamburger,
.uk-sticky-fixed.uk-active .hamburger {
}
.uk-sticky-fixed .zeiten,
.uk-sticky-fixed.uk-active .zeiten {
}
.uk-sticky-fixed .news,
.uk-sticky-fixed.uk-active .news {
}
.uk-close {
    color: rgba(255,255,255,1);
	padding: 10px;
}

/* =Navigation
-----------------------------------------------------------------------------*/

.nav {
	float: right;
	margin-right: 40px;
}
.uk-navbar-nav {
    gap: 15px;
}
.uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle {
    column-gap: 0em;
    min-height: 20px;
    padding: 0 0 0 15px;
	text-transform: none;
}
header > .uk-navbar-transparent .uk-navbar-nav a {
	color: rgba(99,101,105,1);
	font: normal bold 1.2rem/1.3em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
	padding-top: 50px;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
	text-transform: uppercase;
}
header > .uk-navbar-sticky .uk-navbar-nav a {
	color: rgba(99,101,105,1);
	font: normal bold 1.2rem/1.3em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
	padding-top: 10px;
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
	text-transform: uppercase;
}
header > .uk-navbar-transparent .uk-navbar-nav a:hover,
header > .uk-navbar-sticky .uk-navbar-nav a:hover,
header > .uk-navbar-transparent .uk-navbar-nav li.uk-active a,
header > .uk-navbar-sticky .uk-navbar-nav li.uk-active a {
	color: rgba(55,75,155,1);
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}
.headerIcon {
	margin: 0;
	padding: 0;
}

/* =Unternavigation
-----------------------------------------------------------------------------*/

/* =Offcanvas
-----------------------------------------------------------------------------*/

/* =Seitenaufbau
-----------------------------------------------------------------------------*/
.slider {
	margin-bottom: 0px;
	border: 40px solid rgba(255,255,255,1);
}
.ringNeg {
	position: absolute;
	z-index:1;
	left: -30%;
	top: 20%;
	opacity: .5;
}
.ringPos {
	position: absolute;
	z-index:-1;
	right: -30%;
	top: 10%;
	opacity: .5;
	overflow: hidden;
}
.box {
	position: absolute;
	width: 90%;
	max-width: 500px;
	right: 10%;
	bottom: 50px;
}
.box > .uk-primary-80, .kasten > * > .uk-primary {
	padding: 30px 30px 40px;
}
.box > .hellgrau, .kasten > * > .hellgrau {
	padding: 15px 0;
}
.team .hellgrau {
	padding-bottom: 15px;
}
.team .padding {
	padding: 15px;
}
.box .uk-primary-80 h2, .kasten > * > .uk-primary h2 {
	color: rgba(255,255,255,1);
}

.table > * {
	border-bottom: 1px solid rgba(255,255,255,.5);
	padding-top: 4px;
	padding-bottom: 4px;
}

/* =Module
-----------------------------------------------------------------------------*/
a .uk-icon {
	border-radius: 100%;
	background-color: rgba(255,255,255,1);
	border: 1px solid rgba(55,75,155,1);
	padding: 5px;
	color: rgba(55,75,155,1);
	-webkit-transition: all .45s ease-in-out;
	   -moz-transition: all .45s ease-in-out;
	     -o-transition: all .45s ease-in-out;
	        transition: all .45s ease-in-out;
}
a:hover .uk-icon {
	background-color: rgba(55,75,155,1);
	border: 1px solid rgba(55,75,155,1);
	color: rgba(255,255,255,1);
	padding: 5px;
}

/* =Plugins
-----------------------------------------------------------------------------*/
.uk-lightbox {
	background-color: rgba(255,255,255,.9);
}
.uk-lightbox-toolbar {
	background-color: rgba(255,255,255,0);
}
.uk-lightbox-button {
	background-color: rgba(84,84,88,.8);
	color: rgba(255,255,255,1);
}
.uk-lightbox-toolbar * {
	color: rgba(84,84,84,1) !important;
}

/* =Formulare
-----------------------------------------------------------------------------*/
.uk-button-disabled {
	cursor: not-allowed;
	border: 1px solid transparent;
	margin-top: 16px;
	margin-bottom: 16px;
}
.uk-radio,.uk-checkbox,.uk-checkbox {
  background-color: rgba(84,84,88,0);
  border-color: rgba(84,84,88,1);
}
.uk-radio:checked,.uk-checkbox:checked,.uk-checkbox:indeterminate {
  background-color: rgba(84,84,88,1);
  border-color: rgba(84,84,88,1);
}
.uk-radio:checked:focus,.uk-checkbox:checked:focus,.uk-checkbox:indeterminate:focus {
  background-color: rgba(0,0,0,1);
}
.uk-form-label {
	font-size: 1em;
	color: rgba(84,86,85,.5);
}
.uk-input, .uk-select, .uk-textarea {
	background-color: rgba(255,255,255,1);
	color: #000;
	border: 0px solid rgba(197,199,199,1);
	border-bottom: 2px solid rgba(244,244,244,1);
	transition: 0.45s ease-in-out;
	transition-property: color, background-color, border;
}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
	outline: none;
	background-color: rgba(255,255,255,1);
	color: #000;
	border-bottom: 2px solid rgba(84,86,85,1);
}
.honeypot {
	position: absolute;
	left: -9999px;
}

/* =
-----------------------------------------------------------------------------*/


/* = Mapbox
-----------------------------------------------------------------------------*/

.mapboxgl-map {
	height: 700px !important;
    min-height: 500px !important;
}
.mapboxgl-canvas {
}
.mapboxgl-popup-content {
    background: rgba(255,255,255,1) !important;
    border-radius: 0px !important;
    box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
    padding: 30px 20px 15px !important;
	min-width: 240px;
}
.mapboxgl-popup-content p, .mapboxgl-popup-content a {
	font: 18px/1.4em "seravek-web", Arial, Helvetica, Geneva, sans-serif !important;
	color: rgba(55,75,155,1);
}
.mapboxgl-popup-close-button {
    border-radius: 0px !important;
	font: 36px/40px "seravek-web", Arial, Helvetica, Geneva, sans-serif !important;
	color: rgba(55,75,155,1);
	margin-right: 10px;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-top-color: rgba(255,255,255,1) !important;
}
.mapboxgl-marker > svg > g > g {
	fill: rgba(255,255,255,1);
}
.mapboxgl-marker > svg > g > g > circle {
	fill: rgba(55,75,155,1);
}
a.mapboxgl-ctrl-logo {
    opacity: .3;
}
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    padding: 0 5px;
    background-color: rgba(255,255,255,1) !important;
    margin: 0;
}
.mapboxgl-ctrl-group:not(:empty) {
    box-shadow: 0 0 0 1px rgba(255,255,255,1) !important;
}
.mapboxgl-ctrl-group {
    border-radius: 0px !important;
    background: rgba(240,240,242,1) !important;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
}
.mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-in:hover,
.mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-out:hover,
.mapboxgl-ctrl-group .mapboxgl-ctrl-compass:hover {
    background: rgba(255,255,255,1) !important;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
}
.mapboxgl-ctrl-group button {
    background-color: inherit !important;
}
.mapboxgl-ctrl-group button+button {
    border-top: 1px solid rgba(255,255,255,1) !important;
}
.mapboxgl-ctrl a {
    color: rgba(0,0,0,.2) !important;
	border: 0 none rgba(255,255,255,0);
}



/* =Misc
-----------------------------------------------------------------------------*/

.colophon{
	display:block;
	position:fixed;
	bottom:15px;
	left:6px;
	width:25px;
	height:25px;
	background:url(img/Designheit-Bildmarke.svg) no-repeat right bottom;
	opacity: 0.05;
	filter: alpha(opacity=5);
	-webkit-transition: all .45s ease-in-out;
	-moz-transition: all .45s ease-in-out;
	-o-transition: all .45s ease-in-out;
	transition: all .45s ease-in-out;
}
.colophon:hover{
	opacity:1;
	filter: alpha(opacity=100);
	}

footer {
	border-bottom: 40px solid rgba(255,255,255,1);
	border-left: 40px solid rgba(255,255,255,1);
	border-right: 40px solid rgba(255,255,255,1);
	padding-top: 30px;
	padding-bottom: 60px;
}
.footerlogo img {
	width: 60px;
	margin-left: -80px;
	margin-top: 60px;
	margin-bottom: -60px;
}


/* @l – Laptop / Tablet Landscape */

@media (max-width: 1200px) {
.colophon{
	display:none;
}
p {
	hyphens: auto;
}
h1 {
	font: normal normal 2.4em/1em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
	padding-bottom: 80px;
}
.grid > .column-8 {
	width: calc(85% - 0px);
}
.grid > .column-4 {
	width: 20%;
	margin-right: 0px;
}
.uk-slideshow-items {
	min-height: max(0px, -230px + 100vh) !important;
}
.box {
    width: 90%;
    max-width: 440px;
    right: 0px;
    bottom: 0px;
}
.box > .uk-primary-80, .kasten > * > .uk-primary,
.box > .hellgrau, .kasten > * > .hellgrau {
    padding: 20px;
}
.box > .hellgrau span, .kasten > * > .hellgrau span {
    display: none;
}
.box > .hellgrau a, .kasten > * > .hellgrau a {
    padding-right: 20px;
}

footer {
	border-bottom: 0px solid rgba(255,255,255,1);
	border-left: 0px solid rgba(255,255,255,1);
	border-right: 0px solid rgba(255,255,255,1);
	padding-top: 60px;
	padding-bottom: 40px;
	padding-left: 60px;
}
.footerlogo img {
	width: 40px;
	margin-left: -60px;
	margin-top: 60px;
	margin-bottom: -60px;
}
footer img {
	max-width: 200px;
}

}
/* @m – Tablet Portrait */

@media (max-width: 960px) {
.colophon{
	display:none;
}
header .uk-navbar-transparent a.logo img:first-of-type,
header .uk-navbar-sticky a.logo img:first-of-type,
header .uk-navbar-transparent a.logo img:nth-of-type(2),
header .uk-navbar-sticky a.logo img:nth-of-type(2) {
	left: 20px;
}
.slider {
	margin-bottom: 0px;
	border: 20px solid rgba(255,255,255,1);
}
#menu h1 {
	padding-bottom: 10px;
}
h1 {
	font: normal normal 2.4em/1em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
	padding-bottom: 40px;
}
.grid {
	display: block;
}
.grid > .column-8 {
	width: calc(90% - 0px);
}
.grid > .column-8 p {
    padding-left: 0px;
}
.grid > .column-6 {
	width: 100%;
	margin-right: 0px;
}
.grid > .column-4 {
	width: 100%;
	margin-right: 0px;
}
}

/* @s – Phone Landscape */
@media  (max-width: 960px) and (orientation: landscape) {
    .uk-slideshow-items {
    min-height: max(0px, -0px + 100vh) !important;
}
}

/* @s – Phone Portrait */
@media (max-width: 640px) {
h1 {
	font: normal normal 2.2em/1em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
	padding-bottom: 40px;
}
header .uk-navbar-transparent {
	height: 70px;
}
header .uk-navbar-sticky {
	height: 50px;
}
header .uk-navbar-transparent a.logo img:first-of-type {
	height: 45px;
	top: 15px;
	left: 10px;
}
header .uk-navbar-sticky a.logo img:first-of-type {
	height: 35px;
	top: 10px;
	left: 10px;
	opacity: 1;
}

header .uk-navbar-transparent a.logo img:nth-of-type(2),
header .uk-navbar-sticky a.logo img:nth-of-type(2) {
	opacity: 0;
}
header .uk-navbar-transparent .icons {
	top: 25px;
	right: 10px;
}
header .uk-navbar-sticky .icons {
	top: 10px;
	right: 10px;
}
.icons > * {
    margin-left: 10px;
}
h1 {
	font: normal normal 2em/1em "seravek-web", Arial, Helvetica, Geneva, sans-serif;
}
#menu h1 {
	padding-bottom: 10px;
}
.slider {
	margin-bottom: 0px;
	border: 10px solid rgba(255,255,255,1);
}
.grid > .column-8 {
	width: calc(100% - 0px);
}
.colophon{
	display:none;
}
  
  }