main.css

:root {
--main-bg-color: #000000;
--main-text-color: #000000;

}


*,:after,:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:var(--main-text-color);font-family:Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:1.6}blockquote{border-left:.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote :last-child{margin-bottom:0}.button,button,input[type=button],input[type=reset],input[type=submit]{background-color:var(--main-bg-color);border:.1rem solid var(--main-bg-color);border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--main-text-color);border-color:var(--main-text-color);color:#fff;outline:0}.button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type=button][disabled]:focus,input[type=button][disabled]:hover,input[type=reset][disabled]:focus,input[type=reset][disabled]:hover,input[type=submit][disabled]:focus,input[type=submit][disabled]:hover{background-color:var(--main-bg-color);border-color:var(--main-bg-color)}.button.button-outline,button.button-outline,input[type=button].button-outline,input[type=reset].button-outline,input[type=submit].button-outline{background-color:transparent;color:var(--main-bg-color)}.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type=button].button-outline:focus,input[type=button].button-outline:hover,input[type=reset].button-outline:focus,input[type=reset].button-outline:hover,input[type=submit].button-outline:focus,input[type=submit].button-outline:hover{background-color:transparent;border-color:var(--main-text-color);color:var(--main-text-color)}.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type=button].button-outline[disabled]:focus,input[type=button].button-outline[disabled]:hover,input[type=reset].button-outline[disabled]:focus,input[type=reset].button-outline[disabled]:hover,input[type=submit].button-outline[disabled]:focus,input[type=submit].button-outline[disabled]:hover{border-color:inherit;color:var(--main-bg-color)}.button.button-clear,button.button-clear,input[type=button].button-clear,input[type=reset].button-clear,input[type=submit].button-clear{background-color:transparent;border-color:transparent;color:var(--main-bg-color)}.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type=button].button-clear:focus,input[type=button].button-clear:hover,input[type=reset].button-clear:focus,input[type=reset].button-clear:hover,input[type=submit].button-clear:focus,input[type=submit].button-clear:hover{background-color:transparent;border-color:transparent;color:var(--main-text-color)}code,pre{background:#d9d9d9}.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,a,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type=button].button-clear[disabled]:focus,input[type=button].button-clear[disabled]:hover,input[type=reset].button-clear[disabled]:focus,input[type=reset].button-clear[disabled]:hover,input[type=submit].button-clear[disabled]:focus,input[type=submit].button-clear[disabled]:hover{color:var(--main-bg-color)}code{border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{border-left:.3rem solid var(--main-bg-color);overflow-y:hidden}pre>code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:.1rem solid #f4f5f6;margin:3rem 0}input[type=search],input[type=tel],input[type=text],input[type=url],input[type=email],input[type=number],input[type=password],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1rem;width:100%}input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#s;outline:0}select{background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;padding-right:3rem}select:focus{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="var(--main-bg-color)" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')}textarea{min-height:6.5rem}label,legend{display:block;font-size:1.6rem;font-weight:700;margin-bottom:.5rem}fieldset{border-width:0;padding:0}input[type=checkbox],input[type=radio]{display:inline}.label-inline{display:inline-block;font-weight:400;margin-left:.5rem}.container{margin:0 auto;max-width:112rem;padding:0 2rem;position:relative;width:100%}dl,ol,p,ul{margin-top:0}.row,.row.row-no-padding,.row.row-no-padding>.column{padding:0}.row{display:flex;flex-direction:column;width:100%}.row.row-wrap{flex-wrap:wrap}.row.row-top{align-items:flex-start}.row.row-bottom{align-items:flex-end}.row.row-center{align-items:center}.row.row-stretch{align-items:stretch}.row.row-baseline{align-items:baseline}.row .column{display:block;flex:1 1 auto;margin-left:0;max-width:100%;width:100%}.row .column.column-offset-10{margin-left:10%}.row .column.column-offset-20{margin-left:20%}.row .column.column-offset-25{margin-left:25%}.row .column.column-offset-33,.row .column.column-offset-34{margin-left:33.3333%}.row .column.column-offset-50{margin-left:50%}.row .column.column-offset-66,.row .column.column-offset-67{margin-left:66.6666%}.row .column.column-offset-75{margin-left:75%}.row .column.column-offset-80{margin-left:80%}.row .column.column-offset-90{margin-left:90%}.row .column.column-10{flex:0 0 10%;max-width:10%}.row .column.column-20{flex:0 0 20%;max-width:20%}.row .column.column-25{flex:0 0 25%;max-width:25%}.row .column.column-33,.row .column.column-34{flex:0 0 33.3333%;max-width:33.3333%}.row .column.column-40{flex:0 0 40%;max-width:40%}.row .column.column-50{flex:0 0 50%;max-width:50%}.row .column.column-60{flex:0 0 60%;max-width:60%}.row .column.column-66,.row .column.column-67{flex:0 0 66.6666%;max-width:66.6666%}.row .column.column-75{flex:0 0 75%;max-width:75%}.row .column.column-80{flex:0 0 80%;max-width:80%}.row .column.column-90{flex:0 0 90%;max-width:90%}.row .column .column-top{align-self:flex-start}.row .column .column-bottom{align-self:flex-end}.row .column .column-center{-ms-grid-row-align:center;align-self:center}@media (min-width:40rem){.row{flex-direction:row;margin-left:-1rem;width:calc(100% + 2rem)}.row .column{margin-bottom:inherit;padding:0 1rem}}dl,ol,td:first-child,th:first-child,ul{padding-left:0}a{text-decoration:none}a:focus,a:hover{color:var(--main-text-color)}dl,ol,ul{list-style:none}dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{font-size:90%;margin:1.5rem 0 1.5rem 3rem}ol{list-style:decimal inside}ul{list-style:circle inside}.button,button,dd,dt,li{margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}table{border-spacing:0;width:100%}td,th{border-bottom:.1rem solid #e1e1e1;padding:1.2rem 1.5rem;text-align:left}td:last-child,th:last-child{padding-right:0}b,strong{font-weight:700}h1,h2,h3,h4,h5,h6{font-weight:300;letter-spacing:-.1rem;margin-bottom:2rem;margin-top:0}h1{font-size:4.6rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:2.8rem;line-height:1.3}h4{font-size:2.2rem;letter-spacing:-.08rem;line-height:1.35}h5{font-size:1.8rem;letter-spacing:-.05rem;line-height:1.5}h6{font-size:1.6rem;letter-spacing:0;line-height:1.4}img{max-width:100%}.clearfix:after{clear:both;content:' ';display:table}.float-left{float:left}.float-right{float:right}



div#taulas_filter {
    float: left;
    width: 100%;
}

