/* cmsms stylesheet: reset modified: 12/04/18 06:29:42 */
@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
    text-decoration: none; border:none;outline:0;
}
/* cmsms stylesheet: ho ceramics modified: 01/11/19 06:25:23 */
body{
    height: 100%;
    font-family: Ubuntu, "Trebuchet MS", sans-serif;
    }

html{
    height:100%;
        font-size: 100%;
        }

/******************/
/* resets & fixes */
/******************/

*, *:after, *:before{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.clearfix:before, 
.clearfix:after{
	content:"";
	display:table;
}

.clearfix:after{
	clear:both;
}



/******************/
/*   structure   */
/******************/

div#pagewrapper{
    width: 100%;
    max-width:960px;
    margin:0 auto;
    position: relative;
}

header{
    width:100%;
    height:8em;
    background-image: url(https://helenormerodceramics.co.uk/uploads/images/header_960.jpg);
    background-repeat: no-repeat;
    padding: 0 1.5em;
}

#headerTitle{
    float:left;
    height: 8em;
    width:75%;
}



#headerLogo{
    float: right;
    height: 8em;
    width: 20%;
    
}

#headerLogo img{
    height:5em;
    float: right;
    margin:1.5em 0;
}

div#menu{
    width:100%;
    height: 2em;
    background-color: #689bb0;
    font-size: 0.9em;
    margin:0 0 2em 0;
}


div#content{
    padding:0 0 2em 0;
    width:100%;
}

div#contentHome{
    
    width:100%;
}

div#homePic{
display:block;
}

div#homePic_narrow{
display:none;
}

#homePic img, #homePic_narrow img{
width:100%;
height:auto;
margin-bottom:1em;
}

div#homeText{
width:75%;
margin:auto;
}

#footer{
width:100%;
margin-top:2em;
}

div#leftColumn{
width:33%;
margin-right:2%;
float:left;
}

div#rightColumn{
width:65%;
float:left;
}

#leftColumn img, #rightColumn img{
width: 100%;
height:auto;
}

/******************/
/*   typography   */
/******************/

p{
    font-size: 1em;
    line-height: 1.4em;
    margin-bottom: 0.4em;
}

#footer p{
 font-size: 0.8em;
}

#homeText p{
text-align:center;
font-size:1.2em;
}

h1{
    font-size: 1.4em;
    color: #5b8092;
    margin-bottom: 1em;
}

#headerTitle h1{
    color:#ffffff;
    margin: 0;
    line-height: 4em;
    font-size: 2em;
    
}

h2{
    font-size: 1.2em;
    color: #5b8092;
    margin: 1em 0;
}

a{
    color:#5b8092;
}

/******************/
/*   navigation   */
/******************/
div#menu ul#wide{
    list-style-type: none;
margin-left:1.2em;

}

div#menu ul#wide li {
float:left;
    line-height: 2em;
    color: #ffffff;
    padding:0 0.8em;
    transition: all 0.4s linear; 
}

.parent ul{
display:none;
position:absolute;

}

.parent ul li{
width:100%;
height: 2em;
background:rgba(151, 158, 184, 1);
 border-top: 1px solid #ffffff;
}

ul#wide .parent ul{
width:30%;
margin-left:-0.8em;
}

li.parent:hover ul.subdrop{
    display:block;
}


div#menu ul#narrow{
    display:none;
}

ul#narrow{
    width: 100%;
    float: left;
    list-style: none;
    position: relative;

}

ul#narrow li{
    height: 2em;
    padding-top:0.25em;
   
}


ul#narrow li:hover ul#dropDown{
    display: block;
}

ul#dropDown{
    list-style: none;
    position: absolute;
    display: none;
    width:100%;
    background:rgba(134, 184, 209, 1);
    margin-top:0.1em;
}



ul#narrow .parent ul{
width:100%;
margin-left:-1em;
}


ul#narrow .parent li{
background:rgba(151, 158, 184, 1);
text-transform:none;
}

ul#dropDown li{
    font-size: 1em;
text-transform:uppercase;
    padding:0 1em;
    margin: 0;
    line-height: 2em;
    border-top: 1px solid #ffffff;
}

img#burger{
    height:80%;
   margin-left: 1em;
}

div#menu a{
    color:#fff;
}



div#menu ul#wide  li:hover {
background:rgba(85, 97, 137, 1);
}



/******************/
/*  galleries   */
/******************/

.galleryThumbnail{
    width:15%;
    margin:0 2% 2% 0;
    float: left;
}

.galleryThumbnail img{
    width:100%;
height:auto;
}

.lightbox{
    display: none;
  position: absolute;
  z-index: 9999;
 
  width: 100%;
  height: 100%;

  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
}


.lightbox img{
    display: block;
    width: auto;
height:auto;
    margin:1% auto 5% auto;
    border: 0.5em solid black;
}

.lightbox p{
    color:black;
    
    text-align: center;
    font-size: 1em;
}

.lightbox:target {
  display: block;
}

/******************/
/*  media queries   */
/******************/

@media only screen 
and (min-width : 801px) 
and (max-width : 100000px) {

.galleryThumbnail:nth-child(6n+0){
    margin-right: 0;
}
}

@media only screen 
and (min-width : 421px) 
and (max-width : 800px) {

.galleryThumbnail:nth-child(4n+0){
    margin-right: 0;
}
}

@media only screen and (max-width: 800px) {
div#content{
        width: 96%;
        margin:0 auto;
    }

.galleryThumbnail{
    width:23.5%;
    
}


}

@media only screen and (max-width: 680px) {

header{
        height:5em;
        padding: 0 1em;
        background-image: url(https://helenormerodceramics.co.uk/uploads/images/header_680.jpg);
    }
    
    #headerLogo{
        height: 5em;
    }
    
    #headerLogo img{
        height:3.2em;
        margin: 0.9em 0;
    }
    
    #headerTitle{
        height: 5em;
    }
    
    #headerTitle h1{
    font-size: 1.3em;
    line-height: 3.9em;
}

 ul#wide{
        display: none;
    }
    
    div#menu{
        margin-bottom: 0;
    }
   
     div#menu ul#narrow{
    display:block;
}

div#content h1{
margin-top:1.5em;
}

 div#leftColumn{
display:none;
}

div#rightColumn{
width:100%;
}
    
.lightbox img{
    
    width: 90%;
   
}
    
    .lightbox p{
    margin:3% 5% 2% 5%;
    font-size: 0.9em;
}

}

@media only screen and (max-width: 420px) {
#headerLogo{
        display: none;
    }
    
    
    #headerTitle{
        width: 100%;
    }
    
    .galleryThumbnail{
    width:32%;
    
}
    
.galleryThumbnail:nth-child(3n+0){
    margin-right: 0;
}
    
    #homeText p{
    font-size: 1em;
}

div#homePic{
display:none;
}

div#homePic_narrow{
display:block;
}

#footer p{
 font-size: 0.7em;
padding:0 1em;
}

    
}