@charset "UTF-8";
/* CSS Screen Document */
/* -----------------------------------------------
visual foundry ltd
client:   Crickhowell Glass & Glazing
cpdated:  04.06.19
-----------------------------------------------
Crickhowell Glass & Glazing - Color Chart
background:  #FFFFFF
 */
 
 
html {
	padding: 0; 
	margin: 0; 
	border: 0; 
	font-size: 100%;
	font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-ms-overflow-style: scrollbar;
	-webkit-tap-highlight-color: transparent;
}


body {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	text-align: left;
	background: #fff;
	color: #212529;
}



/* font size */

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 0;
	margin-bottom: 0;
}

h1, .h1 {
	color: #FFF;
	font-weight: 200;
	font-size: 2.8vw;
}

h2, .h2 {
	color: #000;
	font-weight: 300;
	font-size: 1.6vw;
	padding-bottom: 20px;
}

h3, .h3 {
	color: #bb3030;
	font-weight: 500;
	font-size: 1vw;
	padding-bottom: 40px;
}

h4, .h4 {
	color: #bb3030;
	font-weight: 500;
	font-size: 0.8vw;
	padding-bottom: 10px;
}

h5, .h5 {
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
	font-weight: 400;
	font-size: 1vw;
	margin-top: 20px;
	margin-bottom: 0;
}

p, li {
	font-size: 100%;	
}

p a, li a {
	color: #f7665c;
	text-decoration: none;
}

p a:hover, li a:hover {
	color: #f7665c;
	text-decoration: underline;
}



/* DIV Layout */

#logo {
	position: relative;
	top: 0;
	display: inline-block;
	margin: 0 auto;
	padding: 25px 0 25px 0;
	height: auto;
	width: 100vw;
	background-image: linear-gradient(rgba(247,102,92,1), rgba(117,17,16,1));
	z-index: 1;
}

#menu {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0;
	height: auto;
	min-height: 50px;
	width: 100vw;
	border-top: solid 2px #f7665c;
	background: #32414e;
	z-index: 1;
}

#photo {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0;
	height: 25vw;
	max-height: 500px;
	overflow: hidden; 
	width: 100vw;
	clear: both;
	z-index: 1;
}

#content {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 40px 0 70px 0;
	height: auto;
	width: 100vw;
	text-align: left;
	z-index: 1;
}

#map {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0;
	height: 25vw;
	max-height: 500px;
	overflow: hidden; 
	width: 100vw;
	clear: both;
	z-index: 1;
}

#mobilemap {
	display: none;
}

#subfooter {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 40px 0 70px 0;
	height: auto;
	width: 100vw;
	text-align: left;
	background: #f3f2f2;
	z-index: 1;
}

#footer {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 40px 0 70px 0;
	height: auto;
	width: 100vw;
	text-align: left;
	background: #2c3941;
	z-index: 1;
}



/* logo DIV Layout */

.details {
	width: 96%;
	max-width: 1350px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	z-index: 2;
}

.details h2 {
	display: none;
}



/* menu DIV Layout */

.menu-container {
	width: 96%;
	max-width: 1350px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	z-index: 2;
}

.links {
	float: left;
	width: 50%;
	text-align: left;
}

.tel {
	float: right;
	width: 50%;
	text-align: right;
	color: #fff;
}

.tel a {
	color: #FFF;
	text-decoration: none;
}

.tel a:hover {
	color: #FFF;
	text-decoration: underline;
}

#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#menu li {
	float: left;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 0.7vw;
}

#menu a {
	display: block;
	color: #fff;
	text-align: center;
	padding: 1.6em 1em 1.6em 1em;
	text-decoration: none;
}

#menu a:hover {
	color: #fff;
	background-color: #f7665c;
	text-decoration: none;
}

.tel p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1vw;
}

.coral {
	color: #f7665c;
}



/* photo DIV Layout */

.responsive {
	width: 100%;
  	height: auto;
}



/* content DIV Layout */

.text {
	width: 96%;
	max-width: 1350px;
	margin: 0 auto;
	padding: 0;
	text-align; left;
	z-index: 2;
}

.text ul {
  list-style: none;
}

.text ul li::before {
  content: "\2022";
  color: #f7665c;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -2em;
}

.text li {
	padding-bottom: 0.5em;
}

.text h2 {
	padding-top: 0.5em;
	padding-bottom: 1em;
}

.d-none {
	display: none !important;

}




/* footer DIV Layout */

#footer p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 0.5vw;
	color: #FFF;
}

#footer p a {
	color: #f7665c;
	text-decoration: none;
}

#footer p a:hover {
	color: #f7665c;
	text-decoration: underline;
}

.rhs {
	float: right;
}



/* slideshow */

.centralign {
	margin: 0 auto;
	width: 70%;
	text-align: center;
}

.mySlides {
	display: none;
}

.w3-button {
	border: none;
	display: inline-block;
	padding: 10px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	font-size: 20px;
}

.w3-button {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}   

.w3-button:disabled {
	cursor: not-allowed;
	opacity: 0.3
}

.w3-button:hover {
	color: #2c3941 !important;
	background-color: #ccc !important
}

.w3-display-left {
	position:absolute;
	top: 500px;
	left: 20%;
	transform: translate(0%,-50%);
	-ms-transform: translate(-0%,-50%)
}

.w3-display-right{
	position: absolute;
	top: 500px;
	right : 20%;
	transform: translate(0%,-50%);
	-ms-transform: translate(0%,-50%)
}

.w3-navy,.w3-hover-navy:hover {
	color: #f7665c !important;
	background-color: #2c3941 !important
}