/**********************************************************************************
	* @license
	* 
	* NAME : _main.css
	* 
	* Copyright (c) 2019 NATURE-ET-LOISIRS
	* All rights reserved.
	* 
	* Redistribution and use in source and binary forms, with or without
	* modification, are permitted provided that the following conditions are met:
	*     * Redistributions of source code must retain the above copyright
	*       notice, this list of conditions and the following disclaimer.
	*     * Redistributions in binary form must reproduce the above copyright
	*       notice, this list of conditions and the following disclaimer in the
	*       documentation and/or other materials provided with the distribution.
	*     * Neither the name of the <organization> nor the
	*       names of its contributors may be used to endorse or promote products
	*       derived from this software without specific prior written permission.
	* 
	* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
	* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
	* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
	* DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
	* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
	* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
	* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
	* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
	* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
	* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
	* 
	* 
	*********************************************************************************
	* Usaage :  This file provides some CSS features.
	 @author | Joaquim de Sousa Marques  | joaquimds@hotmail.com | +32.477.450.800

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

	* {
		box-sizing: border-box;
		scroll-behavior: smooth;
	}


	body,h1,h2,h3,h4,h5,h6 {font-family: 'Raleway', sans-serif}

	body {margin: 0%;}
	h2 { font-size: 20px; font-weight: bold; }

.brun {
    background-color: rgba(120,17,20,1);
    color:#fff;
}


	#yesnowaitdiv {width:186px; margin: 0px auto;display:none;}

	.smoothscrolling {scroll-behavior: smooth; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
	
	/*************scroll to top*************/
	#scrolltotop {display: none;  position: fixed;  bottom: 0px;  right: 0px;  z-index: 99;  padding:10px; cursor: pointer; }
	#scrolltotop:hover {background-color: #222222;} 
	/*.tobottom {cursor:pointer;position: relative;padding:10px;top:10px;float:right;right:0px;}*/
	.tobottom {position: fixed;  right: 0px;  z-index: 99;  padding:10px; cursor: pointer; }
	.tobottom:hover {background-color: #222222;}


	a {font-family: 'Raleway', roboto, Helvetica; }
	label {
		font-family: 'Raleway', roboto, Helvetica;
		font-size: 16px;
		display: inline-block; 
		//width: 100px; 
		margin-right: 20px; 
		vertical-align: top; 
		text-align: left;		
		padding: 5px;
	}
	textarea {resize: vertical;}

    .insurance {width:70%;overflow-x:hidden;}
	#fixeddiv {position:fixed;right:0px;bottom: 0px;height:240px;width:200px; background-color: #f2f2f2;display:none;} 
	#fixeddiv2 {position:fixed;right:0px;bottom:0px;height:30px;width:30px;} 
	#captchaimg { border-radius: 7px; padding: 2px;} 

	/* td {word-break: break-all;} */

	.somefiles {margin-top:30px;margin-bottom:20px;height:100px;overflow-y:scroll;width:100%;display:none;}
	.progressbar {background-color: #4CAF50;height: 30px; width:100%;display:none;}
	.labelunderlined {text-decoration:underline; cursor:pointer;}
	.sidebarmenuimg {width:32px;height:32px;}
	.submenu { display: none;}
	.tdleft { width: 10%; }
	.PaddingL0R0 {padding-left:0px;padding-right:0px;}
	.smalldivgreen {background-color:green;color: white;font-size: 13px;padding-left:8px;padding-right:8px;border-radius: 5px;}
	.smalldivred {background-color:red;color: white;font-size: 13px;padding-left:8px;padding-right:8px;border-radius: 5px;}

	.sticky {position: -webkit-sticky;  position: sticky;  top: 0; z-index:1; }



	/************ RESET ******************/
	.spanreset {cursor:pointer; position: relative; top: -15px ;left: -20px;}
	.spanreset:hover {border-radius: 20%; background: grey;color: white;}

	.spanresetsubscribers {float:right; cursor:pointer; position: relative; margin-top:-60px;}
	.spanresetsubscribers:hover {border-radius: 20%; background: grey;color: white;}
	.spanresetevents {float:right; cursor:pointer; position: relative; margin-top:-60px;}
	.spanresetevents:hover {border-radius: 20%; background: grey;color: white;}


	.dtransheight {transition:height .5s; transition-timing-function:linear; visibility:hidden; height:0px; overflow: hidden; padding:8px; margin: -8px;}



	/*******************************************************/
	/* Custom CHECKBOXES and RADIOBOXES from w3schools.com */
	/*******************************************************/
		/* Custom labels: the container */										.checkcontainer {display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 17px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
		/* Hide the browser's default checkbox */								.checkcontainer input {position: absolute; opacity: 0; cursor: pointer;}
		/* Create a custom checkbox */											.checkmark {position: absolute; top: 0; left: 0; height: 25px; width: 25px;  border: 1px solid grey; border-radius: 5px;}
		/* On mouse-over, add a grey background color */						.checkcontainer:hover input ~ .checkmark {background-color: #ccc;}
		/* When the checkbox is checked, add a blue background */				.checkcontainer input:checked ~ .checkmark {background-color: #2196F3;}
		/* Create the checkmark/indicator (hidden when not checked) */			.checkmark:after {content: ""; position: absolute; display: none;}
		/* Show the checkmark when checked */									.checkcontainer input:checked ~ .checkmark:after {display: block;}
		/* Style the checkmark/indicator */ 									.checkcontainer .checkmark:after {left: 6px; top: 0px; width: 12px; height: 18px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
		/* Create a custom radio button */										.radiobtn {position: absolute; top: 0; left: 0; height: 25px; width: 25px; border-radius: 50%;  border: 1px solid grey; }
		/* On mouse-over, add a grey background color */						.checkcontainer:hover input ~ .radiobtn{background-color: #ccc;}
		/* When the radio button is checked, add a blue background */			.checkcontainer input:checked ~ .radiobtn{background-color: #2196F3;}
		/* Create the indicator (the dot/circle - hidden when not checked) */	.radiobtn:after {content: ""; position: absolute; display: none;}
		/* Show the indicator (dot/circle) when checked */						.checkcontainer input:checked ~ .radiobtn:after {display: block;}
		/* Style the indicator (dot/circle) */									.checkcontainer .radiobtn:after {top: 8px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: white;}




	/*****************************************/  
	/* SLIDER w3schools.com ******************/  
	/*****************************************/  
		.switch {position: relative; display: inline-block; width: 40px; height: 24px;}
		.switch input {opacity: 0; width: 0; height: 0;}
		.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}
		.slider:before {position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
		input:checked + .slider {background-color: #2196F3;}
		input:focus + .slider {box-shadow: 0 0 1px #2196F3;}
		input:checked + .slider:before {-webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px);}
		/* Rounded sliders */  
		.slider.round {border-radius: 24px;}
		.slider.round:before {border-radius: 50%;}
	/******************************/  


	/*************************************/
	/************ SCROLLBAR **************/
	/*************************************/
	/* width*/ 				::-webkit-scrollbar {width: 12px;}
	/* Track*/ 				::-webkit-scrollbar-track {box-shadow: inset 0 0 8px #ffffff; border-radius: 4px;}
	/* Handle*/ 			::-webkit-scrollbar-thumb {background: #828282; border-radius: 4px;}
	/* Handle on hover*/ 	::-webkit-scrollbar-thumb:hover {background: #8f8f8f;}



	/*************************************/
	/************ TITLES *****************/
	/*************************************/
	.labelssubscriptions, .labelschildrenmedicalprofil { width:100%;background-color:#77160d;color:#fff;}
	/*.labelssubscriptions, .labelschildrenmedicalprofil { width:100%;background-color:#782a38;color:#fff;}*/



	/*************************************/
	/************ WRAPPER *****************/
	/*************************************/
	.wrapper {}
	.wrapper:after { content:''; display:block; clear: both; }



	/*************************************/
	/************ LOADER *****************/
	/*************************************/
	.loader {
		border: 16px solid #f3f3f3;
		border-radius: 50%;
		border-top: 16px solid #3498db;
		width: 30px;
		height: 30px;
		-webkit-animation: spin 2s linear infinite; /* Safari */
		animation: spin 2s linear infinite;
	}

	/* Safari */
	@-webkit-keyframes spin {
		0% { -webkit-transform: rotate(0deg); }
		100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}





	/*******************************************/
	/************ SOME BOX FADIN ***************/
	/*******************************************/
		#animatorpersontocontactdiv, 
		#subscriberchildrenpersoninchargefiscdiv,
		#subscriberchildrenpersontocontactdiv,
		#subscribermoneysenderdiv,
		#subscriberemergencypersondiv	{
			animation: fadein 2s;
			-moz-animation: fadein 2s; /* Firefox */
			-webkit-animation: fadein 2s; /* Safari and Chrome */
			-o-animation: fadein 2s; /* Opera */
		}
		@keyframes fadein {
		from {opacity:0;} to {opacity:1;}}
		@-moz-keyframes fadein { /* Firefox */
				from {opacity:0;} to { opacity:1;}}
		@-webkit-keyframes fadein { /* Safari and Chrome */
				from {opacity:0;} to {opacity:1;}}
		@-o-keyframes fadein { /* Opera */
				from {opacity:0;} to {opacity: 1;}}

	/*************************************/
	/************ LOGINBOX ***************/
	/*************************************/
	.LoginInput {
		width: 80%;
		font-size: 16px;
		border: 1px dotted #ddd;
		color: #000;
		padding: 5px;
		font-family: 'Raleway', roboto, Helvetica;
	}
	.glow-LoginInput:hover {
		color: rgba(255, 255, 255, 1);
		box-shadow: 0 5px 15px rgba(145, 92, 182, .4);
		color: #000;
	}


	/*************************************/
	/************ button *****************/
	/*************************************/
	.button, .buttonfileupload, .buttonfiledownload, .docedit, .docdownload, .docdelete {
		border: 1px solid #ddd;
		text-decoration: none;
		color: rgba(255, 255, 255, 0.8);
		background: grey;
		//background: green;
		//background: #3a5700;
		padding: 10px 15px 10px;
		border-radius: 8px;
		font-weight: normal;
		font-family: 'Raleway', roboto, Helvetica;
	}
	.buttonfileupload {background-image : url(_upload.png);background-repeat : no-repeat; background-position : left;}
	.buttonfiledownload {background-image : url(_download.png);background-repeat : no-repeat; background-position : left;}
	.docedit {background-image : url(_docedit.png);background-repeat : no-repeat; background-position : left;}
	.docdelete {background-image : url(_docdelete.png);background-repeat : no-repeat; background-position : left;}
	.docdownload {background-image : url(_docdownload.png);background-repeat : no-repeat; background-position : left;padding: 10px 40px 10px;}


	.glow-button:hover {
		color: rgba(255, 255, 255, 1);
		box-shadow: 0px 5px 10px rgba(145, 92, 182, .4);
	}

	
	

	/*************************************/
	/************ glowdiv *****************/
	/*************************************/
	.div {}
	.glow-div-normal {
		padding: 10px;
		border-radius: 4px;
		box-shadow: 0 5px 15px rgba(145, 92, 182, .4);
		background-color: #efffff;
	}
	.glow-div:hover {
		border-radius: 4px;
		box-shadow: 0 5px 15px rgba(145, 92, 182, .4);
		background-color: #efffff;
	}



	/*************************************/
	/***** Forms Errors Messages *********/
	/*************************************/
	.formerrormessage {
		color: red;
		font-size: 16px;
		font-family: 'Raleway', roboto, Helvetica;
		font-weight: bold;
	}


	/*************************************/
	/***** BANNER IMAGES******************/
	/*************************************/
        #bannerimgbig { display:inline-block; transition:height .5s; transition-timing-function:linear; overflow: hidden;} /*THIS CAUSES FLICKERING PROBLEM WHEN SCROLLING*/
		#bannerimglogo { height:50px; display: none; }

	/****************************************/
	/********* TABLES GALLERIES *************/
	/****************************************/
		#galleries { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; }
		#galleries td { text-align: left; padding: 12px; }
		#galleries th { cursor:pointer;padding: 12px; text-align: left; background-color: #cc00cc; color: white; }
		#galleries th:hover { background-color: #000000;}
		#galleries tr { border-bottom: 1px solid #ddd; }
		#galleries tr:hover { background-color: #f1f1f1; }
		#galleries tr:nth-child(even){background-color: #f2f2f2;}
		#galleries tr:hover {background-color: #ddd;}

	/*******************************************/
	/********* TABLES ATTESTATIONS *************/
	/*******************************************/
		#attestations { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; }
		#attestations td { text-align: left; padding: 12px; }
		#attestations th { cursor:pointer;padding: 12px; text-align: left; background-color: #009999; color: white; }
		#attestations th:hover { background-color: #000000; }
		#attestations tr { border-bottom: 1px solid #ddd; }
		#attestations tr:hover { background-color: #f1f1f1; }
		#attestations tr:nth-child(even){background-color: #f2f2f2;}
		#attestations tr:hover {background-color: #ddd;}


	/****************************************/
	/********* TABLES CONTRACTS *************/
	/****************************************/
		#contracts { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; }
		#contracts td { text-align: left; padding: 12px; }
		#contracts th { cursor:pointer;padding: 12px; text-align: left; background-color: #c0a999; color: white; }
		#contracts th:hover { background-color: #000000; }
		#contracts tr { border-bottom: 1px solid #ddd; }
		#contracts tr:hover { background-color: #f1f1f1; }
		#contracts tr:nth-child(even){background-color: #f2f2f2;}
		#contracts tr:hover {background-color: #ddd;}

	/****************************************/
	/********* TABLES ANIMATORS *************/
	/****************************************/
		#animators { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; }
		#animators td { text-align: left; padding: 12px; }
		#animators th { cursor:pointer;padding: 12px; text-align: left; background-color: #cc6600; color: white; }
		#animators th:hover { background-color: #000000; }
		#animators tr { border-bottom: 1px solid #ddd; }
		#animators tr:hover { background-color: #f1f1f1; }
		#animators tr:nth-child(even){background-color: #f2f2f2;}
		#animators tr:hover {background-color: #ddd;}

	/*************************************/
	/****** TABLES OPERATOR **************/
	/*************************************/
		#operators { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; }
		#operators td { text-align: left; padding: 12px;}
		#operators th { cursor:pointer;padding: 12px; text-align: left; background-color: #999966; color: white; }
		#operators th:hover { background-color: #000000; }
		#operators tr { border-bottom: 1px solid #ddd; }
		#operators tr:hover { background-color: #f1f1f1; }
		#operators tr:nth-child(even){background-color: #f2f2f2;}
		#operators tr:hover {background-color: #ddd;}

	/*************************************/
	/****** TABLES SUBSCRIBERS ***********/
	/*************************************/
		#subscribers { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; }
		#subscribers td { text-align: left; padding: 12px; }
		#subscribers th { cursor:pointer;padding: 12px; text-align: left; background-color: #cc99ff; color: white; }
		#subscribers th:hover { background-color: #000000; }
		#subscribers tr { border-bottom: 1px solid #ddd; }
		#subscribers tr:hover { background-color: #f1f1f1; }
		#subscribers tr:nth-child(even){background-color: #f2f2f2;}
		#subscribers tr:hover {background-color: #ddd;}

	/*************************************/
	/********* TABLES EVENTS *************/
	/*************************************/
		#events { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; }
		#events td { text-align: left; padding: 12px; }
		#events th { cursor:pointer;padding: 12px; text-align: left; background-color: #99cc00; color: white; }
		#events th:hover { background-color: #000000; }
		#events tr { border-bottom: 1px solid #ddd; }
		#events tr:hover { background-color: #f1f1f1; }
		#events tr:nth-child(even){background-color: #f2f2f2;}
		#events tr:hover {background-color: #ddd;}

	/***************************************************/
	/********* TABLES SUBSCRIBERS CHILDREN *************/
	/***************************************************/
		#subscriberschildren { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; }
		#subscriberschildren td { text-align: left; padding: 12px; }
		#subscriberschildren th { cursor:pointer;padding: 12px; text-align: left; background-color: #66a3ff; color: white; }
		#subscriberschildren th:hover { background-color: #000000; }
		#subscriberschildren tr { border-bottom: 1px solid #ddd; }
		#subscriberschildren tr:hover { background-color: #f1f1f1; }
		#subscriberschildren tr:nth-child(even){background-color: #f2f2f2;}
		#subscriberschildren tr:hover {background-color: #ddd;}

	/*************************************/
	/****** TABLES SUBSCRIPTIONS **************/
	/*************************************/
		#subscriptions { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; }
		#subscriptions td { text-align: left; padding: 12px; }
		#subscriptions th { cursor:pointer;padding: 12px; text-align: left; background-color: #ff6600; color: white; }
		#subscriptions th:hover { background-color: #000000; }
		#subscriptions tr { border-bottom: 1px solid #ddd; }
		#subscriptions tr:hover { background-color: #f1f1f1; }
		#subscriptions tr:nth-child(even){background-color: #f2f2f2;}
		#subscriptions tr:hover {background-color: #ddd;}

	/*****************************************/
	/********* TABLES SUBSCRIPTIONSEVENTS ****/
	/*****************************************/
		#subscriptionsevents { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; border-bottom: 1px dotted #000; }
		#subscriptionsevents td { text-align: left; padding: 12px; }
		#subscriptionsevents tr { border-bottom: 1px dotted #000; }
		#subscriptionsevents tr:hover { background-color: #f1f1f1; }

	/************************************************/
	/********* TABLES SUBSCRIPTIONSSUBSCRIBERS ******/
	/************************************************/
		#subscriptionssubscribers { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; border-bottom: 1px dotted #000; }
		#subscriptionssubscribers td { text-align: left; padding: 12px; }
		#subscriptionssubscribers tr { border-bottom: 1px dotted #000; }
		#subscriptionssubscribers tr:hover { background-color: #f1f1f1; }

	/**********************************************/
	/********* TABLES SUBSCRIPTIONSCHILDREN *******/
	/**********************************************/
		#subscriptionschildren { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; border-bottom: 1px dotted #000; }
		#subscriptionschildren td { text-align: left; padding: 12px; }
		#subscriptionschildren tr { border-bottom: 1px dotted #000; }
		#subscriptionschildren tr:hover { background-color: #f1f1f1; }

	/**************************************************/
	/********* TABLES SUBSCRIPTIONSATTESTATIONS *******/
	/**************************************************/
		#subscriptionsattestations { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; border-bottom: 1px dotted #000; }
		#subscriptionsattestations td { text-align: left; padding: 12px; }
		#subscriptionsattestations tr { border-bottom: 1px dotted #000; }
		#subscriptionsattestations tr:hover { background-color: #f1f1f1; }

	/*****************************************/
	/********* TABLES EVENTSANIMATORS ****/
	/*****************************************/
		#eventsanimators { border-collapse: collapse; width: 100%; font-family: 'Raleway', roboto, Helvetica; border-bottom: 1px dotted #000; }
		#eventsanimators td { text-align: left; padding: 12px; }
		#eventsanimators tr { border-bottom: 1px dotted #000; }
		#eventsanimators tr:hover { background-color: #f1f1f1; }




	/***********************************************/
	/****** TABLES SUBSCRIBERS REGISTER*************/
	/***********************************************/
		#subscribersregister { width: 100%; font-family: 'Raleway', roboto, Helvetica; }
		//#subscribersregister td { text-align: left; padding: 12px; }
		//#subscribersregister tr { border-bottom: 1px solid #ddd; }

	/*************************************/
	/********** SEARCHBOX ****************/
	/*************************************/
	.SearchInput {
		width: 45%;
		background-position: 10px 10px;
		font-size: 16px;
		padding: 12px 20px 12px 40px;
		border: 1px solid #ddd;
		margin-bottom: 12px;
		color: #000;
		font-family: 'Raleway', roboto, Helvetica;
		background-image: url('../css/_searchicon.png');
		background-repeat: no-repeat;
	}
	.glow-SearchInput:hover { color: rgba(0, 0, 0, 1); box-shadow: 0 5px 15px rgba(145, 92, 182, .4); }




	/*************************************/
	/********** SEARCHBOX ****************/
	/*************************************/
	.select {
		font-size: 16px;
		font-family: 'Raleway', roboto, Helvetica;
		padding: 12px 20px 12px 40px;
		border: 1px solid #ddd;
		margin-bottom: 12px;
		color: #000;
		background-color: #fffff0;
	}
	.glow-select:hover { color: rgba(0, 0, 0, 1); box-shadow: 0 5px 15px rgba(145, 92, 182, .4); }

	/**********************************/
	/************ BOX *****************/
	/**********************************/
		.NormalInput { width: 50%; font-size: 16px; border: 1px dotted #ddd; color: #000; padding: 5px; font-family: 'Raleway', roboto, Helvetica;background-color: #fffff0;}
		.glow-NormalInput:hover { color: rgba(255, 255, 255, 1); box-shadow: 0 5px 15px rgba(145, 92, 182, .4); color: #000;}
		.width88 {width: 99%;}


	/**********************************/
	/****** INNER 2 DIVS **************/
	/**********************************/
		#innerdivfullwidth { float:left; width:100%; display:inline-block; padding:15px; padding-top:0px;}
		#innerdivleft { float:left; width:50%; display:inline-block; padding:15px; padding-top:0px;}
		#innerdivright { float:left; width:50%; display:inline-block; padding:15px; padding-top:0px;}
		#innerdivleft2 { width:100%; padding:15px; max-height:280px; overflow:auto; overflow-x:auto; padding-top:0px;}
		#innerdivleft3 { float:left; width:33%; display:inline-block; padding:15px; padding-top:0px;}
		#innerdivleft4 { float:left; width:50%; display:inline-block; padding:15px; padding-top:0px;}


		#innerdivcenter { margin: 0 auto; max-width:500px; padding:15px; }


		
	/*************************************/
	/* Center the image and position the close button */
	/*************************************/
		.imgcontainer { text-align: center; margin: 14px 0 12px 0; position: relative; }
		img.avatar { width: 40%; border-radius: 50%;}
		.container { padding: 16px;}
		span.psw { float: right; padding-top: 16px;}

		/* The Modal (background) */
		.modal {
			display: none; /* Hidden by default */
			position: fixed; /* Stay in place */
			z-index: 1; /* Sit on top */
			left: 0;
			top: 0;
			width: 100%; /* Full width */
			height: 100%; /* Full height */
			overflow: auto; /* Enable scroll if needed */
			background-color: rgb(0,0,0); /* Fallback color */
			background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
			padding-top: 2px;
		}
		/* Modal Content/Box */
		.modal-content {
			background-color: #fefefe;
			margin: 1% auto 50% auto; /* 5% from the top, 15% from the bottom and centered */
			border: 1px solid #888;
			width: 300px; /* Could be more or less, depending on screen size */
		}
		/* Add Zoom Animation */
		.animate {
			-webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s}
		@-webkit-keyframes animatezoom {
			from {-webkit-transform: scale(0)} 
			to {-webkit-transform: scale(1)}
		}
		@keyframes animatezoom {
			from {transform: scale(0)} 
			to {transform: scale(1)}
		}
		/* Change styles for span and cancel button on extra small screens */
		@media screen and (max-width: 300px) {
			span.psw { display: block; float: none;	}

		}

	/**********************************/
	/****** INNER 2 DIVS MOVE *********/
	/**********************************/
		@media only screen and (max-width: 700px) { 
			#innerdivleft, #innerdivright, #innerdivleft3, #innerdivleft4 {width: 100%;}
			#bannerimgbig {display:none;}
			#bannerimglogo {display:inline-block;}

			#userconnect {position:absolute; right:5px; top:10px;}


		}




	/*******************************************************************************************************/
	/*******************************************  START IMAGE GALLERY **************************************/
	/*******************************************************************************************************/
		.images-gallery {  	border-radius: 7px;	cursor: pointer;	border: 1px solid #000;}
		.images-gallery:hover {  animation: shake 0.5s;	animation-iteration-count: 1;	}
		@keyframes shake {
			0% { transform: translate(1px, 1px) rotate(0deg); }
			10% { transform: translate(-1px, -2px) rotate(-1deg); }
			20% { transform: translate(-3px, 0px) rotate(1deg); }
			30% { transform: translate(3px, 2px) rotate(0deg); }
			40% { transform: translate(1px, -1px) rotate(1deg); }
			50% { transform: translate(-1px, 2px) rotate(-1deg); }
			60% { transform: translate(-3px, 1px) rotate(0deg); }
			70% { transform: translate(3px, 1px) rotate(-1deg); }
			80% { transform: translate(-1px, -1px) rotate(1deg); }
			90% { transform: translate(1px, 2px) rotate(0deg); }
			100% { transform: translate(1px, -2px) rotate(-1deg); }
		}
		/*******************************************************************************************************/
			.images-gallery-image-progressbar {  position: absolute;  bottom: 16px;  left: 10px; color: #f1f1f1;  font-size: 30px;  font-weight: bold;  }

			.images-gallery-image-info   {  position: relative;  text-align:center ; bottom: 45px; color: #f1f1f1;  font-size: 20px;  text-shadow: 2px 2px 3px grey;}
			.images-gallery-image-edit   {  position: absolute;  top: 16px;  left: 10px;cursor: pointer; color: #f1f1f1;  font-size: 30px;  font-weight: bold;  }
			.images-gallery-image-delete {  position: absolute;  top: 8px;  right: 16px;cursor: pointer; color: #f1f1f1;  font-size: 40px;  font-weight: bold;  }
			.images-gallery-image-number {  position: absolute;  bottom: 8px;  left: 8px;cursor: pointer; color: #f1f1f1;  font-size: 20px;}

			.images-gallery-container {  position: relative;  text-align: center;  color: white;}
			.images-gallery-container-people {  position: relative;  text-align: left;  color: white; width:300px;}
			.images-gallery-right-center {display:none; position: absolute; top: 50%; right: 16px; cursor: pointer;}
			.images-gallery-right-center:hover { transition: .5s ease;opacity: 0.5;	box-shadow: 0 0 2px 2px rgba(255, 255, 255, 1);	}
			.images-gallery-left-center {display:none; position: absolute; top: 50%; left: 16px; cursor: pointer;}
			.images-gallery-left-center:hover { transition: .5s ease;opacity: 0.5;	box-shadow: 0 0 2px 2px rgba(255, 255, 255, 1);	}
		/*******************************************************************************************************/
			#images-gallery-modal-img	{
				animation: fadein 2s;
				-moz-animation: fadein 2s; /* Firefox */
				-webkit-animation: fadein 2s; /* Safari and Chrome */
				-o-animation: fadein 2s; /* Opera */
				width: 100%; height: 99.5%; object-fit: contain;					
			}
			@keyframes fadein {
				from {opacity:0;} to {opacity:1;}}
				@-moz-keyframes fadein { /* Firefox */
						from {opacity:0;} to { opacity:1;}}
				@-webkit-keyframes fadein { /* Safari and Chrome */
						from {opacity:0;} to {opacity:1;}}
				@-o-keyframes fadein { /* Opera */
						from {opacity:0;} to {opacity: 1;}
			}
		/*******************************************************************************************************/
			.images-gallery-row {display: -ms-flexbox; display: flex;-ms-flex-wrap: wrap;  flex-wrap: wrap;padding: 0 4px;}
			.images-gallery-column {-ms-flex: 25%;  flex: 25%;max-width: 25%;padding: 0 4px;}
			.images-gallery-column img {margin-top: 8px;	vertical-align: middle;	width: 100%;max-height: 400px;overflow-y;hidden;}
			//.images-gallery-column img {margin-top: 8px;	vertical-align: middle;	width: 100%;overflow-y;hidden;}
			@media screen and (max-width: 800px) {.images-gallery-column {	-ms-flex: 50%;flex: 50%;	max-width: 50%;	}	}
			@media screen and (max-width: 600px) {.images-gallery-column {	-ms-flex: 100%;	flex: 100%;	max-width: 100%;}	}
		/*******************************************************************************************************/
			.images-gallery-modal {display: none; position: fixed; z-index: 1; left: 0;	top: 0;		width: 100%; height: 100%; overflow: auto; background-color: #000; 	}
			.images-gallery-modal-content {	 max-width: 100%;  height: auto;  text-align: center;}
			.images-gallery-modal-number { position: absolute;  top: 15px;  left: 16px; color: #f1f1f1;  font-size: 30px;  font-weight: bold;  transition: 0.3s;}

			.images-gallery-modal-close { position: absolute;  top: 15px;  right: 16px; color: #f1f1f1;  font-size: 60px;  font-weight: bold;  transition: 0.3s;}
			.images-gallery-modal-close:hover,
			.images-gallery-modal-close:focus {color: #bbb;  text-decoration: none;  cursor: pointer;}
			@-webkit-keyframes zoom {
				from {-webkit-transform:scale(0)} 
				to {-webkit-transform:scale(1)}
			}
			@keyframes zoom {
				from {transform:scale(0)} 
				to {transform:scale(1)}
			}
			@media only screen and (max-width: 700px){
				.images-gallery-modal-content {	width: 100%;	}
			}
	/*******************************************************************************************************/
	/*******************************************  END IMAGE GALLERY ****************************************/
	/*******************************************************************************************************/