/*************************************************************
 * CSS for webpage created for Si Chézy M'Était Conte,
 * the history association of the town of Chézy-sur-Marne.
 * By Felicity FOSTER-CARTY MA/MPH, Archivist, Researcher, 
 * and member of the association.
 * foster.felicity@gmail.com
 */

 @font-face {
  font-family:'Marianne';
  src:url(../webfonts/Marianne-Bold.otf),
  url(../webfonts/Marianne-BoldItalic.otf),
  url(../webfonts/Marianne-ExtraBold.otf),
  url(../webfonts/Marianne-ExtraBoldItalic.otf),
  url(../webfonts/Marianne-Light.otf),
  url(../webfonts/Marianne-LightItalic.otf),
  url(../webfonts/Marianne-Medium.otf),
  url(../webfonts/Marianne-MediumItalic.otf),
  url(../webfonts/Marianne-Regular.otf),
  url(../webfonts/Marianne-RegularItalic.otf),
  url(../webfonts/Marianne-Thin.otf),
  url(../webfonts/Marianne-ThinItalic.otf);
}

@-ms-viewport {
		width: device-width;
	}

:root {
    --sichezy-white:#fff;
    --sichezy-black:#000;
    --sichezy-grey:#808080;
    --sichezy-blue:#1c377c;
    --sichezy-lightblue:#3F80CA;
    --sichezy-gold:#f6cd13;
    --sichezy-lightgold:#AE9A7D;
    --chezytour-green:#1C8B03;
}


body {
  background-color: var(--sichezy-white);
  font-family: 'Marianne', Arial, Helvetica, sans-serif;
  margin: 0px;
}

h1, p {
  margin: 0px;
}

h1 {
  font-size: larger;
  color: var(--sichezy-blue);
  width: inherit;
}

p {
  font-size: small;
}

td, tr {
  font-size: smaller;
}

* {  /**/
  box-sizing: border-box;
}

a {
  color: #000;
}

a:visited {
  color: #000;
}



.hidden {
  display: none;
}


tr{
  width: 100%;
  background-color: #d3d3d3;
}
tr:nth-child(2n) {
  background-color: #f9f9f9 ;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  margin: 5px;
  padding: 5px;
}

.table-head {
  display: flex;
  		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
  flex-direction: row;
}


/* BUTTONS */
.button {
  background-color: var(--sichezy-blue);   
  border-radius: 10px;
  font-weight: bold;
  color: var(--sichezy-white);
  padding: 10px;
  text-align: center;
  text-decoration: none;
  margin: 0px 2.5px;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  color: var(--sichezy-black);
  background-color: var(--sichezy-gold);  
}

.button2 {
  background-color: var(--sichezy-white);   
  border-radius: 10px;
  border-style: solid;
  border-color: var(--sichezy-blue);
  font-weight: bold;
  color: var(--sichezy-blue);
  padding: 10px;
  text-align: center;
  text-decoration: none;
  margin: 0px 2.5px;
  cursor: pointer;
  width: 100%;
}

.button2:hover {
  border-color: var(--sichezy-gold);
}

.button3 {
  background-color: var(--sichezy-gold);
  border-radius: 10px;
  font-weight: bold;
  color: var(--sichezy-blue);
  padding: 10px;
  text-align: center;
  text-decoration: none;
  margin: 0px 2.5px;
  cursor: pointer;
  width: 100%;
}

.button3:hover {
  color: var(--sichezy-gold);
  background-color: var(--sichezy-blue);
}

.button4 {
  background-color: var(--sichezy-white);   
  border-radius: 10px;
  border-style: solid;
  border-color: var(--sichezy-blue);
  font-weight: bold;
  color: var(--sichezy-blue);
  padding: 10px;
  text-align: center;
  text-decoration: none;
  margin: 0px 2.5px;
  cursor: pointer;
  width: 100%;
}

.button4:hover {
  border-color: var(--chezytour-green);
  background-color: var(--chezytour-green); 
  color: var(--sichezy-white);
}

.buttonCT {
  background-color: var(--chezytour-green); 
  border-radius: 10px;
  border-style: solid;
  font-weight: bold;
  color: var(--sichezy-white);
  padding: 10px;
  text-align: center;
  text-decoration: none;
  margin: 0px 2.5px;
  cursor: pointer;
  width: 100%;
}

