$blau_ara: #0175a2;
$blau_clar: #4e9fbe;
$negre: #000000;
$blau_hover: #33A0C1;
$blanc: #FFFFFF;
$amplada: 987px;
$break-mob: 500px;
//#4dc247 / #dd4b39

$sg-ultra:      "Soho Gothic W01 Ultra";
$sg-regular:    "Soho Gothic W01 Regular";
$sg-light:      "Soho Gothic W01 Light";
$sg-bold:       "Soho Gothic W01 Bold";
$sg-medium:     "Soho Gothic W01 Medium";
$sg-italic:     "Soho Gothic W01 Italic";
$sg-bold-italic:"SohoGothicW01-BoldItali";

@mixin tipografia($mida, $alcada, $letterspacing, $color, $sg){font: #{$mida}/#{$alcada} $sg;letter-spacing: $letterspacing;color: $color;}
@mixin border-radius($radius) {-webkit-border-radius: $radius;border-radius: $radius;}
@mixin box-shadow($shadow) {-webkit-box-shadow: $shadow;-moz-box-shadow: $shadow;box-shadow: $shadow;}
@mixin transition($args) {-webkit-transition: $args;-moz-transition: $args;-ms-transition: $args;-o-transition: $args;transition: $args;}
@mixin transform($args) {-webkit-transform: $args;-moz-transform: $args;-ms-transform: $args;-o-transform: $args;transform: $args;}
@mixin opacity($opacity) {opacity: $opacity;$opacity-ie: $opacity * 100;filter: alpha(opacity=$opacity-ie); }
@mixin background-color($color) {background-color: $color;background-image: none;background: $color;}

body{
    .e1{@include tipografia(60px, 62px, 0px, $negre, $sg-ultra);text-transform: uppercase;text-decoration: none}
    .e2{@include tipografia(36px, 42px, 0px, $blau_clar, $sg-regular)}
    .e3{@include tipografia(18px, 20px, 0px, $negre, $sg-bold);}
    .e4{@include tipografia(16px, 18px, 0px, $negre, $sg-medium);}
    .e5{@include tipografia(16px, 18px, 0px, $blau_ara, $sg-bold-italic);}
    .e6{@include tipografia(16px, 24px, 0px, $negre, $sg-regular);}
    .e7{@include tipografia(12px, 12px, 0px, $negre, $sg-regular);}
    .e8{@include tipografia(14px, 14px, 0px, $blau_clar, $sg-italic);}
    .e9{@include tipografia(14px, 14px, 0px, $negre, $sg-regular);}
    
    .wrapper{
        width:100%;height:100%;position:fixed;z-index:0;
        .wrapper-left{
            left:10px;position:absolute;height:100%;
            .wrapper1{top:250%;position:absolute}
            .wrapper2{top:5%;position:absolute;margin-left:25px}
            .wrapper3{top:150%;position:absolute}
        }
        .wrapper-right{
            right:10px;position:absolute;height:100%;
            .wrapper1{top:100%;position:absolute;right:0}
            .wrapper2{top:160%;position:absolute;right:0}
            .wrapper3{top:210%;position:absolute;right:0}
        }
    }
    #header{
        background-color:$blanc;
        .wp{
            display: none !important;
            @media only screen and (max-width: $break-mob){
                display:inline-block !important;
            }
        }
        .titol{
            a{color:#000;}
        }
    }
    .container{width: $amplada;margin: 55px auto 0 auto;max-width:100%;position:relative;z-index:1;background:$blanc}
    .header{
        .title{
            padding-top:35px;padding-bottom:20px;overflow:hidden;
            .e1{
                /*float:left;*/
                &:hover{text-decoration: none}
            }
            .circular {
                width: 130px;height: 130px;float: right;background-position: center;background-size: cover;
                @include border-radius(130px);
            }
        }
        .info_pregunta{
            .e2{margin-bottom: 15px;margin-top:0}
            .e6{margin-bottom: 50px}
        }
    }
    .contingut{
        .e3{margin-bottom:10px}
        ul{
            list-style-type:none;padding:0;border-radius:2px;
            &.respostes{
                list-style-type:none; padding:0;border:15px solid #b2d5e3;margin-bottom:30px;
                iframe{
                    &.video{
                        height:420px;margin-bottom:15px;
                        @media screen and (max-width: 900px) {
                            height:350px;
                        }
                        @media screen and (max-width: 600px) {
                            height:300px;
                        }
                    }
                }
                li{
                    border-top:15px solid #b2d5e3;padding:20px; overflow:hidden;border-bottom:0;
                    &.first{border-top:0}
                    span{width:220px;margin-right:20px;float:left;}
                    p{
                        width:675px; float:right;margin:0;
                        img{
                            max-width:136px;max-height: 136px;
                            &.big{max-width:300px;max-height: 300px;}
                        }
                    }
                }
            }
        }
        .usuari{
            background:#cce3ec;padding:15px;margin-bottom:100px;border-radius:2px;
            .capcalera{
                height:30px;
                .e4{line-height: 30px;margin:0}
            }
            .formulari{
                display:none;
                &.active{display:block}
                .instruccions{ margin-top:5px; }
                p{text-align: left;margin-bottom: 8px}
                textarea{background:$blanc;margin-bottom: 25px;height:135px !important;border:1px solid #99c8da}
                .buttons{text-align: right}
                .upload{background:$blanc;width:50%}
                .col{overflow:hidden}
                .col2{
                    width:50%;float:left;
                    #murs_extra1{width:98%}
                }
            }
            .login-form{
                input[type="text"],
                input[type="password"]{height:30px;margin-bottom:10px;padding:0 10px;@include tipografia(14px, 14px, 0px, $blau_clar, $sg-italic)}
                p{
                    margin-bottom:8px;
                    &.e4{margin-top: 0}
                    &.input{margin: 0}
                }
                .lnks{
                    a{color:$negre;text-decoration: none;}
                }
            }
        }
        #uploadBtn1,
        #uploadBtn2,
        #uploadBtn3,
        #uploadBtn4,
        #uploadBtn5{position: relative;width: 40%;text-align: center;cursor:pointer;}
        .ok { 
            background: url("http://www.ara.cat/static/ARACat/images/bg-diag-stripe_fff_tilexy_1.gif") repeat scroll 0 0 transparent;
            background-color: #F2F5E5;border: 1px solid #82A000; margin: 20px 20px 20px 0; padding: 10px;font-size:16px;
            p{margin:0 !important}
        }
        .error{
            background: url("http://www.ara.cat/static/ARACat/images/bg-diag-stripe_fff_tilexy_1.gif") repeat scroll 0 0 transparent;
            background-color: #FFF3F3;border: 1px solid #FF8B8E; margin: 10px 0 20px 0; padding: 10px; 
            p{margin:0 !important}
        }
        .robaplanes { background: no-repeat; padding-top: 10px;text-align: center }
    }
    .ara-footer{z-index:2;position:relative}
}
@media only screen and (max-width: 1300px){
    .wrapper{display:none}
}
@media only screen and (max-width: 1100px){
    body{
        .container{max-width: 97%;padding: 0 10px;}
        #araFooter{display:none}
        .contingut{
            ul{
                &.respostes{
                    li{
                        span{width:100%;margin-bottom:10px}
                        p{width:100%;float:left;}
                    }
                }
            }
        }
        .wrapper{display:none}
    }
}
@media only screen and (max-width: 768px){
    body{
        .e1{@include tipografia(38px, 48px, 0px, $negre, $sg-ultra);text-transform: uppercase;text-decoration: none}
        .e2{@include tipografia(26px, 32px, 0px, $blau_clar, $sg-regular)}
        .e3{@include tipografia(18px, 20px, 0px, $negre, $sg-bold);}
        .e4{@include tipografia(16px, 18px, 0px, $negre, $sg-medium);}
        .e5{@include tipografia(16px, 18px, 0px, $blau_ara, $sg-bold-italic);}
        .e6{@include tipografia(16px, 22px, 0px, $negre, $sg-regular);}
        .e7{@include tipografia(12px, 12px, 0px, $negre, $sg-regular);}
        .e8{@include tipografia(14px, 14px, 0px, $blau_clar, $sg-italic);}
        .e9{@include tipografia(14px, 14px, 0px, $negre, $sg-regular);}
        
        .imatge-moviment{display: none}
        .header{
            .title{
                .circular {width: 100px;height: 100px;}
            }
        }
    }
}

@media only screen and (min-width: 120px) and (max-width: 480px){
    body{
        .e1{@include tipografia(32px, 34px, 0px, $negre, $sg-ultra);text-transform: uppercase;text-decoration: none}
        .e2{@include tipografia(18px, 20px, 0px, $blau_clar, $sg-bold)}
        .e3{@include tipografia(18px, 20px, 0px, $negre, $sg-bold);}
        .e4{@include tipografia(16px, 18px, 0px, $negre, $sg-medium);}
        .e5{@include tipografia(16px, 18px, 0px, $blau_ara, $sg-bold-italic);}
        .e6{@include tipografia(16px, 22px, 0px, $negre, $sg-regular);}
        .e7{@include tipografia(12px, 12px, 0px, $negre, $sg-regular);}
        .e8{@include tipografia(14px, 14px, 0px, $blau_clar, $sg-italic);}
        .e9{@include tipografia(14px, 14px, 0px, $negre, $sg-regular);}
        .container{
            max-width:94%;
            .usuari{margin-bottom:50px}
        }
        .contingut{
            ul{
                &.respostes{
                    li{
                        padding:15px;
                        p{
                            img{
                                max-width: 100%;
                                &.big{max-width: 100%;}
                            }
                        }
                    }
                }
            }
        }
        .header{
            .title{
                padding-top:15px;
                .e1{float:left;width:100%;margin-top:10px}
                .circular {float:left;width: 120px;height: 120px;}
            }
        }
        
    }
}
.avis-legal{
    margin-right:20px;
    a{color:$blau_ara}
}