body{font-family: 'Nunito', sans-serif;}
h1 {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;color:#fff!important;background-color:#000!important;opacity:0.7;font-family: 'Croissant One', cursive;font-size:48px;padding:12px 24px!important;letter-spacing:4px;transition-delay: 2s;animation:opac 5s}@keyframes opac{from{opacity:0} to{opacity:0.7}}
h2,h3,h4,h5,h6 {font-family: 'Abril Fatface', cursive;font-style: italic;letter-spacing:6px;}
body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
}

delay {transition-delay: 5s;}

.bug {position:absolute;top:0;right:0;font-family: 'Croissant One', cursive;font-size:16px;padding:8px 16px!important;letter-spacing:3px;color: #777;}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url('large/large1.jpg');
    min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("large/large2.jpg");
    min-height: 400px;
}

/* Third image (Testimonials) */
.bgimg-3 {
    background-image: url("large/large3.jpg");
    min-height: 400px;
}

/* Fourth image (Contact) */
.bgimg-4 {
    background-image: url("large/large4.jpg");
    min-height: 400px;
}


.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
        background-attachment: scroll;
    }
}
div.horizontal {width: 100%;height: 550px;overflow: auto;}
.table {
    display: table;
    table-layout: fixed;
    width: 100%;
}
article {
    width: 400px;
    height: 550px;
    display: table-cell;
    background: -webkit-linear-gradient(#D3D3D3, #ffffff);background: -o-linear-gradient(#D3D3D3, #ffffff);background: -moz-linear-gradient(#D3D3D3, #ffffff);background: linear-gradient(#D3D3D3, #ffffff);
    vertical-align: middle;
    text-align: center;
    padding-top: 0px;
    padding-right: 15px;
    padding-bottom: 0px;
    padding-left: 15px;
}
article.narrow {
    width: 200px;
    background: -webkit-linear-gradient(#BEBEBE, #ffffff);background: -o-linear-gradient(#BEBEBE, #ffffff);background: -moz-linear-gradient(#BEBEBE, #ffffff);background: linear-gradient(#BEBEBE, #ffffff);
}
article.var {
    width: 300px;
    background: -webkit-linear-gradient(#e0e0e0, #ffffff);background: -o-linear-gradient(#e0e0e0, #ffffff);background: -moz-linear-gradient(#e0e0e0, #ffffff);background: linear-gradient(#e0e0e0, #ffffff);
}
article.wide {
    width: 600px;
    background: -webkit-linear-gradient(#e0e0e0, #ffffff);background: -o-linear-gradient(#e0e0e0, #ffffff);background: -moz-linear-gradient(#e0e0e0, #ffffff);background: linear-gradient(#e0e0e0, #ffffff);
}
.quote2 {font-weight: 700;position:relative;top:12px;}
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 0% 0 0% 0%;
background-color:#000;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF FOUR  */
.span_2_of_4 {width: 50%;height: 200px;font-style:italic;text-align: center;vertical-align: middle;line-height:200px;background: -webkit-linear-gradient(#e0e0e0, #ffffff);background: -o-linear-gradient(#e0e0e0, #ffffff);background: -moz-linear-gradient(#e0e0e0, #ffffff);background: linear-gradient(#e0e0e0, #ffffff);
}
.span_1_of_4 {width: 25%;height: 200px;color:#fff;font-size: 20px;text-align: center;vertical-align: middle;line-height:200px;}
.span_1_of_4:hover{font-weight: bold;opacity:0.6;color:#000;}
.innocence {background-image: url("gallery/Age%20of%20Innocence/Little%20Red%20Riding%20Hood%20and%20Wolf%20Lino%20Cut.jpg");}
.cityscapes {background-image: url("gallery/Cityscapes/College Hostel Kidderpore Avenue Acrylic on Paper (22x39In).jpg");}
.dance {background-image: url("gallery/Dance/Dance 4 Oil on Board (22x24In)2.jpg");}
.glasswork {background-image: url("gallery/Glasswork/G5(2.16 x 3 In).jpg");}
.golders {background-image: url("gallery/Golders Hill Park Hampstead Heath/Golders Hill (16x20 In).jpg");}
.installation {background-image: url("gallery/Installation/A Ghost.jpg");}
.landscapes {background-image: url("gallery/Landscapes/After Van Gogh Acrylic on Board (14x24In).jpg");}
.portrait {background-image: url("gallery/Portrait and Figure/Green 1 Acrylic on Paper (23.22 x 16.53 In).jpg");}
.printmaking {background-image: url("gallery/Printmaking/Etching in Brown (12 x 8 In).jpg");}
.sculpture {background-image: url("gallery/Sculpture/Tree Art 1.jpg");}
.seascape {background-image: url("gallery/Seascape/Surface Colour of the Sea A Acrylic on Paper (11.7 x 16.5 In).jpg");}
.textile {background-image: url("gallery/Textile/4F Batik (17.5 x 13 In).jpg");}
.wall {background-image: url("gallery/Wall Hangings/Wallhanging 4  (65.55 x 46.04 In).jpg");}
.blank {background: -webkit-linear-gradient(#BEBEBE, #ffffff);background: -o-linear-gradient(#BEBEBE, #ffffff);background: -moz-linear-gradient(#BEBEBE, #ffffff);background: linear-gradient(#BEBEBE, #ffffff);
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 0% 0 0% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}