@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;500&family=Raleway:ital,wght@0,300;0,500;0,700;1,300;1,500;1,700&display=swap');
@font-face{
    font-family:"FrutigerLTW01-45Light";
    src:url("../webfonts/7d3671fc-8c26-459c-98e1-997c4f6c8c93.eot?#iefix");
    src:url("../webfonts/7d3671fc-8c26-459c-98e1-997c4f6c8c93.eot?#iefix") format("eot"),
    url("../webfonts/4fb89ed5-baf5-425f-aba4-46e8c2c3aabe.woff2") format("woff2"),
    url("../webfonts/2a004a53-ac5c-43b3-9eeb-9f74ae4c1609.woff") format("woff"),
    url("../webfonts/74d53f3b-1683-4d5a-a556-e13f6553cdf0.ttf") format("truetype"),
    url("../webfonts/3f5a5b87-e71e-4544-be0c-da4daa132710.svg#3f5a5b87-e71e-4544-be0c-da4daa132710") format("svg");
    }    

@font-face{
    font-family:"FrutigerLTW01_65Bold";
    src:url("../webfonts/fbd7c0fb-f004-4e83-81d2-1d400413a873.eot?#iefix");
    src:url("../webfonts/fbd7c0fb-f004-4e83-81d2-1d400413a873.eot?#iefix") format("eot"),
    url("../webfonts/6e7f04cb-3b30-43a5-b79d-25b4c1178700.woff2") format("woff2"),
    url("../webfonts/9aa32a81-1124-4c43-b3db-15bfb1f7aed2.woff") format("woff"),
    url("../webfonts/6faffbf4-f8e8-4817-b24b-a390e166be7e.ttf") format("truetype"),
    url("../webfonts/fc09de64-de25-425e-90dc-a0cae29b02c4.svg#fc09de64-de25-425e-90dc-a0cae29b02c4") format("svg");
    } 
    :root{
      --neutral-light: #DEE3E6;
      --neutral-extra-light: #F1F4F6;
      --neutral: #807D7D;
      --neutral-dark: #505050;
      --white: #FFFFFF;
      --primary-light: #E9F7BE;
      --primary-extralight: #F7FBEA;
      --primary-dark: #0F2D00;
      --primary: #82BC00;
      --error-light: #E05A42;
      --error-extralight: #FFD4CC;
      --error-dark: #C7341A;
      --error: #C7341A;
      --info-light: #76BCF8;
      --info-extralight: #D0EFFD;
      --info-dark: #013252;
      --info: #2196F3;
      --warning-light: #FFBE58;
      --warning-extralight: #FFF2DE;
      --warning-dark: #FF9800;
      --warning: #FF9800;
      --success-light: #E9F7BE;
      --success-extralight: #F7FBEA;
      --success-dark: #0F2D00;
      --success: #82BC00;
    }
/* BASE TYPOGRPHY */

/* These are the default styles for the Simple theme */
body {
  font-size: 20px; /* This overrides the browsers default font size */
  line-height: 26px; /* If you change the font-size make sure you change the line-height value as well - the usual ratio is around 1.5 (font-size x 1.5 = line-height) */
  color: var(--primary-dark);
  font-family: "FrutigerLTW01-45Light", "Raleway", sans-serif;
  min-height: 100dvh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: white;

}
body.EventPage {

  background-color: var(--primary-extralight);

}
body.dologin{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  flex-direction: column;
  background-size: 300% 300%;
  background-size: 300% 300%;
  background-image: linear-gradient(-45deg, var(--primary-extralight) 0%, var(--primary-light) 25%, var(--primary) 45%, var(--primary-dark) 100%);
  -webkit-animation: AnimateBG 10s ease infinite;
          animation: AnimateBG 10s ease infinite;
}
@-webkit-keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
body a { text-decoration: none; } /* this removes the underline from all links */
body a:link { color: inherit;} /* this sets the highlight color when links are tapped on Safari (browser) on iPhone */

.glass {
  background: rgba(255, 255, 255, 0.39);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7.7px);
  -webkit-backdrop-filter: blur(7.7px);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
/* HEADERS */
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
  font-family: "FrutigerLTW01_65Bold", "FrutigerLTW01-45Light", "Raleway", Times, serif; /* This references one of the custom @font-face fonts - the other fonts that are referenced are fallbacks for browsers that don't support @fontface */
  font-weight: normal;
  margin-bottom: 10px;
  color: var(--primary);
}
.typography h1 {
font-size: 36px;
line-height: 45px;
margin: 0 0 25px 0;
padding-bottom: 5px;
}
.typography h2 { font-size: 30px; line-height: 35px;     font-family: "FrutigerLTW01-45Light", "Raleway", Times, serif; }
.typography h3 { font-size: 22px; line-height: 30px; margin-bottom: 10px; }
.typography h4 { font-size: 18px; line-height: 25px; margin-bottom: 5px; }
.typography h5 { font-size: 16px; line-height: 20px; margin-bottom: 5px; }
.typography h6 { font-size: 14px; line-height: 20px; font-weight: bold; margin-bottom: 5px; }


