@import "lib/bootstrap.scss"; //Core styles
@import "qsf.scss";
@import "main.scss"; //Styles shared among user end and admin section
////////////////////////////////////////////////////////////////////
//															      //
//		User-End Styles											  //
//																  //
////////////////////////////////////////////////////////////////////

body {
	min-width: 320px;
}

// Header Banner
// -----------------------------------------------------------------
#header-image {
	background-size: 100% auto;
	background-position: 50% 50%;
	-webkit-background-size: cover;
	background-size: cover;
	h1 {
		height: 156px;
		@include font-shorthand(48px, 200, 48px);
		color: #fff;
		margin-top: 0;
		margin-bottom: 0;
		display: table;
		width: 100%;
		span {
			display: table-cell;
			vertical-align: middle;
		}
	}
}

.topLine {
	background-color: #145790;
	@include gradient-horizontal(#0c4fa3, #0072c1);
}

.fancy-list {
	padding-top: 50px;
	padding-bottom: 50px;
	.thumbnails {
		.fancybox.thumbnail {
			padding: 0;
			background-color: #fff;
			border: 10px solid white;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
			max-width: 243px;
			margin: 0 auto;
			figure {
				padding: 0;
				margin: 0;
				position: relative;
			}
			.mask {
				display: block;
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			    overflow: visible;
			    background: rgba(#0c4fa3,.6);
			    -moz-box-sizing: border-box;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
			    -webkit-transition: all 0.4s ease-in-out;
			    -moz-transition: all 0.4s ease-in-out;
			    -o-transition: all 0.4s ease-in-out;
			    -ms-transition: all 0.4s ease-in-out;
			    transition: all 0.4s ease-in-out;
				.info {
					display: block;
					position: absolute;
					width: 100%;
					height: 100%;
					opacity: 0;
					transition: opacity 0.5s 0s ease-in-out;
					i {
						position: absolute;
						top: 50%; /* Center the link */
						left: 50%;
						@include translate(-50%, -50%);	
						font-size: 36px;
						color: #fff;
						text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
					}
				}
			}
			&:hover {
				.mask {
					opacity: 1;
   					.info {
   						opacity:1;
						transition-delay: 0.3s;
   					}
				}
			}
		}
	}
}

.calculator-section {
	padding: 20px 0 0;
	.calculate-proc {
		.span4 {
			text-align: center;
			figure {
				text-align: center;
				margin: 0;
				padding: 0;
				margin-bottom: 20px;
				display: inline-block;
				width: 100%;
				vertical-align: middle;
				min-height: 200px;
				img {
					width: auto;
					height: 200px;
				}
			}
			p {
				font-size: 18px;
				font-weight: 700;
				// width: 50%;
				margin: 0 auto;
				&.blue {
					color: #0c4fa3;
					line-height: 24px;
					margin-bottom: 20px;
				}
				&.orange {
					color: #ff9000;
					line-height: 24px;
				}
			}
			input {
				text-align: center;
				width: 80px;
			}
			label {
				display: inline-block;
			}
			.box {
				display: block;
				margin: 5px auto;
				max-width: 190px;
				text-align: right;
			}
			.orange {
				input {
					//background: none;
					//border-color: $accent;
					//background: $accent;
					color: #fff;
				}
			}
		}
	}
}

.table-types {
	th, td {vertical-align: middle;}
	thead th {font-size: 18px;}
}
.economy {background: #ffc000 !important; border-color: #ffc000 !important; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.25);}
.standard {background: $accent !important; border-color: $accent !important; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.25);}
.premium {background: #ff6c00 !important; border-color: #ff6c00 !important; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.25);}
.premium-plus {background: #ff3c00 !important; border-color: #ff3c00 !important; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.25);}

.another-window {
	padding: 20px 0 40px;
}


// Lists
// -----------------------------------------------------------------
.thumbnails {
	h3, h5 {
		margin: ($baseLineHeight / 2) 0 ($baseLineHeight / 4);
		a {
			color: #000;
			&:hover {
				text-decoration: none;
				color: $linkColor;
			}
		}
	}
	li.first {clear: left; margin-left: 0;}
}

// Back Link
.back-to-all {text-align: right; font-size: $baseFontSize - 1;}

// Modernizr
.touch {
	select {
		outline-style: none;
	}
	.fb_iframe_widget span {border:1px solid $tableBorder;}
}

// For No Touch Devices
.no-touch {
  #gallery-items {
    &.thumbnails {
      > li > .fancybox:hover > img {
      -webkit-transform:scale(1.1);
      transform:scale(1.1);
      }
    }
  }
}

.fancybox-nav span { visibility: visible !important; }

// Btn hover
/* Ripple Out */
@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -15px;
    right: -15px;
    bottom: -15px;
    left: -15px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -15px;
    right: -15px;
    bottom: -15px;
    left: -15px;
    opacity: 0;
  }
}

// msg
.top-msg {
	color: #fff;
	margin-bottom: 0;
	line-height: 30px;
	font-size: 12px;
}

// Reviews
.review-submitted-block {
	padding: 20px !important;
	background: #eee !important;
	@include border-radius (10px !important);
	h4 {
		margin-bottom: 0 !important;
		font-weight: 400 !important;
	}
}

// Rating
.rating {
  display: inline-block;
  white-space:nowrap;
  cursor: default;
  > span {
    display: inline-block;
    font-size: $baseFontSize + 4;
    color: #ccc;
    font-style: normal;
    cursor: default;
    &:before {
    	display: inline-block;
    	font-family: FontAwesome;
    }
    &.active {
    	color: #FFC325;
		&:before {
			content:"\f005";
			// color:#FEE720;
		}
    }


    &.half {
    	color: #FFC325;
		&:before {content:"\f123"}
    }
    &.empty {
		&:before {content:"\f006"}
    }
  }
  &.editable {
    span.hover {
    	color: #FEE720;
		&:before {content:"\f005"}
    }
    span:hover {
		&:before {content:"\f005"; color: #FEE720;}
    }
  }
}
form .rating span { cursor: pointer;}
#stars-rating {
  .rating.editable {
    span {
      padding: 0;
    }
  }
}

#rating-table td { padding-right: 20px;}

.testimonials-list {
	padding: 50px 0;
	background: transparent url('../images/testimonial-bg.jpg') 50% 50% no-repeat fixed;
	#testimonialSlider {
		margin-bottom: 0;
		width: 100%;
		max-width: 945px;
		background-color: transparent !important;
		.heroSlider {
			background-color: transparent !important;
			.rsOverflow {
				background-color: transparent !important;
				.rsSlide {
					background-color: transparent;
					.sliderContent {
						left: 15%;
						top: 25%;
						width: 70%;
						font-size: 24px;
						line-height: 30px;
						color: #555;
						font-weight: 400;
						background: none;
						text-align: center;
						position: relative;
						.testimonial {
							padding-top: 30px;
							&::before {
								content: "“";
								display: inline-block;
								font-size: 100px;
								text-align: center;
								position: absolute;
								top: 0;
								color: $accent;
								left: 50%;
								@include translate(-50%, 0);
								font-family: FontAwesome;
							}
						}
						.title {
							margin-left: 0;
							margin-right: 0;
							text-align: center;
							color: #000;
							font-style: italic;
							font-size: 24px;
						}
					}
				}
			}
			.rsNav.rsBullets {
				display: none;
			}
			.rsArrow {
				.rsArrowIcn {
					@include border-radius(0);
					background: none;
					&::before {
						content: none;
					}
					&::after {
						color: #000;
						font-size: 48px;
						@include transition(.3s);
					}
					&:hover::after {
						color: $accent;
					}
				}
			}
		}
	}
}

