@charset "utf-8";

body{
    font-family: 'Raleway', sans-serif;
    font-size: 3.5rem;
	font-weight: bold;
  
}

/***************parrallax top**********/

.parallax {
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	perspective: 1px;
	background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment: fixed;
    background-size: cover;
    background-image: url(images/tim-foster-BeDY9KuP0sI-unsplash.jpg);	
}

.parallax-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	/* forces scrollbars */
	padding: 100vh 0;
}

.base {
	transform: translateZ(0);
	color:#EC8615;
	width: 120%;
	margin-left:0vw;
}

.back {
	transform: translateZ(-1px) scale(1.5);
	color:#241303;
	width:120%;
	margin:auto;
}

.front {
	transform: translateZ(-1.15px) scale(2.5);
	color:#DB6254;
	width:100%;
	margin-left:20vw;
}

.top {
	transform: translateZ(-.25px) scale(1.5);
	color:darkgreen;
	width:150%;
	margin-left:-8vw;
}


.title {
	position: absolute;
	left: 45%;
	top: 50%;
	transform: translate(-60%, -60%);
	text-align: center;
}

/**************section***************/
#contain{
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    background-image: url(images/joseph-gonzalez-fdlZBWIP0aM-unsplash.jpg);
    box-sizing: border-box;
	
   
}

#content {
    margin: 10vh 24vw;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: #241303;
    background-color: rgba(240,206,168,0.65);
    padding: 50px 30px;
}
	
h1{
	font-size:2rem;
	line-height: 2.2rem;
	letter-spacing: .06rem;
	font-weight:700;
}


@media only screen and (max-width:720px){
	body{
		font-size:2.5rem;
	}
	
	.title{
		top:30%;
	}
}

@media only screen and (max-width:520px){
	body{
		font-size:2rem;
	}
	
	.title{
		top:27%;
	}
}

@media only screen and (max-width:420px){
	body{
		font-size:1.6rem;
	}
	
	.title{
		top:25%;
	}
}
