body {
    margin:0 5px;
    padding:0;
    font-family: 'PT Sans', sans-serif;
    background-color: #E3E3E3;
    max-width:1280px;
    color:#4c4c4c;
}

h1, h2, h3, h4, h5, h6 {
    margin:0;
    font-weight:normal;
}

section {
    background-color: #FFF;
    border: #CCC 1px solid;
    border-radius: 5px;
    padding: 20px 30px;
    margin:5px auto;
}

img{
    max-width: 100%;
}

a, a:hover, a:visited, a:focus {
	color: #457B9D;
}

.mobile-only {
    display:none;
}

/* Header */

header {
    background-color: #222;
    padding:30px 15px 0;
    margin:0;
    color:#FFF;
    height:70px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

header .brand {
    font-size: 24px;
    float:left;
}

header .number {
    background-color: #e4002c;
    color: #FFFFFF;
    padding:0 3px;
}


/* Top-Navigation */

nav#top-nav {
    font-size:20px;
    float:right;
}

nav#top-nav i {
    display:none;
}

nav#top-nav ul {
    list-style: none;
    margin:4px 0 0;
}

nav#top-nav ul li {
    display: inline;
    margin:0 6px;
}

nav#top-nav a {
    color:#bfbfbf;
    text-decoration: none;
}

nav#top-nav a:hover li {
    color:#FFF;
    border-bottom:2px solid #e4002c;
}


/* Wappen */

.ls, .ge, .yv, .ny, .fr, .ne, .ve, .ma, .bu, .mo{
	background: url(/img/wappen2018.png) no-repeat;
	display:inline-block;
	width: 12px;
	height: 15px;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
a:hover .ls, 
a:hover .ge, 
a:hover .yv, 
a:hover .ny, 
a:hover .ne, 
a:hover .ve, 
a:hover .ma, 
a:hover .fr,
a:hover .bu, 
a:hover .mo {
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.ls{background-position: -60px 0;}
.ge{background-position: -108px 0;}
.yv{background-position: -84px 0;}
.fr{background-position: -12px 0;}
.ne{background-position: -96px 0;}
.ve{background-position: -48px 0;}
.ma{background-position: -72px 0;}
.ny{background-position: -36px 0;}
.bu{background-position: 0 0;}
.mo{background-position: -24px 0;}

/* Teaser */

.teaser {
    padding:20px 30px;
    text-align: center;
}

.teaser h1 {
    font-size:40px;
}

/* Main */

.commercial {
    width:60%;
    margin-right:1%;
}

.commercial h2 {
    font-size: 32px;
    border-bottom: 1px solid #ddd;
}

.commercial h3 {
    font-size: 24px;
    border-bottom: 1px solid #ddd;
}

/* Sidebar */

.sidebar {
    width:39%;
    margin-right:0;
}

.sidebar h4, footer h4 {
    font-size:14px;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    padding:0 20px 10px;
    margin: 0 -30px;
}

.sidebar table, .commercial table {
    margin-top:10px;
}

table .td-left {
    padding-right: 30px;
    font-weight:bold;
}

.cloud {
    text-align:center;
    overflow:auto;
}

ul.cloud-list {
    list-style: none;
    margin: 20px auto;
}

ul.cloud-list li {
    float: left;
    min-height:30px;
    margin:0 60px;
	line-height:28px;
}

.payment, .zertifikat, .versprechen {
    padding-top:15px;
}

.versprechen {
    font-size: 18px;
    line-height: 24px;
}
.payment img {
    margin-right:5px;
}

.payment div {
    display: inline-block;
}

.zertifikat img {
    width:100px;
    height:auto;
    margin-right:10px;
}

.pub h5 {
	color: #E4002C;
	font-size: 18px;
	margin-bottom: 5px;
}

.pub span {
	font-size: 15px;
}


/* Button: Phone */

.btn {
    margin:20px 0;
}

.btn-phone {
    color:#FFF;
    font-size:32px;
    background-color:#38f;
    padding:12px 15px;
    border-radius:5px;
}

.btn-phone:hover{
    background-color: #0c71ff;
}

.btn-phone a {
    color: #FFF;
    text-decoration: none;
}

/* Footer */

footer {
    margin:5px 0 40px;
	width:60%
}

footer section {border-bottom: 2px solid #e4002c;}

footer ul, .sidebar ul {list-style: none;}

footer ul li, .sidebar ul li {
    margin-left:-40px;
    line-height: 22px;
}

footer ul a, .sidebar ul a {
    color:#e4002c;
    text-decoration: none;
    text-transform: uppercase;
    font-size:16px;
}

footer ul a:hover, .sidebar ul a:hover {
    color: #bfbfbf;
}

.row {
    clear: both;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.row::after {
    content: "";
    clear: both;
    display:table;
}


.last {
    margin:0;
}

@media only screen and (max-width: 1024px) {
    header {
        text-align: center;
        height: auto;
    }

    header .brand {
        float:none;
        font-size: 28px;
    }
}

@media only screen and (min-width: 801px) and (max-width: 1024px) {

    header {
        padding:0 0 20px;
    }

    nav#top-nav {
        float: none;
        background-color:#4d4d4d;
        font-size:18px;
    }

    nav#top-nav img {
        height: 13px;
        width: auto;
    }

    nav#top-nav ul{
        margin:0 auto 20px;
        padding:5px 0;
    }

    nav#top-nav ul li {
        margin: 0 10px;
    }
}

@media only screen and (max-width: 800px) {

    header {
        padding:10px 15px 15px;
    }

    nav#top-nav {
        width:100%;
        margin:0;
        text-align:left;
        display:table-header-group;
        width:100%;
    }
    nav#top-nav i {
        display:inline-block;
    }
    nav#top-nav i.open {
        display:block;
        text-align:center;
    }
    nav#top-nav ul{
        padding-left:0;
        display:none;
        text-align:center;
        margin:0 0 30px;
    }
    nav#top-nav ul li {
        display:block;
        padding:10px 0 10px;
        border-bottom:1px solid #777;
        margin:0 auto;
    }
    .row {display: block;}
    .third, .commercial, .sidebar, footer{
        width:100%;
        display: block;
    }
}

@media only screen and (max-width: 640px) {
	
	header .brand {
        float:none;
        font-size: 22px;
    }
	

	table td {
		display: block;
		font-size: 18px;
		text-align: center;
		width: 100%;
	}
	
	table .td-left {
		color: #e4002c;
		font-size: 20px;
		margin-bottom: 5px;
		padding: 0;
	}
	
	table tr td:nth-of-type(2) {
		margin-bottom: 10px;
	}
	
	ul {
		padding-left: 20px;
	}
	
    footer section {
        margin-bottom:90px;
    }
    .teaser {
        display: none;
    }
    .mobile-only {
        display: block;
    }
    .call-footer {
        bottom:0;
        padding: 25px 0;
        background-color:#333;
        width:100%;
        position:fixed;
        text-align: center;
    }
    .call-footer .btn-phone {
        font-size:24px;
        box-shadow: inset 0px 0px 10px 2px rgba(0,0,0,0.1);
        background-color:#4cd964;
    }

    .call-footer .btn-phone:hover {
        background-color: #51c25d;
    }
}

@media only screen and (max-width: 420px) {
    
    .btn-phone {
        font-size: 28px;
    }

    .commercial h2{
        font-size: 24px;
    }
	
	body {
		word-break: break-word;
	}
	
}

@media only screen and (max-width: 320px) {
	
	.commercial h2 {
		font-size: 18px;
	}
	
}