/*  --  CSS LAYOUT  --  */
#menu-size {
    position: fixed;
    top: 0;
    z-index: 3;
    width: 100%;
    transition: 0.3s;
}
.menu-large{
    height:80px;
    line-height:80px;
    background:rgba(0,0,0,0);
    color: #333;
}
.menu-small{
    height:50px;
    line-height:50px;
    background:#fff;
    border-bottom:solid 1px black;
    color: rgb(137, 175, 255);
}
#menu-mbl{
    position:fixed;
    top:0;
    z-index:3;
    width:100%;
    height:50px;
    line-height:50px;
    background:#fff;
    border-bottom:solid 1px black;
    display: none;
    transition:0.3s;
}
.menu-mbl-btn{
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
}
.line-top{
    position: absolute;
    top: 15px;
    left: 15px;
    height: 3px;
    width: 20px;
    background: #89afff;
    transition: 0.7s ease;
}
.line-mid{
    position: absolute;
    top: 23px;
    left: 15px;
    height: 3px;
    width: 20px;
    background: #89afff;
    transition: 0.7s ease;
}
.line-bot{
    position: absolute;
    top: 31px;
    left: 15px;
    height: 3px;
    width: 20px;
    background: #89afff;
    transition: 0.7s ease;
}
.line-top-close{
    width: 28.3px;
    transform: rotate(315deg);
    top: 22px;

    position: absolute;
    left: 15px;
    height: 3px;
    background: #89afff;
    transition: 0.7s ease;
}
.line-mid-close{
    left: -45px;

    position: absolute;
    top: 23px;
    height: 3px;
    width: 20px;
    background: #89afff;
    transition: 0.7s ease;
}
.line-bot-close{
    width: 28.3px;
    transform: rotate(-315deg);
    top: 22px;

    position: absolute;
    left: 15px;
    height: 3px;
    background: #89afff;
    transition: 0.7s ease;
}


.menu-mbl-off{
    position:fixed;
    top: 50px;
    left:-70%;
    background: #fff;
    border-right:solid 1px #89afff;
    width: 70%;
    height: 100vh;
    transition: 0.7s;
}
.menu-mbl-on{
    position:fixed;
    top: 50px;
    left:0;
    background: #fff;
    border-right:solid 1px #89afff;
    width: 70%;
    height: 100vh;
    transition: 0.7s;
}
.menu-mbl-off ul{
    position: absolute;
    top: 0px;
    left: 0px;
    list-style: none;
    color:#89afff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    line-height: 50px;
}
.menu-mbl-off ul li{
    position: relative;
}


.underline_mbl{
    height:2px;
    width:0%;
    background:#89afff;
    position:absolute;
    bottom:10px;
    left:0%;
    transition: 0.3s;
}
.menu-mbl-off ul li:hover .underline_mbl{
    width:100%;
}
.active_mbl{
    width:100%;
}
.logo_mbl{
    height: 50px;
    width:  70px;
    position: absolute;
    top: 0px;
    right: 0px;
    background: url(../img/logo_small_black.png);
    background-size: auto 40px;
    background-position: center;
    background-repeat: no-repeat;
    transition:0.3s;
}






#body-size{
    position:relative;
    transition:0.3s;
}
.body-large{
    /*top:80px;*/
}
.body-small{
    /*top:50px;*/
}




