/*
Main CSS
Author: SpikeDM | spikedm.com
Theme: Four
*/

/*---------------------------------------------------------------*\
	Typography
\*---------------------------------------------------------------*/	
	h2{
		font-weight: 600;
	}

	h2,
	h2.section-title{
		font-size: 2rem;
		margin-bottom: 20px;
	}

	@media(min-width:992px){
		h2,
		h2.section-title{
			font-size: 2.9rem;
			margin-bottom: 30px;
		}
	
	}

/*---------------------------------------------------------------*\
	Buttons
\*---------------------------------------------------------------*/
	.btn > a,
	.btn.solid > a{
		background-color: var(--secondary-bg-colour);
		border-color: var(--secondary-bg-colour);
		color: var(--secondary-body-colour);
	}

	.btn > a:hover,
	.btn.solid > a:hover{
		background-color: var(--tertiary-bg-colour);
		border-color: var(--tertiary-bg-colour);
		color: var(--tertiary-body-colour);
	}

	.btn.hollow > a,
	.btn.hollow > a:hover{
		background-color: transparent;
		border-color: var(--secondary-bg-colour);
		color: var(--secondary-bg-colour);
	}

/*---------------------------------------------------------------*\
	Dividers
\*---------------------------------------------------------------*/	
	.section-title-divider{
		background-color: transparent;
		max-width: 240px;
		width: 100%;
		border: none;
		border-bottom: 2px var(--subtitle-colour) solid;
		margin: 30px auto 30px 0;
		border-bottom-style: dashed;
		max-width: 100%;
		display:none;
	}

/*---------------------------------------------------------------*\
	Section
\*---------------------------------------------------------------*/	
	section{
		margin-bottom: 70px;
	}

	@media(min-width: 992px){

		section{
			margin-bottom: 140px;
		}
	}

/*---------------------------------------------------------------*\
	Header
\*---------------------------------------------------------------*/	
	/*---------------------------------------------------------------*\
		Header Primary
	\*---------------------------------------------------------------*/	
		header.primary .header-component{
			margin-bottom: 5px;
		}

		header.primary .header-component:last-child{
			margin-bottom: 0;
		}
		
		header.primary .top{
			padding: 10px 0;
		}

		header.primary .middle{
			padding: 20px 0;
		}

		header.primary .middle .btn a{
			border-radius: 5px;
			font-size: 1.2rem;
		}

		header.primary .middle .btn.solid a{
			border-color: var(--primary-bg-colour);
			background-color: var(--primary-bg-colour);
			color: var(--primary-body-colour);
		}

		header.primary .middle .btn.hollow a{
			border-color: var(--primary-bg-colour);
			color: var(--primary-bg-colour);
		}

		header.primary .top{
			background-color: var(--secondary-bg-colour);
		}

		header.primary .header-telephone-number p,
		header.primary .header-email p{
			font-size: 1.4rem;
			color: var(--secondary-title-colour);
		}

		header.primary .header-telephone-number span.tel{
			font-weight: 800;
		}

		header.primary .header-telephone-number a,
		header.primary .header-email span.email{
			font-weight: 800;
			color: var(--secondary-link-colour);
		}

		header.primary .bottom{
			padding: 5px 0;
			background-color: var(--primary-bg-colour);
		}

		header.primary .bottom li{
			font-size: 1.1rem;
			font-weight:600;
			text-transform: uppercase;
		}
		
		header.primary .bottom a{
			color:var(--primary-body-colour);
		}

	
	/*---------------------------------------------------------------*\
			Header Primary - Desktop
		\*---------------------------------------------------------------*/

			header.desktop-header .bottom{
				display:none;
			}

			header.desktop-header{
				display:none;
			}
			
			@media(min-width:767px){

				header.desktop-header{
					display:block;
				}

			}

			@media(min-width:992px){

				header.desktop-header .bottom{
					display:block;
				}

			}
	
	
	/*---------------------------------------------------------------*\
		Header Primary - Mobile
	\*---------------------------------------------------------------*/	
		header.primary.mobile-header .bottom{
			padding: 10px 0;
			background-color: #fff;
		}

		header.primary.mobile-header .top{
			padding: 5px 0;
			background-color: var(--secondary-bg-colour);
		}

		header.primary.mobile-header .top p{
			color: var(--secondary-body-colour);
			font-size: 1.4rem;
		}

		header.primary.mobile-header .top a{
			color: var(--secondary-link-colour);
		}

		header.primary.mobile-header .logo-wrp{
			width: 70%;
			margin:auto;
		}
		
		@media(min-width:767px){

			header.mobile-header{
				display:none;
			}

		}

	/*---------------------------------------------------------------*\
		Header Sticky
	\*---------------------------------------------------------------*/
		header.sticky{
			padding: 5px 0;
		}

		header.sticky a{
			color:var(--body-colour)
		}

		header.sticky nav{
			text-align: right;
		}

		header.sticky img{
			max-height: 100px;
		}

		header.sticky nav.standard > ul > li > a{
			padding: 10px;
		}


