body {margin:0px;font-family: "Times New Roman", Times, serif;background:#ffffff ;}
html {font-family: "Times New Roman", Times, serif;}

/* ============================= */
/* ============================= */

/* HEADER */

#header {background:#232323;color:#ffffff;}

.size15 {font-size:1.2em}
.vertmid {vertical-align:top}
.padleft5 {padding-left:.5em;}
.mgtop15 {margin-top:1.5em;text-align:center}
.white {color:#ffffff}
.deconone {text-decoration:none}

.disblock {display:block}
.dismobyes {display:none}
.dismobno {display:inline}


/* ============================= */
/* ============================= */


#tagline {display:none;font-family:Impact, Charcoal, sans-serif;font-size:1.5em;color:#511a73;margin-bottom: 10px;}

/* SKIP TO CONTENT */
    .skip {
        position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
    }
    
    a.skip:active, 
    a.skip:focus, 
    a.skip:hover {
        left: 0; 
        top: 0;
        width: auto; 
        height: auto; 
        overflow: visible;
        background:#ffffff;
        color:#000000; 
        line-height:3em
    }
	
/* =============== HEADER-FOOTER-EVENTS =================== */
body, html {
  height: 100%;
  margin: 0;
}
 
.bg {
  /* The image used */
  background-image: url("../images/hp-bkg-min.jpg");
 
  /* Full height */
  height: 100%;
 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}

.bgin {
  /* The image used */
  background-image: url("../images/hp-bkg-min.jpg");
  /* Full height */
  height: auto;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}

/* #### Generated By: http://www.cufonfonts.com #### */

    @font-face {
    font-family: 'Carnivalee Freakshow Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Carnivalee Freakshow Regular'), url('../fonts/Carnevalee Freakshow.woff') format('woff');
    }

.container {max-width:1280px;margin:0 auto;padding:0em 1.5em}

.menu-plq {padding:2em 4em;text-align:right}
.menu-plq-img-box {display:inline-block;width:15%}
.menu-plq-img-box img {max-width:150px;width:100%}
.menu-plq-menu-box {display:inline-block;vertical-align:top;color:#e8e0d3;text-align:right;width:80%}

.hp-logo {text-align:center;padding:1em;padding-top:1.5em}
.hp-logo img {width:100%;max-width:918px}
.logofont {font-family:'Carnivalee Freakshow Regular';font-weight:normal;font-size: 2.5em;letter-spacing: .15em;}

.taginvite {background:#b22d1a url('../images/filigree-line-5-opc-min.png') repeat-x center top;padding-top:5em;text-align:center;color:#ece2d6;padding-bottom:3em;}
.hpinvite {font-size:1.5em;}
.hpinvite::before {content: url(../images/hp-filigree-left.png);padding-right:1em;}
.hpinvite::after {content: url(../images/hp-filigree-right.png);padding-left:1em;}
.hr-line {border:0; border-top : 2px solid black;width:60%}

.events-hp {background-image: url(../images/dancers-min.png), url(../images/hp-spec-bkg-min.jpg);  background-position: center bottom, left top;  background-repeat: no-repeat, repeat;padding:3em;}
.events-hp p {line-height:1em; color:#254b72;font-weight:900;font-size:1.7em}
.events-h2 {margin-top:100px;color:#254b72;font-size:2em;font-weight:900}

.pg-in-bkg {background: url(../images/hp-spec-bkg-min.jpg) repeat;padding:3em;}

.dismobyes {display:none}
.dismobno {display:block}

/*.footer {background: #254b72;padding: 2em;color: #fff;text-align: center;line-height: 1.5em;} */

@media screen and (min-width:0px) and (max-width:600px){
.menu-plq {padding:2em 4em;text-align:right}
.menu-plq-img-box {display:none;width:auto}
.menu-plq-img-box img {max-width:150px;width:100%}
.menu-plq-menu-box {display:block;vertical-align:top;color:#e8e0d3;font-weight:900;text-align:center;background: rgba(0, 0, 0, 0.2);width:100%;}

.hp-logo {text-align:center;padding:1em;margin-top:4em}
.hp-logo img {width:100%;max-width:918px}

.hp-logo-mob {text-align:center;padding:1em}
.hp-logo-mob img {width:100%;max-width:918px}

.hpinvite {font-size:1.5em;color:white;font-weight:900;background:tan;}
.hpinvite::before {content: url(../images/hp-filigree-left.png);padding-right:1em;display:none;}
.hpinvite::after {content: url(../images/hp-filigree-right.png);padding-left:1em;display:none;}

.dismobyes {display:block}
.dismobno {display:none}
	
}


/* =============== END HEADER FOOTER EVENTS =============== */

#content {/*max-width:1280px;margin-top:25px*/margin:0 auto;background:#ffffff;}


/* IMAGES */
img {
    max-width: 100%;
    height: auto;
    /* width: 100%;        to make the image responsive */
}

.wrap {padding:0px}

/* ==== PHONE ==== */
.phone1 {display:inline-block}
.phone2{display:none}

/* FOOTER */

#footer {border:0px #c0c0c0 solid;background:transparent;}
.footcolor {background: #254b72; border-top: 0px #ffffff solid;color: #e8e0d3;padding: 20px 0px;}
.footcolor a:link, .blkfoot a:visited {color:#ffffff}

.button {
transition: all .5s ease;
color: #fff;
border: 1px solid #e8e0d3;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 2em;
font-size: 1em;
background-color: #000000;
/* padding: 10px; */
outline: none;
border-radius: 4px;
margin: 10px;

}
.button:hover {
    color: #000000;
    background-color: #fff;
}

.button a {display:block;color:#e8e0d3;}
.button a:hover {color:#000000;}

.scmedia {width:2em;display:inline}

/* COPYRIGHT TAG */
.ct {font-size: .8em; text-align: center;}

/* PPP DESGIN TAG */
.pdt { font: 8pt "Times New Roman", Times, serif; text-align: right;padding:10px;border-top:0px #333333 solid;background:#ffffff}

/* BACK TO TOP */
.bttbutton {
    background-color: #2c2f70; /* Green */
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 50px;
}

.bttbutton1 {
    background-color: #995826; 
    color: black; 
    border: 2px solid #995826;
}

.bttbutton1:hover {
    background-color: #2c2f70;
    color: white;
}

.bttbutton1 a:hover {
 	display:block;
    color: white;
}

/*triangle*/
#tri {
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 25px 15px;
border-color: transparent transparent #000080 transparent;
}

#tri:hover {
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 25px 15px;
border-color: transparent transparent #FFFFFF transparent;
}

/* ================================================================== */
/* ==================== COLUMN LAYOUT =============================== */
* {box-sizing: border-box;}

.row::after { /* ==== ALL COLUMNS MUST BE IN A ROW ==== */
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  margin: 20px 0px;
}

[class*="wrap-"] {
  float: left;
  padding: 0px;
  margin: 0px 0px;
}

.aside {
  background-color: #ffffff;
  padding: 15px;
  color: #000000;
  text-align: center;
  font-size: 14px;
 /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

[class*="wrap-"] {
  width: 100%;
}

@media only screen and (min-width: 769px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  .wrap-12 {width: 100%;}
    
  /* ================ HEADER ================== */
  #tagline {display:inline ;font-family:Impact, Charcoal, sans-serif;font-size:1.5em;color:#511a73;margin-bottom: 10px;}
  	.listen-top {display:inline-block;width:50%;padding-top:10px;border:0px #fff solid;color:#ffffff;font-family:"Trebuchet MS", Helvetica, sans-serif;font-weight:bold;font-size:1.2em}
  	.phone-top {display:inline-block;width:20%;padding-top:10px;border:0px #fff solid}
  	.head-phone-icon {display:inline-block;height:2em;vertical-align:middle;}
	.social-top {display:inline-block;text-align:right;width:20%;padding:5px 0px;border:0px #fff solid}
  	.item-right-col {margin:3em auto;max-width:300px}

  /* ====== MENU ====*/
  .posfl {float:right;width:auto}
}

/*======================== MENU ====================*/
/* CSS Document */
.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color: transparent /*transparent for small dropshadow header*/; 
	text-align: center;  /* Used to Center the UL in a div */
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right; /*for small dropshadow header*/
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	display: inline-block; /* Used to Center the UL in a div */
	z-index:10000;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	 /* background: rgba(0, 0, 0, 0.2); NEED IF WE AD SUB MENU ITEMS */
	}

/* Styling the links */
nav a {
	display:block;
	padding:14px 10px;	
	color:#e8e0d3 /*#000000 for small dropshadow header*/;
	font-weight: 900;
	font-size: 1.5em;
	text-decoration:none;
	/*border-left: 1px solid #ffffff; #ffffff for small dropshadow header*/
	border-left: 1px solid transparent;
	border-image: linear-gradient(to bottom, transparent, white, transparent);
	border-image-slice: 100%;
	border-image-slice: 1;
	/* background: rgba(146, 146, 146, 0.2);  NEED IF WE AD SUB MENU ITEMS */
	min-width: 100px;
}


nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
	nav a:hover { 
	background-color: black; 
	color:#e8e0d3;
	/*border-bottom: 4px solid #3f1a77;*/
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 47px; 

}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
	border:1px #ccc solid;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}
	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' '; }
li > a:only-child:after { content: ''; }


/* Media Queries --------------------------------------------- */
@media all and (max-width : 768px) {

nav span {display:none}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #000000;
		padding:14px 20px;	
		color:#e8e0d3;
		font-size:17px;
		text-decoration:none;
		border:none;
	}
.decor {border:1px black solid;box-shadow: 0 4px 8px 0 rgba(111, 152, 231, 0.8), 0 6px 8px 0 rgba(111, 152, 251, 0.5);}
	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}
	
	nav ul { width:100% }

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		border: 1px #cccccc solid;
		
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
		
	}

	nav ul ul ul a {
		padding: 0 80px;
	}
	
	nav a {background:#000000}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#e8e0d3;
		font-size:17px;
		background:#000000;		
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #000000; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #e8e0d3;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 100%;
	}
}

/* ==================== AT MEDIA FOR PHONE ETC. ======================== */
/* MOBILE PORTRAIT */
@media screen and (min-width: 0px) and (max-width: 600px){	
    /* ==== PHONE ==== */
    .phone1{display:none}
    .phone2 {display:inline-block}
    .phone2white {display:inline-block}
    .phone2white a:link, .phone2white a:visited {color:#ffffff}
}
 /* mobile landscape */
@media screen and (min-width: 601px) and (max-width: 768px){
    /* ==== PHONE ==== */
    .phone1{display:none}
    .phone2 {display:inline-block}
    .phone2white {display:inline-block}
    .phone2white a:link, .phone2white a:visited {color:#ffffff}
}