.menu-content{
    margin: 0 auto;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.menu-seccio{
    position: relative;
    width: calc(16.6666666% - 34px);
    float:left;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    text-align: center;
    cursor: pointer;
}
.menu-logo{
    width: 204px;
    float: left;
    text-align: center;
}
.logo-big{
    height: 140px;
    background: url(../img/_FCFVermell.png);
    background-size: 200px auto;
    background-position: center;
    background-repeat: no-repeat;
    transition:0.3s;
}
.logo-small{
    height: 50px;
    background: url(../img/logo_small_black.png);
    background-size: auto 40px;
    background-position: center;
    background-repeat: no-repeat;
    transition:0.3s;
}
.underline{
    height:2px;
    width:0%;
    background:#89afff;
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    transition: 0.3s;
}
.menu-seccio:hover .underline{
    width:50%;
}
.underline-small{
    height:2px;
    width:0%;
    background:#89afff;
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    transition: 0.3s;
}
.menu-seccio:hover .underline-small{
    width:50%;
}
.active{
    width:50%;
}



.wrapper{
    position:relative;
    width:100%;
    margin:150px 0px 0px 0px;
}
.section-white{
    position: relative;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:20px 0px 0px 0px;
    background:#fff;
    color: #333;
}
.section-transparent{
    max-width:1200px;
    margin:0 auto;
}
.section-light{
    position: relative;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:20px 0px 0px 0px;
    background:#f9f9f9;
    color: #333;
}
.section-dark{
    position: relative;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:20px 0px 0px 0px;
    background:#555;
    color: #fff;
}
.section-big-white{
    position: relative;
    width:100%;
    margin:0 auto;
    padding:20px 0px 0px 0px;
    background:#fff;
    color: #333;
}
.section-big-light{
    position: relative;
    width:100%;
    margin:0 auto;
    padding:20px 0px 0px 0px;
    background:#f9f9f9;
    color: #333;
}
.section-big-dark{
    position: relative;
    width:100%;
    margin:0 auto;
    padding:20px 0px 0px 0px;
    background:#555;
    color: #fff;
}
.section-big-light-line{
    position: relative;
    width:100%;
    margin:0 auto;
    padding:20px 0px 0px 0px;
    background:#f9f9f9;
    border-top: solid 1px #ccc;
}

.footer{
	position: relative;
	bottom: 0;
    width: 100%;
	background: #242424;
    z-index: 2;
}
.main-footer{
	position: relative;
	height: 30px;
	line-height: 30px;
    font-size: 10px;
	color: #fff;
	max-width: 1200px;
    margin: 0px auto;
    text-align: center;
}

.patros{
    background: #89afff;
    width: 100%;
}
.main-patros{
    height: 100px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0;
    text-align: center;
}
.main-patros div{
    display: inline-block;
    width: 33.33333333%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.main-patros div img{
    max-width: 165px;
    max-height: 70px;
    width: 70%;
}



/*XARXES SOCIALS FOOTER*/
.facebook {
    position: absolute;
    bottom: 0;
    right: 120px;
    font-size: 13px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    transition: 0.3s;
}
.twitter {
    position: absolute;
    bottom: 0;
    right: 90px;
    font-size: 13px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    transition: 0.3s;
}
.youtube {
    position: absolute;
    bottom: 0;
    right: 60px;
    font-size: 13px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    transition: 0.3s;
}
.instagram {
    position: absolute;
    bottom: 0;
    right: 30px;
    font-size: 13px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    transition: 0.3s;
}
.facebook i, .twitter i, .youtube i, .instagram i {
    line-height: 30px;
}
.facebook:hover {
    background: #3b5998;
}
.twitter:hover {
    background: #1da1f2;
}
.youtube:hover {
    background: #cc181e;
}
.instagram:hover {
    background: linear-gradient( #400080, transparent), linear-gradient( 200deg, #d047d1, #ff0000, #ffff00);
}







/*PORTADA ANTIGA*/
.box-home{
    width: calc(100% - 20px);
    max-width: 900px;
    margin: 0 10px;
    left: calc(50% - 10px);
    transform: translateX(-50%);
    position: relative;
    background: #fff;
    color: #333;
    padding: 10px 15px;
    top: -50px;
    border: solid 1px #e3e3e3;
    box-sizing: border-box;
}
.box-home img{
    position: absolute;
    top: -70px;
    left: -140px;
}
.title-home{
    position: relative;
    font-family: Leckerli One;
    font-size: 90px;
    color:#333;
    text-align: center;
}

.title-home span{
    position: absolute;
    top: -30px;
    font-size: 35px;
    font-family: open sans;
    font-weight: bold;
    margin-left: 5px;
}

.title-home a{
    position: absolute;
    bottom: -20px;
    font-size: 20px;
    font-family: open sans;
    font-weight: bold;
    margin-left: -175px;
}


.block-jugadora {
    position: relative;
    width: 20%;
    float: left;
}
.block-jugadora:before {
    content:"";
    display: block;
    padding-bottom: 100%;
    /* initial ratio of 1:1*/
}

.circle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid 1px #e3e3e3;
    background: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    width: 75%;
    height: 75%;
    overflow: hidden;
}
.circle img{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}


.box-amiga{
    position: relative;
    width: calc(100% - 20px);
    max-width: 900px;
    margin: 0 10px;
    left: calc(50% - 10px);
    transform: translateX(-50%);
    background: #fff;
    border:solid 1px #e3e3e3;
    border-bottom:solid 3px #e3e3e3;
    border-radius: 10px;
    margin-top: -100px;
}
.title-amiga{
    font-size: 30px;
    text-align: center;
    color: #89afff;
    padding:15px 0px;
    margin: 0;
}




/*MEDIA*/
.box-album{
    position: relative;
    width: calc(25% - 8px);
    margin: 3px;
    display: inline-block;
    font-size: 12px;
    overflow: hidden;
    border:solid 1px #ccc;
    background: #ccc;
    cursor: pointer;
    transition:0.3s;
}
.box-album:before {
    content:"";
    display: block;
    padding-bottom: 100%;
    /* ratio de 1:1 */
}
.album-foto{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    z-index: 1;
    transition: 0.3s;
}
.album-title{
    position: absolute;
    bottom: 0;
    z-index: 2;
    background: #fff;
    color: #333;
    padding: 5px;
    font-weight: bold;
    height: 75px;
    width:100%;
    line-height: 15px;
    pointer-events: none;
    transition:0.3s;
}
.album-title span{
    display: block;
    font-size: 12px;
    color: #909090;
}
.box-album:hover .album-title{
    color:#89afff;
    height: 85px;
}

.box-foto{
    position: relative;
    width: calc(25% - 8px);
    margin: 3px;
    display: inline-block;
    font-size: 12px;
    overflow: hidden;
    border:solid 1px #ccc;
    background: #ccc;
    cursor: pointer;
    transition:0.3s;
}
.box-foto:before {
    content:"";
    display: block;
    padding-bottom: 100%;
    /* ratio de 1:1 */
}
.foto{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}
.box-foto span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    color: rgba(255,255,255,0.6);
    text-align: center;
    font-size: 40px;
    vertical-align: middle;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: 0.2s ease-in-out;
}
.box-foto:hover span {
    opacity: 1;
}
.box-foto i{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.box-pagination{
    display: block;
    width:100%;
    font-size: 0;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.box-pagination div{
    display: inline-block;
    width:40px;
    height:40px;
    border:solid 1px #ccc;
    color:#777;
    font-size: initial;
    text-align: center;
    line-height: 40px;
    margin: 2px;
    cursor: pointer;
}
.box-pagination div i{
    line-height: 40px;
}
.box-pagination div:hover{
    border:solid 1px #333;
    color:#333;
}
.pag-active{
    border:solid 1px #89afff !important;
    color:#fff !important;
    background:#89afff !important;
}



/*SEUS*/
.col-btn{
    width: 20%;
    display: inline-block;
    margin-bottom: 20px;
}

#map, #map2{
    width: 100%;
    height: 330px;
    margin-bottom: 20px;
    background: rgb(242, 242, 242);
    margin: 20px 0px;
    border: solid 1px #ccc;
    box-sizing: border-box;
}
.info-seu p{
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 5px;
}
.bar-places{
    position: relative;
    width: 100%;
    height: 30px;
    background:rgba(242, 118, 33, 0.6);
}
.bar-places div{
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    background:#89afff;
    color:#f5f0a3;
}
.bar-places div span{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.logos-seus1{
    position: relative;
    display: inline-block;
    font-size: 0;
    height: 100px;
    width: 100%;
}
.logos-seus2{
    position: relative;
    display: inline-block;
    font-size: 0;
    height: 100px;
    width: 50%;
}
.logos-seus3{
    position: relative;
    display: inline-block;
    font-size: 0;
    height: 100px;
    width: 33.33333333%;
}
.logos-seus4{
    position: relative;
    display: inline-block;
    font-size: 0;
    height: 100px;
    width: 25%;
}
.logos-seus5{
    position: relative;
    display: inline-block;
    font-size: 0;
    height: 100px;
    width: 20%;
}
.logos-seus1 img, .logos-seus2 img, .logos-seus3 img, .logos-seus4 img, .logos-seus5 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 80px;
    max-width: 140px;
}





.selector-seus{
    position: relative;
    height: 48px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 50px auto;
}

.selector-seus-btn{
    position: absolute;
    width: 100%;
    padding: 10px 0;
    color:#555;
}
.selector-seus-btn div{
    position: relative;
    height: 48px;
    opacity: 1;
    line-height: 24px;
    padding: 0 18px;
    border-bottom:solid 2px #e3e3e3;
    box-sizing:border-box;
    transition: 0.2s ease-in-out;
}
.selector-seus-btn div span{
    position: absolute;
    top:50%;
    transform:translateY(-50%);
}
.selector-seus-btn i{
    position:absolute;
    top:calc(50% + 3px);
    right:13px;
    transform:translateY(-50%);
}
.rotate-angle{
    transform:translateY(-50%) rotate(0deg) !important;
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
    transition:0.2s ease-in-out;
}
.rotate-angle-on{
    transform:translateY(-50%) rotate(180deg) !important;
}
.selector-seus-btn hr{
    position:absolute;
    bottom:10px;
    width:100%;
    height:1px;
    background:#aaa;
    
    margin:0;
    border:0; 
}
.selector-seus-btn hr.hr-active{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    width:0%;
    height:2px;
    background:#89afff;
    margin:0;
    border:0; 
    transition:0.2s ease-in-out;
}
.selector-seus-btn hr.hr-active-on{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    height:2px;
    background:#89afff;
    margin:0;
    border:0; 
}




.selector-activitats-box{
    position: absolute;
    top:60px;
    left:50%;
    transform:translateX(-50%);
    z-index: 2;
    width: 0%;
    height:0;
    overflow:hidden;
    background: white;
    padding: 10px 0;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
    border-radius: 2px;
    opacity:0;
    transition:0.2s ease-in-out;
	user-select: none;
		-webkit-touch-callout: none; 
		-webkit-user-select: none; 
		-moz-user-select: none; 
        -ms-user-select: none; 
}
.selector-activitats-box-on{
    position: absolute;
    top:60px;
    left:50%;
    transform:translateX(-50%);
    z-index: 2;
    width: 80%;
	height:inherit;
    max-height:290px;
    overflow:hidden;
    background: white;
    padding: 10px 0;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
    border-radius: 2px;
    opacity:1;
	color:#333;
}

.selector-seus-box{
    position: absolute;
    top:68px;
    left:50%;
    transform:translateX(-50%);
    z-index: 2;
    width: 0%;
    height:0;
    overflow:hidden;
    background: white;
    padding: 10px 0;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
    border-radius: 2px;
    opacity:0;
    transition:0.2s ease-in-out;
}
.selector-seus-box-on{
    position: absolute;
    top:68px;
    left:50%;
    transform:translateX(-50%);
    z-index: 2;
    width: 100%;
    height:205px;
    overflow:hidden;
    background: white;
    padding: 10px 0;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
    border-radius: 2px;
    opacity:1;
}
.selector-seus-box > span{
    /* position: absolute;
    top: 0;
    left: 0;
    right:-17px;
    bottom:0; 
    overflow-y: scroll;*/
}
/* .selector-activitats-box div{
    position: relative;
    height: 48px;
    opacity: 1;
    line-height: 48px;
    padding: 0 18px;
    transition: 0.3s ease-in-out;
} */
.selector-activitats-box-on div{
    height: 48px;
    line-height: 48px;
    transition: 0.3s ease;
}
.selector-activitats-box-on div:hover{
    background:#f2f2f2;
}

.opt-list{
    position: relative;
    height: 48px;
    opacity: 1;
    line-height: 24px;
    padding: 0 18px;
    transition: 0.3s ease-in-out;
}
.opt-list:hover{
    background:#e3e3e3;
}
.selector-seus-box div span{
    position: absolute;
    top:50%;
    transform:translateY(-50%);
}


.selector-seus-box i{
    position:absolute;
    top:50%;
    right:18px;
    transform:translateY(-50%);
}

.trobades-box{
	background:#F2F2F2;
	list-style-type: none;
	padding:0;
}



/*CONTACTE*/
.phone-icon {
    position: relative;
    margin: 0 auto;
    height:100px;
    width:100px;
    border-radius:50%;
    overflow:hidden;
    background: #3b69a1;
    color:#fff;
    font-size:50px;
    text-shadow: 0px 0px 0 #2f5481,1px 1px 0 #2f5481,2px 2px 0 #2f5481,3px 3px 0 #2f5481,4px 4px 0 #2f5481,5px 5px 0 #2f5481,6px 6px 0 #2f5481,7px 7px 0 #2f5481,8px 8px 0 #2f5481,9px 9px 0 #2f5481,10px 10px 0 #2f5481,11px 11px 0 #2f5481,12px 12px 0 #2f5481,13px 13px 0 #2f5481,14px 14px 0 #2f5481,15px 15px 0 #2f5481,16px 16px 0 #2f5481,17px 17px 0 #2f5481,18px 18px 0 #2f5481,19px 19px 0 #2f5481,20px 20px 0 #2f5481,21px 21px 0 #2f5481,22px 22px 0 #2f5481,23px 23px 0 #2f5481,24px 24px 0 #2f5481,25px 25px 0 #2f5481,26px 26px 0 #2f5481,27px 27px 0 #2f5481,28px 28px 0 #2f5481,29px 29px 0 #2f5481,30px 30px 0 #2f5481,31px 31px 0 #2f5481,32px 32px 0 #2f5481,33px 33px 0 #2f5481,34px 34px 0 #2f5481,35px 35px 0 #2f5481,36px 36px 0 #2f5481,37px 37px 0 #2f5481,38px 38px 0 #2f5481,39px 39px 0 #2f5481,40px 40px 0 #2f5481,41px 41px 0 #2f5481,42px 42px 0 #2f5481,43px 43px 0 #2f5481,44px 44px 0 #2f5481,45px 45px 0 #2f5481,46px 46px 0 #2f5481,47px 47px 0 #2f5481,48px 48px 0 #2f5481,49px 49px 0 #2f5481,50px 50px 0 #2f5481,51px 51px 0 #2f5481,52px 52px 0 #2f5481,53px 53px 0 #2f5481,1px 1px 0 rgba(47, 84, 129, 0.98182),2px 2px 0 rgba(47, 84, 129, 0.96364),3px 3px 0 rgba(47, 84, 129, 0.94545),4px 4px 0 rgba(47, 84, 129, 0.92727),5px 5px 0 rgba(47, 84, 129, 0.90909),6px 6px 0 rgba(47, 84, 129, 0.89091),7px 7px 0 rgba(47, 84, 129, 0.87273),8px 8px 0 rgba(47, 84, 129, 0.85455),9px 9px 0 rgba(47, 84, 129, 0.83636),10px 10px 0 rgba(47, 84, 129, 0.81818),11px 11px 0 rgba(47, 84, 129, 0.8),12px 12px 0 rgba(47, 84, 129, 0.78182),13px 13px 0 rgba(47, 84, 129, 0.76364),14px 14px 0 rgba(47, 84, 129, 0.74545),15px 15px 0 rgba(47, 84, 129, 0.72727),16px 16px 0 rgba(47, 84, 129, 0.70909),17px 17px 0 rgba(47, 84, 129, 0.69091),18px 18px 0 rgba(47, 84, 129, 0.67273),19px 19px 0 rgba(47, 84, 129, 0.65455),20px 20px 0 rgba(47, 84, 129, 0.63636),21px 21px 0 rgba(47, 84, 129, 0.61818),22px 22px 0 rgba(47, 84, 129, 0.6),23px 23px 0 rgba(47, 84, 129, 0.58182),24px 24px 0 rgba(47, 84, 129, 0.56364),25px 25px 0 rgba(47, 84, 129, 0.54545),26px 26px 0 rgba(47, 84, 129, 0.52727),27px 27px 0 rgba(47, 84, 129, 0.50909),28px 28px 0 rgba(47, 84, 129, 0.49091),29px 29px 0 rgba(47, 84, 129, 0.47273),30px 30px 0 rgba(47, 84, 129, 0.45455),31px 31px 0 rgba(47, 84, 129, 0.43636),32px 32px 0 rgba(47, 84, 129, 0.41818),33px 33px 0 rgba(47, 84, 129, 0.4),34px 34px 0 rgba(47, 84, 129, 0.38182),35px 35px 0 rgba(47, 84, 129, 0.36364),36px 36px 0 rgba(47, 84, 129, 0.34545),37px 37px 0 rgba(47, 84, 129, 0.32727),38px 38px 0 rgba(47, 84, 129, 0.30909),39px 39px 0 rgba(47, 84, 129, 0.29091),40px 40px 0 rgba(47, 84, 129, 0.27273),41px 41px 0 rgba(47, 84, 129, 0.25455),42px 42px 0 rgba(47, 84, 129, 0.23636),43px 43px 0 rgba(47, 84, 129, 0.21818),44px 44px 0 rgba(47, 84, 129, 0.2),45px 45px 0 rgba(47, 84, 129, 0.18182),46px 46px 0 rgba(47, 84, 129, 0.16364),47px 47px 0 rgba(47, 84, 129, 0.14545),48px 48px 0 rgba(47, 84, 129, 0.12727),49px 49px 0 rgba(47, 84, 129, 0.10909),50px 50px 0 rgba(47, 84, 129, 0.09091),51px 51px 0 rgba(47, 84, 129, 0.07273),52px 52px 0 rgba(47, 84, 129, 0.05455),53px 53px 0 rgba(47, 84, 129, 0.03636),55px 55px 0 rgba(47, 84, 129, 0);
}
.mail-icon {
    position: relative;
    margin: 0 auto;
    height:100px;
    width:100px;
    border-radius:50%;
    overflow:hidden;
    background: #f5f0a3;
    color:#333;
    font-size:50px;
    text-shadow: 0px 0px 0 #c4c082,1px 1px 0 #c4c082,2px 2px 0 #c4c082,3px 3px 0 #c4c082,4px 4px 0 #c4c082,5px 5px 0 #c4c082,6px 6px 0 #c4c082,7px 7px 0 #c4c082,8px 8px 0 #c4c082,9px 9px 0 #c4c082,10px 10px 0 #c4c082,11px 11px 0 #c4c082,12px 12px 0 #c4c082,13px 13px 0 #c4c082,14px 14px 0 #c4c082,15px 15px 0 #c4c082,16px 16px 0 #c4c082,17px 17px 0 #c4c082,18px 18px 0 #c4c082,19px 19px 0 #c4c082,20px 20px 0 #c4c082,21px 21px 0 #c4c082,22px 22px 0 #c4c082,23px 23px 0 #c4c082,24px 24px 0 #c4c082,25px 25px 0 #c4c082,26px 26px 0 #c4c082,27px 27px 0 #c4c082,28px 28px 0 #c4c082,29px 29px 0 #c4c082,30px 30px 0 #c4c082,31px 31px 0 #c4c082,32px 32px 0 #c4c082,33px 33px 0 #c4c082,34px 34px 0 #c4c082,35px 35px 0 #c4c082,36px 36px 0 #c4c082,37px 37px 0 #c4c082,38px 38px 0 #c4c082,39px 39px 0 #c4c082,40px 40px 0 #c4c082,41px 41px 0 #c4c082,42px 42px 0 #c4c082,43px 43px 0 #c4c082,44px 44px 0 #c4c082,45px 45px 0 #c4c082,46px 46px 0 #c4c082,47px 47px 0 #c4c082,48px 48px 0 #c4c082,49px 49px 0 #c4c082,50px 50px 0 #c4c082,51px 51px 0 #c4c082,52px 52px 0 #c4c082,53px 53px 0 #c4c082,1px 1px 0 rgba(196, 192, 130, 0.98182),2px 2px 0 rgba(196, 192, 130, 0.96364),3px 3px 0 rgba(196, 192, 130, 0.94545),4px 4px 0 rgba(196, 192, 130, 0.92727),5px 5px 0 rgba(196, 192, 130, 0.90909),6px 6px 0 rgba(196, 192, 130, 0.89091),7px 7px 0 rgba(196, 192, 130, 0.87273),8px 8px 0 rgba(196, 192, 130, 0.85455),9px 9px 0 rgba(196, 192, 130, 0.83636),10px 10px 0 rgba(196, 192, 130, 0.81818),11px 11px 0 rgba(196, 192, 130, 0.8),12px 12px 0 rgba(196, 192, 130, 0.78182),13px 13px 0 rgba(196, 192, 130, 0.76364),14px 14px 0 rgba(196, 192, 130, 0.74545),15px 15px 0 rgba(196, 192, 130, 0.72727),16px 16px 0 rgba(196, 192, 130, 0.70909),17px 17px 0 rgba(196, 192, 130, 0.69091),18px 18px 0 rgba(196, 192, 130, 0.67273),19px 19px 0 rgba(196, 192, 130, 0.65455),20px 20px 0 rgba(196, 192, 130, 0.63636),21px 21px 0 rgba(196, 192, 130, 0.61818),22px 22px 0 rgba(196, 192, 130, 0.6),23px 23px 0 rgba(196, 192, 130, 0.58182),24px 24px 0 rgba(196, 192, 130, 0.56364),25px 25px 0 rgba(196, 192, 130, 0.54545),26px 26px 0 rgba(196, 192, 130, 0.52727),27px 27px 0 rgba(196, 192, 130, 0.50909),28px 28px 0 rgba(196, 192, 130, 0.49091),29px 29px 0 rgba(196, 192, 130, 0.47273),30px 30px 0 rgba(196, 192, 130, 0.45455),31px 31px 0 rgba(196, 192, 130, 0.43636),32px 32px 0 rgba(196, 192, 130, 0.41818),33px 33px 0 rgba(196, 192, 130, 0.4),34px 34px 0 rgba(196, 192, 130, 0.38182),35px 35px 0 rgba(196, 192, 130, 0.36364),36px 36px 0 rgba(196, 192, 130, 0.34545),37px 37px 0 rgba(196, 192, 130, 0.32727),38px 38px 0 rgba(196, 192, 130, 0.30909),39px 39px 0 rgba(196, 192, 130, 0.29091),40px 40px 0 rgba(196, 192, 130, 0.27273),41px 41px 0 rgba(196, 192, 130, 0.25455),42px 42px 0 rgba(196, 192, 130, 0.23636),43px 43px 0 rgba(196, 192, 130, 0.21818),44px 44px 0 rgba(196, 192, 130, 0.2),45px 45px 0 rgba(196, 192, 130, 0.18182),46px 46px 0 rgba(196, 192, 130, 0.16364),47px 47px 0 rgba(196, 192, 130, 0.14545),48px 48px 0 rgba(196, 192, 130, 0.12727),49px 49px 0 rgba(196, 192, 130, 0.10909),50px 50px 0 rgba(196, 192, 130, 0.09091),51px 51px 0 rgba(196, 192, 130, 0.07273),52px 52px 0 rgba(196, 192, 130, 0.05455),53px 53px 0 rgba(196, 192, 130, 0.03636),55px 55px 0 rgba(196, 192, 130, 0);
}
.phone-icon i, .mail-icon i{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}


/*AVÍS LEGAL*/
.avistext{
    font-size: 19px;
    line-height: 28px;
    font-weight: 300;
    text-align: justify;
}



/*NOTÍCIES*/
.box-news{
    border:solid 1px #e3e3e3;
    border-bottom: solid 5px #e3e3e3;
    box-sizing: border-box;
    background: #f9f9f9;
    transition:0.2s ease-in-out;
}
.box-news:hover{
    border:solid 1px #89afff;
    border-bottom: solid 5px #89afff;
    background: #fff;
}
.title-news{
    font-size:18px;
    text-transform:uppercase;
    font-weight: bold;
}
.news-text-block{
  height: 200px;
  overflow: hidden;
  padding: 5px 15px 15px 15px;
}
.p-noti{
    padding: 0 50px;
}

.videowrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.box-last-news{
    position: relative;
    border-bottom: solid 1px #e3e3e3;
    border-top: solid 1px #e3e3e3;
    height: 100px;
    width: 100%;
    font-size: 0;
    box-sizing: border-box;
    margin-top: 0px;
}
.box-last-news:hover{
	border-bottom: solid 1px #89afff !important;
    border-top: solid 1px #89afff !important;
}
.box-last-news div:nth-child(1){
    display: inline-block;
    position: absolute;
    width: 100px;
    height:100%;
    overflow: hidden;

}
.box-last-news div:nth-child(1) img{
    height: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.box-last-news div:nth-child(2){
    display: inline-block;
    position: absolute;
    right: 0;
    width: calc(100% - 100px);
    height:100%;
    font-size: 17px;
}

.box-last-news div:nth-child(2) p{
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0px 10px;
}
#contenido img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 20px auto;
}

.lightsoff{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.lightson{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: initial;
}

/* MENÚ MOBIL */

.menu-activitats{
	height:50px;
	transition:0.4s;
}
.menu-activitats + ul{
	max-height:0;
	overflow:hidden;
	/*transition:0.4s;*/
}

.menu-activitats-on + ul{
	position: inherit;
	max-height:160px;
	
}
.menu-activitats-on .active_mbl{
	transition:0.4s;
}


/* ENQUESTA */
/*.pas{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    max-width: 1100px;
    max-height: 600px;
    width:80%;
    height:80%;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
    overflow-x:hidden;
    overflow-y:scroll;
    opacity: 0;
    pointer-events: none;

    background: #fafafa;
    z-index: 999999999999;
    padding: 10px 20px;
}

.pas-on{
    top:50% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: 0.3s;
	left:50%;
    transform:translate(-50%, -50%);
}*/
.pas-prev{
    top:calc(50% - 200px);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}
.pas-next{
    top:calc(50% + 200px);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}
.btn-prev{
    position:relative;
    left:15px;
    bottom:10px;
    display:block;
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    letter-spacing: 1px;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;

    border-radius: 3px;
    border: solid 1px rgba(242, 118, 33, 1);
    background: rgba(242, 118, 33, 1);
    color: #fff; 
    transition:0.3s ease;
}
.btn-next{
    position:relative;
    right:15px;
    float: right;
    bottom:10px;
    display:block;
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    letter-spacing: 1px;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;

    border-radius: 3px;
    border: solid 1px rgba(242, 118, 33, 1);
    background: rgba(242, 118, 33, 1);
    color: #fff; 
    transition:0.3s ease;
}
.btn-prev:hover, .btn-next:hover{
	background: rgba(242, 118, 33, 0.7);
}



/* AMBAIXADORES */

.ambaixadores-box{
    font-size:0;
}
.ambaixadora-box{
    position:relative;
    display:inline-block;
    width:calc(33.33333333% - 20px);
    padding:10px;
}
.ambaixadora-box img{
    width:100%;
}
.ambaixadora-box div{
    position:absolute;
    bottom:0;
    width:calc(100% - 20px);
    height:110px;
    font-size:18px;
    overflow:hidden;
    
    border: solid 1px #e3e3e3;
    border-bottom: solid 5px #e3e3e3;
    box-sizing: border-box;
    background-color: #f9f9f9;
    background-size: 110% !important;
    background-repeat: no-repeat !important;
    background-position: 50px -100px !important;
    transition: 0.2s ease-in-out;
}
.ambaixadora-box:hover div{
    border: solid 1px #89afff;
    border-bottom: solid 5px #89afff;
    background-color: #fff;
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: 50px -100px;
}
.ambaixadora-box div .nom{
    position:relative;
    padding:10px;
    float:left;
    width:calc(80% - 20px);
    margin:0;
    font-weight:bold;
}
.ambaixadora-box div p .club{
    font-weight:normal;
}
.ambaixadora-box div p .fa{
    padding-top:10px;
	color:#878787;
}
.ambaixadora-box div p .fa:hover{
    color:#89afff;
}
.ambaixadora-box div span{
    position:relative;
    padding:10px;
    float:left;
    width:calc(20% - 20px);
    min-height:100px;
    /*background:url('http://galaestrelles.com/img/escuts/fcb.png');*/
    background-size:calc(100% - 10px) !important;
    background-repeat:no-repeat !important;
    background-position:center 10px !important;
}





/* CAMPANYA */
.femenivid {
	background-color: #000;
	margin-bottom: 30px;
	position: relative;
	padding-top: 43.25%;
	overflow: hidden;
	cursor: pointer;
}
.femenivid img {
	width: 100%;
	height: 100%;
	top: -0.01%;
	left: 0;
	opacity: 0.7;
}
.femenivid .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.6;
	border-radius: 6px;
}
.femenivid .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}
.femenivid img,
.femenivid .play-button {
	cursor: pointer;
}
.femenivid img,
.femenivid iframe,
.femenivid .play-button,
.femenivid .play-button:before {
	position: absolute;
}
.femenivid .play-button,
.femenivid .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}
.femenivid iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}




