/* 
* Amazium V3.1
* Copyright 2012, Mike Ballan
* www.amazium.co.uk
*/



/***** Screen 1200px+ *****/

header { height: 100px; margin: 0; text-align: left; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 100; background-color: #676B6A; -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.25);}
.description { height: 100px; margin: 0; text-align: left; width: 100%; overflow: hidden;  }
.portfolio { padding-top: 0; padding-left: 0; text-align: center; width: 100%; clear:both;  }
.thumbsquare { width: 20%; margin: 0; float: left; position: relative;  }
.thumbsquare img { width: 101%; height: auto; }
.catsquare { width: 32%; margin: 0 1.3% 1.3% 0; float: left; position: relative; text-align: center; }
.catsquare img { width: 100%; height: auto; }

div.hover { position: absolute; padding: 0; bottom:0; height: 100%; width: 100%; opacity: 0; }
div.hover h2 { font:16px 'Museo-700', sans-serif; color:#fff; text-align: center; margin-bottom: 5px; }
div.hover p { font:12px 'MuseoSans-500', sans-serif; color:#d5d2bf; text-align: center;  }
div.hover p i { color:#fff;  }

.vcenter {position: relative; top: 50%; transform: translateY(-50%); padding: 0 20% 0 20%;}
.logodiv { margin: 0; padding: 0; position: absolute; left:50px; top:24px;  border:0; }
.zetagram-logo { width: 190px; height: 48px; background: transparent url(../images/zetagram-logo-190.png) no-repeat; background-size:cover;}

.slides img { border:1px solid #ccc; margin-bottom: 3%; }

nav { margin: 0; padding: 0; position: fixed; right:50px; top:42px; text-align: right; z-index: 1000; }
nav ul { margin: 0; padding: 0; background: none; font:14px 'MuseoSans-500', sans-serif; }	
nav ul li { display: inline; margin: 0; padding: 0px 10px 0px 10px; background: none; list-style: inside;}
nav ul li i.menu-icons { display: none;}
nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active, nav ul li a:focus { text-decoration: none; color: #D5D2BF; }
nav ul li a:hover { text-decoration: none; color: #fff; }


h3 { color: #777; background: #ccc; font:14px 'Museo-700', sans-serif; padding: 5px 10px 5px 10px; margin: 20px 0 15px 0;}

.profile h4, .info h4, .description h1{ color: #fff; background: #676B6A; font:11px 'MuseoSans-500', sans-serif; padding: 6px 3px 5px 10px; margin: 20px 0 20px 0; text-transform: uppercase; letter-spacing: 2px; clear: both;}
.profile h3 { color: #676B6A; background: #fff; font:14px 'Museo-700', sans-serif; padding-left:10px; padding-right:10px; margin: 0 0 20px 0;}
.profile h2 { color: #676B6A; /*background: #fff;*/ font:14px 'Museo-700', sans-serif; padding-left:10px; padding-right:10px; margin: 0 0 20px 0;}
.row h1 { color: #676B6A; font:24px 'Museo-700', sans-serif; padding-left:0px; padding-right:0px; margin: 20px 0 20px 20px;}
.info h1 { color: #676B6A; font:24px 'Museo-700', sans-serif; padding-left:0px; padding-right:0px; margin: 0 0 20px 0;}
.profile ul { color: #676B6A; font:14px 'Museo-700', sans-serif; padding-left:10px; padding-right:10px; margin: 0 0 20px 0;}
.profile p, .info p, dd, dt, ol { color: #676B6A; font:13px 'MuseoSans-500', sans-serif; line-height: 19px; font-weight: normal;}
.info ul, .description ul{ color: #676B6A; font:14px 'Museo-700', sans-serif; padding-left:10px; padding-right:10px; margin: 0 0 20px 0;}
.cta { padding: 10px; border: 1px solid #ccc; margin-bottom: 20px;}
.profile h4.coltop, .info h4.coltop, .profile h3.coltop, .info h3.coltop {margin-top:0px;}

table.hours { color: #676B6A; font:13px 'MuseoSans-500', sans-serif; line-height: 19px; font-weight: normal; margin-bottom:10px; border:0;}
table.hours td {padding: 0 20px 8px 0;}


/***** Screen Smaller than 1199px *****/
@media only screen and (min-width: 960px) and (max-width: 1199px) {

header { height: 100px;}
.description { height: 100px;}
.portfolio { padding-top: 0; padding-left: 0; }
.thumbsquare { width: 25%; margin: 0; }
.catsquare { width: 48%; margin: 0 2% 2% 0;  }
div.hover h2 { font:16px 'Museo-700', sans-serif;  }
div.hover p { font:12px 'MuseoSans-500', sans-serif;  }
.logodiv { left:50px;}
.profile p, .info p, dd, dt { font-size:13px; line-height: 19px;}
.row h1 { margin: 20px 0 20px 16px;}
.h1right h1 { margin: 20px 0 20px 0px;}
}

/***** Tablet (Smaller than 959px) *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {

header { height: 100px; }
.description { height: 100px;}
.portfolio { padding-top: 0; padding-left: 0; }
.thumbsquare { width: 25%; margin: 0;  }
.catsquare { width: 48%; margin: 0 2% 2% 0;  }
div.hover h2 { font:16px 'Museo-700', sans-serif;  }
div.hover p { font:12px 'MuseoSans-500', sans-serif;  }
.logodiv { left:50px;}
.profile p, .info p, dd, dt {font-size:12px; line-height: 18px;}
.vcenter {padding: 0 10% 0 10%;}
.row h1 { margin: 20px 0 20px 14px;}
.h1right h1 { margin: 20px 0 20px 0px;}
}

/***** Mobile (landscape 420px) *****/
@media only screen and (min-width:481px) and (max-width: 767px) {

header { height: 80px; position: absolute;}
.description { height: 80px;;}
.portfolio { padding-top: 0; padding-left: 0; }
.thumbsquare { width: 33.33%; margin: 0;  }
.catsquare { width: 32%; margin: 0 1.3% 1.3% 0;  }
div.hover h2 { font:14px 'Museo-700', sans-serif;  }
div.hover p { display: none;   }
.logodiv { left:30px; top:15px;}
.zetagram-logo { width: 48px; height: 48px; background: transparent url(../images/zetagram-motif.png) no-repeat; background-size:cover;}
.profile p, .info p, dd, dt {font-size:12px; line-height: 18px;}
.profile h4.coltop, .info h4.coltop, .profile h3.coltop, .info h3.coltop {margin-top:inherit;}
.row h1 { margin: 20px 0 20px 0px;}

nav { margin: 0; padding: 0; position: absolute; right:30px; top:34px; text-align: right; }
nav ul li { padding: 0px 10px 0px 10px;}

.pageimage {height: 200px;}

	
}	 

/***** Mobile (portrait 300px) *****/
@media only screen and (max-width: 480px) {

header { height: 80px; }
.description { height: 80px;}
.portfolio { padding-top: 0; padding-left: 0; }
.thumbsquare { width: 50%; margin: 0; }
.catsquare { width: 48%; margin: 0 2% 2% 0;  }
div.hover h2 { font:14px 'Museo-700', sans-serif; }
div.hover p { display: none; }
.logodiv { left:30px; top:15px;}
.zetagram-logo { width: 48px; height: 48px; background: transparent url(../images/zetagram-motif.png) no-repeat; background-size:cover;}
.profile p, .info p, dd, dt {font-size:12px; line-height: 18px;}
.profile h4.coltop, .info h4.coltop, .profile h3.coltop, .info h3.coltop {margin-top:inherit;}
.row h1 { margin: 20px 0 20px 0px;}


nav { margin: 0; padding: 0; position: fixed; right:30px; top:31px; text-align: right; width: 250px;}
nav ul li { padding: 0; margin: 0 0 0 8px;}
nav ul li i.menu-icons { display: inherit; border: 1px solid #8c9190; padding: 4px; }
.icon-only { display:none !important; }

.pageimage {height: 200px;}

}