/*==---BROWSER RESET CODE TO HELP ELIMINATE INCONSISTENCIES BETWEEN BROWSERS---===*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,body,a, abbr, acronym, address, big, cite, code, iframe,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
nav, nav, output, ruby, section, summary,
time, mark{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, nav, nav, section {
	display: block;
}
/*==---END BROWSER RESET CODE---===*/


/* CLEARFIX to remove float */
div:after, article:after, footer:after, header:after, nav:after, section:after {
		content:'';
		display: block;
		clear: both;
		}


html{
	   height: 100%;
	   min-height: 100%;
	   font-size: 100% ;
		color: rgb(20,20,20);
	   -webkit-transition:  all .6s ease-in-out;
		transition:  all .6s ease-in-out;
		}
	
BODY {	
		height: 100%;
		min-height: 100%;
		margin:0;
		padding:0;
		overflow-x: hidden;
		font-family: 'Overpass','Baumans', 'Georgia', serif; 
		background-color:rgb(255,255,255);
		 -webkit-font-smoothing: antialiased;
		-webkit-transition:  all .6s ease-in-out;
		-moz-transition:  all .6s ease-in-out;
		 -ms-transition:  all .6s ease-in-out;
		  transition:  all .6s ease-in-out;
		}
							
					
/*--------------------------------------------------------------------------------------
                                      L I N K S 
/*--------------------------------------------------------------------------------------*/
	
	


a {		
		color: rgb(220,80,140);
		-webkit-transition: .6s ease-in-out;
		-moz-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
		transition: .6s ease-in-out;
		text-decoration: none;
		}

a:hover {
		color: rgb(20,20,20);
		-webkit-transition: .6s ease-in-out;
		-moz-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
		transition: .6s ease-in-out;
		}



/*--------------------------------------------------------------------------------------
                                T Y P O G R A P H Y    
 --------------------------------------------------------------------------------------*/
	
	hr:after{
	content: "◊";
	display: inline-block;
	position: relative;
	top: -0.9em;
	padding:  0 6px;
	background: rgb(255,255,255);	
	transform: rotate(-90deg);
	}

 h1{
		max-width: 40rem;
		margin: 0 auto;
		padding: 0;
		text-align: left;
		font-family:  'Norican',  Tahoma,  sans-serif;
		font-weight: 300;
		font-size: 220%;
		line-height: 130%;
		letter-spacing: 0.05vw;
		color: rgb(180,180,180);
		}
				
 h2{
		max-width: 40rem;
		margin: 4vh  auto 2vh;
		padding: 0;
		text-align: left;
		text-transform: uppercase;
		font-family: 'Overpass', Verdana;
		font-size: 120%;
		letter-spacing: 2px;
		color: rgb(150,150,150);
		background: rgba(200,240,250,0);
		}	
		
		
 h3{
		top: 0;
		max-width: 50rem;
		margin: 5vh auto;
		padding: 0;
		padding-bottom: 0;
		text-align: center;
		font-family: 'Baumans',  serif;
		font-size: 120%;
		color: rgb(57,78,81);
		}
		
 h3:before{
		display: block;
		/*content: '\2666';*/
		margin-top: 0;
		padding:  0 2rem;
		color: rgb(10,10,10);
		}
		
								
 h4{
		max-width: 40rem;
		margin:  2rem auto 0;
		text-align: center;
		text-transform: uppercase;
		font-family: 'Overpass', sans-serif;
		font-weight: 400;
		letter-spacing: 0.1vw;
		font-size: 150%;
		color: rgb(90,90,90);
		}	
				
 p{
		max-width: 40rem;
		margin: 2rem auto;
		padding: 0;
		text-align: left;
		font-family: 'Overpass';
		font-weight: 300;
		font-size: 120%;
		letter-spacing: 0.5px;
		line-height: 160%;
		color: rgb(30,30,30);
		box-sizing: border-box ;
		}
		@media  screen and (max-width: 414px){
		p{
			text-align: center;
			}
		}


/*--------------------------------------------------------------------------------------
                                	T O P M E N U   
  --------------------------------------------------------------------------------------*/
	

.topmenu{
		display:none;
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 6vh;
		border-bottom: solid 1px rgba(57,78,81,0.3);
		background-color: rgb(255,255,255);
		-webkit-transition: all 0.9s ease;
		transition: all 0.9s ease;
		z-index: 50000;
		}
		@media  screen and (max-width: 414px){
		.topmenu {
			background: rgb(220,80,140);
			}
		}

