@import url('//fonts.googleapis.com/css?family=Courgette');
@import url('//fonts.googleapis.com/css?family=Open+Sans');

body{margin:0px;background-color:#FFF;}

html{
	/*background: url('/upload//images/background/bg.jpg') no-repeat center center fixed;*/
	/*background: url('/images/bg01.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/
}
h1,h2,h3,h4,h5,h6,.site-title{
	text-align:center;
	font-family: 'Courgette', sans-serif;
	/*font-family: 'Open Sans', sans-serif;*/
}
h1{
	padding-left:15px;
	color:#652d91;
}

a{color:#652d91;text-decoration:none;}
a:hover{color:#955dC1;text-decoration:none;}
#content{
	margin:auto;
	width:100%;
	max-width:1100px;
	background:white;
	/*height: 100vh;*/
	-webkit-box-shadow: -7px 0px 20px 0px #333, 7px 0px 20px 0px #333;
	-moz-box-shadow: -7px 0px 20px 0px #333, 7px 0px 20px 0px #333;
	box-shadow: -7px 0px 20px 0px #333, 7px 0px 20px 0px #333;
}
#divlogo{text-align:center;}
#logo{width:100%;max-width:225px;margin-bottom:10px;}
#divmenu{
	position:relative;
	color:#652d91;
	font-family: 'Courgette', sans-serif;
	font-size:26px;
	padding-right:30px;
}
.vertical-middle{position: absolute;top: 50%;}
.align-right{text-align:right;}
.active {font-weight:bold;}
#leftmenu { display: none; line-height:180%;}
#leftmenu a { color: #FFF; padding: 5px 10px; border: none; }
#leftmenu .active{font-weight: bold; color:#A56dD1}
#leftmenu a:hover { color: #955dC1; }
.leftmenu{font-family:arial;color:#000;text-decoration:none;}
.leftmenu:hover{color:#000;}

#footer{
	padding-top:20px;
	background:#652d91;
	color:#FFF;
}
#footer a{
	color:#FFFFFF;
}
#footer a:hover{
	color:#C93;
}
.button{
	padding:8px 20px;background: #652d91;color:#FFF;border:1px solid #FFF;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		border-radius: 5px 5px 5px 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		opacity:0.8;filter:alpha(opacity=50);
}
.button:hover{
	background: #FFF;color:#652d91;border:1px solid #652d91;
}
.red{
	background: #F00 !important;
	color:#FFF;
	border:1px solid #900;
	font-size: 18px !important;
	font-weight:bold  !important;
	padding:10px 20px !important;
}
.red:hover{
	background: #900 !important;
	color:#FFF !important;
	border:1px solid #900 !important;
}

.margincontent{padding:5px 20px 30px 20px;}

