/*
#------------------------------------------------------------------------
# StoreFront - April Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2014 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: support@gavick.com 
*/

/* menu */
#gkMobileMenu {
	float: right;
	margin: 24px 0 0 0;
	position: relative;
}
.gkMenuOverlay + #gkMobileMenu {
	display: none!important;
}
#gkExtraMenu {
	display: none!important;
}
#gkMainMenu {
	display: none;
}
#gkMainMenu.gkMenuOverlay,
#gkMainMenu.gkMenuOverlay #gkExtraMenu {
	display: block!important;
}
#gkMobileMenu select {
	width: 44px;
	height: 44px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
}
#gkMobileMenu {
	color: #111;
	display: block!important;
	font-size: 32px;
	height: 44px;
	line-height: 44px;
	margin: 10px 0 9px 0!important;
	position: relative;
	text-align: center;
	width: 44px;
}
#gkMobileMenu i {
	color: #fff;
	height: 44px;
	padding: 0!important;
	position: relative;
	right: 12px;
	text-align: center;
	width: 44px;
}

@media (min-width: 768px) and (max-width: 1023px)
{
		#GracylAramisHeader img
	{
		max-width: 100%;
		max-height: 100%;
		margin: auto;
		display: block;
	}
	
	.visCSSlabel {
		width: 100%;
	}
	
	.itemBody {
		margin: 0 0 30px !important;
	}
	
	#visformcontainer {
		width: 100%;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	
	input[type="submit"], input[type="button"]
	{
		    background: rgba(183,117,51,0.5) !important;
			cursor: default;
			float: inherit;
			color: #fff !important;
			margin-right: auto;
			margin-left: auto;
	}
	
	input[type="submit"]:hover, input[type="button"]:hover
	{
		background: rgba(183,117,51,1) !important;
				color: #fff !important;
	}
	
	.gr-colorGrey.gr-title.no-margin-top
	{
		margin-top: 0px !important;
	}
	
	.padding-bottom-20  
	{
		padding-bottom: 20px !important;
	}
	
	textarea, input[type="text"], input[type="textarea"], input[type="telephone"], input[type="password"], input[type="url"], input[type="email"] 
	{
		width: 100%;
	}
	
	.gr-block-blue
	{
		padding-left: 30px;
		text-align: center;
		padding-right: 30px;
		color: #193b4e;
		font-family: Raleway !important;
		font-weight: lighter !important;
		font-size: 18px;
		line-height: 36px;
	}
	
	.visform textarea {
		height: auto;
		width: 100%;
	}
	
	/**/
	
	
	.itemBody > ul, .itemBody > div > ul, ul.gkBullet1, ul.gkBullet2, ul.gkBullet3, ul.gkBullet4 {
		margin: 0em 0;
		padding: 0;
	}
	
	
	#gkHeader 
	{
		
	}
	
	.gr-block img
	{
		width: 100%;
	}
	
	.mobileNOK
	{
		display:none !important;
	}
	
	.itemBody > ul li, .itemBody > div > ul li, #product-tabs-content dd, ul.gkBullet1 li, ul.gkBullet2 li, ul.gkBullet3 li, ul.gkBullet4 li {
		list-style: none;
		overflow: inherit;
		padding: 0px 0 0px 0px;
		position: relative;
		display: contents;
	}
	
	
	#gkLogo img 
	{
		display: block;
		margin: 0;
		max-width: 100%;
	}
	
	.left-padding
	{
		padding-left:10% !important;
	}

	.gkmenu li.first, #gkFooterNav .menu .item-640
	{
		display: none;
	}

	.gkMenu > ul > li.active > a 
	{
		font-weight: bold;
	}

	.gkMenu > ul > li.active > a::after 
	{
		display: block;
		position: relative;
		width: 20px;
		content: '';
		margin-left: auto;
		border-bottom: 2px solid #ffa836;
		bottom: 15px;
	}

	.gkMenu > ul > li > a:hover::after
	{
		display: block;
		position: relative;
		width: 20px;
		content: '';
		margin-left: auto;
		border-bottom: 2px solid #ffa836;
		bottom: 15px;
	}

	#gkMainMenu, h1, h2, h3, h4, h5, h6, blockquote, .gkMenu > ul li div.childcontent header, .result-title, #gkMenuOverlayContent, .gk-newsletter input[type="button"], #gkMenuOverlayClose, #gkMenuOverlayHeader, #gkLogo.text, .gkIsWrapper-gk_storefront figcaption, .product-price span.PricesalesPrice, .gkTotal, .products .nspArt, .products .nspHeader, #gkSearch input {

		font-family: Raleway !important;
		font-weight: lighter !important;
	}

	#gkHeaderNav
	{
		background: #193b4e !important;
		top: 0px !important;
	}

	#gkTopMenu {
		float: right !important;
	}

	#gkTopMenu a 
	{
		color: #fff !important;
		padding: 4px 10px !important;
		background: #ffa836 !important;
		font-size: 13px !important;
		text-transform: uppercase;
		display: block;
		height: 25px;
		line-height: 25px;
	}

	#gkTopMenu a::after 
	{
		content: "";
		display: inline-block;
		width: 25px;
		height: 25px;
		margin-left: 10px;
		background: url(../images/GRACYL/GRACYL-ARAMIS-RENOVATION-TOP-MENU-DEVIS.png) no-repeat;
		background-size: 100%;
		vertical-align: middle;
		top: 0px;
		border-bottom: 0px;
		margin-bottom: 0px;
	}

	#gkHeaderTop 
	{
		display: none !important;
	}

	#gkLogo 
	{
		margin: 14px 24px 0 0 !important;
		width: 75%;
	}


	/*Header DEBUT*/

	#GracylAramisHeader
	{
		display: none !important;
	}
	/*Header FIN*/

	.gr-banners 
	{
		width: 100% !important;
	}

	.minus120
	{
		 margin-top: 0px !important;
	}

	.gr-banners[data-cols="3"] li {
		width: 33.333333333%;
	}
	
	.gr-banners[data-cols="3"] li.last {
		margin-bottom: 40px;
	}

	.gr-banners li {
		border: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float: left;
		padding: 0 0px !important;
		position: relative;
	}


	.gr-banners-prestation 
	{
		overflow: hidden;
		width: 700px;
		margin-right: auto !important;
		margin-left: auto !important;
		list-style-type: none !important;
		width: 50%;
    	float: left;
	}
	
	.gr-banners-prestation.last
	{
		width: 100%;
	}

	.gr-banners-prestation[data-cols="3"] li {
		width: 100%;
	}

	.gr-banners-prestation li {
		border: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float: left;
		padding: 0 5px;
		position: relative;
	}

	.gr-banners-prestation li #gr-banner-image 
	{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		height: 90px;
		display: inline-flex;
	}

	.gr-banners-prestation li #gr-banner-image img 
	{
		object-fit:contain;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.smaller-icon img
	{
		padding: 10px;
	}

	.aligne-icon img
	{
		padding: 17px 0px 0px 0px;
	}



	.gr-banners-prestation #gr-banner-text {
		color: #1b1d1f;
		font-size: 14px;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		text-transform: none;
		font-family: Raleway;
		font-weight: lighter;
		line-height: 20px;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.itemBody > ul li::before, .itemBody > div > ul li::before, ul.gkBullet1 li::before, #product-tabs-content dd::before {
		display: none;
	}

	.gr-Partenaires
	{
		margin: 10px 10%;
		display: flex;
		background-color: #FFF;
		height: 130px;
	}

	.gr-Partenaires .gr-banner-image
	{
		width: 80%;
		height: 80px;
		display: inline-flex;
		margin: auto;
	}


	.gr-Partenaires .gr-banner-image img
	{
		object-fit: contain;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center;
		max-width: 100%;
		max-height: 100%;
	}

	.gr-banner-brick 
	{
		position: relative;
		font-size: 14px;
		text-transform: uppercase;
		margin: auto;
		padding: 5px;
		background: #fff;
	}

	.gr-banners li #gr-banner-image img 
	{
		display: grid;
		height: 60px;
		margin-left: auto;
		margin-right: auto;
	}

	.gr-banners li div strong {
		color: #1b1d1f;
		font-size: 12px;
		font-weight: bold;
		/* position: absolute; */
		/* display: table; */
		position: relative;
		margin-left: auto;
		margin-right: auto;
		background-color: #fff;
		margin-top: 30px;
		/* padding-top: 20px; */
		right: 0;
		text-transform: uppercase;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		font-family: Raleway;
		font-weight: lighter;
	}

	.gr-banner-brick li div strong
	{

	}

	.box li {
		border-bottom: 0px !important;
		line-height: 1.6;
		padding: 5px 0;
	}

	.gr-banner-brick #gr-banner-image
	{
		padding-top: 27px;
	}

	.gr-banner-brick #gr-banner-text
	{
		text-align: center;
		margin-top: 5px;
	}

	.frontpage .GracylAramisFirstPageQuote
	{
		text-align: center;
		margin-top: 50px;
		font-family: Raleway;
		font-size: 20px;
		font-weight: lighter;
		padding: 0 50px;
	}

	.frontpage #gkHeader 
	{
		padding: 0 0 130px 0;
		background-color: #f5f5f5;
	}

	.gr-block
	{}

	.gr-block-image
	{
		background-color: #193b4e;
		height: 370px;
		width: 300px;
		margin-top: -95px;
		box-shadow: -10px 15px 0px #193b4e, 10px 15px 0px #193b4e;
		margin-left: auto;
	    margin-right: auto;
	}

	.gr-block-image img
	{
		height: 400px;
		margin: auto;
	}

	.gr-block-text.topPhone
	{
		margin-top: 70px;
	}

	.gr-block li::before
	{
		display: none !important;
	}

	.gr-block-text h1
	{
		font-family: Raleway !important;
		font-size: 23px;
		font-weight: 500;
		display: block; 
		text-align: center;
	}

	.gr-block-text sub1
	{
		font-family: Raleway !important;
		color: #ffa836;
		font-size: 14px;
		font-weight: 500;
		display: block;
		padding-top: 20px;
		text-align: center;
	}

	.gr-block-text sub2
	{
		font-family: Raleway !important;
		color: #ffa836;
		font-size: 11px;
		font-weight: 500;
		text-align: center;
		display: block;
	}

	.gr-block-text p
	{
		font-family: Raleway !important;
		color: #000;
		text-justify: auto !important;
		text-align: justify;
		max-width: 450px;
		background: transparent;
		margin-left: auto;
	    margin-right: auto;
	}

	.gr-block {
		border: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		/*padding-bottom: 40px !important;*/
	}

	.gr-block li {
		border: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float: left;
		padding: 0 5px;
		position: relative;
	}

	[data-cols="1/2"] > div 
	{
		width: 100%;
	}

	[data-cols="1/4"]
	{
	}

	[data-cols="1/4"] > div 
	{
		width: 25%;
	}

	[data-cols="1/3"] > div 
	{
		width: 100%;
		height: auto;
	}

	[data-cols="2"] > div 
	{
		width: 50%;
	}

	[data-cols="1/3"] > div#left
	{
		font-family: Raleway !important;
		color: #000;
		text-justify: auto !important;
		text-align: justify;
		max-width: 450px;
		background: transparent;
		margin-left: auto;
		margin-right: auto;
	}

	[data-cols="2/3"] > div#left
	{
		float: left;
	}

	[data-cols="1/3"] > div#right
	{
		float: right;
	}

	[data-cols="2/3"] > div#right
	{
		float: right;
	}

	[data-cols="1/2"] > div#right 
	{
		float: right;
	}
	[data-cols="1/2"] > div#left 
	{
		float: left;
	}

	[data-cols="1/4"] > div#right 
	{
		float: right;
	}
	[data-cols="1/4"] > div#left 
	{
		float: left;
	}

	[data-cols="2/3"] > div 
	{
		width: 100%;
		display: flow-root;
		margin-top: 30px;
	}

	[data-cols="1"] > div 
	{
		width: 100%;
		display: flow-root;
	}

	#center
	{
		text-align: center;
	}

	#align-right
	{
	
		margin-left: auto;
	    margin-right: auto;
	}

	#align-left
	{
	}

	.margin-left
	{
	}

	.margin-right
	{
		
	}

	p.width250
	{
		max-width: 450px;
		width: 100%;
	}
	
	.gr-block p img
	{
		
	}

	p.width350, h1.width350, sub1.width350, sub2.width350
	{
		width: 100%;
	}

	button:hover 
	{
		 -webkit-appearance: none;
		background: #ffa836 !important;
		border-color: #ffa836 !important;
		border: 1px solid #ffa836;
		color: #fff !important;
		cursor: pointer;
		display: block;
		float: left;
		font-size: 12px;
		font-weight: bold;
		height: 38px;
		line-height: 39px;
		margin: 0 5px 2px 2px;
		padding: 0 24px;
		text-align: center;
		text-transform: uppercase;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}

	button
	{
		 -webkit-appearance: none;
		background: #ffa836;
		color: #fff !important;
		cursor: pointer;
		display: block;
		float: initial;
		font-size: 12px;
		font-weight: bold;
		height: 38px;
		line-height: 39px;
		margin: 0 5px 2px 2px;
		padding: 0 24px;
		text-align: center;
		text-transform: uppercase;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
		    margin-left: auto;
    margin-right: auto;

	}

	.gr-banners[data-cols="5"] li 
	{
		width: 25%;
	}
	
	.gr-banners[data-cols="5"] li.last
	{
		width: 100%;
		margin-bottom: 35px;
	}

	.gr-banner-brick-yellow
	{
		position: relative;
		font-size: 14px;	
		text-transform: uppercase;
		margin: auto;
		padding: 5px 0px;
	}

	.parallax-yellow .title-yellow h1
	{
		font-size: 15px;
		text-transform: uppercase;
		background-color: #fff;
		font-family: Raleway !important;
		font-weight: lighter;
		height: 25px;
		text-align: center;
		padding: 0px 15px;
		width: 250px;
		padding-top: 10px;
	}

	.left-title-yellow
	{
		height: 36px;
	}

	.parallax-yellow .title-yellow
	{
	}

	.gr-banner-brick-yellow img
	{
		height: 50px !important;
	}

	.gr-banner-brick-yellow strong
	{
		display: block;
		background-color: #fff;
		font-size: 12px !important;
		height: 30px;
		z-index: 3;
		display: inline;
		width: 110px;
		line-height: 30px;
		left: 10px;
		right: 10px;
		padding: 10px 20px;
	}

	.gr-banner-brick-yellow strong::after
	{
		/*background: linear-gradient(-45deg, #FFF 5%, #ffa836 5%, #ffa836 45%, #FFF 45%, #FFF 55%, #ffa836 55%, #ffa836 95%, #FFF 95%);*/
		background: linear-gradient(-45deg, #FFF 5%, transparent 5%, transparent 45%, #FFF 45%, #FFF 55%, transparent 55%, transparent 95%, #FFF 95%);
		background-size: 7px 7px;
		background-position: 50px 50px;
		transition: all .25s ease;
		content: "";
		position: absolute;
		z-index: -1;
		top: 5px;
		left: 5px;
		height: 100%;
		width: 100%;
		transition: all .25s ease;

	}

	#gr-banner-text::after
	{

	}

	.gr-banner-brick-yellow #gr-banner-image
	{
		padding-top: 27px;
	}

	.gr-banner-brick-yellow #gr-banner-text
	{
		font-size: 18px;
		text-align: center;
		margin-top: 18px;
	}

	.gr-banner-brick-yellow a
	{

	}

	.parallax-yellow
	{
		background-color: #ffa836;
	}

	.gr-banner-link-yellow a
	{
		text-decoration: none;
		cursor: pointer;
		text-align: center;
		width: 300px;
		color: #1b1b1b;
		font-family: Raleway;
		font-weight: lighter;
		text-decoration: none;
		font-size: 18px;
	}

	.gr-banner-link-yellow
	{
		text-align: center;
		padding-bottom: 20px;
	}

	#gkBottom5 
	{
		background: #193b4e !important;
		margin-top: 30px;
	    padding-top: 30px !important;
		padding-left: 10px !important;
		padding-right: 10px !important;

	}

	#gkBottom5 .box .header::after
	{
		display: block;
		width: 20%;
		content: '';
		border-bottom: 2px solid #FFF;
		height: 10px;
	}

	#gkBottom5 .box .header
	{
		color: #fff;
		text-transform: uppercase !important;
	}

	#gkBottom5 .box
	{
		padding-bottom: 45px !important;
		margin-bottom: 0px !important;
	}

	#gkFooter 
	{
		background-color: #f1f1f1;
		color:#555555;
		font-family: Raleway;
		font-weight: lighter;
	}

	#gkStyleArea
	{
		display: none !important;
	}

	.gk-social-icons 
	{
		float: left !important;
	}

	#gkBottom5 .box li 
	{
		font-family: Raleway;
		font-weight: lighter;
		font-size: 15px;
		color: #fefefe !important;
	}

	#gkBottom5 h4
	{
		font-size: 18px;
		color: #fefefe !important;
		padding-top: 10px;
		font-family: Raleway !important;
		font-weight: lighter !important;
	}

	#gkBottom1 > div, #gkBottom2 > div, #gkBottom3 > div, #gkBottom4 > div {
		margin: 0 0px !important;
	}

	.gr-banner-striped
	{

	}

	.block-projet
	{
		text-align: center;
		color: #193b4e;
		font-family: Raleway !important;
		font-weight: lighter !important;
		font-size: 18px;
		line-height: 36px;
	}

	.block-attestations 
	{
		text-align:center;
		color:#FFFFFF !important;
		font-family: Raleway !important;
		font-weight: lighter !important;
		font-size: 13px;
		line-height: 30px;
	}

	.block-attestations::after
	{
		text-align: right;
		color: #FFFFFF !important;
		content: ">>";
		width: 20px;
		display: inline-block;
	}

	.bottom-40
	{
		padding-bottom:20px !important;
	}

	.top-40
	{
		padding-top:20px;
	}

	.gr-block-blue
	{
		padding-left: 30px;
	}

	.gr-block-blue button
	{
		background-color: #193b4e;
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}

	.gr-block-blue button:hover
	{
		background: #193b4e !important;
		border-color: #193b4e !important;
		border: 1px solid #ffa836;
		position: absolute;
	}

	.gr-block-blue button::after
	{
		content: "";	
		background: linear-gradient(-45deg, #193b4e 5%, transparent 5%, transparent 45%, #193b4e 45%, #193b4e 55%, transparent 55%, transparent 95%, #193b4e 95%);
		background-size: 7px 7px;
		background-position: 50px 50px;
		transition: all .25s ease;
		position: absolute;
		z-index: -1;
		top: 5px;
		left: 5px;
		height: 100%;
		width: 100%;
		transition: all .25s ease;
	}

	.gr-block-blue button:after:hover
	{
		content: "";	
		background: linear-gradient(-45deg, #193b4e 5%, transparent 5%, transparent 45%, #193b4e 45%, #193b4e 55%, transparent 55%, transparent 95%, #193b4e 95%);
		background-size: 7px 7px;
		background-position: 50px 50px;
		transition: all .25s ease;
		position: absolute;
		z-index: -1;
		top: 5px;
		left: 5px;
		height: 0%;
		width: 0%;
		transition: all .25s ease;
	}

	.block-width .block-projet
	{
			text-align: center !important;
	}

	.block-width .gr-block-blue
	{
			text-align: center !important;
	}

	.parallax-slideshow
	{
		background-color: #193b4e;
	}
	#gkBottom1, #gkBottom2, #gkBottom3, #gkBottom4, #gkBottom4  
	{
		padding: 0px 0 !important;
	}

	.padding-20  
	{
		padding: 20px 0 !important;
	}

	.padding-2040  
	{
		padding: 20px 0 0px 0 !important;
	}

	.vous-avez-projet
	{
		padding: 15px 0 !important;	
		display: flow-root;
	}

	.gr-colorGrey
	{
		background-color: #f5f5f5;
	}

	.gr-colorGrey.gr-title
	{
		margin-top: -40px;
		background-color: #f5f5f5;
		text-align: center;
		padding: 20px 0 40px 0;
		display: flow-root;
	}

	.gr-colorGrey.gr-title h1
	{
		font-family: Raleway;
		font-size: 23px;
		font-weight: lighter;
		text-transform: uppercase;
	}

	.gr-title h1::after
	{
		display: block;
		position: relative;
		width: 15px;
		height: 0px;
		content: '';
		top: 10px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		border-bottom: 2px solid #ffa836;
	}

	p.prestation
	{
		padding: 5px 0 30px 0;
	}

	.gr-block-text p#align-right img
	{
		width: 100%;
		float: right;
	}

	img#align-right
	{
	}


	#gkMainbody {
		margin-bottom: 0px !important;
	}

	#gkSocialAPI {
		display: none !important;
		padding: 0 0 4px 0 !important;
	}

	.itemBody {

	}

	#gkHeader.nobreadcrumb {
		margin: 0 0 0px 0 !important;
	}

	[data-cols="1"] > p
	{
		font-family: Raleway !important;
		color: #000;
		text-justify: auto !important;
		text-align: justify;
		max-width: 700px;
		margin: auto;
	}

	.gr-fournisseur h1, .gr-partenaires h1
	{
		font-size: 15px !important;
		/*padding-top: 50px;
		padding-bottom: 50px;*/
	}

	.gr-fournisseur h1::after, .gr-partenaires h1::after
	{
		clear: both;
		position: relative;
		margin-top: 0px;
		height: 25px;
		width: 3.5px;
		background: #b6b6b6;
		content: "";
		border-bottom: 3.5px solid #b6b6b6;
	}

	.padding-top
	{
		padding-top: 15px;
	}

	img {
		background: transparent;
	}
	
	.gkCols[data-cols="4"] > div, .gkCols[data-cols="5"] > div 
	{
		margin-bottom: 30px;
		width: 50% !important;
	}
	
	#gkFooterNav {
		margin: 0px auto 20px auto;
	}
	
	
	
	#portfolio .paths {
		display: none;
	}
	
	.background-left {
		width: 5%;
		height: 400px;
		display: block;
		background-color: rgba(255, 255, 255, 0.72);
		z-index: 100;
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
	}
	
	.background-right {
		width: 5%;
		height: 400px;
		display: block;
		background-color: rgba(255, 255, 255, 0.72);
		z-index: 100;
		position: absolute;
		z-index: 2;
		right: 0;
		top: 0;
	}
	
	#portfolio .arrows .next {
		background-position: 0 0;
		right: 10%;
		top: 215px;
		height: 30px;
		width: 30px;
	}
	
	#portfolio .arrows .prev {
		left: 10%;
		top: 215px;
		height: 30px;
		width: 30px;
		background-position: -3px -32px;
	}
}