
body {
  background-image: url('../img/noel2020/BG_CHRISTMAS-Desktop.svg'); 
  background-size: 100%;
  background-position: center 90px;
  background-repeat: no-repeat;
  scroll-behavior: smooth;
}

section#header + section, #back2top + section {
  padding-top:4.5em !important;
}

#e-mag,
#discover {  
  background-image: url('../img/noel2020/BG_cadeau-desktop.svg'); 
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center bottom;
  min-height:300px;
  padding:2rem 0;
}

#howto {
    border-style: dotted !important;
    border-width: 3px !important;
}

.title {
    font-size:3.5em;
}

.subtitle {
    font-size:3rem;
    text-transform: uppercase;
    font-weight:700;
}

.btn.btn-primary,
.btn.btn-secondary {
  padding-right:3em;
}

#discover-gift-btn {
  min-width:250px;
}
#logo_sentence img {
  position: relative;
  bottom:3px;
}
#logo_sentence img:first-child {
  bottom:6px;
}

#my-cart {
  font-size:0.875rem;
}

#my-cart-icon {
  position:relative;
  bottom:0.5rem;
}

#discover-gift-text {
  text-align: left;
  display:inline-block;
  padding-left: 3.5em;
}
#discover-gift-text img {
  position:absolute;
  margin-left:-2.5em;
  bottom:0.75em;
}


#responsible-parties {
  font-size: 4.2rem;
  text-transform: lowercase;
}

#three-issues-free {
  font-size:2.36rem;
}

.icon-container {
  display:inline-block;
  border-radius: 50%;
  background-color: white;
  text-align: center;
}

#howto,
#services,
#contact,
footer {
  padding:3em 0;
}

#howto {
  margin-top:5em;
}
#howto .text-uniblue {
  font-size:3em;
  font-weight: 700;
}

#howto h4 {
  font-size:1.43em;
  line-height: 1.5em;
}

#howto h2 {
  position:relative;
  margin-bottom: 1em;
  font-weight: 600;
  line-height:1.5em;
  display: inline-block;
  margin-left:20%;
}

#howto h2::before {
  background-image: url(../img/noel2020/Stars_left.svg);
  background-repeat:no-repeat;
  background-position: top right;
  background-size: 66%;
  content: ' ';
  white-space: pre;
  position: absolute;
  left:-3em;
  width:3em;
  height:3em;
}

#howto h2::after {
  background-image: url(../img/noel2020/Stars_right.svg);
  background-repeat:no-repeat;
  background-size: 66%;
  background-position: top left;
  content: ' ';
  white-space: pre;
  position: absolute;
  right:-3em;
  width:3em;
  height:3em;
}

#e-mag-cover,
#e-mag-text,
#discover h2 {
  text-align:center !important;
}
#discover h2 {
  color:#007D8F;
  text-transform: uppercase;
  font-weight: 700;
}

#discover .media span {
  position:absolute;
  background-color:#D50100;
  border-radius:100%;
  font-weight: 600;
  color:white;
  padding:1.5rem;
  right: 2rem;
  top: 8rem;
  font-size:29px;
  line-height: 1.25em;
}
#discover .media span::first-letter {
  font-size:40px;  
}
#discover .media-body h5 {
  font-weight:700;
  font-size:1.5rem;
  color:#545454;
  margin-bottom:10px;
}
#discover .media-body p {
  margin-bottom:0.75rem;
}
#discover .media-body p.period {
  font-weight:700;
  text-transform: uppercase;
  color:#007D8F;
  font-size:1.25rem;
  min-height: 2.75em;
}

#discover .media-body p.price {
  font-weight:700;
  color:#D50100;
  font-size:1.5rem;
  margin-bottom:20px;
}
#discover .media-body a.lienPopup {
  color:#545454;
  text-decoration: underline;
  font-weight: 600;
  display:inline-block;
  margin-top:0.75em;
}

#footnote {
  font-size:80%;
  margin-bottom: 4em;
}

#issues .voucher {
  font-weight:bold;
}

#services {
  background-color: white;
}

#services h3 {
  line-height: 1.5em;
}

.sites {
  font-size: 0.875em;
}
.btn.btn-primary+a {
  position:absolute;
  color:#007D8F;
  text-decoration: underline;
  font-size:1.1em;
  font-weight: 600; 
}

#issues .btn.btn-primary+a {
  bottom: 0;
  margin-bottom: -6.5rem;  
}