/********************\
    FORM
\********************/
	.registrationform input,select,password,textarea{
		-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
		font:14px arial;
		border: 0px solid #000;
		margin:0px;
		padding:5px;
		background: #DDD;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		border-radius: 5px 5px 5px 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		opacity:0.8;filter:alpha(opacity=50);
		color:#000;
	}
	.registrationform input[type=text],input[type=email],input[type=password]{width:200px;}
	.registrationform input:hover, select:hover, textarea:hover{background: #777;}
	.registrationform input[type=submit],input[type=button]{padding:8px 20px;background: #652d91;color:#FFF;border:1px solid #FFF;}
	.registrationform input[type=submit]:hover, input[type=button]:hover{background: #FFF;color:#652d91;border:1px solid #652d91;}
	.registrationtable table{color:#FF0;}
	.registrationtable td{padding: 0px 0px 10px 0px;}


   #pageslide {
      /* These styles MUST be included. Do not change. */
      display: none;
      position: absolute;
      position: fixed;
      top: 0;
      height: 100%;
      z-index: 999999;
      
      /* Specify the width of your pageslide here */
      width: 260px;
      padding: 20px;
      
      /* These styles are optional, and describe how the pageslide will look */
      background-color: #333;
      color: #FFF;
      -webkit-box-shadow: inset 0 0 5px 5px #222;
      -moz-shadow: inset 0 0 5px 5px #222;
      box-shadow: inset 0 0 5px 5px #222;
  }
  
/******************\
   SIDE MENU
\******************/
#topcornermenu{position:absolute;top:10px;right:10px;background-color:rgba(0,0,0,.1);border:2px solid #652d91;border-radius:4px;padding:0 4px 4px 4px;}

.navbar{background-color:#652d91;}
.offcanvas{background-color:#652d91;}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {--bs-offcanvas-width: 300px;}

 #menu ul {
   margin: 0;
   padding: 0;
 }
 
 #menu .main-menu {
   display: none;
 }
 
 #tm:checked + .main-menu {
   display: block;
 }
 
 #menu input[type="checkbox"], 
 #menu ul span.drop-icon {
   display: none;
 }
 
 #menu li, 
 #toggle-menu, 
 #menu .sub-menu {
   border-style: solid;
   border-color: rgba(0, 0, 0, .05);
 }
 
 #menu li, 
 #toggle-menu {
   border-width: 0 0 1px;
 }
 
 #menu .sub-menu {
   background-color: #450d71;
   border-width: 1px 1px 0;
   margin: 0 1em;
 }
 
 #menu .sub-menu li:last-child {
   border-width: 0;
 }
 
 #menu li, 
 #toggle-menu, 
 #menu a {
   position: relative;
   display: block;
   color: white;
   text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
 }
 
 #menu, 
 #toggle-menu {
   /*background-color: #000;*/
 }
 
 #toggle-menu, 
 #menu a {
   padding: 1em 1.5em;
 }
 
 #menu a {
   transition: all .125s ease-in-out;
   -webkit-transition: all .125s ease-in-out;
 }
 
 #menu a:hover {
   background-color: white;
   color: #000;
 }
 
 #menu .sub-menu {
   display: none;
 }
 
 #menu input[type="checkbox"]:checked + .sub-menu {
   display: block;
 }
 
 #menu .sub-menu a:hover {
   color: #444;
 }
 
 #toggle-menu .drop-icon, 
 #menu li label.drop-icon {
   position: absolute;
   right: .2em;
   top: 1.25em;
 }
 
 #menu label.drop-icon, #toggle-menu span.drop-icon {
   border-radius: 50%;
   width: 1em;
   height: 1em;
   text-align: center;
   background-color: rgba(0, 0, 0, .125);
   text-shadow: 0 0 0 transparent;
   color: rgba(255, 255, 255, .75);
 }
 
 #menu .drop-icon {
   line-height: 1;
 }
 
 @media only screen and (max-width: 64em) and (min-width: 52.01em) {
   #menu li {
     width: 33.333%;
   }
 
   #menu .sub-menu li {
     width: auto;
   }
 }
 .offcanvas-body{display: flex; justify-content: flex-start;padding-left:0;margin-left:0}
 
 @media only screen and (min-width: 52em) {
    .offcanvas-body{display: flex; justify-content: flex-end;padding-left:0;margin-left:0}
    #menu .main-menu {
     display: block;
   }

   #toggle-menu, 
   #menu label.drop-icon {
     display: none;
   }
 
   #menu ul span.drop-icon {
     display: inline-block;
   }
 
   #menu li {
     float: left;
     border-width: 0 1px 0 0;
   }
 
   #menu .sub-menu li {
     float: none;
   }
 
   #menu .sub-menu {
     border-width: 0;
     margin: 0;
     position: absolute;
     top: 100%;
     left: 0;
     width: 12em;
     z-index: 3000;
   }
 
   #menu .sub-menu, 
   #menu input[type="checkbox"]:checked + .sub-menu {
     display: none;
   }
 
   #menu .sub-menu li {
     border-width: 0 0 1px;
   }
 
   #menu .sub-menu .sub-menu {
     top: 0;
     left: 100%;
   }
 
   #menu li:hover > input[type="checkbox"] + .sub-menu {
     display: block;
   }
 }
   
  
