/*TO DO*/
/*
ajout des informations bancaires dans le footer
*/
/*my colors
    f0c930 - yellow
my fonts
font-family: 'Instrument Sans', sans-serif;
*/





/*disable things*/
p{
    margin: 0;
       /* margin-bottom: 1.5em;*/

}
h1.page-title {
    margin: 0;
}
.widget{
  margin:0;
}
/*========= disable things end ============*/
/*main font*/
body {
    font-family: 'Instrument Sans', sans-serif;
}
body {
  overflow-x: hidden;
}
/*============ main font end ==========*/
/*main-colors*/
html{
  background-color: #fff;
}
body{
background-color: transparent;
}
body ::selection {
 color:inherit;
 background-color:#ffcc0f
}

/*============ main colors end ==========*/

/*margins*/
 #masthead, #colophon {
    margin: 0px 2vw;  
  position: relative;
z-index: 4;
}
#colophon{
  z-index: 1;
}
  #primary{
    margin: 0px 14vw;  
  position: relative;}


/*============ margins end ==============*/
/*general font sizes an colors*/

h1{
    font-size: 4rem;
}
h3{
  font-size:2.4rem;
  margin: .5em 0;
}
h4 {
  font-size: 2rem;
}
p{
  padding-bottom: 1.2rem;
}
p,a,li {
    font-size: 2rem;
    line-height: 1.35;
           hyphens: auto;

  }
  .main-navigation a{
    hyphens: none;
    padding-top: .5rem;
  }

a, a:visited {
    color: black;
    font-weight: 500;
    
  }
  a:hover, a:active, a:focus, a:focus-visible{
    color: #ffcc0f;
    background-color: black;
  }

  h1,h2,h3,h4,h5,h6,p,label,span,li{
    color:black;
  }
  ul{
list-style: square;
list-style: url("https://madpride.ch/wp-content/uploads/2023/06/carton_02_puce_black.png");

}
li {
  padding-left: 1rem;
}
  /*============= font sizes and colors end =============*/
/*general classes*/
.none{
    display:none;
}
.invisible{
    visibility: hidden;
}
.separateur {
    background-color: black;
    height: 1px;
    margin: 1.5rem 0 ;
  }
.thin{
    font-weight: 100;
}
.bold{
  font-weight: 600;
}
.light{
  font-weight: 300;
}  
.multiply{
  mix-blend-mode: multiply;
}
iframe{
  width: 30vw;
  margin: 0;
}
.wp-block-separator{
  border:none;
  background: black;
  height: 1px;
  margin: 1rem 0;
}
/*buttons*/
.wp-element-button,.wp-element-button:visited {
  border-radius: 0;
  color: white;
  background: black;
  padding: 1.5rem;

}
.wp-element-button:hover,.wp-element-button:focus,.wp-element-button:focus-visible,.wp-element-button:active {
  border-radius: 0;
  color: #ffcc0f;
  background: black;
  opacity: 1;
}

.wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/*============= general classes end =============*/

/* HEADER*/
/*making site title go outside viewport*/
.site-title, .site-description {
    margin: 0;
    height: min-content;
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -10000px;
}
/*sizing logo box*/
.custom-logo, .custom-logo-link, .site-branding {
  max-height: 120px;
    width: auto;
  max-width: 35rem;
}
/*first header flex*/
/*spacing branding and nav*/
#masthead {
  max-height: 160px;
    display: flex;
    justify-content: space-between;

padding: 1rem 0;
  }
  /*flexing main nav*/
  #primary-menu {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .site-branding a:hover,.site-branding a:focus,.site-branding a:focus-visible,.site-branding a:active,
  .overlay-widget a:hover,.overlay-widget a:focus,.overlay-widget a:focus-visible,.overlay-widget a:active,
  .wp-block-gallery a:hover,.wp-block-gallery a:focus,.wp-block-gallery a:focus-visible,.wp-block-gallery a:active{
    background:transparent;
  }

  /*2nd level menu*/
  .main-navigation ul ul {
    box-shadow:none;
    float: right;
    text-align: right;
    margin: 0 0;
  }
  .main-navigation ul ul a {
    width: fit-content;
    position: relative;
    top: 0;
    left: -1rem;
  }
  /*second header flex*/