.popupflash .btn.btn-primary {
  display:block;
  margin:0 auto;
}

.popupflash .btn.btn-primary+a {
  position:static;
}
.popupflash .croix:after {
  color:#007D8F;
  width:20px;
  height:20px;
}

/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 767px) { 
  body {
    background-image: url('../img/noel2020/BG_CHRISTMAS_Mobile.svg'); 
    font-size:14px;
    background-position: center 90px;
    background-repeat: no-repeat;
    scroll-behavior: smooth;
  }
  
  span.bronmobile {
    display:block;
  }
  #discover-gift-text {
    font-size:1.25em;
  }

  #logo_sentence {
    line-height: 2em;
    padding-top:1em !important;
  }

  #my-cart-icon {
    bottom:0.6em;
    right:0.6em;
  }
  .title { font-size: 3em; }
  .subtitle {  font-size:2rem; }
  #responsible-parties { display:block; font-size:3.5rem; line-height:3.5rem; }

  #howto {
    width:92%;
  }

  #howto .list-unstyled li:last-child .row {
    align-items: center;
  }

  #thumbs .row > div {
    text-align: center;
  }
  
  #e-mag-cover,
  #e-mag-text,
  #discover h2 {
    text-align:center !important;
    padding-bottom:1rem;
  }
  #discover .media-body a {
    font-size:1.25em;
  }

  #contact {
    text-align: center;
  }
  #contact h3 {
    text-align: center;
  }
  #contact .row > div {
    margin-bottom: 1rem;
  }

  #header #logo_sentence img {
    max-height:2em;
  }

  #issues p button,
  #discover button,
  .popupflash button,
  .buttonAddProdCart,
  .voirpanier {
    padding-top:1em;
    padding-bottom:1em;
    font-size:1.4em;
    display:inline-block;
  }
  #issues p button,
  #issues .buttonAddProdCart {
    margin:0.5em auto 4em auto;
  }

  #three-issues-free {
    font-size:1.1em;
  }

  #issues .text-unigreen {
    font-size:1.5em;
  }

  #issues .text-unigrey {
    font-size:1.2em;
  }

  #issues .voucher { 
    font-size:1.4em;
    text-align: left;
  }
   
  #issues p button.btn-primary i,
  #discover button i,
  .popupflash button i,
  #issues .buttonAddProdCart i,
  #discover .buttonAddProdCart i,
  #discover .voirpanier i {
    top:1.1em;
  }
 
  #issues #det h4 {
    padding-right:3em;
    line-height: 1.5em;
  }

  #e-mag {  
    background-image: none; 
  }

  #e-mag-text button {
    padding-top:1em;
    padding-bottom:1em;
    font-size:1.3em;
    margin:0.5em auto;
    display:block;
  }
  #e-mag-text button i {
    top:1.1em;
  }
  #gift {
    text-align: center;
  }
  #services,
  #contact {
    padding:1em 0;
  } 
  #discover-gift-text span,
  #services h3 span,
  #contact h3 span {
    display: block;
  }

  #contact h3 {
    font-size: 2.5em;
  }

  footer .small {
    margin:0 2em;
  }

  #howto h2 {
    margin-left:auto;
    margin-right:auto;
    font-size:1.75em;
    max-width:75%;
    display:block;
  }
  #howto h2 span {
    display:block;
  }
  #howto h2::before {
    top:0.5em;
  }
  #howto h2::after {
    top:0.875em;
  }
  #howto h5 {
    font-size:1.2em;
  }
  #issues p:last-child, #issues .boutonp:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #issues .btn.btn-primary+a {
    margin-bottom: 3rem; 
    font-size:1.25em;
  }
  
  .boutonp{
  	max-width:none !important;
  }
  

}

