/* GLOBAL */

body {-webkit-text-size-adjust: 100%;}
p {max-height: 999999px;}

* {box-sizing: border-box;}

body {
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: Lato,sans-serif;
	font-size: 112.5%;
	color: #000;
	line-height: 1.4;
	letter-spacing: 1px;
	font-weight: 300;
}

div, span, p, img, object, h1 {
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
}

a {text-decoration: none !important; outline: none !important; color: rgba(190,81,80,1);}
.bold, strong {font-weight: 400 !important;}

ul {list-style-type: circle; padding: 0 0 0 30px; margin: 0;}
li {margin: 0 0 5px 0; padding: 0 0 0 5px;}

blockquote {
	background: url(../../files/touaibi/layout/quote.png) top left no-repeat;
	background-size: 26px;
	min-height: 26px;
	padding: 0 0 0 50px;
	margin: 10px 0;
}

.invisible {display: none; visibility: hidden;}

/* STRUCTURE */

.contenu {width: 940px; margin: 60px auto; padding: 0 40px;}

.contenu img {max-width: 100% !important; height: auto !important;}
.contenu p {text-align: justify;}

.box-bg-gris {padding: 30px 40px; background: #f2f2f2; text-align: justify;}
.box-bg-rouge {padding: 30px 40px; background: rgba(181,58,56,0.1); text-align: justify;}

.btn-retour {margin-top: 40px;}
.btn-retour a {color: #000; display: inline; padding: 10px 20px; background: #f2f2f2;}
.btn-retour a:hover {background: #e2e2e2;}

.vid-loc {width: 100%; margin: 30px auto; text-align: center;}

/* REDIRECTION */

.red-img-L, .red-img-M, .red-img-R {display: inline-block; vertical-align: top;}
.red-img-L {width: 32.996%; margin-right: 0.5%;}
.red-img-M {width: 32.996%;}
.red-img-R {width: 32.996%; margin-left: 0.5%;}
.red-img-L img, .red-img-M img, .red-img-R img {max-width: 100%; display: block;}

.red-box {width: 100%; margin: 40px auto 80px auto; text-align: center;}
.red-el {display: inline-block; width: 27%; margin: 0 3%; vertical-align: top;}

.red-nt img {width: 90px; max-width: 100%; margin-bottom: 30px;}
.red-ph img {width: 90px; max-width: 100%; margin-bottom: 30px;}
.red-sa img {width: 90px; max-width: 100%; margin-bottom: 30px;}

.red-titre {font-weight: 400; margin-bottom: 15px;}
.red-txt {margin-bottom: 30px; font-size: 0.9em;}
.red-lien a {color: #000; padding: 8px 20px 10px 20px; background: #f2f2f2;}
.red-lien a:hover {background: #e2e2e2;}

/* FOOTER */

#footer {width: 940px; margin: 80px auto 30px auto; padding: 0px 40px; text-align: center;}
#footer hr {outline: none; border: 0; height: 1px; background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));}
#footer div {padding: 10px 0 0 0; font-size: 0.7em;}
#footer div img {vertical-align: middle; width: 12px;}

/* HEADER */

#header {width: 940px; margin: 20px auto 40px auto; padding: 0 40px;}

#logo {display: inline-block; vertical-align: middle; width: 680px;}
#logo a {color: #000 !important; text-decoration: none !important; outline: none !important;}
#logo-img {display: inline-block; vertical-align: middle; width: 76px;}
#logo-img img {width: 56px; display: block; vertical-align: middle;}
#logo-txt {display: inline-block; vertical-align: middle; width: 604px; line-height: 1.3;}

#menu {display: inline-block; vertical-align: middle; width: 180px;}
#lng {display: inline-block; vertical-align: middle; width: 126px; text-align: right;}
.lng-active,
.lng-switch {margin-left: 10px; padding-bottom: 2px; font-size: 0.9em;}
.lng-switch {color: #000 !important; text-decoration: none !important; outline: none !important;}
.lng-active {border-bottom: 1px solid #000;}
#menu-icn {display: inline-block; vertical-align: middle; width: 24px; margin-left: 30px; text-align: right; cursor: pointer;}
#menu-icn div {
	width: 24px;
	text-align: right;
	height: 1px;
	background-color: #000;
	margin: 6px 0;	
}

/* NAVIGATION */

.nav-overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(181,58,56,0.95);
  overflow-x: hidden;
  transition: 0.5s;
}

.nav-content {
  position: relative;
  width: 940px;
  padding: 0;
  margin: 0 auto 20px auto;
  top: 10%;
  text-align: center;
}

.nav-overlay a {
  display: block;
  padding-bottom: 4px;
  font-size: 1.7em;
  text-decoration: none;
  color: rgba(255,255,255,0.8);
  transition: 0.3s;
}

.nav-close {
  position: absolute;
  top: 10px;
  right: 60px;
  cursor: pointer;
  font-size: 3em;
  color: rgba(255,255,255,0.8);
  display: block;
  transition: 0.3s;
}

.nav-overlay a:hover,
.nav-close:hover,
.nav-overlay a:focus,
.nav-close:focus {color: rgba(255,255,255,1);}

/* ACCUEIL */

.accueil-L, .accueil-R {display: inline-block; width: 50%; vertical-align: top;}
.accueil-L img, .accueil-R img {max-width: 100%; display: block;}

/* PORTFOLIO */

.so_galeries {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.so_galeries_vignette {position: relative;}
.so_galeries_vignette img {display: block; max-width: 100%;}

.so_galeries_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(181,58,56,0.95);
}

.so_galeries_vignette:hover .so_galeries_overlay {opacity: 1;}

.so_galeries_titre {
  color: #fff;
  font-size: 1.7em;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.so_photos_header {width: 940px; margin: 60px auto; padding: 0 40px;}
.so_photos_titre {padding-bottom: 30px; font-size: 2.2em; line-height: 1.3; text-align: center;}
.so_photos_desc {text-align: justify;}
.so_photos_retour {margin-top: 25px;}
.so_photos_retour a {display: block; background-image: url('../../files/touaibi/layout/icn-galeries.png'); background-position: left center; background-repeat: no-repeat; background-size: 16px; min-height: 16px; padding-left: 26px; font-size: 0.8em; text-transform: uppercase; color: #000;}
.so_photos_bloc {
	break-inside: avoid;
	backface-visibility: hidden;
	column-count: 2;
	column-gap: 10px;
}
.so_photos_box img {cursor: pointer; display: block; width: 100% !important; height: auto !important; padding-bottom: 10px;}
.so_photos_leg_titre {padding-bottom: 15px; margin-bottom: 15px; font-weight: 400; border-bottom: 1px solid #444;}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999;
}

.modal-window {
	position: relative;
	background-color: #fff;
	width: 80%;
	max-width: 480px;
	margin: 5% auto;
	padding: 30px 60px 30px 30px;
}

.close {
	position: absolute;
	top: 10px;
	right: 10px;
	color: rgba(0,0,0,1);
	height: 40px;
	width: 40px;
	font-size: 40px;
	line-height: 40px;
	text-align: center;
}

.close:hover,
.close:focus {color: #000; cursor: pointer;}

.open {display: block;}

/* BLOG */

.mod_newslist {width: 940px; margin: 0 auto; padding: 0 40px;}

.blog-liste-box {display: inline-block; width: 47%; margin: 0 1.5%; margin-bottom: 60px; vertical-align: top;}
.blog-liste-img {padding-bottom: 20px;}
.blog-liste-img img {display: block; width: 100%; max-width: 100%;}
.blog-liste-meta {font-size: 0.9em; padding-bottom: 5px;}
.blog-liste-titre {font-size: 1.3em; padding-bottom: 20px; line-height: 1.2;}
.blog-liste-accroche {padding-bottom: 30px;}
.blog-liste-lire a {color: #000; display: inline; padding: 10px 20px; background: #f2f2f2;}
.blog-liste-lire a:hover {background: #e2e2e2;}

.mod_newsreader {width: 940px; margin: 60px auto; padding: 0 40px;}
.mod_newsreader img {max-width: 100% !important;}
.mod_newsreader p {text-align: justify;}

.blog-article-meta {font-size: 0.9em; padding-bottom: 5px;}
.blog-article-titre {font-size: 1.7em; padding-bottom: 20px; line-height: 1.2;}
.blog-article-retour {margin-top: 40px;}
.blog-article-retour a {color: #000; display: inline; padding: 10px 20px; background: #f2f2f2;}
.blog-article-retour a:hover {background: #e2e2e2;}

/* PAGINATION */

.pagination {margin: 0 auto 60px auto; text-align: center;}

.pagination-previous,
.pagination-next,
.pagination-el {display: inline-block; padding: 0 4px; margin-bottom: 4px; vertical-align: top; font-size: 1.1em;}

.pagination-previous a,
.pagination-next a,
.pagination-el a {color: #000;}
.pagination-el span {border-bottom: 1px solid #000; padding-bottom: 4px;}

/* CONTACT */

.ctact-intro {width: 60%; margin: 0 auto 40px auto;}

#f_ct {width: 60%; margin: 0 auto;}
#f_ct .widget {display: block; padding-bottom: 20px;}
#f_ct label {display: block; padding-bottom: 10px;}
#f_ct label span.mandatory {color: rgba(190,81,80,1);}
#f_ct input {display: block; width: 100%; padding: 10px; border: 1px solid #ddd; outline: none; font-family: Lato, sans-serif; font-size: 1em; color: #000; font-weight: 300;}
#f_ct textarea {display: block; width: 100%; height: auto; min-height: 300px; padding: 10px; border: 1px solid #ddd; outline: none; font-family: Lato, sans-serif; font-size: 1em; color: #000; font-weight: 300;}
#f_ct .widget-submit {text-align: right;}
#f_ct button.submit {
	background: #f2f2f2;
	font-family: Lato, sans-serif;
	font-size: 1em;
	letter-spacing: 1px;
	color: #000;
	font-weight: 300;
	border: none;
	padding: 10px 30px;
	cursor: pointer;
}
#f_ct button.submit:hover {background-color: #e2e2e2;}

#f_ct .error {color: rgba(190,81,80,1); padding-bottom: 5px;}

.ct-confirm {text-align: center; margin: 0 auto;}
.ct-confirm img {width: 48px;}
.ct-confirm div {font-size: 1.3em; margin-top: 10px;}

/* EXPOSITION FRIBOURG LIVRE D'OR */

.temoignages-container {position: relative; width: 940px; margin: 30px auto 0 auto;}

.myTems {
  display: none;
  padding: 40px 100px;
  text-align: left;
  background: #f2f2f2;
}

.tem-nom {font-size: 0.9em;}

.tem-prev, .tem-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -60px;
  padding: 16px;
  color: #444;
  font-size: 60px;
  line-height: 1;
  user-select: none;
}

.tem-next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

.tem-dot-container {
  text-align: center;
  padding: 10px 0 30px 0;
}

.tem-dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 4px;
  background-color: #ddd;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.tem-active, .tem-dot:hover {background-color: #444;}

/* ÉLÉMENT DE CONTENU DEUX IMAGES */

.content-deuximages-L {display: inline-block; width: 49.5%; margin: 10px 1% 10px 0; vertical-align: top;}
.content-deuximages-R {display: inline-block; width: 49.5%; margin: 10px 0; vertical-align: top;}
.content-deuximages-L img,
.content-deuximages-R img {display: block; max-width: 100%;}

.content-deuximages-leg {font-size: 0.8em; padding-top: 10px; line-height: 1.3;}

/* ÉLÉMENT DE CONTENU GALERIE */

.content-galerie {
	margin: 30px 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 5px;
	grid-row-gap: 5px;
}
.content-galerie img {display: block; width: 100%; height: auto;}

/* ÉLÉMENT DE CONTENU YT */

.vid-yt {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%;
	margin: 30px 0;
}

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

/* VERSION MOBILE */

@media only screen and (min-width: 481px) {
	.accueil {min-width: 940px !important;}
	#footer {min-width: 940px !important;}
	#header {min-width: 940px !important;}
	.contenu {min-width: 940px !important;}
	.so_photos_header {min-width: 940px !important;}
	.so_galeries {min-width: 940px !important;}
	.so_photos_bloc {min-width: 940px !important;}
	.mod_newslist {min-width: 940px !important;}
	.mod_newsreader {min-width: 940px !important;}
	.temoignages-container {min-width: 940px !important;}
}

@media only screen and (min-width: 481px) and (max-width: 768px)  {
	.so_photos_bloc {column-count: 1 !important;}
}

@media only screen and (min-width: 481px) and (max-width: 1280px)  {
	.so_galeries {grid-template-columns: repeat(2, 1fr) !important;}
}

@media only screen and (min-width: 1921px)  {
	.so_galeries {grid-template-columns: repeat(4, 1fr) !important;}
	.so_photos_bloc {column-count: 3 !important;}
}

@media only screen and (max-width: 480px) {
	
	img {max-width: 100% !important; height: auto !important;}
	
	/* REDIRECTION */
	
	.red-img {display: none !important; visibility: hidden !important;}
	.red-box {margin: 40px auto !important; padding: 0 40px !important;}
	.red-el {display: block !important; width: 100% !important; margin: 0 0 80px 0 !important;}
	.red-nt img,
	.red-ph img,
	.red-sa img {margin-bottom: 20px !important;}
	
	/* FOOTER */

	#footer {width: 100% !important; padding: 0px 20px !important;}
	
	/* HEADER */
	
	#header {width: 100% !important; padding: 0 20px !important;}

	#logo {display: block !important; width: 100% !important; margin-bottom: 10px !important;}
	#logo-img {width: 20% !important;}
	#logo-img img {width: 75% !important; max-width: 100% !important;}
	#logo-txt {width: 80% !important;}
	
	#menu {display: block !important; width: 100% !important;}
	#lng {width: 85% !important;}
	#menu-icn {width: 8% !important; margin-left: 7% !important;}
	#menu-icn div {width: 100% !important;}
	
	/* NAVIGATION */

	.nav-content {width: 100% !important;}
	.nav-content-L, 
	.nav-content-R {display: block !important; width: 100% !important; max-width: 100% !important;}
	.nav-overlay a {font-size: 1.4em !important;}
	.nav-smenu a {font-size: 1.1em !important;}
	.nav-close {top: 0 !important; right: 20px !important;}
	
	/* STRUCTURE */

	.contenu {width: 100% !important; margin: 40px 0 !important; padding: 0 20px !important;}
	.contenu p {text-align: left !important;}
	.box-bg-gris {padding: 20px !important; text-align: left !important;}
	
	.vid-loc video {max-width: 100% !important; height: auto !important;}

	/* ACCUEIL */

	.accueil-L, .accueil-R {display: block !important; width: 100% !important;}
	
	/* PORTFOLIO */

	.so_galeries {
		grid-template-columns: repeat(2, 1fr) !important;
		grid-column-gap: 5px !important;
		grid-row-gap: 5px !important;
	}
	
	.so_galeries_titre {font-size: 1em !important;}
	
	.so_photos_header {width: 100% !important; margin: 40px 0 !important; padding: 0 20px !important;}
	.so_photos_titre {text-align: left !important; font-size: 1.8em !important; line-height: 1.3 !important;}
	.so_photos_desc {text-align: left !important;}
	.so_photos_bloc {column-count: 1 !important; margin-bottom: 0 !important;}
	.so_photos_box img {padding-bottom: 5px !important;}
	
	/* BLOG */

	.mod_newslist {width: 100% !important; padding: 0 20px !important;}
	.blog-liste-box {display: block !important; width: 100% !important; margin: 0 0 60px 0 !important;}
	.mod_newsreader {width: 100% !important; padding: 0 20px !important;}
	.mod_newsreader p {text-align: left !important;}
	
	/* CONTACT */

	.ctact-intro {width: 100% !important;}
	#f_ct {width: 100% !important;}
	
	/* EXPOSITION FRIBOURG LIVRE D'OR */

	.temoignages-container {width: 100% !important;}
	.myTems {padding: 40px 50px !important;}
	.tem-prev, .tem-next {padding: 0 !important;}
	
	/* ÉLÉMENT DE CONTENU DEUX IMAGES */

	.content-deuximages-L {display: block !important; width: 100% !important; margin: 0 0 20px 0 !important;}
	.content-deuximages-R {display: block !important; width: 100% !important; margin: 0 !important;}
	
	/* ÉLÉMENT DE CONTENU GALERIE */

	.content-galerie {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}