/*---------------------------------------------------------------*\
	Components
\*---------------------------------------------------------------*/
	/*---------------------------------------------------------------*\
		Hero Image
	\*---------------------------------------------------------------*/
		.component.hero-image .main-title{
			font-weight: 900;
			font-size: 2.5rem;
			margin: 25px 0;
		}

		.hero-image.component .btn{
			max-width: 200px;
		}

		.hero-image.component .btn.solid a,
		.hero-image.component .btn.hollow a{
			border-radius: 50px;
		}

		.hero-image.component .btn.hollow > a,
		.hero-image.component .btn.hollow > a:hover{
			background-color: transparent;
			border-color: var(--light-link-colour);
			color: var(--light-link-colour);
		}

		.hero-image.component .content-container > .content-wrp{
			padding: 180px 30px;
			text-align: center;
			margin: auto;
		}

		@media(min-width:992px){
			.component.hero-image .main-title{
				font-size: 6rem;
			}

			.hero-image.component .content-container > .content-wrp{
				padding: 80px 0;
				text-align: left;
			}

			.hero-image.component .btn{
				max-width: 250px;
			}
		}
	
	/*---------------------------------------------------------------*\
		Left Right Text
	\*---------------------------------------------------------------*/
		.left-right-text-rows.component .bg-image{
			min-height: 600px;
			margin: 0;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			flex-grow: 1;
		}

		.left-right-text-rows.component .left-right-row{
			margin-bottom: 0;
		}

		.left-right-text-rows.component .row-wrp:not(:last-child){
			margin:0;
		}

		.left-right-text-rows.component .row-wrp.even:last-child{
			padding-bottom: 0;
		}
		
		.left-right-text-rows.component .row-wrp{
			padding: 0;
		}

		.left-right-text-rows.component .row-wrp.odd{
			background-color: var(--primary-bg-colour);
		}

		.left-right-text-rows.component .row-wrp.odd h2{
			color: var(--primary-title-colour);
		}

		.left-right-text-rows.component .row-wrp.odd h3{
			color: var(--primary-subtitle-colour);
		}

		.left-right-text-rows.component .row-wrp.odd p,
		.left-right-text-rows.component .row-wrp.odd li{
			color: var(--primary-body-colour);
		}

		.left-right-text-rows.component .row-wrp.odd a{
			color: var(--primary-link-colour);
		}

		.left-right-text-rows.component .row-wrp.even{
			background-color: var(--secondary-bg-colour);
		}

		.left-right-text-rows.component .row-wrp.even h2{
			color: var(--secondary-title-colour);
		}

		.left-right-text-rows.component .row-wrp.even h3{
			color: var(--secondary-subtitle-colour);
		}

		.left-right-text-rows.component .row-wrp.even p,
		.left-right-text-rows.component .row-wrp.even li{
			color: var(--secondary-body-colour);
		}

		.left-right-text-rows.component .row-wrp.even a{
			color: var(--secondary-link-colour);
		}

		@media(min-width:1170px){

			.left-right-text-rows.component .no-gutters .text-content-wrp{
				padding: 100px 150px;
			}
		
		}

	/*---------------------------------------------------------------*\
		Portfolio
	\*---------------------------------------------------------------*/
		.portfolio.component .top-txt-wrp{
			max-width: 1170px;
			margin: 0 auto 60px auto;
		}

		.portfolio.component .portfolio-content{
			overflow:hidden;
			padding-bottom: 63%;
			width: 100%;
			position:relative;
		}

		.portfolio.component .portfolio-content .bg-img{
			width:100%;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			height:100%;
			position:absolute;
			top:0;
			left:0;
		}

		.portfolio.component .portfolio-content .overlay{
			background-color: #000;
			opacity: 0;
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			height:100%;
			transition: 0.4s;
		}

		.portfolio.component .portfolio-content .content-wrp{
			position:absolute;
			top: 50%;
			left:50%;
			width:100%;
			transform: translate(-50%,-50%);
			text-align: center;
			padding: 50px;
		}

		.portfolio.component .portfolio-content .content-container{
			opacity: 0;
			transform: scale(2);
			transition: 0.4s;
			max-width: 700px;
			margin:auto;
		}

		.portfolio.component .portfolio-content .content-wrp h3{
			color: #fff;
			text-transform: uppercase;
			font-weight: 900;	
		}

		.portfolio.component .portfolio-content .content-wrp p{
			color: #fff;
			font-size: 1.2rem;
			font-weight: 600;
			text-transform: uppercase;
			text-decoration: underline;
		}

		.portfolio.component .portfolio-content:hover{
			cursor: pointer;
		}

		.portfolio.component .portfolio-content:hover .overlay{
			opacity: 0.6;
		}

		.portfolio.component .portfolio-content:hover .content-container{
			opacity: 1;
			transform: scale(1);
		}

		.portfolio.component .img-container{
			margin: 20px 0 0 0;
		}

		.portfolio.component p.label{
			position: absolute;
			bottom:0;
			left: 0;
			padding: 10px 20px;
			background-color: #333;
			color:#fff;
			text-transform: uppercase;
			font-weight: 800;
			font-size: 1.3rem;
		}

		.portfolio.component .description-wrp{
			margin-top: 15px;	
		}

		.portfolio.component .window.standard{
			padding: 15px;
			text-align: center;
		}

		.portfolio.component .owl-carousel{
			padding: 0 0 10px 0;
		}

		.portfolio.component .owl-nav{
			display:none;
		}

		.portfolio.component .slide-wrp{
			margin-bottom: 15px;
		}

		.portfolio.component .window-content{
			padding: 30px 10px;
		}

		@media(min-width:992px){
			.portfolio.component .window.standard{
				padding: 60px;
				text-align: center;
			}
			.portfolio.component .owl-carousel{
				padding:0 40px;
			}
			.portfolio.component .owl-nav{
				display:block;
			}

			.portfolio.component .window-content{
				padding: 30px;
			}
		}


	/*---------------------------------------------------------------*\
		Gallery
	\*---------------------------------------------------------------*/
		.gallery.component .top-text-area{
			text-align: center;
		}

		.gallery.component section{
			padding: 80px 0;
			background-color: var(--secondary-bg-colour);
		}

		.gallery.component section h2{
			color: var(--secondary-title-colour);
		}

		.gallery.component section h3{
			color: var(--secondary-subtitle-colour);
		}

		.gallery.component section p,
		.gallery.component section *{
			color: var(--secondary-body-colour);
		}

		.gallery.component section a{
			color: var(--secondary-link-colour);
		}

	/*--------------------------------*\
        FAQs
    \*--------------------------------*/
		.faqs.component .section-title{
			text-align: center;
		}

        .faqs.component .questions{
            padding: 24px;
            background-color: #fff;
            border: 1px solid #efefef;
            border-bottom: 5px solid var(--primary-bg-colour);
            box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
            margin-bottom: 40px;
        }

        .faqs.component .questions .title-wrp{
            margin-bottom: 30px; 
        }

        .faqs.component .questions .question{
            background-color: transparent;
            border: none;
            border-bottom: 1px solid var(--primary-bg-colour);
            color: var(--title-colour);
            padding: 10px 0;
        }

        .faqs.component .questions .question h3{
            color: var(--subtitle-colour);
			font-size: 1rem;
        }

        .faqs.component .questions .answer{
            padding: 20px 0 20px 0;
            border: none;
            background-color: transparent;
        }

		.faqs.component .question h3{
			padding-right: 30px;
		}

		@media(min-width:992px){

			.faqs.component .questions .question h3{
				font-size: 1.3rem;
			}

			.faqs.component .questions{
				padding: 60px;
			}

			.faqs.component .question h3{
				padding-right: 90px;
			}
		
		}


	/*--------------------------------*\
        Contact Details
    \*--------------------------------*/
		.component.contact-details .details-wrp{
			flex-grow: 1;
			padding: 60px 30px;
			background-color: var(--primary-bg-colour);
			align-content:center;
			text-align: center;
		}

		.component.contact-details .details-wrp h2{
			color: var(--primary-title-colour);
		}

		.component.contact-details .details-wrp h3{
			color: var(--primary-subtitle-colour);
		}

		.component.contact-details .details-wrp h4,
		.component.contact-details .details-wrp p{
			color: var(--primary-body-colour);
		}

		.component.contact-details .details-wrp p strong{
			color: var(--primary-title-colour);
		}

		.component.contact-details .txt-wrp{
			margin-bottom: 30px;
		}

		.component.contact-details .detail-wrp p{
			font-size: 1.2rem;
		}

		.component.contact-details .detail-wrp{
			margin-bottom: 10px;
		}

		.component.contact-details .social-wrp{
			margin-top: 40px;
		}

		.component.contact-details .map-wrp{
			display:flex;
			flex-grow: 1;
		}

		.component.contact-details .map-wrp iframe{
			flex-grow: 1;
		}

		.component.contact-details .fa-stack-2x{
			color: var(--secondary-bg-colour);
		}

		.component.contact-details .fa-stack-1x{
			color: var(--secondary-link-colour);
		}

		.component.contact-details .fa-stack:hover .fa-stack-2x{
			color: var(--tertiary-bg-colour);
		}

		.component.contact-details .fa-stack:hover .fa-stack-1x{
			color: var(--tertiary-link-colour);
		}

		@media(min-width:992px){

			.component.contact-details .details-wrp{
				text-align: left;
			}
		
		}

	/*--------------------------------*\
        Contact Form
    \*--------------------------------*/
		.component.contact-form .section-title{
			text-align: center;
		}


