/* MONTSERRAT  depuis les fichiers locaux */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Thin.ttf') format('truetype');
  font-weight: 50;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

/* ROBOTO  depuis les fichiers locaux */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Thin.ttf') format('truetype');
  font-weight: 50;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
  font-weight: 150;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'icons';
    src: url('../fonts/icons.ttf') format('truetype');
}
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Gotham';
    src: url('../fonts/gothambook.ttf') format('truetype');
}
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'GothamN';
    src: url('../fonts/gothamnarrow-book.ttf') format('truetype');
}

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    /* color: red; */
}

html {
    /* font-size: 1em;
    line-height: 1.4; */

}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*  =========
     GENERAL
    =========   */
html {
    overflow-y: scroll;
    
    font-family: sans-serif;
    font-size: .75em;
    /* color: #222; */
    line-height: 1.5;
    
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	speak:none;
}
body {
    height: 100%;
    background-color: #222;
}


h1,h2,h3,h4 {
  font-family: 'Montserrat', "Courier New", sans-serif;
}
h3 {
  font-weight: normal;
  letter-spacing: 1px;
  margin-left: 1.5em;
}

/* Highlight text Selection*/
::selection {
	text-shadow: none;
	background: rgba(209,70,42,0.45);
	color: #fff;
}
::-moz-selection {background: transparent;}

/*  =========
     SHARED
    =========  */

a:focus,
a:active {
    outline: none; /* Firefox*/ 
}

a {
    color: #222;
    text-decoration: none;
}

a:hover.show {
    
}

/*  =========
     BLOCKS
    =========   */
/* HEADER */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 40px;
    
    background-color: #222;
  	color: #EFEFEF;
    border-bottom: 1px solid #ddd;

    text-align: left;

    z-index: 999;
}
header .title { 
    position: relative;
    top: -40px;
    display: block;
    float: right;
    margin-right: 1em;

    font-size: 1.2em;
    line-height: 25px;
    font-family: GothamN, "Courier New", sans-serif;
    color: #000;
}
/************
    SECTION
*************/
section {
    /* margin-top: 1%; */
}

.wrapper {
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
    position: relative;
	text-align: center;
    background: transparent;
}
.container h1{
	font-size: 1.9em;
	
}
.container p{
	padding-top: 1em;
	
}

/* .bg_image{
    position: relative;
    margin: 15% auto 5% auto;
    width: 0;
    /* outline: 2px solid red; */ */
/*    padding: 8em;
    background-image: url(http://ommx.studio/mmx/ms/fro-work/img/nl/TBS-Newsletter-00-Fonds-Rajak-Ohanian-100dpi.jpg);
    background-position: top -247px center;
    background-size: 255%;
    background-repeat: no-repeat;
} */
/************
    ARTICLE
*************/

