/*fonts*/
	@font-face {
		font-family: 'MiFuente';
		src: url('fonts/calendas_plus-webfont.woff') format('woff');
	}

	p, label, li {
		font-family: 'MiFuente', sans-serif;
	}

	h1, h2, h3, h5, h4 {
		font-family: 'MiFuente', sans-serif;
	}

	h2 {
		margin: 0;
	}

/*Generals*/
	body {
		background-color: skyblue;
		text-align: center;
	}

	p {
		font-family: 'MiFuente', sans-serif;
		font-size: 1.6em;
	}
	.ombra{
		box-shadow: -4px 5px 6px #000000a8 ;
	}

/*menu*/
	.cap {
		position: relative;
		text-align: center;
		height: 210px;
		margin: 0 0 0px 0;
		background: #8e5eb0;
		box-shadow: -4px 5px 6px #000000a8 ;
		z-index: 3;
	}

	.menuimg {
		width: 100px;
	}

		.logo {
			margin: 30px 0 13px 0;
			width: 402px;
		}

		@media screen and (max-width:403px) {
			.logo {
				margin: 30px 0 13px 0;
				width: 300px;
			}

		}

		.menu-container {
			position: relative;
			left: 50%;
			transform: translate(-50%, -50%);
			
		}
		.menu-container2 {
			background: #8e5eb0;
			box-shadow: -4px 5px 6px #000000a8 ;
			position: fixed;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 1;
			margin: 15px 0 0 0;
			width: 100%;

		}
		#opcioMenu {
			list-style: none;
			margin: auto;
			padding: 0;
		}

		.opcioMenu {
			display: inline-block;
			margin: 15px 15px 0px 0;
			padding: 5px;
			font-family: 'Sriracha', cursive;
			cursor: pointer;
			text-decoration: none;
		}

		.opcioMenu a {
			color: skyblue;
		}

		.opcioMenu a:hover {
			color: #d3ad75ff;
		}

		.btnMenu {
			cursor: pointer;
		}

		.menuPrincipal {
			margin: 15px 0 0 0;
		}
		.menuPrincipal2 {
			margin: 0px 0 0 0;
		}

		@media screen and (max-width:824px) {
	      .reviucolonies-header {
	      	    padding-top: 100px !important;
	      
	      }
	      
	      
			#menuPrincipal {
				display: none;
				padding: 0;
			}
			#menuPrincipal2 {
				display: none;
				padding: 0;
			}
	      .menuPrincipal {
	        margin: 143px 0 0 0;
	      }

			.btnMenuDiv {
				display: block;
			}

			.opcioMenu {
				display: block;
				top: 50%;
				margin: 15px 0px 0px 0;
				border-radius: 10px;
				padding: 7px 10px 0px 10px;
				background-color: #c1ebfd;
			}

			.opcioMenu:hover {
				background-color: #7eddb7;
			}

			.opcioMenu a {
				color: black;
			}

			.opcioMenu a:hover {
				color: black;
			}

			.menu-container {
				position: absolute;
				margin: 160px 0 0 0;
				z-index: 100;
			}

		}

/*samarretes*/

	@media screen and (max-width:600px) { 
	  .buttoncompra {
	    width: 95% !important;
	  }
	  
	  .imatgesamarreta {
	    width: 100% !important;
	  }


	}
	.samarretes-title h1 {
		font-size: 2em;
	    font-weight: 100;
	    text-align: center;

	}

	.samarretes-title {
		    margin-bottom: 41px !important;

	}

	.buttoncompra {
	  width: 414px;
	  margin-bottom: -84px;
	  margin-top: -53px;
	}

	.cosSamarreta p {
	  text-align: justify !important;
	  padding: 54px !important;
	  font-size: 1.4em !important;
	}

	.imatgesamarreta {
	    width: 60%;
	    margin-bottom: 29px !important;
	    display: block;
	    margin: 0 auto;

	}

/*novetats*/
	.novetat{
		margin: 31px 0px 0 0px;
  	background: #fced9f;
  	padding: 10px 30px;
	}
	.novetat p{
		font-size: 1em;
	}

	/*privacitat*/

		.cosprivacitat {
			font-size: 0.8em !important;
		      text-align: justify !important;
		}

		.cosprivacitat h2 {
			font-size: 3em !important;
		}

		@media screen and (max-width:692px) { 
		  .submitcontainer {
		      margin-top: 0px !important;  
		  }
		  
		  .check-button {
		  	width: auto !important;
		  }
		  
		  .infoactivities {
		  	width: 263px !important;
		  }
		  
		  .contacte-content {
		  	width: auto !important;
		  }
		  

		}

		.submitcontainer {
		    margin-top: 95px;  

		}

		.check-button {
			width: 402px;
		    display: inline-block !important;

		}
		.check-button input {
			    display: inline-block !important;
		  		vertical-align: top;
		    	margin-top: 37px;
		}

		.infoactivities {
			    width: 365px;
		}

		.check-button label {
			    display: inline-block !important;
		}

		#wrap {
		  height: 890px !important;
		  font-family: 'MiFuente', sans-serif;
		}

		#enviar {
			border: 1px solid grey;
		    border-radius: 5px;
		    padding: 9px;
		    padding-left: 15px;
		    padding-right: 15px;
		    background-color: #CFE5EE;
		    color: black;
		  	font-size: 1.2em;
		  font-family: 'MiFuente', sans-serif;
		}

		.uniderconstruction {
			margin-top: 33px;
		    margin-bottom: 152px;
		}

		.uniderconstruction img {
			    width: 258px;
		}

		.uniderconstruction p {
			margin-top: -44px;
		}

		.outside-container-title {
		  margin-bottom: 134px;
		}

