@import url("https://fonts.googleapis.com/css?family=Raleway:100i,400");

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #17151d !important;
	box-sizing: border-box;  
	clear: both;
	overflow: hidden;  
	}

body {
  	font-family: "Raleway";
	width: 100vw;
	height: 100vh; 
	height: 100% !important;
	margin: 0;
	padding: 0;
	overflow: hidden;  
	color: #FFF;
	box-sizing: border-box;  
	clear: both;
	border: 0px;
	}

#the_Header {  
	z-index: 1 !important;
	position: absolute;
	width: 200px;
	height: 27px;
	top: 0;
	margin-top: 0px;
  	text-align: center;
	border: 0px;     
	box-sizing: border-box; 
	clear: both;   
	/**CENTER HORIZONTALLY**/
  		text-align: center;
  		margin: auto;  
  		position: absolute;
  		left:0;
  		right: 0;
  		top: 0;
	/**END OF CENTER HORIZONTALLY**/


	}

.first-of-all {
  	display: inline-block;
	height: 27px;
	border: 0px;
	}

.logo-placer {
	width: 100%; 
	height: 56px;
	top: 0; 
	margin-top: 60px; 
	left: 0; 
	margin-left: 0px; 
	position: absolute;
	}




/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	.logo-placer {
		display: none    
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	.logo-placer {
		display: none; 
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	.logo-placer {
		display: none;  
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	.logo-placer {
		display: none;  
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	.logo-placer {
		display: none;   
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	.logo-placer {
		display: none;  
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	.logo-placer {
		display: none;   
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	.logo-placer {
		display: inline;  
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	.logo-placer {
		display: inline;  
		} 
	}








.navbar {
	background: transparent !important;
	width:75px; 
	height: 55px;  
	right: 0; 
	margin-right: 0px; 
	float: right;
	padding: 0px;
    	border: none; 
	/* ANIMATE MOVE HORIZONTALLY */
  		animation-duration: 2s !IMPORTANT;
  		animation-iteration-count: 3 !IMPORTANT;
  		animation-timing-function: linear !IMPORTANT; 
	/* END OF ANIMATE MOVE HORIZONTALLY */
	}



 
/* ANIMATE MOVE HORIZONTALLY */
.navbar {
  animation-name: move-horizontal;
}

@keyframes move-horizontal {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
 /* END OF ANIMATE MOVE HORIZONTALLY */






.tampon-sizing {
	width: 49px;
	right: 49px;
	}



.media-presentation-canvas {
	width: 100%; 
	height: 100%; 
	top: 0; 
	margin-top: 0px;
	}

#media-resentation-iFrame {
	top: 0 !important; 
	margin-top: 0px !important; 
	left: 0 !important; 
	margin-left: 0px !important; 
	overflow: hidden !important; 
	border: 0px; 
	overflow-y: hidden !important; 
	transform: translateY(-52px) !important;
	}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    	display: flex;
    	width: 100%;
	height: 100%; 
    	align-items: stretch !IMPORTANT;
	box-sizing: border-box;  
	clear: both;
	}

#sidebar {
	z-index: 1;  
    	/** WIDTH AND LEFTH ARE MARKED BELLOW FOR QUERY 
	    7878min-width: 250px; 
    	    7878max-width: 250px; 
	**/
	height: 100%;
    	background-color: #17151d;
    	color: #fff;
    	transition: all 0.3s;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
	box-sizing: border-box;  
	clear: both; 
	}




/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	#sidebar {
    		min-width: 250px; min-width: 130px; MIN-WIDTH: 115PX;
    		max-width: 250px;  max-width: 130px;  MAX-WIDTH: 115PX;
		right: 0 !important;
		margin-right: 0px !important; 
		???????position: absolute;

		???????margin-left: -130px;	    
  		}
	
	#sidebar.active {
   		margin-left: -130px; /**DO NOT REMOVE VERY IMPORTANT **/
		margin-right: -130px;  /**DO NOT REMOVE VERY IMPORTANT **/    
		transform: translateX(130px) !important; /**DO NOT REMOVE VERY IMPORTANT **/   
		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	#sidebar {
    		min-width: 130px; MIN-WIDTH: 115PX;
    		max-width: 130px; MAX-WIDTH: 115PX;
		right: 0 !important;
		margin-right: 0px !important; 
		???????position: absolute; 

		???????margin-left: -130px;   
  		}
	
	#sidebar.active {
   		margin-left: -130px; /**DO NOT REMOVE VERY IMPORTANT **/
		margin-right: -130px;  /**DO NOT REMOVE VERY IMPORTANT **/    
		transform: translateX(130px) !important; /**DO NOT REMOVE VERY IMPORTANT **/  
		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	#sidebar {
    		min-width: 160px; MIN-WIDTH: 115PX;
    		max-width: 160px;   MAX-WIDTH: 115PX;
		right: 0 !important;
		margin-right: 0px !important; 
		???????position: absolute;    

		???????margin-left: -160px;   
  		}
	
	#sidebar.active {
   		margin-left: -160px; /**DO NOT REMOVE VERY IMPORTANT **/
		margin-right: -160px;  /**DO NOT REMOVE VERY IMPORTANT **/    
		transform: translateX(160px) !important; /**DO NOT REMOVE VERY IMPORTANT **/  
		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	#sidebar {
    		min-width: 240px; MIN-WIDTH: 115PX;
    		max-width: 240px;    MAX-WIDTH: 115PX; 
		right: 0 !important;
		margin-right: 0px !important; 
		???????position: absolute; 

		???????margin-left: -240px; 
  		}
	
	#sidebar.active {
   		margin-left: -240px; /**DO NOT REMOVE VERY IMPORTANT **/
		margin-right: -240px;  /**DO NOT REMOVE VERY IMPORTANT **/    
		transform: translateX(240px) !important; /**DO NOT REMOVE VERY IMPORTANT **/ 
		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	#sidebar {
    		min-width: 270px; MIN-WIDTH: 115PX;
    		max-width: 270px;     MAX-WIDTH: 115PX;
		right: 0 !important;
		margin-right: 0px !important; 
		???????position: absolute;  

		???????margin-left: -270px;    
  		}
	
	#sidebar.active {
   		margin-left: -270px; /**DO NOT REMOVE VERY IMPORTANT **/
		margin-right: -270px;  /**DO NOT REMOVE VERY IMPORTANT **/    
		transform: translateX(270px) !important; /**DO NOT REMOVE VERY IMPORTANT **/
		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	#sidebar {
    		min-width: 300px;
    		max-width: 300px; 
		right: 0 !important;
		margin-right: 0px !important; 
		???????position: absolute;  

		???????margin-left: -300px;   
  		}
	
	#sidebar.active {
   		margin-left: -300px; /**DO NOT REMOVE VERY IMPORTANT **/
		margin-right: -300px;  /**DO NOT REMOVE VERY IMPORTANT **/    
		transform: translateX(300px) !important; /**DO NOT REMOVE VERY IMPORTANT **/
		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	#sidebar {
    		min-width: 330px;
    		max-width: 330px;  
		right: 0 !important;
		margin-right: 0px !important; 
		???????position: absolute;  

		???????margin-left: -330px;  
  		}
	
	#sidebar.active {
   		margin-left: -330px; /**DO NOT REMOVE VERY IMPORTANT **/
		margin-right: -330px;  /**DO NOT REMOVE VERY IMPORTANT **/    
		transform: translateX(330px) !important; /**DO NOT REMOVE VERY IMPORTANT **/
		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	#sidebar {
    		min-width: 430px;
    		max-width: 430px; 
		right: 0 !important;
		margin-right: 0px !important; 
		???????position: absolute; 

		???????margin-left: -430px;   
  		}
	
	#sidebar.active {
   		margin-left: -430px; /**DO NOT REMOVE VERY IMPORTANT **/
		margin-right: -430px;  /**DO NOT REMOVE VERY IMPORTANT **/    
		transform: translateX(430px) !important; /**DO NOT REMOVE VERY IMPORTANT **/
		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	#sidebar {
    		min-width: 530px;
    		max-width: 530px;  
		right: 0 !important;
		margin-right: 0px !important; 
		???????position: absolute;  

		???????margin-left: -530px; 
		} 
	
	#sidebar.active {
   		margin-left: -530px; /**DO NOT REMOVE VERY IMPORTANT **/
		margin-right: -530px;  /**DO NOT REMOVE VERY IMPORTANT **/    
		transform: translateX(530px) !important; /**DO NOT REMOVE VERY IMPORTANT **/
		}
	}




