#carta-enviada .hidden {
    opacity: 0;
    width: 0!important;
    height: 0!important;
    display: none!important;
}



.carta-col-1 {
    width: 60%;
    display: inline-block;
}

#download-letter {
    float: right;
    padding-top: 6rem;
}
#dowload-link {
  line-height: 2rem;
  width: 32rem;
  text-decoration: none!important;
  background: #FFD700;
  color: black!important;
  letter-spacing: 0;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 1rem;
  text-transform: inherit;
  position: relative;
  z-index: 100;
  border-radius: 8px;
}

#dowload-link:hover,
#dowload-link:focus {
  text-decoration: underline!important;
}

a#dowload-link:before {
  width: 273px;
  height: 85px;
  position: absolute;
  top: -112%;
  right: 0;
  z-index: 100;
  content: "";
  background: url(../../../images/nadal2022/carta-reis/icones-carta-boto.png) no-repeat;
  background-size: contain;
}

a#dowload-link:after {
    font-family: 'icoajuntament' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 4rem;
    -webkit-font-smoothing: antialiased;
    content: "\e9ad";
    text-decoration: none!important;
    float: right;
    text-align: right;
    margin-left: 5rem;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .carta-col-1 {
        width: 80%;
    }
    #download-letter {
        float: inherit;
        display: inline-block;
    }
    #download-letter #dowload-link {
margin-top: 112px;
    }
}


@media screen and (max-width: 767px){
  .page-node-4754 .full-background,
  .page-node-4386 .full-background,
  .page-node-4756 .full-background  {
    padding: 0;
  }

  a#dowload-link:after {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translate(0, -50%);
  }
  #download-letter {
    width: 100%;
    background-size: 100%;
    margin: 0;
    padding-bottom: 10rem;
  }

  #download-letter::before {
      top: -115px;
    }
  .carta-col-1 {
    width: 100%;
  }
  #dowload-link {
    width: 100%;
    padding-right: 26%;
      min-height: 60px;
  }
  #dowload-link:hover {
    margin-top: 0;
    width: 100%;
    margin-left: 0;
    text-align: left;
    text-decoration: underline!important;
  }
}





#reis-mobile , .hidden, .arrow {
    display: none;
}


#carta-als-reis-layer, #carta-enviada , #carta-error {
  background: #F7F7F7;
  box-shadow: 0px 6px 12px #0000003d;
  border-radius: 8px;
  padding: 2rem;
  min-height: 676px;
}

#carta-enviada , #carta-error {
  padding: 3rem;
}

form#form-carta-als-reis , #carta-enviada > div, #carta-error > div {
  width: 100%;
  border: 5px dotted #EAC813;
  padding: 10rem;
}

#carta-enviada > div, #carta-error > div {
  padding: 19rem 10rem;
}



#carta-als-reis-layer .title{
  font-family: 'PT Serif', serif;
  font-size: 2.2rem;
  line-height: 3.4rem;
  letter-spacing: 0;
  padding-bottom: 0;
  font-weight: 400;
}

#estimat-rei h3.title {
  margin-bottom: 0.8rem;
}


.letter-text {
  font-size: 1.8rem;
  letter-spacing: 0;
  line-height: 2.4rem;
  color: #4E33CB;
  font-weight: 600;
  font-family: 'Open Sans';
}
div .inline {
    display: inline-block;
    float: left;
}
#reis-desktop {
    display: inline-block;
    padding-top: 142px;
}

#reis-mags-layer-selector {
    margin: 0;
    height: 183px;
    width: 450px;
    padding: 0;
    float: right;
}
.rei {
    cursor: pointer;
}
#reis-mags-layer-selector > div , .rei-name{

  padding-top: 129px;
  margin-top: 7rem;
  background-position: center top!important;
  font-family: 'PT Serif', serif;
  font-size: 3.2rem;
  line-height: 3.6rem;
  color: #64646E!important;
  width: 130px;
  text-align: center;
  margin-right: 18px;
  height: 179px;
}

#reis-mags-layer-selector  .selected {
  box-shadow: inset 0px -1.2rem #51c99f;
  color: black!important;
}