/*activitats*/
	/*casals*/
		/*coses*/
		.cartellCasal{
			margin: 25px 0px;
				box-shadow: -4px 5px 6px #000000a8 ;
		}
			.botoInscripcio{
				display: block;
				background: skyblue;
				padding: 18px 43px;
				margin: 33px auto;
				max-width: 405px;
				border-radius: 33px;
				box-shadow: 4px 5px 6px #000000a8;
			}
			.h2Taber{
				box-shadow: 4px 5px 6px #000000a8;"
			}

			.pTaber{
				text-align: justify;    
				margin: 34px 0px 40px 40px; 
				margin-bottom: 40px; 
				font-size: 2em;"
			}
			.capCosCasals{
				text-align: left;
				background: #fced9f;
				margin: 55px 0 35px 0;
				padding: 0px 0 0px 13%;
				box-shadow: -4px 5px 6px #000000a8 ;
			}

			
			.logoCasals h1{
				margin: 0px 0 0px 0;
			}

			.casal {
					background: #8e5eb0;
					text-align: center;
					display: block;
					padding: 14px 0 5px 55px;
					box-shadow: -4px 5px 6px #000000a8;
					position: relative; 
					margin: 0 0 45px 0;
			}


			.casal > * { 
					display: inline-block;
					vertical-align: middle;
			}
			.divImgCasalV2{
				display: none;
			}
			.divImgCasal,
			.divImgCasalV1,
			.divCasal {
					display: inline-block;
			}

				/*media logo vallgorguina*/
					@media screen and (max-width:965px) {
						.divImgCasalV2{
							display: inline-block;
						}
						
						.divImgCasalV1{
								display: none;
						}
				}
			
			.casalDataLloc{
				text-align: left;
					display: flex;
					align-items: center;
			}
			.casal img{
				margin: 0 17px 0 0;
			}
			.casalDataLloc{
				margin: 15px 15px 15px 0;
			}


			.divCasal h1{
				font-size: 34px;
				color:skyblue;
			}
			.casalDataLloc p{
				margin: 0 0 0 0;
				color:skyblue;
			}
		/*hovers*/
			/*Enlla¨Casal*/
								@-webkit-keyframes casal {
									0% {
										-webkit-transform: translateY(-8px);
										transform: translateY(-8px);
									}

									50% {
										-webkit-transform: translateY(-4px);
										transform: translateY(-4px);
									}

									100% {
										-webkit-transform: translateY(-14px);
										transform: translateY(-14px);
									}

								}

								@keyframes casal {
									0% {
										-webkit-transform: translateY(-14px);
										transform: translateY(-14px);
									}

									50% {
										-webkit-transform: translateY(-4px);
										transform: translateY(-4px);
									}

									100% {
										-webkit-transform: translateY(-14px);
										transform: translateY(-14px);
									}

								}

								@-webkit-keyframes casal-float {
									100% {
										-webkit-transform: translateY(-8px);
										transform: translateY(-8px);
									}

								}

								@keyframes casal-float {
									100% {
										-webkit-transform: translateY(-14px);
										transform: translateY(-14px);
									}

								}

								.casal {
									color: black;
									vertical-align: middle;
									-webkit-transform: perspective(1px) translateZ(0);
									transform: perspective(1px) translateZ(0);
									box-shadow: 0 0 1px rgba(0, 0, 0, 0);
								}

								.casal:hover, .casal:focus, .casal:active {
									-webkit-animation-name: casal-float, casal;
									animation-name: casal-float, casal;
									-webkit-animation-duration: .3s, 1.5s;
									animation-duration: .3s, 1.5s;
									-webkit-animation-delay: 0s, .3s;
									animation-delay: 0s, .3s;
									-webkit-animation-timing-function: ease-out, ease-in-out;
									animation-timing-function: ease-out, ease-in-out;
									-webkit-animation-iteration-count: 1, infinite;
									animation-iteration-count: 1, infinite;
									-webkit-animation-fill-mode: forwards;
									animation-fill-mode: forwards;
									-webkit-animation-direction: normal, alternate;
									animation-direction: normal, alternate;
								}
			/*inscripció*/
				.botoInscripcio {
						transform: perspective(1px) translateZ(0);
						transition-duration: 0.5s;
						
					}

				.botoInscripcio:hover, .botoInscripcio:focus, .botoInscripcio:active {
					background: #8e5eb0;
					transform: scale(1.6);
					transition-timing-function: cubic-bezier(10, 2, 0.31, 0.36));
					box-shadow: 0 0 1px rgba(0, 0, 0, 0);
				}
	/*colonies*/
		.h1colonies{
			box-shadow: 4px 5px 6px #000000a8;
		}

		.reunio{
			margin: 33px auto;
				max-width: 500px;
				background: #f6af53;
				border-radius: 33px;
				padding: 1px 20px;
				box-shadow: 4px 5px 6px #000000a8;
		}
		.cartell2024{
			width: 300px;
					margin: 25px 0px;
				box-shadow: -4px 5px 6px #000000a8 ;
		}