.topmenu.sticky{
		display: block;
		-webkit-transition: all 0.9s ease;
		transition: all 0.9s ease;
		z-index: 5000000;
		}

.topmenu .content{
		position:relative;
		top: 50%;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0;
		  -webkit-transform: translateY(-50%);
		 -ms-transform: translateY(-50%);
			 transform: translateY(-50%);
		}
		@media  screen and (max-width: 414px){
		.topmenu .content{
			position:relative;
			margin: 0 auto;
			}
		}

	
.topmenu  h1{
		position: absolute;
		left: 1rem;
		width: auto;
		padding:  1.5rem 0;
		color: rgb(220,80,140);
		font-size: 150%;
		white-space:nowrap;
		}	
		@media  screen and (max-width: 414px){
			.topmenu  h1{
				position: relative;
				left: 0;
				width: 80%;
				margin: auto;
				padding: 0;
				text-align: center;
				color: rgb(250,250,250);
				font-size: 120%;
				}
			}		


.topmenu ul{
		display: none;
		text-align: center;
		}
		
		
				
.topmenu.sticky ul{
		display: block;	
		}	
		@media  screen and (max-width: 414px){
			.topmenu.sticky ul{
				display: none
				}
			}			


.topmenu li {
		display:inline-block;
		padding: 0  10px;	
		list-style: none;
		font-size: 70%;
		font-family: 'Overpass', Tahoma , sans-serif;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		line-height: 120%;
		color: rgb(220,80,140);
		}
		@media  screen and (max-width: 768px){
			.topmenu li{
				font-size: 1px;
				padding: 0 2px;
				}
			}			
					
.topmenu li a{
		color: rgb(220,80,140);
		text-decoration: none;
		}
					
.topmenu li a:hover{
		font-weight:400;
		color: rgba(220,80,140,0.5);
		}
		
.topmenu li .active {	
    	color: rgba(220,80,150,0.5);
    	}


/*--------------------------------------------------------------------------------------
                                	H E A D E R  
  --------------------------------------------------------------------------------------*/


header{
		position: relative;
		width: 100vw;
		height:100vh;
		margin: 0;
		padding: 0;
		background:url(../images/pic6.jpg) center center;
		background-size:cover;
		}

header .content{
		position: relative;
		max-width: 1400px;
		margin: auto
		}
				

header  h1 {
	position: absolute;
	 left: 2rem;
	 top: 10rem;
	transform: rotate(-45deg);
	color:pink;
	font-size: 300%;
	font-style: italic;
	}
	@media  screen and (max-width: 768px){
			header  h1{
				position: relative;
				top: 50%;
				left: initial;
				margin: 0 auto;
				font-size: 250%;
				text-align: center;
				transform: rotate(0) translateY(-50%);
				}
			}
			
				
.header  h1 span{
Font-size: 180%;
vertical-align: middle;}



header  h3{
		position: relative;
		}


/*--------------------------------------------------------------------------------------
	INTRO
  --------------------------------------------------------------------------------------*/


 .intro{
 		position: absolute;
 		width: 100%;
 		bottom: 1rem;
		padding: 2rem 0;
		background: rgba(220,80,140,1);
		}
 		@media  screen and (max-width: 768px){
			 .intro{
				padding: 1rem  0;
			}
		}		

 .intro h2 {
		margin: 0 auto;
		padding: 0 2% ;
		font-size: 150%;
		text-transform: lowercase;
		color: rgb(250,250,250);
		font-weight: 400;
		text-align: center;
		}
		@media screen and (max-width: 414px){
		 .intro h2{
			font-size: 120%;
			}
		}	

.intro h2:before{
		display: block;
		margin: 0 auto  2rem  ;
		width: 100%;
		padding: 0;
		text-align: center;
		font-size: 200%;
		font-family:"Font Awesome 5 Free"; 
		font-weight: 900; 
		color: rgb(220,220,220);
		}

.intro h3 {
		display: none;
		margin: 2rem auto;
		font-size: 120%;
		}

/*--------------------------------------------------------------------------------------
                                	C O N T E N T 
  --------------------------------------------------------------------------------------*/


section{ 
		margin: 0 auto;
		padding:  4rem 0  0;
		}
		@media  screen and (max-width: 768px){
		section {
			padding:  2rem 0  0;
			}
		}

section:nth-child(even) { 
		 background:url(../imags/pic4.jpg);
		background-size:cover;
		 }
		
