/*
Template-Name: UMD
Autor: ulrich mediendesign, Reto Ulrich, Küssnacht, Schweiz
Beschreibung: Ein auf der Basis von Bootstrap V4 entwickeltes und angepasstes Template mit Mobile-First-Ansatz.
Version: 1.0
Lizenz: GNU General Public License v2 or later
Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* CSS-IMPORT */

@import 'all.min.css'; /* Font-Awesome Standard CSS */
@import 'bootstrap.min.css'; /* Bootstrap Standard CSS */
@import 'fonts.css'; /* CSS für eigene Schriften */
/* @import 'mediaqueries.css';*/ /* Mit freundlicher Unterstützung von - psc, Peter Schütz, Bern */


/* GENERELLES */

html, body {font-family: 'Montserrat', arial; font-size: 1.10rem; line-height: 1.50rem; color: #1a1a1a; background-color: #ffffff; background-size: 100% auto; width: 100%; min-height:100%; background-image: url(../img/dub_background.jpg); background-repeat: no-repeat;}


/* SECTIONS */

section, .section {background-color: #ffffff; margin: 0 0 45px 0;}
section:first-child, .section:first-child {margin: 30px 0 45px 0;}
section:last-child, .section:last-child {margin: 0 0 0 0; padding: 30px 0 30px 0;}

#footer {background-color: #f2f2f2;}


/* GRID */

.container {width: 100%; max-width: 100%; background-color: none;}
#wrapper {width: 100%; background-color: #ffffff; margin-left: auto; margin-right: auto;}


/* TYPOGRAFIE */ 

/* Überschriften */
h1, .h1 {font-size: 2.75rem; line-height: 3.75rem; margin: 0.00rem 0 1.65rem 0;}
h2, .h2 {font-size: 2.50rem; line-height: 2.75rem; margin: 0.00rem 0 1.50rem 0;}
h3, .h3 {font-size: 2.25rem; line-height: 3.05rem; margin: 0.00rem 0 2.30rem 0;}
h4, .h4 {font-size: 2.00rem; line-height: 2.70rem; margin: 0.00rem 0 2.04rem 0;}
h5, .h5 {font-size: 1.75rem; line-height: 2.35rem; margin: 0.00rem 0 0.95rem 0;}
h6, .h6 {font-size: 1.50rem; line-height: 2.00rem; margin: 0.00rem 0 1.27rem 0;}

/* Absatztypen */
.lead {font-size: 1.30rem; line-height: 1.75rem;}
.text-small {font-size: 0.90rem; line-height: 1.22rem;}
.text-smaller {font-size: 0.80rem; line-height: 1.10rem;}

/* Inline-Textelemente */
mark {background-color: #fffab3; padding: 0 0.25rem;}
strong, b, .strong {font-family: 'Montserrat';}
i, em {font-family: 'bree_seriflight_italic';}

a {color: #0099a8; text-decoration: none;} /* Primary 100% */
a:hover {color: #006b75; text-decoration: underline;} /* Primary 130% */
a:focus {color: #003d43; text-decoration: underline;} /* Primary 160% */
a:active {color: #006b75; text-decoration: underline;} /* Primary 130% */
/* a:visited {color: #00455e!important; text-decoration: none;}
a:visited:hover {color: #00adec!important; text-decoration: underline;} */


/* NAVIGATION */ 

#mainnav {padding: 0 0 2px 0;}
#mainnav .nav-item {padding: 0 10px 0 0;}
#mainnav .nav-link {padding: 0 0 0 0;}
#mainnav .nav-item:last-child {padding-right: 0px;}
.nav {font-size: 1.30rem; text-transform: uppercase;}
#mainnav a {color: #000000; text-decoration: none;} /* Primary 100% */
#mainnav a:hover {color: #006b75;} /* Primary 130% */
#mainnav a.active {color: #0099a8;} /* Primary 100% */
#mainnav a:focus {color: #003d43;} /* Primary 160% */


/* KOMPONENTEN */ 

.card {border: 0px; margin: 0 0 15px 0; border-radius: 0px;}

ul.referenzen li {border-bottom: 1px solid #cccccc; padding: 5px 0;}

.back-to-top {background: #b3b3b3; position: fixed; bottom: 20px; right: 20px; padding: 0.5rem 1.0rem; z-index: 100;}


/* FARBEN */

/* PRIMÄRFARBE */
.text-primary {color: #0099a8!important;}
.border-primary {border-color: #0099a8!important;}
.bg-primary {background-color: #0099a8!important;}
.bg-primary-5-percent {background-color: #f2fafb;}
.bg-primary-10-percent {background-color: #e6f5f6;}
.bg-primary-20-percent {background-color: #ccebee;}
.bg-primary-30-percent {background-color: #b3e1e5;}
.bg-primary-40-percent {background-color: #99d6dc;}
.bg-primary-50-percent {background-color: #80ccd4;}
.bg-primary-60-percent {background-color: #66c2cb;}
.bg-primary-70-percent {background-color: #4db8c2;}
.bg-primary-80-percent {background-color: #33adb9;}
.bg-primary-90-percent {background-color: #1aa3b1;}
.bg-primary-105-percent {background-color: #00919f;}
.bg-primary-110-percent {background-color: #008997;}
.bg-primary-120-percent {background-color: #007a86;}
.bg-primary-130-percent {background-color: #006b75;}
.bg-primary-140-percent {background-color: #005c65;}
.bg-primary-150-percent {background-color: #004c54;}
.bg-primary-160-percent {background-color: #003d43;}
.bg-primary-170-percent {background-color: #002e32;}
.bg-primary-180-percent {background-color: #001f22;}
.bg-primary-190-percent {background-color: #000f10;}

/* SEKUNDÄRFARBE */
.text-secondary {color: #bc4700!important;}
.border-secondary {border-color: #bc4700!important;}
.bg-secondary {background-color: #bc4700!important;}
.bg-secondary-5-percent {background-color: #bc4700;}
.bg-secondary-10-percent {background-color: #f8ede6;}
.bg-secondary-20-percent {background-color: #f2dacc;}
.bg-secondary-30-percent {background-color: #ebc8b3;}
.bg-secondary-40-percent {background-color: #e4b599;}
.bg-secondary-50-percent {background-color: #dea380;}
.bg-secondary-60-percent {background-color: #d79166;}
.bg-secondary-70-percent {background-color: #d07f4d;}
.bg-secondary-80-percent {background-color: #c96c33;}
.bg-secondary-90-percent {background-color: #c35a1a;}
.bg-secondary-105-percent {background-color: #b24300;}
.bg-secondary-110-percent {background-color: #a94000;}
.bg-secondary-120-percent {background-color: #963900;}
.bg-secondary-130-percent {background-color: #833200;}
.bg-secondary-140-percent {background-color: #712b00;}
.bg-secondary-150-percent {background-color: #5e2300;}
.bg-secondary-160-percent {background-color: #4b1c00;}
.bg-secondary-170-percent {background-color: #381500;}
.bg-secondary-180-percent {background-color: #260e00;}
.bg-secondary-190-percent {background-color: #120700;}

/* TERTIÄRFARBE */
.text-tertiary {color: #007377;}
.border-tertiary {border-color: #007377;}
.bg-tertiary {background-color: #007377;}
.bg-tertiary-5-percent {background-color: #f2f8f8;}
.bg-tertiary-10-percent {background-color: #e6f1f2;}
.bg-tertiary-20-percent {background-color: #cce3e4;}
.bg-tertiary-30-percent {background-color: #b3d5d6;}
.bg-tertiary-40-percent {background-color: #99c7c9;}
.bg-tertiary-50-percent {background-color: #80b9bb;}
.bg-tertiary-60-percent {background-color: #66abad;}
.bg-tertiary-70-percent {background-color: #4d9da0;}
.bg-tertiary-80-percent {background-color: #338f92;}
.bg-tertiary-90-percent {background-color: #1a8185;}
.bg-tertiary-105-percent {background-color: #006d71;}
.bg-tertiary-110-percent {background-color: #00676b;}
.bg-tertiary-120-percent {background-color: #005c5f;}
.bg-tertiary-130-percent {background-color: #005053;}
.bg-tertiary-140-percent {background-color: #004547;}
.bg-tertiary-150-percent {background-color: #00393b;}
.bg-tertiary-160-percent {background-color: #002e30;}
.bg-tertiary-170-percent {background-color: #002223;}
.bg-tertiary-180-percent {background-color: #001718;}
.bg-tertiary-190-percent {background-color: #000b0c;}

/* NONOCHROM */
.bg-monochrom-5-percent {background-color: #f2f2f2;}
.bg-monochrom-10-percent {background-color: #e6e6e6;}
.bg-monochrom-20-percent {background-color: #cccccc;}
.bg-monochrom-30-percent {background-color: #b3b3b3;}
.bg-monochrom-40-percent {background-color: #999999;}
.bg-monochrom-50-percent {background-color: #808080;}
.bg-monochrom-60-percent {background-color: #666666;}
.bg-monochrom-70-percent {background-color: #4d4d4d;}
.bg-monochrom-80-percent {background-color: #333333;}
.bg-monochrom-90-percent {background-color: #1a1a1a;}


/* ABSTÄNDE MARGIN/PADDING */ 

.m-15px {margin: 15px;}
.mt-15px {margin: 15px 0 0 0;}
.mb-15px {margin: 0 0 15px 0;}
.ml-15px {margin: 0 0 0 15px;}
.mr-15px {margin: 0 15px 0 0;}
.mx-15px {margin: 0 15px;}
.my-15px {margin: 15px 0;}

.m-30px {margin: 30px;}
.mt-30px {margin: 30px 0 0 0;}
.mb-30px {margin: 0 0 30px 0;}
.ml-30px {margin: 0 0 0 30px;}
.mr-30px {margin: 0 30px 0 0;}
.mx-30px {margin: 0 30px;}
.my-30px {margin: 30px 0;}

.p-15px {padding: 15px;}
.pt-15px {padding: 15px 0 0 0;}
.pb-15px {padding: 0 0 15px 0;}
.pl-15px {padding: 0 0 0 15px;}
.pr-15px {padding: 0 15px 0 0;}
.px-15px {padding: 0 15px;}
.py-15px {padding: 15px 0;}

.p-30px {padding: 30px;}
.pt-30px {padding: 30px 0 0 0;}
.pb-30px {padding: 0 0 30px 0;}
.pl-30px {padding: 0 0 0 30px;}
.pr-30px {padding: 0 30px 0 0;}
.px-30px {padding: 0 30px;}
.py-30px {padding: 30px 0;}


/* MEDIA-BREAKPOINTS */ 

/* Extra Kleine Geräte (phone-portrait, 576px und schmaler) - Screen XS */
/* Keine Media Query für .xs - Dies ist Bootstrap Standard, Mobile-First-Ansatz */

/* Kleine Geräte (phone-landscape, 576px und breiter) - Screen SM */
@media (min-width: 576px) and (max-width: 767px) 
{
	.container {width: 100%; max-width: 100%; background-color: none}
	#wrapper {width: 100%; background-color: #ffffff; margin-left: auto; margin-right: auto;}
}

/* Mittlere Geräte (tablet, 768px und breiter) - Screen MD */
@media (min-width: 768px) and (max-width: 991px) 
{
	.container {width: 100%; max-width: 100%; background-color: none}
	#wrapper {width: 100%; background-color: #ffffff; margin-left: auto; margin-right: auto;}
}

/* Grosse Geräte (desktop-narrow, 992px und breiter) - Screen LG */
@media (min-width: 992px) and (max-width: 1199px) 
{
	.container {width: 980px; background-color: none}
	#wrapper {width: 100%; background-color: #ffffff; margin-left: auto; margin-right: auto;}
}

/* Extra Grosse Geräte (desktop-wide, 1200px und breiter) - Screen XL */
@media (min-width: 1200px) 
{
	.container {width: 960px; background-color: none!important;}
	.container-fluid {width: 1430px; margin-left: auto; margin-right: auto; background-color: none;}
	#wrapper {width: 1430px; background-color: #ffffff; margin-left: auto; margin-right: auto;}
	.card {border: 0px; margin: 0 0 30px 0;}
}