#wrapper { position:relative; width:100%; height:100%; bottom:0px; min-height:800px; }

#wrapper > div, #wrapper > a { 
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
}

div.p {
    background-size:cover;
    background-position:center;
}

.b {
    position:absolute;
    display:block;
    text-align:left;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

li, ol, ul { padding:0; margin:0; }
h5 { font-size:16px; font-weight:400; padding:0 0 15px; }

p { color:#000; font-weight:300; line-height:130%; }
a { text-decoration:none; }
a.hyperlink:hover { text-decoration:underline; }

ul { list-style-type:none; color:#000;}
ul li { color:#000; font-weight:300; font-size:16px; padding:0 0; }

#title { font-weight:700; font-size:32px; z-index:1;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* IMPORTANT ADAPT LEFT AS U WOULD ADAPT PADDING*/
#title #name { position:absolute; left:90px; right:0px; top:0px; bottom:0px; text-align:center; }
#title #menubtn { display:inline-block; padding:0 30px; width:30px; height:100%; background-color:#fdfcd9; }
#title #menubtn.down { background-color:#fdfcd9; }
#title #menubtn.down i { color:#f7f579;}
#title #menubtn:hover:not(.down) { background-color:#fff }

#dropmenu { left:0; bottom:0px; top:10%; width:40%; background-color:#fdfcd9; position:fixed; display:none;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
#dropmenu li { padding-bottom:10px; }
#dropmenu li a { color:#ea3b2f; font-size:24px; font-weight:700;}


#title .wrap { display:table !important; overflow:hidden; width:100%; height:100%; }
#title .wrap > .sub { display:table-cell !important; vertical-align:middle; font-size:inherit; font-weight:inherit; }


/* COLORS */
#title, #Box04, #Box03:hover, #Box05:hover { background-color:#f7f579; }
#Box01, #Box03, #Box05, #Box07 { background-color:#d8d6dd; }
#Box06, #Box08, #Box02 { background-color:#fff; }

/* SMARTPHONE STYLE */
@media (max-width:320px) { 
    #title #name { font-size:22px !important; }
}

@media (max-width:600px) {
	#title, #Portrait, #Box01, #Box02, #Box03, #Box04, #Box05, #Box06, #Box07, #Box08 {
        width:100%; position:relative; height:auto; }
    
    .b { padding:60px 35px; }
    
    #title { font-size:30px; height:80px; padding:0 35px; } 
    #title #name { left:125px; }
    #dropmenu { top:80px; width:100%; }
    #dropmenu li a { font-size:30px; }
    #dropmenu li { padding-bottom:20px; }
    #Portrait { height:450px; }
    
    
    #Box03 { display:none; }
    
    #Box05 { display:none; }
    #Box06 { display:none; }
    #Box07 { display:none; }
}

@media (max-width:1000px) and (min-width:601px) {
    #wrapper { min-height:800px; }
    .b{ padding:40px 34px; }
    
    #title, #Portrait, #Box01, #Box02, #Box03, #Box04, #Box05, #Box06, #Box07 { position:absolute; }
    
    #title {  left:0; top:0; width:100%; height:18%; text-align:left; font-size:26px; text-align:left; font-size:34px; padding:0 34px;}
    #title #name { left:124px; }
    #dropmenu { top:18%; width:42%; }
    #Portrait { left:0; top:18%; width:42%; height:42%; }
    #Box01 { left:42%; top:60%; width:58%; height:40%; }
    #Box02 { left:0; top:60%; width:42%; height:20%; }
    #Box03 { left:0; top:25%; width:40%; height:40%; display:none;}
    #Box04 { left:0; bottom:0; width:42%; height:20%; }
    #Box05 { left:0; top:25%; width:40%; height:40%; display:none;}
    #Box06 { left:0; top:25%; width:40%; height:40%; display:none;}
    #Box07 { left:0; top:25%; width:40%; height:40%; display:none;}
    #Box08 { left:42%; top:18%; width:58%; height:42%; }
}

@media (min-width:1001px) {
    #wrapper { min-height:1000px; }
    .b{ padding:40px 35px; }
    
    
    #title, #Portrait, #Box01, #Box02, #Box03, #Box04, #Box05, #Box06, #Box07, #Box08 { position:absolute; }
    
    #title { left:0; top:0; width:38%; height:12%; text-align:left; font-size:34px; padding:0 35px;} 
    #title #name { left:125px; }
    #dropmenu { top:12%; width:38%; }
    #Box01 { left:0; top:12%; width:38%; height:34%;}
    #Box02 { left:0; bottom:30%; width:38%; height:24%; }
    #Box03 { left:0; bottom:0; width:38%; height:30%; }
    
    #Portrait { left:38%; top:0; width:32%; height:70%; }
    
    #Box04 { left:70%; top:0; width:30%; height:23%; }
    #Box05 { left:70%; top:23%; width:30%; height:24%; }
    #Box06 { left:70%; top:47%; width:30%; height:23%; }
    #Box07 { left:70%; bottom:0; width:30%; height:30%; }
    #Box08 { left:38%; bottom:0; width:32%; height:30%; }
	
}

@media (min-width:1200px) { 
    #title,.b { padding-left:55px; padding-right:55px; }
    #title #name { left:145px; }
} 
@media (min-height:1000px) { .b{ padding-top:70px; padding-bottom:70px; } }