/*index*/
	.contVideo {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	box-shadow: -4px 5px 6px #000000a8 ;
	}

	.video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	}

	.queFem{
		background: #CFE5EE;
		padding:15px 0px;
		margin: 39px 0 0px 0px;
			

	}
	.queFem h1 {
		margin-left: 10px;
    	margin-right: 10px;
	}
	.novetats{
		margin: 0px 15px 15px 15px;
		padding: 5px 15px 15px 15px;
	}


	.novetatsImg{
		display: inline-block;
		
		
	}
	.novetatsImg img{
		box-shadow: -4px 5px 6px #000000a8 ;

	}



	.novetats:hover() {

		background-color: #8e5eb0
	}

		.novetatsH1{
			display: inline-block;
			margin-left: 20px;
			margin-right: 20px;
			max-width: 800px;
			vertical-align: top;
		}
		.novetatsH1 h1{
	      font-size: 2.4em;
	      margin-top: 20px;
	      text-align: left;
		}
		.novetatsH1 p{
					font-size: 1em;
				}

		.queFem p{
			text-align: justify;
			margin: 0 224px;
			font-size: 1.6em;
		}

		.contenedorDivImgQue {
			display: inline-block;


		}

	    .divImgQue img {
	    	padding-top: 66px;
	        vertical-align: top;
	    }
		.divImgQue {
			border-radius: 50%;
			background: #80b05e;
			width: 500px;
			height: 500px;
			display: inline-block;
			text-align: center;
			line-height: 605px;
			margin: 25px 30px;
			box-shadow: -4px 5px 6px #000000a8 ;
	        width: 220px;
	        height: 220px;
	        margin-left: 50px;
	        margin-right: 50px;

		
		}

		.xxss{
			background: #80B05E;
			border-radius: 20px;
			margin: 0 auto;
			padding: 35px 0 24px 0px;
			width: 608px;
	        box-shadow: -4px 5px 6px #000000a8;
	        margin-bottom: 42px;
		}
		.xxss div{
			display: inline-block;
	        vertical-align: -webkit-baseline-middle;
	      	color: black;
			
		}
	.xxss div h1 {
	font-size: 2.4em;
	}



	.finstagram {
		height: 65px;
	}

		

		@media (max-width: 1500px) {
			

			.queFem p {
			text-align: justify;
			margin: 0 130px;
			
			}
		}


		@media (max-width: 1070px) {

				

			.queFem p {
			text-align: justify;
			margin: 0 70px;
			
			}
		}
			.divImgQue img {
				max-width: 70%;
				}

		@media (max-width: 920px) {

			

		.queFem p {
		text-align: justify;
		margin: 0 70px;
		
		}
		}


			@media (max-width: 825px) {

				

			.queFem p {
			text-align: justify;
			margin: 0 44px;
			
			}
		}



		@media (max-width: 675px) {

				

			
		}

			@media (max-width: 600px) {

				

			.xxss{
			background: #80B05E;
			border-radius: 34px 34px 34px 34px;
			margin: 0 auto;
			padding: 35px 0 24px 0px;
			width: 308px;
	        margin-bottom: 42px;
		}
		.xxss div h1{
			font-size: 1.5em;
		}
			.finstagram {
				    height: 48px; 
			}



		}



				@media (max-width: 535px) {

				

			.queFem p {
			text-align: justify;
			margin: 0 17px;
			}
		}
			@media (max-width: 450px) {

				

			.queFem p {
			text-align: justify;
			margin: 0 44px;
			
			}
		}

		@media (max-width: 400px) {

				

			.queFem p {
			text-align: justify;
			margin: 0 44px;
			
			}



		}

/*Ideali*/

	.ideari-container {
	background-color: #FCED9F;
    text-align: justify;
      margin-top: 29px;
	}

	.ideari-element {
	    width: 70vw;
	    margin: 0 auto;
	    font-size: 1.6em;
	        padding-top: 27px;
	    padding-bottom: 19px;
	}
	.ideari-text p {
		font-size: 0.8em;
	}
		@media screen and (max-width:1050px) {
	  .outside-container-title {
	    margin-bottom: 0px !important;
	  }
	  
	  .container-title-ideari {
	    width: 346px !important;
	    padding-bottom: 0px !important;
	    position: relative !important;
	    z-index: -1 !important;
	  }
	  
	  .ideari-element {
	    width: 90vw !important;
	  }

		}

		.container-title-ideari {
		    width: 39vw;
		    padding-bottom: 17px;
		  
		    background-color: #80b05e;
		    border-radius: 21px;
		    margin-top: 26px;
		    position: absolute;
		    z-index: 99999;
		    padding-top: 11px;
		    margin-left: auto;
		    margin-right: auto;
		    left: 0;
		    right: 0;

		}

	.title-ideari-img {
		display: inline-block;
	    width: 92px;
	}

	.title-ideari {
		display: inline-block;
	    vertical-align: text-bottom;
	    font-size: 2.5em;
	    font-weight: 100;
	}

		.ideali {
			max-width: 1500px;
			background-color: #a5dbf0;
			border-radius: 30px;
			margin: 0 auto;
		}

		.ideali div {
			padding: 42px 32px 33px 32px;
			margin: 28px 0 0 0;
		}

/*Pop-up Nosaltres*/

	/*Pol*/

		.modalPol {
			display: none;
			position: fixed;
			z-index: 100;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modalPol-content {
			position: relative;
			background-color: #fefefe;
			margin: auto;
			padding: 20px;
			width: 60vw;
		height: 100vh;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		.modalPol-content p {
			    font-size: 1.5em;
		}

        @media (max-width: 606px) {
		.modalPol-content {
		width: 90vw;
          }
          .modalPol-content p {
		font-size: 1.2em;
      		}
        }

		#modalPol:target {
			display: block;
		}

		#modalPol:target .modalPol {
			display: none;
		}

	/*Mar*/
		.modalMar {
			display: none;
			position: fixed;
			z-index: 100;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modalMar-content {
			position: relative;
			background-color: #fefefe;
			margin: auto;
			padding: 20px;
			width: 60vw;
          	height: 100vh;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		.modalMar-content p{
			font-size: 1.5em;
		}

        @media (max-width: 606px) {
          .modalMar-content {
            width: 90vw;
          }
          .modalMar-content p {
		font-size: 1.2em;
      		}
        }

		#modalMar:target {
			display: block;
		}

		#modalMar:target .modalMar {
			display: none;
		}

	/*Didac*/
		.modalDidac {
			display: none;
			position: fixed;
			z-index: 100;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modalDidac-content {
			position: relative;
			background-color: #fefefe;
			margin: auto;
			padding: 20px;
			width: 60vw;
          height: 100vh;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		.modalDidac-content p{
			font-size: 1.5em;
		}

        @media (max-width: 606px) {
          .modalDidac-content {
            width: 90vw;
          }
          .modalDidac-content p {
		font-size: 1.2em;
      		}
        }

		#modalDidac:target {
			display: block;
		}

		#modalDidac:target .modalDidac {
			display: none;
		}

	/*Laura*/
		.modalLaura {
			display: none;
			position: fixed;
			z-index: 100;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modalLaura-content {
			position: relative;
			background-color: #fefefe;
			margin: auto;
			padding: 20px;
			width: 60vw;
          height: 100vh;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		.modalLaura-content p{
			font-size: 1.5em;
		}

        @media (max-width: 606px) {
          .modalLaura-content {
            width: 90vw;
          }
          .modalLaura-content p {
		font-size: 1.2em;
      		}
        }

		#modalLaura:target {
			display: block;
		}

		#modalLaura:target .modalLaura {
			display: none;
		}

	/*Roger*/
		.modalRoger {
			display: none;
			position: fixed;
			z-index: 100;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modalRoger-content {
			position: relative;
			background-color: #fefefe;
			margin: auto;
			padding: 20px;
			width: 60vw;
          height: 100vh;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		.modalRoger-content p{
			font-size: 1.5em;
		}

        @media (max-width: 606px) {
          .modalRoger-content {
            width: 90vw;
          }
          .modalRoger-content p {
				font-size: 1.2em;
			}
		}

		#modalRoger:target {
			display: block;
		}

		#modalRoger:target .modalRoger {
			display: none;
		}

	/*Edu*/
		.modalEdu {
			display: none;
			position: fixed;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modalEdu-content {
			position: relative;
			background-color: #fefefe;
			margin: auto;
			padding: 20px;
			width: 60vw;
			height: 100vh;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}

		.modalEdu-content p{
			font-size: 1.5em;
		}

        @media (max-width: 606px) {
          .modalEdu-content {
            width: 90vw;
          }
          .modalEdu-content p {
			font-size: 1.2em;
      		}
        }

		#modalEdu:target {
			display: block;
		}

		#modalEdu:target .modalEdu {
			display: none;
		}

	/*Creu per tancar*/
		.close {
			color: #aaaaaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
		}

		.close:hover {
			color: red;
		}

		.close a {
			text-decoration: none;
		}