/*align nav and language menu on the right*/

  #header-widget-area {
    display: flex;
    justify-content: flex-end;
}


.main-navigation{
    width: fit-content;

    display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
}
.main-navigation a{
    color:black;
    padding-left: 1rem;
    font-size: 1.3rem;
    transition: all ease-in-out .3s;
    line-height: 1;
}
#menu .mobile-menu {
  margin: 1rem 0 2rem 0;}
/*different padding for language menu*/
.lang-item a {
  padding-left: 1rem;
}
.main-navigation a:hover,.main-navigation a:active{
    /*font-size: 1.2rem;*/

    text-decoration-line:underline ;
    background-color: transparent;
}
.main-navigation a:focus,a:focus-visible{
  background-color: transparent;

}
/*underline menu*/
.current_page_item a, .current-menu-item a {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
  }
  /* underline language */
  .lang-item.current-lang a {
    /*color: #F0C510;*/
    text-decoration: underline !important;
  }
/*========== header end ===========*/

/*FOOTER*/
/*not in the footer but put a botttom margin on content to allow user to see all content as footeer is fixed*/ 
.page-content, .entry-content {
  margin: 1.5em 0 0 0;
}
#colophon {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 96vw; /*as margins left+right = 4vw*/
    padding: 1rem 0;
  }


  


.appel-aux-dons-box {

    display: flex;

}
.appel-aux-dons-qr {
    height: 200px;
  }
  .rs-logo-box {
    display: flex;
    justify-content: space-around;
  }
  .rs-logo-box a {
    padding: 0 .5rem 0 0;
  }
  .rs-logo-box a:hover {
    fill: #ffcc0f;
    background: transparent;
  }
.rs-logo-box svg {
    height: 25px;
}
.adresse-box, .rs-label-box, .rs-logo-box{

    line-height: 1.2;
}
.banque-info {
  width: 480px;
  padding: 0 1rem;
}
/*translated footer*/
#footer-widget-area{
display: flex;  
}
.footer-widget img {
  width:330px ;
}
.footer-widget .textwidget{
  width: 400px;
  padding: 0 1rem;
}
.textwidget p,.signature{
  font-size: 1rem;
}



/*========= footer end ============*/

/*FEED*/
.grid-sizer, .grid-item{
	width: calc(100%);
}
.imagette img {
    width: 30vw;
    mix-blend-mode: multiply;
}
.archive-grid-contenu {
    width: 50%;
}
.grid-item a {
    display: flex;
    justify-content: space-between;
  text-decoration: none;
  align-items: center;
}
.grid-item a:hover,.grid-item a:focus,.grid-item a:focus-visible,.grid-item a:active {
  background-color: transparent;
}
.entry-summary{
  margin:1rem 0 0 0;
}
.entry-summary p {
  padding: 0;
}


/*=========== FEED END =============*/
/*PAGES AND POSTS CONTENT*/
.post-thumbnail {
    display: none;
  }
  /*POST AND PAGES DISPLAY*/
.flex-post .wp-block-group__inner-container,.wp-block-group {
  display: flex;
  align-items: center;
justify-content: space-between;
padding-bottom: 2rem;

}

.flex-top {
  align-items: flex-start !important;
  display: flex;
  justify-content: space-between;
}

.text-bloc {
  width: 50%;
  padding-left: 2rem;
}
.text-bloc-left {
  width: 50%;
  padding: 0 2rem 0 0;
}

.wp-block-group img,.wp-block-group .wp-block-video video {
  width: 30vw;
  min-width: 30vw;
}
.entry-title {
  margin: 2rem 0 0 0;
}
.wp-block-heading {
  margin: 1rem 0;
}

/*=========*/

/*CONTACT FORM STYLING*/

.wpcf7{
  width: 50%;
}
input[type="text"],input[type="email"], input,textarea {
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid black;
  font-size: 2rem;
max-width: 100%;
margin-bottom: 1rem;
}
 
