@import url(//fonts.googleapis.com/css?family=Roboto+Slab:100,400,700);
@import url(//fonts.googleapis.com/css?family=Noto+Serif:400,700);

#porrar, #tuPorra {animation:none;animation-delay:0;animation-direction:normal;animation-duration:0;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-play-state:running;animation-timing-function:ease;backface-visibility:visible;background:0 0;background-clip:border-box;background-origin:padding-box;background-position-x:0;background-position-y:0;background:0 0/auto auto;border:0;border-style:none;border-width:medium;border-color:inherit;border-bottom:0;border-collapse:separate;border-image:none;border-left:0;border-radius:0;border-right:0;border-spacing:0;border-top:0;bottom:auto;box-shadow:none;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:inherit;columns:auto;column-count:auto;column-fill:balance;column-gap:normal;column-rule:medium none currentColor;column-rule-color:currentColor;column-rule-style:none;column-rule-width:none;column-span:1;column-width:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font:400;font-family:inherit;font-size:medium;font-style:normal;font-variant:normal;font-weight:400;height:auto;hyphens:none;left:auto;letter-spacing:normal;line-height:normal;list-style:disc;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:0;outline:0;outline:0;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;perspective:none;perspective-origin:50% 50%;position:static;quotes:'\201C' '\201D' '\2018' '\2019';right:auto;tab-size:8;table-layout:auto;text-align:inherit;text-align-last:auto;text-decoration:none;text-decoration-color:inherit;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-shadow:none;text-transform:none;top:auto;transform:none;transform-style:flat;transition:none;transition-delay:0s;transition-duration:0s;transition-property:none;transition-timing-function:ease;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:0;width:auto;word-spacing:normal;z-index:auto}

.main { width: 100%; max-width: 976px; margin: 0 auto; overflow: hidden; }
.main-inn { height: 470px; overflow: auto; position: relative; }

.wk-col-l { float: left; }
.wk-col-r { float: right; }

.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

.table { display: table; width: 100%; text-align: center; height: 100%; vertical-align: middle; }
  .table-inn { display: table-cell; vertical-align: middle; }

.movil { display: block; }
.desktop { display: none; }


#logo { width: 100%; height: auto;  }
#logo2 { width: 100%; height: 40px; background: url('./img/cintillo-movil-1.png') center center; background-size: cover;
    margin-bottom: 0.4em; margin-top: 0.4em;}
#porrar { display: block; width: 100%; max-width: 975px; height: auto; overflow: hidden;  margin: 0 auto; position: relative; margin-bottom: 0.6em; }
  .draw-wrap { width: 100%; height: 0; padding-bottom: 50%; position: relative; overflow: visible; }
    #draw { position: absolute; height: 100%; width: 100%; }
    #draw .seat { transition: all 1s; }
#bottom { width: 100%; clear: both; }
    #porrar .button.act { color: white; background: black; }
#svg { max-width: 340px; margin: 0 auto; padding: 0 1em;  box-sizing: border-box; }


#side-left { clear: both; overflow: auto; }

#porrar .pop { position: absolute; z-index: 10; background: black; color: white; text-align: center; padding: 10px; width: 120px; bottom: 40px; left: -65px; }
  #porrar .pop:before { content: '';
    height: 10px; width: 0; border-right: 12px solid transparent; border-left: 12px solid transparent; border-top: 11px solid black;
    position: absolute; bottom: -21px; left: 62px; }
  #porrar .pop h2 { border-bottom: 0; margin-bottom: 0.4em; font-size: 0.9em; }

#porrar .partido { width: 100%; clear: both; }
  #porrar .partido img { float: left; margin-right: 5px; }

#porrar .button {border: 2px solid #333;font-family: 'roboto slab'; font-size: 13px; padding: 8px;text-transform: uppercase;text-decoration: none;color: #333;}

#porrar { display: none; padding: 0; margin: 0; position: absolute; height: 100%; width: 100%;
    top: 0; left: 0; background: white; }