#reis-mags-layer #reis-mags-layer-selector .rei:hover, #reis-mags-layer #reis-mags-layer-selector .rei-name:hover:focus {
  box-shadow: inset 0px -1.2rem #51c99f;
}

.melchor, .melchor_name{
    background: url(../../../images/nadal2022/carta-reis/melchor.png) no-repeat;
    background-size: 97px 110px!important
}
.gaspar, .gaspar_name{
    background: url(../../../images/nadal2022/carta-reis/gaspar.png) no-repeat;
    background-size: 101px 108px;
}
.baltasar, .baltasar_name{
    background: url(../../../images/nadal2022/carta-reis/baltasar.png) no-repeat;
    background-position: center 0!important;
    background-size: 81px 123px;
    margin-right: 0!important;
}




#name-layer, #body-layer {
    padding: 34px 0 0;
}
.name-letter {
  background: url(/nadal/sites/all/themes/bcn/images/nadal2022/carta-reis/emdic-2.png) 0 32px no-repeat;
  height: 37px;
  width: 100%;
  font-size: 1.8rem;
  letter-spacing: 0;
  line-height: 2.4rem;
  font-weight: 600;
  font-family: 'Open Sans';
}
#carta-als-reis-layer textarea::placeholder  , #carta-als-reis-layer textarea::ms-input-placeholder , #carta-als-reis-layer textarea::-ms-input-placeholder  {
  font-size: 4.8rem;
  letter-spacing: 0;
  line-height: 2.4rem;
  font-weight: 600;
  font-family: 'Open Sans';
}
#carta-als-reis-layer textarea:focus, .name-letter:focus{
  outline: none !important;
  border: 1px solid #4E33CB!important;
  box-shadow: none;
}




#title-layer {
    width: 75%;
}

#body-letter, #name-letter, #body-letter:focus, #name-letter:focus{
    border: 0;
}

#body-letter:focus, #name-letter:focus {
    color: black;
}

#body-letter{
  line-height: 6rem;
}
.normal-text {
  text-transform: inherit;
  color: #64646E;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 1.8rem;
  font-family: 'Open Sans','Source Sans Pro', sans-serif;
}
.body-letter {
    background: url(/nadal/sites/all/themes/bcn/images/nadal2022/carta-reis/dessitjo-2.png) 0px -12px repeat-y;
    height: 630px;
    width: 100%;
  }

.green-button {
  margin: 4rem auto 0;
  display: block;
  position: relative;
  border: none;
  font-size: 1.4rem;
  line-height: 1.8rem!important;
  padding: 10px 22px;
  font-weight: 600;
  text-decoration: none!important;
  background: #FFD700;
  color: black!important;
  letter-spacing: 0;
  font-size: 1.5rem;
  font-weight: 600; 
  height: 4rem;
  box-sizing: inherit;
  border-radius: 8px;
  text-align: center;
}


.green-button:focus , .green-button:hover{
  text-decoration: underline;
  background-color: #FFE765;

}


.green-button::before {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background: url(../../../images/nadal2022/boleta.png) no-repeat center bottom transparent;
  top: -31px;
  left: inherit;
  right: -12px;
  bottom: 0;
  height: 41px;
  width: 24px;
  background-size: contain;

}
button#torna-carta {
    margin-top: 0;
    display: inline;
    background-image: none!important;
    padding: 0 66px;
}

button#torna-carta:before{
  position: absolute;
  background-repeat: no-repeat;
  top: 12px;
  left: -13px;
  bottom: 0;
  height: 74px;
  width: 78px;
  background-size: contain;
  font-family: 'icoajuntament' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\e9b7";
  font-size: 1.5rem;
  background: none;
}




