/*

Abbey Manor Business Centre - Pages Stylesheet
Handwritten by Richard Wilmot (AztecMedia.eu)
http://www.yeovilbusinesscentre.co.uk

*/

																					/* ------------ Homepage ------------ */
																					
#video {
	position:relative;
	margin-bottom:130px;
}

video
{
	width: 100%;
    height: auto;
    max-height: 100%;
}

#video img {
	width:100%;
	height:auto;
}


#watch-our-video #video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}

#watch-our-video #video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


#offer-space-feature {
	background:#597bbd;
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	width:870px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	position:absolute;
	bottom:-130px;
	color:#FFF;
	padding:20px;
}

#offer-space-feature h2 {
	border-bottom:#FFF solid 1px;
	display:inline-block;
	padding-bottom:5px;
	font-size:22px
}

#offer-space-feature .btn {
	background:#fff;
	color:#7f7f7f;
}

#offer-space-feature .btn:hover {
	background-color:#7f7f7f;
	color:#FFF
}

#video a.full-video-link {
	position:absolute;
	top:0;
	text-indent:-25000px;
	display:block;
	width:100%;
	height:100%;
}

@media screen and (max-width: 870px) {	
	#video {
		margin-bottom: 30px;
	}
	#offer-space-feature {
		position: static;
		width:100%
	}
}


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


#features {
}

#features div {
	width: -moz-calc(50% - 35px);
	width: -webkit-calc(50% - 35px);
	width: -o-calc(50% - 35px);
	width: calc(50% - 35px);
	background:#f4f4f4
}

#features div.conference {
	float:left;
	height:470px;
}

#features div.video,
#features div.cafe {
	float:right;
	height:200px;
	font-size:14px;
	line-height:20px;
	padding-right:20px;
}

#features div.video {
	margin-bottom:70px;
}

#features h3,
#features h4 {
	border-bottom:#7f7f7f solid 1px;
	display:inline-block;
	padding-bottom:5px;
}

#features h4 {
	margin-top:20px;
}

#features div.conference img {
	margin-bottom:20px;
	width:100%
}

#features div.video img,
#features div.cafe img {
	float:left;
	margin-right:20px;
}


@media screen and (max-width: 1170px) {	
	#features div {
		width: 100%;
		max-width:600px;
	}
	#features div.video {
		margin-bottom: 30px;
	}
	#features div.conference,
	#features div.video,
	#features div.cafe {
		float:none !important;
		margin:auto;
		margin-bottom:20px;
	}
	#features div.conference {
		height:auto;
		padding-bottom:20px;
	}
}

@media screen and (max-width: 640px) {	
	#features div.video,
	#features div.cafe {
		width: -moz-calc(50% - 15px);
		width: -webkit-calc(50% - 15px);
		width: -o-calc(50% - 15px);
		width: calc(50% - 15px);
		padding:0;
		height:auto;
		padding-bottom:20px;
		float:left !important
	}
	#features div.cafe {
		float:right !important
	}
	#features div.video img,
	#features div.cafe img {
		margin:0;
		width:100%;
	}
	#features div.video p,
	#features div.cafe p {
		padding:0 10px
	}
}

@media screen and (max-width: 640px) {	
	#features div.video,
	#features div.cafe {
		width:100%
	}
	#features div.video img,
	#features div.cafe img {
		width: auto;
		margin: auto;
		float:none;
		display:inherit
	}
}

																					/* ------------ Offices ------------ */
																					
.offices {
	text-align:center;
	font-size:0;
}

.offices li {
	display:inline-block;
	font-size:14px;
	width:48%;
	margin:0 1%;
	vertical-align:top;
	position:relative;
	overflow:hidden;
	margin-bottom:20px;
}

#content .offices li::before,
#content .offices li::after {
	content: none;
	margin-right:0;
}

.offices li a {
	color:#c24b6a !important;
	background-color:#f4f4f4;
	display:block;
	padding:10px 20px 10px 10px;
	min-height:130px;
	-webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}

.offices li a:hover {
	text-decoration:none;
	
	background-color: #c24b6a;
	color:#FFF !important;
}

.offices li .img {
	float:left;
	position:relative;
	overflow:hidden;
}

.offices li .text {
	float:right;
	width: -webkit-calc(100% - 170px);
    width:    -moz-calc(100% - 170px);
    width:         calc(100% - 170px);
}


.offices li .size {
	position:absolute;
	background:#06F;
	bottom:10px;
	left:-55px;
	-moz-transform: rotate(35deg);
	-webkit-transform: rotate(35deg);
	-o-transform: rotate(35deg);
	-ms-transform: rotate(35deg);
	transform: rotate(35deg);
	padding: 3px 60px;
	font-size:16px;
	line-height:20px;
	font-weight:bold;
	background-color: rgba(189, 22, 66, 0.7);
	color:#fff
}

.office-item  {
	position:relative
}

.offices li h4  {
	padding:6px 30px;
	background-color:#5d5d5d;
	color:#fff;
	margin:10px 0 0 0;
	/*-moz-transform: rotate(-15deg);
	-webkit-transform: rotate(-15deg);
	-o-transform: rotate(-15deg);
	-ms-transform: rotate(-15deg);
	transform: rotate(-15deg);
	position:absolute;
	bottom:15px;
	right:-15px;*/
}