.buttonCT:hover {
  border-color: var(--chezytour-gold);
  color: var(--sichezy-gold);
}





/* Style the header */

header {
  background-color: var(--sichezy-white);
  text-align: center;
  margin: 0px;
}

header a {
  text-decoration: none;
  padding-left: 7px;
  vertical-align: middle;
}

.header-menu-items {
  width: -moz-available;
  width: inherit;
  display: flex;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
  justify-content: space-between;
  margin-top: auto;
  margin-bottom: auto;
  flex-wrap: none;
}

.header-menu-items a {
  font-size: small;
  font-weight: bold;
}

.header-menu-items a.button {
  color: var(--sichezy-white);
}

.header-menu-items a.button2 {
  color: var(--sichezy-blue);
}

.header-menu-items a.button3 {
  color: var(--sichezy-blue);
}

.header-menu-items a.buttonCT {
  color: var(--sichezy-gold);
}

.header-menu-buttons {
  width: inherit;
  margin: 0px;
  padding: 0px;
}

.header-menu-tabs {
  display: flex;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
  flex-direction: row;
  justify-content: space-evenly;
  text-align: center;
  margin: 0px;
}

/* make menu tabs sticky */
#navbar {
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: var(--sichezy-white);
  border-bottom: solid var(--sichezy-blue);
  z-index: 100000;
}

#navbar a {
  display: flex;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
  flex-direction: row;
  justify-content: space-evenly;
  text-align: center;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  padding: 10px 20px;
  width: 100%;
  color: var(--sichezy-black);
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  font-weight: bold;
  border-top: 10px solid var(--sichezy-blue);
}

#navbar a:visited {
  color: var(--sichezy-black)
}



#scmeclogo img {
  width: 80px;
}

#si-chezy-title {
  padding-left: 10px; 
  text-align: left;
}





#burger-menu {
  display: none;
  padding-left: 7px;
  padding-right: 7px;
  height: 34px;
  width: 34px;
  cursor:pointer;
  right: 0;
  position: absolute;
  margin: 10px;
}

#burger-menu.fa::before {
  color: #000;
}


/***

side menu nav bar
*/

.grayout {
  display: none;
  width: 100%;
  height: 200%;
  background-color: black;
  opacity: 50%;
  z-index: 70000;
  position: absolute;
  top: 0;
  left: 0;
}

.menu-loggedin {
  color: whitesmoke;
  position: absolute;
  top: 0;
  left: 32px;
}

#sidnav-menu-login-button {
  width: 30%;
  color: whitesmoke;
  padding: 5px;
}

.HUM-access-menu-login {
  display:flex;
  flex-direction:row;
}

#menu-lock-color {
  color: #009900;
}

.sidenav h1 {
  color: whitesmoke;
  padding: 0px 0px 0px 32px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  z-index: 80000;
}
.sidenav a {
  padding: 0px;
  font-size: 12pt;
  text-decoration: none;
  font-size: 16px;
  color: var(--sichezy-white);
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  font-size: 36px;
  margin-left: 50px;
  text-align: left;
}


.container {
  position: relative;
  max-width: 100vw;
  object-fit: cover;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}


#banner-title {
  font-size: xxx-large;
  top:40%;
  color:var(--sichezy-white);
}


#banner-subtitle {
  color:var(--sichezy-white);
}





































/* Main */

	#banner {
		
		background-image: url("../assets/sichezy/seal-banner.jpg");
		background-attachment: local;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
	}

	.overlay {
		background-color: rgba(0,0,0,0.5); /* Black background with opacity */
		z-index: 0; /* Specify a stack order in case you're using a different order for other elements */
		position: relative;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
    padding: 150px 0px;
	}
	

		#main > header h2 {
			font-size: 1.75em;
			margin: 0 0 0.5em 0;
		}

		#main > header p {
			color: inherit;
			letter-spacing: 0.225em;
			text-transform: uppercase;
			top: 0;
		}

			#main > header p a {
				color: inherit;
			}

		

	body.is-mobile #main > header {
		background-attachment: scroll;
	}

































