/*

Sewards - Pages Stylesheet
Handwritten by Richard Wilmot (AztecMedia.eu)
sewarsfurnitureandblinds.co.uk

*/

																							/* ------------ Homepage ------------ */


/* ------------ Features ------------ */


#features,
#products {
	margin-bottom: 80px;
} 

#features li,
#products li {
	width: calc(25% - 15px);
	float: left;
	margin-right: 20px;
	position: relative;
	overflow: hidden
}

#features li:last-of-type,
#products  li:last-of-type {
	margin-right: 0;
}

#features li > img,
#products li > img {
	width: 100%;
	height: auto;
	float: left
}


#features li .btn,
#products li .btn {
	background: #FFFFFF;
	color: #4a4a4a
}


#features li .btn:hover,
#products li .btn:hover{
	background-color: #4f2c88 !important;
	color: #FFFFFF !important
}

#features li div.copy-container,
#products li div.copy-container{
	text-align: center;
	background-color: rgba(74, 74, 74, 0.35);
	position: absolute;
	height: 80px;
	top: 50%;
	transform: translate(0 , -50%);
	transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s; 
	-webkit-transition: all 0.5s ease-in-out 0s; 
	-o-transition: all 0.5s ease-in-out 0s;
	width: 90%;
	margin: 5%;
	padding: 25px;
	overflow: hidden
}

#features li div.copy-container .copy,
#products li div.copy-container .copy {
	transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s; 
	-webkit-transition: all 0.5s ease-in-out 0s; 
	-o-transition: all 0.5s ease-in-out 0s;
	position: absolute;
	width: calc(100% - 50px);
	top: 20px;
	transform: translate(0 , 0)
}

#features li div.copy-container h2,
#products li div.copy-container h2 {
	color: #FFFFFF;
	border-bottom: none;
	transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s; 
	-webkit-transition: all 0.5s ease-in-out 0s; 
	-o-transition: all 0.5s ease-in-out 0s;
}

#features li div.copy-container p,
#products li div.copy-container p{
	color: #FFFCFC
}

#features li:hover div.copy-container,
#products li:hover div.copy-container{
	height: 90%;
	background-color: rgba(79, 44, 136, 0.85);
	position: absolute;
	top: 0%;
	transform: translate(0 , 0)
}

#features li:hover div.copy-container .copy,
#products li:hover div.copy-container .copy {
	position: absolute;
	top: 50%;
	transform: translate(0 , -50%)
}

#features li:hover div.copy-container h2,
#products li:hover div.copy-container h2 {
	border-bottom: solid 1px #c8c8c8;
} 

#features li a,
#products li a{
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -25000px;
	position: absolute;
	top: 0;
	left: 0
}


@media screen and (max-width: 1340px) {
	#features li,
	#products li {
		width: calc(50% - 10px);
		margin-right: 20px;
		margin-bottom: 20px;
	}
	#features li:nth-child(2n),
	#products  li:nth-child(2n) {
		margin-right: 0;
	}
}


@media screen and (max-width: 768px) {
	#features li,
	#products li {
		width: 100%;
		margin-right: 0;
	}
}




																				/* ------------ Products ------------ */

#products-page #copy img {
	width: 50%;
	height: auto;
	float: left
}

#products-page #copy .description {
	width: 50%;
	float: right;
	padding-left: 40px
}

#products-page #copy .description .btn {
	color: #4a4a4a;
	background-color: rgba(74, 74, 74, 0.2);
}

#products-page #copy .description .btn:hover {
	background-color: #4f2c88 !important;
	color: #FFFFFF !important
}

#products-page #copy .description .cta {
	background-color:#EF8300;
	color: #FFFFFF;
	padding: 20px;
	font-weight: 400;
    font-family: 'Playfair Display', serif;
	font-size: 40px;
	margin-bottom: 40px;
	text-align: center;
	line-height: 40px;
}

#products-page #copy .description .cta span {
	font-size: 30px;
}


#products-page #copy .description table {
	margin-bottom: 30px;
}

#products-page #copy .description table thead td {
	background: #4f2c88;
	color: white;
	font-weight: 700
}

#products-page #copy .description table td {
	padding: 5px;
	text-align: center
}


#products-page #products li div.copy-container {
    padding: 25px 10px;
}

