/* CSS Document */



a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #27AE61 url("up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
a:hover.back-to-top {
	background-color: #000;
}










/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Here you should set what size you want your div to be 
when viewed on smartphone */
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

body {
background: #ffffff url(images/body-bg.jpg) no-repeat center top;
font: .81em/200% Helvetica; color: #000;
}



#main{
top:0px;
position: absolute;
width:100%;
left:0px;
z-index:1;
}


#main2{
top:0px;
position: absolute;
left:50%;
margin-left:-500px;
width:1000px;
z-index:1;
font: Arial, Helvetica, sans-serif;
}
#wrapper{
height:5083px;
width:100%;
background-color:#000000;
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */	 
	z-index:2;
	left:0px;
	top:0px;
	display:none;
	position:absolute;


}
#header{
width:1000px;
left: 0px;
position: absolute;
top:0px;
}
#menubar{
background-image:url(images/menu/bg.png);
height:72px;
width:1000px;
left:0px;
top:0px;
position:absolute;
z-index:3;
}


.button{
height:72px;
position: absolute;
line-height:72px;
font-size:12px;
color:#000000;
text-align:center;

}
.button:hover{
height:72px;
position: absolute;
line-height:72px;
font-size:12px;
color: #0e76bc;

}
#button1{
width:35px;
left:386px;
}

#button2{
width:65px;
left:441px;
}
#button3{
width:60px;
left:526px;
}
#button4{
width:64px;
left:606px;
}
#button5{
width:70px;
left:690px;
}
#button6{
width:50px;
left:780px;
}
.line{
width:4px;
height:30px;
background-color:#0e76bc;
position:absolute;
top:21px;
}
#line1{
left:429px;}
#line2{
left:514px;
}
#line3{
left:594px;
}
#line4{
left:678px;
}
#line5{
left:768px;
}
#iconbar{
height:22px;
position: absolute;
left:862px;
width:118px;
top:25px;

}
.icon{
height:22px;
width:22px;
position: absolute;
top:0px;
background-repeat:no-repeat;
background-position:center;
}
#iconface{
background-image:url(images/menu/facebook.png);
left:0px;}
#icontwit{
background-image:url(images/menu/twitter.png);
left:32px;
display:none;}
#iconpin{
left:64px;
background-image:url(images/menu/pinterest.png);}
#iconinsta{
background-image:url(images/menu/instagram.png);
left:96px;
display:none;}

#logo{
width:107px;
height:48px;
background-image:url(images/menu/logo.png);
position:absolute;
z-index:4;
left:12px;
top:12px;

}
#banner2{
position:absolute;
width:1000px;
left:0px;
top:72px;
z-index:500;
}
#banner{
position:absolute;
width:1000px;
left:0px;
top:0px;
z-index:500;
}


