/*****  Default Announcement Header  *****/
#toggler + label:after { 
content:"UPCOMING VACATION" }



.everythinginside { 
	/** controls the text formatting and styling of the message itself (not the header though) **/
font-weight:bold;
-webkit-font-smoothing: antialiased;
	/** font-family:'Arima Madurai', cursive;
word-spacing:2px; **/
color:#000; }



#toggler {
position:absolute;
appearance:none;
cursor:pointer;
left:-100%; 
	/*** top:-100%; ***/ }



#toggler + label { 
	/*** Closed/default position; button that reveals msg ***/
position:absolute;
cursor:pointer;
/** background-color: **/
color: #e60cb1;
width: 100%;
	/*** border-radius: 30px; ***/
	/** padding: 20px 0px; **/
line-height:90px;
font-size:2.9em;
font-weight: bolder;
text-align:center;
-webkit-font-smoothing: antialiased;
margin: 10px 0 0 0;
transition: all 500ms ease;
text-shadow: 2px -1px 20px #fdfffd, -1px -2px 18px #ececec, 5px 2px 1px #fff; }



	/***** height of msg box container upon opening. height must be greater than toggler:checked ~ .message  *****/
#toggler:checked ~ .anc-container {
margin-top: 400px; }



	/***** height of msg box space; must be less than toggler:checked ~ .anc-container  *****/
#toggler:checked ~ .message {
top: 0;
max-height: 350px; }



.anc-container { 
	/*** This container slides below on trigger ***/
transition: margin 2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding: 3.7em 0em;
background: url('https://starlinksgifts.com/v/vspfiles/images/SummerAnnouncement.jpg'); 
	/** This is the non-repeating image border on SL home **/
background-size: auto 90px;
background-repeat: repeat-y;
background-position: center; 
	/** background-color: none; **/  
z-index:2001; }



.message {
text-align: center;
color:#000;
font-size: 1.4em;
background-color: #ffffff;
	/** 
	background: url('https://starlinksgifts.com/v/vspfiles/images/....'); 
	background-repeat: repeat-y;
	background-size: auto 90px;
	background-position: center; 
	**/
position: absolute;
	/*** 
	top: -300px; 
	***/
	left: 0; 
	width: 100%; 
	/** width of message box on screen (not centered fyi) **/
	/** 
	height: 175px; 
	**/
padding: 0% 20%;
transition: top 2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: auto;
box-sizing: border-box;  
max-height: 0px;
 }





.message h1 {
	/** font-size: 2em; **/
font-weight:bolder;
	/** color:#ff0000; **/
-webkit-font-smoothing: antialiased;
font-family:'Arima Madurai', cursive;
word-spacing:2px;
	/** line-height: 15px; **/
text-align:center;  }



/** 
@media only screen and (max-width:750px) { 
.message h1 {}
.message {}
}
**/



h2 {
font-weight:normal;
text-align:center;
font-size:20px;
color:#000;
padding:5px 0; }


 

@media only screen and (max-width:570px) {
.message {
line-height:19px; 
min-width: 400px; 
overflow:auto; 
font-size: 1.2em; 
/** height:420px !important; **/
margin: 20px 10px 30px 15px;
padding: 5px; }

.message p {
padding-bottom: 20px;  }

.msg {
margin: 20px 15px 10px 5px; }

#toggler:checked ~ .message {
max-height:700px !important; }

#toggler + label {
font-size:2em !important; 
/* height: 420px !important; */ }

#toggler:checked + label {
font-size:1.5em !important;
line-height:revert-rule; }

#toggler:checked ~ .anc-container {
margin-top: 450px !important; } }



	/***** ORIGINAL: 
	@media only screen and (max-width:570px) {
	.message {line-height:19px; overflow:auto; font-size: .9em; height:200px !important;}
	#toggler:checked ~ .message {max-height:900px !important;}
	#toggler + label {font-size:2em !important; height: 200px !important;}
	#toggler:checked + label {font-size:1.5em !important;}
	#toggler:checked ~ .anc-container {margin-top: 190px !important;} } 
	*****/



#toggler:checked + label { 
	/*** 'Close button' formatting ***/
color:#000fff;
font-size:2em;
line-height:9px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1), 0px 5px 35px rgba(255, 255, 255, 0.3), -1px 2px 3px #000000; }


#toggler:checked + label:after { 
background-color: #ffffff; content:"X Close X" }