@import url("//hello.myfonts.net/count/3930fb");

@font-face {font-family: 'KapraNeue-Light';src: url('../fonts/3930FB_0_0.eot');src: url('../fonts/3930FB_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3930FB_0_0.woff2') format('woff2'),url('../fonts/3930FB_0_0.woff') format('woff'),url('../fonts/3930FB_0_0.ttf') format('truetype');}
@font-face {font-family: 'KapraNeue-LightCondensed';src: url('../fonts/3930FB_1_0.eot');src: url('../fonts/3930FB_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3930FB_1_0.woff2') format('woff2'),url('../fonts/3930FB_1_0.woff') format('woff'),url('../fonts/3930FB_1_0.ttf') format('truetype');}
@font-face {font-family: 'KapraNeue-LightItalic';src: url('../fonts/3930FB_2_0.eot');src: url('../fonts/3930FB_2_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3930FB_2_0.woff2') format('woff2'),url('../fonts/3930FB_2_0.woff') format('woff'),url('../fonts/3930FB_2_0.ttf') format('truetype');}
@font-face {font-family: 'KapraNeue-Regular';src: url('../fonts/3930FB_3_0.eot');src: url('../fonts/3930FB_3_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3930FB_3_0.woff2') format('woff2'),url('../fonts/3930FB_3_0.woff') format('woff'),url('../fonts/3930FB_3_0.ttf') format('truetype');} 
@font-face {font-family: 'KapraNeue-RegularCondensed';src: url('../fonts/3930FB_4_0.eot');src: url('../fonts/3930FB_4_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3930FB_4_0.woff2') format('woff2'),url('../fonts/3930FB_4_0.woff') format('woff'),url('../fonts/3930FB_4_0.ttf') format('truetype');}
 
/*
Colors
Blue: #00506E
Light grey: #F3F3F3
*/

* { font-family: "KapraNeue-Light", sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 24px; }
body { margin: 0; color: #000000; line-height: 1.4em; height: 100%; opacity: 0; animation-duration: 1s; animation-fill-mode: both; animation-delay: .5s; -webkit-animation-name: fadeIn; animation-name: fadeIn; }

	@media(max-width: 768px) {
		html { font-size: 20px; }
	}

/*Sections*/
.section { position: relative; padding: 0 8vw; }
.section.section-no-padding { padding: 0 0; }
.section > .container-fluid {  position: relative; margin: 0 auto; max-width: 1900px; margin: auto; }

.section-dyn-padding { padding-top: 8vw !important; padding-bottom: 8vw !important; }

@media(max-width: 576px) {
	.section { position: relative; padding: 0 5vw; }
	.section-dyn-padding { padding-top: 15vw !important; padding-bottom: 15vw !important; }
}

.section-mood {}
	.section-mood > img { display: block; width: 100%; height: auto; position: relative; z-index: 10; }
	.section-mood > .section-mood-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: 100; }

