html{
       height: 100%;
}

	


BODY {	
		height: 100%;
		min-height: 100%;
		margin:0;
		padding:0;
		font-family: "Open Sans", sans-serif; 
		font-size: 16px;
		background:rgb(255,255,255);
		background-size: 100%;
		background-attachment: fixed;
		}
		
		
header, section, article{
display: block;
}	
	
	
img{
		margin: 0;
		padding: 0;
		border: 0;
		}




/*TYPOGRAPHY*/

h1,h2,h3,h4,p {		
		position: relative;
		z-index: 15;
		}





	
	
/*===============--LINKS--===============*/

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


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



/*============--MAIN CONTENT--============*/	

		
#sidebar{
		position: fixed;
		top: 0;
		right: 0;
		width: 15%;
		height: 100%;
		text-align: center;
		background: rgba(50,50,50,1);
		z-index: 400;
		}



.menu{
		top: 20px;
		width: 90%;
		min-width: 150px;
		margin: auto;
		text-align: center;
		border: dotted 1px rgb(150,150,150);
		border-radius: 2%;	
}	
		

.menu ul{
		margin-left: -10%;
		margin-right: 10%;
		list-style: none;
}

.menu li {
		position: relative;
		display: block;
		margin:  0 auto;
		padding: 15% 0;
		list-style: none;
		font-family:"LIBRE BASKERVILLE",serif;
		font-weight: 300;
		font-size: 1em;
		text-align: center;
		background: url(../images/cog3.png) no-repeat center bottom;
		background-size: 7%;
}

.menu li:last-of-type {
		padding-bottom: 30%;
		background: url(../images/scroll1.png) no-repeat center bottom;
		background-size: 30%;

}

.menu li a{
		font-weight:300;
		color: rgb(220,220,220);
		text-decoration: none;
		text-transform: uppercase;
		}

.menu li a:hover{
		text-decoration:none;
		color: rgb(250,250,250);
}


.menu p{
		color: rgb(220,220,220);
		font-size: 80%;
}

.socialmedia{
		padding-bottom: 50px;
		background: url(../images/scroll_white.png) no-repeat center bottom;
		background-size: 30%;
		
}


.socialmedia img{ 
		width: 18%;
		max-width: 35px;
		}





.header{
		position: relative;
		height: 100%;
		min-height: 100%;
		border-bottom: dotted 2px rgb(10,10,10);
		background: rgb(255,255,255) 
		url(../images/FatherWilliam900.png) no-repeat 70% 90%;
		background-size: 45%;
		}


header h1{
		position: relative;
		top:12%;
		left: 5%;
		width: 40%;
		max-width: 1000px;
		margin:0;
		padding:  2.3em 2.5em;
		text-align: left;
		font-family: "Open Sans", sans-serif;
		font-size: 4em;
		color: rgb(40,40,40);
		background: rgba(255,255,255,0) 
		url(../images/ContrariwiseHeader2.png) no-repeat left center;
		background-size: contain;
		}

header h1 span{
		display: none;
		}



header h1 img{
		width: 40%;
		max-width: 900px;
		min-width: 400px;
		}

header h2{
		position: relative;
		top: 15%;
		left: 8%;
		max-width: 800px;
		margin: 0;
		padding: 0;
		font-family: "Open Sans", sans-serif;
		font-weight: 300;
		font-size: 2.6em;
		letter-spacing: -0.01em;
		color: rgb(10,10,10);
		border: solid 0 rgba(255,255,255,0.4);
		background: rgba(40,40,40,0);
		}


header h2 span{
		display: block;
		white-space: nowrap;
		font-weight: 300;
		font-style: italic;
		font-size: 1.2em;
		font-family: "Libre Baskerville", serif;
		line-height: 110%;
		color: rgb(0,150,140);
		}




.parallax {
  		height: 600px;
  		background-position: 50% 50%;
  		background-repeat: no-repeat;
  		background-attachment: fixed;
  		-webkit-background-size: contain;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
}


.parallax h1{
		position: relative;
		top: 40%;
		margin: 0 auto;
		padding-right: 15%;
		text-align: center;
		font-size: 7em;
		font-weight: 300;
		color: rgb(255,255,255);
}

.parallax-1 {
  		background-image: url(../images/LC.jpg);
}
.parallax-2 {
  		background-image: url(../images/LC2.jpg);
}
.parallax-3 {
  		background-image: url(../images/LC3.jpg);
}

.parallax-4 {
  		background-image: url(../images/LC.jpg);

}

.parallax-5 {
  		background-image: url(../images/LC2.jpg);
}

.parallax-6 {
  		background-image: url(../images/LC3.jpg);
}


.section{
		position: relative;
		min-height: 100%;
		margin: 0 auto;
		padding:  8% 10%;
		padding-right: 25%;
		border: 2px 0;
		outline: 2px  solid rgb(200,200,200);
		border-bottom: dotted 2px rgb(10,10,10);
		border-top: dotted 2px rgb(10,10,10);
		background-color: rgba(255,255,255,1);
		background-image: url(../images/cogs.png), url(../images/cogs2.png);
		background-repeat: no-repeat, no-repeat;
		background-size:  5%, 5%;
		background-position:  42.5% 0, 42.5% 99%;
		}

.section h1{
		font-size: 400%;
		font-weight: 300;
		text-align: center;
		color: rgb(200,200,200);
}