/************
    FOOTER
*************/
footer {
    font-family: Gotham,sans-serif;
    position: fixed;
    bottom: 0;
    width: 100%;
    /*height: 35px;*/
    margin: 0 auto;
    text-align: center;

    background: #fff;
    border-top: 1px solid #ddd;

    z-index: 1000;
}
footer p {
    margin: 0;
    color: #222;
    font-size: .8em;
    text-transform: uppercase;
}
/************
    ICONS
*************/
.fb:before {
    content: "\0044";
    font-size: 9px;
    font-family: icons;
}
.tw:before {
    content: "\0042";
    font-size: 11px;
    font-family: icons;

    vertical-align: middle;
}
.inf:before {
    content: "\033";
    font-size: 16px;
    font-family: icons;

    vertical-align: middle;
}
.x:before {
    content: "\021";
    font-size: 16px;
    font-family: icons;

    vertical-align: middle;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   MO-loader PURE CSS from http://codepen.io/zephyr/pen/GiAHk
   ========================================================================== */
.loader {
    display: none; 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background: #f8f8f8;
    background: rgba(255,255,255,.7);

    z-index: 1000;

    pointer-events: none;
}
.curve {
    position: fixed;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;

    border: 10px solid transparent; /* 25 */
    border-right-color: rgba(0, 0, 0, 0.7); /* 444 */
    border-left-color:  rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    -webkit-animation:  spin 1s linear infinite;
    -moz-animation:     spin 1s linear infinite;
    animation:          spin 1s linear infinite;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

/* ==========================================================================
   MO-ADD 2025 FONDS RAJAK OHANIAN 2025
   ========================================================================== */

/*     img {
        width: 250px;
    } */
    
		html {
			
		}
		
		/* Mode Clair */
		body {
			background-color: #222;
			margin: 0 auto;		
		}
		/* Mode Sombre 
		body.dark-mode {
			background-color: #efefef;
			margin: 0px auto;
			color: #222; */
		}
		section {
			top:0;
			width:100%;
			
		}
		
		article .container {
			width:100%;
		}
		
		.smallText {
			font-size: 80%;
		
		}	
		.smallTextTBSFRO {
			font-size: 95%;
		
		}		
		.invitation {
			position: relative;
			background-color: #222;
			margin: 0 auto;
			text-align: center;
			padding: 0 0 2% 0;
			width: 100%;
			top: 83px;			
		}
		
		.invitation img {
			width: 70%;
		}
		
		#newsletter {
			position: relative;
			background-color: #222;
			margin: 0 auto;
			text-align: center;
			padding: 0 0 2% 0;
			width: 100%;
			top: 83px;
	
		}

		#newsletter img {
			width: 70%;
	
		}
				
		#fonds {
			position: relative;
			background-color: #efefef;
			/* letter-spacing: 1px; */
			margin: 0 auto;	
			text-align: left;
			padding: 10px 10px 0 10px;
			font-size: 1.5em;
			width: 100%;
			left: 78px;
	
		}
		
		#fondsfin {
			position: absolute;
			background-color: #efefef;
			width: 3.5%;
			float: left;
			top: -8px;
			z-index: 1;
			left: -17px;
			font-size: 1.5em;
		}

		#home {
			margin: 20px 15px auto;
			text-align: left;
			padding: 0;
			font-size: 1.5em;
			width: 700px;
			float: left;
	
		}
		
	
		#home span {
			font-size: 80%;
			padding-left: 7px;
		
		}
				
		/* .tbs {
			letter-spacing: 1px;
			padding: 0px 10px 0;
			font-size: 1em;
			width: 500px;
			margin: 0; */
	
		}
		
		#membre {
			position: relative;
			background-color: #efefef;
			margin: 20px 2%;
			text-align: right;
			padding: 0 10px 10px 10px;
			font-size: 1.3em;
			width: 30%;
			float: right;
	
		}

		.fixed-header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 65px;
			z-index: 1000; /* Assure que l'élément reste au-dessus des autres contenus */
			background-color: #efefef;
			border-bottom: 1px solid #777;
      
		}
		
		.menuLeft {
			position: fixed;
			top: 30%;
			left: 0;
			float: left;
			padding: 0;
			width: 140px;
			height: 26%;
			z-index: 1;
			letter-spacing: 0.65px;
			
		}

		.Btn-expo25,.Btn-NL,.Btn-expo24,.Btn-CT,.Btn-ME,.Btn-INFO,.Btn-DARK {
			margin: 0 0 5%;
			padding: 15%;
			background-color: #222;
			font-size: 1.1em;
			font-weight: 900;
			font-family: "Roboto",sans-serif;
			border: 1px solid gray;	
		}

		.Btn-expo25 a,.Btn-NL a,.Btn-expo24 a,.Btn-CT a,.Btn-ME a,.Btn-INFO a,.Btn-DARK a {
			color: lightgray;
		}
		.Btn-INFO a {
			/* font-size: 90%; */
		}
		
		button {
			padding: 5px 15px 5px 15px;
			background-color: transparent;
			border: 0;			
		}
		
		.Btn-DARK {
				background-color: yellow;
			font-size: 90%;
			line-height: 0.5;
			font-weight: 500;
			/* border-radius: 5px;*/
			padding: 7px;
			text-align: center;			
		}				
		.mainText {
			position: relative;
			background-color: #efefef;
			padding: 4%;
			width: 35%;
			text-align: center;
			margin: 0 auto;
			top: 83px;
			color: #222;

		}
		
		.mainText h3{
/*			background-color: white;
			border-radius: 2px;
			line-height: 2em; */
			
		}
		
		#Titre {
			font-size: 1.5em; !important
		}	
		
		#Text {
			text-align: left;
			font-size: 1.2em;
			padding-top: 20%;
		}	

		.logoTbs {
			background-color: transparent;
		}	
				
		.logoTbs img {
			width: 80px;
			opacity: 30%;
		}
					
		#Adress {
			/* background-color: white; */
			border-radius: 2px;
			line-height: 1.5em;
			padding: 10px;
			letter-spacing: 1px;
		}
		
		footer {
			width: 100%;
			bottom: 0;
			position: fixed;
			background-color: #efefef;
			text-align: center;
			line-height: 1.5em;
			border-top: 1px solid #222;
		}										
		footer p {
			letter-spacing: 1px;
		}	


