body {

  background-image: url('../imatges/pingu.jpg');

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: 100% 100%;

  font-family: 'Fuzzy Bubbles';font-size: 1.3vw; /*Com afegir noves fonts*/

}



.responsive-youtube{    /*Vídeos de YouTube*/

	height: 0;

	overflow: hidden;

	padding-bottom: 56.25%;

	padding-top: 30px;

	position: relative;

}

.video-responsive iframe, .video-responsive object, .video-responsive embed {  

	height: 100%;

	left: 0;

	position: absolute;

	top: 0;

	width: 100%;

	}

.center {
  padding: 30px 0;

  text-align: center;
}

#caixa1 {

    position:absolute;  

    top: 5%;                      /*On comença la caixa respecte el marge superior*/

    left: 5%;                     /*On comença la caixa respecte el marge esquerra*/
    border-style: double;  
  

background:	#EEDFCC;

    width: 90%;                   /*Amplada de la caixa*/

    height: 10%;                  /*Alçada de la caixa*/

    padding: 0.2%;                 /*Distància entre el marge i on comencem a escriure*/

   
 
    text-align: center;           /*Alineació del text que conté la caixa*/

    color: 	#8B7765;                 /*Color del text que conté la caixa*/
font-size: 2.5vw;
}

#caixa2 {

    position:absolute;

    top: 20%;

    left: 5%;

 background:	#EEDFCC;
    width: 45%;

    height: 5%;

    padding: 0.2%;

   border-width: 1%;             /*Gruix de la vora de la caixa*/

    border-color: Dimgray;           /*Color de la vora de la caixa*/

    border-style: double;   

   

    text-align: center;

    color: 	#8B7765;    

}

#caixa3 {

    position:absolute;

    top: 30%;

    left: 5%;

  

    width: 45%;

    height: 30%;

    padding: 0.2%;

     border-width: 1%;             /*Gruix de la vora de la caixa*/

    border-color: Dimgray;           /*Color de la vora de la caixa*/


   

    text-align: justify;

    color: 	#8B7765; 

}


#caixa5 {

    position:absolute;

    top: 20%;

    left: 55%;

    background-color: rgb(0, 128, 0, 0.0); /*Color de fons semitransparent de la caixa*/

    width: 35%;

    height: 30%;

    padding: 0.2%;

  

   
    text-align: center;

    color: 	#8B7765; 
    }
#caixa6 {

    position:absolute;

    top: 55%;

    left: 50%;

background:	#EEDFCC;

    width: 45%;

    height: 5%;

    padding: 0.2%;

   border-width: 1%;             /*Gruix de la vora de la caixa*/

    border-color: Dimgray;           /*Color de la vora de la caixa*/

    border-style: double;   

 

    text-align: center;

    color:	#8B7765; 

   }

#caixa8{

    position:absolute;

    top: 115%;

    left: 25%;

  background-color: rgb(0, 128, 0, 0.0); /*Color de fons semitransparent de la caixa*/

    width: 15%;

    height: 25%;

    padding: 0.2%;

  

    text-align: center;

    color: 	#8B7765; 
}
#caixa9{

    position:absolute;

    top: 115%;

    left: 50%;

 background-color: rgb(0, 128, 0, 0.0); /*Color de fons semitransparent de la caixa*/

    width: 15%;

    height: 25%;

    padding: 0.2%;

  
   

    text-align: center;

    color: 	#8B7765; 
    }
#caixa10 {

    position:absolute;

    top: 63%;

    left: 50%;



    width: 45%;

    height: 30%;

    padding: 0.2%;

     border-width: 1%;             /*Gruix de la vora de la caixa*/

    border-color: Dimgray;           /*Color de la vora de la caixa*/


   

    text-align: justify;

    color: 	#8B7765; 

}
#caixa11 {

    position:absolute;

    top: 55%;

    left: 7%;

    background-color: rgb(0, 128, 0, 0.0); /*Color de fons semitransparent de la caixa*/

    width: 35%;

    height: 30%;

    padding: 0.2%;

  

   
    text-align: center;

    color: 	#8B7765; 
    }
    #caixa12 {

    position:absolute;

    top: 105%;

    left: 25%;

background:	#EEDFCC;
    width: 45%;

    height: 5%;

    padding: 0.2%;

   border-width: 1%;             /*Gruix de la vora de la caixa*/

    border-color: Dimgray;           /*Color de la vora de la caixa*/

    border-style: double;   

   

    text-align: center;

    color: 	#8B7765;    

}