/******************\
   CHECK BOX
\******************/
	label {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	input[type=checkbox].css-checkbox {
		 margin-top:20px;
	    position: absolute;
		 overflow: hidden;
		 clip: rect(0 0 0 0);
		 height:1px;
		 width:1px;
/*		 margin:-1px; */
		 padding:0;
		 border:0;
	}

	input[type=checkbox].css-checkbox + label.css-label {
		padding-left:20px;
		/*margin-top:20px;*/
		height:15px;
		display:inline-block;
		/*line-height:15px;*/
		background-repeat:no-repeat;
		background-position: 0 0;
		font-size:15px;
		/*vertical-align:middle;*/
		cursor:pointer;
	}

	input[type=checkbox].css-checkbox:checked + label.css-label {
		background-position: 0 -15px;
	}

	.css-label{
		background-image:url(/images/dark-check-green.png);
	}
    .inputmorespace{margin:10px 0;}

	/*specific classes related to Checkbox skins*/

	.lite-red-check{background-image:url(/images/lite-red-check.png);}
	.lite-x-red{background-image:url(/images/lite-x-red.png);}
	.dark-check-green{background-image:url(/images/dark-check-green.png);}
	input[type=checkbox].css-checkbox.med + label.css-label.med {
		padding-left:22px;
		 height:17px;
		display:inline-block;
		line-height:17px;
		background-repeat:no-repeat;
		background-position: 0 0;
		font-size:15px;
		vertical-align:middle;
		 cursor:pointer;
	}

	input[type=checkbox].css-checkbox.med:checked + label.css-label.med {

		 background-position: 0 -17px;
	}
	input[type=checkbox].css-checkbox.sme + label.css-label.sme {
		padding-left:22px;
		 height:16px;
		display:inline-block;
		line-height:16px;
		background-repeat:no-repeat;
		background-position: 0 0;
		font-size:15px;
		vertical-align:middle;
		 cursor:pointer;
	}

	input[type=checkbox].css-checkbox.sme:checked + label.css-label.sme{

		 background-position: 0 -16px;
	}
	input[type=checkbox].css-checkbox.lrg + label.css-label.lrg {
		padding-left:22px;
		 height:20px;
		display:inline-block;
		line-height:20px;
		background-repeat:no-repeat;
		background-position: 0 0;
		font-size:15px;
		vertical-align:middle;
		 cursor:pointer;
	}

	input[type=checkbox].css-checkbox.lrg:checked + label.css-label.lrg{
		 background-position: 0 -20px;
	}

.textoverslide{color:#FFF;text-shadow: 1px 1px #003;margin:20px;font-size:40px;}
.divoverslide{padding-right:10px;margin:0px;top:30px;left:0px;opacity:0.8;background:#000;text-align:right;}
@media only screen and (max-width : 991px){
	.textoverslide{font-size:30px;}
	.divoverslide{height:40px;}
}
@media only screen and (max-width : 760px){
	.margincontent{padding:5px 10px 20px 10px;}
	.textoverslide{font-size:25px;}
	.divoverslide{height:50px;}
}
@media only screen and (max-width : 480px){
	.margincontent{padding:5px;}
	.textoverslide{font-size:14px;}
	.divoverslide{height:50px;}
}
.hover{cursor:pointer;}
.hover:hover{
	-webkit-box-shadow: 0px 0px 10px 0px #888;
	-moz-box-shadow: 0px 0px 10px 0px #888;
	box-shadow: 0px 0px 10px 0px #888;
	}

.columns3 {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

#slideshow { margin: 0px auto; overflow:hidden; position: relative; width: 340px; height: 340px; padding: 0px; box-shadow: 0 0 20px rgba(0,0,0,0.4); }
#slideshow > div { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; }
.row{margin:0;}