@charset "UTF-8";
* {margin: 0; padding: 0;}


#logo {height: 30px; width: 39px; position: absolute; margin: 10px; background-image: url(images/mylogo.svg); margin-left: 11px }
.navebarzz {width: 100%; height: 50px; background-color:black; position: fixed; top: 0px; left: 0px; z-index: 30; }
.parent {font-family: 'Archivo Narrow', sans-serif; font-size:11px; font-weight: 200; letter-spacing: 2px; padding-right: 10px;transition: 0.7s; position: relative; top: 0px}

.parent .ron1  {display: inline; float: right; width: 108px; text-align: center; color:white;line-height: 50px; background-color:transparent;  }

.parent .ron1:hover{background-color:white; color:black; font-weight: 400}
.child .ron1 {color: black; font-size: 8px; font-weight: 400; background-color:rgba(0,0,0,.1) }
.child .ron1:hover{background-color: black; color:white; }
.navebarzz a {text-decoration: none;}
.navebarzz a:hover {color: black}
#port-1 {background-color: black}
.navebarzz a:hover { text-decoration:none; color:#353434 }


/*
header {position: fixed; bottom: 100%; left: 50%;  width:100%; transform: translateX(-50%) translatey(100%); z-index: 4; background-color: black;  height:80px;  } 
#logo {height: 50px; width: 65px; margin: 15px; float: left; position: absolute; background-image: url(image/logo.svg); opacity: .2 }
.esper .rony {float: right; margin-right: 30px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; letter-spacing: 1.5px; font-size: 10px; font-weight:100; }
#menue1 .rony  {display: inline-block; padding-right: 20px; padding-top: 34px }
#menue1 .rony a {text-decoration: none;  color:#353434}
#menue1 .rony a:hover {color: #CE9D33; transition: 0.7s }
*/


.wrapper { max-width: 100%; margin: 0; padding: 0; } 
#wrapper-butt { padding-top: 79px; margin: auto;margin-bottom: 0% }

img {display: flex; max-width: 100%; width: auto; height: auto}

.one-third { width:20%; float:left; position: relative;}

/*           
.one-third:hover span {width: 100%; opacity: .9}
span:hover {width:100%; }
span {opacity: .0}
span {width: 0%;  background-color: black; position: absolute;  text-align: center;color:#353434;
transition: .9s; display: flex; justify-content: center;font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
height: 100%; font-size:9px; letter-spacing:1px;}
h1 {padding: 50%}
          */

.title-on-work {background-color:darkgrey; position: absolute; z-index: 1;  right: 0px; padding: 10px; color:#353434;font-family: 'Archivo Narrow', sans-serif; letter-spacing: 1px; font-size: 12px}

.column {
    float: left;
    width: 100%;
    padding: 0px;position:relative
}

/* Clearfix (clear floats) */
.section::after {
    content: "";
    clear: both;
    display: table; 
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(4,4,4,.8);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.text {
  color:white;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
   transform: translate(-50%, -50%);
  text-align: center;
   font-family: 'Archivo Narrow', sans-serif;
	font-weight: 300;
	letter-spacing: 1px
}



.column:hover .overlay {
  height: 25%;
}



footer {width: 100%; background-color: black; height: 100px; position: fixed; z-index: 60; bottom: 0; left: 0}
.socialmediabox {position: absolute;transform: translateX(50%) translateY(39%); right: 50%;   }
.allboxing {display: inline-block; margin: 2px}
#behance-1{height: 30px; width: 30px; background-image: url(images/logobehance.svg); position: relative}
#instagram-1{height: 30px; width: 30px; background-image: url(images/logoinstagram.svg); position: relative}
#linkedIn-1{height: 30px; width: 30px; background-image: url(images/logolinkedin.svg); position: relative}
.copyrightbox {color:white; width: 100%; height: 30px;  position: relative; top: 57px; text-align: center;
font-family: 'Archivo Narrow', sans-serif; font-size: 9px; letter-spacing: 1px; font-weight: 300;line-height: 12px}




/*
footer{  max-width:100%;  background-color: black; padding: 50px; height: 50%; position:relative}
#righted {text-align: center; font-size: 9px; color:#353434; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";padding-top: 20px; letter-spacing: 1px}
a {text-decoration: none}
#socialbox1 {background-image: url(image/logoinstagram.svg)}
#socialbox2 {background-image: url(image/logolinkedin.svg) }
#socialbox3 {background-image: url(image/logobehance.svg)  }
.socialMedia {height: 30px; width: 30px; display: inline-block; margin-right: 15px; margin-left: 15px }
.socialWrap { position: absolute; left: 50%; transform: translateX(-51%) translateY(-80%)}
*/






@media screen and (min-width:1080px) {#headd {display: none} a {text-decoration: none}}

@media screen and (max-width:1080px) {#headd {display: none}  .text{font-size: 11px} a {text-decoration: none}   }

@media screen and (max-width:768px) {.one-third{width:  48%; margin: 1%} span{display: none} #info1 #info2 {display: none}
footer {width: 100%; background-color: black; height: 100px; position: fixed; z-index: 60; bottom: 0; left: 0}
.socialmediabox {position: absolute;transform: translateX(50%) translateY(39%); right: 50%;   }
.allboxing {display: inline-block; margin: 2px}
#behance-1{height: 30px; width: 30px; background-image: url(images/logobehance.svg); position: relative}
#instagram-1{height: 30px; width: 30px; background-image: url(images/logoinstagram.svg); position: relative}
#linkedIn-1{height: 30px; width: 30px; background-image: url(images/logolinkedin.svg); position: relative}
.copyrightbox {color:white; width: 100%; height: 30px;  position: relative; top: 57px; text-align: center;
font-family: 'Archivo Narrow', sans-serif; font-size: 9px; letter-spacing: 1px; font-weight: 300;line-height: 12px}
	
	
a {text-decoration: none}
}

 

@media screen and (max-width:480px) {.one-third{width:  98%; margin: 1%} span{display: none} #info1 #info2 {display: none} 

#logo { display: none}
.navebarzz{display: none}
	
	
	
	
.overlay{display: none}		
#space-open {display: none}	
	
footer {width: 100%; background-color: black; height: 100px; position: fixed; z-index: 60; bottom: 0; left: 0}
.socialmediabox {position: absolute;transform: translateX(50%) translateY(39%); right: 50%;   }
.allboxing {display: inline-block; margin: 2px}
#behance-1{height: 30px; width: 30px; background-image: url(images/logobehance.svg); position: relative}
#instagram-1{height: 30px; width: 30px; background-image: url(images/logoinstagram.svg); position: relative}
#linkedIn-1{height: 30px; width: 30px; background-image: url(images/logolinkedin.svg); position: relative}
.copyrightbox {color:white; width: 100%; height: 30px;  position: relative; top: 57px; text-align: center;
font-family: 'Archivo Narrow', sans-serif; font-size: 9px; letter-spacing: 1px; font-weight: 300;line-height: 12px}
	
a {text-decoration: none}	
	
header {display: none}	
	
	
.container {width: 100%; margin: 0 auto}

#headd { display:block; background-color: black; height: 50px; position: relative; width: 100%; margin: 0px; z-index: 2}
	
#logomobile	{width: 45px; height: 35px; background-image: url(images/mylogo.svg); position: absolute; left: 2%; top: 15%; opacity: .5}

#headd::after {content:''; clear: both; display: block   }

.site-nav {position:absolute; top:100%;right: 0% ;  background-color:#222; height: 0px; overflow: hidden; }

.site-nav--open  { height: auto; }

.site-nav ul {margin: 0; padding: 0; list-style: none}

.site-nav li {border-bottom:1px solid #575766}

.site-nav li:last-child{border-bottom: none}

.site-nav a { color:darkgray;opacity: .4; text-decoration: none; display: block; padding: 2em 4.5em; text-transform:uppercase; font-family: 'Archivo Narrow', sans-serif; font-weight: 300; letter-spacing: 1.1px; text-align: center;  }



.menu-toggle { float: right; position:inherit; right: -.1em; top: .5em;padding-right: 1em; padding-top: 1.4em}

.humburger, 
.humburger::before, 
.humburger::after{background:#353434; height: 3px; width: 1.75em; content: ''; display: block; border-radius: 3px; transition: all ease-in-out 500ms }

.humburger::before{ transform: translateY(-6px);}
.humburger::after{ transform: translateY(3px);}

.open .humburger { transform: rotate(45deg)}

.open .humburger::before{opacity: 0;}

.open .humburger::after {transform:  translateY(-3px) rotate(-90deg); }	
	
	

}