@charset "UTF-8";
/* CSS Document */

body {
	background:url("../images/seattlebg2.jpg") center -60px no-repeat #006699;
}

p {	color:#036;}

.button {background:#036;color:#fff;padding:10px;display: inline-block;}
.button:hover{background:#069;}

.header {
	margin:35px auto 20px;
	width:100%;
	text-align:center;
}

#imageslideshow1{max-width:100% !important;}

#imageslideshow1 img{    width: 100%;
    height: 100%;
    object-fit: cover !important;
    overflow: hidden;
	margin:0 !important;
}

h1 {color:white;
font-family:verdana;
font-size:30px;
letter-spacing:10px;
line-height:1.25em;
}

:link {
	color:#036;
}

h2 {
	color:#036;
	letter-spacing:5px;
	text-align:center;
	font-family:verdana;
	font-size:20px;
	margin-bottom:20px;
}

.wrapper {
	background:url("../images/bgswipe.png")  transparent;
	padding: 25px 35px;
	color: #666;
	font-family: Verdana;
	max-width: 850px;
	margin: 20px auto 0;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	opacity: 1;
}

.bostik{background-image: url("../images/bostik-logo-rev.png");}
.bostik:hover{background-image: url("../images/bostik-logo.png")}

.laticrete{background-image: url("../images/laticrete-logo-rev.png");}
.laticrete:hover{background-image: url("../images/laticrete-logo.png")}

.cmp{background-image: url("../images/cmp-logo-rev.png");}
.cmp:hover{background-image: url("../images/cmp-logo.png")}

.mapei{background-image: url("../images/mapei-logo-rev.png");}
.mapei:hover{background-image: url("../images/mapei-logo.png")}

.triton{background-image: url("../images/triton-logo-rev.png");}
.triton:hover{background-image: url("../images/triton-logo.png")}

.rubi{background-image: url("../images/rubi-logo-rev.png");}
.rubi:hover{background-image: url("../images/rubi-logo.png")}

.schluter{background-image: url("../images/schluter-logo-rev.png");}
.schluter:hover{background-image: url("../images/schluter-logo.png")}

.sabias{background-image: url("../images/sabias-logo-rev.png");}
.sabias:hover{background-image: url("../images/sabias-logo.png")}

.myButtonLink {
	display: block;
	width: 100px;
	height: 100px;
	background: url('/path/to/myImage.png') bottom;
	text-indent: -9999px;
}
.myButtonLink:hover {
	background-position: 0 0;
}

.gallery {
	background:url(images/gallerybutton.png) no-repeat;
}
	
.grid-container {
  	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	grid-template-rows: auto auto;
  	gap: 1rem;
  	padding: 10px;
}

.grid-container div {
	background-color: #036;
	background-repeat:no-repeat;
  	background-position: center;
	height:50px;
	min-width:150px;
    text-align: center;
	padding: 20px 0;
	position: relative;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	vertical-align:middle;
}

.grid-container div:hover { 
	background-color: #fff;
	transition: background-color 0.3s ease-out;
}