@charset "UTF-8";

body{margin:0px; }


#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: -11px}

.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: 9px; 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 }





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}




.upperspace{height: 120px; width: 150px;}
div#middle{min-width: 350px; margin: 0px auto}
div#middle{width: 50%; font-family: 'Archivo Narrow', sans-serif}
div#middle > div > div > img {width: 100%}
div#middle > div > div {margin-bottom: 100px}
#middle p {font-size: 14px; color: dimgray; letter-spacing: .5px; font-weight: 300}
#middle h1 {letter-spacing: 1px; color:darkgrey}




@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}
.upperspace {height: 30px}	
	
a {text-decoration: none}
}

 

@media screen and (max-width:480px) {.one-third{width:  98%; margin: 1%} span{display: none} #info1 #info2 {display: none} 
.upperspace {height: 20px}
#logo { display: none}
.navebarzz{display: none}
#middle h1 {font-size: 18px; text-align: center}		
	
	
	
.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); }	
	
	

}