@media screen and (max-width: 767px){

  div#carta-als-reis{
    margin: 0 0 5rem;
  }
  #carta-als-reis-layer {
    box-shadow: 0px 1px 12px #0000003D;
    border-radius: 0;
    padding: 6rem 3rem;
  }

  h2 img{
    max-width: 280px;
  }


  form#form-carta-als-reis, #carta-enviada > div, #carta-error > div {
    padding: 0;
    border: 0;
  }

  div#carta-als-reis-layer > img, div#carta-enviada > img {
      top: 5%!important;
      width: 70%;
      opacity: 1;
  }
  div#carta-enviada > img:not(.hidden) {
    display: none!important;
  }
  div#carta-enviada > img {
    width: 66%;
    padding-top: 4rem;
    display: block;
    top: 0;
  }


  #carta-als-reis-layer .title {
    padding: 0;
    font-size: 1.8rem;
    line-height: 2.6rem;
}
  #rei-preferit {
    padding: 0;
    font-size: 1.5rem;
  }
  #reis-mags-layer-selector {
    width: 100%;
    margin: 0 auto;
    float: none;
    HEIGHT: 100%;
    DISPLAY: table;
    margin-bottom: 2rem;
  }

  #reis-mags-layer-selector  .selected {
    box-shadow: inset 0px -.8rem #51c99f;
    color: black!important;
  }
  
  #reis-mags-layer #reis-mags-layer-selector .rei:hover, #reis-mags-layer #reis-mags-layer-selector .rei-name:hover:focus {
    box-shadow: inset 0px -.8rem #51c99f;
  }

  #reis-mags-layer-selector > div, .rei-name{
    width: 29%;
    margin: 0 2%;
    font-size: 2.1rem;
    background-position: center top!important;
    padding-top: 128px;
    height: 173px;
    margin-top: 3rem;
    background-size: contain;

  }


.baltasar, .baltasar_name {
  margin-top: 2rem!important;
  height: 183px!important;
  padding-top: 138px!important;
  background-size: 90%!important;
}

  .normal-text{
    font-size: 1.6rem;
  }


}




/*Part Rebut*/

div#carta-enviada h2 {
  font-family: 'PT Serif', serif;
  font-size: 5rem;
  line-height: 6.5rem;
  letter-spacing: 0;
  position: relative;

}



div#carta-enviada > h2 {
    text-align: center;
    margin-bottom: 4rem;
}

#carta-enviada br, #carta-error br {
    display: none;
}




#carta-enviada div, #carta-error div {
    text-align: center;
    margin: 0 auto;
    position: relative;
}
#carta-enviada div h3 span, #carta-error div h3 span {
  font-family: 'PT Serif', serif;
  letter-spacing: 0;
  font-size: 5rem;
  line-height: 6.5rem;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

#carta-enviada div h2:before, #carta-error div h3 span:before{
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background: url(../../../images/nadal2022/carta-reis/regal.png) no-repeat center bottom transparent;
  top: -10rem;
  left: 50%;
  bottom: 0;
  height: 89px;
  width: 104px;
  transform: translate(-50%, 0%);
}

#carta-enviada div h3 {
  width: 343px;
      margin: 20px auto;
      margin-bottom: 40px;
  }
#carta-enviada div h3 span {
  font-size: 3.8rem;
  line-height: 4rem;
  color: #026052;
}

 #carta-enviada div > p.message-font {
  text-align: center;
  margin: 0 auto;
  display: inline-block;
  width: 343px;
  font-size: 2.2rem;
  line-height: 2.6rem;
}



#carta-enviada div .rei-name {
    top: -70px;
    position: absolute;
    left: 18%;
    text-indent: -100000px;
    display: none;
}

#carta-enviada div div div{
  transform: scaleX(-1);
}


#carta-enviada div p , #carta-error p.message-font{
  font-family: 'PT Serif', serif;
  letter-spacing: 0;
  font-size: 3.2rem;
  line-height: 3.9rem;
  color: black;
}

#carta-enviada div p.missatge {
    text-align: center;
    margin: 0 auto;
    display: inherit;
    width: 343px;
    font-size: 2.2rem;
    line-height: 2.6rem;
    height: 0;
}
#carta-enviada div p.missatge span {
  font-size: 3.2rem;
  margin-top: 2rem;
  display: inherit;
  line-height: 3.7rem;
}
#carta-error p.message-font{
  color: #D23F22;
  margin-bottom: 3.5rem;
}

#carta-error p.message-font strong{
  color: black;
  display: block;
  font-weight: 400;
}


#carta-als-reis{
  position: relative;
}