/*Ideari*/
		.cosIdeari {
			    text-align: left;
			margin: 0 auto;
			padding: 50px 50px 50px 50px;
			margin-top: 30px;
			background-color: #CFE5EE;
			font-size: 0.6em;
          		padding-bottom: 147px;
		}

		.cosIdeari h1 {
		    box-shadow: 4px 5px 6px #000000a8;
		    text-align: center;
		    background-color: #FCED9F;
		    padding-top: 9px;
		    padding-bottom: 13px;
		    border-radius: 10px;

		}


		@media screen and (max-width:500px) { 
			
		  .nosaltrestitol {
		  
		  	width: 220px;
		    vertical-align: top;
		  
		  }
		  
		  .nosaltresimatge {
		  	margin-bottom: 20px;
		  }

		}


		.nosaltresimatge {
		      display: inline-block;
		    width: 43px;
		    margin-bottom: -13px;
		    margin-right: 6px;
		}

		.nosaltrestitol {
			display: inline-block;
		    font-size: 3em;
		    font-weight: 500;
		}

		.bottomnosaltres {
			position: relative;
		    margin-top: -92px;
		}

		.ideari {
			background-color: #a5dbf0;
			padding: 35px 0 24px 0;
			margin: 0 0 30px 0;
		}

		.titolIdeari {
			background-color: #f2f1d2;
			display: inline-block;
			border-radius: 12px;
			margin: 20px 10px 20px 10px;
			padding: 10px;
			font-size: 22px;
			max-width: 365px;
			vertical-align: top;
		}

		.titolIdeari p {
			margin: 0 0 10px 0;
		}

		.linkIdeari {
			display: inline-block;
			font-size: 22px;
			margin: 5px;
			padding: 5px;
			border-radius: 30px;
		}

		.linkIdeari img {
			width: 200px;
			height: 200px;
		}

		.linkIdeari p {
			margin: 4px 5px 16px 5px;
			color: black;
		}

		.ideali ul {
			text-align: left;
			margin: 0 91px 17px 124px;
		}

		.ideali li {
			margin: 5px 0 0 0;
		}

		/*carrussel de fotos colonies*/

		.cosColonies {
			max-width: 540px;
		}

		.videoColonies img {
			display: none;
			width: 500px;
		}

		.videoColonies {
		}

		.anterior {
			position: relative;
			float: left;
			margin: 130px -35px 150px 0px;
			cursor: pointer;
			width: 52px;
			height: 52px;
			z-index: 100;
			transition: margin 0.5s linear;
			background-image: url('../img/colonies/fletxes.png');
			background-position: 0px 54px;
		}

		.siguiente {
			position: relative;
			float: right;
			margin: 130px 0 150px -35px;
			cursor: pointer;
			width: 52px;
			height: 52px;
			z-index: 100;
			transition: margin 0.5s linear;
			background-image: url('../img/colonies/fletxes.png');
			background-position: 53px 53px;
		}

		.anterior:hover {
			background-position: 0px 118px;
		}

		.siguiente:hover {
			background-position: 53px 116px;
		}

		.lineadreta {
			border-right: 1px solid #fff;
			height: 155px;
			display: inherit;
		}

		@media screen and (max-width:420px) {
			.lineadreta {
				border-right: 0px solid #fff;
			}

		}

		.infoColonies {
			max-width: 500px;
			margin: 40px 0 15px 0;
		}

		.imgLink {
			padding: 17px 5px 16px 5px;
		}

		.contingutColonies div {
			position: relative;
			display: inline-block;
		}

		.contingutColonies {
			text-align: center;
			background-color: #fdfdfd47;
			padding: 21px 0 21px 0px;
		}

		.totolColonies {
			text-align: center;
			max-width: 540px;
		}

		.linksColonies {
			margin: 0px 0 0 0;
			padding: 4px 0 0 0;
			background: #67cfd5;
		}

		.linksColonies img {
			width: 100px;
			padding: 13px 13px 0 13px;
		}

		.contingutColonies2 div {
			margin: 0 50px 72px 50px;
			line-height: 30px;
		}

		.contingutColonies2 {
			background-color: #8dd0ec;
			text-align: left;
			max-width: 1300px;
			margin: 20px auto;
			padding: 20px 0 30px 0;
		}

		.descripcio {
		}

		.totolColonies2 {
			text-align: left;
			align-items: flex-start;
		}

		.cosColonies2 {
			text-align: left;
			align-items: flex-start;
		}

		@media screen and (max-width:600px) {
			.videoColonies img {
				display: none;
				width: 300px;
			}

			.videoColonies {
			}

			.anterior {
				position: relative;
				float: left;
				margin: 73px -35px 41px 0px;
				cursor: pointer;
				width: 50px;
				z-index: 100;
				transition: margin 0.5s linear;
			}

			.siguiente {
				position: relative;
				float: right;
				margin: 73px 0 41px -35px;
				cursor: pointer;
				width: 50px;
				z-index: 100;
				transition: margin 0.5s linear;
			}

		}

		#tallers, #interactius, #dinamiques, #jocs, #activitats {
			display: none;
		}

		.botoColonies {
			display: inline-block;
			margin: 0 0 10px 0;
			border: none;
			background: none;
			cursor: pointer;
		}

		.totolColònies2 button {
			border: none; /* oculta el borde */
			background-color: transparent; /* oculta el fondo */
			padding: 0; /* oculta el espacio en blanco alrededor de la imagen */
		}

