@charset "utf-8";
/* CSS Document */
.flex-container {
  display: flex;
  flex-direction: column;
}
.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 1.5vw;
  position: static;
  width: 93%;
  align-self: center;
}
.burger {
  width: 1.9vw;
  height: .2vw;
  background-color: #BEBEBE;
  margin: .5vw 0;
}
h2 {
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant-ligatures: normal;
  color: #BEBEBE;
}
a.name {
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant-ligatures: normal;
  color: #BEBEBE;
  margin-left: 2vw;
  font-size: 1.1vw;
  letter-spacing: .6vw;
}
a {
  text-decoration: none;
  color: #000000;
}
.overlay {
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 4; /* Sit on top */
  right: 0;
  top: 0;
  text-align: right;
  background-color: rgb(255, 255, 255, 1.00); /* Black fallback color */
  background-color: rgba(255, 255, 255, 0.96); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 22%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 3.5vw;
  color: #BEBEBE;
  display: block;
  transition: 0.3s;
}
a.links {
  font-family: mr-eaves-xl-modern, sans-serif;
}
.dropbtn {
  color: #bebebe;
  display: block;
  padding: 8px;
  font-size: 3.5vw;
  border: none;
  cursor: pointer;
  font-family: mr-eaves-xl-modern, sans-serif;
  text-transform: uppercase;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}
.dropdown-content a {
  text-decoration: none;
  display: block;
  font-family: mr-eaves-xl-modern, sans-serif;
  text-transform: uppercase;
  font-size: 1.5vw;
  -webkit-text-stroke: none;
}
.dropbtn:hover {
  color: #fff;
  -webkit-text-stroke-width: 0.1vw;
  -webkit-text-fill-color: rgb(255, 255, 255) -webkit-text-stroke-color: rgb(190, 190, 190, 1);
  -webkit-text-stroke: .1vw #bebebe;
}
.dropdown-content a:hover {
  color: #410F32;
}
.dropdown:hover .dropdown-content {
  display: block;
}
/* When you mouse over the navigation links, change their color */
.links:hover {
  color: #fff;
  -webkit-text-stroke-width: 0.1vw;
  -webkit-text-fill-color: rgb(255, 255, 255) -webkit-text-stroke-color: rgb(190, 190, 190, 1);
  -webkit-text-stroke: .1vw #bebebe;
}
span {
  letter-spacing: .1vw;
  line-height: .01vw;
  z-index: 2;
}
span:hover {
  font-style: italic;
}
h2.home:hover {
  font-style: italic;
}
.lock-scroll {
  overflow: hidden;
}
.plz {
  margin-top: -.5vw;
}
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
.overlay .closebtn {
  position: absolute;
  top: 15px;
  right: 45px;
  font-size: 60px;
}
p.textone {
  font-size: 1.4vw;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: 300;
  width: 54vw;
  margin: auto;
  text-align: left;
  margin-bottom: 2vw;
  line-height: 2vw;
}
.text {
  dispay: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1vw;
}
p.mockupcred {
  font-size: .65vw;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: 300;
  width: 70vw;
  margin-top: .5vw;
  color: #BEBEBE;
}
a.mockup {
  color: #BEBEBE;
}
.footer {
  display: flex;
  width: 100%;
  margin-bottom: 0.5vw;
}
.sociallinks{
	display:flex;
  flex-direction: row;
	width:100%;
	margin-top:-1.5vw;
	align-content: center;
	justify-content: center;
	align-items: center; 
  padding-top: 1.5vw;
	padding-bottom: 2vw;
  position: static;
  align-self: center;
}
p.footer {
  display: flex;
  justify-content: flex-end;
  text-align: end;
  margin-top: 0vw;
  color: #BEBEC4;
  font-family: mr-eaves-xl-modern, sans-serif;
  margin-right: 3vw;
  font-size: 1.0vw;
  padding-top: 1.5vw;
}
.linkhover:hover{
	color:#BEBEBE;}


a.fa {
	display:block;
	padding:0;
	text-align: center;
  margin: 5px, 4px;
	align-self: center;
	background: #BEBEBE;
	
}

a.fa:hover {
    opacity: 0.7;
}
a.fa-behance {
	display:flex;
	flex-direction: column;
	justify-content:center;

  color: white;
	padding:.2vw;
	font-size:1.5em;
    width:1.5em;
    height:1.5em;
	vertical-align: middle;
}
a.fa-linkedin {
	display:flex;
	flex-direction: column;
	justify-content:center;
  color: white;
	padding:.2vw;
	font-size:1.5em;
    width:1.5em;
    height:1.5em;
	vertical-align: middle;
}
a.fa-envelope {
	display:flex;
	flex-direction: column;
	justify-content:center;
  color: white;
	padding:.2vw;
	font-size:1.5em;
    width:1.5em;
    height:1.5em;
	vertical-align: middle;
}
@media screen and (max-width : 600px){
  .nav {
    padding-top: 3vw;
  }
  .content {
    display: flex;
    flex: 100%;
    max-width: 100%;
    background-color: transparent;
    align-self: center;
	   padding-top:0vw;
  }
  a.name {
     font-size: 5.1vw;
    margin-left: 4vw;
    padding-bottom: 2.6vw;
    margin-top: 1.2vw;
    letter-spacing: 1.6vw;
    z-index: 2;
  }
  span {
    z-index: 1;
    margin-left: -9vw;
    margin-top: 1.9vw;
    position: absolute;
  }
  .plz {
    padding-left: 1vw;
    margin-top: .5vw;
  }
  .burger {
    width: 7vw;
    height: .9vw;
    background-color: #BEBEBE;
    margin: 2vw 0;
    margin-top: -.2vw;
    z-index: 1;
  }
  h4 {
    font-size: 12.5vw;
  }
  p {
    margin-top: -12vw;
    width: 81vw
  }
  .overlay a.links {
    font-size: 12vw
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
  .dropbtn {
    font-size: 12vw;
  }
  .dropdown-content a {
    font-size: 5vw;
  }
  .dropbtn:hover {
    -webkit-text-stroke: .3vw #bebebe;
  }
  a.links:hover {
    -webkit-text-stroke: .3vw #bebebe;
  }
  .text {
    width: 100%;
    height: auto;
    margin-top: 1vw;
    margin-bottom: 3vw;
  }
  p.textone {
    font-size: 3.5vw;
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    width: 100%;
    line-height: 5.5vw;
  }
  p.mockupcred {
    font-size: 1.3vw;
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 300;
    width: 100%;
    margin-top: -2vw;
  }
  p.footer {
    font-size: 4vw;
    padding-top: 0vw;
  }
	.sociallinks{margin-top:1.5vw;}
	
	a.fa {
		font-size:8vw;
	}

}