@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: 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 }


#wrapper {width: 40%; margin: 0px auto; display: flex; padding-top: 20%; }
#paragraph {  width: 900px; font-family: 'Archivo Narrow', sans-serif; letter-spacing: 1px; line-height: 23px; font-weight: 400; font-size: 14px; color:#525151}
p {margin-top: 15px}
#about {font-family: 'Archivo Narrow', sans-serif; }

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: 45px; text-align: center;
font-family: 'Archivo Narrow', sans-serif; font-size: 9px; letter-spacing: 1px; font-weight: 300;line-height: 12px}


@media screen and (min-width:1080px) { img  {position:fixed; top:55%; left:50%; transform:translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto;height: auto ;z-index: 2;     }  #whiteback2 { display: none} .site-nav{display: none}  
	#headd {display: none}
}

@media screen and (max-width:1080px)  {   #whiteback2  {position:fixed; top:55%; left:50%; transform:translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto ;z-index: 2; }   #whiteback1 {display: none}  #menuTest {display: none}   
#headd {display: none}
#wrapper {width:50%; margin: 0px auto; display: flex; padding-top: 20%; }


}





@media screen and (max-width:480px) {     
#headd {display: block}	
#whiteback2{display: none }  #whiteback1{display: none}  video{display: none} #menue1 {display: none}  
.navebarzz {display: none}		
	
#logo { display: none}
	
#wrapper {width:80%; margin: 0px auto; display: flex; padding-top: 20%; }
#paragraph {  width: 900px; font-family: 'Archivo Narrow', sans-serif; letter-spacing: 1px; line-height: 23px; font-weight: 400; font-size: 14px; color:#525151}
p {margin-top: 15px}	
		
	
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}
	
	
	
	
header {display: none}	
	
	
.container {width: 100%; margin: 0 auto}

#headd { background-color: black; height: 50px;  width: 100%; margin: 0px; margin-top: -1px; position: fixed; top: 0; left: 0}
	
#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 { padding: 1em; position: absolute; right: -.1em; top: .5em; cursor: pointer}

.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); }	
	
	

}