section:nth-child(odd){ 
		 background:url(../imags/pi2.jpg);
		background-size:cover;
		 }
		
section:first-of-type { 
		 background: rgba(140,239,226,0.6);
		 padding: 2rem 0;
		 }
		 
section:last-of-type{ 
		padding-bottom: 20vh;
		}		
		
						
section:after, 
article:after{
		content: '';
		display: block;
		clear: both;
		}		
	

section a{
		color: rgb(220,80,140);
		}	


section a:hover {
		color: rgb(20,20,20);
		-webkit-transition: .6s ease-in-out;
		-moz-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
		transition: .6s ease-in-out;
		}	


section .content{
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 1rem;
		}			
		
	
section h1{
		font-family:
		}
		@media  screen and (max-width: 768px){
			section h1{
				margin: 2rem auto 0rem;
				text-align: center
				}
			}

section img {
		max-width: 1500px;
		margin: auto;
}

		
 article{
		margin: 0 auto;
		}	

.center {
		text-align: center;
	}	
	
.left {
		text-align: left;
	}	
	
.right {
		text-align: right;
	}	
				
/*--------------------------------------------------------------------------------------
	TEXT
  --------------------------------------------------------------------------------------*/

section .text{
		display: inline-block;
		width: 45%;
		margin: 0  auto;
		padding:  0 2rem;
		vertical-align: top;
		}	
		@media  screen and (max-width: 414px){
			section .text{
				display:block;
				width: 100%;
				max-width: 40rem;
				margin: 0 auto;
				padding: 0 0.5rem;
				text-align: center;
				}
			}	

section:nth-child(even) .text{ 
		 float: left;
		 }
		@media  screen and (max-width: 414px){
		section:nth-child(even) .text{ 
			float: none;
			}
		 }

section:nth-child(odd) .text{ 
		 float: right;
		 }
		@media  screen and (max-width: 414px){
		section:nth-child(odd) .text{ 
			float: none;
			}
		 }		
/*--------------------------------------------------------------------------------------
	OTHER
  --------------------------------------------------------------------------------------*/

 .other{
		display: inline-block;
		width: 52%;
		margin:  0 auto ;
		padding:  0;
		}	
		@media  screen and (max-width: 414px){
			.other{
				display: block;
				width: 100%;
				margin: 0 auto;
				}
			}	

section:nth-child(even) .other{ 
		 float: right;
		 text-align: center;
		 }
		@media  screen and (max-width: 414px){
			section:nth-child(even) .other{ 
				float: none;
				}
			}

section:nth-child(odd) .other{ 
		 float: left;
		 text-align: center;
		 }
		@media  screen and (max-width: 414px){
			section:nth-child(odd) .other{ 
				float: none;
				}
			}

.other img {
		display: block;
		width: 100%;
		margin: 0 auto;
		}


/*--------------------------------------------------------------------------------------
	CLEARFIX - clearing float on 'OTHER' and 'TEXT' 
  --------------------------------------------------------------------------------------*/


.clearfix:after{
		display: block;
		content:'';
		clear: both;
		}




/*--------------------------------------------------------------------------------------
	ACCORDION PANEL
  --------------------------------------------------------------------------------------*/

.panel {
		position: relative;
		margin: 0 auto ;
		margin-bottom: 0;
		padding: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height .4s ease-out;
		}					

/*--------------------------------------------------------------------------------------
                                	BUTTONS 
  --------------------------------------------------------------------------------------*/

button{
		border: 0;
		background: 0;
		text-shadow: 0;
		}
		
/*--------------------------------------------------------------------------------------
    BUTTON.PINKLINK
  --------------------------------------------------------------------------------------*/


		
button.pinklink{
		margin: 2rem auto;		
		padding: 10px;
		color: rgb(255,255,255);
		font-size: 100%;
		font-weight: 300;
		text-transform: uppercase;
		text-align: center;
		font-family: 'Overpass', Verdana;
		font-size: 120%;
		letter-spacing: 2px;
    border-radius: 500px;
		background: rgb(220,80,140)!important;
		-webkit-transition: .6s ease-in-out;
		transition: .6s ease-in-out;
		text-decoration: none;
		}


button.pinklink a{		
		color: rgba(250,250,250,1);
		}

button.pinklink:hover a{
		color: rgba(250,250,250,0.7);
		}



/*--------------------------------------------------------------------------------------
	SLIDE-IN MENU
/*--------------------------------------------------------------------------------------*/

button#more{
		position: absolute;
		top: 0;
		right:260px;
		font-size: 200%;
		background: rgb(255,255,255);
		}