#products-page #products li div.copy-container .copy {
    width: calc(100% - 20px);
}

#products-page #products li div.copy-container h3 {
    color: #FFFFFF;
    border-bottom: none;
    transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
	font-size: 21px;
	margin-bottom: 20px;
}

																				/* ------------ Specials ------------ */


#specials-container {
	background: #D67072
}

#specials > div {
	background: #f4f4f4;
	margin: 20px 0;padding: 20px;
}

#specials img {
	width: 40%;
	height: auto;
	float: left;
	margin-bottom: 20px;
}

#specials .description {
	width: 60%;
	float: right;
	padding-left: 40px;
}

#specials .description .before,
#specials .description .now {
	font-weight: 400;
    font-family: 'Playfair Display', serif;
	font-size: 20px;
}

#specials .description .now {
	font-size: 30px;
	color: #4f2c88;
	margin: 10px 0
}

#specials .cta {
	background-color:#EF8300;
	color: #FFFFFF;
	padding: 20px;
	font-weight: 400;
    font-family: 'Playfair Display', serif;
	font-size: 40px;
	text-align: center;
	line-height: 40px;
}

#specials .cta span {
	font-size: 30px;
}

#products-specials {
	margin-bottom: 30px;
}

#products-specials div {
	width: calc(33.33% - 10px);
	float: left;
	margin-right: 15px;
	text-align: center
}

#products-specials div:last-of-type {
	margin-right: 0;
}


#products-specials div img {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

#products-specials div .btn {
	color: #4a4a4a;
	background-color: rgba(74, 74, 74, 0.2);
}

#products-specials div .btn:hover {
	background-color: #4f2c88 !important;
	color: #FFFFFF !important
}

#specials-homepage {
	background: #4a4a4a;
	text-align: center;
	margin-bottom: 20px;
}

#specials-homepage img {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

#specials-homepage h3 {
	color: #FFF
}

#specials-homepage .description {
	color: #FFF;
	font-size: 14px;
	line-height: 20px;
	padding: 0 15px
}

#specials-homepage .description .before,
#specials-homepage .description .now {
	font-weight: 400;
    font-family: 'Playfair Display', serif;
	font-size: 18px;
	width: 50%;
	float: left
}

#specials-homepage .description .before span {
	text-decoration: line-through
}

#specials-homepage .description .btn {
	margin: 20px 0
}

#specials-homepage .description .btn:hover {
	background: #FFFFFF;
	color: #4a4a4a
}

@media screen and (max-width: 1024px) {
	#specials-homepage {
		width: 50%;
		margin: 0 auto 20px auto;
	}
}

@media screen and (max-width: 480px) {
	#specials-homepage {
		width: 100%;
	}
	#specials img {
		width: 100%;
	}
	#specials .description {
		width: 100%;
		padding-left: 0;
	}
}


																				/* ------------ News ------------ */

#news-articles > div {
    background: #f4f4f4;
    margin: 20px 0;
    padding: 20px;
	margin-right: 40px;
	margin-bottom: 0px;
	float: left;
	width: 100%;
}

#news-articles > div img {
	width: 50%;
	height: auto;
	float: left;
	margin-right: 20px
}

#news-articles > div h2 {
	clear: both
}

#news-articles > div .btn,
.news-article #content-container #content #copy .btn {
	background-color: #4f2c88;
	color: #FFFFFF;
	margin-top: 20px;
}

#news-articles > div .btn:hover,
.news-article #content-container #content #copy .btn:hover {
	background-color: #4a4a4a;
}



																				/* ------------FAQ ------------ */

.accordion {
  color: #0f3d59;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
	font-size: 20px;
	border-top: solid 1px #c8c8c8;
	background: none;
}

.accordion:after {
	display: none;
	font-family: "Font Awesome 5 Light";
 	content: '\f067';
}

.active:after {
 	content: '\f068';
}

.accordion svg {
	float: right;;
	font-size: 24px;
	color: #4f2c88
}

.active svg,
.accordion:hover svg {
}

.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel:last-of-type {
	border-bottom: solid 1px #c8c8c8;
}


																								/* ------------ Meet the Team ------------ */


.profile-container {
	width: calc(33.33% - 10px);
	position: relative;
	float: left;
	margin: 0 10px 40px 0;
	overflow: hidden
}
.profile-container img {
	width: 100%;
	height: auto;
	float: left
}