/*formulari Prinscripció*/
	.divPre {
		margin: 0 auto;
		width: 250px;
	}

/*Recursos*/

	.botocarrito{
		position: fixed;
  display: flex;
  justify-content: flex-end;
  width: 57px;
  margin: 20px;
	}

	.logoRecursos{
	margin: 6px 0 22px 0;
  width: 249px;
	}
	.descargarPdf{
		margin: 77px 0 19px 0;
  width: 192px;
  font-size: 2em;
  box-shadow: -4px 5px 6px #000000a8;
  cursor: pointer;
	}	

	.element {
		display: inline-block;
		vertical-align: top;
		margin: 10px;
	}

	.filtre {
		display: inline-block;
		vertical-align: top;
		margin: 10px;
		background: #abddf1;
	}

	.cosJoc {
		padding: 0;
		width: 210mm;
		height: 297mm;
		margin: 0px auto 16px;
		background: #fced9f;
		line-height: 1.5; /* Ajusta l'alçada de línia */
		word-spacing: 0.1em; /* Evita la unió de paraules */
		letter-spacing: normal; /* Assegura espais normals entre caràcters */
	}

	#pdfContingut p{
		font-size: 1em;
		
	}
	.resultatJoc {
	
		margin: 0px -1px 0 0;
		padding: 0 30px 0 30px;
		text-align: left;

		
	}

	.jocObjectius, .jocMaterial {
		padding: 20px;
  border: 4px solid black;
  display: inline-block;
  width: 324px;
  vertical-align: top;
  text-align: left;
  margin: 0 8px 0 8px;
  border-radius: 38px;
  min-height: 179px;
	background: skyblue;
	
	}

	
	.jocDescripció {
		padding: 20px;
  border: 4px solid black;
  display: inline-block;
  width: 710px;
  vertical-align: top;
  text-align: left;
  margin: 23px 0 0 0;
  border-radius: 38px;
  min-height: 349px;
  background: skyblue;
	
	}

	.filtreNone{
		display: none;
	}
	.botoRecursos h3, h4{
		margin: 0 0 0 0;
	}
	.inputRecursos{
		border-radius: 7px;
		width: 50%;
	}
	.textareaRecursos{
		border-radius: 10px 10px;
		width: 50%;
		min-height: 100px;
	}
	.containerFormRecursos{
		padding: 0px 25px 40px 25px;
		margin: 40px 0 30px 0;
		background: #CFE5EE;
		box-shadow: 4px 5px 6px #000000a8;
	}
	.containerFormRecursos h1{
	
		font-size: 28px;
	}

	.jocBuscat{
		border: 1px solid black;
		border-radius: 10px;
		background: #fced9f;
		padding: 8px 10px 10px 22px;
		box-shadow: 4px 5px 6px #000000a8;
		margin: 0 45px 0 45px;

	}
	.jocBuscat p{
			font-size: 1em;
			margin: 0;
	}
	.columnaFiltre{
		margin: 10px 5px 0 0;
		background: #cfe5ee;
		display: inline-block;
		box-shadow: 4px 5px 6px #000000a8;
	}
	.columnaFiltre h2{
		font-size: 1em;
		margin: 0px 2px;
	}

/*Peu*/
	.peu {
		background-color: #25172f;
		color: #fff;
		padding: 50px 0;
		text-align: center;
		vertical-align: top;
		margin: 20px 0 0 0;
		width: 100%;
      font-family: 'MiFuente', sans-serif;
          font-weight: 200;

	}

    .peuheaderdreta {
	  text-align: left;
      margin-left: 16px;
          font-weight: 200;

    }

    .peudiv {
        vertical-align: top;
      font-family: 'MiFuente', sans-serif;
          margin-left: 24px;
    margin-right: 24px;
    margin-bottom: 24px;
    height: 230px;
          background-color: #25172f;
    }
    .peudiv table {
        width: 100%;
        text-align: left;
        margin-left: 13px;
        font-size: 1.2em;
        line-height: 1.5em;
        margin-bottom: 20px;
        font-weight: lighter;
      font-family: 'MiFuente', sans-serif;
          font-weight: 200;

    }

	.containerPeu1 {
		
		display: inline-block;
		text-align: center;
		width: 238px;
		
      vertical-align: top;
	}

	.containerPeu2 {
		
		display: inline-block;
		text-align: center;
		width: 238px;
		text-decoration: none;
		
      vertical-align: top;
	}

	.containerPeu3 {
		
		display: inline-block;
		text-align: center;
		width: 238px;
		
      vertical-align: top;
	}

	.peu h3 {
		margin-bottom: 30px;
      font-weight: 200;
	}

	.peu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.peu a {
		color: #fff;
		text-decoration: none;
	}

	.peu a:hover {
		color: #ffffff5e;
		text-decoration: none;
	}

