@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 {
  background: white;
  height: 100%;
  width: 100%;
}



/* MENU */

#home {
	height: 90px;
	width:90px;
	display: block;
	position: absolute;
	margin: 75px 0 0 56px;
	cursor: pointer;
	z-index: 11;
}


.my-name {
	font-family: TabacMonoBold;
	font-size: 1.5em;
	color: #3A3A3A;
	line-height: 1em;
	display: block;
	position: absolute;
	margin: 50px 0 0 20px;
}


.square {
	height: 90px;
	width: 90px;
	background-color: #F7EF42;
	display: block;
	position: absolute;
	margin: 75px 0 0 56px;
	mix-blend-mode: multiply;
	transition: height 2s;
	z-index: 1;
}


.square:hover {
	height: 363px;
}



.gd {
	font-family: TabacSansLight;
	font-size: 1em;
	color: #3A3A3A;
	transform: rotate(90deg);
	display: block;
	position: absolute;
	margin: 150px 0 0 65px;
}



#about-margin {
	margin-top: 280px; 
}


.nav ul {
    *zoom:20;
    list-style:none;
    margin:0;
    padding:0;
}


.nav a {
    font-family: TabacMonoBold;
	font-weight: bold;
	font-size: 1em;
	color: #3A3A3A;
	display:block;
    line-height:1.5em;
	
}
.nav a:hover {
    text-decoration:none;
	font-family: TabacSansLight;
	font-size: 1em;
	color: #3A3A3A;
}
.nav li ul {
}
.nav li ul li {
    width:500px;
}
.nav li ul a {
    border:none;
}
.nav li ul a:hover {
}

.nav ul li a {
	display: block;
	position: relative;
	margin: 5px 0 0 -38px;
	z-index: 1;
}
.nav li ul li {
    overflow:hidden;
    height:0;
    -webkit-transition:height 200ms ease-in;
    -moz-transition:height 200ms ease-in;
    -o-transition:height 200ms ease-in;
    transition:height 200ms ease-in;
}
.nav ul > li:hover ul li {
    height:0px;
}




/* SIDE BAR */

.vl {
    border-left: 2px solid #3A3A3A;
	opacity: 0.8;
    height: 440px;
	display: block;
	position: absolute;
	margin: 0 0 0 200px;
}



/* SOCIAL MEDIA ICONS */

.sm {
	height: 40px;
	width: auto;
	z-index: -1;
}


div#sm-be {
	height: 30px;
	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: 30px;
	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: 30px;
	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;
}



/* SECTIONS */

.top-row {
	margin-top: 5%;
}

.lower-row {
	margin-top: 2%;
}

.container {
	position: relative;
    width: 50%;
	cursor: pointer;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
	color: #3A3A3A;
  font-size: 2.5em;
font-family: TabacMonoBold;	
  text-align: center;
	line-height: 7.5em;
	height: 100%;
	width: 91%;
}

.container:hover .image {
  opacity: 0.3;
}


.container:hover .middle {
  opacity: 1;
	background-color: #F7EF42;
	mix-blend-mode: multiply;
}

.text {
}

#blanck {
	background-color: white;
	height: 200px;
	width: 100%;
}




/* MEDIA QUERRY */

@media (min-width: 768px) and (max-width: 1399px) {

	/* SECTIONS */


.middle {
  font-size: 2.2em;
}
	

}


@media (min-width: 768px) and (max-width: 1199px) {

	/* SECTIONS */


.middle {
  font-size: 2em;
	line-height: 8em;
	height: 100%;
	width: 88%;
}
	
	#blanck {
	height: 250px;
	width: 100%;
}
	
}




@media (min-width: 768px) and (max-width: 1024px) {
/* SOCIAL MEDIA ICONS */

.sm {
	height: 40px;
	width: auto;
	z-index: -1;
}


div#sm-be {
	height: 25px;
	width: 25px;
	margin-left: 20px;
}



div#sm-insta {
	height: 25px;
	width: 26px;
	margin-right: 10px;
	margin-left: 60px;
}


div#sm-in {
	height: 25px;
	width: 25px;
	margin-right: 10px;
	margin-left: 100px;
}
	
	
	
	/* SECTIONS */


.middle {
  font-size: 1.5em;
	line-height: 8.5em;
	height: 100%;
	width: 88%;
}
	
	#blanck {
	height: 280px;
	width: 100%;
}
}




@media (min-width: 768px) and (max-width: 991px) {
	
	#home {
	height: 70px;
	width: 70px;
	margin: 70px 0 0 45px;
	}
	
	.my-name {
	font-size: 1em;
	margin: 50px 0 0 20px;
}
	
	.square {
	height: 70px;
	width: 70px;
	margin: 70px 0 0 45px;
}


.square:hover {
	height: 275px;
}