/* PORTADA */
.orgullosa:hover{
	transition: 0.3s ease;
}
.orgullosa iframe {
	height: 100%;
	width: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}
.orgullosa .play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:120px;
	height:100px;
	border-radius:20px;
	font-size: 50px;
	text-align: center;
	z-index: 1;
	cursor:pointer;
	transition: 1s;
}
.orgullosa i{
	line-height: 100px;
	color:#fff;
	pointer-events: none;
	opacity: 0;
	transition: 0.3s ease;
}
.orgullosa img {
	width: 50%;
	left: 50%;
	bottom: 0;
	transform: translate(-50%);
	position: absolute;
}
.orgullosa:hover .play{
	background: rgba(0,0,0,0.3);
}
.orgullosa:hover i{
	opacity: 1;
}


.ratio16_9 {
	position: relative;
	width: 100%;
	max-width: 870px;
	margin: 30px auto;
}
.ratio16_9:before {
	content:"";
	display: block;
	padding-bottom: 56.25%;
	/* initial ratio of 16:9*/
}
.content-ratio {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	color: #fff;
   
	background: black;
	padding: 20px;
	text-align: center;
	vertical-align: center;
	text-transform: uppercase;
}


.arrow{
    position:absolute;
    bottom:50px;
    left: calc(50% - 25px);
    font-size:28px;
    animation: arrow 1s infinite;
    -webkit-animation: arrow 1s infinite;
    cursor:pointer;
    
    
    width:50px;
    height:50px;
    line-height:50px;
    font-size:50px;
    color:rgba(0,0,0,0.4);
    text-align:center;
}