/*hovers*/
	/* Bateg botons inici */
		 .divImgQue {
		  display: inline-block;
		  vertical-align: middle;
		  -webkit-transform: perspective(1px) translateZ(0);
		  transform: perspective(1px) translateZ(0);
		  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		  -webkit-transition-duration: 0.5s;
		  transition-duration: 0.5s;
					}

				.divImgQue:hover, .divImgQue:focus, .divImgQue:active {
				  -webkit-transform: scale(1.2);
				  transform: scale(1.2);
				  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
				  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
				}

	/* Bounce Out */
		.hvr-bounce-out {
		  display: inline-block;
		  vertical-align: middle;
		  -webkit-transform: perspective(1px) translateZ(0);
		  transform: perspective(1px) translateZ(0);
		  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		  -webkit-transition-duration: 0.5s;
		  transition-duration: 0.5s;
		}

		.hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active {
		  -webkit-transform: scale(0.8);
		  transform: scale(0.8);
		  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
		  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
		}

		/* Flotant Colonies */
			@-webkit-keyframes imgLink {
				0% {
					-webkit-transform: translateY(-8px);
					transform: translateY(-8px);
				}

				50% {
					-webkit-transform: translateY(-4px);
					transform: translateY(-4px);
				}

				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			@keyframes imgLink {
				0% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

				50% {
					-webkit-transform: translateY(-4px);
					transform: translateY(-4px);
				}

				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			@-webkit-keyframes imgLink-float {
				100% {
					-webkit-transform: translateY(-8px);
					transform: translateY(-8px);
				}

			}

			@keyframes imgLink-float {
				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			.imgLink {
				color: black;
				display: inline-block;
				vertical-align: middle;
				-webkit-transform: perspective(1px) translateZ(0);
				transform: perspective(1px) translateZ(0);
				box-shadow: 0 0 1px rgba(0, 0, 0, 0);
			}

			.imgLink:hover, .imgLink:focus, .imgLink:active {
				-webkit-animation-name: imgLink-float, imgLink;
				animation-name: imgLink-float, imgLink;
				-webkit-animation-duration: .3s, 1.5s;
				animation-duration: .3s, 1.5s;
				-webkit-animation-delay: 0s, .3s;
				animation-delay: 0s, .3s;
				-webkit-animation-timing-function: ease-out, ease-in-out;
				animation-timing-function: ease-out, ease-in-out;
				-webkit-animation-iteration-count: 1, infinite;
				animation-iteration-count: 1, infinite;
				-webkit-animation-fill-mode: forwards;
				animation-fill-mode: forwards;
				-webkit-animation-direction: normal, alternate;
				animation-direction: normal, alternate;
			}

		/* Amunt */
			.flotar {
				display: inline-block;
				vertical-align: middle;
				-webkit-transform: perspective(1px) translateZ(0);
				transform: perspective(1px) translateZ(0);
				box-shadow: 0 0 1px rgba(0, 0, 0, 0);
				-webkit-transition-duration: 0.3s;
				transition-duration: 0.3s;
				-webkit-transition-property: transform;
				transition-property: transform;
				-webkit-transition-timing-function: ease-out;
				transition-timing-function: ease-out;
			}

			.flotar:hover, .flotar:focus, .flotar:active {
				-webkit-transform: translateY(-5px);
				transform: translateY(-5px);
			}

		/*flotar colonies*/
			.colonies-button {
				display: inline-block;
				vertical-align: middle;
				-webkit-transform: perspective(10px) translateZ(0);
				transform: perspective(10px) translateZ(0);
				box-shadow: 0 0 1px rgba(0, 0, 0, 0);
				-webkit-transition-duration: 0.3s;
				transition-duration: 0.3s;
				-webkit-transition-property: transform;
				transition-property: transform;
				-webkit-transition-timing-function: ease-out;
				transition-timing-function: ease-out;
			}

			.colonies-button:hover, .colonies-button:focus, .colonies-button:active {
				-webkit-transform: translateY(-20px);
				transform: translateY(-20px);
			}

			.reunio {
				vertical-align: middle;
				-webkit-transform: perspective(10px) translateZ(0);
				transform: perspective(10px) translateZ(0);
				-webkit-transition-duration: 0.3s;
				transition-duration: 0.3s;
				-webkit-transition-property: transform;
				transition-property: transform;
				-webkit-transition-timing-function: ease-out;
				transition-timing-function: ease-out;
			}

			.reunio:hover, .reunio:focus, .reunio:active {
				-webkit-transform: translateY(-20px);
				transform: translateY(-20px);
			}
		/* Flotant Nosaltres */
			@-webkit-keyframes linkIdeari {
				0% {
					-webkit-transform: translateY(-8px);
					transform: translateY(-8px);
				}

				50% {
					-webkit-transform: translateY(-4px);
					transform: translateY(-4px);
				}

				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			@keyframes linkIdeari {
				0% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

				50% {
					-webkit-transform: translateY(-4px);
					transform: translateY(-4px);
				}

				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			@-webkit-keyframes linkIdeari-float {
				100% {
					-webkit-transform: translateY(-8px);
					transform: translateY(-8px);
				}

			}

			@keyframes linkIdeari-float {
				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			.linkIdeari {
				display: inline-block;
				vertical-align: middle;
				-webkit-transform: perspective(1px) translateZ(0);
				transform: perspective(1px) translateZ(0);
				box-shadow: 0 0 1px rgba(0, 0, 0, 0);
			}

			.linkIdeari:hover, .linkIdeari:focus, .linkIdeari:active {
				-webkit-animation-name: linkIdeari-float, linkIdeari;
				animation-name: linkIdeari-float, linkIdeari;
				-webkit-animation-duration: .3s, 1.5s;
				animation-duration: .3s, 1.5s;
				-webkit-animation-delay: 0s, .3s;
				animation-delay: 0s, .3s;
				-webkit-animation-timing-function: ease-out, ease-in-out;
				animation-timing-function: ease-out, ease-in-out;
				-webkit-animation-iteration-count: 1, infinite;
				animation-iteration-count: 1, infinite;
				-webkit-animation-fill-mode: forwards;
				animation-fill-mode: forwards;
				-webkit-animation-direction: normal, alternate;
				animation-direction: normal, alternate;
			}

		/* Flotant Nosaltres */
			@-webkit-keyframes linkIdeari {
				0% {
					-webkit-transform: translateY(-8px);
					transform: translateY(-8px);
				}

				50% {
					-webkit-transform: translateY(-4px);
					transform: translateY(-4px);
				}

				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			@keyframes linkIdeari {
				0% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

				50% {
					-webkit-transform: translateY(-4px);
					transform: translateY(-4px);
				}

				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			@-webkit-keyframes linkIdeari-float {
				100% {
					-webkit-transform: translateY(-8px);
					transform: translateY(-8px);
				}

			}

			@keyframes linkIdeari-float {
				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			.linkIdeari {
				display: inline-block;
				vertical-align: middle;
				-webkit-transform: perspective(1px) translateZ(0);
				transform: perspective(1px) translateZ(0);
				box-shadow: 0 0 1px rgba(0, 0, 0, 0);
			}

			.linkIdeari:hover, .linkIdeari:focus, .linkIdeari:active {
				-webkit-animation-name: linkIdeari-float, linkIdeari;
				animation-name: linkIdeari-float, linkIdeari;
				-webkit-animation-duration: .3s, 1.5s;
				animation-duration: .3s, 1.5s;
				-webkit-animation-delay: 0s, .3s;
				animation-delay: 0s, .3s;
				-webkit-animation-timing-function: ease-out, ease-in-out;
				animation-timing-function: ease-out, ease-in-out;
				-webkit-animation-iteration-count: 1, infinite;
				animation-iteration-count: 1, infinite;
				-webkit-animation-fill-mode: forwards;
				animation-fill-mode: forwards;
				-webkit-animation-direction: normal, alternate;
				animation-direction: normal, alternate;
			}

		/* Flotant Index */
			@-webkit-keyframes imgLinkIndex {
				0% {
					-webkit-transform: translateY(-8px);
					transform: translateY(-8px);
				}

				50% {
					-webkit-transform: translateY(-4px);
					transform: translateY(-4px);
				}

				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			@keyframes imgLinkIndex {
				0% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

				50% {
					-webkit-transform: translateY(-4px);
					transform: translateY(-4px);
				}

				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			@-webkit-keyframes imgLinkIndex-float {
				100% {
					-webkit-transform: translateY(-8px);
					transform: translateY(-8px);
				}

			}

			@keyframes imgLinkIndex-float {
				100% {
					-webkit-transform: translateY(-14px);
					transform: translateY(-14px);
				}

			}

			.imgLinkIndex {
				display: inline-block;
				vertical-align: middle;
				-webkit-transform: perspective(1px) translateZ(0);
				transform: perspective(1px) translateZ(0);
				box-shadow: 0 0 1px rgba(0, 0, 0, 0);
				background: #7e58a4;
				border-radius: 9px;
				padding: 10px;
			}

			.imgLinkIndex:hover, .imgLinkIndex:focus, .imgLinkIndex:active {
				-webkit-animation-name: imgLinkIndex-float, imgLinkIndex;
				animation-name: imgLinkIndex-float, imgLinkIndex;
				-webkit-animation-duration: .3s, 1.5s;
				animation-duration: .3s, 1.5s;
				-webkit-animation-delay: 0s, .3s;
				animation-delay: 0s, .3s;
				-webkit-animation-timing-function: ease-out, ease-in-out;
				animation-timing-function: ease-out, ease-in-out;
				-webkit-animation-iteration-count: 1, infinite;
				animation-iteration-count: 1, infinite;
				-webkit-animation-fill-mode: forwards;
				animation-fill-mode: forwards;
				-webkit-animation-direction: normal, alternate;
				animation-direction: normal, alternate;
			}

		/* Bateg Menu  */
			@-webkit-keyframes opcioMenu {
				25% {
					-webkit-transform: scale(1.1);
					transform: scale(1.1);
				}

				75% {
					-webkit-transform: scale(0.9);
					transform: scale(0.9);
				}

			}

			@keyframes opcioMenu {
				25% {
					-webkit-transform: scale(1.1);
					transform: scale(1.1);
				}

				75% {
					-webkit-transform: scale(0.9);
					transform: scale(0.9);
				}

			}

			.opcioMenu {
				vertical-align: middle;
				-webkit-transform: perspective(1px) translateZ(0);
				transform: perspective(1px) translateZ(0);
				box-shadow: 0 0 1px rgba(0, 0, 0, 0);
			}

			.opcioMenu:hover, .opcioMenu:focus, .opcioMenu:active {
				-webkit-animation-name: opcioMenu;
				animation-name: opcioMenu;
				-webkit-animation-duration: 1s;
				animation-duration: 1s;
				-webkit-animation-timing-function: linear;
				animation-timing-function: linear;
				-webkit-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
			}

		/* Bateg insta  */
			@-webkit-keyframes insta {
				25% {
					-webkit-transform: scale(1.1);
					transform: scale(1.1);
				}

				75% {
					-webkit-transform: scale(0.9);
					transform: scale(0.9);
				}

			}

			@keyframes insta {
				25% {
					-webkit-transform: scale(1.1);
					transform: scale(1.1);
				}

				75% {
					-webkit-transform: scale(0.9);
					transform: scale(0.9);
				}

			}

			.insta {
				display: inline-block;
				vertical-align: middle;
				-webkit-transform: perspective(1px) translateZ(0);
				transform: perspective(1px) translateZ(0);
				box-shadow: 0 0 1px rgba(0, 0, 0, 0);
			}

			.insta:hover, .insta:focus, .insta:active {
				-webkit-animation-name: insta;
				animation-name: insta;
				-webkit-animation-duration: 1s;
				animation-duration: 1s;
				-webkit-animation-timing-function: linear;
				animation-timing-function: linear;
				-webkit-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
			}

/*per ordenar*/

	.noticiaseparator {
		height: 20px;
	    background-color: skyblue;
	}

	.noticia {
	  	margin-bottom: 48px;
	    padding-top: 48px;
	}

	.noticia-foto {
		width: 40vw;
	    display: inline-block;
	    vertical-align: top;
	    text-align: right;
	    padding-right: 3vw;
	}

	.noticia-foto-esquerra {
		width: 40vw;
	    display: inline-block;
	    vertical-align: top;
	    text-align: left;
	    padding-left: 3vw;
	}

	@media screen and (max-width:830px) { 
	  .noticia-foto-esquerra {
	    width: auto;
	    padding-left: 0vw;
	  }
	  
	  .noticia-foto { 
	    width: auto;
	    padding-left: 0vw;
	  }
	  .text-foto-dreta {
	  	width: 85vw !important;
	  }
	  
	  .text-foto-esquerra {
	  	width: 85vw !important;
	  }
	  
	  .text-foto-esquerra p { 
	  	text-align: justify !important;
	  }
	  
	  .text-foto-esquerra h2 { 
	  	text-align: center !important;
	  }
	  
	  .text-foto-dreta p { 
	  	text-align: justify !important;
	  }
	  
	  .text-foto-dreta h2 { 
	  	text-align: center !important;
	  }

	}

	.noticia-foto img {
		width: 335px;
	}

	.noticia-foto-esquerra img {
		width: 335px;
	}

	.text-foto-dreta {
		display: inline-block;
	    width: 50vw;
	    text-align: left;
	}

	.text-foto-dreta p {
		    font-size: 1.4em;
	}

	.text-foto-esquerra {
		display: inline-block;
	    width: 50vw;
	    text-align: right;
	}

	.text-foto-esquerra p {
		    font-size: 1.4em;
	}



	.colonies-separator {
	    height: 17px;
	    background-color: skyblue;
	}
	.colonies-intro {
		text-align: justify;
	    padding-top: 27px;
	    padding-left: 7vw;
	    padding-right: 7vw;
	    font-size: 0.8em;
	  	padding-bottom: 36px;
	}

	.colonies-intro h2 {
		font-size: 2.5em;
	    font-weight: 100;
	}


	.colonies-header {
		padding-top: 22px;
	    padding-bottom: 9px;
	    background-color: #FCED9F;
	}

	.colonies-button {
		text-decoration: none;
		background-color: skyblue;
		border-radius: 33px;
		width: 600px;
		margin: 25px auto 51px auto;
		box-shadow: 4px 5px 6px #000000a8;
		padding: 57px 0px 16px 0;
	}
	.colonies-button img{

		box-shadow: 4px 5px 6px #000000a8;
	}

	@media screen and (max-width:740px) { 
	  .colonies-button {
	  	width: 90vw;
	  }
	}

	.colonies-button h2 {
	  	padding-top: 20px;
	    font-size: 3em;
	}


	.records-title {
		width: 160px;
	    background-color: #FCED9F;
	    border-radius: 100px;
	    height: 160px;
	    margin-left: 29px;
	    position: absolute;
	    margin-top: -54px;
	}

	.records-title img {
	    width: 200px;
	    margin-top: 22px;
	    margin-left: -14px;
	}

	.records-colonies2023 {
		width: 160px;
		border-radius: 100px;
		height: 160px;
		margin-left: 29px;
		position: absolute;
		margin-top: -54px;
	}

	.records-colonies2023 img {
	    width: 161px;
		margin-top: -19px;
		margin-left: 20px;
		box-shadow: -4px 5px 6px #000000a8;
	}

	.records-content {
		padding-top: 143px;
	    padding-bottom: 200px;
	}


	.extraescolars-button {
		background-color: #80B05E;
	    width: 407px;
	    height: 100px;
	    margin: 0 auto;
	    border-radius: 17px;
	    box-shadow: -4px 5px 6px #000000a8;
	  	margin-bottom: 86px;
	}

	.recordscontainer {
	    width: 60vw;
	    background-color: #80b05e;
	    border-radius: 40px;
	    margin: 0 auto;
	    text-align: left;
	    padding: 34px;
	    box-shadow: -4px 5px 6px #000000a8;
	}
	.recordsimg {
		width: 14vw;
	    display: inline-block;
	}

	.recordstext {
		display: inline-block;
	    width: 40vw;
	    vertical-align: top;
	    padding-left: 2vw;
	}

	.recordstext h2 {
		font-size: 2.2em;
	}

	.recordstext p {
	  font-size: 1.6em;
	}

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

	  .recordsimg {
	  	width: 229px;
	  }
	  
	  .recordscontainer {
	  	    text-align: center;
	  }


	}


	.extraescolars-title {
		display: inline-block;
	    width: 192px;
	    padding: 20px;
	    font-size: 3em;
	}

	.extraescolars-img {
		display: inline-block;
	    width: 193px;
	    position: absolute;
	    margin-left: -13px;
	    margin-top: -51px;
	}

	@media (max-width: 420px) {
	  .extraescolars-button {
	    width: 100%;
		}
	  .extraescolars-title {
	      width: 46vw;
	  }
	  .extraescolars-img {
	      width: 43vw;
	  }
	}

	.tallers-title {
		width: 96vw;
	    background-color: #FCED9F;
	    margin-top: -32px;
	    text-align: left;
	    padding-left: 4vw;
	  box-shadow: -4px 5px 6px #000000a8;
	}

	.tallers-title img {
		width: 200px;
	}

	.cosTallers {
	  text-align: justify;
	    padding-left: 3vw;
	    padding-right: 3vw;
	    font-size: 0.8em;
	  padding-bottom: 10vh;
	}

	.cosTallers ul {
		font-size: 1.8em;
	}

	.cosTallers ul li {
		margin-bottom: 4vh;
	}



	.submitcontainer {
		float: right;
	}
	.contacte-title h1 {
		width: 231px;
	    text-align: center;
	    background-color: #FCED9F;
	    padding-top: 19px;
	    padding-bottom: 23px;
	    border-radius: 10px;
	    font-size: 2.2em;
	    font-weight: 600;
	    position: absolute;
	    margin-left: 5vw;
	    margin-top: -32px;
	}

	.contacte-content {
		text-align: left;
	    line-height: 0.7;
	    margin: 20px;
	    padding-top: 93px;
	    width: 356px;
	    display: inline-block;
	    vertical-align: top;
	}

	.contacte-content h2 {
		font-size: 2.2em;

	}

	.contacte-content p {
		font-size: 1.7em;
	}

	.cosContacte {
	    margin-top: 96px;
	    text-align: center;
	    background-color: #CFE5EE;
	    padding: 0 0 2px 0;
	}


	.fotoEquip {
		border-style: none;
	    width: 368px;
	    border-radius: 181px;
	}

	.divFotoEquip {
	  display: inline-block;
	    margin-left: 60px;
	    margin-right: 60px;
	}

	@media (max-width: 520px) {
	  .divFotoEquip {
	  	margin-left: 10px;
	    margin-right: 10px;
	  }}

	.cosNosaltres {
	    background-color: #CFE5EE;
	    margin-top: 129px;
	    padding-top: 31px;
	}

	.imageequip {
		width: 256px;
	    position: absolute;
	    margin-left: -376px;
	    margin-top: -157px;
	}

	@media (max-width: 700px) {
	  .imageequip {
	  	display: none;
	  }
	  .cosNosaltres {
	  margin-top: 37px;
	  }

			
	}

		@media screen and (min-width:824px) {
			.btnMenuDiv {
				display: none;
			}

		}