.gd {
	font-size: 0.8em;
	margin: 125px 0 0 50px;
}


.nav a {
	font-size: 0.8em;
    line-height:1em;
	
}
.nav a:hover {
	font-size: 0.8em;
}



.nav ul li a {
	margin: -40px 0 0 -38px;
}



/* SIDE BAR */

.vl {
    height: 345px;
	margin: 0 0 0 160px;
}



/* SOCIAL MEDIA ICONS */

.sm {
	height: 40px;
	width: auto;
	z-index: -1;
}


div#sm-be {
	height: 25px;
	width: 25px;
	margin-left: 20px;
}



div#sm-insta {
	height: 25px;
	width: 26px;
	margin-right: 10px;
	margin-left: 60px;
}


div#sm-in {
	height: 25px;
	width: 25px;
	margin-right: 10px;
	margin-left: 100px;
}



/* SECTIONS */


.middle {
  font-size: 1.5em;
	line-height: 8.5em;
	height: 100%;
	width: 88%;
}
	
		#blanck {
	height: 220px;
	width: 100%;
}


}


@media (min-width: 768px) and (max-width: 884px) {
	

.square:hover {
	height: 220px;
}

#about-margin {
	margin-top: 200px; 
}
	

.nav a {
		line-height: 6em;
	}
	

.nav ul li a {
	margin: -60px 0 0 -38px;
}



/* SIDE BAR */

.vl {
    height: 290px;
	margin: 0 0 0 145px;
}



/* SOCIAL MEDIA ICONS */

.sm {
	height: 40px;
	width: auto;
	z-index: -1;
}


div#sm-be {
	height: 25px;
	width: 25px;
	margin-left: 20px;
}



div#sm-insta {
	height: 25px;
	width: 26px;
	margin-right: 10px;
	margin-left: 60px;
}


div#sm-in {
	height: 25px;
	width: 25px;
	margin-right: 10px;
	margin-left: 100px;
}



/* SECTIONS */


.middle {
  font-size: 1.2em;
	line-height: 9em;
}

		#blanck {
	height: 200px;
	width: 100%;
}

}


@media (min-width: 378px) and (max-width: 767px) {
	
#home {
	height: 70px;
	width: 70px;
	margin: 50px 0 0 45px;
	}
	
	
	.my-name {
	font-size: 1em;
	margin: 32px 0 0 20px;
}
	
	.square {
	height: 70px;
	width: 70px;
	margin: 50px 0 0 45px;
}


.square:hover {
	height: 195px;
}



.gd {
	font-size: 0.7em;
	margin: 105px 0 0 55px;
}


#about-margin {
	margin-top: 180px; 
}
	

.nav a {
	font-size: 0.8em;
		line-height: 6em;
	}
	
	.nav a:hover {
	font-size: 0.8em;
}

.nav ul li a {
	margin: -60px 0 0 -38px;
}



/* SIDE BAR */

.vl {
    height: 245px;
	margin: 0 0 0 135px;
}



/* SOCIAL MEDIA ICONS */

.sm {
	height: 40px;
	width: auto;
	z-index: -1;
}


div#sm-be {
	height: 25px;
	width: 25px;
	margin-left: 20px;
}



div#sm-insta {
	height: 25px;
	width: 26px;
	margin-right: 10px;
	margin-left: 60px;
}


div#sm-in {
	height: 25px;
	width: 25px;
	margin-right: 10px;
	margin-left: 100px;
}



/* SECTIONS */


.middle {
  font-size: 1.2em;
	line-height: 7.5em;
}
	
		#blanck {
	height: 100px;
	width: 100%;
}


}




@media (min-width: 378px) and (max-width: 675px) {
	

	.my-name {
	font-size: 1em;
	margin: 32px 0 0 20px;
}
	
	.square {
	height: 70px;
	width: 70px;
	margin: 50px 0 0 45px;
}


.square:hover {
	height: 155px;
}



.gd {
	font-size: 0.6em;
	margin: 105px 0 0 60px;
}


#about-margin {
	margin-top: 145px; 
}
	

.nav a {
	font-size: 0.8em;
		line-height: 6em;
	}
	
	.nav a:hover {
	font-size: 0.8em;
}

.nav ul li a {
	margin: -60px 0 0 -38px;
}



/* SIDE BAR */

.vl {
    height: 208px;
	margin: 0 0 0 125px;
}



/* SOCIAL MEDIA ICONS */

.sm {
	height: 40px;
	width: auto;
	z-index: -1;
}


div#sm-be {
	height: 25px;
	width: 25px;
	margin-left: 20px;
}



div#sm-insta {
	height: 25px;
	width: 26px;
	margin-right: 10px;
	margin-left: 60px;
}


div#sm-in {
	height: 25px;
	width: 25px;
	margin-right: 10px;
	margin-left: 100px;
}