#form_contact-form {
	margin-bottom: 0;
	#form_contact-form-btnSubmit-element {text-align: center; padding-top: 15px;}
}

/* Home blog */
.home-blog {
	@include box-shadow(1px 1px 3px rgba(0,0,0,0.25));
	display: block;
	width:100%;
	max-width:360px;
	margin:0 auto;
	height:auto;
	position: relative;
	overflow: hidden;
	margin-bottom: $baseLineHeight;
	img {
		-webkit-transition: -webkit-transform 0.2s ease-out;
		-moz-transition: -moz-transform 0.2s ease-out;
		transition: transform 0.2s ease-out;	
	}
	.info	{
		position:absolute;
		width:100%;
		left:0;
		bottom:0;
		display:block;
		.date {
			text-align:center;
			background:$accent;
			background:rgba($accent, 0.85);
			text-transform: uppercase;
			color: #fff;
			line-height:20px;
			padding:15px 10px 10px;
			min-height: 78px;
			width: 40px;
			.date-day {
				font-size:30px;
			}
			.date-mon {
				font-size:14px;
				letter-spacing:1px;
			}
		}
		.title {
			font-size:15px;
			line-height:20px;
			font-weight: bold;
			color: #fff;
			padding:10px;
			background:#002d65;
			background:rgba(#002d65, 0.75);	
			text-align:left;
		}				
	}	
	&:hover {
		.info {
			.date {
				background:rgba($accent, 1.0);
			}
			.title {
				background:rgba(#002d65, 1.0);
			}
		}
		img {
			-webkit-transition: -webkit-transform 0.2s ease-in;
			-moz-transition: -moz-transform 0.2s ease-in;
			transition: transform 0.2s ease-in;	
			-webkit-transform: scale(1.05);
			-moz-transform: scale(1.05);
			-o-transform: scale(1.05);
			transform: scale(1.05);
			-webkit-transform-origin: center center;
			-moz-transform-origin: center center;
			-o-transform-origin: center center;
			transform-origin: center center;		
		}
	}
}
.table-center {
    display: table;
    width: 100%;
    height: 100%;
}
.table-center .table-center-td {
    display: table-cell;
    vertical-align: middle;
    padding: 40px;
    color: #fff;
    line-height: 1.2;
	text-align:center;
}
.table-center .table-center-td p {
	margin-top: 15px;
}

/* ------------------------------ */
.home-gallery {
  padding: 50px 0;
  background: transparent url('../images/info-bg.jpg') 50% 50% no-repeat fixed;
  .title-white {
	  color: #ffffff;
	  font-family: "Roboto Condensed";
	  font-size: 48px;
	  font-weight: 300;
	  line-height: 1.2;  	
	  text-align: center;
  }
}
/* ------------------------------ */

#homeGallery {
	.swiper-slide {
		text-align: center;
		a {display: block; text-align: center;}
	}
	.swiperArrow {
	    height: 100%;
	    position: absolute;
	    top: 0;
	    display: block;
	    cursor: pointer;
	    z-index: 21;
		width: 48px;
		.swiperArrowIcn {
			top: 50%;
			left: 50%;
			position:absolute;
		    margin-top:-24px;
		    margin-left: -24px;
	        //background:$blueDarker;
	        //background:rgba($blueDark, 0.25);
		    &:hover {
		      //background-color: $blueLight;  
		    }
		}
		.swiperArrowIcn:before {
			content:" ";
			display: block;
			z-index: 1;
		}
		.swiperArrowIcn, .swiperArrowIcn:before {
			width: 48px;
			height: 48px;
			position: absolute;
			@include transition-duration(.2s);
	        //background:$blueDarker;
	        //background:rgba($blueDark, 0.25);
			//@include border-radius($baseBorderRadius);
		}
		.swiperArrowIcn:hover:before {
		    opacity: 0;
		    //background-color: $blueLight;
		    @include scale(2);
		 	@include transition-duration(.5s);
		}
		.swiperArrowIcn:after {
		    font-size: 48px;
		    line-height: 48px;
		    width: 48px;
		    height: 48px;
		    text-align: center;
		    display: inline-block;
		    font-family: "FontAwesome";
		    position: relative;
		    z-index: 2;
		    color: #fff;
		}
		.swiperArrowIcn:hover:after {
		    color:$accent;
		}
		&.swiperArrowLeft .swiperArrowIcn:after {
		    content: "\f104";
		    margin-left: -1px;
		}
		&.swiperArrowRight .swiperArrowIcn:after {
		    content: "\f105";
		    margin-left: 1px;
		}
	    &.swiperArrowLeft { left: -50px;}
	    &.swiperArrowRight { right: -50px;}
	}
}


//	Project depending modules
@import "lib/bootstrap-responsive.scss";
//@import "_cart.scss"; // E-commerce styles
@import "_qsf-responsive.scss";
@import "_print.scss"; // Print styles