/* CSS Document */

a { text-decoration:none; color:#C00; }
a:hover { color:#000; }
body { font-family: 'Raleway', sans-serif; margin:0; padding:0; font-size:14px; color:#333; text-align:center; }
h1, h2 { text-transform:uppercase; font-weight:normal; margin:0; padding:40px 0; font-size:24px; }
h2 { font-size:18px; padding:10px 0 20px 0; border-top:1px solid #CCC; }
iframe { margin-bottom:20px; }

#backservices { height:50px; }
#backservices a { display:block; float:left; background:#1b1b1b; }
#content p { line-height:24px; padding:0; margin:0 0 20px 0; }
#content h2 { clear:both; }
#content h2.h2service { clear:none; }
#content li { line-height:24px; }
#email { top:246px; left:20px; position:absolute; }
#email a img { border:none; }
#footer { clear:both; padding:20px; border-top:1px solid #CCC; }
#footer .widther { text-align:center; }
#header { height:400px; position:relative; background:#CCC; overflow:hidden; }
#header .widther{ height:400px; margin-left:-600px; position:absolute; left:50%; z-index:100; }
#logo { position:absolute; top:80px; left:0; }
#logo img { height:120px; width:184px; }
#main { margin-bottom:80px; }
#mobmenu { display:none; }
#number { top:216px; left:20px; position:absolute; }

.illustration { width:600px; height:auto; }
.filedownloads { margin:0; padding:0; }
.filedownloads li { margin:0 0 1px 0; padding:0; list-style:none; }
.filedownloads li a { display:block; padding:20px 20px 25px 70px; background:url(../images/pdf.png) no-repeat 0 0 #1B1B1B; color:#FFF; }
.filedownloads li a:hover { background-color:#C00; }
.pgico { width:580px; height:auto; float:right; margin:0 0 20px 20px; }
.slideshow { position:absolute; z-index:10; top:0; left:50%; margin-left:-960px; }
.slideshow img { width:1920px; height:400px; }
.vidembed { width:1200px; height:675px; margin-bottom:20px; }
.widther { width:1200px; margin:0 auto; text-align:left; position:relative; }

/*Menu*/
#secmenu { position:absolute; top:80px; right:0; width:262px; padding:0; margin:0; }
#secmenu li { list-style:none; padding:0; margin:0; }
#secmenu li a { display:block; text-indent:10000px; overflow:hidden; background:url(../images/secmenu.png) no-repeat 0 0; background-size:260px 98px; white-space:nowrap; }
#secmenu li.graphicdesign a { height:32px; }
#secmenu li.illustration a { height:40px; background-position:0 -32px; }
#secmenu li.motiongraphics a { height:56px; background-position:0 -72px; }

#menu { position:absolute; bottom:0; right:0; padding:0; margin:0; }
#menu li { list-style:none; padding:0; margin:0 0 0 4px; float:left; }
#menu li a, #backservices a { background:#1b1b1b; float:left; display:block; height:40px; line-height:40px; padding:0 20px; text-transform:uppercase; color:#FFF; }
#menu li a:hover { background:#000; }

/*Portfolio Examples*/
#portfolioexamples { height:385px; position:relative; margin:0 0 40px 0; padding:0; }
#portfolioexamples li { position:absolute; top:0; left:0; width:285px; height:385px; color:#FFF; margin:0; padding:0; list-style:none; overflow:hidden; }
.peimg img { width:285px; height:auto; z-index:1; }
#portfolioexamples li a { z-index:2; opacity:0; display:block; width:285px; height:385px; position:absolute; top:0; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; background:url(../images/portfolio-examples/pebg1.png); color:#FFF; }
#portfolioexamples li a:hover { opacity:1; }
.peinf { padding:20px; }
.petitle { font-size:18px; font-weight:bold; margin-bottom:10px; }
#portfolioexamples h2 { font-size:12px; font-style:italic; font-weight:normal; margin:0; padding:0; margin-bottom:10px; border:none; }
.pedesc { font-size:11px; }

#portfolioexamples li#pe2 { left:305px; height:115px; }
#portfolioexamples li#pe3 { left:305px; top:135px; height:250px; }
#portfolioexamples li#pe4 { left:610px; }
#portfolioexamples li#pe5 { left:915px; height:250px; }
#portfolioexamples li#pe6 { left:915px; top:270px; height:115px; }

#portfolioexamples li#pe2 a { background:url(../images/portfolio-examples/pebg2.png); height:115px; }
#portfolioexamples li#pe3 a { background:url(../images/portfolio-examples/pebg3.png); height:250px; }
#portfolioexamples li#pe4 a { background:url(../images/portfolio-examples/pebg4.png); }
#portfolioexamples li#pe5 a { background:url(../images/portfolio-examples/pebg5.png); height:250px; }
#portfolioexamples li#pe6 a { background:url(../images/portfolio-examples/pebg6.png); height:115px; }

/*Icons Menus*/
#graphicdesignservices { margin:0; padding:0; }
#graphicdesignservices li { margin:0 10px 10px 0; padding:0; list-style:none; float:left; width:230px; height:270px; }
#graphicdesignservices div { width:230px; height:230px; background:url(../images/design-service-icons.png) no-repeat 0 0; background-size:2990px 460px; }
#graphicdesignservices h2 { font-size:14px; }
#graphicdesignservices .gdslogodesign a:hover div { background-position:0 -230px; }
#graphicdesignservices .gdsbranddevelopment a div { background-position:-230px 0; }
#graphicdesignservices .gdsbranddevelopment a:hover div { background-position:-230px -230px; }
#graphicdesignservices .gdswebdesign a div { background-position:-460px 0; }
#graphicdesignservices .gdswebdesign a:hover div { background-position:-460px -230px; }
#graphicdesignservices .gdsbusinesscarddesign a div { background-position:-690px 0; }
#graphicdesignservices .gdsbusinesscarddesign a:hover div { background-position:-690px -230px; }
#graphicdesignservices .gdsletterheaddesign a div { background-position:-920px 0; }
#graphicdesignservices .gdsletterheaddesign a:hover div { background-position:-920px -230px; }
#graphicdesignservices .gdscomplimentslipdesign a div { background-position:-1150px 0; }
#graphicdesignservices .gdscomplimentslipdesign a:hover div { background-position:-1150px -230px; }
#graphicdesignservices .gdsfolderdesign a div { background-position:-1380px 0; }
#graphicdesignservices .gdsfolderdesign a:hover div { background-position:-1380px -230px; }
#graphicdesignservices .gdsadvertdesign a div { background-position:-1610px 0; }
#graphicdesignservices .gdsadvertdesign a:hover div { background-position:-1610px -230px; }
#graphicdesignservices .gdsleafletdesign a div { background-position:-1840px 0; }
#graphicdesignservices .gdsleafletdesign a:hover div { background-position:-1840px -230px; }
#graphicdesignservices .gdsicondesign a div { background-position:-2070px 0; }
#graphicdesignservices .gdsicondesign a:hover div { background-position:-2070px -230px; }
#graphicdesignservices .gdsemailsignaturedesign a div { background-position:-2300px 0; }
#graphicdesignservices .gdsemailsignaturedesign a:hover div { background-position:-2300px -230px; }
#graphicdesignservices .gdsexpostanddesign a div { background-position:-2530px 0; }
#graphicdesignservices .gdsexpostanddesign a:hover div { background-position:-2530px -230px; }
#graphicdesignservices .gdsposterdesign a div { background-position:-2760px 0; }
#graphicdesignservices .gdsposterdesign a:hover div { background-position:-2760px -230px; }

/*Portfolio Listing*/
#portfolio { margin:0; padding:0; }
#portfolio li { margin:0 10px 10px 0; padding:0; list-style:none; float:left; width:230px; height:230px; color:#FFF; overflow:hidden; position:relative; }
#portfolio li a { z-index:2; opacity:0; display:block; width:230px; height:230px; position:absolute; top:0; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; background:url(../images/portfolio-examples/pebg3.png); color:#FFF; }
#portfolio li a:hover { opacity:1; }
#portfolio h2 { font-size:12px; line-height:12px; font-style:italic; font-weight:normal; margin:0; padding:0; margin-bottom:10px; border:none; }
#portfolio .peimg img { width:230px; }
#portfolio .petitle { font-size:18px; line-height:18px; font-weight:bold; margin-bottom:10px; }
#portfolio .pedesc { font-size:11px; line-height:11px; }

/*Portfolio*/
#portfoliointro { margin-bottom:40px; }
.section { border-top:1px solid #CCC; padding:40px 0; clear:both; }
.section h2 { border:none; padding-top:60px; }
.secleft, .secright { float:left; width:620px; margin-bottom:40px; }
.secright { width:580px; }
.secleft .pad { padding-right:40px; }
.secright .pad { padding-left:40px; }
.section a, a.hilink { display:block; float:left; line-height:40px; background:#333; color:#FFF; text-transform:uppercase; padding:0 20px; margin-top:60px; }
.section a:hover, a.hilink:hover { background:#000; }
.section li { margin-bottom:10px; }


/*Contact*/
.webform-component-textfield input, .webform-component-email input { width:100%; }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) {
	#secmenu li a { background-image:url(../images/secmenu@2x.png); }	
}

@media only screen and (max-width: 1199px) {
	#email { top:186px; left:16px; }
	#email a img { height:10px; width:116px; }
	#header .widther { margin-left:-480px; }
	#logo { top:60px; }
	#logo img { height:91px; width:140px; }
	#number { top:165px; left:16px; }
	#number img { width:115px; height:16px; }
	
	.illustration { width:480px; }
	.onehunper img { width:100%; height:auto; }
	.pgico { width:460px; }
	.vidembed { width:960px; height:540px; }
	.widther { width:960px; }

	/*Menu*/
	#secmenu { width:200px; top:60px; }
	#secmenu li a { background-size:200px 76px; }
	#secmenu li.graphicdesign a { height:25px; }
	#secmenu li.illustration a { height:32px; background-position:0 -25px; }
	#secmenu li.motiongraphics a { height:19px; background-position:0 -57px; }

	#menu li { margin:0 0 0 2px; }
	#menu li a, #backservices a { padding:0 10px; }

	/*Portfolio Examples*/
	#portfolioexamples { height:308px; }
	#portfolioexamples li { width:228px; height:308px; }
	#portfolioexamples li a { width:228px; height:308px; }
	.peimg img { width:228px; height:auto; }
	.peinf { padding:15px; }
	.petitle { font-size:16px; }

	#portfolioexamples li#pe2 { left:244px; height:92px; }
	#portfolioexamples li#pe3 { left:244px; top:108px; height:200px; }
	#portfolioexamples li#pe4 { left:488px; }
	#portfolioexamples li#pe5 { left:732px; height:200px; }
	#portfolioexamples li#pe6 { left:732px; top:216px; height:92px; }

	#portfolioexamples li#pe2 a { background:url(../images/portfolio-examples/pebg2.png); height:92px; }
	#portfolioexamples li#pe3 a { background:url(../images/portfolio-examples/pebg3.png); height:200px; }
	#portfolioexamples li#pe4 a { background:url(../images/portfolio-examples/pebg4.png); }
	#portfolioexamples li#pe5 a { background:url(../images/portfolio-examples/pebg5.png); height:200px; }
	#portfolioexamples li#pe6 a { background:url(../images/portfolio-examples/pebg6.png); height:92px; }

	#portfolioexamples li#pe2 .pedesc { display:none; }

	/*Portfolio*/
	.section h2 { padding-top:40px; }
	.secleft, .secright { width:500px }
	.secright { width:460px; }
	.section img { width:460px; height:auto; }
	.section.onehunper img { width:100%; height:auto; }
}
@media only screen and (max-width: 959px) {
	body { font-size:12px; }
	h1 { padding:30px 15px; }

	#content { padding:0 15px; }
	#email { top:113px; left:12px; }
	#email a img { height:8px; width:85px; }
	#header { height:200px; width:100%; overflow:hidden; }
	#header .widther { margin-left:-310px; height:200px; }
	#logo { top:20px; }
	#logo img { height:68px; width:104px; }
	#number { top:97px; left:12px; }
	#number img { width:85px; height:12px; }

	.illustration { width:270px; }
	.pgico { width:300px; }
	.slideshow { margin-left:-480px; }
	.slideshow img { width:960px; height:200px; }
	.vidembed { width:620px; height:349px; }
	.widther { width:620px; }

	/*Menu*/
	#secmenu { width:150px; top:20px; }
	#secmenu li a { background-size:150px 57px; }
	#secmenu li.graphicdesign a { height:18px; }
	#secmenu li.illustration a { height:24px; background-position:0 -18px; }
	#secmenu li.motiongraphics a { height:15px; background-position:0 -42px; }
	
	#menu li { margin:0 0 0 1px; }
	#menu li a { height:30px; line-height:30px; padding:0 6px; font-size:11px; }

	/*Portfolio Examples*/
	#portfolioexamples { height:790px; margin:0 0 30px 0; }
	#portfolioexamples li { left:15px; width:285px; height:385px; }
	#portfolioexamples li a { width:285px; height:385px; }
	.peimg img { width:285px; height:auto;  }

	#portfolioexamples li#pe2 { left:320px; height:115px; }
	#portfolioexamples li#pe3 { left:320px; top:135px; height:250px; }
	#portfolioexamples li#pe4 { top:405px; left:320px; }
	#portfolioexamples li#pe5 { top:405px; left:15px; height:250px; }
	#portfolioexamples li#pe6 { top:675px; left:15px; height:115px; }

	/*Icons Menus*/
	#graphicdesignservices li { width:190px; height:240px; }
	#graphicdesignservices li.trip { margin-right:0; }
	#graphicdesignservices div { width:190px; height:190px; background-size:2470px 380px; }
	#graphicdesignservices .gdslogodesign a:hover div { background-position:0 -190px; }
	#graphicdesignservices .gdsbranddevelopment a div { background-position:-190px 0; }
	#graphicdesignservices .gdsbranddevelopment a:hover div { background-position:-190px -190px; }
	#graphicdesignservices .gdswebdesign a div { background-position:-380px 0; }
	#graphicdesignservices .gdswebdesign a:hover div { background-position:-380px -190px; }
	#graphicdesignservices .gdsbusinesscarddesign a div { background-position:-570px 0; }
	#graphicdesignservices .gdsbusinesscarddesign a:hover div { background-position:-570px -190px; }
	#graphicdesignservices .gdsletterheaddesign a div { background-position:-760px 0; }
	#graphicdesignservices .gdsletterheaddesign a:hover div { background-position:-760px -190px; }
	#graphicdesignservices .gdscomplimentslipdesign a div { background-position:-950px 0; }
	#graphicdesignservices .gdscomplimentslipdesign a:hover div { background-position:-950px -190px; }
	#graphicdesignservices .gdsfolderdesign a div { background-position:-1140px 0; }
	#graphicdesignservices .gdsfolderdesign a:hover div { background-position:-1140px -190px; }
	#graphicdesignservices .gdsadvertdesign a div { background-position:-1330px 0; }
	#graphicdesignservices .gdsadvertdesign a:hover div { background-position:-1330px -190px; }
	#graphicdesignservices .gdsleafletdesign a div { background-position:-1520px 0; }
	#graphicdesignservices .gdsleafletdesign a:hover div { background-position:-1520px -190px; }
	#graphicdesignservices .gdsicondesign a div { background-position:-1710px 0; }
	#graphicdesignservices .gdsicondesign a:hover div { background-position:-1710px -190px; }
	#graphicdesignservices .gdsemailsignaturedesign a div { background-position:-1900px 0; }
	#graphicdesignservices .gdsemailsignaturedesign a:hover div { background-position:-1900px -190px; }
	#graphicdesignservices .gdsexpostanddesign a div { background-position:-2090px 0; }
	#graphicdesignservices .gdsexpostanddesign a:hover div { background-position:-2090px -190px; }
	#graphicdesignservices .gdsposterdesign a div { background-position:-2280px 0; }
	#graphicdesignservices .gdsposterdesign a:hover div { background-position:-2280px -190px; }

	/*Portfolio*/
	.section h2 { padding-top:0; }
	.secleft, .secright { width:300px }
	.secright { width:290px; }
	.section img { width:290px; height:auto; }
	.section a { margin-top:10px; }
}
@media only screen and (max-width: 619px) {
	h1 { padding:15px 10px; font-size:14px; }

	#content { padding:0 10px; }
	#content p, #content li { line-height:18px; }
	#email { top:auto; left:auto; position:relative; margin-bottom:10px; }
	#header { height:auto; width:100%; background:url(../images/mob-bg.jpg); background-size:100% 100%; padding-bottom:20px; }
	#header .widther { margin:0 auto; height:auto; text-align:center; position:relative; left:auto; }
	#logo { position:relative; top:auto; left:auto; padding:20px 0 10px 0; }
	#mobmenu { display:block; float:right; background:#1b1b1b; }
	#mobmenu img { width:30px; height:30px; border:none; }
	#number { top:auto; left:auto; position:relative; }

	.illustration { width:100%; }
	.pgico { width:100%; height:auto; float:none; margin:0 0 20px 0; }
	.slideshow { display:none; }
	.vidembed { width:300px; height:169px; }
	.widther { width:320px; }

	/*Menu*/
	#secmenu { position:relative; top:auto; right:auto; width:300px; margin:0 auto 20px auto; }
	#secmenu li a { background-size:300px 115px; }
	#secmenu li.graphicdesign a { height:38px; }
	#secmenu li.illustration a { height:44px; background-position:0 -38px; }
	#secmenu li.motiongraphics a { height:33px; background-position:0 -82px; }

	#menu { position:relative; bottom:auto; right:auto; display:none; }
	#menu li { margin:0 0 1px 0; float:none; }
	#menu li a { float:none; }

	/*Portfolio Examples*/
	#portfolioexamples { height:428px; margin:0 0 20px 0; }
	#portfolioexamples li { width:155px; height:209px; left:auto; }
	.peimg img { width:155px; height:auto; }
	#portfolioexamples li a { width:155px; height:209px; }
	.peinf, #portfolioexamples h2, .pedesc { display:none; }

	#portfolioexamples li#pe2 { left:165px; height:63px; }
	#portfolioexamples li#pe3 { left:165px; top:73px; height:136px; }
	#portfolioexamples li#pe4 { top:219px; left:165px; }
	#portfolioexamples li#pe5 { top:219px; left:0; height:136px; }
	#portfolioexamples li#pe6 { top:365px; left:0; height:63px; }

	#portfolioexamples li#pe2 a { background:url(../images/portfolio-examples/pebg2.png); height:63px; }
	#portfolioexamples li#pe3 a { background:url(../images/portfolio-examples/pebg3.png); height:136px; }
	#portfolioexamples li#pe4 a { background:url(../images/portfolio-examples/pebg4.png); }
	#portfolioexamples li#pe5 a { background:url(../images/portfolio-examples/pebg5.png); height:136px; }
	#portfolioexamples li#pe6 a { background:url(../images/portfolio-examples/pebg6.png); height:63px; }

	/*Icons Menus*/
	#graphicdesignservices li { width:145px; height:185px; }
	#graphicdesignservices li.trip { margin-right:10px; }
	#graphicdesignservices li.even { margin-right:0; }
	#graphicdesignservices div { width:145px; height:145px; background-size:1885px 290px; }
	#graphicdesignservices .gdslogodesign a:hover div { background-position:0 -145px; }
	#graphicdesignservices .gdsbranddevelopment a div { background-position:-145px 0; }
	#graphicdesignservices .gdsbranddevelopment a:hover div { background-position:-145px -145px; }
	#graphicdesignservices .gdswebdesign a div { background-position:-290px 0; }
	#graphicdesignservices .gdswebdesign a:hover div { background-position:-290px -145px; }
	#graphicdesignservices .gdsbusinesscarddesign a div { background-position:-435px 0; }
	#graphicdesignservices .gdsbusinesscarddesign a:hover div { background-position:-435px -145px; }
	#graphicdesignservices .gdsletterheaddesign a div { background-position:-580px 0; }
	#graphicdesignservices .gdsletterheaddesign a:hover div { background-position:-580px -145px; }
	#graphicdesignservices .gdscomplimentslipdesign a div { background-position:-725px 0; }
	#graphicdesignservices .gdscomplimentslipdesign a:hover div { background-position:-725px -145px; }
	#graphicdesignservices .gdsfolderdesign a div { background-position:-870px 0; }
	#graphicdesignservices .gdsfolderdesign a:hover div { background-position:-870px -145px; }
	#graphicdesignservices .gdsadvertdesign a div { background-position:-1015px 0; }
	#graphicdesignservices .gdsadvertdesign a:hover div { background-position:-1015px -145px; }
	#graphicdesignservices .gdsleafletdesign a div { background-position:-1160px 0; }
	#graphicdesignservices .gdsleafletdesign a:hover div { background-position:-1160px -145px; }
	#graphicdesignservices .gdsicondesign a div { background-position:-1305px 0; }
	#graphicdesignservices .gdsicondesign a:hover div { background-position:-1305px -145px; }
	#graphicdesignservices .gdsemailsignaturedesign a div { background-position:-1450px 0; }
	#graphicdesignservices .gdsemailsignaturedesign a:hover div { background-position:-1450px -145px; }
	#graphicdesignservices .gdsexpostanddesign a div { background-position:-1595px 0; }
	#graphicdesignservices .gdsexpostanddesign a:hover div { background-position:-1595px -145px; }
	#graphicdesignservices .gdsposterdesign a div { background-position:-1740px 0; }
	#graphicdesignservices .gdsposterdesign a:hover div { background-position:-1740px -145px; }

	/*Portfolio*/
	#portfoliointro { margin-bottom:20px; }
	.section { padding:20px 0; }
	.secleft, .secright { float:none; width:auto; margin-bottom:20px; }
	.secleft .pad, .secright .pad { padding:0; }
	.section a { margin-top:0px; }
	.section img { width:100%; height:auto; }
	#portfolio li, #portfolio .peimg img { width:150px; height:150px; margin:0; }

}