/*
Author: Saulo Padilha
Author URI: http://www.spadilha.com
*/


/*--------------------------------------------------------------------------------------------------
										RESPONSIVE
--------------------------------------------------------------------------------------------------*/

@media only screen and ( max-width: 1182px ) {

	#menu {margin: 47px 0 0 14%;}

	.wrapper {padding: 0 10px;}

	#banner {width: 98%; left: 1%;}


	/*-------------------------------------------------
	  FLUID IMAGES
	-------------------------------------------------*/
	.service-col img, .single-image img, .article-image img, #partners-content img {width: 100%; height: auto;}

}


@media only screen and ( max-height: 818px ) and (min-width: 760px) {

	.home #main {position: relative;}
	.home #main .wrapper {position: relative;}

	#banner {height: 100%; position: static; top:auto; margin-top: 0; left: auto;}

	.bx-wrapper, .bx-viewport, .bxslider, .bxslider li, .bxslider li .bnrBg {height: 100% !important;}


}

@media only screen and ( max-width: 1070px ) {

	.wrapper {padding: 0 3%;}

	#header {width: 100%; height: 125px; position: absolute;}

	#header .logo {top: 15px; left: 3%;}

	.home #main {height: auto !important;}


	#socialmedia {width: 178px; right: 3%; top: 54px;}

	#language {top: 21px; right: 3%;}

	#main {padding-top: 130px;}


	/*-------------------------------------------------
	  MENU
	-------------------------------------------------*/
	#menu {height: 42px; float: left; clear: left; margin:70px 0 0; }
	.menuClick {width: 100%; height: 42px; display: block; float: left; cursor: pointer;}
	.menuIcon {width: 130px; height: 42px; line-height: 42px; background: url(_images/ico_menu.png) left top no-repeat; float: left; cursor: pointer; display: block; padding-left: 33px;}


	#collections, #menu-top-menu {display: none;}

	#collections {width: 96%; position: absolute; top:120px; left:2%; z-index: 100; cursor: pointer; padding: 0;}
	#collections h3 {width: 100%; height: 42px; line-height: 42px; padding: 0; float: left; clear:left; background-color: #D9D2CC; display: block; text-align: center;}

	.collectionsPanel {width: 100%; height: auto; position: relative; top: 0; left: 0; float: left; clear: left;}
	.collectionsPanel:before {display: none;}

	.collectionsPanel h4 {display: none;}

	#panelThumbWrapper {display: none;}

	#menu > ul {width: 96%; position: absolute; top:162px; left:2%; z-index: 85; cursor: pointer; display: none; }
	#menu > ul li {width: 100%; float: left; clear: left; border-top: 1px solid  #fff; margin: 0; text-align: center;}
	#menu > ul li a {width: 100%; height: 42px; line-height: 42px; padding: 0; float: left; clear:left; background-color: #D9D2CC; display: block;}

	#menuPanel {width: 100%; position: relative; top: auto; left: auto; float: left; clear: left;}


	.collectionsPanel ul li ul {width: 100%; height: auto; min-height: 0; position: relative; left:0px; top: 0px; padding: 0px 0 10px; display: none;}

	.collectionsPanel ul li ul li {width: 100%;}
	.collectionsPanel ul li ul li a {width: 100%;}
	.collectionsPanel ul li ul li a:hover {color:#3CB1A4;}

	.collectionsPanel ul li .sublevel li a {padding-left: 32px;}

	.collectionsPanel ul li span:hover, .collectionsPanel ul li.active span, .collectionsPanel ul > li > ul > li.active a {color: #fff; background: #3CB1A4;}


	/*-------------------------------------------------
	  BANNER HOME
	-------------------------------------------------*/
	#banner {width: 100%; left:0px; position: relative; top: 0; margin-top: 0;}

	.bxslider li {width: 100% !important; float: left; clear: left; margin-bottom: 15px;}



	/*-------------------------------------------------
	  TIMELINE
	-------------------------------------------------*/
	.timelineTop {height: 80px; margin-top: 0;}

	.timeline.red, .timeline.yellow, .timeline.lime, .timeline.pink, .timeline.orange, .timeline.blue,
.timeline.darkblue, .timeline.green {margin-top: -90px;}

	.year-block {width: 49%; padding: 2%;}
	.year-block img {width: 100%; height: auto; margin:0 0 10px;}

	.left .year {right: -24%}
	.right .year {left: -24%;}


	.red .cartoon {right:auto; left: 0;}
	.yellow .cartoon {left:auto; right: 0;}
	.lime .cartoon {right:auto; left: 0;}
	.pink .cartoon {left:auto; right: 0;}
	.orange .cartoon {right:auto; left: 0;}
	.blue .cartoon {left:auto; right: 0;}
	.darkblue .cartoon {right:auto; left: 0;}
	.green .cartoon {right:auto; right: 0;}




	/*-------------------------------------------------
	  FOOTER
	-------------------------------------------------*/
	#footer {height: auto;}
	#footer:hover, #footer.opened {background-color:#e3dfdb;}

	.btnFooter {display: none;}

	.ftrBlock {width: 33%; float: left; margin:0 0 30px 0; text-align: center;}
	.ftrBlock h3, .ftrBlock ul, .ftrBlock iframe {float: none; margin-bottom: 20px;}

	#newsletter {margin: 0 auto;}


	.footerLoader {width: 100%; height: 22px; background: url('_images/loading.gif') center top no-repeat; display: block; position: static; left:auto; top:auto; float: left; clear: left;}


	#pageForm {width: 100%; float: left; clear: left; margin-bottom: 30px;}




}




@media only screen and ( max-width: 760px ) {

	/*-------------------------------------------------
	  TIMELINE
	-------------------------------------------------*/
	.timelineTop {height: 80px; margin-top: 0;}

	.timeline.red, .timeline.yellow, .timeline.lime, .timeline.pink, .timeline.orange, .timeline.blue,
.timeline.darkblue, .timeline.green {margin-top: 120px;}

	.year-block {width: 100%; padding: 3%;}
	.year-block:before {display: none;}

	.year-block img {width: 100%; height: auto; margin:0 0 10px;}

	.left .year, .right .year {top: -62px; left: 50%; margin:0 0 0 -36px;  right: auto;}

	.cartoon {display: none;}


	/*-------------------------------------------------
	  SERVICES
	-------------------------------------------------*/
	.service-col {width: 48.5%; margin-right: 3%;}
	.service-col:nth-child(2n) {margin-right: 0;}

	.gallery-wrap ul li {width: 100%; margin-top: 20px;}

	.serviceLoader {position: fixed; top: 95px;}

	#service-main h1, #service-main h2 {clear: left;}


	/*-------------------------------------------------
	  FOOTER
	-------------------------------------------------*/
	.ftrBlock {width: 50%;}



	#googleMapLeftInfo {width: 100%; float: left; clear: left;}
	#googleMap-box { width: 100%; float: left; clear: left; }

	#ou-nous-trouver-left-picture {margin: 10px auto 40px;}
}


@media only screen and ( max-width: 650px ) {


	/*-------------------------------------------------
	  COLLECTIONS
	-------------------------------------------------*/
	.grid-item {width: 100%;}
}


@media only screen and ( max-width: 450px ) {


	/*-------------------------------------------------
	  COLLECTIONS
	-------------------------------------------------*/
	#singleMobile {display: block;}
	/*#singleLarge {display: none;}*/

	.page-collumn {width: 100%; float: left; clear: left; margin:0px;}
	.page-collumn:last-child {margin: 0;}

	.clctMenuBlock {width: 100%; float: left; clear: left; margin: 0 0 30px 0; text-align: center;}
	.clctMenuBlock ul {float: none;}


	#bubleman.bubleFixed {position: static; bottom:auto; left:auto; margin:0 auto;}


	/*-------------------------------------------------
	  SITE MAP
	-------------------------------------------------*/
	.sitemapcol {width: 100%; float: left; clear: left; margin: 0 0 30px 0; text-align: center;}
	.sitemapcol ul {float: none;}


	/*-------------------------------------------------
	  SERVICES
	-------------------------------------------------*/
	.service-col {width: 100%; margin: 0;}

	.gallery-wrap ul li {width: 100%; margin-top: 20px;}

	#service-main .alignleft, #service-main .alighright {width: 100%; height: auto; margin: 0;}

	/*-------------------------------------------------
	  Où nous trouver?
	-------------------------------------------------*/
	#googleMapLeftInfo, #googleMap-box {width: 100%; float: left; clear: left;}


	#partners-content .part-1, #partners-content .part-2 {width: 100%; float: left; clear: left; margin-bottom: 20px;}


	/*-------------------------------------------------
	  Actualités
	-------------------------------------------------*/
	#actltsFooterIcon {display: none;}


	/*-------------------------------------------------
	  FOOTER
	-------------------------------------------------*/
	.ftrBlock {width: 100%; clear: left;}


}

/*-------------------------------------------------
	RETINA BACKGROUND IMAGES
-------------------------------------------------*/
@media  only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (   min--moz-device-pixel-ratio: 1.5),
        only screen and (     -o-min-device-pixel-ratio: 3/2),
        only screen and (        min-device-pixel-ratio: 1.5),
        only screen and (min-resolution: 192dpi) {


	#header .logo {
		background-image: url('_images/logo_moulinroty@2x.png');
		background-size: 205px 40px;
	}

	.menuIcon  {
		background-image: url('_images/ico_menu@2x.png');
		background-size: 30px 42px;
	}


	#socialmedia a, #socialmedia span {
		background-image: url('_images/sprite_socialmedia@2x.png');
		background-size: 170px 140px;
	}


	#actltsFooterIcon {
		background-image: url('_images/actualites_footer@2x.png');
		background-size: 110px 156px;
	}


	#bubleman {
		background-image: url('_images/bubble_man@2x.png');
		background-size: 340px 312px;
	}


	.post .date {
		background-image: url('_images/date_bubbles@2x.png');
		background-size: 792px 42px;
	}


	.year {
		background-image: url('_images/timeline_dates_bg@2x.png');
		background-size: 73px 528px;
	}

	.red .cartoon,
	.yellow .cartoon,
	.lime .cartoon,
	.pink .cartoon,
	.orange .cartoon,
	.blue .cartoon,
	.darkblue .cartoon,
	.green .cartoon {
		background-image: url('_images/timeline_cartoons@2x.png');
		background-size: 368px 556px;
	}


	.timelineBottom {
		background-image: url('_images/timeline_bottom@2x.png');
		background-size: 246px 371px;
	}


	.service-close {
		background-image: url('_images/service-close@2x.png');
		background-size: 20px 20px;
	}


	.ftrCalque {
		background-image: url('_images/footer_calque@2x.png');
		background-size: 131px 254px;
	}


}