/*--------------------------------*\
    Footer
\*--------------------------------*/
	.footer-wrp section{
		background-color: var(--primary-bg-colour);
	}

	footer p i,
	footer h2{
		color: var(--primary-title-colour);
	}

	footer h3{
		color: var(--primary-subtitle-colour);
	}

	footer p{
		color: var(--primary-body-colour);
	}

	footer a{
		color: var(--primary-link-colour);
	}

	footer .logo-wrp{
		width: 60%;
		margin-bottom: 15px;
	}

	footer .fa-stack-2x{
		color: var(--secondary-bg-colour);
	}

	footer .fa-stack-1x{
		color: var(--secondary-link-colour);
	}

	footer .fa-stack:hover .fa-stack-2x{
		color: var(--tertiary-bg-colour);
	}

	footer .fa-stack:hover .fa-stack-1x{
		color: var(--tertiary-link-colour);
	}

	footer .footer-component{
		text-align: center;
		margin-bottom: 15px;
	}

	footer .footer-simple-contact-details span{
		display: block;
		margin-bottom: 15px;
	}

	footer .footer-social{
		margin-top: 30px;
	}

	@media(min-width: 992px){
		
		footer .logo-wrp{
			width: 100%;
		}

		footer .footer-simple-contact-details span{
			display: inline-block;
			margin-bottom: 0;
		}

		footer .footer-simple-contact-details span:after{
			content: ' | ';
		}

		footer .footer-simple-contact-details span:last-child:after{
			content: '';
		}

		footer .footer-simple-contact-details span{
			display: inline-block;
		}

	}
/*--------------------------------*\
    Copyright Footer
\*--------------------------------*/
	.copyright-footer-wrp section{
		background-color: var(--tertiary-bg-colour);
		text-align: center;
	}

	.copyright-footer-wrp p{
		color: var(--tertiary-body-colour);
	}

	.copyright-footer-wrp a{
		color: var(--tertiary-link-colour);
	}

	.copyright-footer-wrp .flex-row{
		justify-content: center;
	}

	@media(min-width: 992px){

		.copyright-footer-wrp .flex-row{
			justify-content: space-between;
		}
	
	}