#copy{
position:absolute;
width:1000px;
max-width:100%;
min-width:300px;
left:0px;
top:556px;
background-color:#006699;
}
#intro{
position:absolute;
width:1000px;
max-width:100%;
min-width:300px;
left:0px;
top:0px;
background-color:#ffffff;
text-align:center;
vertical-align:middle;
font-size:24px;
font:Helvetica;
height:445px;
}
#greenbar{
left:0px;
width:1000px;
height:50px;
top: 412px;
background-image:url(images/colourSTRIPS/colours-2-green.png);
background-position:center;
background-repeat:no-repeat;
position:absolute;
max-width:100%;
min-width:300px;
z-index:50;
}
#about{
position:absolute;
width:1000px;
max-width:100%;
min-width:300px;
left:0px;
top:445px;
background-color:#000000;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
font-size:24px;
font:Helvetica;
height:628px;
}
#bluebar{
left:0px;
width:1000px;
height:59px;
top: 586px;
background-image:url(images/colourSTRIPS/colours-3-blue.png);
background-position:center;
background-repeat:no-repeat;
position:absolute;
max-width:100%;
min-width:300px;
z-index:50;
}
#furniture{
position:absolute;
width:1000px;
max-width:100%;
min-width:300px;
left:0px;
top:1073px;
background-color:#ffffff;
height:813px;
color:#818181;
text-align:center;
vertical-align:middle;
font-size:24px;
font:Helvetica;
}
#purplebar{
left:0px;
width:1000px;
height:96px;
top: 771px;
background-image:url(images/colourSTRIPS/colours-4-purple.png);
background-position:center;
background-repeat:no-repeat;
position:absolute;
max-width:100%;
min-width:300px;
z-index:50;
}
#projects{
position:absolute;
width:1000px;
max-width:100%;
min-width:300px;
left:0px;
top:1886px;
background-color:#000000;
height:733px;
color:#000000;
text-align:center;
vertical-align:middle;
font-size:24px;
font:Helvetica;
}
.circle{
background-repeat:no-repeat;
background-position:center;
width:208px;
height:208px;
position:absolute;
}
#circle1{
left:34px;
background-image:url(images/4projects/names/raymond-ackerman.png);
}
#circle2{
left:275px;
background-image:url(images/4projects/names/protea-hotel-breakwater-lodge-transit-lounge.png);
}
#circle3{
left:517px;
background-image:url(images/4projects/names/protea-hotel-breakwater-lodge.png);
}
#circle4{
left:758px;
background-image:url(images/4projects/names/kevin-vermaak.png);
}
#circle5{
top:400px;
left:34px;
background-image:url(images/4projects/names/karen-and-justin-van-wyk.png);
}
#circle6{
left:275px;
top:400px;
background-image:url(images/4projects/names/alan-webb.png);
}
#circle7{
left:517px;
top:400px;
background-image:url(images/4projects/names/vicky-baker.png);
}
#circle8{
left:758px;
top:400px;
background-image:url(images/4projects/names/attic.png);
}
.projectsdescrip{
position:absolute;
width:1000px;
left:50%;
margin-left:-500px;
top:2526px;
background-color:#FFffff;
height:789px;
text-align:left;
font-size:18px;
font:Helvetica;
z-index:105;
color:#808285;
display:none;

}
#projectsdescrip1{}

#projectsdescrip2{}
#projectsdescrip3{}
#projectsdescrip4{}
#projectsdescrip5{}
#projectsdescrip6{}
#projectsdescrip7{}
#projectsdescrip8{}




.top{
top:0px;
left:0px;
text-align:center;
font-size:34px;
position:absolute;
width:1000px;
height:73px;
line-height:36px;
display:none;
}
#top1{
}
#top2{
}
#top3{
}
#top4{
}
#top5{
}
#top6{
}
#top7{
}
#top8{
}
.topbar{
width:920px;
height:3px;
left:40px;
top:70px;
background-color:#a31f61;
position:absolute;
display:none;
}
#topbar1{
}
#topbar2{
}
#topbar3{
}
#topbar4{
}
#topbar5{
}
#topbar6{
}
#topbar7{
}
#topbar8{
}
.leftcopy{
left:40px;
width:470px;
height:593px;
top:113px;
position:absolute;
display:none;
}
#leftcopy1{
display:block;
}
#leftcopy2{
}
#leftcopy3{
}
#leftcopy4{
}
#leftcopy5{
}
#leftcopy6{
}
#leftcopy7{
}
#leftcopy8{
}

.leftbar{
width:450px;
height:3px;
background-color:#a31f61;
display:none;
}
#leftbar1{
display:block;
}
#leftbar2{
}
#leftbar3{
}
#leftbar4{
}
#leftbar5{
}
#leftbar6{
}
#leftbar7{
}
#leftbar8{
}
.pics{
left:528px;
width:432px;
height:561px;
position:absolute;
top:113px;
z-index:100;
display:none;
background-color:#FFFFFF;
}

