/* sysnet styles */
html {
	font-size: 62.5%;
}
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: #ffffff;
	font-size: 2em;
	color:#333;
	font-weight: normal;
}
.container {
	max-width: 1400px;
	position: relative;
	margin: 0 auto;
	width:84%;
	padding: 0px;
	box-sizing: border-box;
	clear: both;
}
h1 {font-size:3.5rem; line-height:1.4; letter-spacing:-.14rem; font-weight:300; color:#888}
h1 span {font-weight:400;}
h2, p {font-size:2.2rem; line-height:1.4; letter-spacing:-.08rem; font-weight:300; font-style:italic;}
h2 span, p span {color:#991633; font-weight:600; font-style:italic;}
h3 {font-size:3.4rem; line-height:1.3; letter-spacing:-.1rem; }
h4 {font-size:3.0rem; line-height:1.2; letter-spacing:-.08rem;  font-weight:300}
h5 {font-size:1.8rem; line-height:1.5; letter-spacing:-.05rem; }
h6 {font-size:1.4rem; line-height:1.4; letter-spacing:0; }
h5 {
	margin-bottom:1rem
}
ul {
	list-style:disc outside;
}

li {
	padding: .5rem;
	font-style: italic;
}

a {
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
b {
	font-weight: 600;
}
input, textarea {
	color: #444
}
textarea {
	margin-bottom: 2rem
}
/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navbar .container {width:100%; padding:0;}
.navbar {
	display:block;
    width:100%;
    /*height: 6.5rem;*/
    background:transparent;
    z-index:99;
	position:absolute;
	top:0;
}
.navbar-list {
	display:none;
    list-style:none;
    padding:0;
    margin:0;
}
.navbar-item {
    position:relative;
    margin-bottom:0;
    text-align: center;
}
.navbar-item a {
    padding:2.5rem;
    text-decoration:none;
    display:block;
    color:#ffffff;
    font-size:2.2rem;
    letter-spacing:.05rem;
}
.navbar-item:hover, .navbar-collapse:hover {
    cursor: pointer;
}
.navbar-item:hover a, .navbar-collapse:hover a {
    color: #ffffff;
}
.navbar-item span {
	display: none;
}
.navbar-collapse{
	padding: 1.5em;
	font-size: 1.8rem;
	color: #fff;
}
.navbar object {
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
	height: inherit;
	line-height: inherit;
	width:240px;
	height: auto;
	-moz-pointer-events: none;
	-webkit-pointer-events: none;
	-ms-pointer-events: none;
	pointer-events: none;
	opacity: 1;
}
.navLogo{
	display:inline-block;
	position:absolute;
	top:1.2em;
	right:1.4em;
	width:240px;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero {
	color: #fff;
	padding: 7rem 0 0 0;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
	background-color: rgba(80, 80, 80, 0.5);
	height:100%;
}

.hero h1 {font-size:3.4rem; color:white}
.hero h2 {font-size:2.8rem;}


/* About
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#about{
	padding: 3.2rem 0;
}

/* Philosophy
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#philosophy{
	padding: 4rem 0;
}

#philosophy:before {
	z-index: -1;
	content: "";
	position: absolute;
	right: 55%;
	height: 100%;
	width: 100%;
	background-color: #eeeeee;
	-webkit-transform: skewX(-14deg);
	-moz-transform: skewX(-14deg);
	-ms-transform: skewX(-14deg);
	transform: skewX(-14deg);
}

/* About
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#contact{
	padding: 4rem 0;
}

/* Contact Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contactGridContainer {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:'leftCol''rightCol';
    margin-bottom: 100px;
    font-size: 1.8rem
}
.contactGridContainer input[type=text],
.contactGridContainer input[type=email],
.contactGridContainer input[type=tel],
.contactGridContainer textarea {
    width: 100%;
    background-color: #eeeeee;
    padding: 8px;
    border-radius: 4px;
	line-height: 1.4em;
    border: 1px solid #eeeeee
}
.contactGridContainer label {
    visibility: hidden;
}
.leftCol {
	grid-area:leftCol;
}
.rightCol {
	grid-area:rightCol;
}
span.label-body {
    color: #999;
    font-size: 1.5rem;

}
label.unhide {
    visibility: visible !important;
}

/* Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */

button.button-primary {
	display: inline-block;
	height: 44px;
	padding: 0 20px;
	color: #555;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 44px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border-radius: 4px;
	border: 1px solid #bbb;
	cursor: pointer;
	box-sizing: border-box;
}

button.button-primary {
	color: #FFF;
	background-color: #991633;
	border-color: #991633;
}

#btn_eenquiry i {
	padding-right: 5px;
}

button.button-primary:hover,
button.button-primary:focus {
	color: #FFF;
	background-color: #880824;
	border-color: #880824
}
a {
	color: #991633;
	text-decoration: none;
}
a:hover {
	color: #000;
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer { 
	color:white;
	padding:2rem 0;
	text-align:center;
	background-color: #991633;
	box-shadow: inset 0px 10px 12px -10px #222;
	font-weight:300;
}

footer p { 
	color: rgb(242, 220, 220);
	font-size: .8em;
	font-style: normal;
	letter-spacing: normal;
	margin: 1rem 1.5rem;
}

footer strong { 
	font-weight:600;
}

footer button{
	margin:1.5rem;
	background-color: #f4f4f4;
}

footer a {
	font-weight: 600;
	white-space: nowrap;
}

footer a:link, footer a:focus, footer a:visited {
	color: rgb(255, 255, 255);
}

footer a:hover {
	color: rgb(255, 255, 255);
}

footer a.topLink:link, footer a.topLink:focus, footer a.topLink:visited {
	color: rgba(105, 30, 44, 0.7);
}

footer a.topLink:hover {
	color: rgba(105, 30, 44, 1);
}

/* Columns
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.column {
	width: 100%;
	box-sizing: border-box;
}

/* Team
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.teamGridContainer h3, .teamGridContainer h3 strong {
    font-weight: 400;
}
.teamGridContainer h3 strong {
    color: #991633
}

/* Team Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.teamGridContainer {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:'teamPhoto''teamDescription';
    grid-gap: 10px;
    text-align: center;
    align-items: center;
}
.teamPhoto {
	grid-area:teamPhoto;
}
.teamPhoto img {
  	border-radius: 50%;
  	width: 200px
}
.teamDescription {
	grid-area:teamDescription
}

/* Map
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#mapContainer {
	position: relative;
	top: 0;
	left: 0;
}
#mapContainer * {
	font-size: 1em
}
#map {
	height: 600px;
}
#mapOverlay:before {
	z-index: 1;
	content: "";
	position: absolute;
	right: 10%;
	height: 100%;
	width: 200%;
	-webkit-transform: skewX(-14deg);
	-moz-transform: skewX(-14deg);
	-ms-transform: skewX(-14deg);
	transform: skewX(-14deg);
	background-color: rgba(225, 225, 225, 0.8);
}
#mapOverlay {
	position: absolute;
	top: 50px;
	left:0;
	float:left;
}
#mapOverlay h1 {
	font-size: 2.6rem;
	color: #991633;
	margin: 0px;
	padding: 0px
}
#mapOverlay p {
	color: #666;
	font-size: 2rem;
	font-style: normal;
	margin: 0px;
	padding: 0px 50px 0 0
}
#mapOverlay p:nth-of-type(2) {
	margin-top: 30px;
}
#mapOverlay p:nth-of-type(2) strong {
	color: #991633;
	font-weight: 600;
}
#mapOverlay p:nth-of-type(2) span {
	font-weight: 300;
	color: #666;
	font-style: normal;
	display: block;
}
#mapOverlay div {
	z-index: 2;
	position: relative;
	font-style: normal;
	padding: 20px 14px 20px 40px;
}

/* Modal Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 /* The Modal (background) */
.ppmodal {
	display:none; /* Hidden by default */
	position:fixed; /* Stay in place */
	z-index:100; /* Sit on top */
	padding:60px 0 60px 0; /* Location of the box */
	left:0;
	top:0;
	width:100%; /* Full width */
	height:100%; /* Full height */
	overflow:auto; /* Enable scroll if needed */
	background-color:rgb(0,0,0); /* Fallback color */
	background-color:rgba(0,0,0,0.6); /* Black w/ opacity */
}

.ppmodal p, .ppmodal ul {
	font-size:1.6rem;
	letter-spacing: 0rem;
	font-style: normal
}

.ppmodal p:first-of-type * {
	font-size:2rem !important;
	margin-bottom:1.4rem;
}

.ppmodal p strong:first-of-type {
	font-size:1.8rem;
	margin-top:1.4rem;
}
	
.modal-content {
	position:relative;
	border-radius:4px;
	background-color:#fefefe;
	margin:auto auto 120px auto;
	padding:0;
	width:80%;
	box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name:animatetop;
	-webkit-animation-duration:0.4s;
	animation-name:animatetop;
	animation-duration:0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0} 
	to {top:0; opacity:1}
}

@keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

/* The Close Button */
.ppclose, .lnclose {
	color:white;
	float:right;
	font-size:25px;
	font-weight:bold;
}

.ppclose:hover,
.ppclose:focus,
.lnclose:hover,
.lnclose:focus {
	color:#000;
	text-decoration:none;
	cursor:pointer;
}

.modal-header h4 {
	padding:5px 0;
	margin:0;
	letter-spacing:normal
}

.modal-header {
	padding:8px 16px;
	background-color:#991633;
	color:white;
	line-height:normal;
	-webkit-border-top-left-radius:3px;
	-webkit-border-top-right-radius:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
}

.modal-body{
	padding:34px 40px;
	overflow:auto;
}

.modal-footer {
	padding:2px 16px;
	background-color:#cccccc;
	color:white;
	-webkit-border-bottom-left-radius:3px;
	-webkit-border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
}

/* Generic
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.screenLink{
	color:#222;
	padding:3rem
}
.screenLink p {
	margin:0
}
.screenLink.active {
	background-color:#f1f3f5;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
}
.container .row:not(:first-child) {
	margin-top:4rem
}
.nowrap {
	white-space:nowrap
}
.boxout {
	min-height:20px;
	padding:24px;
	margin-bottom:20px;
	background-color:#f1f3f4;
	border:1px solid #eeeeee;
	border-radius:3px;
	box-sizing:border-box;
	color:#555;
}
.boxout ul {
	margin:0 0 0 4px;
}
.boxout ul li:last-of-type {
	margin:0;
}
.textlink {
	border:none;
	text-transform:unset;
	font-size:1.5rem;
	font-weight:normal;
	text-decoration:none;
	color:#1EAEDB;
}
.textlink:hover {
	color:#157998;
}
.parallax-window {
	height: 300px;
	background: transparent;
	overflow: hidden;
}
.parallax-window img {
	height: 300px;
	position: absolute;
	right: 0;
	top: 0;
	display: none;
	border-bottom: 20px solid white;
}
:focus{outline:none;}
/* btn slant */
.leftSlant {
	float: right;
	position: relative;
	color: white;
	overflow: hidden;
	padding: .55em 1.3em .55em 6em;
	text-align: right;
	width: 30%;
	text-decoration:none;
	font-size: 2.5rem;
	z-index: 1;
	margin-bottom:4rem;
}

.leftSlant:before {
	z-index: -1;
	content: "";
	position: absolute;
	left: 30%;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #991633;
	-webkit-transform: skewX(-14deg);
	-moz-transform: skewX(-14deg);
	-ms-transform: skewX(-14deg);
	transform: skewX(-14deg);
	transition: 0.3s;
}

.leftSlant:hover:before {
	background-color:rgba(40, 40, 40, 1);
	left: 18%;
}

.leftSlant .fa {
	margin-left: 8px;
	color:rgba(255, 255, 255, .4);
}

a.leftSlant:hover,
a.leftSlant:hover .fa {
	color:rgba(255, 255, 255, 1);
}
table{width: auto;}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Mobile */
@media (max-width: 768px) {
	.navbar-item {
	    border-bottom: 1px solid #eee;
	    background-color:rgba(153,22,51,.95);
	}
	.navbar-item:hover {
	    background-color:rgba(40,40,40,.95);
	}
	.navbar-item:last-of-type {
	    border-bottom: 0;
	}
    .modal-content {
		font-size:1.2rem;
		width:90%;
	}
	.modal-body{
		padding:22px 28px;
		overflow: auto;
		max-height: 400px;
	}
}

/* Larger than mobile */
@media (min-width: 400px) {
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	/* Hero
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.hero {
		padding: 8rem 0 0 0;
	}
}

/* Larger than phablet (also point when grid becomes active) */
@media (max-width: 550px) {
}

/*  */
@media (min-width: 786px) {
	.navbar .container {width:90%; padding:0;}
	.container {
		width:90%;
		clear:none;
	}
	.navbar object {
		width:240px;
	}
	.navLogo {
		width:240px;
	}
	/* Navigation */
	.navbar-collapse {
		display: none;
	}
	.navbar-list {
		display: block !important;
	}
	.navbar-item {
	    float: left;
	}
	.navbar-item a {
	    padding: 3.2rem 2.2rem 0 0;
	    font-size:1.6rem;
	}
	.navbar-item:hover a, .navbar-collapse:hover a {
	    color: #cccccc;
	}
	.bigger{font-size:1.7rem; line-height:3rem}
	.smaller{font-size:1.4rem; line-height:1.8rem}
	.parallax-window {
		height: 400px;
	}
	.parallax-window img {
		height: 400px;
		display: initial;
	}
	.half.column {
		float: left;
		width: 48%;
	}
	.column {
		margin-left: 4%;
	}
	.column:first-child {
		margin-left: 0;
	}
	.navbar-item a::after {
		content: '\f107';
		font-family: FontAwesome;
		font-weight: normal;
		font-style: normal;
		text-decoration:none;
		position: relative;
		font-size: 1.5em;
		top: 0px;
		left: -50%;
		opacity: 0;
	  	transition: 0.3s;
	}
	.navbar-item:hover a::after {
		color: rgba(166, 69, 69, 1);
		top: 30px;
		opacity: 1;
	}
	.navbar-item.alt:hover a::after {
		opacity: 0;
	}
	h1 {font-size:4rem;}
	h2, p {font-size:2.4rem}
	footer p {
		margin: 1.5rem auto;
		width: 80%;
		max-width: 1280px;
	}

	/* About
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#about{
		padding: 3.6rem 0;
	}
	/* Hero
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.hero {
		background-color: transparent;
	}
	.hero h1 {font-size:3.4rem;}
	.hero h2 {font-size:2.4rem;}
	/* btn slant */
	.leftSlant {
		padding: .6em 1.3em .6em 7.3em;
		font-size: 2.8rem;
		margin: 0;
	}
	/* Contact Grid
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.contactGridContainer {
	    grid-gap: 50px;
	    grid-template-columns: 1fr 1fr;
	    grid-template-areas:'leftCol rightCol';
	}
	span.label-body {
	    font-size: 1.8rem;
	}
	/* Team Grid
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.teamGridContainer {
	    grid-gap: 50px;
	    position: relative;
	}

	.teamGridContainer:nth-child(even) {
	    grid-template-columns: 3fr 1fr;
	    grid-template-areas:'teamDescription teamPhoto';
	    text-align:right;
	}

	.teamGridContainer:nth-child(odd) {
	    grid-template-columns: 1fr 3fr;
	    grid-template-areas:'teamPhoto teamDescription';
	    text-align:left;
	}
	.teamPhoto {
	  	height: 100%;
	}
	.teamPhoto img {
	  	position: sticky;
	  	top: 2px;
	  	margin: 48px 0 20px 0;
	}
	.teamPhoto img {
	  	width: 250px
	}
	.teamGridContainer p {
	    font-size: 2.4rem
	}
	/* Map
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#mapOverlay {
		top: 50px;
	}
	#mapOverlay:before {
		right: -10%;
	}
	#mapContainer * {
		font-size: 2.1rem
	}
	#mapOverlay p:nth-of-type(2) span {
		margin-left: 60px;
		display: inline-block;
	}
}

/* Larger than tablet */
@media (min-width: 900px) {
	/* Navigation */
	.navbar-item span {
		display: inline;
	}
	/* The Close Button */
	.ppclose, .lnclose {
		font-size:33px;
	}
	.navbar object {
		width:280px;
	}
	.navLogo {
		width:280px;
		top: 2em;
		right: 2em;
	}
	.parallax-window {
		height: 500px;
	}
	.parallax-window img {
		height: 500px;
	}
	/* About
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#about{
		padding: 3.8rem 0;
	}
	/* Philosophy
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#philosophy{
		padding: 4.5rem 0;
	}
	/* Hero
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.hero {padding: 10rem 0 0 0;}
	.hero h1 {font-size:3.8rem;}
	.hero h2 {font-size:2.5rem;}
	/* Contact Grid
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.contactGridContainer {
	    font-size: 2rem
	}
	/* Map
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#mapOverlay:before {
		right: 0%;
	}
	#mapOverlay h1 {
		font-size: 3.4rem;
	}
}

/* Larger than desktop */
@media (min-width: 1000px) {
	h1 {font-size:4.8rem;}
	h2, #about p {font-size:3rem}
	/* Navigation
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.navbar-item a {
	    padding: 4.5rem 4rem 0 0;
	    font-size:1.8rem;
	}
	/* Hero
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.hero {padding: 12rem 0 0 0;}
	.hero h1 {font-size:4rem;}
	.hero h2 {font-size:3rem;}
	/* btn slant */
	.leftSlant {
		padding: .6em 1.3em .6em 9.3em;
		font-size: 3rem;
	}
	/* About
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#about{
		padding: 4rem 0;
	}
	/* Map
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#mapOverlay:before {
		right: -5%;
	}
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	h1 {font-size:5rem;}
	h2, #about p {font-size:3.2rem}
	.navbar-item a {
	    padding: 5rem 5rem 0 0;
	    font-size:1.9rem;
	}
	.navbar object {
		width:320px;
	}
	.navLogo {
		width:320px;
		top: 2em;
		right: 2.8em;
	}
	.parallax-window {
		height: 600px;
	}
	.parallax-window img {
		height: 600px;
	}
	.hero .half.column {
		width: 60%;
	}
	/* Hero
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.hero {padding: 14rem 0 0 0;}
	.hero h1 {font-size:4.8rem;}
	.hero h2 {font-size:3.8rem;}
	/* btn slant */
	.leftSlant {
		padding: .6em 1.3em .6em 10.3em;
		font-size: 3.2rem;
	}
	/* Team
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	.teamPhoto img {
	  	width: 300px
	}
	.teamGridContainer p {
	    font-size: 2.6rem
	}
	/* Map
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	#mapContainer * {
		font-size: 2.7rem
	}
	/* Contact Grid
	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	span.label-body {
	    font-size: 2rem;
	}
}