#banner h2 {
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
			display: inline-block;
			font-size: 1.75em;
			opacity: 1;
			padding: 0.35em 1em;
			position: relative;
			z-index: 1;
      margin: 10px 10px 50px 10px;
		}

			#banner h2:before, #banner h2:after {
				-moz-transition: width 0.85s ease;
				-webkit-transition: width 0.85s ease;
				-ms-transition: width 0.85s ease;
				transition: width 0.85s ease;
				-moz-transition-delay: 0.25s;
				-webkit-transition-delay: 0.25s;
				-ms-transition-delay: 0.25s;
				transition-delay: 0.25s;
				background: #fff;
				content: '';
				display: block;
				height: 2px;
				position: absolute;
				width: 100%;
			}

			#banner h2:before {
				top: 0;
				left: 0;
			}

			#banner h2:after {
				bottom: 0;
				right: 0;
			}

		#banner p {
			letter-spacing: 0.225em;
			text-transform: uppercase;
		}

			#banner p a {
				color: inherit;
			}

		#banner .more {
			-moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
			-webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
			-ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
			transition: transform 0.75s ease, opacity 0.75s ease;
			-moz-transition-delay: 3.5s;
			-webkit-transition-delay: 3.5s;
			-ms-transition-delay: 3.5s;
			transition-delay: 3.5s;
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			border: none;
			bottom: 0;
			color: var(--sichezy-white);
			font-size: 0.8em;
			height: 8.5em;
			left: 50%;
			letter-spacing: 0.225em;
			margin-left: -8.5em;
			opacity: 1;
			outline: 0;
			padding-left: 0.225em;
			position: absolute;
			text-align: center;
			text-transform: uppercase;
			width: 16em;
			z-index: 1;
		}

			#banner .more:after {
				background-image: url("../assets/functional/arrow.svg");
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				bottom: 4em;
				content: '';
				display: block;
				height: 1.5em;
				left: 50%;
				margin: 0 0 0 -0.75em;
				position: absolute;
				width: 1.5em;
			}

		#banner:after {
			pointer-events: none;
			-moz-transition: opacity 3s ease-in-out;
			-webkit-transition: opacity 3s ease-in-out;
			-ms-transition: opacity 3s ease-in-out;
			transition: opacity 3s ease-in-out;
			-moz-transition-delay: 1.25s;
			-webkit-transition-delay: 1.25s;
			-ms-transition-delay: 1.25s;
			transition-delay: 1.25s;
			content: '';
			background: #1d242a;
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
		}



#one {
    padding: 10px;
}

#two, 
#map-contact {
  background-color: var(--sichezy-blue);
  color: var(--sichezy-white);
  padding: 50px;
}

#four {
  background-color: var(--sichezy-blue);
  color: var(--sichezy-white);
  padding: 50px;
}

#adresssblock {
  padding: 20px;
}

.image-box {
  padding: 10px;
  text-align: center;
}

.image-box img {
  width: 25vw;
}

#two h2,
#three h2,
#four h2,
#four p {
  text-align: center;
}

.conseil {
  padding:25px;
  margin:25px;
  background-color: var(--sichezy-blue);   
  border-radius: 10px;
  border-style: solid;
  font-weight: bold;
  color: var(--sichezy-white);
  text-align: center;
}

.conseil-alt {
  background-color: var(--sichezy-lightblue);
  width: 50%;
  margin-top: 0px;
}

.membres-bureau {
  background-color: var(--sichezy-lightgold);
  margin-top: 0px;
}

.iframe-container div {
  padding-top:0px;

}













/* Container for flexboxes */
section {
  
  display: flex;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
  padding: 0px 20px;
}



/* Style the footer */
footer {
  background-color: var(--sichezy-blue);
  padding: 0px;
  text-align: center;
  color: white;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 50000;
}
footer a {
  text-decoration: none;
  color: white;
}
footer a:visited {
  color: white;
}


#footer,
#copy-year {
  margin: 10px 0px;
  display: flex;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  font-size: 12pt;
}


#admin-footer-icon {
  opacity: 20%;
  position: fixed;
  left: 0;
  bottom: 0;
}

#admin-footer-icon a {
  padding: 5px;
  font-size: x-large;
}



#map-contact {
  margin: 0px 0px 0px 0px;
  display: flex;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  font-size: 12pt;
}



