html,
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background-color: #DDEAF4;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	text-align: center;
}

a:link {
  color: white;
  background-color: transparent;
  text-decoration: underline;
  text-shadow: 0px 2px 3px #000000;
}

a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
    text-shadow: 0px 3px 3px #000000;
}

a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

.h1 {
	font-size: 25px;
	font-weight: bold;
}

.h2 {
	font-size: 15px;
	font-weight: bold;
}

.h3 {
	font-size: 20px;
	font-weight: bold;
}

.warning {
	font-size: 20px;
	font-weight: bold;	
}

.navsortiment {
	position: relative;
	text-align: center;
}

.navsortiment img {
	display: block;
}

.navsortiment span {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	height: 100px;
	line-height: 100px;
	background-color: rgba(69,106,159, 1);
	transition: all .2s ease-in-out;
}

.newsquare {
	position: relative;
	text-align: center;
}

.newsquare img {
	display: block;
}

.newsquare span {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	height: 40px;
	line-height: 40px;
	background-color: rgba(69,106,159, 1);
}

.boxone {
	background-image: radial-gradient(circle,#9bbfdd,#576fa9);
	padding: 50px;
	display: none;
}

.boxfour {
	background-image: radial-gradient(circle,#9bbfdd,#576fa9);
	padding: 25px;
}

.sftop {
	background-color: #b4ce0f;
	padding: 20px;
}

.boxonehaus {
	background-image: url(images/Haus.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	padding: 25px;
}

.boxtwo {
	background-color: #FFFFFF;
	padding-top: 50px ;
	color: #456a9f;
}

.boxthree {
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-origin: border-box;
	padding: 120px;
}


.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    background-color:#b4ce0f;
    color: white;
    text-align: center;
	font-size: 12px;
	padding-left: 10px;
	padding-right: 10px;
}

.footer a {
	text-decoration: none;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	padding: 20px;
	letter-spacing: 3px;
}

.sitewrapper {
	width: 100%;
}

.style-header {
	width: 100%;
	height: 300px;
	background-color: #456a9f;
	padding: 5px;
}
	
.style-logo {
	margin-left: auto;
	margin-right: auto;		
	display: block;
}

.style-nav ul {
	position: center;
	list-style-type: none;
}

.style-nav ul li a {
	text-decoration: none;
	color: #FFFFFF;
	text-align: center;
	display: block;
	padding: 10px;
	font-size: 14px;
	letter-spacing: 3px;
	text-shadow: 0px 0px 0px;
}

.style-nav ul li a:hover {
	transition: 800ms;
	color: #e7e7e7;
}

.blogrow {
	background-color: #FFFFFF;
	color: #456a9f;
	padding: 15px;
}

.blogcolumnleft {
	width: 100%;
		border-spacing: 10px;
}

.blogcolumnright {
	width: 100%;
	text-align: left;
	padding: 30px;
		border-spacing: 10px;
}

/* Clear floats after the columns */
.blogrow:after {
    content: "";
    display: table;
    clear: both;
}

.markencolumn {
    float: left;
    width: 25%;
}

.markencolumn2 {
    float: left;
    width: 50%;
    padding: 6px;
}

.markencolumn3four {
    float: left;
    width: 50%;
    padding: 6px;
}

.markencolumn4two {
    float: left;
    width: 100%;
    padding: 6px;
}


/* Clear floats after the columns */
.markenrow:after {
    content: "";
    display: table;
    clear: both;
}

.highlightcolumn {
    float: left;
    width: 50%;
	padding: 5px;

}

/* Clear floats after the columns */
.highlightrow:after {
    content: "";
    display: table;
    clear: both;
}

.navimage {
}

.navimage:hover {
}

.highlightimage {
	background-color: #FFFFFF;
	width: 95%;
	border: 5px;
	border-style: solid;
	border-color: #c8c8c8;
	padding: 5px;
	transition: all .2s ease-in-out;
}

.highlightimage:hover {
	transform: scale(1.02);

}

.highlightimage2 {
	background-color: #FFFFFF;
	width: 90%;
	padding: 5px;
	transition: all .2s ease-in-out;
}

.highlightimage2:hover {
	transform: scale(1.02);

}

.highlightimage3 {
	background-color: #ef051e;
	width: 90%;
	padding: 5px;
	transition: all .2s ease-in-out;
}

.highlightimage3:hover {
	transform: scale(1.02);

}


.impcolumn {
    float: left;
    width: 100%;
	padding: 5px;

}

/* Clear floats after the columns */
.improw:after {
    content: "";
    display: table;
    clear: both;
}

.impimage {
	background-color: #FFFFFF;
	width: 95%;
	border: 5px;
	border-style: solid;
	border-color: #b4ce0f;
	padding: 5px;
	transition: all .2s ease-in-out;
}

.impimagexmas {
	background-color: #FFFFFF;
	width: 98%;
	border: 5px;
	border-style: solid;
	border-color: #b4ce0f;
	padding: 5px;
	transition: all .2s ease-in-out;
}

.weltimage {
	width: 95%;
	padding: 5px;
	transition: all .2s ease-in-out;
}

.weltimage:hover {
	transform: rotate(5deg);
}

.weltimage2 {
	width: 95%;
	padding: 5px;
	transition: all .2s ease-in-out;
}

.weltimage2:hover {
	transform: scale(1.05);
}

.impimagetxt {
  text-shadow: 0px 2px 2px #000000;
  margin-top: -45px;
  margin-left: 10px;
  font-weight: bold;
  color: #fff;
}







/*Tablet View*/

@media (min-width: 768px){

.h1 {
	font-size: 40px;
}	
	
.h2 {
	font-size: 16px;
}

.h3 {
	font-size: 30px;
	font-weight: bold;
}

.warning {
	font-size: 40px;
}

.boxone {
	background-image: radial-gradient(circle,#9bbfdd,#576fa9);
	padding: 50px;
	display: block;
}
	
.boxonehaus {
	background-position: top;
	padding: 50px;
}

.boxthree {
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-origin: border-box;
	padding: 150px;
}
	
.sitewrapper {
	width: 100%;
}
	
.style-header {
	width: 100%;
	height: 110px;
	background-color: #456a9f;
	padding: 5px;
}
	
.style-nav ul li {
	display: inline-block;
}
	
.style-nav ul {
	text-align: center;
}

.style-nav ul li a {
	text-decoration: none;
	color: #FFFFFF;
	text-align: center;
	display: block;
	padding: 10px;
	font-size: 14px;
	letter-spacing: 1px;
}
	
.markencolumn {
	background-color: #FFFFFF;
    float: left;
    width: 20%;
	padding: 10px;
}

.markencolumn2 {
    float: left;
    width: 25%;
    padding: 10px;
}

.markencolumn3four {
    float: left;
    width: 25%;
    padding: 10px;
}

.markencolumn4two {
    float: left;
    width: 50%;
    padding: 10px;
}



/* Clear floats after the columns */
.markenrow:after {
    content: "";
    display: table;
    clear: both;
}
	
.impcolumn {
    float: left;
    width: 50%;
	padding: 5px;
}	

.blogrow {
	background-color: #FFFFFF;
	color: #456a9f;
	padding: 30px;
}

.blogcolumnleft {
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
}

.blogcolumnright {
	width: 100%;
	text-align: center;
	padding: 20px;
}

/* Clear floats after the columns */
.blogrow:after {
    content: "";
    display: table;
    clear: both;
}	
	
}







/*Desktop View*/

@media (min-width: 1360px){

.column {
    float: left;
    width: 25%;
}
	
.boxone {
	padding: 75px;	
}
	
.boxonehaus {
	background-size: cover;
	background-position: center;
	padding: 75px;
}

.boxthree {
	background-size: 100%;
	background-attachment: fixed;
	background-position: top;
	background-origin: initial;
	padding: 200px;
}
	
.style-header {
	width: 100%;
	height: 80px;
	line-height: 50px;
	background-color: #456a9f;
	padding: 5px	
}	
	
.sitewrapper {
	width: 1200px;
	margin: 0 auto;
}	
	
.style-logo {
	float: left;		
}
	
.style-nav {
	float: right;
}
	
.style-nav ul li a:hover {
	border-radius: 30px;
	background: #6487b8;
	transition: 350ms;
}
	
.highlightcolumn {
    float: left;
    width: 20%;

}

/* Clear floats after the columns */
.highlightrow:after {
    content: "";
    display: table;
    clear: both;
}

.highlightimage {
	width: 90%;
	border: 5px;
	border-style: solid;
	border-color: #c8c8c8;
	padding: 5px;
}
	
.blogrow {
	background-color: #FFFFFF;
	color: #456a9f;
	padding: 30px;	
}	
	
.blogcolumnleft {
	float: left;
	width: 20%;
	margin-left: 0;
	margin-right: 0;
}
	
.blogcolumnright {
	float: left;
	text-align: right;
	width: 75%;
	padding: 30px;
}
	
/* Clear floats after the columns */
.blogrow:after {
    content: "";
    display: table;
    clear: both;
}

.markencolumn2 {
    float: left;
    width: 20%;
    padding: 6px;
}
	
}