input[type=text]:focus,input[type="email"]:focus, input:focus, textarea:focus,
input[type=text]:focus-visible,input[type="email"]:focus-visible, input:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 5px #ffcc0f;
  padding: 3px 0px 3px 3px;
  border: 1px solid #ffcc0f;
  margin-bottom: 1rem;

}
.wpcf7-response-output {
  border: none !important;
  color: red;
  padding: 0 !important;
margin: 0 !important;
font-size: 1rem;
}
.wpcf7-not-valid-tip {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/*TEMPORARY */

#header-widget-area-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    height: 100%;
}
#menu a{
  font-size: 2rem;
  text-align: right;
}
#menuToggle
{
  display: none;
  position: fixed;
  /*compense par les marges du #menu*/
top: 1.5rem; 
right: 1rem;
  
  z-index: 
  4;
  
  -webkit-user-select: none;
  user-select: none;

}
.sub-menu {
  display: flex;
  width: 100%;
}
/*makes 2022 visible in mobile-menu*/
#menu .sub-menu {
  left: 0 !important;
  position: relative !important;
  top: 0 !important;
}

#menu .sub-menu li a {
  font-size: 1.8rem;
}
#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #f0c930;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: 0;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 4; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
 /* display:none;*/
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: black;
  border-radius: 3px;
  
  z-index: 4;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: fixed;
  width: 100vw;
  margin:0;
  padding:0;
  padding-top:0;
  height:100vh;
  background: white;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  top: 0;
right: 0;
/*display: none;*/
transform: translate(100%, 0);
padding: 4rem 6vw;
overflow: hidden;

}

#menu li
{
  padding: .6rem 0;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ div
{
  transform: translate(0%, 0);
}
/*met le menu des langues en une ligne*/
.menu-mobile-area ul {
  display: flex;
  justify-content: flex-end;
}
#menu-menu-fr, #menu-menu,#menu-menu-it{

  display: flex;
  flex-direction: column;
  justify-content: space-between;
height: 50vh;
  
}
/*menu principal en une colonne*/
.mobile-menu .menu {
  display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
/*OVERLAY WIDGET: APPEL AUX DONS*/
#overlay-widget-1 {
  position: fixed;
  right: 1rem;
  width: 12.5vw;
  z-index: 2;
  top:14rem;

}

/* RANDOM BACKGROUND*/
#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#background img {
mix-blend-mode: multiply;
}


.main-navigation ul li:hover>ul, .main-navigation ul li.focus>ul {
  /* left: auto; */
  display: flex; /* Added */
}
/*SPONSORS*/
.wp-block-gallery .wp-block-image {
  margin: 0 !important;
}
.sponsor-grid{
  filter: grayscale(1);
}
.sponsor-grid figure{
  max-width: calc(16.66667% - var(--wp--style--unstable-gallery-gap, 16px)*.83333) !important;
  width: calc(16.66667% - var(--wp--style--unstable-gallery-gap, 16px)*.83333) !important;

}
.wp-block-gallery.has-nested-images {
  justify-content: space-between !important;
  align-items: center !important;
}
.wp-block-gallery.wp-block-gallery {
  --wp--style--unstable-gallery-gap: var(--wp--preset--spacing--58);
  gap: var(--wp--preset--spacing--60);
}
 .imagette img{
  position: relative;
  mix-blend-mode: multiply;
  z-index: 0;
  background-color: #fff;
}

/* Masonry grid gallery (voir l'article: Merci pour cette journée */

/* fait apparaitre les légendes des images */
.mgl-masonry .mgl-item{
  display: flex;
  flex-direction: column;
}

.mgl-item figcaption, .mgl-caption {
  opacity: 1 !important;
  /*background-color:transparent !important;*/
  background: rgb(0,0,0) !important;
background: transparent !important;
padding-top:70px;
}
.mgl-item figcaption p, .mgl-caption p{
  font-size:1.2rem !important;

}
.mgl-masonry .mgl-item figcaption p{
  background: rgb(0,0,0) !important;
background: linear-gradient(0deg, rgba(0,0,0,0.8562018557422969) 0%, rgba(0,212,255,0) 78%) !important;
/*padding-top: 60px !important;*/
  
}