.button-share a { text-indent: -999px; overflow: hidden; position: relative;
        display: inline-block; background-color: #3199ff; height: 45px; width: 52px; margin-right: 0.4em; }
  .button-share a:before { content: "\f099"; position: absolute; display: block; width: 25px; text-align: center;
      font-family: FontAwesome; color: white; text-indent: 0; font-size: 1.8em; padding: 0.3em 0.4em; }
    .button-share .share-facebook { background: #32679A; }
      .button-share .share-facebook:before { content: "\f09a"; }
    .button-share .share-mail { background-color: #484848; }
      .button-share .share-mail:before { content: "\f0e0"; }
    .button-share .share-img { background-color: #484848; }
      .button-share .share-img:before { content: "\f019"; }
    .button-share .share-whatsapp { background: #009000; }
      .button-share .share-whatsapp:before { content: "\f232"; }
    .button-share .share-telegram { background: #056ED1; }
      .button-share .share-telegram:before { content: "\f1d9"; }

#home { width: 100%; max-width: 660px; margin: 0 auto; font-family: noto serif, serif; }
  #home h2 { font-weight: 100; font-size: 1.2em; text-align: center; padding: 0 1em; line-height: 1.4em; color: #444; font-family: noto serif, serif; }
  #home .block { display: block; box-sizing: border-box; padding: 0.4em; }
  #home a {  color: #333; font-size: 1.1em; text-decoration: none; display: block; max-width: 100%;
      text-align: center; border: 1px solid #0b4956; padding: 0.4em; float: left; }
  #home a h4 { font-family: roboto slab; font-size: 1.4em; margin: 0; }
  #home a p { margin: 0.4em 0; line-height: 1.2em; height: 73px; }
  #home a:after { content: ''; display: block; height: 120px; width: 288px; max-width: 100%; margin: 0 auto; padding-bottom: 0.4em; }
  a#showMini:after { background: url(https://lab.eldiario.es/estaticos/generales/porra4/iconos-tipos2.png) 6px -14px; }
  a#showPorrar:after { background: url(https://lab.eldiario.es/estaticos/generales/porra4/iconos-tipos2.png) -333px 0; height: 160px; }

#mini { display: none; width: 100%; max-width: 540px; margin: 0 auto; font-family: noto serif, serif; }
  #mini h2 { margin: 0.4em 0; font-weight: 100; font-size: 1.2em; text-align: center; padding: 0 1em; line-height: 1.1em; color: #444; }
  #mini .share-porra-before { width: 100%; background: white; z-index: 10; position: absolute; left: 0; top: 0; height: 100%; }
  #mini .form-mail-ini { margin: 0 auto; position: initial; padding: 0 1em; }

#partys, #pos { margin: 0; padding: 0; }
#pos li, #partys li { display: block; float: left; width: 25%; height: 0; position: relative; padding: 0.4em 0.4em 25% 0.4em; box-sizing: border-box; }
#pos .block, #partys .block { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0.4em 0.2em; box-sizing: border-box; }
#partys .wrap { position: absolute;top: 0; left: 0; padding: 0.4em 0.2em; }
  #partys .act, #partys .selected { opacity: 0.4; }
  #partys .party, #pos .party { height: 100%; width: 100%; position: relative; transition: opacity 1s; }
  .bl-PP { background: #00A3E6; }
  .bl-PSOE { background: #E20025; }
  .bl-CS { background: #F18624; }
  .bl-UNIDOS { background: #6a205f; }
  .party.drag { z-index: 10; }
h2#may { display: none; text-align: left; font-weight: 100; font-family: roboto slab; padding: 0; margin: 0 0 0.8em 0; }
  #may span { display: inline-block; border: 1px solid #666; padding: 0.2em 0.4em; font-weight: 900; cursor: pointer; }
  #may span.active, #may span:hover { background: #666; color: white; }
#pos .before { border: 2px dotted #0C5167; box-sizing: border-box; font-weight: 900; font-size: 1.4em; }
#pos .hover .before, #pos.act .before { border-color: red; }
#pos .party:before { content: ''; display: block; background-image: url(https://lab.eldiario.es/estaticos/catalanas/img/sprite0.png);
        height: 28px; width: 28px; text-indent: -909px;overflow: hidden;background-position: -377px -15px; z-index: 1;
        position: absolute; right: 0; top: 0; }

@media (min-width: 650px) {
  #partys .wrap { padding: 1em; }
  #pos .block, #partys .block { padding: 1em; }
}

#shareMini { display: inline-block; background: #666; padding: 0.2em 0.8em; color: white; line-height: 1.6em; cursor: pointer; }
  #shareMini.disabled { background: #ccc; cursor: auto; }

.party img { display: block; width: 100%; height: auto; padding: 1em 0.4em; box-sizing: border-box; }

textarea { box-shadow: 0 0; }
input[type=text] { box-shadow: 0 0; }
#porrar #bottom { width: 100%; clear: both; }

#porrar .partido { width: 100%; clear: both;height:35px;margin-top: 5px; }
  #porrar .partido img { float: left; margin-top: 3px; margin-left: 6px; }

  #porrar h2 {font-family:  'roboto slab'; font-size: 19px; border-bottom: 6px solid #333; text-transform: uppercase;
    margin-bottom: 0.4em; font-weight: 700; margin-top: 0.1em; }

  #porrar h3 { font-family: 'roboto slab'; font-size: 17px; font-weight: 200; color: white; float: left;
    margin-top: 4px; max-width: 180px; overflow: hidden; height: 31px; margin: 0px; line-height: 2em; margin-left: 6px; }
  #porrar h4 { font-weight: 900; font-family: 'roboto slab'; font-size: 24px; margin-bottom: 15px; margin-top: 20px; }

#shareButt { display: inline-block; margin-top: 0.8em; text-align: center; font-weight: 900; margin-right: 0.8em; font-size: 0.7em; cursor: pointer; width: 100%; line-height: 2em; }

  #porrar .notselected h3 {color:black}

#porrar .more-partido {display: inline-block;  margin-right: 3px;background-image: url(https://lab.eldiario.es/estaticos/catalanas/img/sprite0.png);height: 35px;width: 33px;text-indent: -909px;overflow: hidden;background-position: -9px 65px; -webkit-user-select: none!important;}
  #porrar .more-partido.dis { background-position: -319px 65px; cursor: default; }
  #porrar .less-partido.dis { background-position: -316px 65px; cursor: default; }
#porrar .dato {display: inline-block;background-color: white;font-family: 'roboto slab';padding-left: 5px;padding-right: 5px;padding-top: 2px;vertical-align: top;padding-bottom: 3px; margin-top: 5px;
  width: 34px; position: relative; text-align: center; }
  #porrar .dato input {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 0; background: #ccc; color: white; text-align: center; }
#porrar .less-partido {display: inline-block;background-image: url(https://lab.eldiario.es/estaticos/catalanas/img/sprite0.png);height: 35px;width: 33px;margin-left: 3px;text-indent: -909px;overflow: hidden;background-position: -13px -7px; -webkit-user-select: none!important; }
#porrar .remove-partido {display: inline-block;background-image: url(https://lab.eldiario.es/estaticos/catalanas/img/sprite0.png);height: 35px;width: 35px;text-indent: -909px;overflow: hidden;background-position: -67px -10px;}
#porrar .show-partis {margin-right: 17px; }
#porrar .show-partis-wrap { position: absolute; bottom: inherit; top: 3.1em; right: 0.4em; bottom: inherit; }
#porrar .add-partido {display: inline-block; background-image: url(https://lab.eldiario.es/estaticos/catalanas/img/sprite0.png);height: 35px;width: 35px;text-indent: -909px;overflow: hidden;background-position: -66px 64px;margin-left: 10px;background-color: red;}
#porrar .total, #porrar .total2 {font-family: 'roboto slab';color: #3c3c3c;text-align: left;font-size: 18px;margin-bottom: 10px; line-height: 0.5em;}
#porrar #total {font-size: 22px;font-weight: 700; }
.lbox { position: absolute; display: none; width: 100%; height: 100%; z-index: 13; top: 0; left: 0; }
  .lbox-bg { position: absolute; z-index: -1; background: rgba(0,0,0,0.5); height: 100%;
    width: 100%; top: 0; left: 0; }
  .lbox-wrap {   background: white; margin: 0; height: 100%; position: relative; padding: 10px 30px; overflow: auto;}
    .closeLb { display: inline-block; background-image: url(https://lab.eldiario.es/estaticos/catalanas/img/sprite0.png); height: 35px; width: 35px;
        text-indent: -909px;overflow: hidden;background-position: -377px -10px; z-index: 12;
        position: absolute; right: 0; top: 0; }

#porrar .tuPorraBtn, .tuPorraMiniBtn { background-color: #484848; padding: 0.4em; color: white; text-transform: uppercase; text-decoration: none;
    font-weight: 400; display: inline-block; font-size: 0.8em; }

#porrar #years { text-align: center; width: 100%; display: block; }
#porrar #years div { display: inline-block; margin-right: 5px; }
#porrar #years a { padding: 6px 8px; }
#canvas-wrap { position: relative; width: 100%; float: right; overflow: hidden; }

  #gif-render, #canvas-render { width: auto;height: auto; display: block; margin: 0 auto; max-width: 100%; }
    #gif-render img { width: 100%; height: auto; max-width: 350px; margin: 0 auto; display: block; padding-top: 0.4em; }

.share-porra-content { width: 100%; position: relative; display: none; text-align: center;  }
.share-porra-content h4 { text-transform: none; margin: 0.2em 0 0.6em 0;
      font-size: 1.4em; line-height: 1.2em; font-weight: 900; }

svg text { font-size: 0.7em; font-family: 'roboto slab'; font-weight: 100; }

.form-mail-ini { font-family: 'roboto slab'; text-align: left; margin: 0 auto; background: white; z-index: 10; }
.form-mail { font-family: 'roboto slab'; text-align: left; display: none; position: absolute; background: white;
    top: 0; width: 100%; height: 100%; padding: 0.8em; box-sizing: border-box; }
  .form-mail-ini input, .form-mail-ini div,
  .form-mail input, #form-mail div { margin-bottom: 0.4em; }
  .form-mail-ini .tit-nom,
  .form-mail .tit-nom { display: inline-block; width: 106px; margin-bottom: 0; }
  .form-mail-ini .tit-mail,
  .form-mail .tit-mail { display: inline-block; margin-bottom: 0;}
  .form-mail-ini .dato-name2,
  .form-mail #dato-name { width: 90px; display: inline-block; margin-right: 10px; background: white; font-family: 'roboto slab'; font-size: 0.9em; color: #555; }
  .form-mail-ini .dato-mail2,
  .form-mail .dato-mail { width: 120px; display: inline-block; background: white; font-family: 'roboto slab'; font-size: 0.9em; color: #555; }
  .form-mail-ini textarea,
  textarea { width: 100%; background: white; font-family: 'roboto slab'; font-size: 0.9em; color: #555; box-sizing: border-box; }
  .form-subm2,
  .form-subm { border: 2px solid #333; background: none; width: 100%; padding: 0.3em; text-transform: uppercase; font-family: 'roboto slab'; margin-bottom: 1em;
          font-size: 1.2em; margin-top: 0; }
    .form-subm2:hover,
    .form-subm:hover { background: #333; color: white; }
.lbox-info { cursor: pointer; display: block; }

.lbox-share-wrong #canvas-wrap { display: none; }
.lbox-share-wrong .lbox-wrap { width: 230px; margin: 10px auto; }

#footer { display: none; background-color: #115a6d; height: 40px; line-height: 3.6em; font-weight: 900;
    font-size: 0.7em; text-align: right; padding-right: 1em; color: white;text-transform: uppercase; font-family: roboto slab, serif; }
  #footer a { display: inline-block; padding: 0.2em 0.4em; background: white; color: #115a6d; line-height: 1em; text-decoration: none; margin-left: 0.4em; }
    
@media (max-width: 400px) {
  #footer { line-height: 1.6em; }
}
@media (min-width: 650px) {
  #footer { line-height: 2.4em; font-size: 1.1em; }
  #porrar .button { font-size: 16px; }
  #porrar #years a { padding: 8px 7px; }

  #side-left { width: 50%; float: left; max-height: 420px; clear: none; }
  #side-right { width: 50%; float: right; }
  #porrar #side-right { width: 50%; float: right; }
  #svg { max-width: 520px; }

  .movil { display: none; }
  .desktop { display: block; }

  svg text { font-size: 1em; }
  .form-mail-ini { padding-top: 36px; height: 80%; position: absolute; width: 40%; }
  #porrar h2 { margin-bottom: 20px; font-size: 22px; margin-bottom: 20px; }
  #shareButt { margin-top: 0.8em; text-align: center; font-weight: 900; margin-right: 0.8em; font-size: 1.1em;  }
  #gif-render, #canvas-render { width: 45%; height: auto; float: right ;padding-right: 4%; }
  .share-porra-content { width: 310px; text-align: center; margin-top: 40px; }
  .share-porra-content h4 { margin-top: 1em; }
  #porrar .tuPorraBtn, .tuPorraMiniBtn { margin-bottom: 1em; }
  #logo { display: block; }
  #home .block { width: 50%; float: left; }
  #home a p { height: 90px; }
  a#showMini:after { margin-top: 1.6em; margin-bottom: 1em; }
}

@media (min-width: 960px) {
  #side-left { width: 365px; margin-right: 15px; }
  #side-right { width: 580px; }
  #porrar #side-right { width: 580px; }
}