.videohome {
    text-align: center;
    width: 120%;
    margin: 0 auto;
    margin-top: 60px;
    margin-left: -11%;
}

li.navigation-item:last-of-type {
    margin-left: 2rem;
}


thead th {
    border-bottom: 0.1px solid #e5e5e5 !important;
}




#organitza h3 {
    margin-top: 6rem;
}



#cartells header.header {
    background: #f4f5f6;
    color: #000;
}


table.dataTable tbody th, table.dataTable tbody td {
    padding: 10px 6px;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0 !important;
    margin-top: 1rem;
    font-size: 1.4rem;
    font-weight: 100;
    margin-bottom: 3rem;
}



#taulas_filter label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    text-align: left;
}

div#taulas_info {
    font-size: 1.1rem;
    margin-top: 1rem;
}

table.taula {
    font-size: 12px;
}

#cartells img {
    border: 0.2rem solid #efefef;
}



.massiva {
    background: url(http://empaperem.cat/empaperadamassiva.jpg) !important;
    background-position: center !important;
    background-size: auto 255px !important;
    background-repeat: no-repeat !important;
    height: 240px !important;
    padding: 0 !important;
}






.taula td, .taula th {
    border-bottom: 0.1px solid #e1e1e1 !important;
    padding: 0.9rem 0.8rem;
    text-align: left;
}
.button.button-small {
    font-size: 9px;
    padding: 5px;
    margin-bottom: 0px;
    line-height: 12px;
    height: auto;
}

.wrapper {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%
}
.wrapper .container {
    max-width: 90rem
}
.wrapper>.container {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem
}
.header {
    background-color: #f4f5f6;
    padding-top: 5rem
}

footer.footer {
    padding: 40px 0;
    margin-bottom: 0px;
}

.header a.button {
    background: #fff;
    color: #000;
}

a.button.whatsapp.button-small.only-mobile {
    background: #fff;
    border: 1px solid #00b419;
    padding: 3px 4px;
    font-size: 8px;
    color: #00b419;
}


.modal {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 99;
    padding: 60px 20px;
}

.modal-body {
    background: #fff;
    padding: 20px;
    top: 82px;
    border-radius: 5px;
    max-width: 500px;
    margin: 0 auto;
    z-index: 999999;
}



header.header{
    background: #000;
    color: #fff;
}

    .only-desktop{display: none!important;}


@media (min-width: 40rem) {
    .header {
        padding-top: 7rem
    }

    .only-desktop{display: table-cell !important;}
    
    #organitza .column:first-of-type {
    max-width: 50%;
    margin-right: 7rem;
}

table.taula {
    font-size: 13px;
}


.backgrounder2.massiva {
    background-position: center center !important;
    background-size: contain !important;
    height: 332px !important:;
}

    

}