#pics1{
background-image:url(images/4projects/popups/Raymond-Ackerman-Academy.png);
position:absolute;
display:block;
}
#pics2{
background-image:url(images/4projects/popups/Protea-Hotel-BWL-Transit-Lounge.png);
display:none;
}
#pics3{
background-image:url(images/4projects/popups/Protea-Hotel-BWL-Lounges.png);
display:none;
}
#pics4{
background-image:url(images/4projects/popups/Kevin-Vermaak.png);
display:none;
}
#pics5{
background-image:url(images/4projects/popups/karen-van-wyk.png);
display:none;
}
#pics6{
background-image:url(images/4projects/popups/alan-web.png);
display:none;
}
#pics7{
background-image:url(images/4projects/popups/Vicky-Baker.png);
display:none;
}
#pics8{
background-image:url(images/4projects/popups/Project-attic.png);
display:none;
}
.bottom{
width:1000px;
height:95px;
background-color:#a31f61;
top:694px;
position:absolute;
display:none;
}
#bottom1{
display:block;
}
#bottom2{}
#bottom3{}
#bottom4{}
#bottom5{}
#bottom6{}
#bottom7{}
#bottom8{}

.logobot{
background-image:url(images/4projects/popups/logo.png);
left:20px;
top:10px;
height:75px;
width:168px;
position:absolute;
display:none;

}
#logobot1{
display:block;
}
#logobot2{}
#logobot3{}
#logobot4{}
#logobot5{}
#logobot6{}
#logobot7{}
#logobot8{}






#yellowbar{
left:0px;
width:1000px;
height:96px;
top: 699px;
background-image:url(images/colourSTRIPS/colours-5-yellow.png);
background-position:center;
background-repeat:no-repeat;
position:absolute;
max-width:100%;
min-width:300px;
z-index:50;
}
#work{
position:absolute;
width:1000px;
max-width:100%;
min-width:300px;
left:0px;
top:2619px;
background-color:#FFffff;
height:967px;
text-align:center;
vertical-align:middle;
font-size:24px;
font:Helvetica;

}
.galleryfirst{
top:120px;
position:absolute;
height:190px;
width:188px;
}
.gallerysecond{
top:310px;
position:absolute;
height:190px;
width:188px;
}
.gallerythird{
top:500px;
position:absolute;
height:190px;
width:188px;
}
.galleryfourth{
top:690px;
position:absolute;
height:190px;
width:188px;
}

#gallery1{
background-image:url(images/5OURWORK/thumb/A.jpg);
left:30px;
}
#gallery1:hover {background-image:url(images/5OURWORK/thumb/A-rollover.jpg);
}

#gallery2{
background-image:url(images/5OURWORK/thumb/b.jpg);
left:218px;
}
#gallery2:hover {background-image:url(images/5OURWORK/thumb/b-rollover.jpg);
}

#gallery3{
background-image:url(images/5OURWORK/thumb/c.jpg);
left:406px;
}
#gallery3:hover {background-image:url(images/5OURWORK/thumb/c-rollover.jpg);
}

#gallery4{
background-image:url(images/5OURWORK/thumb/d.jpg);
left:594px;
}
#gallery4:hover {background-image:url(images/5OURWORK/thumb/d-rollover.jpg);
}

#gallery5{
background-image:url(images/5OURWORK/thumb/e.jpg);
left:782px;
}
#gallery5:hover {background-image:url(images/5OURWORK/thumb/e-rollover.jpg);
}

#gallery6{
background-image:url(images/5OURWORK/thumb/f.jpg);
left:30px;
}
#gallery6:hover {background-image:url(images/5OURWORK/thumb/f-rollover.jpg);
}
#gallery7{
background-image:url(images/5OURWORK/thumb/g.jpg);
left:218px;
}
#gallery7:hover {background-image:url(images/5OURWORK/thumb/g-rollover.jpg);
}

#gallery8{
background-image:url(images/5OURWORK/thumb/h.jpg);
left:406px;
}
#gallery8:hover {background-image:url(images/5OURWORK/thumb/h-rollover.jpg);
}

#gallery9{
background-image:url(images/5OURWORK/thumb/i.jpg);
left:594px;
}
#gallery9:hover {background-image:url(images/5OURWORK/thumb/i-rollover.jpg);
}

