@charset "UTF-8";

/* 

Responsive Holding Page Layout

www.worcestershiretileandstone.co.uk 

Custom Responsive Template created by Pedleyonline 2025

Fonts:

font-family: 'Comfortaa', cursive;
font-family: 'Open Sans', sans-serif;

Colours:

Clent green - 87bd25
Clent purple - 7a2182

*/

body {
	background: url(../_graphics/bathroom-light-bg.jpg) center top no-repeat fixed #FFF;
 font-family: "Montserrat", sans-serif;
background-size: 100%;
	color: #4a5b5e;
  text-shadow:
    -1px -1px 0 white,
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white;
}

body .overlay {
}

h1 {
  color: #000;
}

#mainImage {
	margin-bottom: 40px;
}
 
#mainImage img {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	display: block;

	height: auto;
	padding-top: 60px;
}

#featureBar {
	border-radius:  5px;
	font-size: 2.4em;
	font-weight: bold;
	text-align: center;
	padding: 20px 100px;
	margin-bottom: 30px;
	transition-property: color;
	transition-duration: .6s;
	transition-timing-function: ease-out;	
}

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

#contactInfo strong,
#featureBar a,
#contactInfo a {
	font-weight: bold;
	color: #4a5b5e;
}
#featureBar a:hover,
#contactInfo a:hover {
	color: #3b484a;
	text-decoration: none;
}

#footerText {
	text-align: center;
	height: 100px;
}

/* Animation */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* start slightly below */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* move to normal position */
  }
 }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* start slightly below */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* move to normal position */
  }
 }
 
 .fade-in-up {
  opacity: 0; /* ensure it starts hidden */
  animation: fadeInUp 1s ease-out forwards; /* duration + easing */
}

/* Social Media */

#socialMedia ul li {
list-style: none;
	margin: 0;
	padding: 0;
}

#socialMedia {
	padding-bottom: 20px;
}

#socialMedia ul {
display: block;
	margin-right: auto;
	margin-top: 40px;
	height: 64px;
	margin-left: auto;
	width: 138px;
padding-left: 0;
}

#socialMedia li a img {
float: left;
border-radius: 48px;
margin-right: 2%;
width: 46%;
margin-left: 2%;
transition-property: background-color;
transition-duration: .6s;
transition-timing-function: ease-out;
	background-color: #607578;
	border-style: none;
	padding: 6px;
}

#socialMedia li a img:hover {
	background-color: #445254;
}

#socialMedia li img#facebook {

}
#socialMedia li img#facebook:hover {
}
#socialMedia li img#twitter {

}



/* XS */
@media (min-width: 206px) { 

body {
	background: url(../_graphics/bathroom-light-bg.jpg) center center no-repeat fixed #FFF;
background-size: 300%;
}

#mainImage.fade-in img  {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
} 

#featureBar {
	font-size: 1.4em;
	padding: 0 20px;
}

#contactInfo .email a {
	font-size: .9em;
}

 }

/* SM */
@media (min-width: 768px) { 


body {
	background: url(../_graphics/bathroom-light-bg.jpg) center top no-repeat fixed #FFF;
background-size: 180%;
}

#mainImage img {
	width: 600px;
	height: auto;
}

#featureBar {
	font-size: 1.6em;
	padding: 20px 20px;
}

 }

/* ML */
@media (min-width: 992px) { 

body {
	background: url(../_graphics/bathroom-light-bg.jpg) center center no-repeat fixed #FFF;
background-size: 140%;
}

#featureBar {
	font-size: 1.6em;
	padding: 20px 20px;
}

 }

/* XL */
@media (min-width: 1200px) { 

body {
	background: url(../_graphics/bathroom-light-bg.jpg) center center no-repeat fixed #FFF;
		background-size: 120%;
}

#featureBar {
	font-size: 2em;
	padding: 20px 100px;
}

 }