/*Versió Interactiu 13*/

@font-face {
  font-family: MontserratSemiBold;
  src: url(Montserrat-Bold.ttf);
}
@font-face {
  font-family: MontserratMedium;
  src: url(Montserrat-Medium.ttf);
}
@font-face {
  font-family: MontserratRegular;
  src: url(Montserrat-Regular.ttf);
}
@font-face {
  font-family: MontserratLight;
  src: url(Montserrat-Light.ttf);
}


*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body, * {
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
  user-select: none;         /* Standard */
  -webkit-touch-callout: none; /* iOS Safari: disables callout (like copy/save menu) */
}


html{
	width: 100vw;
	height: 100vh;
}

body{
  font-family:MontserratRegular, sans-serif;
  display:flex;
  flex-direction: column;
  background-color:#F4F4F4;
  font-size: 1vw;
  padding: 0em 4em 4em 4em ;
  height:100%;
  width:100%;
  color:#19224D;
}

a{
  text-decoration: none !important;
  color:inherit ;
}

h1{
  font-family:MontserratSemiBold, sans-serif;
  font-size:2em;
  color:#19224D;

}

h2,h3{
  font-family: MontserratMedium, sans-serif;
}

.toolbar{
  display:none !important;
}

.wrap{
  display:flex;
  flex-wrap:wrap
}

.overflow{
  overflow-y:auto;
}

.offline{
  opacity:30%;
}

.header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  height:16%;
  padding: 1em  0;
}

.header-mini{
  height:10%;
}


.header > *{
  height:100%;
}

.header-logo{
    height: 100%;
    max-width: 15%;
}

.header img{
  height:100%;
  width:auto;
}

.icon-menu{
  width:10%;
  display:flex;
  align-items: center;
  justify-content: flex-start;
}

.icon-menu img{
  height:60%;
}

.back img{
  width:60%;
}

.flex-center{
  display:flex;
  justify-content: center;
  align-items: center;
}

.idioma {
  color:#9B9B9B;
  font-family:MontserratMedium, sans-serif;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  width: 10%;
  justify-content: flex-end;
}


.content{
  background-color:#ffffff;
  height:100%;
  border-radius: 2em;
  padding:2%;
  
}



/*
.content:before{
  content:"";
  background-color:#ffffff;
  height:2em;
  width:100%;
  z-index:1;
}
*/

.main-button{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color:#19224D;
  margin: 1%; 
  padding:2%;
  border-radius: 2rem;
  text-align: center;
  min-height: calc(50% - 4%);
}

.main-button h3{
  font-size:1em;
}

.main-button > :first-child {
  height:56%;
  display:flex;
  align-items:flex-end;
}

.main-button > :nth-child(2){
  height:44%;
}

.main-button-reverse > :nth-child(1){
  height:34%;
}

.main-button-reverse > :nth-child(2){
  height:66%;
}

.main-button-reverse{

}


.main-button-group{
  display:flex;
}


.main-button-icon img{
  width: 5em;
  height: 5em;
}

.large{
  flex: 0 0 calc(33.33% - 2%);
  
}

.short{
  flex: 0 0 calc(16.66% - 2%);
  font-size:.8em;
}


.main-button-icon{
  margin-bottom:4%;
}

.main-button-group{
  display:flex;
  align-items: baseline;
  margin-top: 6%;
  width: 100%;
  color:#ffffff !important;
}

.main-button-container{
  display:flex;
  flex-direction: column;
  flex:0 0 calc(50% - 2%);
  justify-content:center;
  align-items: center;
}

.green{background-color:#B8DDB6}
.blue-light{background-color:#D8EEF2}
.pink{background-color:#F6BFC9}
.yellow{background-color:#FCDA67}
.red{background-color:#F5895A}


/*SECTION PAGE*/

.section-page{
  padding:0 !important;
}

.section-page .header{
   margin:0 4em;
}

.section-page .content{
  margin: -8% 2% 2% 2%;
  height:100%;
  overflow:hidden;
}

.content-list{
  display: flex;
  flex-wrap: wrap;
  height:100%;
    width: 100%;
}





.section-hero{
  height: 35%;
  width: 100%;
  padding: 3.8%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.section-hero{
  justify-self: flex-start;
}

.section-hero #back, .section-hero .back{
    margin-left: auto;
}

.section-hero h2{
    font-size:2em;
    margin-left:1em;
}

.event{
  background-color: #F4F4F4;
  display:flex;
  padding:2%;
  margin:1%;
  flex-direction:column;
  flex: 0 0 calc(33.33% - 2%);
  border-radius: 1em;
}

.event-date{
  color:#9B9B9B;
  font-size:1.2em;
  margin-bottom: .5em;
  font-family:MontserratRegular, sans-serif;
}

.event-image{
  width: 100%;
  height:auto;
  min-height:276px;
  max-height:276px;

  margin-bottom: 1em;
}

.event-image img {
  width: 100%;
  object-fit: cover;
  height: 100%;
  border-radius: .5em;
  
}

.event-title{
  line-height: 1.5em;
}

.event-extra-info{
  position:absolute;
}

#extra-info{
  display:flex;
  padding:1em;
  height:100%;
  width:100%;
  flex-wrap: wrap;
}

.extra-info-text{
  margin-right: 3em;
  /*display: flex;*/
  flex-direction: column;
  width: 45%;
  align-items: self-start;
}

.extra-info-title{
  font-size: 2.3em;
  margin-bottom: .5em;
}

.extra-info-description{
  font-size: 1.2em;
  line-height: 1.5em;
}

.extra-info-description p{
  margin-bottom:1em;
}

.extra-info-img{
  width:50%;
}

.extra-info-img img{
  width:100%;
  border-radius: 1em;
  border: .5em solid #e8e8e8;
}

.extra-info-qr{
  width: 100%;
  overflow: hidden;
    height: 12em;
}

.extra-info-qr img{
  height: 100%;
  width: auto;
}

.extra-info-gallery{
  width:100%;
  display:flex;
  flex-wrap: wrap;
}

.extra-info-gallery-thumb{
  margin: .3%;
  width: 32%;

}


/*PAG RESERVA PISTES*/

#reserva-pistes .content{
  overflow:hidden;
  justify-content: center;
}

#reserva-pistes iframe, #reserva-taules iframe{
    border: none;
    width: 100%;
    height: 105%;
}

#reserva-pistes .content{
  height:100%;
}


/*PAG AGENDA*/

#agenda .content{
  background-color:transparent;
  display:flex;
  padding:1%;
}

