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

/*---------------------------------------------------------------*\
	Body
\*---------------------------------------------------------------*/	

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

	h2,
	h2.section-title{
		font-size: 2rem;
	}

	h3{
		font-weight: 600;
		text-transform: uppercase;
		font-size:1.3rem;
	}

	a:hover{
		color: var(--body-colour);
	}

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

		h3{
			font-size:1.5rem;
		}
	}

	@media(min-width:1470px){
		h2,
		h2.section-title{
			font-size: 4rem;
		}
	}

/*---------------------------------------------------------------*\
	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%;
	}


/*---------------------------------------------------------------*\
	Header
\*---------------------------------------------------------------*/	
	/*---------------------------------------------------------------*\
		Header Primary
	\*---------------------------------------------------------------*/	
		header.primary{
			/* background-color: var(--primary-bg-colour); */
			border-bottom: 1px solid #efefef;
		}
		header.primary .top{
			padding: 10px 0;
		}

		header.primary .header-component{
			margin-bottom: 5px;
			display:inline-block;
			
		}

		header.primary .header-component:last-child{
			margin-bottom: 0;
		}

		header.primary .header-email,
		header.primary .header-telephone-number{
			margin-right: 30px;
		}

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

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

		header.primary .header-email span.email{
			font-weight: 800;
			/* color: var(--primary-link-colour); */
		}
	
		header.primary li{
			font-size: 1.1rem;
			font-weight:600;
			text-transform: uppercase;
		}

		header.primary nav a{
			color: var(--body-colour);
		}

		header.primary .logo-wrp{
			margin:10px auto;
		}

		@media(min-width:992px){
			header.primary .logo-wrp{
				margin:0;
			}
		}
		
		/*---------------------------------------------------------------*\
			Header Primary - Desktop
		\*---------------------------------------------------------------*/

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

				header.desktop-header{
					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(--primary-bg-colour);
		}

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

		header.primary.mobile-header .top a{
			color: var(--primary-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{
			padding:30px 10px;
		}
		.component.hero-image section{
			background-color: var(--secondary-bg-colour);
			padding:15px;
		}

		.component.hero-image .flex-row{
			clip-path: polygon(90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%, 0 0);
		}
		
		.component.hero-image .content-wrp{
			padding: 50px 24px;
			background-color: var(--primary-bg-colour);
		
			text-align: center;
		}

		.component.hero-image .content-wrp h2{
			color: var(--primary-title-colour);
		}

		.component.hero-image .content-wrp p{
			color: var(--primary-body-colour);
			font-size: 1rem;
		}

		.component.hero-image .content-wrp .btn.solid a,
		.component.hero-image .content-wrp .btn.solid a:hover{
			color: var(--secondary-body-colour);
			border-color: var(--secondary-bg-colour);
			background-color: var(--secondary-bg-colour);
		}

		
		.component.hero-image .content-wrp .btn.hollow a,
		.component.hero-image .content-wrp .btn.hollow a:hover{
			color: var(--primary-body-colour);
			border-color: var(--primary-body-colour);
		}

		.component.hero-image .small-title{
			font-weight:900;
			text-transform: uppercase;
			letter-spacing: 2px;
			font-size: 1.4rem;
		}
		
		.component.hero-image .main-title{
			font-weight: 300;
			font-size: 2rem;
			margin: 25px 0;
		}

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

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

		.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 .img-container{
			height:100%;
			padding:0;
			margin: 0 0 0 0;
			min-height: 600px;
			width:auto;
		}

		@media(min-width:992px){

			.component.hero-image section{
				padding:0 0 0 15px;
			}

			.component.hero-image .flex-row{
				clip-path: none;
			}

			.component.hero-image .content-wrp{
				padding: 80px 40px;
				text-align: left;
				clip-path: polygon(95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%, 0 0);
			}

			.component.hero-image .main-title{
				font-size: 2.7rem;
			}

			.component.hero-image .small-title{
				font-size: 1.7rem;
			}

			.component.hero-image .content-wrp p{
				font-size: 1.2rem;
			}

			.hero-image.component .img-container{
				margin: 0;
				min-height: 800px;
				clip-path: none;
			}
		}

		@media(min-width:1170px){

			.component.hero-image .main-title{
				font-size: 3.5rem;
			}

		}

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

			.hero-image.component .img-container{
				margin: 40px 0 0 40px;
			}

			.component.hero-image .content-wrp{
				padding: 100px 60px;
			}

			.component.hero-image{
				padding:30px 50px;
			}

			.component.hero-image section{
				padding:0 50px;
			}
		}
		
		
	/*---------------------------------------------------------------*\
		Text With Image
	\*---------------------------------------------------------------*/
		.component.text-with-image .img-wrp{
			clip-path: polygon(95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%, 0 0);
			margin-bottom: 30px;
		}

		.component.text-with-image .text-content{
			text-align: center;
		}

		@media(min-width: 992px){
		
			.component.text-with-image .img-wrp{
				margin-bottom: 30px;
			}

			.component.text-with-image .text-content{
				text-align: left;
			}
		}
	/*---------------------------------------------------------------*\
		Text and Title Side By Side
	\*---------------------------------------------------------------*/
		.text-and-title-side-by-side.component .section-title{
			margin-bottom: 0;
		}

		.text-and-title-side-by-side.component .divder{
			display:none;
		}


	/*---------------------------------------------------------------*\
		Products
	\*---------------------------------------------------------------*/
		.products.component .top-text-area{
			text-align: center;
		}

		.products.component .product-groups-wrp{
			background-color: var(--primary-bg-colour);
			padding: 150px 0;
			clip-path: polygon(0 0, 100% 150px, 100% calc(100% - 150px), 0 100%);
		}

		.products.component .product-group-wrp{
			padding-bottom: 60px;
			margin-bottom: 60px;
			border-bottom: 1px dotted var(--primary-subtitle-colour);
		}

		.products.component .product-group-wrp:last-child{
			border: none;
		}

		.products.component .product-group-wrp h2{
			color: var(--primary-title-colour);
			margin-bottom: 20px;
		}

		.products.component .product-group-wrp h3{
			color: var(--primary-subtitle-colour);
		}

		.products.component .product-group-wrp h4,
		.products.component .product-group-wrp p{
			color: var(--primary-body-colour);
		}

		.products.component .ps-top-txt-area{
			padding: 15px;
			text-align: center;
			max-width:100%;
			margin:auto;
		}

		.products.component .product-group-wrp .product{
			padding: 60px 30px;
			margin: 10px;
			flex-grow: 1;
			background-color: #fff;
			clip-path: polygon(95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%, 0 0);
		}

		.products.component .product-group-wrp .product .title-wrp,
		.products.component .product-group-wrp .product .img-wrp,
		.products.component .product-group-wrp .product .description-wrp{
			margin-bottom: 25px;
			text-align: center;
		}

		.products.component .product-group-wrp .product h4{
			font-size: 1.3rem;
			font-weight:600;
			margin-bottom: 10px;
		}

		.products.component .prices-wrp{
			padding: 5px;
			margin-bottom: 10px;
		}

		.products.component .prices-wrp .price-wrp{
			margin-bottom: 10px;
			border-bottom: 1px dotted var(--body-colour);
		}

		.products.component .prices-wrp .price,
		.products.component .prices-wrp .label{
			font-weight: 600;
			font-size: 1.1rem;
		}

		.products.component .prices-wrp .label{
			font-weight: 800;
		}

		.products.component .product-note p{
			font-size: 0.95rem;
			font-style: italic;
		}

		.products.component .product h2,
		.products.component .product h3,
		.products.component .product h4{
			color: var(--title-colour);
		}
		
		.products.component .product p{
			color: var(--body-colour);
		}
		
		.products.component .product .img-container{
			padding-bottom: 65.25%;
		}

		.products.component .prices-wrp .price{
			text-align:  right;
		}
		.products.component .prices-wrp .label{
			text-align: left;
		}

		@media(min-width: 576px){
			
		}

		@media(min-width:992px){
			.products.component .product-group-wrp .product .title-wrp,
			.products.component .product-group-wrp .product .img-wrp,
			.products.component .product-group-wrp .product .description-wrp{
				text-align: left;
			}

			.products.component .ps-top-txt-area{
				padding: 30px;
				max-width:80%;
			}
		}

		@media(min-width:1470px){
			.products.component .product-groups-wrp{
				padding: 120px 60px;
			}

			.products.component .prices-wrp .price,
			.products.component .prices-wrp .label{
				font-size: 1.3rem;
			}
		}

	/*---------------------------------------------------------------*\
		Left Right Text
	\*---------------------------------------------------------------*/
		.left-right-text-rows.component .row-wrp:not(:last-child){
			margin:0;
		}

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

		.left-right-text-rows.component .row-wrp .text-wrp{
			padding: 15px;
		}

		.left-right-text-rows.component .row-wrp.even{
			background-color: var(--secondary-bg-colour);
			clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%);
			padding: 130px 0;
		}

		.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);
		}

		.left-right-text-rows.component .row-wrp.odd .image-wrp{
			clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0 90%);
			clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
			clip-path: polygon(95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%, 0 0);
		}

		.left-right-text-rows.component .row-wrp.even .image-wrp{
			clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
			clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0 95%);
			clip-path: polygon(95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%, 0 0);
		}

		@media(min-width:992px){

			.left-right-text-rows.component .row-wrp .text-wrp{
				padding: 80px;
			}
		
		}


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

        .faqs.component .questions{
            padding: 30px;
            background-color: var(--secondary-bg-colour);
            box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
            margin-bottom: 40px;
			clip-path: polygon(0 0, 100% 30px, 100% 95%, 0 100%);
			clip-path: polygon(95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%, 0 0);
        }

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

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

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

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

		.faqs.component .questions .answer *{
			color: var(--secondary-body-colour);
		}

		.faqs.component .questions .question-wrp:hover .question{
			background-color: transparent;
		}

		.faqs.component .questions .question:hover h3{
			color: var(--secondary-body-colour);
			background-color: transparent;
		}

		@media(min-width:992px){
		
			.faqs.component .questions{
				padding: 100px 60px;
			}

			.faqs.component .questions .question h3{
				padding-right: 90px;
				font-size: 1.3rem;
			}
		}

	/*--------------------------------*\
        Contact Details
    \*--------------------------------*/
		/* .component.contact-details{
			background-color: var(--secondary-bg-colour);
			clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%);
		} */


		.component.contact-details .details-wrp{
			flex-grow: 1;
			padding: 120px 30px 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);
		}

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

		.component.contact-form form.sencillo input[type="submit"]{
			border-color: var(--primary-body-colour);
			color: var(--primary-body-colour);
		}

		.component.contact-form form.sencillo input[type="submit"]:hover{
			border-color: var(--secondary-bg-colour);
			color: var(--secondary-body-colour);
			background-color: var(--secondary-bg-colour);
		}

		.component.contact-form .form-wrp{
			padding: 20px 5px;
			background-color: var(--primary-bg-colour);
			clip-path: polygon(95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%, 0 0);
		}

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

		.component.contact-form .form-wrp a{
			color: var(--primary-link-colour);
		}

		@media(min-width:992px){
			.component.contact-form .form-wrp{
				padding: 60px;
			}
		
		}



/*--------------------------------*\
    Footer
\*--------------------------------*/
	.footer-wrp{
		background-color: var(--secondary-bg-colour);
		clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%);
	}
	.footer-wrp section{
		background-color: var(--primary-bg-colour);
		clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
	}

	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;
		padding-top: 30px;
	}

	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%;
			padding-top:0;
		}

		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;
		}
	
	}