*{padding:0px; margin:0px; font-family:"montserrat", sans-serif;}
    #header{height:100px; 
    background:#34495e;
    padding: 0 20px;
    color:#fff;
    font-family: 'Montserrat', sans-serif;
    }
body {
	background-color: #FFFFFF;font-family: 'Montserrat', sans-serif;
}
.llistes{margin:50px;}
a:link {
	
	transition:0.3s;color: #3498db;
	text-decoration:none;
        outline:none;
}
a:visited {
	color: #3498db;
}
a:hover {
	transition:0.3;color: #3498db;
}
a:active {
	color: #000;
	
}
.interes{margin:20px;}
.exeramon{display:block;padding-top:30px;
}
    .logo{
      position:absolute;
      top:22px;
      }
      .menu{
        float:right;
        line-height:100px;
        }
      .menu a, .exercicis a{
        color:#fff;
        text-transform:uppercase;
        text-decoration:none;
        padding: 0 10px;
        transition: 0.4s;
        
        }
        .show-menu-btn,.hide-menu-btn{
          transition: 0.4s;
          font-size: 30px;
          cursor:pointer;
          display:none;
          }
        .show-menu-btn{float:right;}
        
        
        .show-menu-btn i{
          line-height:100px;
          } 
        
        .menu a:hover,
        .show-menu-btn:hover,
        .hide-menu-btn:hover{
          color:#3498db;}
        
          #chk{position:absolute;
          visibility:hidden;
          z-index:-1111;}
          
        @media screen and (max-width:815px){
          
          .show-menu-btn,.hide-menu-btn{
            display:block;}
            .menu{
              z-index:2;
              position: fixed;
              width: 100%;
              height: 100vh;
              background: #333;
              right: -100%;
              top: 0;
              text-align: center;
              padding: 80px 0;
              line-height: normal;
              transition: 0.7s;
            }
             .menu a{
               display:block;
               padding:20px;
               }
            .hide-menu-btn{
              position:absolute;
              top:40px;
              right:40px;
              }
              
              #chk:checked ~ .menu{right:0;}
              
            }
            
            
            
#bodyexercicis a{
  display:block;
    color:#3498db;
    background:#fff;
    width:100%;   
    line-height:4;
    margin:auto;
    text-decoration:none;
    }
#bodyexercicis a:hover{
  display:block;
  color:#FF7700;
  background:#7EB2E6
 }
  
.img{
  background:#7EB2E6;
  color:#fff;
  padding:20px 10px;
}
.img a {
	transition:0.3s;color: #fff;
	text-decoration:none;
        outline:none;
	color: ##3498db;
	
}








body{
  margin: 5;
  padding: 5;
  background: #fff;
}
.slidershow{
  width: 80%;
  height: 76%;
  overflow: hidden;
}
.middle{
  position: absolute;
  top: 565px;
  left: 50%;
  transform: translate(-50%,-50%);
}
.navigation{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.bar{color:#d1ccc0;
  display:block;
  font-size:60px;
  margin: 20px;
  cursor: pointer;
  transition: 0.4s;
}
.bar:hover{color:#3498db;
  /*background: #fff;*/
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
  width: 500%;
  height: 100%;
  display: flex;
}

.slide{
  width: 20%;
  transition: 0.6s;
}
.slide img{
  top:50%;
  left:50%;
  width: 100%;
  height: auto;
}

#r1:checked ~ .s1{
  margin-left: 0;
}
#r2:checked ~ .s1{
  margin-left: -20%;
}
#r3:checked ~ .s1{
  margin-left: -40%;
}
#r4:checked ~ .s1{
  margin-left: -60%;
}
#r5:checked ~ .s1{
  margin-left: -80%;
}
@media screen and (max-width:449px){
  .slidershow{
  width: 75%;
  height: 60%;
  overflow: hidden;
}

.bar{color:#d1ccc0;
  display:block;
  font-size:40px;
  margin: 20px;
  cursor: pointer;
  transition: 0.4s;
}
}

.margin{margin:60px;}
  #mus{
  font-size:50px; font-family:serif;}
  
.espaiat{H2;line-height:4;transition:0.3s;}
.marsellesa, .fart, .formulario, .TIC{margin:60px;}