body {
  background-color: #FFF9E0;
}  

@font-face {
    font-family: 'Segoe Script Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Segoe Script Regular'), url('Segoe Script.woff') format('woff');
} 

.gold {
    color: #d0aa66;
}

.green {
    background-color: #18312B;
}

.wood{
	background-image: url("images/washeduplogo.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	
    title="Washed Up Driftwood Art";	  
}
.foot{
	background-image: url("images/wood.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
    overflow: hidden;
    title="Washed Up Driftwood Art";	  
}

a:link {
    color: black;
}

a:link.gold {
    color: #d0aa66;
}
a:hover {
    color: black;
    background-color: #d0aa66;
    background-image: url("images/wood.jpg");
}



.nav-item a:hover {
    color: black;
    background-color: #d0aa66;
}

.active {
    color: black !important;
    background-color: #18312B !important;
    background-image: url("images/wood.jpg");
}
/*Tell safari to keep original styling on phone numbers*/
a[href^=tel]{
	text-decoration:inherit;
	color:inherit;
}

    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

.award{
	height: 150px;
	width:106px;	
}

.leftaward{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.rightaward{
	grid-column: 11 / 12;
	grid-row: 1 / 2;
}

.contactinfo{
	grid-column: 1 / 12;
	grid-row: 2 /3;
}

.addresstext{
	grid-column: 2 / 11;
	grid-row: 1 / 2;
}

.headtext{
	font-size: 400%;
	font-weight: bold;
	line-height: normal;
}
.mainpics{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.fixedpic{
	border-radius:5px;
	grid-area: 1/1/2/3;
}
.mybackground{
	border-radius:5px;
	grid-area: 1/3/2/5;
}

.alternatepics{	
	display: grid;
	grid-column-gap: 1em; 
	grid-row-gap: 2em;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
}

.leftpic{
	align-self: center;
	grid-column: 1/2;
	width: 100%;
	border-radius:5px;
	justify-items: center;
	align-items: start;
}

.rightpic{
	align-self: center; 
	padding:3em;	
	grid-column: 3/4;
	width: 100%;
	border-radius:5px;
	justify-items: center;
	align-items: start;
}

.photo{
	border-radius: 5px;
	width:308px;
	height:232px; 
	}

.textleft{
	align-self: center;
	display: grid;
	grid-column: 1/3;
	justify-items: center;
	align-items: start;
	text-align: center;
}

.textright{
	align-self: center; 
	padding:3em;
	display: grid;
	grid-column: 2/4;
	justify-items: center;
	align-items: start;
	text-align: center;	
}

.span2of2{
	display: grid;
	grid-column: 1/3;
	justify-items: center;
	align-items: start;
	text-align: center;
}
.header{
	display: grid; 
	grid-template-columns: repeat(11, 1fr); 
	grid-template-rows: 200px 1fr 1fr;
}

@media (max-width:550px) {
    .header{
		display: grid; 
		grid-template-rows: 100px 1fr 1fr;
	}
}
	
@media (max-width:767px) {
    .centrebox {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 'H3' 'paragraph' 'Bullets' 'Image';
    }
    
    .header{
		display: grid; 
		grid-template-rows: 150px 1fr 1fr;
}	
	
    .addresstext{
		grid-column: 1 / 12;
		grid-row: 1 / 2;
	}
	
	 .award{
		height: 120px;
		width:90px;	
    	}
    	
	.leftaward{
		grid-column: 1 / 2;
		grid-row: 2 / 3;
		align-self: end;
	}

	.rightaward{
		grid-column: 11 / 12;
		grid-row: 2 / 3;
		align-self: end;
	}
	
	.contactinfo{
		grid-column: 2 / 11;
		grid-row: 2 / 3;
		
	}
	
	.mainpics{
    	grid-template-rows: 1fr 1fr;
	}
    
    .fixedpic{
		grid-area: 1/1/2/5;
	}
	
	.mybackground{
    	grid-area: 2/1/3/5;
    }
    
.alternatepics{	
	display: grid;
	grid-column-gap: 0px; 
	grid-row-gap: 1em;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

.leftpic{
	align-self: center;
	grid-column: 1/2;
	grid-row: 1/2;
	width: 100%;
	border-radius:5px;
	justify-items: center;
	align-items: start;
}

.rightpic{
	align-self: center; 
	padding:0px;	
	grid-column: 1/2;
	grid-row: 3/4;
	width: 100%;
	border-radius:5px;
	justify-items: center;
	align-items: start;
}

.textleft{
	align-self: center;
	display: grid;
	grid-column: 1/2;
	grid-row: 4/5;
	justify-items: center;
	align-items: start;
	text-align: center;
}

.textright{
	align-self: center; 
	padding:0px;
	display: grid;
	grid-column: 1/2;
	grid-row: 2/3;
	justify-items: center;
	align-items: start;
	text-align: center;	
}
 

.span2of2{
	display: grid;
	grid-column: 1/3;
	justify-items: center;
	align-items: start;
	text-align: center;
	}
	
.row1{grid-row: 1/2}
.row2{grid-row: 2/3}	
.row3{grid-row: 3/4}
.row4{grid-row: 4/5}
.row5{grid-row: 5/6} 
.row6{grid-row: 6/7}
.row7{grid-row: 7/8}
.row8{grid-row: 8/9}   
}

.red {
    color: #ff0000;
}

#zoomimages {
    text-align: center;
    position: relative;
    margin-top: 0px;
    width: 100%;
}

.zoom {
    position: absolute;
    z-index: 0;
}

.end {
    margin-right: 0;
}

.clear {
    clear: both;
}

.zoom a img {
    position: relative;
    border: 0 solid #fff;
}

.fancybox-nav:hover{
	color: black;
    background-color: transparent;
    background-image: none;
} 

a.fancybox-close:hover{
    background-color: transparent;
    background-image: url('fancybox/source/fancybox_sprite.png');
}
.pulsate {
    -webkit-animation: pulsate 10s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.2;
}
@-webkit-keyframes pulsate {
    0% { 
        opacity: 0.2;
    }
    50% { 
        opacity: 1.0;
    }
    100% { 
        opacity: 0.2;
    }
}