@font-face {
  font-family: "ara-comunitats3";
  src:url("https://interactius.ara.cat/assets/common/tipo_ara/fonts/ara-comunitats3.eot?hash=10111213dfgaa1");
  src:url("https://interactius.ara.cat/assets/common/tipo_ara/fonts/ara-comunitats3.eot?#iefix?&hash=10111213dfgaa1") format("embedded-opentype"),
    url("https://interactius.ara.cat/assets/common/tipo_ara/fonts/ara-comunitats3.woff?hash=10111213dfgaa1") format("woff"),
    url("https://interactius.ara.cat/assets/common/tipo_ara/fonts/ara-comunitats3.ttf?hash=10111213dfgaa1") format("truetype"),
    url("https://interactius.ara.cat/assets/common/tipo_ara/fonts/ara-comunitats3.svg#ara-comunitats3?hash=10111213dfgaa1") format("svg");
  font-weight: normal;
  font-style: normal;
}

$b100: #0175a2;
$gris-clar:#F8F8F8;
$gris-fosc:#2D2D2D;
$blau-main:#0074A1;
$blau-hover:#3B8FB4;

$sg_regular: 'Soho Gothic W01 Regular', serif;
$sg_medium: 'Soho Gothic W01 Medium', serif;
$sg_light: 'Soho Gothic W01 Light', serif;