@media screen and (min-width: 768px) and (max-width: 1024px) {

  form#form-carta-als-reis, #carta-enviada > div, #carta-error > div {
    padding: 5rem;
}

  button#torna-carta:before {
    display: none;
  }

    #reis-desktop {
        width: 38%;
    }

    #carta-als-reis-layer h2 {
    margin-bottom: 3rem;
    font-size: 4.3rem;
line-height: 5.5rem;
width: 70%;
}

    #reis-mags-layer-selector {
      width: 60%;
      margin-left: 0;
      margin: 0;
      margin-bottom: 20px;
    }
    #reis-mags-layer-selector > div{
    font-size: 2.1rem;
    line-height: 3rem;
    width: 107px;

    }
    div#carta-als-reis-layer > img {
        top: 9rem;
        width: 50%;
    }
    div#carta-enviada > img {
      top: 9rem;
      width: 60%;
    }
    #carta-enviada,  #carta-error {
      background-size: 100% 100%;
      width: 100%;
    }

    #carta-enviada div .rei-name {
        left: 12%;
        top: -50px;
    }
    #carta-error div h3 span{
      position: inherit;
    }

    #carta-enviada div h3 {
        margin-bottom: 22px;
    }
    #carta-enviada div p {
        margin-bottom: 35px;
    }
    #carta-error div h3 span:after{
      top: 10%;
      right: 50%;
      transform: translate(50% , 0px);
  }

}








@media screen and (max-width: 768px) {


    #node-4787 .grid,
    #node-4785 .grid,
    #node-4791 .grid{
      width: 100%!important;
      display: inline-block;
    }

    #carta-error, #carta-enviada {
      height: inherit;
      min-height: 47rem;
      padding: 10rem 3rem 3rem;
      margin-bottom: 5rem;
      border-radius: 0;
    }



    #carta-error div h3 span:after{
      top: 5%;
      right: 50%;
      transform: translate(50% , 10px);
    }
    #title-layer {
      width: 100%;
    }
    #body-layer {
        margin-bottom: 15px;
    }
    #carta-error div h3 span{
      position: inherit;
    }
    #carta-error div p span{
      width: 70%;
      margin: 0 auto;
      display: grid;
    }

    #carta-enviada div p, #carta-error p.message-font {
      font-size: 2.8rem;
      text-align: center!important;
      width: 100%!important;
      line-height: 3rem!important;
    }
    div#carta-enviada h2 {
    font-size: 3rem;
    line-height: 4rem;
}
#carta-enviada div p.missatge span {
    text-align: center;
    width: 100%!important;
}
#carta-enviada div .rei-name {
  position: absolute;
      top: -200px;
      left: 38%;
      transform: none;
      text-align: center;
      background-size: 62px!important;
}

#carta-enviada div h3 {
  width: 100%;
    text-align: center;
}
    #name-layer {
        margin-bottom: 3%;
    }
    #name-layer, #body-layer {
        padding: 10px 0;

    display: inline-block;
width: 100%;
    }

    #reis-mobile {
        display: block;
        margin-top: 5rem;
    }

    .name-letter {
      font-size: 1.4rem;
      line-height: 3.6rem;
    }

    .regals, .punt, .caramels , #reis-desktop, #print-letter {
        display: none;
    }


    .green-button {
      margin-top: 4rem;
      margin-bottom: 3rem;
  }

    .green-button::before {
      display:none:
  }


  button#torna-carta {
    margin-top: 0;
    display: inline;
    background-image: none!important;
    padding: 0px 50px;
}

button#torna-carta::before{
  display: block!important;
  background: none;
}



}











/** Different sizes of mobile screens **/
@media screen and (max-width: 540px) {

    #download-letter {
        height: 80px;
    }

    .body-letter {
       /* height: 275px;
        background-size: 100%;
        width: 100%;
        background-position: 14px 14%;
        line-height: 3rem!important;*/
        height: 419px;

      
    }





}


@media print {
    body {
        margin: 0;
        padding: 0;
    }
    #contingut,#download-letter,.grid #breadcrumb,.grid h2,#send-letter {
        display: none;
    }
}