#gallery10{
background-image:url(images/5OURWORK/thumb/j.jpg);
left:782px;
}
#gallery10:hover {background-image:url(images/5OURWORK/thumb/j-rollover.jpg);
}

#gallery11{
background-image:url(images/5OURWORK/thumb/k.jpg);
left:30px;
}
#gallery11:hover {background-image:url(images/5OURWORK/thumb/k-rollover.jpg);
}
#gallery12{
background-image:url(images/5OURWORK/thumb/l.jpg);
left:218px;
}
#gallery12:hover {background-image:url(images/5OURWORK/thumb/l-rollover.jpg);
}

#gallery13{
background-image:url(images/5OURWORK/thumb/m.jpg);
left:406px;
}
#gallery13:hover {background-image:url(images/5OURWORK/thumb/m-rollover.jpg);
}

#gallery14{
background-image:url(images/5OURWORK/thumb/n.jpg);
left:594px;
}
#galler14:hover {background-image:url(images/5OURWORK/thumb/n-rollover2.jpg);
}

#gallery15{
background-image:url(images/5OURWORK/thumb/o.jpg);
left:782px;
}
#gallery15:hover {background-image:url(images/5OURWORK/thumb/o-rollover.jpg);
}

#gallery16{
background-image:url(images/5OURWORK/thumb/p.jpg);
left:30px;
}
#gallery16:hover {background-image:url(images/5OURWORK/thumb/p-rollover.jpg);
}
#gallery17{
background-image:url(images/5OURWORK/thumb/q.jpg);
left:218px;
}
#gallery17:hover {background-image:url(images/5OURWORK/thumb/q-rollover.jpg);
}

#gallery18{
background-image:url(images/5OURWORK/thumb/r.jpg);
left:406px;
}
#gallery18:hover {background-image:url(images/5OURWORK/thumb/r-rollover.jpg);
}

#gallery19{
background-image:url(images/5OURWORK/thumb/s.jpg);
left:594px;
}
#gallery19:hover {background-image:url(images/5OURWORK/thumb/s-rollover.jpg);
}

#gallery20{
background-image:url(images/5OURWORK/thumb/t.jpg);
left:782px;
}
#gallery20:hover {background-image:url(images/5OURWORK/thumb/t-rollover.jpg);
}
#redbar{
left:0px;
width:1000px;
height:41px;
top: 936px;
background-image:url(images/colourSTRIPS/colours-6-red.png);
background-position:center;
background-repeat:no-repeat;
position:absolute;
max-width:100%;
min-width:300px;
z-index:50;
}
#contact{
position:absolute;
width:1000px;
max-width:100%;
min-width:300px;
left:0px;
top:3586px;
background-color:#00FFFF;
height:588px;
}
#redbar2{
left:0px;
width:1000px;
height:53px;
top: 585px;
background-image:url(images/colourSTRIPS/colours-7-red.png);
background-position:center;
background-repeat:no-repeat;
position:absolute;
max-width:100%;
min-width:300px;
z-index:505;
}
#white{
left:0px;
width:1000px;
height:353px;
top: 638px;
background-color:#FFFFFF;
position:absolute;
max-width:100%;
min-width:300px;
z-index:504;
}
#conmain{
background-image:url(images/6contactus/CONTACTUSBG.jpg);
background-repeat:no-repeat;
background-position:center;
width:1000px;
height:602px;
left: 0px;
top:0px;
z-index:500px;
position:absolute;
color:#FFFFFF;
text-align:center;
}

#concopy{
font-size:15px;
width:1000px;
height:300px;
left: 0px;
top:164px;
z-index:500px;
position:absolute;
color:#FFFFFF;
text-align:center;
}
#conwork{
	top:0px;
	position:absolute;
	left:30px;
	width: 150px;
}
#conmail{
	top:0px;
	position:absolute;
	left:198px;
	width: 193px;


}
#concall{
	top:0px;
	position:absolute;
	left:410px;
	width: 150px;
}
#conform{
width:250px;
height:150px;
left: 574px;
top:0px;
z-index:500px;
position:absolute;
color:#FFFFFF;
text-align: left;
}