/*small screens and tablets*/
@media screen and (max-width: 1200px) {
  /*HEADERR*/
  #menuToggle{
    display: block;
  }
  /*making desktop-menu hidden*/
  #primary-menu, #header-widget-area {
    display: none;
  }
  /*POST GRID*/
.grid-item a{
  display: block;
}
.archive-grid-contenu{
  width: 100%;
}

/*POST AND PAGES DISPLAY*/
iframe{
  width: 100%;
}
.flex-post .wp-block-group__inner-container, .wp-block-columns {
  display: block !important;
  padding-bottom: 1rem;

}
.wp-block-group {
  display: block !important;
}
.text-bloc {
  width: 100%;
  padding-left: 0;
}
.text-bloc-left {
  width: 100%;
  padding-right: 0;
}
.wpcf7 {
  width: 100%;
}
.imagette img,.wp-block-group img{
  width: 100%;
  padding-bottom: 1rem;
}



/*OVERLAY WIDGET: APPEL AUX DONS*/
#overlay-widget-1 {
  position: absolute;
  right: 1rem;
  width: 30vw;
  z-index: 1;
  top:5rem;

}



/*SPONSOR GALLERY*/
/*flexing 3 columns*/
.sponsor-grid figure{
  max-width: 25% !important;
    width: 25% !important;

  }
  .mgl-masonry {
    column-count: 3 !important;
}

}
/*footer block at 1000px*/
@media screen and (max-width: 1000px) {
    /*MOBILE-FOOTER*/
    #colophon {
      display: block;
      width:92vw;
      position: relative;
      top: 0;
    }

    .signature {
      text-align: center;
      font-size: 1.6rem;
    }
    .rs-logo-box {
      justify-content: space-around;
      padding: 1rem 0;
    }
    .rs-logo-box svg {
      height: 40px;
    }
    .banque-info{
      padding: 0;
      width: 100%;
    }
    .appel-aux-dons-box{

      display:block;  
    }
    .appel-aux-dons-qr {
      height: auto;
      width: 100%;
      padding: 1rem 0;
    }
   #footer-widget-area {
      display: flex;
      justify-content: space-between;
    }
    .bold.signature {
      padding: 1rem 0 0 0;
    }

/*masonry grid*/
    .mgl-masonry {
      column-count: 2 !important;
  }
}



/*MOBILE*/
@media screen and (max-width: 600px) {
    ul{
      margin:0;
      font-size:1.6rem;
    }
    p,a{
      font-size:1.6rem;
    }
    .wp-element-button{
      margin-top: 1rem;
    }

    #masthead, #colophon{
        margin: 0 4vw;
    }
    #menuToggle{
      right:1rem;
    }
    #primary{
        margin: 0 2rem;
    }

    /*MOBILE-HEADER*/
    .site-branding {
      max-width: 64vw;
    }

    /*as position is back to relative -> no margins at the bottom of the content*/
    .page-content, .entry-content, .entry-summary {
      margin-bottom: 0;
    }
    .post, .page {
      margin-bottom: 0;
    }


    h1{
        font-size: 2.5rem;
    }
    #menuToggle{
  display: block;
}
/*POST GRID*/

.grid-item a{
  display: block;
}
.archive-grid-contenu{
  width: 100%;
}
/*FOOTER*/
#footer-widget-area {
  display: block;
}
.footer-widget .textwidget {
  width: 100%;
  padding: 0 0 1rem 0;
}
.footer-widget img {
  width: 100%;
}

/*overlay widget*/
#overlay-widget-1 {
  right: 0.3rem;
  width: 30vw;
  top: 4.4rem;
}
/*sponsors logo grid*/
.sponsor-grid figure{
  max-width: 50% !important;
  width: 46% !important;

}
/*masonry*/
.mgl-masonry {
  column-count: 1 !important;
}


}

/*TEMPORARY*/
.main-navigation ul ul ul {
    left: -999em;
    top: 2rem;
    left: 0;
    display: flex;
    flex-direction: column;
  }