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


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

.hgd-slider {margin-top: 88px;}
.hgd-featureboxsmall-lo1 {padding: 30px 0;}

ul.hgd-navigation > li > a, ul.hgd-navigation span.separator {padding: 8px 10px; font-size: 1.4vw; letter-spacing: 0px;}

}

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



.hgd-slider {margin-top: 66px;}
.hgd-featureboxsmall-lo1 {padding: 30px 0;}

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; border-bottom: 1px dashed var(--color-template-font); transition: all ease .3s;}	
ul.hgd-navigation > li > a:hover {background: var(--color-gray); border-bottom: 1px dashed var(--color-template) !important;}

	ul.hgd-navigation ul > li > a {background: var(--color-template); color: var(--color-template-font); padding: 7px 0 7px 30px; border-bottom: 1px dashed var(--color-template-font) !important; transition: all ease .3s;}	
	ul.hgd-navigation ul > li > a:hover {background: var(--color-gray); border-bottom: 1px dashed var(--color-template) !important;}
	
	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); border-bottom: 1px dashed var(--color-template) !important;}

}


 @media screen and (max-width: 768px) {	
	/* 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: 640px) {	

	/* RESPONSIVE */.color-topbar, .color-topbar a {display: none;}
ul.hgd-navigation > li > a, ul.hgd-navigation span.separator {padding: 8px 10px; font-size: 3vw; letter-spacing: .1vw;}	
.logo {padding-left: 3vw;}
.hgd-navigation-responsive-button {top: 4%; right: 4%;}
.hgd-featureboxsmall-lo1 {padding: 0px;}
.titleFeatureboxsmall h3 {font-size: 7vw !important; text-align: center;}
.subtitleFeatureboxsmall h4 {font-size: 5vw !important; text-align: center;}	
#hgd-featureboxen {background: var(--color-gray)}.hgd-ref {margin-bottom: 5vw;}.hgd-ref img {max-width: 100%; max-height: 100%; padding: 3vw 0;}
#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);}
	
 }

 @media screen and (max-width: 414px) {	
	/* RESPONSIVE */

ul.hgd-navigation > li > a, ul.hgd-navigation span.separator {padding: 8px 10px; font-size: 5vw; letter-spacing: .1vw;}	
.color-topbar, .color-topbar a {display: none;}
.logo {padding-left: 3vw;}
.hgd-navigation-responsive-button {top: 2%; right: 4%;}
.hgd-featureboxsmall-lo1 {padding: 0px;}
.titleFeatureboxsmall h3 {font-size: 8.7vw !important; text-align: center;}
.subtitleFeatureboxsmall h4 {font-size: 7vw !important; text-align: center;}	
#hgd-featureboxen {background: var(--color-gray)}.hgd-ref {margin-bottom: 5vw;}.hgd-ref img {max-width: 100%; max-height: 100%; padding: 3vw 0;}
#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);}
	
 }