@mixin bp-small { @media only screen and (max-width: 767px) {@content;} }
@mixin center-vertically(){
  transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -ms-transform:translate(0,-50%);
  -o-transform:translate(0,-50%);
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{padding: 0; margin: 0;}
#header_ara_login.sticky{position: sticky;position: -webkit-sticky;}
#header_ara_login{
    [class^="icon-"]:before, [class*=" icon-"]:before {
        font-family: "ara-comunitats3" !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        speak: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}
#header_ara_login{
    position: absolute;
    width: 100%;
    z-index:1;
    top: 0;
    height: 39px;
    border-bottom: 1px solid $blau-main;
    background-color: #FFF;
    @media print {
        position:relative;
    }
    .esq{
        float: left;
        margin: 5px 0 0 15px;
        position:relative;
        height: 40px;
        .ara-icon{
            overflow: hidden;
            height: 18px;
            width: 84px;
            margin: 5px 0 0;
            line-height: 66em;
            background-position: 0 0;
            display: inline-block;
            vertical-align: middle;
            zoom: 1;
            background: url(https://www.ara.cat/static/ARAHeaderRD2/css/images/ara-header_sprite.png) no-repeat scroll 0px 0px;
            background-size: 206px 250px;
        }
        .ara{
            vertical-align:middle;
            text-decoration: none;
            //position: absolute;
            width: 100%;
    		height: 18px;
        }
        .ara-logo {
            height: 21px;
            z-index: 0;
            display: flex;
            margin-top:3px;
            a{
                display: contents;
            }
            .balears{
                svg{
                    fill: #000;
                    #ara-svg {
                        fill: #0076a8;
                    }
                }
            }
            svg{
                max-width: none;
                width: auto;
                height: 21px;
                fill: #0076a8;
            }
        }
    }

    .dre{
        position: relative;
        float: right;
        margin: 0 15px 0 0;
        line-height: 40px;
        z-index: 6;
        right: 0;
        top: 5px;
        .tools{
            float: right;
            position: relative;
            list-style: none;
            height: 30px;
            padding: 0;
            margin: 0;
            li{
                display: block;
                position: relative;
                float:left;
                padding:0;
                /*margin: 0;*/
                line-height: 25px;
                box-sizing: content-box;
			    -moz-box-sizing: content-box;
			    -webkit-box-sizing: content-box;
                a{
                	outline: none;
                }
            }
            .btn-suscribe{
            	&:not(.btn-main-mobile){
                	@include bp-small{display:none;}
                }
            }
            .btn-accedeix{
            	&:not(.btn-main-mobile){
                	@include bp-small{display:none;}
                }
            }

            #user-dropdown{
            	@include bp-small{display:block;}
                .ara-header-dropdown{
                    float: left;
                    position: relative;
                    margin-left: 8px;
                    display: inline-block;
                    vertical-align: top;
                    zoom: 1;
                    .ara-header-droptab{
                        position: relative;
                        padding: 10px 36px 10px 10px;
                        font: 13px/9px $sg_medium;
                        display: inline-block;
                        vertical-align: top;
                        zoom: 1;
                        text-decoration: none;
                        color: #5D5D5D;
                        &:hover{
                        	opacity: .8;
							color: #5b5b5b;
                        }
                        #user-logo{
                        	display: none;
                        	@include bp-small{display: block;}
                            height: 18px;
                            img{width: auto; height: 100%;}
                        }
                        #user-name{
                            font: 13px/9px $sg_medium;
                            position: relative;
                            display: inline-block;
                            vertical-align: top;
                            zoom: 1;
                            text-decoration: none;
                            color: $blau-main;
                            @include bp-small{display: none;}
                        }
                        .ara-header-avatar{
                            display: block;
                            position: absolute;
                            height: 28px;
                            width: 28px;
                            top: 0;
                            right: 0;
                            border-radius: 50%;
                            background-color: #cce3ec;
                            #ara-header-avatar-img{
                                display: block;
                                overflow: hidden;
                                position: relative;
                                height: 28px;
                                width: 28px;
                                border-radius: 50%;
                                border: 0;
                            }
                            #ara-header-avatar-letter{
                                display: block;
                                font: 18px/28px $sg_light;
                                text-align: center;
                                color: #3B8FB4;
                            }
                        }
                        @include bp-small{
                            padding: 5px 0px 5px 10px;
                        }
                    }
                    .ara-header-droplayer{
                    	display: none;
                        margin: 15px -1px 0 0;
                        min-width: 0 !important;
                        left: auto !important;
                        right: 0;
                        zoom: 1;
                        position:absolute;
                        z-index:2;
                        top: 21px;
                        padding:20px;
                        border-radius: 3px;
                        -moz-border-radius: 3px;
                        -webkit-border-radius: 3px;
                        -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3);
                        box-shadow: 0 0 4px rgba(0,0,0,.3);
                        font: normal 13px/15.5px $sg_regular;
                        color: #000;
                        background: #FFF;
                        &:after {
						    content: "";
						    display: block;
						    position: absolute;
						    z-index: 1;
						    top: -7px;
						    bottom: 0;
						    left: auto;
						    right: 4px;
						    height: 11px;
						    width: 18px;
						    margin: 0;
						    padding: 0;
						    background: transparent url(https://www.ara.cat.prebb3.bitban.com/static/ARAHeaderRD2/css/images/ara-header_sprite.png) no-repeat scroll -104px -154px;
						    background-size: 206px 250px;
						    clear: both;
						    @include bp-small{display: none;}
						}
						@include bp-small{
						    position: fixed !important;
						    bottom: 0 !important;
						    left: 0 !important;
						    right: 0 !important;
						    top: 39px !important;
							background: rgba(33,41,52,.85)!important;
						    transition: opacity .15s ease;
							padding:0;
							margin: 0;
							z-index: 100;
							border-radius:0px;
						}
                        .ara-header-dropnav{
                        	width: 125px;
                            list-style: none;
                            padding: 0;
                            zoom: 1;
                            @include bp-small{
                            	position: absolute;
							    width: 100%;
							    background: #fff;
							    padding: 0 18px;
							    margin: 0;
                            }
                            li{
                            	@include bp-small{
                            		font: 16px/28px $sg_medium;	
                            	}
                            }
                            .btn-main{
                            	padding:18px 0px;
                            	margin: 9px 0px;
                            	a{
                            		font: 16px/16px $sg_medium;
                            	}
                            }
                            .btn-main-mobile{
                            	display: none;
                            	@include bp-small{display: block;}
                            }
                            .ara-header-opt{
                            	display: none;
                                padding-top: 20px;
                                text-align: left;
                                @include bp-small{
                                	border-bottom: 1px solid #9b9b9b;
                                	float: none;
                                	padding: 0px !important;
			    					&:last-child{border-bottom: none;}
                                }
                                .ara-header-lnk{
                                    display: block;
                                    color: #000;
                                    text-decoration: none;
                                    outline: none;
                                    &:hover {
                                        text-decoration: none;
                                        color: $blau-main;
                                    }
                                    @include bp-small{
                                    	display: block;
						    			padding: 14px 0 18px 0;
								    	color: $gris-fosc;
								    	&:after {
									        margin: 10px 5px;
										    padding: 0px;
										    color: #2d2d2d;
										    content: " ";
										    font-family: monospace;
										    font-weight: bold;
										    float: right;
										    background: url(https://www.ara.cat/static/ARAHeaderRD2/css/images/ara-header_sprite.png) no-repeat scroll -131px -30px;
										    background-size: auto auto;
										    background-size: 206px 250px;
										    width: 10px;
										    height: 10px;
									    }
                                    }
                                }
                                #btn-logout{

                                	@include bp-small{
                                		text-align: center;
                                		&:after{display: none;}
                                	}
                                }
                            }
                            .ara-header-opt:first-child {
                                padding-top: 0;
                            }
                            #btn-espai-header{
                            	@include bp-small{
                            		background-color: $blau-main;
							        border: none;
							        text-align: center;
								    margin: 9px 0;
								    border-radius: 3px;
							        a{
							        	color: #FFF;
							        	padding: 18px 9px;
							        	&:after{display: none;}
							        }
							        &:hover{
							            border-color: $blau-hover;
							            background-color: $blau-hover;
							        }
                            	}
                            }
                        }
                    }
                }
            }
        }
    }
    .btn-main{
        margin-left: 8px;
        border-radius: 3px;
        width: 110px;
        a{
            display: block;
            text-decoration: none;
            outline: none;
            padding: 0 10px;
            font: 13px/27px $sg_medium;
            text-align: center;
            //font: 13px/27px $sg_medium;
        }
        @include bp-small{
        	width: 100%;
		    list-style: none;
		    padding: 15px 0px;
        }
    }
    .btn-suscribe{
        background-color: $blau-main;
        border: none;
        a{color: #FFF;}
        &:hover{
            border-color: $blau-hover;
            background-color: $blau-hover;
        }
        @include bp-small{
        	margin: 0 0 15px 0 !important;
        }
    }
    .btn-accedeix{
        background-color: #fff;
        border: 1px solid $blau-main;
        a{
        	color: $blau-main;
        	line-height: 25px;
        }
        &:hover{
            border-color: $blau-hover;
            background-color: $blau-hover;
            a{color:#fff;}
        }
        @include bp-small{
        	margin: 15px 0 10px 0 !important;
        }
    }
    #close-menu{
    	position: absolute;
	    width: 100%;
	    height: 100%;
	    z-index: -9;
    }
}

/*Notification message*/
#notification{
    display: flex;
    align-items: center;
    justify-content: center;
    font: 14px/25px $sg_regular;
    min-height: 40px;
    width: 100%;
    padding: 4px 56px 4px 20px;
    background: #FFFFD7;
    color: #918600;
    margin-top: -40px;
    position: relative;
    //transition: margin-top 1s;
    box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.15), inset 0 -1px 0 0 rgba(0,0,0,0.15);
    .icon-close{
        @include center-vertically();
        position: absolute;
        top:50%;
        right: 20px;
        color: #918600;
        &:before{
            content: "\31";
        }
    }
    a{
        color:#918600;
        text-decoration: underline;
        white-space: nowrap;
        &:hover, &:visited{
            color: #918600;
        }
    }
}