.header+section {
    border-top: 0
}
.header .container {
    border-top: 0;
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;
    position: relative;
    text-align: center
}






.header .img {
    height: 15rem;
    margin-bottom: 2rem
}
.header .img path {
    animation: 7s a forwards;
    fill: var(--main-bg-color);
    stroke: var(--main-bg-color);
    stroke-dasharray: 38321;
    stroke-miterlimit: 10;
    stroke-width: 15px
}
.header .button {
    margin-bottom: 4rem;
    margin-top: 2rem
}
@media (min-width: 40rem) {
    .header .button {
        margin-bottom: 4rem;
        margin-top: 2rem
    }
}
@keyframes a {
    0% {
        fill-opacity: 0;
        stroke-dashoffset: 38321
    }
    25% {
        fill-opacity: 0;
        stroke: var(--main-bg-color)
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 0
    }
}

.backgrounder {
    background: #f4f5f6;
    padding: 7rem 0rem;
}

.backgrounder2 {
    background: url(empaperembg2.jpg);
    padding: 23rem 0rem;
    color: #f4f5f6;
    background-size: cover;
    background-position: center;
}


.row.cards .column {
    margin-bottom: 4rem;
}
.card {
    background: #f4f5f6;
}
.card-body {
    padding: 2rem 3rem;
}
.card-body p {
    font-size: 1.4rem;
}

.cards img {
    width: 100%;
}


.navigation {
    background: #fff;
    border-bottom: 0.1rem solid #f3f3f3;
    display: block;
    height: 5.2rem;
    left: 0;
    max-width: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}
.navigation .navigation-title h1.title {
    font-size: 2rem;
}
.navigation .container {
    padding-bottom: 0;
    padding-top: 0
}
.navigation .navigation-list {
    list-style: none;
    margin-bottom: 0;
    margin-right: 0
}
@media (min-width: 80rem) {
    .navigation .navigation-list {
        margin-right: 0
    }
    

    
    #grids .column {
    max-width: 33%;
}

}