/* PARAGRAGHS */
.typography  p { font-size: 20px; line-height: 26px; margin: 0 0 20px; }
.typography .intro {
    font-family: "FrutigerLTW01-45Light", "Raleway", Times, serif;
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 20px;
}
.typography em { font-style: italic; }

::selection,
::-moz-selection { /* Applies style to highlighted portion of a page */
  background: var(--primary-dark);
  color: var(--white);
  text-shadow: none;
}

/* LINKS */
.typography a, 
.typography a.intro {
  color: inherit;
  text-decoration: none;
}
.typography a:hover { 
  color: inherit;
}
.typography a:focus { }


/* LIST STYLES
-------------------------------------------- */
.typography ul, 
.typography ol,
.typography dl { margin: 0 0 20px 25px; }
.typography ul li { list-style-type: disc; } /* adds disc style bullet to the list */
.typography li { margin-bottom: 5px; }


/* TABLE STYLES
-------------------------------------------- */
.typography table {
  border-collapse: collapse; /* borders are collapsed into a single border when possible */
  border: 1px solid var(--neutral-extra-light);
  border-spacing: 0; /* The border-spacing property sets the distance between the borders of adjacent cells - acts as a backup to border-collapse: collapse */
  margin: 0 0 10px;
  text-align: left;
}
.typography table tr:nth-child(even) {
    background-color: #ededed
}
.typography table tr.even,
.typography table th,
.typography thead td {
    background-color: var(--neutral-light)
}
.typography table td,
.typography table th {
    padding: 2px 5px;
    border: 1px solid var(--neutral-light);
    vertical-align: top;
}
.typography table th {
    font-weight: bold;
}


/* WYSIWYG EDITOR ALIGNMENT CLASSES 
-------------------------------------------- */
.typography .left {
  text-align: left
}
.typography .center {
  text-align: center
}
.typography .right {
  text-align: right
}


/* IMAGES 
-------------------------------------------- */

.typography .captionImage { width: 100%; margin-top: 5px; }
.typography .captionImage img { margin: 0; }
.typography .captionImage.left {
  float: left;
  margin: 5px 30px 20px 0px;
}
.typography .captionImage.right{
  float: right;
  margin: 5px 0 20px 30px;
}
.typography .captionImage.left[style],
.typography .captionImage.right[style] {
  max-width: 50%; /* Overides core width to make responsive */
}
.typography .captionImage.left img,
.typography .captionImage.right img {
  float: none;
  max-width: none;
  width: 100%;
}
.typography .captionImage.left img {
  margin-right: -10px;
}
.typography .captionImage.right img {
  margin-left: -10px;
}
.typography .captionImage.right p {
  margin-left: -10px;
  text-align: left;
  margin-left: -10px;
}
.typography .captionImage.leftAlone{
float:none;
margin: 0 20px 20px 0px;
}
.typography .captionImage.center{
margin: 0 auto 20px;
}
.typography .captionImage p {
clear: both;
margin: 5px 0;
font-style: italic;
color: inherit;
}


/* BLOCKQUOTES
-------------------------------------------- */
.typography blockquote {
background: transparent url(../images/blockquote.png) no-repeat 0px 6px;
font-family: "FrutigerLTW01-45Light", "Raleway" Times, serif;
color: inherit;
display: block;
font-style: italic;
margin: 0 0 20px;
float: right;
text-indent: 30px;
width: 50%;
margin-left: 5%;
clear: both;
}
.typography blockquote p {
font-size: 17px;
line-height: 25px;
}
.typography pre {
background: inherit;
border: 1px solid inherit;
font-family: Courier, monospace;
margin: 0 0 20px 0;
padding: 15px;
clear: both;
}

/* ADDRESS
-------------------------------------------- */
address {
display: block;
margin-bottom: 20px;
}