/* CTA */


	#cta .inner {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex; 
		display: flex;
		max-width: 45em;
	}

		#cta .inner header {
			-moz-order: 1;
			-webkit-order: 1;
			-ms-order: 1;
			order: 1;
			padding-right: 3em;
			width: 70%;
		}

			#cta .inner header p {
				color: inherit;
			}

		#cta .inner .actions {
			-moz-order: 2;
			-webkit-order: 2;
			-ms-order: 2;
			order: 2;
			width: 30%;
		}
		
		.iframe-container {
			position: relative;
			overflow: hidden;
			width: 500px;
			height: 50%;
			padding-top: 50%;
			
		}

		.responsive-iframe {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}

		

		#calender-div {
			display: flex;
      		display: -moz-flex;
		display: -webkit-flex;
    
		display: -ms-flex;
    display: -ms-flexbox;  
			flex-direction: row;
		}












/*******************************

Loading spinner

**/
.overlay-spinner {
background-color: #000a;
width: 100%;
height: 100%;
position: fixed;
margin: 0;
z-index: 9999999;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: block;
}

.lds-roller {
display: inline-block;
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
left: 50%;
top: 50%;
z-index: 999999999;
}
.lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 40px 40px;
}
.lds-roller div:after {
content: " ";
display: block;
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #fff;
margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
top: 63px;
left: 63px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
top: 68px;
left: 56px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
top: 71px;
left: 48px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
top: 72px;
left: 40px;
}
.lds-roller div:nth-child(5) {
animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
top: 71px;
left: 32px;
}
.lds-roller div:nth-child(6) {
animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
top: 68px;
left: 24px;
}
.lds-roller div:nth-child(7) {
animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
top: 63px;
left: 17px;
}
.lds-roller div:nth-child(8) {
animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
top: 56px;
left: 12px;
}
@keyframes lds-roller {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}



/*********************************************
*   collapsible panels
*
*/

button.collapsible::after {
content: '\002B';
color: #444;;
font-weight: bold;
font-size: large;
float: right;
margin-left: 5px;
}

button.collapsible.active::after {
content: "\2212";
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
display: flex;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex; 
flex-direction: row;
justify-content: space-between;
outline: #444;
outline-style: solid;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active-collapsible, .collapsible:hover {
background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}











.archive-thumb {
  width:150px;
  height:150px;
  padding: 10px;
}

.detail-view {
  padding: 10px;
}

.detail-image {
  width:auto;
  height: 60%;
}


#archives-header {
  background-image: url(../assets/sichezy/Old-books.jpg);
  background-size: cover;
  text-align: center;
  color: var(--sichezy-white);
}



#mediatheque-header {
  background-image: url(../assets/sichezy/abbaye-de-saint-pierre-1910.jpg);
  background-size: cover;
  text-align: center;
  color: var(--sichezy-black);
}

/******************************************
* TABS for mediatheque
*  *******************************************/

 /* Style the tab */
 .tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin-top: 10px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width: 50%;
  border: 1px solid var(--sichezy-blue);
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #191970;
  color:#fff;

}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
} 



.breadcrumb {
  width: 100%;
}

.breadcrumb p {
  margin-top:-2px;
}







/* ************************************
*
*   CHEZY TOUR
*
*****************************************/

.chezytour {
  background-color: var(--chezytour-green);
  color: var(--sichezy-white);
  text-align: center;
}


#sens-visite a {
  color: var(--sichezy-white);
  line-height: 1.5;
}



























#login-page {
  background-color: var(--sichezy-blue);
  color: var(--sichezy-white);
  display: flex;
  		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
  flex-direction: column;
  text-align: center;
  font-size: large;
}

#login-page.login-container {
  padding: 25px;
}

#login-page a {
  color: var(--sichezy-white);
}

#frog-icon img {
  width: 200px;
}


  #login-page input[type=text], 
  #login-page input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 5px;
  }

  #login-page button {
    background-color: var(--sichezy-lightblue);
    color: var(--sichezy-white);
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 5px;
  }

  #login-page button:hover {
    opacity: 0.8;
  }

  #login-page.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
  }

  #user-logged-in {
    display: flex;
    		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
    flex-direction: row-reverse;
  }





#the-canvas {
  border: 1px solid black;
  direction: ltr;
  width:100%;
}




.form-inline > div:nth-child(4){
  padding: 10px 0px;
}





  body > section:nth-child(5) {
    display: flex;
    		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  #active-members,
  #new-members,
  #inactive-members {
    width:33%;
  }

  #new-members {
    border-right: black 2px solid;
    border-left: black 2px solid;
  }


#id_post_title,
#id_post_body,
#id_burdoc_mtgtype,
#id_burdoc_nom,
#id_burdoc_file {
  width:100%;
  padding:5px;
}

