/*
 Theme Name:   She...
 Theme URI:    http://billhansondesign.com/
 Description:  Built by BHD for Liberty Laigo
 Author:       Bill Hanson
 Author URI:   http://billhansondesign.com
 Language:     HTML5
 Version:      1.2.8
*/

/****** GLOBAL STYLES ******/
body {
	margin: 0;
	padding: 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
/*** Main Menu ***/
/* Add a black background color to the top navigation */
.topnav {
    background-color: rgba(255,255,255,0);
    overflow: hidden;
	z-index: 999;
}

/* Style the links inside the navigation bar */
.topnav a {
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
/* DROPDOWN MENU */
/* Dropdown Button */
.dropbtn {
    padding: .5em 1em ;
	border-radius: 5px;
	background-color: #fff;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/*** Page Sections ***/
.top-section, .bottom-section {
	height: 50vh;
	/*margin-top: -5em;*/
}
.title {
	font-family: 'Dr Sugiyama', cursive;
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.she-line {
	line-height: 1.1em;
	text-align: center;
}
.celebrate {
	line-height: 1.5em;
	text-align: center;
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
button {
	margin: 2em auto;
	padding: .5em 1em ;
	border-radius: 5px;
	background-color: #fff;
}
 /*** BRICK TOP STYLES ***/
.brick-top .top-section {
	background-color: #b23820;
}
.brick-top .she-line {
	color: #fff;
}
.brick-top .highlight {
	color: #b23820;
}
.brick-top button, .brick-top button:hover {
	border: 1px solid #b23820 !important;
}
.brick-top button:hover {
	background-color: rgba(255, 195, 165, .15) !important;
}
.brick-top a {
	color: #b23820;
	text-decoration: none;
	text-transform: uppercase;
}
.brick-top .celebrate {
	color: #555;
}
/*** SALMON STYLES ***/
.she-title {
	color:  #fff;
	margin: auto;
	text-align: center;
}
.salmon-top .she-line {
	color: #fff;
}
.salmon-top .top-section {
	background-color: #ffc3a5;
}
.salmon-top .highlight {
	color: #ffc3a5;
}
.salmon-top button, .salmon-top button:hover {
	border: 1px solid #ffc3a5 !important;
}
.salmon-top button:hover {
	background-color: rgba(255, 195, 165, .15) !important;
}
.salmon-top a {
	color: #ffc3a5;
	text-decoration: none;
	text-transform: uppercase;
}
.salmon-top .celebrate {
	color: #555;
}
/*** GOLD TOP STYLES ***/
.gold-top .top-section {
	background-color: #c1aa62;
}

.gold-top .she-line {
	color: #fff;
}
.gold-top .highlight {
	color: #c1aa62;
}
.gold-top button, .gold-top button:hover {
	border: 1px solid #c1aa62 !important;
}
.gold-top button:hover {
	background-color: rgba(255, 195, 165, .15) !important;
}
.gold-top a {
	color: #c1aa62;
	text-decoration: none;
	text-transform: uppercase;
}
.gold-top .celebrate {
	color: #555;
}
/*** PUMPKIN TOP STYLES ***/
.pumpkin-top .top-section {
	background-color: #ea822c;
}
.pumpkin-top .she-line {
	color: #fff;
}
.pumpkin-top .highlight {
	color: #ea822c;
}
.pumpkin-top button, .pumpkin-top button:hover {
	border: 1px solid #ea822c !important;
}
.pumpkin-top button:hover {
	background-color: rgba(255, 195, 165, .15) !important;
}
.pumpkin-top a {
	color: #ea822c;
	text-decoration: none;
	text-transform: uppercase;
}
.pumpkin-top .celebrate {
	color: #555;
}
/*** BRICK BOTTOM STYLES ***/
.brick-bottom .she-line {
	color: #b23820;
}
.brick-bottom .bottom-section {
	background-color: #b23820;
}
.brick-bottom .highlight {
	color: rgba(255,255,255,.5);
}
.brick-bottom button, .brick-bottom button:hover {
	border: 1px solid #fff !important;
}
.brick-bottom button:hover {
	background-color: rgba(255, 255, 255, .5) !important;
}
.brick-bottom a {
	color: #b23820;
	text-decoration: none;
	text-transform: uppercase;
}
.brick-bottom .celebrate {
	color: #fff;
}
/*** GOLD BOTTOM STYLES ***/
.gold-bottom .she-line {
	color: #c1aa62;
}
.gold-bottom .bottom-section {
	background-color: #c1aa62;
}
.gold-bottom .highlight {
	color: rgba(255,255,255,.5);
}
.gold-bottom button, .gold-bottom button:hover {
	border: 1px solid #fff !important;
}
.gold-bottom button:hover {
	background-color: rgba(255, 255, 255, .5) !important;
}
.gold-bottom a {
	color: #c1aa62;
	text-decoration: none;
	text-transform: uppercase;
}
.gold-bottom .celebrate {
	color: #fff;
}
/*** SALMON BOTTOM STYLES ***/
.salmon-bottom .she-line {
	color: #ffc3a5;
}
.salmon-bottom .bottom-section {
	background-color: #ffc3a5;
}
.salmon-bottom .highlight {
	color: rgba(255,255,255,.5);
}
.salmon-bottom button, .salmon-bottom button:hover {
	border: 1px solid #fff !important;
}
.salmon-bottom button:hover {
	background-color: rgba(255, 255, 255, .5) !important;
}
.salmon-bottom a {
	color: #ffc3a5;
	text-decoration: none;
	text-transform: uppercase;
}
.salmon-bottom .celebrate {
	color: #fff;
}
/****** MOBILE STYLES ******/
@media only screen and (min-width: 1025px) and (orientation: landscape) {
	.title {
		width: 66%;
	}
	.celebrate {
		width: 66%;
		font-size: 2.5vh;
	}
	.she-title {
		font-size: 35vh;
	}
	.large {
		font-size: 16vh;
	}
	.medium {
		font-size: 14vh;
	}
	.small {
		font-size: 12vh;
	}
	.x-small {
		font-size: 10vh;
	}
	.xx-small {
		font-size: 8vh;
	}
}
@media only screen and (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
	.title {
		width: 70%;
	}
	.celebrate {
		width: 70%;
		font-size: 3vh;
	}
	button {
		font-size: 2vh;
	}
	.she-title {
		font-size: 35vh;
	}
	.large {
		font-size: 12vh;
	}
	.medium {
		font-size: 10vh;
	}
	.small {
		font-size: 10vh;
	}
	.x-small {
		font-size: 10vh;
	}
	.xx-small {
		font-size: 7vh;
	}
}
@media only screen and (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
	.title {
		width: 80%;
	}
	.celebrate {
		width: 80%;
		font-size: 4.5vw;
	}
	button {
		font-size: 3vw;
	}
	.she-title {
		font-size: 35vw;
	}
	.large {
		font-size: 14vw;
	}
	.medium {
		font-size: 12vw;
	}
	.small {
		font-size: 10vw;
	}
	.x-small {
		font-size: 9vw;
	}
	.xx-small {
		font-size: 8vw;
	}
}
@media only screen and (max-width: 767px) and (min-width: 320px) and (orientation: portrait) {
	.title {
		width: 80%;
	}
	.celebrate {
		width: 80%;
		font-size: 5.5vw;
	}
	button {
		font-size: 4vw;
	}
	.she-title {
		font-size: 35vw;
	}
	.large {
		font-size: 16vw;
	}
	.medium {
		font-size: 14vw;
	}
	.small {
		font-size: 12vw;
	}
	.x-small {
		font-size: 11vw;
	}
	.xx-small {
		font-size: 10vw;
	}
}
/*****************************/

.brick {
	color: #b23820;
}
.gold {
	color: #c1aa62
}
.pumpkin {
	color: #ea822c;
}