/* FONTS */
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 700;src: local('Open Sans Bold'), local('OpenSans-Bold'), url(font/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');}
@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 400;src: local('Open Sans'), local('OpenSans'), url(font/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}

/* ESTRUCTURA */
body{overflow-y: scroll;font-family: 'Open Sans','Arial', sans-serif; font-size:14px;background: #DDD;}
header{text-align:center;}
#cos,#extra{width:80%;max-width:1024px;min-width:780px;margin:0 auto;text-align:center;overflow: hidden;}

#cssmenu, #contingut_pagina{display:inline-block;vertical-align: top;}
#menu{width:20%;padding: 0 1% 0 0;margin:0;text-align:left;float: left;}
#cssmenu{width:100%;}
#contingut_pagina{width:78%;padding: 0;margin:0;text-align:justify;}
#pie_pagina{margin-bottom:15px;text-align:center;}

#contingut_pagina article{margin-bottom:15px;}
#contingut_pagina section{margin-bottom: 15px;}
.cos_article{padding:2%;background: lightskyblue;overflow:hidden;}
#contingut_pagina header, footer{overflow:hidden;padding:1%;}
#contingut_pagina header{background: #73D37A;margin: 0;padding: 1%;}
#contingut_pagina footer{background: #75B2D6;margin: 0;padding: 1%;}

.col_2 li{ /* NO CSS3 column */
    display: inline-block;
    vertical-align:top;
    width:40%;
    margin:0 4%;
}

.csscolumns .col_2{
    margin:0;
    padding:0;
    column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;
    column-gap: 40px; -moz-column-gap: 40px; -webkit-column-gap: 40px;
    column-rule: 1px solid #ccf; -moz-column-rule: 1px solid #ccf; -webkit-column-rule: 1px solid #ccf;
}

.col_3 li{ /* NO CSS3 column */
    display: inline-block;
    vertical-align:top;
    width:30%;
    margin:0 1%;
}

csscolumns .col_3{
    margin:0;
    padding:0;
    column-count: 3; -moz-column-count: 3; -webkit-column-count: 3;
    column-gap: 20px; -moz-column-gap: 20px; -webkit-column-gap: 20px;
    column-rule: 1px solid #ccf; -moz-column-rule: 1px solid #ccf; -webkit-column-rule: 1px solid #ccf;
}

.csscolumns .col_2 li, .csscolumns .col_3 li{width:auto; display:block;} /* Evitar estilos para IE */

/* ESTILS GENERALS */
h1{background: #333;color: #bbb;font-size: 2.5em;margin: 0 0 5px;padding: 0;}
h2{font-size: 1.5em;margin: 0.83em 0;}
h3{font-size: 1.17em;margin: 1em 0;}
h4{font-size: 1em;margin: 1.33em 0;}
h5{font-size: 0.83em;margin: 1.67em 0;}
h6 {font-size: 0.75em;margin: 2.33em 0;}
menu,dl,ul,ol{margin: 0.5em 0;}
dd {margin: 1em 0 1em 2em;padding: 0 0 0 0;}
menu,ol,ul {padding: 0 0 0 2em;}

a{text-decoration:none;}
a:visited{color:blue;}
a:hover{color:red;}
ol{list-style: inside decimal;}
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}
.centrat{display:block; margin:0 auto;}
.esq{float:left;padding:0 10px 10px 0;}
.dreta{float:right;padding:0 0 10px 10px;}
.ocult{visibility: hidden;}

#contingut_pagina header h2{margin:0;}
#contingut_pagina div{overflow:hidden;}
#contingut_pagina img{max-width:100%;}
.fonts{column-count: 3;-moz-column-count: 3;-webkit-column-count: 3;display:none;}
.mostrar_fonts{cursor:pointer;text-align:center;}

/* DEFINICIO */
blockquote{font-weight:bold; border: none;}
blockquote img{display:block;margin:0 auto 5px;max-height:500px}

/* VARIANTS */
#variants li{overflow:hidden;margin-bottom:20px;}
#variants img{display:block;margin:5px auto;}
#variants h3{font-size:14px;font-weight:bold;text-align:center;}

/* GENERADOR */
#generador li{overflow:hidden;margin-bottom:20px; }
#generador img{margin:5px 0;}

/* ANT-SIG */
.ant_seg{margin:0;padding:0;font-size: 14px;text-align: center;}
.ant_seg li{display:inline-block;padding:0 5px;margin:0 5px;}
.ant_seg li:first-child:before{content: "< ";}
.ant_seg li:last-child:after{content : " >";}
.ant_seg li:hover{ color:red;}

/* CONTACTAR */
input:-moz-placeholder, input::-webkit-input-placeholder {color:red;}
#form_contactar{text-align:center;}
#form_contactar input[type=text], #form_contactar input[type=email], #form_contactar input[type=url], #form_contactar textarea{
    border: 2px solid grey;
    border-radius: 5px 5px 5px 5px;
    margin: 10px 10%;
    max-width: 80%;
    padding: 5px;
    width: 80%;
}