#id_post_img,
#id_post_attachment {
  padding:20px;
}

#editPostForm.form-inline > div:nth-child(8) {
  display:none;
}

#editPostForm.form-inline > div:nth-child(3) {
  padding:10px 0px;
}

.half-width {
  width: 49%;
}


.content > section:nth-child(1) > a:nth-child(1) {
  color: var(--sichezy-black) !important;
}


#two > div:nth-child(2) {
  flex-direction: row;
}


.flexrow {
  display:flex;
  flex-direction: row;
}

.flexcol {
  display:flex;
  flex-direction: column;
}



#lang-flag {
  width:65px;
  padding:2px;
  float: right;
}


#welcome,
#map_list {
  flex-direction: row;
}

#footplus {
  height:100px;
}

.post-preview {
  width: 24%;
}

.actu-radio-choices {
  flex-direction:row;
}

#frog-icon {
  display:none;
} 

#frog-icon-sm {
  text-align:center;
  display:block;
  margin-left: 10px;
} 
#frog-icon-sm img {
  width:75px;
} 
#user-logged-in {
  flex-direction: row-reverse;
  font-size:normal;
} 
#login-page button {
  padding: 8px 20px;
} 
section {
  text-align:left;
  flex-direction:column;
  padding: 10px 0;
}

.adh-billet-btns {
  display:flex;
  flex-direction:row;
}


.post-title {
  margin:0;
  padding-right: 10px;
  font-size: initial;
}

.post-preview-home img {
  height: 15vw;
}

.post-preview-home {
  border: var(--sichezy-blue) 5px solid;
  border-radius: 20px;
}

#mobile-email {
  display:none;
  margin-right: 50px;
  margin-top: 10px;
  height: 34px;
  padding: 7px;
}




/* For the smartphones  */
@media screen and (max-width: 460px) { 

  .sidenav a {
    padding: 5px 0px;
    margin: 5px 0px;
  }

#one > div:nth-child(1) {
  flex-direction: column-reverse;
}

  
.post-preview-home img {
  height: 30vw;
}

  
.detail-image {
  width:60%;
  height: auto;
}


  .post-title {
    font-size: medium;
  }

  #login-page a {
    color:#818181;
  }
  #mediatheque-header {
    color: var(--sichezy-white);
  }
  .content > section:nth-child(1) > a:nth-child(1) {
    font-size: small;
  }

  
  .half-width {
    width: 100%;
  }
  
  .adh-billet-btns {
    display:flex;
    flex-direction:column;
  }

  
  #user-logged-in {
    flex-direction: column;
    text-align: center;
  }
  
  #frog-icon-sm {
    text-align: center;
  }
  


  .collapsible {
    flex-direction: column-reverse;
    text-align: right;
    display: flex;
    		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
  }
  img.archive-thumb {
    width: 100%;
    height: 100%;
  }

  .actu-radio-choices {
    flex-direction:column;
  }
    
  
  .post-preview {
    width: 100%;
    border: solid 5px var(--sichezy-blue);
    border-radius: 5px;
    padding: 5px;
  }

  
  .navigation{
    max-height: auto;
  }
  
  #navbar {
    display: none;
  }

  .close-icon i{
      font-size:30px;
  }

  .bar-icon{
      font-size: 30px;
  }

  .brand{
      font-size:20px;
  }

  #burger-menu,
  #mobile-email  {
    display: block;
  }

  #acceuil,
  #actualites,
  #archives,
  #mediatheque,
  #librarie,
  #adherants,
  .header-menu-items {
    display: none;
  }

  #active-members,
  #new-members,
  #inactive-members {
    width:100%;
  }

  #new-members {
    border-right:none;
    border-left:none;
  }
  
  .image-box img {
    width:100%;
  }

  #two > div:nth-child(2) {
    flex-direction: column;
  }

  .flexrow {
    flex-direction: column;
  }
  .iframe-container {
    width: 85vw;
    height: 85vw;
  }


  
/* Style the footer */

#footer,
#copy-year {
  flex-direction: column;
}

#footer,
#copy-year p {
  font-size: x-small;
}


#admin-footer-icon a {
  padding: 5px;
  font-size: large;
}


#version-numerisee button.collapsible.button {
  flex-direction: row;
}



}

