/***** FONTS *****/



@font-face {
  font-family: "Oscine Trial XBold";
  src: url(fonts/Oscine_Trial_XBd.ttf) format("truetype");
}
@font-face {
  font-family: "Monitor Pro SemiBold";
  src: url(fonts/MonitorPro-SemiBold.otf) format("opentype");
}
@font-face {
  font-family: "Monitor Pro Light";
  src: url(fonts/MonitorPro-Light.otf) format("opentype");
}
@font-face {
  font-family: "Monitor Pro Light Italic";
  src: url(fonts/MonitorPro-LightItalic.otf) format("opentype");
}
@font-face {
  font-family: "Monitor Pro Medium";
  src: url(fonts/MonitorPro-Medium.otf) format("opentype");
}


/***** TYPOGRAPHY *****/

a{
	text-decoration: none;
}

h1{
	font-size: 77px;
  	/*line-height: 93px;*/
  	line-height: 107px; 
	font-family: Oscine Trial XBold;
	color: #28280a;
	
}

h2{
	font-size: 48px;
  	line-height: 58px; 
	font-family: Oscine Trial XBold;
	color: #28280a;
}

h2:hover{
	font-size: 48px;
  	line-height: 58px; 
	font-family: Oscine Trial XBold;
	color: #28280a;
}

h3{
	font-size: 30px;
  	line-height: 36px; 
	font-family: Monitor Pro SemiBold;
	color: #28280a;
	text-align: center; 
}

h3:hover{
	font-size: 30px;
  	line-height: 36px; 
	font-family: Monitor Pro SemiBold;
	color: #FFFFFF;
	text-align: center; 
}

p{
	font-size: 18px;
  	line-height: 22px; 
	font-family: Monitor Pro Light;
	color: #28280a;

}

.title{
	text-align: right;
	width: 100%;
	position: absolute;
	right: 10px;
	z-index: -1;
}

.align-center{
	text-align: center;
}

.pitalic{
	font-size: 14px;
  	line-height: 16px; 
	font-family: Monitor Pro Light Italic;
	color: #28280a;

}

.psemi{
	font-size: 18px;
  	line-height: 22px; 
	font-family: Monitor Pro Medium;
	color: #28280a;
}

.work-p{
	padding: 20px;
}

::selection{
	background: rgba(97, 255, 93, 1);
}

/***** NAV *****/

.nav{
	position: fixed;
	width: 80px;
	left: 10px;
	top: 10px;
	mix-blend-mode: multiply;
	z-index: 2;

}

.icon{
	width: 60px;
}


input, ul.content {  
  display: none;  
  list-style:none;  
  text-decoration: none;  
  font-weight: bolder;  
  margin-top: 15px; 
  transition: .2s; 
}

input:checked~ul.content {  
  display: block;  
  transform: translateY(-330px);
  background-color: #f5f0e6;
 
}

label {  
margin-bottom: 100px;
background-image: linear-gradient(rgba(97, 255, 93, 1), rgba(242, 237, 227, 0.7));
border-radius: 20px;
border: none;
outline: none;
box-shadow: none; 
}

/***** OBJECTS *****/



body{
background-color: #f5f0e6;
padding-left: 80px;
padding-right: 80px;
}

.rel{
	position: relative;
}
.abs{
	position: absolute;
	bottom: -0.5%;
}

.hi{
	min-height: 1080px;
	position: relative;
}

.center{
	position: absolute;
	top: 40%;
}

.h150{
	padding: 150px;
}

.pt100{
	padding-top: 100px;
}

.mt100{
	margin-top: 100px;
}

.pt20{
	padding-top: 20px;
}

.pt100m{
		padding-top: 0px;
}

.grad {
  background-image: linear-gradient(rgba(97, 255, 93, 1), rgba(242, 237, 227, 0.7));
  border-radius: 20px;
  height: 280px;
  transition: transform .2s; 
}

.grad:hover{
	z-index: 1;
	transform: scale(1.05); 

}

.img-left{
	border-radius: 20px 0px 0px 20px;
	
}


.mast{
	height: 1080px;
	position: relative;
}

.blend{
  mix-blend-mode: multiply;
  max-height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
}

.multiply{
	mix-blend-mode: multiply;
}

.youtubevid{
		height: 800px;
	}

/*           ######DISPLAY######               */

.mobile{
	display: none;
	visibility: hidden;
}

.desktop{
	display: block;
	visibility: visible;
}


































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

	/***** TYPOGRAPHY *****/

	a{
		text-decoration: none;
	}

	h1{
		padding-top: 20px;
		font-size: 48px;
	  	/*line-height: 93px;*/
	  	line-height: 48px; 
		font-family: Oscine Trial XBold;
		color: #28280a;
		text-align: right;
		width: 100%;
		position: absolute;
		right: 10px;
		z-index: -1;
	}

	h2{
		font-size: 36px;
	  	line-height: 44px; 
		font-family: Oscine Trial XBold;
		color: #28280a;
	}

	h2:hover{
		font-size: 36px;
	  	line-height: 44px; 
		font-family: Oscine Trial XBold;
		color: #28280a;
	}

	h3{
		font-size: 30px;
	  	line-height: 36px; 
		font-family: Monitor Pro SemiBold;
		color: #28280a;
	}

	p{
		font-size: 18px;
	  	line-height: 22px; 
		font-family: Monitor Pro Light;
		color: #28280a;

	}
	.pitalic{
		font-size: 14px;
	  	line-height: 16px; 
		font-family: Monitor Pro Light Italic;
		color: #28280a;

	}

	.psemi{
		font-size: 18px;
	  	line-height: 22px;
		font-family: Monitor Pro Medium;
		color: #28280a;
	}

	.work-p{
		padding: 20px;
	}

	/***** NAV *****/

	.nav{
		position: fixed;
		width: 80px;
		left: 10px;
		top: 10px;
		mix-blend-mode: multiply;
		z-index: 2;

	}

	.icon{
		width: 60px;
	}


	/*****  OBJECTS  *****/



	body{
	background-color: #f5f0e6;
	padding-left: 20px;
	padding-right: 20px;
	}

	.rel{
		position: relative;
	}
	.abs{
		position: absolute;
		bottom: -0.5%;
	}

	.hi{
		min-height: 600px;
		position: relative;
	}

	.center{
		position: absolute;
		top: 40%;
	}

	.h150{
		padding: 150px;
	}

	.pt100{
		padding-top: 100px;
	}

	.pt100m{
		padding-top: 100px;
	}

	.grad {
	  background-image: linear-gradient(rgba(97, 255, 93, 1), rgba(97, 255, 93, 1), rgba(242, 237, 227, 0.7));
	  border-radius: 20px;
	  height: 70%;
	  transition: transform .2s;
	  padding: 0px;
	}


	.grad:hover{
		z-index: 1;
		transform: scale(1.05); 

	}



	.bordertop{
		border-radius: 20px 20px 0px 0px;
	}

	.mast{
		height: 400px;
		position: relative;
	}

	.blend{
	  mix-blend-mode: multiply;
	  max-height: 200px;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -60%);
	}

	.multiply{
		mix-blend-mode: multiply;
	}

	.youtubevid{
		height: 300px;
	}

	/*           ######DISPLAY######               */

	.mobile{
		display: block;
		visibility: visible;
		
	}

	.desktop{

		display: none;
		visibility: hidden;
	}


}