@import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

*, html * {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	text-decoration: none;
}

body {
	background-color: #cbcacf;
	font-family: Kameron, "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-weight: 400;
}
#gestalt {
	padding-bottom: 25px;
}

#header { 
     background-color: #fff;
     position: relative;
     width: 100%;
     box-sizing: border-box;
     padding: 25px;
}

/* NAVIGATION */
#nav {
     position: absolute;
     right: 25px;
     top: 48px;
}
#nav ul { list-style: none;}
#nav li { 
     display: inline-block;
     padding: 0 10px;
     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
     font-size: 1em;
}
a:link, a:visited { color: #8390BA;}
a:hover, a:focus { color: #4C005A;}
a:active { color: #49536d;}

/* MAINCONTENT */
#maincontent, #footer {
	position: relative;
	padding: 25px;
     max-width: 1565px;
	margin: 0 auto;
	color: #2b2a2f;
}
#maincontent h2 {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 3px;
	color: #000;
     margin-top: 3em;
}
#maincontent p { font-size: 18px; }

/* GALLERY */
#gallery::after {
     content: " ";
     display: block;
     clear: both;
}

ul#thumbs {
     list-style: none;
}
ul#thumbs li {
     float: left;
     margin: 0 0 2em 0;
     position: relative;
     width: 33.3%;
}
ul#thumbs li img { 
     box-sizing: border-box;
     width: 98%;
     padding: 1%;
}
ul#thumbs strong, ul#thumbs span {
     margin-left: 1%;
}

/* CLIENTS */
#clients ul {
     list-style: none;
     font-size: 18px;
     -webkit-column-count: 3; /* Chrome, Safari, Opera */
     -moz-column-count: 3; /* Firefox */
     column-count: 3;

     -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
     -moz-column-gap: 40px; /* Firefox */
     column-gap: 40px;
     padding-bottom: 50px;
     max-width: 960px;
}

/* WORK */
#work { background-color: #fff; }
#work h1 { 
     max-width: 900px; 
     margin: .5em auto;
     position: relative;
}
#work h1 span {
     float: right;
}
#work #maincontent p {
     max-width: 900px;
     margin: 2em auto;
     font-size: 20px;
     line-height: 1.4em;
}
#work #maincontent p img { 
     width: 100%;
     margin: 10px 0; 
}

/* LINKS */
#links #maincontent ul {
     list-style: none;
     font-size: 20px;
     line-height: 1.4em;
}
#maincontent ul.reliableLinks ul { 
     display: none; 
}
#links ul ul { margin-left: 1em; }

/* FOOTER */
#footer p {
     display: inline-block;
     margin-bottom: 1em;
}
#footer a:link, #footer a:visited {
     padding: 7px 23px;
     color: #000;
     font-size: 18px;
}
#footer a:hover, #footer a:focus { color: #4C005A; }
#footer a:active { color: #49536d; }

#phone { background: transparent url(../media/icon-phone.png) no-repeat left center; }
#e-mail { background: transparent url(../media/icon-mail.png) no-repeat 0 4px; }

#work #phone { background: transparent url(../media/icon-phone-blue.png) no-repeat left center; }
#work #e-mail { background: transparent url(../media/icon-mail-blue.png) no-repeat 0 4px; }


/* single */
@media only screen and (max-width: 610px) {
     ul#thumbs li { width: 100%; }
     #clients ul {
          -webkit-column-count: 1; /* Chrome, Safari, Opera */
          -moz-column-count: 1; /* Firefox */
          column-count: 1;
     }
}

/* double */
@media only screen and (min-width: 611px) and (max-width: 1100px) {
     ul#thumbs li { width: 50%; }
     #clients ul {
          -webkit-column-count: 2; /* Chrome, Safari, Opera */
          -moz-column-count: 2; /* Firefox */
          column-count: 2;
     }
}

/* menu placement for narrow screens */
@media only screen and (max-width: 700px) {
     #nav {
          position: relative;
          left: 75px;
          top: auto;
          right: auto;
          padding-top: 10px;
     }
}

/* for phones less than 450 wide */
@media only screen and (max-width: 450px) {
     #logo {
          max-width: 100%;
          box-sizing: border-box;
     }
     #nav {
          position: relative;
          left: auto;
          top: auto;
          right: auto;
          padding-top: 10px;
     }
}