.office-item h4,
.office-item .size  {
	padding:10px 30px;
	background-color:#bd1642;
	color:#fff;
	position:absolute;
	top:-15px;
	right:-15px;
	font-size:22px;
	line-height:22px;
	margin:0;
	text-transform:uppercase;
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	transform: rotate(20deg);
}

.office-item .size  {
	right: auto;
	left:-15px;
	top:-10px;
	-moz-transform: rotate(-20deg);
	-webkit-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
}


.offices li a h3 {
	margin-bottom:5px;
}

.office-item .img {
	width:100%;
	height:auto;
	margin-bottom:30px;
}


@media screen and (max-width: 1170px) {
	.offices li h3 {
		font-size:20px;
	}
	.offices li h4 {
		bottom:5px;
	}
}

@media screen and (max-width: 1140px) {
	.offices {
		margin-bottom:40px !important
	}
}

@media screen and (max-width: 1110px) {
	.offices li {
		width:100%;
		margin-bottom:15px;
	}
	.offices li h4 {
		bottom:15px;
	}
}

@media screen and (max-width: 610px) {
	.offices li {
		margin-bottom:0px;
		margin-top:15px;
	}
	.offices li h4 {
		bottom: auto;
		top: -15px;
		right: auto;
		left: -15px;
		-moz-transform: rotate(-5deg);
		-webkit-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
}




																							/* ------------Gallery ------------ */


#gallery-images {
	margin:0 !important;
	text-align:center
}


#gallery-images li {
	position:relative;
	max-width:150px;
	margin:10px;
	padding:0;
	background:none;
	display:inline-block
}

#content #gallery-images li::before,
#content #gallery-images li::after {
    content: "";
    margin: 0;
}

#gallery-images li img {
	width:100%;
	height:auto;
	float:left
	
}

#gallery-images li a {
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top: 0;
	left:0;
	line-height:150px;
	color:#FFF;
	text-transform:uppercase;
	font-size:0;
	-webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}

#gallery-images li a:hover  {
	background:#bd1642;
	text-decoration:none;
	font-size:16px;
}

																					/* ------------ links ------------ */
																					
.downloads {
	text-align:center;
	font-size:0;
}

.downloads li {
	display:inline-block;
	font-size:14px;
	width:31%;
	margin:0 1%;
	vertical-align:top
}

#content .downloads li::before,
#content .downloads li::after {
	content: "";
	margin-right:0;
}

.downloads li a {
	background-color:#d6863e;
	background-image:url(../images/download.png);
	background-position: center top -40px;
	background-repeat: no-repeat;
	color:#FFF !important;
	display:block;
	padding:10px;
	min-height:130px;
	line-height:14px;
	-webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}

.downloads li a:hover {
	text-decoration:none;
	color:#f4f4f4 !important;
	font-size:0 !important;
	background-color:#f4f4f4;
	background-position: center top 30px;
}
.downloads li a:hover h3 {
	font-size:0 !important;
}


.downloads li a h3 {
	margin-bottom:5px;
}

@media screen and (max-width: 970px) {
	.downloads li {
		width:48%;
		margin:0 1%;
	}
}

@media screen and (max-width: 640px) {
	.downloads li {
		width:100%;
		margin:0;
	}
}


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



.contactform {
	margin-bottom:40px;
}

.contactform div {
	text-align:center
}

.contactform legend {
	display:none
}

.contactform label {
    display: block;
    font-size: 20px;
	font-weight:300;
	text-transform:uppercase;
    text-align: center;
    width: 100%;
	background: #f4f4f4;
	padding:5px;
	width:50%;
	margin:auto;
	margin-bottom:1px
}


.contactform input,
.contactform textarea {
	background:#f4f4f4;
	margin:auto;
	padding:5px;
	width:50%;
	border:none;
	margin-bottom:20px;
    text-align:center;
	font-size:17px;
	display:block;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	color:#7f7f7f;
}

.contactform textarea {
	height:100px;
}

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

.required span {
	background-color:#e51937;
	width:50%;
	color:#FFF;
	margin:-43px auto 20px;
	padding:10px;
	font-size:17px;
	display:block
}

.error_message {
	display:none
}

.captcha {
	margin:auto;
	margin-bottom:10px;
	width:50%;
	background:#f4f4f4;
	padding:5px;
}

.captcha div div {
	margin:auto
}

.submit input {
	font-size:16px;
	padding:0 20px;
	height:40px;
	line-height:40px;
	text-align:center;
	display:inline-block;
	background:#8d54b9;
	color:#fff;
	text-decoration:none;
	margin:auto;
	cursor:pointer;
	text-transform:uppercase;
	-webkit-box-shadow: 4px 4px 0 0 rgba(0,0,0,0.25);
	box-shadow: 4px 4px 0 0 rgba(0,0,0,0.25);
	-webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}

.submit input:hover {
	background-color:#7f7f7f;
	color:#FFF;
	-webkit-box-shadow: 1px 1px 0 0 rgba(0,0,0,0.25);
	box-shadow: 1px 1px 0 0 rgba(0,0,0,0.25);
	text-decoration:none
}
	
	
@media screen and (max-width: 730px) {	
	.contactform label,
	.contactform input,
	.contactform textarea,
	.contactform .captcha,
	.form-error {
		width:100%;
	}
}