/* +------------------------------------------------------------------------+ */
/* | iPhone 4 and 4S														| */
/* +------------------------------------------------------------------------+ */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

	/* DEFAULTS */
	.desktop-br { display: inline; }

	/* LAYOUT */
	.header { background-position: 40px center; background-size: auto 54px; height: 94px; }
	.header ul { padding: 0px; }
	.header ul li { display: block; }
	.flex-container > div { padding: 20px 10px; }
	.flex-container .left { text-align: center; padding-bottom: 0px; }
	.flex-container .right { text-align: center; }

	/* CONTENT */
	.content { padding: 20px 10px 10px 10px; }
	.content h1 { font-size: 34px; line-height: 40px; }
	.content h2 { font-size: 18px; line-height: 22px; text-align: center; text-transform: none; padding: 10px; margin: 20px auto 40px auto; }
	.content .desktop-h2-br { display: inline; }
	.content .icon { width: 55px; height: 55px; margin-bottom: 10px; }

	.content.imprint, 
	.content.dataprivacy { padding: 20px 10px 10px 10px; width: 100%; }
	.content.imprint h1, 
	.content.dataprivacy h1 { font-size: 34px; line-height: 40px; }
	.content.imprint h2 , 
	.content.dataprivacy h2{ font-size: 18px; line-height: 22px; text-align: left; text-transform: uppercase; padding: 0px; margin: 40px auto 20px auto; }

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { .desktop-br { display: block; } .content h2 { max-width: 400px; } }


/* +------------------------------------------------------------------------+ */
/* | iPhone 5, 5S, 5C and 5SE												| */
/* +------------------------------------------------------------------------+ */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

	/* DEFAULTS */
	.desktop-br { display: inline; }

	/* LAYOUT */
	.header { background-position: 40px center; background-size: auto 54px; height: 94px; }
	.flex-container > div { padding: 20px 10px; }

	/* CONTENT */
	.content { padding: 20px 10px 10px 10px; }
	.content h1 { font-size: 34px; line-height: 40px; }
	.content h2 { font-size: 18px; line-height: 22px; text-align: center; text-transform: none; padding: 10px; margin: 20px auto 40px auto; }
	.content .icon { width: 55px; height: 55px; margin-bottom: 10px; }

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { .desktop-br { display: block; } .content h2 { max-width: 480px; } }


/* +------------------------------------------------------------------------+ */
/* |iPhone 6, 6S, 7 and 8													| */
/* +------------------------------------------------------------------------+ */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {

	/* DEFAULTS */
	.desktop-br { display: block; }

	/* LAYOUT */
	.header { background-position: 40px center; background-size: auto 54px; height: 94px; }
	.flex-container > div { padding: 20px 10px; }

	/* CONTENT */
	.content { padding: 40px 20px 20px 20px; }
	.content h1 { font-size: 34px; line-height: 40px; }
	.content h2 { font-size: 18px; line-height: 22px; text-align: center; text-transform: none; padding: 10px; margin: 20px auto 40px auto; }
	.content .icon { width: 55px; height: 55px; margin-bottom: 10px; }

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { .desktop-br { display: block; } .content h2 { max-width: 480px; } }


/* +------------------------------------------------------------------------+ */
/* | iPhone 6+, 7+ and 8+													| */
/* +------------------------------------------------------------------------+ */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) {

	/* DEFAULTS */
	.desktop-br { display: inline; }

	/* LAYOUT */
	.header { background-position: 40px center; background-size: auto 54px; height: 94px; }
	.flex-container > div { padding: 20px 20px 40px 20px; }

	/* CONTENT */
	.content { padding: 40px 20px 20px 20px; }
	.content h1 { font-size: 34px; line-height: 40px; }
	.content h2 { font-size: 18px; line-height: 22px; text-align: center; text-transform: none; padding: 10px; margin: 20px auto 40px auto; }
	.content .icon { width: 55px; height: 55px; margin-bottom: 10px; }

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { .desktop-br { display: block; } }

/* +------------------------------------------------------------------------+ */
/* | iPhone X																| */
/* +------------------------------------------------------------------------+ */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) {

	/* DEFAULTS */
	.desktop-br { display: inline; }

	/* LAYOUT */
	.header { background-position: 40px center; background-size: auto 54px; height: 94px; }
	.flex-container > div { padding: 20px 20px 40px 20px; }

	/* CONTENT */
	.content { padding: 30px 30px; }
	.content h1 { font-size: 34px; line-height: 40px; }
	.content h2 { font-size: 18px; line-height: 22px; text-align: center; text-transform: none; padding: 10px; margin: 20px auto 40px auto; }
	.content .icon { width: 55px; height: 55px; margin-bottom: 10px; }

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { .desktop-br { display: block; } .content { padding: 50px 50px; } }


/* +------------------------------------------------------------------------+ */
/* | Google Pixel XL															| */
/* +------------------------------------------------------------------------+ */

/* Portrait and Landscape */
@media screen 
  and (device-width: 411px) 
  and (device-height: 823px)
  and (-webkit-device-pixel-ratio: 4) {

	/* DEFAULTS */
	.desktop-br { display: inline; }

	/* LAYOUT */
	.header { background-position: 40px center; background-size: auto 54px; height: 94px; }
	.flex-container > div { padding: 20px 20px 40px 20px; }

	/* CONTENT */
	.content { padding: 40px 40px; }
	.content h1 { font-size: 34px; line-height: 40px; }
	.content h2 { font-size: 18px; line-height: 22px; text-align: center; text-transform: none; padding: 10px; margin: 20px auto 40px auto; }
	.content .icon { width: 55px; height: 55px; margin-bottom: 10px; }

}

/* Portrait */
@media screen 
  and (device-width: 411px) 
  and (device-height: 823px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {}

/* Landscape */
@media screen 
  and (device-width: 411px) 
  and (device-height: 823px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) { .desktop-br { display: block; } .content { padding: 50px 50px; } }