/* 
@media screen and (max-width: 736px) {

  

  #banner {
    height: auto;
    min-height: 0;
    background-size: inherit;
  }

    #banner h2 {
      font-size: 1.25em;
    }

    #banner br {
      display: none;
    }

    #banner .more {
      display: none;
    }

    .overlay {
      padding: 60px 0px;
    }

} */




/* for tablets*/
@media screen and (min-width: 461px) and (max-width: 770px) /*and (max-height: 450px)*/ {

  #one > div:nth-child(1) {
    flex-direction: column-reverse;
  }


  .post-preview-home img {
    height: 30vw;
  }

    

#version-numerisee button.collapsible.button {
  flex-direction: row;
}



.post-preview {
    width: 45%;
}
    
.detail-image {
  width:60%;
  height: auto;
}



  #welcome,
  #map_list{
    flex-direction: column;
  }
  
  #navbar {
    z-index: 6000;
  }
  
  .header-menu-buttons {
    width: inherit;
    margin: 10px;
    padding: 10px;
  }

  
  #main > header {
    padding: 5em 3em 3em 3em ;
  }

  #main > header h2 {
    font-size: 1.25em;
    margin: 0 0 1em 0;
  }
  
  
  header a {
    padding-left: 5px;
  }
 
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }


  header h1 {
    padding: 0 20px 0 20px;
  }

  #navbar {
    display: none;
  }

  #burger-menu,
  #mobile-email  {
    display: block;
  }

  nav {
    width: 100%;
  }


  h1.headeralign {
    font-size: x-small;
  }

  .sidenav {
    
    width: 0%;
    
  }
  .sidenav a {
    font-size: 20px;
    text-align: center;
    width: 80%;
    padding: 4px 0px;
  }


  #acceuil,
  #actualites,
  #archives,
  #mediatheque,
  #librarie,
  #adherants,
  .header-menu-items {
    display: none;
  }

  #footer,
  #copy-year {
    flex-direction: column;
  }
  
  #active-members,
  #new-members,
  #inactive-members {
    width:100%;
  }

  #new-members {
    border-right:none;
    border-left:none;
  }

  #one > div:nth-child(2) > img:nth-child(1) {
    width:100%;
  }

  
  #two > div:nth-child(2) {
    flex-direction: column;
  }

  div.image-box:nth-child(1) > img:nth-child(1),
  #three > div:nth-child(2) > div:nth-child(2) > img:nth-child(1),
  #five > div:nth-child(2) > img:nth-child(1) {
    width:100%;
  }


  .flexrow {
    flex-direction: column;
  }

  
  .collapsible {
    flex-direction: row;
    text-align: right;
    display: flex;
    		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;

    
  }
  img.archive-thumb {
    width: 100%;
    height: 100%;
  }


 .responsive-iframe {
    position: unset;
    width: 100%;
    height: 100%;
		}

    .iframe-container {
			padding-top: 0px;
      width: 100%;
		}


			#cta .inner {
				display: block;
				text-align: center;
			}

				#cta .inner header {
					padding-right: 0;
					width: 100%;
				}

				#cta .inner .actions {
					margin-left: auto;
					margin-right: auto;
					max-width: 20em;
					width: 100%;
				}


        #cta .inner .actions {
				max-width: none;
			}

			.iframe-container {
				height: 100%;
				width: auto;
			}
	
  .image-box img {
    width:60%;
  }

  #two > div:nth-child(2) {
    flex-direction: column;
  }

  .flexrow {
    flex-direction: column;
  }

    }


/* For the tablets was min-width: 460px */
@media screen and (min-width: 771px) and (max-width: 770px)  {

  #burger-menu {
    display: none;
  }

  #navbar {
    z-index: 6000;
  }

  .header-menu-buttons {
    width: inherit;
    margin: 10px;
    padding: 10px;
  }

  #main > header {
    padding: 10em 3em 8em 3em ;
  }
 
  html{
      font-size: 14px;
  }

  h1{
      font-size: 16px;
  }

  #burger-menu {
    display: block;
  }

  #acceuil,
  #actualites,
  #archives,
  #mediatheque,
  #librarie,
  #adherants,
  .header-menu-items {
    display: none;
  }


	#cta > div:nth-child(1) > header:nth-child(1) {
				background-color: rgba(0,0,0,0.8);
			}
			#calender-div {
				flex-direction: column;
			}  


}