.profile-container .bg {
	background-color: rgba(79, 44, 136, 0.85);
	position: absolute;
	bottom: 0;
	left: 0;
	height: 0;
	width: 100%;
	transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s; 
	-webkit-transition: all 0.5s ease-in-out 0s; 
	-o-transition: all 0.5s ease-in-out 0s;	
}

.profile-container .info {
	position: absolute;
	left: 0;
	bottom: -80px;
	padding: 20px;
	transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s; 
	-webkit-transition: all 0.5s ease-in-out 0s; 
	-o-transition: all 0.5s ease-in-out 0s;	
}

.profile-container .info a {
	color: #FFFFFF
}

.profile-container .info h4 {
	font-weight: 400;
}

.profile-container .info h3,
.profile-container .info h4,
.profile-container .info p {
	color: #fff;
	margin-bottom: 5px;
	transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s; 
	-webkit-transition: all 0.5s ease-in-out 0s; 
	-o-transition: all 0.5s ease-in-out 0s;
	padding-bottom: 10px;
}

.profile-container .info p {
	margin-top: 20px
}

.profile-container:hover .bg {
	height: 100%;
}

.profile-container:hover .info h3,
.profile-container:hover .info h4,
.profile-container:hover .info p {
	color: #fff;
}

.profile-container:hover .info {
	bottom: 0px;
}

@media screen and (max-width: 1340px) {
	.profile-container {
		width: calc(50% - 10px);
	}
}

@media screen and (max-width: 1024px) {
	.profile-container {
		width: 100%;
		margin-bottom: 10px;
		background: #4f2c88
	}
	.profile-container img {
		width: 50%;
		height: auto
	}
	.profile-container .info {
		position: absolute;
		left: auto;
		bottom:auto;
		top: 0;
		right: 0;
		width: 50%;
		padding: 20px;
	}
	.profile-container .bg {
		display: none
	}
}

@media screen and (max-width: 768px) {
	.profile-container img {
		width: 100%;
		float: none
	}
	.profile-container .info {
		position: relative;
	}
}


																							/* ------------ Testimonials ------------ */

.testimonial {
	background: #f4f4f4;
	padding: 20px;
	margin-bottom: 20px;
}

																							/* ------------ Contact ------------ */



#contact .contact-form {
}

#contact .contact-form legend {
	display:none
}

#contact .contact-form .fs-left {
	float: left;
	width: 100%
}

#contact .contact-form .fs-right {
	float: right;
	width: 100
}


#contact .contact-form label {
    font-weight: 400;
    font-family: 'Playfair Display', serif;
	background-color:#4f2c88;
	color: white;
	line-height:40px;
	height: 40px;
	width: 100%;
	padding-left: 20px;
	display:inline-block;
	font-size: 20px;
}

#contact .contact-form input,
#contact .contact-form textarea {
	padding:0 20px;
	height:40px;
	border:none;
	display:block;
	margin-bottom:20px;
	line-height:40px;
	color: #4a4a4a;
	background: #f4f4f4;
	width: 100%;
    font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size:15px;
}

#contact .contact-form textarea {
	height:100px;
	line-height: 26px;
	padding: 20px;
}


#contact .error_message li {
	text-align:center;
	color:#900;
}

#contact .error_message {
	display:none
}

#contact .captcha {
	margin-bottom:10px;
	display: inline-block;
	float: left;
	margin-right: 40px;
}

#contact .captcha div div {
	margin: auto
}


#contact .contact-form .btn {
	cursor: pointer;
	border: none;
	color: #FFF;
	margin-top: 20px;
	background: #EF8300
	}

#contact .contact-form .btn:hover {
	background: #4f2c88
	}	
	
	
#contact .alert-danger {
	color:#FFF;
	background:#900;
	padding:10px;
	font-weight:bold;
	width: 50%;
	margin:auto auto 20px auto
}

.small-print {
	font-size: 13px;
	line-height: 20px;
}

.privacy {
	background: #383838;
	padding: 20px;
	color: #FFFFFF;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 22px;
}

@media screen and (max-width: 768px) {
	#contact .contact-form .fs-left,
	#contact .contact-form .fs-right{
		float: none;
		width: 100%;
		margin: 0

	}
}