.agenda-calendar, .agenda-events{
  background-color:#fff;
  border-radius: 2em;
  padding: 2%;
}

.agenda-calendar{
  width:40%;
  align-self: flex-start;
  margin-right:2%;
}


.calendar-container{
  background-color:#F5F5F5;
  padding: 2%;
    border-radius: 1em;
}

.calendar-month-container{
  display:flex;
  width:100%;
  justify-content: space-between;
  padding:1em 1em 1.8em 1em;
  font-family: 'MontserratMedium', sans-serif ;
  
}

.calendar-month{
  text-align: center;
  text-transform: uppercase;
  font-size: 1.6em;
}

.calendar-month-arrow{
  font-size: 1.8em;
}

.calendar-week{
  display:flex;
  justify-content: space-around;
  margin-bottom:2em;
  font-weight:bold;
}

.calendar-days{
  display:flex;
  flex-wrap: wrap;
}

.calendar-days div{
  width:calc(100%/7);
  height:1em;
  text-align:center;
  z-index: 1;
  display:flex;
  justify-content: center;
  align-items: center;
  margin-bottom:2em;
  font-size:1.3em;
}


.day-with-event{
  color:white;
}

.day-with-event:before{
  content: '';
  background-color: #DA3749;
  width: 1.8em;
  border-radius: 50%;
  height: 1.8em;
  position: absolute;
  z-index: -1;
}



.agenda-events{
  width:60%;
  background-color:#fff;
  overflow:hidden;
  height: 100%;
  font-size:1.2em;
}

.agenda-events-day{
  font-size: 1em;
  font-weight: bold;
  margin-top: 2em;
  text-align: center;
  border-right: 1px solid #19224D;
  padding-right: 3%;
  width:20%;

}

.agenda-events-day:first-child{
  margin-top:0em;
}

.agenda-events-event{
  background-color:#F5F5F5;
  display:flex;
  padding:2%;
  border-radius: 1em;
  width:48%;
  align-items: center;
  height:18%;
  margin-bottom: 2%;
}

.agenda-list{
  overflow:auto;
  display:flex;
  flex-direction:row;
  height: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}



.agenda-events-event-hour{
  font-weight:bold;
  color:#DA3749;
  margin:0 3%;
  width:15%;

}

.agenda-events-event-title{
  width:65%;
}


/*TORNEJOS*/

#tornejos .content{
    align-content: center;
}

#tornejos .main-button{
  color:#fff;
  align-self:flex-start;
}



/*RESULTATS*/

.results-content{
  width:100%;
  overflow: auto;
  height:100%;
}

.results-link,.extra-info-button{
  background-color: #ddd;
  padding: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 2em;
  margin: 1em;
  align-self:flex-start;
  height: 3.2em;
}

.results-link img{
  width: 1em;
  margin-right: 1em;
}

.results-frame{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffffc2;;
  left: 0;
  top: 0;
  display: none;
  justify-content: center;
  align-items: center;
}


.results-frame-window{
  width: 80%;
  height: 80%;
  padding: 0em 1em 1em 1em;
  border-radius: 1em;
}

.results-frame-window img{
  width: 2.2em;
  float: right;
  height: 10%;
}

.results-frame-document{
  width: 100%;
  height: 90%;
  background-color:white;
}



.results-first-paragraph{
  margin-top:5em;
  margin-bottom:1em;
}

.results-last-paragraph{
  margin-top:5em;
}

#competicions h3, #competicions h4{
  font-size:1.17em;
  font-weight: bold;
  font-family: MontserratMedium;
}

.extra-info-button{
  text-transform: uppercase;
  margin-left:0px;
}


.pagination-botonera{
  width: 100%;
  padding: 2%;
  display: flex;
  justify-content: space-between;
  display:none;
}