/*  OVERWRITE BOOTSTRAP */
a {
color: inherit;
text-decoration: none;
background-color: transparent;
}
a:hover {
color: inherit;
/* text-decoration: underline; */
}
.scrollXContainer{
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
.scrollXContainer::-webkit-scrollbar {
opacity: 0; 
}

/* ADDRESS
-------------------------------------------- */
address {
  display: block;
  margin-bottom: 20px;
}


/* HEADER 
-------------------------------------------- */
.headerLogo{
  height: 90px;
  width: 100%;
  display: flex;
  align-items: center;
  padding:  8px;
}
.headerLogo img{
  width: 100%;
}
.connexionLogo{
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.connexionLogo img{
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}
.connexionBtn{
  appearance: none;
  outline: 0;
  background-color: var(--primary);
  border: 0;
  padding: 10px 15px;
  margin-top: 20px;
  color: var(--white);
  border-radius: 1px solid var(--white);
  border-radius: 3px;
  width: 100%;
  cursor: pointer;
  font-size: 18px;
  transition-duration: 0.25s;
  
  &:hover{
    background-color: var(--primary-light);
    border-radius: 1px solid var(--primary);
    color: var(--primary-dark);
  }
}
input.connexionField{
  display: block;
  appearance: none;
  outline: 0;
  border: 1px solid fade(white, 40%);
  background-color: fade(white, 20%);
  border-radius: 1px solid var(--primary);
  width: 100%;
  height: 44px;
  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block;
  text-align: center;
  font-size: 18px;
  
  color: white;
  
  transition-duration: 0.25s;
  font-weight: 300;
  
  &:hover{
    background-color: fade(white, 40%);
  }
  
  &:focus{
    background-color: white;
    width: 100%;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.03), 0 0 8px rgba(143, 143, 144, 0.4);
    color: var(--primary);
  }
}
/* MAIN 
-------------------------------------------- */
.main{
  padding: 50px 0;
}
#mainBlock{
  width: 100%;
  height: 100dvh;
}
/* HOMEPAGE 
-------------------------------------------- */
.galleryList {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

a.galleryCard {
  cursor: pointer;
  display: flex;
  width: 95dvw;
  height: 95dvw;
  border-radius: 6px;
  background-color: var(--white);
  padding: 6px;
  justify-content: space-between;
  flex-direction: column;
}

a.galleryCard  .Thumbnail {
  height: 70%;
  width: 100%;
  display: flex;
  align-items: center;
}

.Thumbnail img {
  width: 100%;
}

a.galleryCard .Title {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--primary);
  height: 30%;
  width: 100%;
}
a.galleryCard .Title h3 {
width: 100%;
}

.frontFull{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cardConnexion {
  width: 95dvw;
  height: 95dvw;
  background-color: white;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content:center;
  padding: 20px;
  gap: 40px;
  /* background: rgba(255, 255, 255, 0.26); */

  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(52, 138, 214, 0.1);
  backdrop-filter: blur(7.7px);
  -webkit-backdrop-filter: blur(7.7px);
  border: 1px solid rgba(255, 255, 255, 0.29);
}
.containThumbList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.containThumb.text-center{
  width: 95dvw;
  height: 95dvw;
  position: relative;
  border: 1px solid var(--primary-extralight);
}
a.linkDL {
  position: absolute;
  height: 44px;
  width: 44px;
  top: 10px;
  background-color: white;
  right: 10px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.containThumb a.linkDL .glyphicon{
  font-size: 24px;
  color: var(--primary);
}
.lb-nav a.lb-next, .lb-nav a.lb-prev{
  background-size: 44px;
  opacity: 1;
  display: flex;
  align-items: center;
  background: none;
}
.lb-nav a.lb-prev{
 justify-content: start;
 padding-left: 8px;
}
.lb-nav a.lb-next{
 justify-content: end;
 padding-right: 8px;
}
.lb-nav a.lb-next .btnLightbox, .lb-nav a.lb-prev .btnLightbox{
  height: 44px;
  width: 44px;
  background-color: var(--primary-extralight);
  border-radius: 40px;
  font-size: 28px;
  line-height: 51px;
  text-align: center;
}
.lb-nav a.lb-prev .btnLightbox{
  padding-right: 4px;
}
.lb-nav a.lb-next .btnLightbox{
  padding-left: 4px;
}
.lb-data .lb-close{
  opacity: 0;
}
body.dologin .form-control{
  border: 1px solid var(--primary) !important;
}
@media only screen and (min-width: 1024px){
  .headerLogo{
    height: 80px;
    width: 200px;
    display: flex;
    align-items: center;
  }
  .headerLogo img{
    height: 100%;
    width: unset;
  }
  .galleryList {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 20px;
  }

  a.galleryCard {
    display: flex;
    width: 25dvw;
    height: 25dvw;
  }

  .cardConnexion {
    width: 40dvw;
    height: 40dvw;
  }

  .containThumb.text-center{
    width: 20dvw;
    height: 20dvw;
    transition: all ease 300ms;
  }

  .containThumb.text-center:hover{
    width: 22dvw;
    height: 22dvw;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
  }
  .containThumb.text-center:hover a.linkDL:hover {
    background-color: var(--primary);
   }
  .containThumb.text-center:hover a.linkDL:hover .glyphicon{
   color: var(--white);
  }
}