.slide-in {
		position: fixed;
		right: -250px;
		top: 0;
		width: 250px;
		height: 100%;
		margin: auto;
		z-index: 100000000;
		transition: all 2s ease;
		}

.slide-in .wrap{
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		padding: 2rem  0;
		background:rgba(220,80,140,1);
		}

.slide-in .content{
		position: relative;
		margin: 0 auto;
		width: 98%;
		overflow: scroll;
		}
		@media screen and (max-width:414px){
			.more .content{
				width:100%
				}
			}

.slide-in .content:after{
		content: '';
		display: block;
		clear: both;
		}
		
			
.slide-in .content .bit{
		position: relative;
		width: 90%;
		padding: 0.8em;
		text-align: center;
		border-bottom: 1px solid rgba(200,200,200,0.5);
		}
		@media screen and (max-width:414px){
			.more .content .bit{
				width:100%;
				}
			}

.slide-in .content .bit a{
		color: rgb(250,250,250);
		}

.open {
		right: 0;
		}


.slide-in h3 {
		height: 100%;
		padding: 0 1rem;
		color:rgb(220,220,220);
		font-weight: 300;
		font-size:120%;
		letter-spacing: 0.06rem;
		float: left;
		}
		@media screen and (max-width:414px) {
			.more h3{
				width:100%;
				height: auto;
				padding: 1rem 0;
				float: none;
				text-align: center;
				border-bottom:  1px solid rgba(200,200,200,0.5);
				}
			}


.slide-in-logo{
	width: 110px;
	height: 110px;
	margin: 2rem auto 0 ;
	background: url(../images/WRD_NoBorder_White_250.png);
	background-size: contain;
	filter: invert(100%) grayscale(100%);
	}


/*--------------------------------------------------------------------------------------
                                	F O O T E R 
  --------------------------------------------------------------------------------------*/


footer{
		position: relative;
		height: auto;
		width: 100%;
		margin:  0;
		padding: 0;
		border-top:solid 0;
		background-color: rgba(220,80,140,1);
		z-index: 20000000;
		}
		@media  screen and (max-width: 414px){
			footer{
				position: fixed;
				bottom: 0;
				height: auto;
				}
			}

		
footer .content{
		position: relative;
		width: 100%;
		max-width: 1400px;
		height: 100%;
		margin:  0 auto;
		padding:  0;
		text-align: center;
		}


.topmenu ul{
		text-align: center;
		}
		
					
footer  li {
		display:inline-block;
		padding: 0  10px;	
		list-style: none;
		font-size: 70%;
		font-family: 'Overpass', 'Helvetica Neue', sans-serif;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		line-height: 120%;
		color: rgb(220,80,140);
		}
		@media  screen and (min-width: 415px){
			footer li{
				display: none
				}
			}			
					
footer  li a{
		color: rgb(220,80,140);
		text-decoration: none;
		}
					
footer  li a:hover{
		font-weight:400;
		color: rgba(220,80,140,0.5);
		}
		
footer  li .active {	
    	color: rgba(220,80,150,0.5);
    	}

footer .socialmedia{
		margin: 0  auto ;
		padding: 1rem 0 3rem;
		}
		@media  screen and (max-width: 414px){
		footer .socialmedia{
				padding: 1rem 0 2rem;
				}
			}	

 footer  i{
		display: inline-block;
		margin: 0 1rem;
		font-size: 150%;
		color: rgb(60,60,60);
		-webkit-transition: .6s ease-in-out;
		-moz-transition: .6s ease-in-out;
		-ms-transition: .6s ease-in-out;
		transition: .6s ease-in-out;
		}
		@media  screen and (max-width: 414px){
		footer i{
			font-size: 95%;
			margin: 0 0.6rem;
			padding-bottom: 0;
			}
		}	

 footer  i:hover{
		color: rgb(250,250,250);
		}
		
footer .copyright {
		position: absolute;
		bottom: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
 		 -ms-transform: translateX(-50%);
 		transform: translateX(-50%);
 			 }	
 			 @media  screen and (max-width: 414px){
				footer .copyright{
				 display: none;
				}
			}	

			
footer .copyright h1{
		margin: 0 auto 1rem;
		text-align: center;
		font-size:  50%;
		font-weight: 300;
		font-family: 'Georgia', serif;
		color: rgb(240,240,240);
		}

footer .copyright h1:before{	
		content: '\00a9';
		font-size: 20%;
		vertical-align: middle;
		}