/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Si la largeur de l'écran est inférieure à 600px (par exemple, pour les smartphones) */ 
@media (max-width: 600px) {

	.Btn-expo25,.Btn-NL,.Btn-expo24,.Btn-CT,.Btn-ME,.Btn-INFO,.Btn-DARK {
		font-size: 1.4em;
		font-weight: 500;
		text-align: center;
		padding: 3%;
		margin: 1px 0;
		position: relative;	
	}
	.Btn-DARK {
				background-color: red;
		font-size: 80%;
		line-height: 1;
		font-weight: 700;
		/* border-radius: 5px;*/
		padding: 7px;
		text-align: left;			
	}	
	#newsletter {
		top: 32px;
	}
	
	#newsletter img {
		width: 100%;
	}
	.invitation {
		top: 45px;		
	}
	.invitation img {
		width: 100%;		
	}
	.mainText{
		width: 83%;
		padding: 5%;	
	}
	#Titre {
		margin:0 !important;
	}
	#Adress {
		font-size: 90%;
		padding: 5px;
	}
	.logoTbs img {
		width: 60px;
		opacity: 30%;
		
	}
    .menuLeft {
    	display: inline-block;
        background-color: grey !important;
        width: 100%;
        position: relative;
        margin: 0 auto;
        top:30px;    
    }    
    .membre {
		background-color: transparent;
		line-height: 1.2;
		float: right;
		width: 83px;
		margin: -30px auto;
    }
	#home span {
		display: none;	
		font-size: 80%;
		padding-left: 7px;		
	}
		 
	section {
    	margin-top: 10%;
	}
	
	footer {
        width: 100%;
        bottom: 0;
        position: fixed;
        font-size: 70%;
    }
}

/* Si la largeur de l'écran est supérieure à 600px mais inférieure à 1024px (tablettes) */

@media (min-width: 601px) and (max-width: 1019px) {

	#newsletter {
		top: 40px;
	}
	
	#newsletter img {
		width: 100%;
	}

	.invitation {
		top: 40px;	
	}
	.invitation img {
		width: 100%;	
	}	
	.menuLeft {
        background-color: grey !important;	
		position: fixed;
		top: 20%;
		left: 0;
		float: left;
		padding: 0;
		width: 115px;
		height: 225px;
		z-index: 1;
		letter-spacing: 0.65px;			
	}
	.Btn-expo25,.Btn-NL,.Btn-expo24,.Btn-CT,.Btn-ME,.Btn-INFO {
		font-size: 0.85em;
		font-weight: 500;
		text-align: center;
		padding: 8% 0;
		margin: 1% 0;
		position: relative;	
	}
	.Btn-DARK {
				background-color: blue;
		font-size: 80%;
		line-height: 1;
		font-weight: 700;
		/* border-radius: 5px;*/
		padding: 7px;		
	}	

    .membre {
		background-color: transparent;
		line-height: 1.2;
		float: right;
		width: 100px;
		margin: -30px auto;
    }
	.mainText{
		width: 90%;
		padding: 5%;
		top: 40px;	
	}
	#Titre {
		margin:0 !important;
	}
	#Text {
		padding-top: 10%;
	}
	#Adress {
		font-size: 90%;
	}
	.logoTbs img {
		width: 70px;
		opacity: 30%;
		
	}   
	section {
    	margin-top: 5%;

	}
    article .container {
        width: 81%;
        margin: 0 1%;
        float: right;
        te
        left;
        background: transparent;
    }
    footer {
        width: 100%;
        bottom: 0;
        position: fixed;
        text-align: center;
        color: #555;
        font-size: 80%;
        /* padding: 1%;*/
    }

}

/* Si la largeur de l'écran est supérieure à 1024px (ordinateurs de bureau) */
@media (min-width: 1020px) {
		.menuLeft {
			position: fixed;
			top: 30%;
			left: 0;
			float: left;
			padding: 0;
			width: 175px;
			height: 26%;
			z-index: 1;
			letter-spacing: 0.65px;
			
		}

		.Btn-expo25,.Btn-NL,.Btn-expo24,.Btn-CT,.Btn-ME,.Btn-INFO {
			margin: 0 0 5%;
			padding: 15%;
			background-color: #222;
			font-size: 1.1em;
			font-weight: 900;	
		}

		.membre {
			position: relative;
			background-color: #efefef;
			margin: 0;
			text-align: right;
			padding: 20px;
			font-size: 1.3em;
			float: right;	
		}
		#Titre {
			margin:0 !important;
			}
		.mainText{
			width: 40%;
		}	
			
/* XLarge devices (Xlarge desktops, 1440px and up) */
@media (min-width: 1440px) {

    article .container {

    }
}


@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

	   }
}

/* A VOIR POUR DEBUG A 1024 IPAD */

/* Medium devices (desktops, 992px and up) 
@media (min-width: 992px) {
    .textWork {
        width: 26%;
        top: 30px;
    }

    footer {
        width: 100%;
        bottom: 0;
        position: fixed;
    }
}
*/
/* Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
}  */

/* XLarge devices (Xlarge desktops, 1440px and up) 
@media (min-width: 1440px) {

    article .container {
        width: 1240px;
    }

    .textWork {
        width: 375px;
    }
}

*/		
    
/* ==========================================================================
   DARK MODE. Toggle Button
   ========================================================================== */
   
	/* Mode Clair (par défaut) 
	#theme-container {
		background-color: red; 
	}   */
	    
	/* Mode Sombre pour plusieurs éléments à la fois 
	#theme-container.dark-mode .fixed-header {
	  background-color: red;
	} */