@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
@import url(../css/font.css);
@import url(../css/reset.css);
img, object, embed, video {max-width: 100%;}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {width:100%;}
/*Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/*/
/*Wide Screen*/
html {height: 100%;}
body {background:#FFF;height:100%;width:540em;}
h1{font-size:1.75em;}
h2{font-size:1.5em;}
h3{font-size:1.25em;}
p, li{font-size:1em;}
.green{color:#82b22d;}
.green a{color:#82b22d;text-decoration: none;-webkit-text-fill-color:#82b22d}
.green a:hover{color:#82b22d;}
.violet{color:#5f2ab8;}
.gray{color:#707070;}
.black{color:#000;}
.white{color:#FFF;}
/*------ HEADER MENU ----------*/
header{display:inline;height:18%;position:fixed;float:left;left:0;margin:1.5em 0 0;z-index:1000;}
header #header-menu{background:#000;float:left;height:60px;width: 325px;}
header #header-menu ul{display: inline;float: left;list-style: none outside none;margin-left: 1.75em;}
header #header-menu ul li{display: inline-block;padding: 22px 5px;}
header #header-menu ul li a{font:0.70em Arial, Helvetica, sans-serif;color:#FFF;text-decoration:none;}
header #header-menu ul li:hover{display:inline;background:#707070;}


/*------------HOME-----------*/
#home{background:#707070;overflow:hidden}
.home-left{background-position:center;float:left;display:inline;height:100%;}
.home-right{background-size:cover;background:#707070;float:right;width:50%;height:100%;display:block;border-color: transparent;border-style: solid;border-width:3em 6em;-moz-box-sizing: border-box; -webkit-box-sizing: border-box;box-sizing: border-box;}
#home-rightimg{margin:3em auto 0;display:block}
.home-right h1{font-family:Georgia, "Times New Roman", Times, serif;color:#FFF;text-align:left;background:#96cc38;margin:0 auto;}
.home-right p{font-family:helveticalight;color:#dedede;padding:1.25em 0 0;text-align:justify;	margin:0 auto;line-height:1.25em;}
.circle{width:30%;display:inline-table;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;border-color: transparent;border-style: solid;border-width: 0 0 1em;}
.icons{margin:2em auto 0;text-align:center;width:80%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
.circle p{text-align:center;font:9px gothambook;color:#FFF;padding:0;line-height:9px}
.home-icon{width: 65px;height:65px;/*padding-bottom: 100%;overflow:hidden;*/ background: #707070; box-shadow: 0 0 3px gray;-moz-border-radius: 50%;-webkit-border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;border-radius: 50%;border:4px solid #FFF; -moz-transition:all 0.5s ease 0.1s ;-ms-transition:all 0.5s ease 0.1s;-o-transition:all 0.5s ease 0.1s;-webkit-transition:all 0.5s ease 0.1s;transition:all 0.5s ease 0.1s; margin:0 auto 1em;}
.home-icon:hover {background:#81c529;}
.home-icon a {display:block;padding:25% 0;float:none;width:100%;line-height:1em;margin:0 auto;text-align:center;text-decoration:none;}
.home-right-icon{width:30%;display:inline;padding:0 1em;margin:1em auto 0;}
/*------------ABOUT-----------*/
#about{background-image:url(../images/about-bg.jpg); border-color: transparent;border-style: solid;border-width: 6em 7em;-moz-box-sizing: border-box;   /* Firefox 1, probably can drop this */-webkit-box-sizing: border-box;   /* Safari 3-4, also probably droppable */box-sizing: border-box;   /* Everything else */}
#about ul{list-style:none;text-decoration:none;text-align:center;margin:5em 0 2em;}
#about ul li{font-size: 2em;line-height:2em;color:#000;}
#about p{color:#2b2b2b;font-family: helveticalight;text-align: left;margin:1em 0;line-height:1.5em;}
#about h1{font-family:rockwellbold;color:#96cc38;text-align:center;margin:3em auto 3em;}
.about-right-div{display: inline;float: left;margin: 12em 5em 3em;width: 40%;}
.about-left-div{  display: inline-block;float: left;margin: 5em auto;}

/*---------SECTIONS-------------*/
.section {margin:0px;display:inline-block;/*width:4000px;*/float:left;height:100%;width: 16.666666666667%;overflow-x:hidden;}
.section h1{font-family:rockwellbold;text-align:left;margin:0 0 0.75em;}
.box{display:inline-block;margin:0;background:#4d4d4d;}
ul#box-container{text-align:center}
#mmc a,
#branding a,
#webdev a{height:119px;width:235px;display:block;background-position:center}
#mmc a:hover,
#branding a:hover,
#webdev a:hover{height:119px;width:235px;display:block;background-position:center;background-repeat: no-repeat}

/*------------PORTFOLIO MMC-----------*/
#mmc{background:#82b22d;border-color: transparent;border-style: solid;border-width: 6em 16em;-moz-box-sizing: border-box;   /* Firefox 1, probably can drop this */-webkit-box-sizing: border-box;   /* Safari 3-4, also probably droppable */box-sizing: border-box;   /* Everything else */overflow:hidden}

a.mmc-1{background-image:url(../images/thumbnail-mmc/mmc-1.jpg);}
a.mmc-1:hover{background-image:url(../images/thumbnail-mmc/mmc-1-thumb.jpg);}

a.mmc-2{background-image:url(../images/thumbnail-mmc/mmc-2.jpg);}
a.mmc-2:hover{background-image:url(../images/thumbnail-mmc/mmc-2-thumb.jpg);}

a.mmc-3{background-image:url(../images/thumbnail-mmc/mmc-3.jpg);}
a.mmc-3:hover{background-image:url(../images/thumbnail-mmc/mmc-3-thumb.jpg);}

a.mmc-4{background-image:url(../images/thumbnail-mmc/mmc-4.jpg);}
a.mmc-4:hover{background-image:url(../images/thumbnail-mmc/mmc-4-thumb.jpg);}



/*----BRANDING & GRAPHIC DESIGN--------*/
#branding{background:#DEDEDE; border-color: transparent;border-style: solid;border-width: 6em 16em;-moz-box-sizing: border-box;   /* Firefox 1, probably can drop this */-webkit-box-sizing: border-box;   /* Safari 3-4, also probably droppable */box-sizing: border-box;   /* Everything else */overflow:hidden}

a.branding-1{background-image:url(../images/thumbnail-branding/branding-1.jpg);}
a.branding-1:hover{background-image:url(../images/thumbnail-branding/branding-1-thumb.jpg);}

a.branding-2{background-image:url(../images/thumbnail-branding/branding-2.jpg);}
a.branding-2:hover{background-image:url(../images/thumbnail-branding/branding-2-thumb.jpg);}

a.branding-3{background-image:url(../images/thumbnail-branding/branding-3.jpg);}
a.branding-3:hover{background-image:url(../images/thumbnail-branding/branding-3-thumb.jpg);}

a.branding-4{background-image:url(../images/thumbnail-branding/branding-4.jpg);}
a.branding-4:hover{background-image:url(../images/thumbnail-branding/branding-4-thumb.jpg);}

a.branding-5{background-image:url(../images/thumbnail-branding/branding-5.jpg);}
a.branding-5:hover{background-image:url(../images/thumbnail-branding/branding-5-thumb.jpg);}

a.branding-6{background-image:url(../images/thumbnail-branding/branding-6.jpg);}
a.branding-6:hover{background-image:url(../images/thumbnail-branding/branding-6-thumb.jpg);}

a.branding-7{background-image:url(../images/thumbnail-branding/branding-7.jpg);}
a.branding-7:hover{background-image:url(../images/thumbnail-branding/branding-7-thumb.jpg);}

a.branding-8{background-image:url(../images/thumbnail-branding/branding-8.jpg);}
a.branding-8:hover{background-image:url(../images/thumbnail-branding/branding-8-thumb.jpg);}

a.branding-9{background-image:url(../images/thumbnail-branding/branding-9.jpg);}
a.branding-9:hover{background-image:url(../images/thumbnail-branding/branding-9-thumb.jpg);}

a.branding-10{background-image:url(../images/thumbnail-branding/branding-10.jpg);}
a.branding-10:hover{background-image:url(../images/thumbnail-branding/branding-10-thumb.jpg);}

a.branding-11{background-image:url(../images/thumbnail-branding/branding-11.jpg);}
a.branding-11:hover{background-image:url(../images/thumbnail-branding/branding-11-thumb.jpg);}

a.branding-12{background-image:url(../images/thumbnail-branding/branding-12.jpg);}
a.branding-12:hover{background-image:url(../images/thumbnail-branding/branding-12-thumb.jpg);}

/*------------PORTFOLIO WEB DEV-----------*/

#webdev{background:#F9F9F9;border-color: transparent;border-style: solid;border-width: 6em 16em;-moz-box-sizing: border-box;   /* Firefox 1, probably can drop this */-webkit-box-sizing: border-box;   /* Safari 3-4, also probably droppable */box-sizing: border-box;   /* Everything else */overflow:hidden}

a.webdev-1{background-image:url(../images/thumbnail-webdev/webdev-1.jpg);}
a.webdev-1:hover{background-image:url(../images/thumbnail-webdev/webdev-1-thumb.jpg);}

a.webdev-2{background-image:url(../images/thumbnail-webdev/webdev-2.jpg);}
a.webdev-2:hover{background-image:url(../images/thumbnail-webdev/webdev-2-thumb.jpg);}

a.webdev-3{background-image:url(../images/thumbnail-webdev/webdev-3.jpg);}
a.webdev-3:hover{background-image:url(../images/thumbnail-webdev/webdev-3-thumb.jpg);}

a.webdev-4{background-image:url(../images/thumbnail-webdev/webdev-4.jpg);}
a.webdev-4:hover{background-image:url(../images/thumbnail-webdev/webdev-4-thumb.jpg);}

a.webdev-5{background-image:url(../images/thumbnail-webdev/webdev-5.jpg);}
a.webdev-5:hover{background-image:url(../images/thumbnail-webdev/webdev-5-thumb.jpg);}

a.webdev-6{background-image:url(../images/thumbnail-webdev/webdev-6.jpg);}
a.webdev-6:hover{background-image:url(../images/thumbnail-webdev/webdev-6-thumb.jpg);}

/*------------CONTACT ---------------------*/
#contact{background-image:url(../images/contact-bg.jpg);border-color: transparent;border-style: solid;border-width: 6em 7em;-moz-box-sizing: border-box;   /* Firefox 1, probably can drop this */-webkit-box-sizing: border-box;   /* Safari 3-4, also probably droppable */box-sizing: border-box;   /* Everything else */overflow:hidden}
#contact h1{text-align:left;}
#contact p{color:#FFF;font-family: helveticalight;text-align: left;line-height:1.5em;}
.contact-right-div{display: inline;float: left;margin: 10em 5em 0;width: 37%;}
.contact-left-div{  display: inline-block;float: left;margin: 4em auto 3em;}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-height:480px) and (max-height:700px) {
body{width:414em}
header {margin: 1.5em 0 0;}
.section {width: 16.666666666667%;}
.home-left {width:49%;}
.home-right {width:51%; border-color: transparent;border-style: solid;border-width: 1em 2em;}
.circle {margin:0;width: 25%;}
.circle p {margin-top: 0;}
.icons { width: auto}
.home-icon a {line-height: 0;padding: 20% 0;}
#home-rightimg {margin: 5em auto 0;}
.home-right p {line-height: 1.10;padding: 1em 0 0;}

 #about,
 #contact {border-width: 3em;}
 .about-left-div,
 .contact-left-div {margin: 8em 0 0;}
 #about h1,
 #contact h1 {margin: 0;}
 .about-right-div{margin: 10em 2em 3em; width: 35%;}
 .contact-right-div {margin: 16em 3em 3em; width: 35%;}
 #about p,
 #contact p { margin: 0;}
 
#mmc,
#branding,
#webdev {border-width: 3em 7em;}
#mmc a,
#branding a,
#web a,
#mmc a:hover,
#branding a:hover,
#web a:hover{height:100px;width:200px;display:block;background-position:center;background-repeat: no-repeat}
    
.section h1 {margin: 1.75em auto 0.5em;}
#mmc a:hover,
#branding a:hover,
#webdev a:hover{display:block;background-position:center;border-left:2em solid transparent;-moz-box-sizing: border-box; -webkit-box-sizing: border-box;box-sizing:border-box}
.section h1 {margin: 1.5em auto 0.35em;}

    
    .litebox-overlay img,
	.litebox-overlay iframe {
		margin: 0 auto;}
}