// style.less

// Colour palette: http://www.color-hex.com/color-palette/21974
@red: color("#9F2928");
@lighterred: lighten(@red, 35%);
@lightred: lighten(@red,20%);
@darkred: darken(@red,20%);
@green: color("#1E5345");
@darkgreen: darken(@green, 50%);
@pink: color("#F0D8D7");
@darkpink: darken(@pink, 50%);
@winered: color("#9A2B27");
@grey: color("#CED5D5");
@lightgrey: lighten(@grey, 10%);
@darkgrey: darken(@grey, 50%);
@mygrey: color("#D3D3D3");

// min-width for large screens (desktop)
@screen-lg: 700px;

/* Global */
html, body{
	font-family:'Comic Sans', sans-serif !important;	
	padding: 0px;
	color: black;

}
.container-fluid{
	overflow-x : hidden;
	padding-left: 0.1vw;
	padding-right: 0.1vw;
}

/* Navbar logo centered */
.navbar{
	font-size: 0.8em;
	height: 80px;
	padding: 15px 0px 15px 0px;
	margin-bottom: 0px;
	background-color: white;
	z-index: 600;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered { 
	position: absolute;
	left: 50%;
	width: 230px;
	margin-left: -115px;
	display: inline-block;
	text-align: center;
}
.navbar-nav{
	margin-top: 0;
	margin-bottom: 0;
	>li{
		>a{
			color: black !important;
		}
	}
}
.nav .active a{
	&:hover{
		background-color: lighten(@red,50%) !important;
	}

	background-color: lighten(@red,50%) !important;
	color: @darkgreen !important;

}
.nav a{
	&:hover{
		background-color: white !important;
	}

	background-color: white;
}

hr{ /* Global divider */
	width: 25vw;
	margin-bottom: 2vh;
	border-top: 1px solid #f8f8f8;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

/* Index page */
.btn-enter-site{
	background-color: #A02925;
	color: white;
	font-size: 8px;
	font-family:'Comic Sans', sans-serif;	
	margin-top: 10px;
}

.header{
	display: table;
	position: relative;
	width: 100%;
	height: 100%;
	background: #ffffff url(https://upload.wikimedia.org/wikipedia/commons/d/db/1_hong_kong_night_panorama_harbour_view_2011.jpg) no-repeat center center scroll;
	background-size: cover;
}
.vertical-center{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	background-color: rgba(255,255,255,0.3);
	padding: 20px 0px 20px 0px;
	float: none !important;
}

/* Portfolio Tabulated */

.portfolio{
	.panel {
		overflow: hidden;
		border: 0.1px solid #e3e3e3;
		box-shadow: 0px 0px 1px black;
		legend {
			background-color: @mygrey;
			margin-bottom: 0;
		}
	}
}

.panel-lastnomargin{
	margin-bottom: 0;
	@media(min-width: @screen-lg){
		margin-bottom: 20px;
	}
}

.portfolio__body{
	background-color:rgba(255,255,255,0.8);
	padding: 20px 10px 10px 30px;
	border-radius: 20px;

}

#portfolio-projects{ /* Projects image sizing */
	.panel-body{
		background-color: lighten(@mygrey,50%);
		.link-modal{
			color: black;
			display: table;
			vertical-align: top;
			margin-bottom: 20px;
			&:hover{
				text-decoration: none;
			}
		}
		.panel-heading{
			background-color: darken(@mygrey,100%);
			text-align: center;
		}
		figure{
			max-height: 250px;
			display: table-cell;
			vertical-align: top;
		}
	}
	img{
		width: 100%;
		height: 80px;
		border-radius: 10px;
		box-shadow: 0px 0px 1px black;
		@media(min-width: @screen-lg){
			
			box-shadow: 0px 0px 5px black;
			height: 200px;
		}
	}
}


#portfolio-clients{ /* Clients image sizing */
	.panel-heading{
		background-color: @mygrey;
		text-align: center;
		@media(min-width: @screen-lg){
			text-align: left;
		}
	}

	.panel-body{
		background-color: white;
		margin-bottom: 20px;
	}
	.wrapper-logo{
		height: 200px;
		display:flex;
		flex-direction: column;
		justify-content: space-around;
		text-align: center;
		padding: 25px 25px 25px 25px;
		font-size: 1em;
		@media(min-width: @screen-lg){
			font-size: 1em;
		}
	}
	.centered{
		text-align: center;
	}
	img{
		display: inline-block;
		align-self: flex-start;
		max-width: 100%;
		max-height: 90px;
		margin-bottom: 15px;
	}
	span{
		align-self: flex-end;
	}
}

figcaption{
	height: 4em;
	padding-top: 1em;
	text-align: center;
	font-size: 0.8em;
	@media(min-width: @screen-lg){
		font-size: 1.2em;
	}
}

/* Sections */

section{
	padding-top: 2%;
	padding-bottom: 2%;
}