@keyframes arrow {
  0% {
    bottom:35px;
    transform:scale(1);
    animation-timing-function:ease-in;
  }
  40% {
    
  }
  50% {
    bottom:20px;
    transform:scale(0.9, 1.1);
    animation-timing-function:ease-out;
  }
  55% {
    bottom:15px;
    transform:scale(1.2, 0.8);
    animation-timing-function:ease-in;
  }
  65% {
    bottom:25px;
    transform:scale(0.9, 1.1);
    animation-timing-function:ease-out;
  }
  95% {
    bottom:35px;
    transform:scale(1);
    animation-timing-function:ease-in;
  }
  100% {
    bottom:35px;
    transform:scale(1);
    animation-timing-function:ease-in;
  }
}


@-webkit-keyframes arrow {
  0% {
    bottom:35px;
    transform:scale(1);
    animation-timing-function:ease-in;
  }
  40% {
    
  }
  50% {
    bottom:20px;
    transform:scale(0.9, 1.1);
    animation-timing-function:ease-out;
  }
  55% {
    bottom:15px;
    transform:scale(1.2, 0.8);
    animation-timing-function:ease-in;
  }
  65% {
    bottom:25px;
    transform:scale(0.9, 1.1);
    animation-timing-function:ease-out;
  }
  95% {
    bottom:35px;
    transform:scale(1);
    animation-timing-function:ease-in;
  }
  100% {
    bottom:35px;
    transform:scale(1);
    animation-timing-function:ease-in;
  }
}

video { 
	position: fixed;
	top: 50%;
	left: 50%;

	min-width: 150%;
	min-height: 150%;
	z-index: -100;
	transform: translate(-50%, -50%);
	background: url(http://files.fcf.cat/video/orgullosa.png) no-repeat;
	background-size: cover;
	transition: 1s opacity;
}
.stopfade { 
	opacity: .5;
}
.filtre {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	background: rgba(255,255,255,0.4);
}

.play-symbol{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 100px;
    border-radius: 20px;
    font-size: 50px;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    background:rgba(0,0,0,0);
}
.play-symbol span, .play-symbol i{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.play-symbol i{
    color:#333;
    opacity: 0.7;
}
.play-symbol span{
    color:#89afff;
    -webkit-animation: pulsate-play 1.3s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0;
    z-index:-1;
}
@-webkit-keyframes pulsate-play {
    0% {font-size:2px; opacity: 0;}
    50% {opacity: 0.6;}
    100% {font-size:90px; opacity: 0;}
}