site-gypsy/themes/default/static/css/main.css

/* Fonts */
@font-face {
	font-family: 'Annie Use Your Telescope';
	src: url('../fonts/AnnieUseYourTelescope.ttf');
}
@font-face {
	font-family: 'Neucha';
	src: url('../fonts/neucha.otf');
}

body {
	font-family: 'neucha', cursive;
	word-wrap: break-word;
	line-height: 1.9;
	letter-spacing: 1px;
	  text-align: justify;
  	text-justify: inter-word;
}

#header, h1, h2 {
	font-family: 'Annie Use Your Telescope', cursive;
	letter-spacing: 2px;
	text-align:center;
}

h1 {
	font-size: 50px;
}
h2 {
	font-size:35px;
}

#header h1 {
	font-size: 76px;
	font-weight: 300;
}

/* Menu */

@media (max-width: 800px) {
	nav {
		position:relative;
	}
}
@media (min-width: 800px) {
	nav {
		position:fixed;
	}
}

nav {
	background-color: rgba(1, 1, 1, 0.7);
	color: white;
	z-index: 999;
	width:100%;
	padding:0;
	top: 0;
}
nav > ul {
	display: inline-block;
	margin: 0 auto;
}
nav > ul > li {
	display: inline-block;
	padding: 0 20px;
	min-height: 86px;
	font-size:1.5em;
}
nav > ul > li a {
	display: block;
	height:100%;
}

nav > ul > li a > span {
	/* This center vertically text in menu */
	display: block;
	padding-top: 30px;
}
li > ul {
	display: none;
}
nav li {
	margin: auto;
}
nav li:hover {
	/*background-color: rgba(1,1,1,0.7);*/
}

nav img {
	margin: 4px auto;
}

nav li.submenu:hover ul {
	display: block;
	position: absolute;
	line-height: 40px;
	margin-left: -20px;
	padding: 0;
	background-color: rgba(1, 1, 1, 0.7);
}

.submenu > div {
	height:100%;
}
.submenu a {
	display: block;
	height: 100%;
	width: 100%;
	padding: 0;
}
.submenu ul li {
	padding: 0 10px;
}

/* General */

html, body {
	font-weight: 300;
	width:100%;
	min-height:100%;
	margin:0;
}

/* Links */
nav a, footer a {
	color: white;
	cursor:pointer;
}
nav a:hover, footer a:hover {
	color: #fcd088;
}
a.fa {
	text-decoration: none;
}

/* Header */

#header {
	color: white;
	width:100%;
	height:auto;
	position: relative;
}
#header img {
	width:100%;
}
#header h1 {
	width:80%;
	margin: auto;
	text-transform: uppercase;
	background-color: rgba(0,0,0,0.3);
}
#header p {
	font-size: 24px;
}
.padding {
	height:90px;
}

/*
#header img::after {
  background-color: rgba(37, 46, 53, 0.3);
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

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

#header_info {
	position: absolute;
	bottom:0;
	top: auto;
	width:100%;
	text-align:center;
}

/* flex general */
.flex_container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
        /*align-items: stretch;*/
}

/* Sections */
main {
	min-height:100%;
}
section.section_odd {
	background-color: #ffffff;
}
section.section_even {
	background-color: #dddddd;
}

section {
	padding:0 10%;
}
section h2 {
	text-align: center;
}

p.center {
	text-align: center;
}



/* Video */

#video_wrap {
	clear: both;
	position: relative;
	padding: 0;
	width: 100%;
	padding-top: 56.25%;
}
#video_wrap iframe {
	height: 100%;
	width: 100%;
	position: absolute;
	top:0;
	left:0;
}

/* Footer */
footer {
	clear: both;
	margin-top: 20px;
	padding-top: 10px;
	background-color: #202529;
	color: white;
}

footer ul {
	margin:0;
}

ul {
	list-style-type: none;
}

footer li {
	padding: 0 10px;
}

footer img {
	height:3em;
}
.point-icon {
	color: #e82020;
}
.social-icon {
	background-color: #eaab1c;
	display:inline-block;
	height:30px;
	width:30px;
	text-align:center;
	vertical-align:middle;
}
.social-icon span {
	margin-top:5px;
}

/* Galerie */
.galerie a {
	display: inline-block;

}

.galerie img {
	max-height:400px;
	max-width:400px;
}

.galerie {
	padding:0;
}

.galerie li p {
	text-align:center;
}

.galerie > div {
	position: relative;
}
.galerie > dev > img {
	height:100%;
}
.galerie > div[title]:hover:after {
  content: attr(title);
  padding: 5px;
  color: #fff;
  position: absolute;
  left: 0;
  height:calc(100% - 10px);
  width:calc(100% - 10px);
  z-index: 2;
  background: rgba(0,0,0,0.5);
  text-align: center;
  font-height:2em;
}

#programmation p {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
#programmation a {
	position: relative;
	display:block;
	margin:5px;
	padding:0;
	#width:45%;
	height:400px;
	width:400px;
	overflow:hidden;

}
#programmation a img {
	padding:0;
	object-fit: cover;
	min-width: 100%;
	max-height: 100%;
	position:absolute;
	bottom:0;
}
#programmation a:after {
	display: block;
	content: attr(title);	
  padding: 5px;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  height:10%;
  width:calc(100% - 10px);
  z-index: 2;
  background: rgba(0,0,0,0.6);
  text-align: center;
  font-size:2em;
}


/* Group description page */

#group img:first-of-type {
	float: left;
	margin: 0 20px 20px 0;
	height: 400px;
	width:400px;
}

/* miniatures */
.mini img {
	max-height:200px;
	max-width: 200px;
	object-fit: contain;
}