 /* ---------- RESPONSIVE DESIGN ----------*/


/*										HGD-NAVIGATION (responsive)			  */

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

.hgd-desktop {display: npne;}
.hgd-mobil {display: block;}

button.hgd-navigation-responsive-button, .hgd-navigation-mobil {display: block !important;}
.hgd-navigation-default {display: none !important;}

ul.hgd-navigation > li > a {background: var(--color-template); color: var(--color-template-font); padding: 10px 0 10px 10px; transition: all ease .3s;}
ul.hgd-navigation > li > a:hover {background: var(--color-gray);}

	ul.hgd-navigation ul > li > a {background: var(--color-template); color: var(--color-template-font); padding: 7px 0 7px 30px; transition: all ease .3s;}
	ul.hgd-navigation ul > li > a:hover {background: var(--color-gray);}

	ul.hgd-navigation ul {display: block; position: static; opacity: 1; margin-top: 0px;}
	ul.hgd-navigation > li, ul.menu li,
	ul.hgd-navigation a, ul.menu li > a {display: block; width: 100%;}

	ul.hgd-navigation li.active > a {background: var(--color-gray);}
.hgd-copyright {
  padding-bottom: 60px;
}
}


 @media screen and (max-width: 1000px) {
	/* RESPONSIVE */
	.hgd-desktop {display: none;}
	.hgd-mobil {display: block;}

	.color-flipcards {height: 1680px;}
	.hgd-flipcard-header {color: var(--color-white);}

		/* IMAGEBOXEN */
		.hgd-description p {padding: 10px; font-size: medium; font-weight: 500; line-height: 1em;}
		a.imgagebox-content-link {width: 60%; }
		.hgd-imageboxen-header h2 {font-size: 1.3em !important; }

	/* CONTENTBOXEN */
	.col-md-6.parallax-window {display: none;}

	/* IMAGEBOXEN */
	.hgd-imageboxen-left .hgd-description {transform: translate(0 ,0);}

	/* LOGO */
	.logo {padding: 20px 0;}

	/* QUICKKONTAKT */
	.content-quick-kontakt {background: var(--color-02); color: var(--color-white);}

	/* TOPBAR */
	.topbar .col-md-3 {margin-bottom: 7px; }

	#navigation-logo {position: relative !important;}

	.hgd-slider {margin-top: 0px;}
	.hgd-social-media .fab {font-size: 2em}

	.hgd-bottom-box {margin: 15px 0 5px 0;}

	#hgd-flip .col {flex-basis: auto; margin-bottom: 50px;}
	#hgd-flip .col {margin-bottom: 75px;}
	.hgd-flip-front, .hgd-flip-back {min-height: 350px;}

	.hgd-flipcard-header h2 {text-align: center; font-size: 1.3em !important; color: var(--color-white);}

	#HGDscrollBtn {bottom: 10px; right: 10px;}

	.search {float: left;}

	.featureBoxSmall {border-bottom: 1px dashed var(--color-white);  padding: 15px;}
	.featureBoxSmall h4 {text-align: center; margin-top: 25px;}
	.featureBoxSmall p {text-align: center;}

	/* BOTTOM-BOXEN */
	.hgd-bottom-box:first-of-type {padding-top: 25px;}
	.hgd-bottom-box:last-of-type {padding-bottom: 25px;}

 }

 @media screen and (max-width: 414px) {
	/* RESPONSIVE */
#hgd-featureboxen {background: var(--color-gray)}

#hgd-picturepanel {flex-direction: column;}
.picturepanel-item {width: 100%; min-height: 520px;}
.picturepanel-content {opacity: 1;}

.hgd-header-box h2 {font-size: medium;}

.hgd-featureboxsmall-lo1 {border-bottom: 1px dashed var(--color-template-font);}
.hgd-featureboxsmall-lo1 .col-md-3 {text-align: center; }
.iconFeatureboxsmall {margin: 25px 0;}
.titleFeatureboxsmall {text-align: center;}
.subtitleFeatureboxsmall {text-align: center; padding: 15px 25px;}
a .hgd-featureboxsmall-lo1:hover  .fa, a .hgd-featureboxsmall-lo1:hover  .fab, a .hgd-featureboxsmall-lo1:hover  .fal, a .hgd-featureboxsmall-lo1:hover  .far, a .hgd-featureboxsmall-lo1:hover  .fas {font-size: xxx-large; font-weight: 100; color: var(--color-template); background: rgba(0,0,0,0.5); transform: rotate(360deg); }
a .hgd-featureboxsmall-lo1:hover h3 {color: var(--color-gray);}

 }