/*Colors*/
.bg-color-blue { background-color: #00506E; color: #FFFFFF; }
.bg-color-lightgrey { background-color: #F3F3F3; }
.bg-color-white { background-color: #FFFFFF; }

.text-color-black { color: #000000; }
.text-color-blue { color: #00506E; }
.text-color-lightgrey { color: #F3F3F3; }
.text-color-white { color: #FFFFFF; }

/*Fancybox*/
.fancybox-bg { background: #00506E; }
.fancybox-is-open .fancybox-bg { opacity: .9; }
.fancybox-caption { color: #FFF; background-color: #00506E; font-size: .9rem; text-align: center; }
.fancybox-caption:before { background: none; }
.fancybox-caption:after { background: none; }

/*Buttons and forms*/
.btn { font-weight: normal; border-radius: 0; position:relative; text-transform: uppercase; padding-top: .7em; }

.btn.bg-color-blue { color: #FFFFFF !important; } 
.btn.bg-color-blue:before { content: ' '; border: 1px solid #FFFFFF; position:absolute; top: .1rem; right: .1rem; bottom: .1rem; left: .1rem;  }

.btn.bg-color-white { color: #00506E !important; } 
.btn.bg-color-white:before { content: ' '; border: 1px solid #00506E; position:absolute; top: .1rem; right: .1rem; bottom: .1rem; left: .1rem;  }

.btn i { font-size: 1.1rem; margin-right: .3rem; margin-top: .2rem; }


/*Menu bar*/
#section-menubar { position: fixed; top: 0; left: 0; z-index: 500; width: 100%; background-color: #FFFFFF; padding-left: 0; padding-right: 0; }
	#section-menubar .btn-show-navi { height: 1.5rem; margin: .25rem 0 .25rem 1rem; width: auto; cursor: pointer;  }
	#section-menubar .logo-topbar { height: 2.5rem; width: auto; }
	#section-menubar .btn-blue { display: inline-block; }
	#section-menubar .btn-white { display: none; }

	#section-menubar.bg-color-transparent { background-color: transparent; }
		#section-menubar.bg-color-transparent .logo-topbar { display: none; }
		#section-menubar.bg-color-transparent .btn-blue { display: none; }
		#section-menubar.bg-color-transparent .btn-white { display: inline-block; }

	#section-menubar.scrolled { background-color: #FFFFFF !important; }
		#section-menubar.scrolled .logo-topbar { display: none; }
 		#section-menubar.scrolled .btn-blue { display: inline-block; }
		#section-menubar.scrolled .btn-white { display: none; }

	@media(max-width: 768px) {
		#section-menubar .btn-show-navi { height: 1.5rem; top: .5rem; }
		#section-menubar.scrolled .logo-topbar { display: inline; }
	}

/*Navi Overlay*/
#panel-navi { position: fixed; width: 400px; height: 100%; top: 0; left: -400px; z-index: 1000; padding: 1rem; }

	#panel-navi .panel-navi-content { max-height: 100%; overflow-y: auto; padding-top: 4rem; }
	#panel-navi .btn-hide-navi { position: absolute; top: 1rem; left: 2rem; font-size: 2.2rem; cursor: pointer;  }

	#panel-navi a { color: #FFFFFF; text-transform: uppercase; font-family: 'KapraNeue-LightCondensed', sans-serif; }

	#panel-navi nav ul { list-style-type: none; margin: 0; padding: 0; }
	#panel-navi nav ul li { margin: .9rem 0; }
	#panel-navi nav ul li a { font-size: 2.1rem; line-height: 1em; }

/*Booking overlay*/
#panel-booking { position: fixed; width: 300px; height: 100%; top: 0; right: -300px; z-index: 1000; padding: 1rem; padding-top: 10rem; }
	#panel-booking .btn { display: block; font-size: 1.2rem; font-family: 'KapraNeue-RegularCondensed'; }
	#panel-booking .btn-booking-panel { font-size: 32px; padding: .5em .8em .3em .8em; position: absolute; transform: rotate(-90deg); transform-origin: top right; top:30px; right: 376px; cursor: pointer; }

	#panel-booking h3 { color: #FFFFFF; font-size: 2.2rem; }

	@media(max-width: 992px) {
		#panel-booking .btn-booking-panel { font-size: 24px; right: 356px; top: auto; bottom: 230px; } 
	}

/*Sliders*/
.slick-slider { margin: 0 !important; }
.slick-prev, .slick-next { z-index: 300; }
.slick-prev:before, .slick-prev:before, .slick-next:before, .slick-next:before { opacity: 1; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: .8; }

.mood-slider {}
	.mood-slider .slick-dots { position: absolute; bottom: 0; padding-bottom: 1rem; padding-left: 2rem; text-align: left; z-index: 300; }
	.mood-slider .slick-dots li button:before { color: #FFFFFF; font-size: .8rem; opacity: 1; border: 2px solid #FFFFFF; color: transparent; border-radius: 10px;  }
	.mood-slider .slick-dots li.slick-active button:before { background-color: #00506E; border: 2px solid #00506E; }

.gallery-slider-outer { max-width: 1000px; margin: 0 auto; position: relative; }
.gallery-slider .slick-next, .gallery-slider .slick-prev { background-color: none; width: 3.5rem; height: 3rem; top: calc(50% - 1.5rem); text-align: center; position: absolute; transform: none; }
	.gallery-slider .slick-next { margin-right: 0; right: 1rem; text-align: right; }
	.gallery-slider .slick-prev { margin-left: 0; left: 1rem; text-align: left; }
	.gallery-slider .slick-next:before { content: '\f178'; font-family: 'Font Awesome 5 Pro'; color: #FFFFFF; font-size: 3rem; font-weight: 100; }
	.gallery-slider .slick-prev:before { content: '\f177'; font-family: 'Font Awesome 5 Pro'; color: #FFFFFF; font-size: 3rem; font-weight: 100; }

	@media(max-width: 576px) {
		.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
		.gallery-slider .slick-next, .gallery-slider .slick-prev { height: 2rem; top: calc(50% - 1rem); }
			.gallery-slider .slick-next:before { font-size: 2rem; }
			.gallery-slider .slick-prev:before { font-size: 2rem; }
	}

.event-slider-outer { max-width: 900px; margin: 0 auto; position: relative; }
.event-slider-outer.specials { max-width: 100%; }
.event-slider { padding: 0 4rem; }
.event-slider .slick-next, .event-slider .slick-prev { background-color: none; width: 3rem; height: 3rem; top: calc(50% - 1.5rem); z-index: 100; text-align: center; position: absolute; transform: none; }
	.event-slider .slick-next { margin-right: 0; right: 0; }
	.event-slider .slick-prev { margin-left: 0; left: 0; }
	.event-slider .slick-next:before { content: '\f178'; font-family: 'Font Awesome 5 Pro'; color: #00506E; font-size: 3rem; font-weight: 100; }
	.event-slider .slick-prev:before { content: '\f177'; font-family: 'Font Awesome 5 Pro'; color: #00506E; font-size: 3rem; font-weight: 100; }

	@media(max-width: 992px) {
		.event-slider { padding: 0 0; padding-top: 3rem;  }
		.event-slider .slick-next, .event-slider .slick-prev { top: 0; }
		.event-slider .slick-next { right: auto; left: 2rem; }
		.event-slider .slick-prev { left: -.5rem; padding-left: 0; }
		.event-slider .slick-next:before { font-size: 2rem; }
		.event-slider .slick-prev:before { font-size: 2rem; }
	}

/*General styles*/
.img-fluid-full { width: 100%; height: auto; }

.form-control.editmode input[type=text] { width: 100%; }

.box-border { border: 2px solid; }
.box-border--blue { border-color: #00506E; }
.box-border--white { border-color: #FFFFFF; }

/*Typo*/
h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 * { font-family: "KapraNeue-RegularCondensed", sans-serif; color: #00506E; text-transform: uppercase; line-height: 1.1em; margin-top: 0; margin-bottom: .5rem; font-weight: normal;  }
h1, h1 * { font-size: 3.3rem; }
h2, h2 * { font-size: 3.3rem; }
h3, h3 * { font-size: 1.7rem; }
h4, h4 * { font-size: 1.7rem; }
h5, h5 * { font-size: 1.4rem; }
h6, h6 * { font-size: 1.4rem; }

@media(max-width: 768px) {
	h1, h1 * { font-size: 2.2rem; }
	h2, h2 * { font-size: 2.2rem; }
}

h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { line-height: 0; }

p {  }

strong { font-family: 'KapraNeue-Regular' !important; font-weight: normal; }
em { font-family: 'KapraNeue-LightItalic' !important; font-weight: normal; }

.text-small { font-size: .85rem; }
.text-larger { font-size: 1.1rem; }
.text-large { font-size: 1.3rem; }

.text-uppercase { text-transform: uppercase; }
	
strong { font-family: "AvenirLTStd-Black", sans-serif; font-weight: normal; }

a { color: #00506E; }
a:hover { text-decoration: none; opacity: .8; color: #00506E; }

a.text-color-white, a.text-color-white:hover { color: #FFFFFF !important; } 

ul.list-formatted { margin: 0; padding: 0; list-style-type: none; margin-bottom: 1rem; }
	ul.list-formatted li { display: block; position: relative; padding-left: 1rem; margin-bottom: .25rem; }
	ul.list-formatted li:before { position: absolute; left: 0; top: 0; content: '—'; color: #00506E; }

ul.list-formatted.check-white li { padding-left: 1.5rem; }
ul.list-formatted.check-white li:before { content: '\f00c'; color: #FFF; font-family: 'Font Awesome 5 Pro'; font-size: .9rem; top: -.2rem; }

/*Image tiles*/
.image-tile { background-size: cover; background-position: center; position: relative; }
	.image-tile:hover { text-decoration: none; }
	.image-tile .label { text-transform: uppercase; font-size: 3.5vw; line-height: 110%; color: #FFFFFF; z-index: 100; position: relative; text-align: center; font-family: "KapraNeue-RegularCondensed", sans-serif; }
	.image-tile .label.label-small { font-size: 1.6vw; margin: .5vw 0; line-height: 120%; text-transform: none; font-family: 'KapraNeue-Light', sans-serif; } 
	.image-tile .tile-illustration { max-width: 100%; max-height: 100%; width: auto; height: auto; }

	@media(max-width: 992px) {
		.image-tile:not(.image-tile-zimmer) .label { font-size: 7vw; }
		.image-tile:not(.image-tile-zimmer) .label.label-small { font-size: 4vw; margin: 1vw 0; } 
	}

	@media(max-width: 576px) {
		.image-tile:not(.image-tile-zimmer) .label { font-size: 9vw; }
		.image-tile:not(.image-tile-zimmer) .label.label-small { font-size: 5vw; margin: 1vw 0; } 
	}

	.image-tile:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; content: ' '; display: block; }
	.image-tile.tile-color-blue:before { background-color: rgba(0,80,110,.8); } 
	.image-tile:not(.tile-color-blue):not(.tile-icon):before { background-color: rgba(0,0,0,.4); } 

	a.image-tile:hover:before { transition: background-color .7s linear; background-color: rgba(0,80,110,.75) !important; }
		
	.image-tile-square:after { padding-bottom: 100%; content: ' '; display: block; }


/*Animations*/
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0; 
    }
    to {
        opacity: 1; 
    }
}

@keyframes fadeIn {
    0% {
				opacity: 0; 
    }
    to {
				opacity: 1; 
    }
}

/*Section and content elements*/

	/*Startseite*/
	#section-start-mood .logo-start-mood { height: auto; width: 32vw; clear: both; float: none; }
	#section-start-mood h3 { margin-top: 3vw; max-width: 100%; font-size: 4vw; }
.eush {max-width: 100%; height: auto; margin-top: 1em;}

	@media(max-width: 992px) {
		#section-start-mood .logo-start-mood { width: 40vw; }
	}

	@media(max-width: 576px) {
		#section-start-mood h3 { display: none; }
	}

	#section-start-intro {}
		#section-start-intro img.steuerrad { position: absolute; width: 15vw; height: auto; top: 9vw; right: 0; z-index: 10; }

	#section-start-events { }
		#section-start-events img.kompass { position: absolute; width: 15vw; height: auto; bottom: -7vw; right: 0; z-index: 10; }
		#section-start-events img.seemann { position: absolute; width: auto; height: auto; bottom: 0; left: 0; z-index: 10; max-width: 30vw; max-height: 95%; }

	@media(max-width: 768px) {
		#section-start-events { padding-bottom: 55vw !important; }
	}

	#section-start-gallery { background: url(/images/startseite/illustrationen/illustration-moewen.svg) left top 10rem no-repeat; background-size: 15vw;  }

	/*Footer*/
	#section-footer-contact { background: url(/assets/images/map-siel59.png) center center no-repeat, #00506E; background-size: cover;  }
	
		.box-contact > .box-border { padding: 2rem; }
		

	#section-footer-links {}
		#section-footer-links .fa-icon { font-size: 1.8rem; }
		#section-footer-links img.logo { max-width: 250px; width: auto; height: auto; } 

	/*Restaurant*/
	#section-restaurant-intro { background: url(/images/restaurant/illustrationen/illustration-pfanne.svg) left center no-repeat, 
																					url(/images/restaurant/illustrationen/illustration-muschel.svg) right 1rem bottom 1rem no-repeat; background-size: 20%, 9%; } 

	#section-restaurant-impressionen { background: 	url(/images/restaurant/illustrationen/illustration-anker.svg) left center no-repeat, 
																									url(/images/restaurant/illustrationen/illustration-fische.svg) right 0 bottom 1rem no-repeat; background-size: 10%, 20%; } 

	#section-restaurant-specials {  } 
		#section-restaurant-specials img.schiff { position: absolute; left: 0; bottom: 3rem; width: 30vw; }
		
	@media(max-width: 992px) {
		#section-restaurant-specials { padding-bottom: 60vw !important; }
		#section-restaurant-specials img.schiff { width: 60vw; }
	}

	#section-restaurant-menu { background: url(/images/restaurant/bg-speisekarte.jpg) center center no-repeat; background-size: cover;  } 
		#section-restaurant-menu .btn { width: 220px; margin-bottom: .4rem; }

	@media(max-width: 576px) {
		#section-restaurant-menu { background-size: 150%; background-position: top center; padding-top: 40vw !important; }
	}

	/*Feiern*/
	#section-feiern-hochzeiten { background: url(/images/feiern/bg-heiraten.jpg) center center no-repeat; background-size: cover; }
		#section-feiern-hochzeiten img { z-index: 100; position: relative; bottom: -1rem; }

	#section-feiern-inspiration { background: url(/images/feiern/illustrationen/illustration-meer.svg) left bottom no-repeat, #F3F3F3; background-size: 45%; }
		#section-feiern-inspiration img.kompass { position: absolute; width: 15vw; height: auto; right: 0; top: -7vw; z-index: 10; } 

	@media(max-width: 768px) {
		#section-feiern-inspiration { padding-bottom: 65vw !important; background-size: 100% auto; } 
	}

	#section-feiern-impressionen { background:	url(/images/feiern/illustrationen/illustration-moewe.svg) left bottom 2rem no-repeat, 
																							url(/images/feiern/illustrationen/illustration-glocke.svg) right 2rem top 0 no-repeat; background-size: 8%, 10%; } 
	/*Siel 59*/
	#section-siel-intro { background: url(/images/siel-59/illustrationen/illustration-seehunde.svg) right center no-repeat; background-size: 45%; } 
	
	@media(max-width: 992px) {
		#section-siel-intro { padding-bottom: 50vw !important; background-size: 85%; background-position: right bottom 3rem;  }
	}

	#section-siel-werte {}
		#section-siel-werte img.moewen { position: absolute; width: 15vw; height: auto; z-index: 10; top: 1rem; left: 0; }

	#section-siel-inhaber { background: url("/images/siel-59/siel59-carsten-hansen-2025.jpg") center center no-repeat, #F3F3F3; background-size: cover; }

	@media(max-width: 992px) {
		#section-siel-inhaber { background-size: 150% auto; padding-top: 40vw !important; background-position: top left; }
	}

	#section-siel-jobs { background: url(/images/siel-59/illustrationen/illustration-seemann.svg) left 3rem center no-repeat; background-size: auto 70%; }
	
	@media(max-width: 768px) {
		#section-siel-jobs { padding-bottom: 40vw !important; background-position: right 2rem bottom; background-size: auto 50vw;  }
	}

	/*Kontakt*/
	#section-kontakt-intro { background: url(/images/kontakt-service/illustrationen/illustration-schiff.svg) right center no-repeat; background-size: 12%;  }
		#section-kontakt-intro img.anker { position: absolute; width: 10vw; height: auto; left: 0; bottom: -3vw; z-index: 10; }

	#section-kontakt-gutschein { background: url(/images/kontakt-service/bg-gutschein.jpg) center center no-repeat; background-size: cover; }

	ul.anreise { list-style-type: none; margin: 0; padding: 0; }
	ul.anreise li { margin-bottom: 1rem; display: block; padding-left: 2rem; position: relative; }
	ul.anreise li:before { font-family: 'Font Awesome 5 Pro'; content: ' ';  color: #00506E; position: absolute; left: 0; top: -.1rem; font-size: 1.1rem; font-weight: 100; }
	ul.anreise li.auto:before { content: '\f1b9'; } 
	ul.anreise li.schiff:before { content: '\f21a'; } 
	ul.anreise li.fahrrad:before { content: '\f206'; } 

	/*Zimmer*/
	#section-zimmer-fruehstueck { background: url(/images/zimmer/illustrationen/illustration-fischer.png) left center no-repeat, #00506E; background-size: auto 70%; }
		#section-zimmer-fruehstueck { background-size: 70% auto; background-position: left top 2rem; }

	#section-zimmer-einzel { background: url(/images/zimmer/illustrationen/illustration-anker.svg) right center no-repeat, #F3F3F3; background-size: 8%; }
	#section-zimmer-doppel { background: url(/images/zimmer/illustrationen/illustration-muscheln.svg) left center no-repeat #F3F3F3; background-size: 10%; }
	
	#section-zimmer-specials { background: url(/images/zimmer/illustrationen/illustration-seehund.png) right 1rem bottom 1.5rem no-repeat, #F3F3F3; background-size: 15%; }

	#section-zimmer-teaser {}
		#section-zimmer-teaser .image-tile { min-height: 30vw; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; cursor: pointer }
		#section-zimmer-teaser .image-tile.tile-active .label:before, #section-zimmer-teaser .image-tile:hover .label:before { content: '\f175'; font-family: 'Font Awesome 5 Pro'; font-weight: 100; position: absolute; left: 45%; bottom: -3rem; } 

		@media(max-width: 576px) {
			#section-zimmer-teaser .image-tile .label { font-size: 7vw !important; }
		}

	/*Umgebung*/
	#section-umgebung-intro { background: url(/images/umgebung/illustrationen/illustration-moewe.svg) left 2rem bottom no-repeat, #F3F3F3; background-size: 23%; }

	@media(max-width: 768px) {
		#section-umgebung-intro { padding-bottom: 30vw !important; background-size: 35vw; }
	}

	#section-umgebung-westkueste { background: url(/images/umgebung/bg-duenen.jpg) center center no-repeat; background-size: cover; }



#banner-message {
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 400;
	background-color: #00506E;
	color: white;
	padding: 1em 2em;
	font-size: .9em;
}
#banner-message a { color: #fff; }
#section-footer-links {
    padding-bottom: 2rem!important;
}

#popupbox {
	background: rgba(0,0,0,.5);
	width: 100%;
height: 100%;
  display: none;
  width: 100%;
	min-width: 600px;
  height: 100%;
  opacity: 1;
  position: fixed !important;
  transition: all 0.4s ease-out 0s;
  z-index: 1113000;
  top: 0;
  /** background: rgba(0,0,0,.8); **/
}

#popupbox .contentbox {
font-size: 26px;
line-height: 1.4em;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 600px;
max-width: 90%;
margin: auto;
padding: 50px 0 30px 50px;
color: #000;
left: 30px;
top: 30px;
position: relative;
	margin: 30px auto 0;
box-sizing: border-box;
background: #fff;
text-align: left;
/** transform: translate(-50%, -50%); **/
	}
	
	#popupbox .contentbox p {
text-align: left;
	background: url("/images/startseite/illustrationen/illustration-steuerrad.svg?m=1590583078") #fff no-repeat right center;
	background-size: contain;
padding-right: 250px 
}
.contentbox p:last-of-type {
    margin-bottom: 0;
}
#popupbox h4 {
	padding-right: 50px;
	display: block;
    margin: 0 0 0.5em 0;
}
#popupbox #close {
    position: absolute;
    right: -20px;
    top: -20px;
    background: #00506E;
    width: 40px;
    height: 40px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    border-radius: 0;
    cursor: pointer;
    font-size: 36px;
}
@media screen and (max-width: 767px) {
	#popupbox {
  left: 0;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  padding-right: 50px;
}
#popupbox .contentbox {
font-size: 22px;
padding: 25px;
	background: #fff;
	padding-right: 25px;
}
		#popupbox .contentbox p {
text-align: left;
	background: #fff;
	background-size: 240px auto;
padding-right: 0; 
}
	}