/* tablets */
@media (min-width: 768px) and (max-width: 991px) {  
  body {
    font-size:14px;
    background-repeat: no-repeat;
  }
  #header {
    padding:1.75em 0 0.5em;
  }
  #header #logo_sentence img {
    max-height:2em;
  }

  .subtitle {  font-size:2.5rem; }
  #responsible-parties { font-size:3.5rem; line-height:3.5rem; }


  #discover-gift-text {
    padding-left: 4em;
  }
  #discover-gift-text span {
    display:block;
  }
  #discover-gift-text img {
    margin-left: -3em;
    bottom: 1em;
  }

  #det p:last-child {
    margin-top:2.5em;
  }
  
  #howto {
    margin-top: 1.5em;
  }

  #howto .list-unstyled .row.item3 {
    align-items: last baseline;
  }

  #howto .text-unigrey {
    text-align:left;
    padding-top: 23px;
  }
  #howto h4 {
    margin-top:1em;
    margin-bottom:2em;    
  }

  #thumbs .row,
  #services .row
   {
    text-align: left !important;
  }

  #howto h2 {
    font-size:1.75em;
    text-align:center !important;
    padding:0 25%;
    margin-left:0;
  }
  #howto h2::before {
    left:18%;
    top:0.75em;
  }
  #howto h2::after {
    right:18%;
    top:1.2em;
  }

  #e-mag-text button,
  #issues p button,
  #discover button,
  .popupflash button,
  .buttonAddProdCart,
  .voirpanier {
    padding-top:1em;
    padding-bottom:1em;
    font-size:1.3em;
  }
  #e-mag-text button i,
  #issues p button i,
  #discover button i,
  .popupflash button i,
  .buttonAddProdCart i,
  .voirpanier i {
    top:1.1em;
  }
    
  #services .row .row > div:first-child {
    text-align: right;
  }

  #contact h3 {
    text-align: center;
    font-size: 2.2rem;
  }
  #contact > .row > div  {
    padding-left:3em;
  }
  #contact > .row > div:first-child  {
    padding-left:0;
  }
  #issues {
    margin-bottom: 8rem;
  }

  #issues .row > div p:last-child button,
  #issues .row > div .boutonp:last-child .buttonAddProdCart {
    position: absolute;
    bottom: 0;
    margin-bottom: -3rem;  
  }

  #issues p:last-child,
  #issues .boutonp:last-child {
    display:flex;
    flex-direction: column;
  }
  #issues .btn.btn-primary+a,
  #issues .boutonp .buttonAddProdCart+a {
    margin-bottom: -5rem;  
  }
}

/* desktops */
@media (min-width: 992px) { 
  #header  {
    padding:1em 0;
  }

#discover-gift-text {
  text-align: center;
}
#discover-gift-text img {
  vertical-align: middle;
  margin-right: 0.5em;
  bottom: 0.33em;
}

#issues {
  margin-bottom:10em;
}
#issues .row > div p:last-child button, #issues .boutonp .buttonAddProdCart {
  position: absolute;
  bottom: 0;
  margin-bottom: -4em;
}
#e-mag-text button,
#issues p button,
#discover button,
.popupflash button,
.buttonAddProdCart ,
.popupflash .buttonAddProdCart,
#discover .voirpanier
 {
  padding-top:1em;
  padding-bottom:1em;
  font-size:1.05em;
}
#e-mag-text button i,
#issues p button i,
#discover button i,
.popupflash button i,
.buttonAddProdCart i,
.voirpanier i {
  top: 1em;
}

#howto h4 {
  margin: 1em 0 2em;
}

#howto .row:first-child ul.row {
  margin-left: 1em;
}

#howto .list-unstyled .row.item3 {
  align-items: last baseline;
}
#howto .list-unstyled .row.item3 span {
  display: block;
}

/* #header #logo_sentence img {
    max-height:2em;
  } */

  #howto .text-unigrey {
    text-align:left;
  }

  #thumbs .row,
  #services .row
   {
    text-align: left !important;
  }

  .icon-container img {
    max-height: 50px;
    max-width: 50px;
  }
  
  #contact h3 {
    text-align: left;
    font-size: 1.8em;
    margin-left:2.4em;
  }
  #contact h3 span {
    display:block;
  }
  .popupflash .btn.btn-primary {
    padding-right: 2.8em;
  }
}

/* Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { 
  
 }
  @media (min-width: 769px) and (min-resolution: 192dpi) {
  }
 */

@media (min-width: 768px) {
	.cacheCouv {
	    display: none;
	}
}

.tailleMags {
	
	max-height: 300px;
}

.boutonp {
	max-width: 260px;
}

.popupmagazine.boutonp {
	margin-top: 20px;
	max-width: 260px;
	margin-right: auto;
	margin-left: auto;
}

.identified-user_header {
    text-align: right;
    padding-top: 0px;
    padding-bottom: 0px;
}

@media (max-width: 991px) {
	.identified-user_header {
		text-align:center;
		padding-top:6px;
		padding-bottom:12px
	}
}

@media (max-width: 767px) { 
	.visuel-flash img {
	 max-height: 200px;
	}
}