/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




	/*==========  Mobile First Method  ==========*/

	/* Custom, iPhone Retina */ 
	@media only screen and (min-width : 320px) {
		
	}

	/* Extra Small Devices, Phones */ 
	@media only screen and (min-width : 480px) {

	}

	/* Small Devices, Tablets */
	@media only screen and (min-width : 768px) {

	}

	/* Medium Devices, Desktops */
	@media only screen and (min-width : 992px) {

	}

	/* Large Devices, Wide Screens */
	@media only screen and (min-width : 1200px) {

	}



	/*==========  Non-Mobile First Method  ==========*/

	/* Large Devices, Wide Screens */
	/* md */
	@media only screen and (max-width : 1200px) {

			.navbar .container
			{
				width: 100%;
			}

			.navbar-header
			{
				width: 100px;
			}

			.navbar-brand img
			{
				margin-top: 60px;
			}

			.navbar-brand.small-logo img
			{
				width: 110px;
				margin-left: -5px;
				height: auto;
			}

			/*#inici .container
			{
				width: 100%
			}*/

			#inici .items_principals  img
			{
				width: 168px;
				height: auto;
			}

			#inici .items_principals .item
			{
				padding: 10px;
			}

			#inici .items_principals .item .btn 
			{
				font-size: 17px;
			}

			#inici .jumbotron
			{
				/*margin-left: -10%;*/
			}


			.contentblock-grid
			{
				height: 385px;
			}
			
	}


	/* Special break point for navbar and modal galleries */
	@media only screen and (max-width: 1080px) {
	
			#galleryModal .modal-dialog
			{
				width: 900px
			}

			#galleryModal img
			{
				max-width: 870px;
			}

			.galleryCloseButton
			{
				margin-left: 846px;
			}

			.navbar
			{
				font-size: 17px!important;
			}

			.navbar-brand.small-logo img
			{
				width: 90px;
			}
			
	}


	/* Medium Devices, Desktops */
	/* sm */ 
	@media only screen and (max-width : 992px) {

		/* Change the background of the collapsed navbar list and move the list to bottom to avoid logo overlapping*/
		.collapsing, 
		.in 
		{
			background-color: #f5f5f5;
			z-index: -2;
			margin-top: 20px;
		}

		#inici .collapsing, 
		#inici .in 
		{
			margin-top: 80px;
		}

		.navbar-header
		{
			width: auto;
		}

		.navbar-brand img
		{
			margin-top: 0px;
		}

		.navbar-brand.small-logo img
		{
			width: 90px;
			margin-left: -5px;
			height: auto;
		}

		.title-image
		{
			margin-bottom: 20px;
		}

		#inici .items_principals p
		{
			min-height: 140px;
			margin-bottom: 20px;
		}

		#inici .items_principals  img
		{
			width:128px;
		}

	    #inici .jumbotron
	    {
	    	background-image: url("../img/jumbotron_small.jpg");
	    }


		#inici .jumbotron h1
		{
			font-size: 36px;
			margin-top: 65px;
		}

		#inici .jumbotron h2
		{
			font-size: 22px;
		}

		#inici .jumbotron .btn
		{
			margin-top:240px;
		}


		.contentblock-grid
		{
			height: auto;
		}

		.contentblock-grid-frame
		{
			height: auto;
		}
	}

	/* OK, this is weird. Bootstrap is working in a wrong way when 992 width is reached, keeping the non-responsive navbar on the screen, and
	   overlapping the logo. So, at 992 keep the logo small, and at 991, when the navbar becomes responsive (yes, just for 1 pixel), enlarge it */
	@media only screen and (max-width: 991px) {
	
			.navbar-brand.small-logo img
			{
				width: 150px;
			}
			
	}

	/* Small Devices, Tablets */
	/* xs */
	@media only screen and (max-width : 768px) {

		/* Move again the list to the top to match with the logo */
		.collapsing, .in 
		{
			margin-top: 0px;
		}

		/* Decrease the logo size for phone screens */
		/*.navbar-brand img
		{
			width: 100px;
			height: auto;
		}	*/

		/*#inici .items_principals img
		{
			width: 96px;
			height: auto;
		}*/

		#inici .items_principals p
		{
			min-height: 80px;
			margin-bottom: 5px;
		}

		#inici .items_principals .btn
		{
			margin-bottom: 60px;
		}


		#inici .jumbotron h1
		{
			font-size: 36px;
			margin-top: 100px;
		}

		/*#inici .replace_jumbotron
		{
			text-align: center;
			margin-bottom: 50px;
		}

		#inici .replace_jumbotron img
		{
			height: 140px;
		}
*/

		.footer .developedby
		{
			text-align: right;
		}


		.page-header .title
		{
			margin-left:0px;
			text-align: center;
		}

		.presmall-footer
		{
			margin-top: 20px;
		}

		/* Avoid a small overflow in a really tiny screen sizes, inherited from col-*-*  */
		.presmall-footer div
		{
			padding-left: 0px;
			padding-right: 0px;
		}

		.contentblock
		{
			padding-left: 10px;
			padding-right: 10px;
		}

		/*
		.contentblock ul
		{
			padding-left:0px;

		}*/

		/*
		.contentblock ul>li>ul
		{

			padding-left: 20px;
		}
		*/

		.contentblock .well-info ul
		{
			padding-left: 20px;
		}

		.footer .legalnotice
		{
			text-align: left;
		}

		.footer .developedby
		{
			text-align: right;
		}

		.contentblock-img .gallery-responsive ul {
		    margin-left: -10px;
		}		




		
	}

	
	/* Special point to fit better some gallery images */
	@media only screen and (max-width: 700px) {

		.contentblock-img .gallery-responsive ul {
		    margin-left: -25px;		
			}


	}
	
	
	/* Special point to fit better some gallery images */
	@media only screen and (max-width: 640px) {

		.contentblock-img .gallery-responsive ul {
		    margin-left: -35px;		
			}

		.youtube 
		{ 
			position: relative;
			padding-bottom: 56.25%; /* 16:9 */
			padding-top: 25px;
			height: 0;	
			margin-top: 40px;
		}

		.youtube iframe
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	/* Special point to fit better some gallery images */
	@media only screen and (max-width: 580px) {

		.contentblock-img .gallery-responsive ul {
		    margin-left: -40px;		
			}


	}

	/* Special point */
	@media only screen and (max-width: 520px) {
		#inici .item
		{
			width: 100%;
		}
	
	}


	/* Extra Small Devices, Phones */ 
	@media only screen and (max-width : 480px) {

	

		#inici .items_principals  img
		{
			/*width: 64px;*/
			height: auto;
		}

		.page-header .title h1
		{
			font-size: 24px; 
		}

		.page-header .title h2
		{
			font-size: 22px;
		}


		#inici .jumbotron h1
		{
			font-size: 27px;
		}

		.contentblock h2
		{
			font-size: 22px;
		}

		/* Label overflows in a really tiny screens. Just give a little more height space to fill the whole footer */
		.footer
		{
			height: 140px;
		}

		
	}

	/* Custom, iPhone Retina */ 
	@media only screen and (max-width : 320px) {
		
	}



	@media only print
	{
		.footer	{visibility: hidden;}
		.presmall-footer {visibility: hidden;}
	}