7878#sidebar.active {
   	margin-left: -250px; /**DO NOT REMOVE VERY IMPORTANT **/
	margin-right: -250px;  /**DO NOT REMOVE VERY IMPORTANT **/    
	transform: translateX(250px) !important; /**DO NOT REMOVE VERY IMPORTANT **/
	}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px; padding: 0px;
    11111min-height: 100vh; height: 100vh !important;
    transition: all 0.3s;
	box-sizing: border-box;  
	clear: both;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        /** 111margin-left: -250px; 111margin-right: -250px; **/
    }
    #sidebar.active {
        777margin-left: 0;   margin-right: 0;  
    }
    #sidebarCollapse span {
        display: none;
    }
}









.pointing-thumbs {
	right: 0 !important; 
	margin-right: 0px !important; 
	float: right; 
	position: absolute;
	}

.container-thumbs {
	right: 0 !important; 
	margin-right: 0px !important; 
	float: right;
	}

.container-fluid {
	text-align: right
	}

.the-container {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0; 
	/**PADDING BUTTOM IS TO FIX THE FITTING OF THE CANVAS**/
		7878padding-bottom: 55px !important;
	/**END OF PADDING BUTTOM IS TO FIX THE FITTING OF THE CANVAS**/
	border: 0px;  
	box-sizing: border-box;  
	clear: both;     
	}