#cntLanding{
	&:before {
		content: "";
		position: absolute;
		height: 250px;
		width: 100%;
		background-color: rgba(0,0,0,0.4); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */
		@media(min-width: @screen-lg){
			height: 80vh;
		}
	}
}
.landing{
	height: 250px;
	@media(min-width: @screen-lg){
		height: 80vh;
	}
	background-color: rgba(0,0,0,0.4);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	// background-blend-mode: overlay;

	display: flex;
	justify-content: center;
}

.landing__header{
	text-align: center;
	align-self: center;
	padding: 15px;
	margin: 15px;
	font-family: Georgia, serif;

	.md{
		color: white;
		font-weight: 300;
		text-shadow: 0px 0px 5px black;
		
		font-size: 8vw;
		@media(min-width: @screen-lg){
			font-size: 4vw;
		}
	}
	small{
		font-size: 0.5em;
	}
}

.information__heading{
	color: @lightred;
	font-weight: 700;


	text-align: center;
	font-size: 2em;
	@media(min-width: @screen-lg){
		font-size: 2.2em;
	}

	small{
		color: @darkgrey;
		font-family: Georgia, serif;
		font-size: 3vw;

		@media(min-width: @screen-lg){
			font-size: 0.5em;
		}
	}
}
.information{
}

.information__body{
	display: block;
}
.lengthyDescription{
	text-align: left;

	line-height: 1.5;
	font-size: 1em;
	@media(min-width: @screen-lg){
		font-size: 1.5em;
		max-width: 40%;
		margin: 0 auto 40px auto;
	}
	.special{
		margin-top: 3em;
		margin-bottom: 3em;
		@media(min-width: @screen-lg){
			margin-top: 3em;
			margin-bottom: 2em;
		}
	}
	.justified{
		text-align: justify;
	}

	table{
		text-align: left;
		margin: 0 auto;
		td{
			display: list-item;
			list-style: disc inside none;
			padding-bottom: 10px;
		}
		.nobullet{
			font-size: 1.2em;
			text-align: center;
			list-style: none;
			margin-bottom: 20px;
		}
	}
}
#about-us{
background-color: #E0EEEE !important	;
        }

.about{
	display: table;
	max-width: 1000px;
	margin: 0 auto;
	>div{
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;

		@media(min-width: @screen-lg){
			display: table-cell;
			vertical-align: top;
			height: 100%;
		}
	}
}



/* Services List */

.services-info{
	width: 100%;
	@media(min-width: @screen-lg){
		max-width: 700px;
		margin: 0 auto;
	}
	color: @darkred;
	font-size: 0.4em;
	h4{
		font-size: 2em;
		@media(min-width: @screen-lg){
			font-size: 2.5em;
		}
	}

	display: table;
	>div{
		display: table-cell;
		height: 130px;
		margin-bottom: 2vh;			
	}
}


.quote{


	background: #1e3c72; /* fallback for old browsers */
	background: -webkit-linear-gradient(to top, #1e3c72 , #2a5298); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to top, #1e3c72 , #2a5298); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	display: table;
	width: 100%;
	text-align: center;
	height: 30vh;
	padding: 0em 1em 0em 1em;

	.quote__content{
		color: white;
		display: table-cell;
		vertical-align: middle;
		font-family: Georgia, serif;
		font-style: italic;
		font-size: 5.3vw;
		@media(min-width: @screen-lg){
			font-size: 2.5em;
			height: 120%;
		}
	}
}

/* Lists */
.service-list > li{
	margin-bottom: 10px;
}

/* Modal popup */
.modal-title{
	text-align: center;
	font-weight: 600;
}
.modal-body{

	img{
		width: 100%;
		max-height: 75vh;
	}
}


/* Specific images */

#map-location{	/* location page google maps embed */
	height: 600px;
	max-width: 100%;
	padding: 0 0 0 0;

	@media(max-width: 1200px){
		height: 50vw;
	}
}

#logo_carewin{	/* navbar centered company logo */
	width: 100%;
	position: relative;
	top: -15px;
}

#company-logo-lg{	/* index page company logo */
	position: relative;
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	border: 15px 15px 15px 15px #ffffff;
}

#logo_standards{	/* quality assurance logo */
	max-width: 90%;
	@media(min-width: @screen-lg){
		max-width: 40%;
	}
	margin: 0 auto;
	box-shadow: 0px 0px 5px black;
}
#sctLicencing{
	display: flex;
	flex-direction: column;
	align-items: center;
	vertical-align: middle;
}
.divFooter{
	padding-top: 15px;
	padding-bottom: 15px;
	a{
		color: @grey;
		font-size: 1em;
		&:hover{
			text-decoration: none;
		}
	}
}
.licenceList{
	display: flex;
	flex-direction: column;
	align-items: center;

	li{
		line-height: 1.69231;
		margin-bottom: 1em;
		font-size: 0.8em;
		padding: 5px 5px 5px 5px;

	}
	@media(min-width: @screen-lg){
		line-height: 2.5;
		padding-bottom: 20px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1.5em;
		max-width: 600px;
	}
}

// Footer
.footer{
	padding-top: 20px;
	background-color: #888;
	.carewin-copyright{
		padding-top: 1em;
		color: white;
	}
}