@charset "utf-8";
/* CSS Document */



@font-face {
    font-family: TabacMonoBold;
    src: url(../font/TabacMonoBold.otf);
}

@font-face {
    font-family: TabacSansBold;
    src: url(../font/TabacSansBold.otf);
}

@font-face {
    font-family: TabacSansLight;
    src: url(../font/TabacSansLight.otf);
}

.max-width {
	max-width: 1366px;
}

html {
  height: 100%;
}
body {
 
  height: 100%;
  width: 100%;
}


li {
	text-decoration: none;
	list-style-type: none;
}

#logo-pp {
	margin: 15px 0 15px 0;
}

/*.navbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}*/

.navbar {
	height: 85px;
	overflow: hidden;
	position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
	background-color: white;
}

#menu-pp {
	position: absolute;
	width: 300px;
	height: auto;
	margin: 0 0 0 50px;
}

#menu-pp a {

	font-family: TabacMonoBold;
	font-weight: bold;
	font-size: 1em;
	color: #3A3A3A;
	display:block;
    line-height:1.5em;
	margin-right: 20px;
	
	float: left;
	
}

#menu-pp a:hover {
    text-decoration:none;
	font-family: TabacSansLight;
	font-size: 1em;
	color: #3A3A3A;
}


.sm {
	width: 145px;
	height: auto;
	position:relative;
	margin-top: 30px;
}

.sm-be {
	height: 60px;
	width: 30px;
	display: block;
	position: absolute;
	margin-left: 20px;
	bottom: 0px;
	float: left;
}

div.sm-be {
	background-size: 100%;
	background-image:url(../image/sm-12.jpg);
	background-repeat: no-repeat;	
}

div.sm-be:hover {
	cursor: pointer;
	background-size: 100%;
	background-image: url(../image/sm-active-10.png);
	background-repeat: no-repeat;
}


div.sm-insta {
	height: 60px;
	width: 30px;
	display: block;
	position: absolute;
	bottom: 0px;
	margin-right: 10px;
	margin-left: 68px;
	float: left;
}

div.sm-insta {
	background-size: 103%;
	background-image:url(../image/sm-11.jpg);
	background-repeat: no-repeat;	
}

div.sm-insta:hover {
	cursor: pointer;
	background-size: 100%;
	background-image: url(../image/sm-active-11.png);
	background-repeat: no-repeat;
}


div.sm-in {
	height: 60px;
	width: 30px;
	display: block;
	position: absolute;
	bottom: 0px;
	margin-right: 10px;
	margin-left: 115px;
	float: left;
}

div.sm-in {
	background-size: 100%;
	background-image:url(../image/sm-10.jpg);
	background-repeat: no-repeat;	
}

div.sm-in:hover {
	cursor: pointer;
	background-size: 100%;
	background-image: url(../image/sm-active-12.png);
	background-repeat: no-repeat;
}


#hr {
	height: 2px;
	width: 100%;
	background-color: #3A3A3A;
	opacity: 0.8;
}




/* HERO */

.section-hero {
}


.parallax {
  height: 100%;
}


#hero-img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8%;
}


#hero-vid {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8%;
	height: auto;
	width: 80%;
	
}


.description {
	height: auto;
	width: 80%;
	position: fixed;
	margin-top: 2%;
}

.description h1 {
	color: #3A3A3A;
	font-size: 2.5em;
	font-family: TabacMonoBold;
}

.description p {
	font-family: TabacSansLight;
	font-size: 1em;
	color: #3A3A3A;
}

.transition {
	margin-top:13%;
	height:400px;
	background-color:#F7EF42;
}


.photos {
	width: 100%;
	height: auto;
	margin: 0 auto;
}



.space { 
	height: 50px;
	width: 100%;
  clear: both;

}

.photo-container {
	width: 100%;
	height: auto;
	margin-top: -18%;
	
	
}


.photo-box img {
	width: 45%;
	height: auto;
	float: left;
}


#signature {
	width: 400px;
	height: 80px;
	margin: 0 auto;
	font-family: TabacSansLight;
	text-align: center;
	line-height: 4em;
	font-size: 1em;
	color: #3A3A3A;
	background-color: #F7EF42;
}

 


	
/* MEDIA QUERRY */


/* MEDIA QUERRY */


/* MEDIA QUERRY */


/* MEDIA QUERRY */


@media (min-width: 768px) and (max-width: 1440px) {

	.transition {
	margin-top:18%;
	height:300px;
}
	
#hero-vid {
	margin-top: 12%;
	
}

}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 1399px) {



}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 1199px) {

	
	
}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 1024px) {

	#hero-img {
	margin-top: 12%;
}
	
	.description {
	margin-left: 8%;
}
	
		.transition {
	margin-top:22%;
	height:300px;
}
	
}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 991px) {
	
	
	
}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 884px) {
	
	
	
}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 768px) {
	
#hero-img {
	margin-top: 15%;
}
	
	.description h1 {
	font-size: 2em;
}
	
	.transition {
	margin-top:30%;
	height:200px;
}
	
	#hero-vid {
	margin-top: 15%;
	
}
	
	
}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 378px) and (max-width: 675px) {
	
	
	
}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 378px) and (max-width: 630px) {
	


}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 575px) {
	
	#menu-pp {
	width: 200px;
	margin: 10px 0 0 30px;
}
	
	.sm {
	margin-top: -15px;
}
	
	#hr {
	visibility: hidden;
}

	#hero-img {
	margin-top: 25%;
}
	
		.description {
	margin-left: 8%;
}
	
		.description h1 {
	font-size: 1em;
}
		.description p {
	font-size: 0.8em;
}
	
	.transition {
	margin-top:60%;
	height:100px;
}
	
	.space { 
	height: 15px;

}
	
	#signature {
	width: 200px;
	height: 70px;
	line-height: 1.5em;
	font-size: 0.8em;
}
	
		#hero-vid {
	margin-top: 24%;
	
}
	
}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 450px) {
	
	
	
}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 377px) {
	
	
		.transition {
	margin-top:70%;
}
	
		#hero-vid {
	margin-top: 30%;
	
}
	
}


/* -------------------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 320px) {
	
		#menu-pp {
	visibility: hidden;
}
	
	#hero-img {
	margin-top: 35%;
}
	
			.description p {
	font-size: 0.6em;
}
	
		.transition {
	margin-top:65%;
}
	
}


/* -------------------------------------------------------------------------------------------------------------------------------*/