/* SECTIONS */


.middle {
  font-size: 1.2em;
	line-height: 6.5em;
}


}



@media (min-width: 378px) and (max-width: 630px) {
	


.square:hover {
	height: 130px;
}






#about-margin {
	margin-top: 125px; 
}
	





/* SIDE BAR */

.vl {
    height: 180px;
	margin: 0 0 0 125px;
}





/* SECTIONS */


.middle {
  font-size: 1em;
	line-height: 7.5em;
}

		#blanck {
	height: 100px;
	width: 100%;
}

}

@media (max-width: 575px) {
	
	
	/* MENU */

#home {
	height: 40px;
	width:40px;
	margin: -100px 0 0 0;
}


.my-name {
	visibility: hidden;
}


.square {
	height: 40px;
	width: 40px;
	margin: -100px 0 0 0;
	background-color: rgba(0,0,0,0);
	background-size: 100%;
	background-image: url("../image/favicon-13.png");
	background-repeat: no-repeat;
}



.gd {
	visibility: hidden;
}



#about-margin {
	margin: 35px 0 0 100px;
	float: left;
	display: block;
	position: absolute;
	width: 100px;
}

	#contact-margin {
		margin: -25px 0 0 150px;
		float: left;
	display: block;
	position: absolute;
	width: 100px;
	}



.nav a {
	font-size: 1em;	
}
	
.nav a:hover {
	font-size: 1em;
}





/* SIDE BAR */

.vl {
    border-left: 0.5px solid #3A3A3A;
	opacity: 0.8;
    height: 300px;
	display: block;
	position: absolute;
	margin: -190px 0 0 85px;
	transform: rotate(90deg)
}

	
	
	
	/* SOCIAL MEDIA ICONS */

.sm {
	display: block;
	position: absolute;
	margin: 270px 0 0 -20px;
	padding-bottom: 50px;
}



	
	/* SECTIONS */
	

.top-row {
	margin-top: 25%;
}

.lower-row {
	margin-top: 2%;
}

.container {
	position: relative;
    width: 50%;
	cursor: pointer;
}


.middle {
  font-size: 1.5em;
	line-height: 9.5em;
	
}
	
	#branding {
		margin: 4% 0 0 -1px;
	}
	
	
	#blanck {
	visibility: hidden;
	height: 20px;
	z-index: -4;
			
}
	
}




@media (max-width: 450px) {
	
	
	/* MENU */

#home {
	
	margin: -70px 0 0 0;
}





.square {
	
	margin: -70px 0 0 0;
	
}


.vl {
    border-left: 0.5px solid #3A3A3A;
	opacity: 0.8;
    height: 300px;
	display: block;
	position: absolute;
	margin: -170px 0 0 85px;
	transform: rotate(90deg)
}


	
	/* SOCIAL MEDIA ICONS */

.sm {
	
	margin: 220px 0 0 -20px;
	
	padding-bottom: 50px;
}


	
	.top-row {
	margin-top: 25%;
}

	
	/* SECTIONS */
	

.middle {
  font-size: 1.5em;
	line-height: 7em;
	
}
	
	
}




@media (max-width: 377px) {
	
	
	/* MENU */

#home {
	height: 40px;
	width:40px;
	margin: -40px 0 0 0;
}


.my-name {
	visibility: hidden;
}


.square {
	height: 40px;
	width: 40px;
	margin: -70px 0 0 0;
	background-color: rgba(0,0,0,0);
	background-size: 100%;
	background-image: url("../image/favicon-13.png");
	background-repeat: no-repeat;
}



.gd {
	visibility: hidden;
}



#about-margin {
	margin: 5px 0 0 100px;
	float: left;
	display: block;
	position: absolute;
	width: 100px;
}

	#contact-margin {
		margin: 10px 0 0 150px;
		float: left;
	display: block;
	position: absolute;
	width: 100px;
	}



.nav a {
	font-size: 1em;	
}
	
.nav a:hover {
	font-size: 1em;
}





/* SIDE BAR */

.vl {
    border-left: 0.5px solid #3A3A3A;
	opacity: 0.8;
    height: 300px;
	display: block;
	position: absolute;
	margin: -170px 0 0 85px;
	transform: rotate(90deg)
}

	
	
	/* SOCIAL MEDIA ICONS */

.sm {
	display: block;
	position: absolute;
	margin: 200px 0 0 -20px;
	
	padding-bottom: 50px;
}



	
	/* SECTIONS */
	

.top-row {
	margin-top: 25%;
}

.lower-row {
	margin-top: 2%;
}

.container {
	position: relative;
    width: 50%;
	cursor: pointer;
}


.middle {
  font-size: 1em;
	line-height: 8.5em;
	
}
	
	#branding {
		margin: 8% 0 0 -1px;
	}
	
	
}