@charset "utf-8";
/* mobile Version Hofmänner Haag AG */

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

#phone h2 {
	font-size:2em;
}

#taxi-order h2 {
	font-size:1.3em;
}
	
}

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

#top-wrapper {
	height:auto;
}

#top-inner {
    height:auto;
}

#logo {
    height: auto;
    width: 25%;
    margin: 10px 0;

}

#logo img {
	width:100%;
	height:auto;
}

#phone {
	margin-left:10%;
}

#phone h3 {
    font-size: 1.35em;
    margin-top: 10px;
}

#phone h2 {
    font-size: 1.5em;
}

#subnavi-wrapper {
    margin-top: 0px;
}

.mainnavi li {
    font-size: 1.25em;
    padding: 0 8% 0 0;
}

}

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

#facebook {
    width: 20px;
    height: 25px;
    margin: 10px 0 5px 25px;
}

#facebook img {
    width:auto;
    height: 100%;

}

#navi-wrapper,
#navi-inner {
    height: 50px;
}

#navi {
    height: 50px;
    line-height: 50px;

}

.mainnavi li {
    font-size: 1.25em;
    padding: 0 6% 0 0;
}

#video, #foto {
    width:auto;
    height: 30px;
    margin: 10px 0;
}

#video {
	margin-right:2.5%;
}

}


@media only screen and (max-width:800px) {
	
#navi-wrapper,
#subnavi-wrapper {
	display:none;
}

#wrapper {
	margin: 0px auto;
	width:100%;
	background:none;
}

#header {
	position:relative;
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0;
	background:none;
}

#top-wrapper {
    position: relative;
	float:left;
    width: 100%;
    height:auto;
}

#logo {
	position:static;
	height:auto;
	max-width:100%;
	width:100%;
	text-align:center;
	margin: 0;
	padding:10px 0;
}

#logo img {
	height:auto;
	max-width:280px;
	width:50%;
}

#phone {
    width: 100%;
    height: auto;
	margin: 0;
}

#phone h2 {
	margin-top:5px;
}

/* menu mobile */

#mobilemenu {
	display:block;
}

.button {
    background-image: url("../img/bg/mobilemenu_icon.png");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 50px;
    left: 95%;
    position: absolute;
    top: 20px;
    width: 6%;
    z-index: 12399994;
}

.button:after{display:block;height:100%;}
.button.menu-opened{position:absolute;left:3%;top:20px;background-image:url(../img/bg/mobilemenu_icon_open.png);}

#mobilemenu {
	position:absolute;
	top:0;
	left:-92.5%;
	width:100%;
	height:100%;
	z-index:999901;
}
#mobilemenu.menu-active {
	-webkit-transition:all .25s ease;
	-ms-transition:all .25s ease;
	transition:all .25s ease;
	left:0;
}

#mobilemenu,#mobilemenu ul,#mobilemenu ul li,#mobilemenu ul li a,#mobilemenu #head-mobile{border:0;list-style:none;line-height:1;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#mobilemenu ul{width:60%;min-height:10%;padding:40px 0 20px 0;background-color:rgba(255,255,255,0.95);-webkit-box-shadow: 2px 2px 18px 0 #A8A8A8;box-shadow: 2px 2px 18px 0 #A8A8A8;display:none;}
#mobilemenu ul.submenu_mobile {padding-top:10px;padding-bottom:80px;}
#mobilemenu ul li{width:75%;margin-left:25%; position:relative;font-size:1.1em;}
#mobilemenu ul li:last-child {}
#mobilemenu ul.submenu_mobile li{border:none;}
#mobilemenu ul ul li,#mobilemenu li:hover > ul > li{height:auto}
#mobilemenu > ul > li > a{padding:0.35em 0;font-size:1em;text-decoration:none;color:#6b6e6f;font-weight:400;}
#mobilemenu > ul > li.has-sub-open > a{font-weight:700;}
#mobilemenu > ul.submenu_mobile > li > a {padding:8px 0;}
#mobilemenu ul li a,#mobilemenu ul ul li a{width:100%;border-bottom:0}
#mobilemenu > ul > li{float:none}
#mobilemenu ul ul li {background:none;margin-left:10%;}
#mobilemenu ul ul li a{padding:5px 0;font-size:1em;text-decoration:none;color:#6b6e6f;font-weight:400;}
#mobilemenu ul ul li:last-child > a,#mobilemenu ul ul li.last-item > a, #mobilemenu ul ul li:last-child{padding-bottom:0.35em}
#mobilemenu ul ul ul li a{padding-left:10px}
#mobilemenu ul ul li:hover > a,#mobilemenu ul ul li.active > a{color:#000}
#mobilemenu ul ul,#mobilemenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left; background:none;-webkit-box-shadow:none;box-shadow:none;padding:0;}
#mobilemenu > ul > li.has-sub > a {padding-left:15px;}
#mobilemenu ul ul li.has-sub > a:before{-webkit-transition:all .75s ease;-ms-transition:all .75s ease;transition:all .75s ease}
#mobilemenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#mobilemenu > ul > li.has-sub > a:after,#mobilemenu > ul > li.has-sub > a:before,#mobilemenu ul ul > li.has-sub > a:after,#mobilemenu ul ul > li.has-sub > a:before{display:none}
#mobilemenu #head-mobile{display:block;padding:0px;color:#000;}
#mobilemenu .submenu-button{position:absolute;z-index:99;left:0;top:0;display:block;height:100%;width:40px;cursor:pointer;background-image:url(../img/bg/mobilemenu_li_sub-bg.png); background-repeat:no-repeat;background-position:left center ;}
#mobilemenu .submenu-button.submenu-opened{position:absolute;z-index:99;left:0;top:0;display:block;height:100%;width:40px;cursor:pointer;background-image:url(../img/bg/mobilemenu_li_sub-bg_open.png); background-repeat:no-repeat;background-position:left top ;}
#mobilemenu .submenu-button.submenu-opened:before{display:none;}
#mobilemenu ul ul ul li.active a{border-left:none}
#mobilemenu > ul > li.has-sub > ul > li.active > a,#mobilemenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}



/* Inhalte */

#content_all {
	float:left;
	width:100%;
	margin-top:20px;
}


#content {
	float:left;
	width:96%;
	padding:10px 2%;
	margin-left:0;
}



footer {
	width:94%;
	padding:0 3%;
	margin-top:100px;
}

}

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

#logo {
	padding:10px 0 0 0 ;
}

#phone h2 {
    font-size: 1.25em;
	margin-top:0;
}
	
#phone h3 {
    font-size: 1.15em;
    margin-top:5px;
}

#mobilemenu ul{width:90%;}

#content h1 {
	font-size:1.75em;
	margin-bottom:0.75em;
}

#content .ce-gallery[data-ce-columns="2"] .ce-column,
#content .ce-gallery[data-ce-columns="3"] .ce-column,
#content .ce-gallery[data-ce-columns="4"] .ce-column,
#content .ce-gallery[data-ce-columns="5"] .ce-column,
#content .ce-gallery[data-ce-columns="6"] .ce-column {
	width:100%;
	margin-right:0;
}

.column1, .column2, .column3, .column4 {
	float:left;
	width:100%;
	margin-left:0;
}

}