.section h2{
		font-size: 200%;
		font-weight: 400;
		text-align: center;
}

.section h2 span{
		display: block;
		font-family: "Libre Baskerville", serif;
		font-size: 60%;
		font-weight: 400;
		line-height: 170%;
		}

.section h2 a{
		font-weight: 500;
		}

.section h3{
		font-size: 180%;
		font-weight: 600;

}

.section p{
		font-size: 150%;
		text-align: left;
		line-height: 150%;
		
}



	
article{
		position: relative;
		width: 75%;
		max-width: 900px;
		margin: 0 auto;
		padding: 1% 3%;
		text-align: center;
		border: dotted rgb(200,200,200);
		border-width: 2px;
		z-index: 15;
			}


#mission p{
			padding: 0 10%;
			font-weight: 300;
			}	
		

/*===============--IMAGES--===============*/





.iconlink	{
		width: 20%;
		max-width: 400px;
		min-width: 150px;
		margin: 4em auto;
		}
		

.iconlink a:link {
		opacity: 1;
		}

.iconlink a:hover{
		opacity: 0;	
		}	



.top{
		margin: 0 auto 1em;
		width: 8%
		}


img.socialmedia{
		width: 40%; 
		}



/*===============--MEDIA QUERIES--===============*/


@media screen and (max-width: 1400px) {
body{
	font-size: 95%;

}

#sidebar{
		width:20%;
		}
}


@media screen and (max-width: 1020px) {

body{
	font-size: 90%;

}


#sidebar{
		width:25%;
		}


.header{
		
		background-position: center bottom;
		background-size: 75%;
		}


.header h1{
		position: absolute;
		top:0;
		left: 0;
		width: 700px;
		height: 700px;
		margin:0;
		padding:  0;
		background-position: 0 10%;
		}

.header h2{
		top: 50%;
		left: 52px;
		width: 70%;
		margin: 0;
		padding: 0;
		font-size: 2.5em;
		}

.header h2 span{
		display: inline;
		}

.section{
		position: relative;
		min-height: 100%;
		padding-right: 33%;
		background-position: 37.5% 0, 37.5% 98%;
}

article{
		width: 90%;
}
}


/*===--MENU SHIFTS TO TOP AT 900PX--==*/

@media screen and (max-width: 900px) {

	

body {font-size: 85%;
	}
	


#sidebar{
		top: 0;
		left: 0;
		width:100%;
		height: 100px;
		padding: 0;
		text-align: left;
		z-index: 400;
		}


.menu {
		position: absolute;
		top: 40px;
		width: 100%;
		padding:0;
		border: 0;
}

.menu ul{
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;		
}			

.menu li {
		position: relative;
		display: inline-block;
		margin:  0;
		padding:  0;
		list-style: none;
		font-family:"LIBRE BASKERVILLE",serif;
		font-weight: 500;
		font-size: 1.5em;
		text-align: left;
		border: 0;
		background: none;
}


.menu li:last-of-type {
		background: none;
	}



.menu li:after {
			content: url(../images/scroll_white_20.png);
			vertical-align: sub;
			}



.menu li:last-of-type:after {
		content: none;
	}



.menu li a{
		color: rgb(220,220,220);
}



.socialmedia{
		display: block;
		position: fixed;
		top: 0;
		left: 50%;
		margin: 0;
		padding: 0;
		padding-top: 0;
		padding-left: 0;
		background: none;
		
}

.socialmedia p{
		display: none;
}


.socialmedia img {
		width: 30px;
		vertical-align: middle;
		border: 0;
}



.header{
		
		background-position: right  bottom;
		background-size: 75%;
		}


.header h1{
		position: absolute;
		top:0;
		left: 0;
		width: 700px;
		height: 700px;
		margin:0;
		padding:  0;
		background-position: 0 30%;
		}


.header h2{
		top: 50%;
		left: 52px;
		width: 60%;
		margin: 0;
		padding: 0;
		font-size: 2.5em;
		}


.header h2 span{
		font-size: 1.5em;
		}


.section{
		position: relative;
		min-height: 100%;
		padding: 10%;
		padding-right: 10%;
		background-position: 50% 0, 50% 99%;
		
}


	
.section p {
		 font-size: 160%;
}



}



@media screen and (max-width: 680px) {

body {
		font-size: 80%;
	}
	
	
.menu ul {
		margin: 0;
}

.menu li {
		font-size: 1em
}


.menu li:after {
		content: url(../images/scroll_white_5.png);
		vertical-align: 10%;
			}


.header{
		
		background-position: center bottom;
		background-size: 95%;
		}


.header h1{
		position: absolute;
		top:15%;
		left: 4%;
		width: 95%;
		min-width: 400px;
		height: 300px;
		margin:0;
		padding:  0;
		background-position: 0 60%;
		background-size 110%;
		}

.header h2{
		top: 50%;
		left: 52px;
		width: 85%;
		margin: 0;
		padding: 0;
		font-size: 2.5em;
		}

.header h2 span{
		display: inline;
}


.section{
		position: relative;
		height: auto;
		min-height: 100%;
		margin: 0 auto;
		padding: 40px 10px;
		border: 2px 0 ;
		background: none;
		}


article{
		padding: 0;
		border: 0;
		background: transparent;
}

article p{
		font-size: 150%;
		line-height: 150%;

}

#mission p{
		padding: 0;
}
}