.navigation .navigation-item {
    float: left;
    margin-bottom: 0;
    margin-left: 0.5rem;
    position: relative
}
.navigation .img {
    fill: var(--main-bg-color);
    height: 2rem;
    position: relative;
    top: .3rem
}
.navigation .navigation-title,
.navigation .title {
    color: var(--main-text-color);
    position: relative
}
.navigation .navigation-link,
.navigation .navigation-title,
.navigation .title {
    display: inline;
    font-size: 1.6rem;
    line-height: 5.2rem;
    padding: 0;
    text-decoration: none
}
.navigation .navigation-link.active {
    color: var(--main-text-color)
}
.octocat {
    border: 0;
    color: #f4f5f6;
    fill: var(--main-bg-color);
    height: 5.2rem;
    position: fixed;
    right: 0;
    top: 0;
    width: 5.2rem;
    z-index: 1
}
.octocat:hover .octocat-arm {
    animation: b .56s infinite;
    transform-origin: 13rem 10.6rem
}
.octocat .octocat-arm,
.octocat .octocat-body {
    fill: #f4f5f6
}
@keyframes b {
    0%, 50% {
        transform: rotate(0)
    }
    25%,
    75% {
        transform: rotate(-25deg)
    }
}
.popover {
    background: #fff;
    border: .1rem solid #d1d1d1;
    border-radius: .4rem;
    display: none;
    filter: drop-shadow(0 0 .6rem rgba(0, 0, 0, .1));
    left: 50%;
    min-width: 13.4rem;
    position: absolute;
    top: 94%;
    transform: translateX(-50%)
}
.popover.popover-open {
    display: block
}
.popover:after,
.popover:before {
    border: solid transparent;
    border-color: transparent;
    border-width: 1rem;
    content: " ";
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    right: 1.7rem;
    top: 0;
    width: 0
}
.popover:after {
    border-bottom-color: #fff;
    transform: translate(-50%, -100%)
}
.popover:before {
    border-bottom-color: #d1d1d1;
    transform: translate(-50%, -102%)
}
.popover .popover-list {
    list-style: none;
    margin: 0;
    padding: 0
}
.popover .popover-item {
    margin: 0;
    padding: 0
}
.popover .popover-item:first-child .popover-link {
    border-radius: .4rem .4rem 0 0
}
.popover .popover-item:last-child .popover-link {
    border-bottom-width: 0;
    border-radius: 0 0 .4rem .4rem
}
.popover .popover-link {
    border-bottom: .1rem solid #d1d1d1;
    color: var(--main-text-color);
    display: block;
    font-size: 1.2rem;
    padding: .8rem 2rem;
    position: relative;
    text-align: center;
    text-decoration: none
}
.popover .popover-link:hover {
    background: var(--main-bg-color);
    border-bottom-color: var(--main-bg-color);
    color: #fff
}
.share,
.share-list,
.share-list a {
    position: relative;
    text-decoration: none
}
.share-item {
    display: inline-block;
    margin: 1rem 0
}
.share-item:nth-child(n+1) {
    margin-left: .5rem
}
.share-dialog {
    background-color: var(--main-bg-color);
    border-radius: .4rem;
    color: #fff;
    display: block;
    text-align: center;
    padding: 1.1rem 2.6rem;
}
.share-dialog:hover {
    background-color: var(--main-text-color)
}
.share-dialog .share-icon {
    fill: #fff;
    height: 2rem;
}
@media (min-width: 40rem) {
    .only-mobile {
        display: none
    }
    
        .videohome{    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 60px;}
    
}
.prettyprint.code {
    border: 0;
    border-left: .3rem solid var(--main-bg-color);
    color: #655d5d
}
.prettyprint.code .str {
    color: #4b8b8b
}
.prettyprint.code .kwd {
    color: #8464c4
}
.prettyprint.code .com {
    color: #adadad
}
.prettyprint.code .typ {
    color: #7272ca
}
.prettyprint.code .lit {
    color: var(--main-bg-color)
}
.prettyprint.code .pun {
    color: #5485b6
}
.prettyprint.code .clo,
.prettyprint.code .opn {
    color: #f4ecec
}
.prettyprint.code .atn,
.prettyprint.code .tag {
    color: var(--main-bg-color)
}
.prettyprint.code .atv {
    color: #5485b6
}
.prettyprint.code .dec {
    color: #b45a3c
}
.prettyprint.code .var {
    color: #ca4949
}
.prettyprint.code .fun {
    color: #7272ca
}
.prettyprint.code.lang-md * {
    color: #655d5d
}


.example {
    margin-top: 4rem;
    position: relative
}
.example .example-header {
    font-weight: 600;
    margin-bottom: .5rem;
    margin-top: 1.5rem
}
.example h1,
.example h2,
.example h3,
.example h4,
.example h5,
.example h6 {
    margin-bottom: 1rem
}
.example form {
    margin-bottom: 0
}
.example .heading-font-size {
    color: #999;
    font-size: 1.2rem;
    letter-spacing: normal
}
.example .button-black {
    background-color: #000;
    border-color: #000
}
.example .button-black.button-clear,
.example .button-black.button-outline {
    background-color: transparent;
    color: #000
}
.example .button-black.button-clear {
    border-color: transparent
}
.example .button-large {
    font-size: 1.4rem;
    height: 4.5rem;
    line-height: 4.5rem;
    padding: 0 2rem
}
.example .button-small {
    font-size: .8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    padding: 0 1.5rem
}
.example .column-demo {
    background: #d1d1d1;
    border-radius: .4rem;
    display: block;
    font-size: 1rem;
    font-weight: 600;
    height: 3rem;
    letter-spacing: .1rem;
    line-height: 3rem;
    margin-bottom: 2.5rem;
    text-align: center;
    text-transform: uppercase
}
.example .container {
    padding-left: 0;
    padding-right: 0
}
.example.row,
.example .row {
    margin-bottom: 0
}