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


#container {widows: 100%;  }






#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:transparent; 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 }



#newwhiteback{position:fixed; top:454px!important; left:550px; transform:translate(-550px, -407px); min-width: 100%; min-height: 100%; width: auto; height: 100% ;  padding: auto; margin: auto; z-index: 20 }

#newwhiteback1 {position:fixed; top:454px!important; left:550px; transform:translate(-550px, -407px); min-width: 100%; min-height: 100%; width: auto; height: 100% ;  padding: auto; margin: auto; z-index: 20 }


#newwhiteback2 {position:fixed; top:454px!important; left:550px; transform:translate(-550px, -407px); min-width: 100%; min-height: 100%; width: auto; height: 100% ;  padding: auto; margin: auto; z-index: 20 }
video {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto;height: auto;z-index: -1000;  }
#box3 {margin: 0; padding: 0; width: 100%; height: 100%; position: absolute; display: flex; }

footer {width: 100%; background-color: black; height: 100px;  z-index: 60; bottom: 0; left: 0; position:fixed; }
.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 ; font-weight: 300;line-height: 12px}






@media screen and (min-width:1080px) { #newwhiteback  {position:fixed; top:454px!important; left:550px; transform:translate(-550px, -407px); min-width: 100%; min-height: 100%; width: auto; height: 100% ;z-index: 20; }  #newwhiteback1 { display: none} .site-nav{display: none} #newwhiteback2{display: none} #headd {display: none}  
#wrapper-mobile{display: none}	
}


@media screen and (max-width:1080px)  {   #newwhiteback1  { transform:translate(-550px, -405px); min-width: 100%; min-height: 100%; width: auto; height: 100% ;z-index: 20; }   #newwhiteback {display: none}  #menuTest {display: none}  #newwhiteback2{display: none}  #headd {display: none}   
#wrapper-mobile{display: none}	
}











@media screen and (max-width:850px) { #newwhiteback2  {display: block;position:fixed; top:454!important; left:550px; transform:translate(-550px, -405px); min-width: 100%; min-height: 100%; width: auto; height: 100% ;z-index: 20; }
#newwhiteback{display: none} #newwhiteback1{display: none} 
.parent {font-family: 'Archivo Narrow', sans-serif; font-size:10px; font-weight: 300; letter-spacing: 2px; padding-right: 1px;transition: 0.7s; position: relative; top: 0px}
.parent .ron1 {display: inline; float: right; width: 90px; text-align: center; color:white; line-height: 50px; background-color:transparent;  }
.parent .ron1:hover{background-color:white; 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:#353434; }
.navebarzz a {text-decoration: none;}
.navebarzz a:hover {color: black}
#port-1 {background-color: black}
.navebarzz a:hover { text-decoration:none; color:#353434 }
#headd {display: none} 
#wrapper-mobile{display: none}		
	
}






@media screen and (max-width:650px) {
.parent {font-family: 'Archivo Narrow', sans-serif; font-size:9px; font-weight: 300; letter-spacing: 2px; padding-right: 1px;transition: 0.7s; position: relative; top: 0px}	
.parent .ron1  {display: inline; float: right; width: 75px; text-align: center; color:white; line-height: 50px; background-color:transparent;  }
.parent .ron1:hover{background-color:white; font-weight: 400}
.child .ron1 {color: black; font-size: 6px; font-weight: 400; background-color:rgba(0,0,0,.1) }
.child .ron1:hover{background-color: black; color:#353434; }
.navebarzz a {text-decoration: none;}
.navebarzz a:hover {color: black}
#port-1 {background-color: black}
.navebarzz a:hover { text-decoration:none; color:#353434 }
#headd {display: none} 
#wrapper-mobile{display: none}		
}

@media screen and (max-width:550px) {
	#headd {display: none} 
.parent {font-family: 'Archivo Narrow', sans-serif; font-size:9px; font-weight: 300; letter-spacing: 2px; padding-right: 1px;transition: 0.7s; position: relative; top: 0px}	
.parent .ron1  {display: inline; float: right; width: 69px; text-align: center; color:white; line-height: 50px; background-color:transparent;  }
.parent .ron1:hover{background-color:white; font-weight: 400}
.child .ron1 {color: black; font-size: 6px; font-weight: 400; background-color:rgba(0,0,0,.1) }
.child .ron1:hover{background-color: black; color:#353434; }
.navebarzz a {text-decoration: none;}
.navebarzz a:hover {color: black}
#port-1 {background-color: black}
.navebarzz a:hover { text-decoration:none; color:#353434 }
#wrapper-mobile{display: none}		
	
}

@media screen and (max-width:480px){
	

	
	
	
	#newwhiteback  {display: none}
	#newwhiteback1 {display: none}
	#newwhiteback2 {display: none}
	video {display: none}
	.navebarzz{display: none}
	#headd {display: block} 
	#container {display: none}
	#last-section {margin-bottom: 30%}
	
	

#headd { background-color: black; height: 50px;  width: 100%;  top: 0;  z-index: 2; position: relative}
.empty-box {display: none; height: 50px; position: fixed; top: 0;   }
.empty-box2 {display: none; height: 50px; position: fixed; bottom: 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 { 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);  }	
	
	
	
	
	
#wrapper-mobile{display: block;  }




	
	
	
	
#ronald{ font-size: 16px;  float: inherit; top: 17px;position: relative; margin-top: 47%; margin-left: 10px; font-family:'Lusitana', serif; letter-spacing: 1px }
#design{font-weight: bolder; font-family:'Anton', sans-serif; font-size: 60px; margin: 1px; padding-left: 70px;letter-spacing: 3PX }
#special{font-family: 'Archivo Narrow', sans-serif; margin-top: 30%; margin-left: 10px; margin-bottom: 15px; color:#222; line-height: 24px; font-weight: 600; letter-spacing: 1.5px; font-size: 11px }



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

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

.container {width: 100%; margin: 0 auto}


.column {
    float: left;
    width: 100%;
    padding-bottom: 4px;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: 0px;
  transition: .5s ease;
}

.text {
  color:#353434;
  font-size: 20px;
  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;
}



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

#vieportfolio {width: 100%; text-align: center; height: 50px; font-weight: bolder; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; font-family: 'Archivo Narrow', sans-serif; }