/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	.the-container {
		 padding-bottom: 70px !important;  padding-bottom: 135px !important;    
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	.the-container {
		  padding-bottom: 70px !important;    padding-bottom: 135px !important;      
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	.the-container {
		  padding-bottom: 70px !important;    111padding-bottom: 120px !important;  
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	.the-container {
		  padding-bottom: 70px !important;      
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	.the-container {
		  padding-bottom: 70px !important;       
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	.the-container {
		  padding-bottom: 70px !important;     
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	.the-container {
		  padding-bottom: 146px !important;    padding-bottom: 70px !important;    
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	.the-container {
		  padding-bottom: 105px !important;    padding-bottom: 70px !important;     
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	.the-container {
		  padding-bottom: 105px !important;     padding-bottom: 70px !important;  
		} 
	}







.le-tampon-NSIM {
	width: 49px;
	height: 49px;
	border-radius: 50%;
	77777border: 1px solid blue;
	top: 0;
	margin-top: 5px;
	float: left;
	left: 0;
	margin-left: 5px;
	}

#tampon-visibility {
	width: 49px;
	height: 49px;
	border-radius: 50%;
	z-index: 120 !important; 
	position: absolute !important;
	}

/**TO MAKE THE LOGO VISIBLE ON DARK BACKGROUND**/
#tampon-visibility {
  	background: linear-gradient(270deg, #073763, #0b5394, #3d85c6, #6fa8dc, #9fc5e8, #c8bede, #b3a6d5, #8675b8, #674ea7, #351c75, #741b47, #a64d79, #c27ba0, #d5a6bd, #d8aca4, #dd7e6b, #cc4125, #a61c00, #85200c, #571407);
  	background-size: 2000% 2000%;
  	-webkit-animation: colors 30s ease infinite;
          	animation: colors 30s ease infinite;
	}

@-webkit-keyframes colors {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes colors {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/**END OF TO MAKE THE LOGO VISIBLE ON DARK BACKGROUND**/



.related-content-presentation {
	width: 100%; 
	height: 100%; 
	overflow: hidden !important; 
	overflow-y: hidden !important; 
	border: 0px;
	}

#related-content-iFrame-container {
	padding: 0 !important; 
	margin: 0px; 
	border: 0px; 
	overflow: hidden !important; 
	overflow-y: hidden !important; 
	border: 0px; 
	position: relative;
	}








/**VISITOR COUNTER**/
#visitor-counter-post-stand-alone {
	min-width: 120px;
	height: 100% !important;
	border: 0px;
	float: right;
	margin-right: 0px;
	text-align: center; 
	}