/**
 * default.css
 *
 * This file adds all the default styles to the website and set's
 * an standard for the programmers to work with.
 *
 * @author    Mark de Mol
 * @version   1.0
 */

	body {
		margin:0;
		padding:0;	
		line-height: 26px;
		font-family: 'Open Sans' !important;
		color: #555b57;
	}
	
	
	body.static {
		overflow:hidden;
		-ms-overflow-y:scroll;/* fix for Windws phone 8.1 */
		height:100%; /* fix for Windws phone 8.1 */
	}
	
	#devicegrade {
		position: fixed; 
		z-index:100;
		border:none;
		bottom: 120px;
		left: 20px;
		display: none;
		font-family: Verdana;
		font-size: 12px;
		font-weight:bold;
		text-align: center;
		
	}
	
	#devicegrade > div {
		position:fixed;
		width: 40px;
		height: 40px;
		line-height: 40px;
		color: #fff;
		background-color: #602272;
		border-radius: 50px;
	}
	
	#devicegrade.active {
		display:block;	
	}
	
	.scroll-div {
		position:fixed;
		right:50px;
		bottom:50px;
		margin:0 auto;
		text-align:center;
		opacity:0;
		z-index:10;
	}
	
	.scroll-div > i {
		font-size:24px;	
		line-height:40px;
		display:block;
		position:fixed;
		/*background:rgba(221,221,221,0.80);*/
		border-radius:5px;
		width:40px;
		height:40px;
	}
	
	.scroll-div > i:hover {
		cursor:pointer;	
		/*background:rgba(221,221,221,0.90);*/
		border-radius:5px;
		opacity:0.8;
	}
	
	img {
		height: auto;
		max-width: 100%;
	}

	table th,
	table td {
		white-space: normal;
		padding:5px 5px 5px 5px;
		vertical-align:top;
	}
	
/*
* Force to keep childeren withing their parent.
*/

	*,
	*:before,
	*:after {
	  -webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
			  box-sizing: border-box;
	}


/*
* Allow us to float & clear easily.
*/

	.float-left {
		float:left;	
	}
	
	.float-right {
		float:right;	
	}
	
	.clear {
		clear:both;
	}	
	
	.clear-left{
		clear:left;
	}	
	
	.clear-right{
		clear:right;
	}	

/*
* Style the rows by default
*/

	.row {
		width: 100%;
		max-width:100%;
		float:left;
	}
		
	.row > div {
		margin: 0 auto;
		max-width: 1200px; 
		padding: 0px 30px;  
		position:relative;
	}
	
	.row.full-site-width > div {
		max-width:100%;
		padding:0;
	}
	
	.row.full-container-width > div .padding {
		padding:0;
	}
	
	.row.full-site-width > div > .group > .margin > .padding,
	.row.full-site-width > div > .group > .margin > .padding > .article > .margin > .padding{
		padding:0;
	}
		
	.group{
		float:left;	
	}


/*
* Style the width's 
*/	
	
	.width-100{
		float:left;
		width:100%;
	}
	.width-95{
		float:left;
		width:95%;
	}
	.width-90{
		float:left;
		width:90%;
	}
	.width-85{
		float:left;
		width:85%;
	}
	.width-80{
		float:left;
		width:80%;
	}
	.width-75{
		float:left;
		width:75%;
	}
	.width-70{
		float:left;
		width:70%;
	}
	.width-66{
		float:left;
		width:66.6%;
	}
	.width-65{
		float:left;
		width:65%;
	}
	.width-60{
		float:left;
		width:60%;
	}
	.width-55{
		float:left;
		width:55%;
	}
	.width-50{
		float:left;
		width:50%;
	}
	.width-45{
		float:left;
		width:45%;
	}
	.width-40{
		float:left;
		width:40%;
	}
	.width-35{
		float:left;
		width:35%;
	}
	.width-33{
		float:left;
		width:33.3%;
	}
	.width-30{
		float:left;
		width:30%;
	}
	.width-25{
		float:left;
		width:25%;
	}
	.width-20{
		float:left;
		width:20%;
	}
	.width-15{
		float:left;
		width:15%;
	}
	.width-10{
		float:left;
		width:10%;
	}
	
	/*
	* start of sidebar + hamburger menu
	*/
	.toggle-wrap {
		padding: 6px 5px;
		position: relative;
		cursor: pointer;
		float: left;
		z-index:9001;
		position:absolute;
		background-color: #441149;
		left: 10px;
		top: 10px;
	  
	  	/*disable selection*/
	  	-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	.toggle-bar,
	.toggle-bar::before,
	.toggle-bar::after,
	.toggle-wrap.active .toggle-bar,
	.toggle-wrap.active .toggle-bar::before,
	.toggle-wrap.active .toggle-bar::after {
		-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;
	}

	.toggle-bar {
		width: 30px;
		margin: 10px 0;
		position: relative;
		border-top: 3px solid #454545; /* color & strength middle bar */
		display: block;
	}
	
	.toggle-bar,
	.toggle-bar::before,
	.toggle-bar::after {
		width:30px;	
	}
	
	.toggle-bar::before,
	.toggle-bar::after {
		content: "";
		display: block;
		background: #454545;
		height: 3px;
		position: absolute;
		top: -10px;
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-ms-transform-origin: 17%;
		-webkit-transform-origin: 17%;
		transform-origin: 17%;
	}
	
	.toggle-bar::after {
	  top: 4px;
	}
	
	.menu-list-wrap.active .toggle-wrap .toggle-bar {
	  border-top: 3px solid transparent;
	}
	
	.menu-list-wrap.active .toggle-wrap .toggle-bar::before {
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		margin-left:2px;
	}
	
	.menu-list-wrap.active .toggle-wrap .toggle-bar::after {
		-ms-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		margin-left:2px;
	}
	/*
	* end of sidebar + hamburger menu
	*/
	
	
	/*
	* Style the menu's 
	*/
	.menu {
		background-color:#443360;
		margin-top: -3px;
	}
	

	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu {
		float:left;
		padding-left:21px;
	}
	
	.row > div > div.group > .margin > .padding ul.menu {
		padding:0;
		margin:0;
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu li {
		list-style:none;	
		position:relative;
		
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu > li {
		display:inline-block;	
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu li a {
		text-decoration:none;	
		font-size:14px;
		padding:7px 18px;
		display:block;
		color:#fff;
		font-weight:400;
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu li .drop-down {
		display:none;	
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu li.currentpath a {
		color:#fff;
		font-weight:bold !important;
		position:relative;
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu li.currentpath::after {
		position:absolute !important;
		width:100% !important;
		height:3px !important;
		background-color:red !important;
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu > li ul {
		display:none;	
	}
	

	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu > li:hover > a {
		color:#fff;
		font-weight:bold;
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu > li:hover > ul {
		display:none;	
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu > li > ul { /* first submenu*/
		position:absolute;
		z-index:10;
		background-color:#C8C8C8;
		left:0;
		right:0;
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu > li > ul > li:hover > a {
		color:#000;	
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu > li > ul > li > ul  { /* second submenu*/
		position:absolute;
		top:0;
		left:150px;
		background-color:#BBBBBB;
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu > li > ul > li:hover > ul {
		display:block;
		min-width:150px;
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu > li > ul > li > ul > li > ul {/* third submenu*/
		position:absolute;
		top:0;
		left:150px;
		background-color:#ACACAC;
	}
	
	.row > div > div.group > .margin > .padding > .article >.margin > .padding > ul.menu > li > ul > li > ul > li:hover > ul {
		display:block;
		min-width:150px;
	}
	
	.row > div > div.group > .margin > .padding .article.item-image .image-background-wrap {
		display:none;
	}
	
	.row > div > div.group > .margin > .padding .article.item-image .image-background.item-image {
		height:150px;	
		width:100%;
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center 10%;
		position:relative;
	}
	
	.row > div > div.group > .margin > .padding .article.item-image .image-background.item-image > i {
		color:#fff;
		position:absolute;
		right:10px;
		bottom:10px;
		font-size:20px;
	}	
	
	
	.menu-list-wrap {
		position:absolute;
		width:70px;
		height:70px;
		overflow:hidden;
		display:none;
	}
	
	.menu-list-wrap.active {
		position:fixed;
		height:100%;
		width:100%;
		top:0;
		bottom:0;
		left:0;
		right:0;
		z-index:9999;
		
	}
	
	.menu-list-wrap > .overlay {
		background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
		cursor: pointer;
		width:100%;
		height:100%;
		opacity:0;
		position:fixed;
		z-index:0;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
		overflow:hidden;
	}
	
	.menu-list-wrap.active > .overlay {
		opacity:1;	
		z-index: 7000;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
		overflow:hidden;
	}

	
	.menu-list-wrap > .menu-list {
		position:fixed;
		background-color:#fff;
		margin-left:-85%;
		width:85%;
		height:100%;
		overflow-y:auto;
		z-index:8000;

		-webkit-transition: all .4s ease-in-out;
		-moz-transition: all .4s ease-in-out;
		-o-transition: all .4s ease-in-out;
		transition: all .4s ease-in-out;
	}
	
	.menu-list-wrap.active .menu-list {
		margin-left:0;	
		z-index:9000;
	}
	
	
	.menu-list-wrap.active .toggle-wrap.active {
	
		background-color:#fff;	
	}
	
	.menu-list-wrap.active .toggle-bar::before,
	.menu-list-wrap.active .toggle-bar::after {
		background-color:#fff;
	}
	
	.menu-list-wrap .menu-list .static-wrap ul {
		padding:0;
		margin:0;	
	}
	
	.menu-list-wrap .menu-list .static-wrap {
		position:static; 
		left:0; 
		right:0; 
		top:0; 
		bottom:0; 
		overflow:hidden;
	}
	
	.menu-list-wrap .menu-list  .static-wrap > .article {
		margin-top:73px;
	}
	
	.menu-list-wrap .menu-list  .static-wrap > .article > .margin > .padding {
		padding:0;	
	}
	
	
	.menu-list-wrap .menu-list  .static-wrap ul li {
		list-style:none;
		list-style-image:none;	
		position:relative;
	}

	
	.menu-list-wrap .menu-list  .static-wrap ul li > a {
		text-decoration:none;
		color:#45124A;
		border-bottom: 1px solid #cacaca;
		padding:14px 50px 14px 10px;
		display:block;
		font-family:16px;
	}
	
	

	.menu-list-wrap .menu-list .static-wrap ul li span.drop-down{
		display:block;
		position:absolute;
		right:0;
		top:0;
		width:50px;
		height:50px;
		text-align:center;
		line-height:50px;
	}
	.menu-list-wrap .menu-list .static-wrap ul li span.drop-down {
		display:none;
	}
	
	.menu-list-wrap .menu-list .static-wrap ul li.has-children > span.drop-down {
		display:block;
		cursor:pointer
	}
	
	.menu-list-wrap > .menu-list .static-wrap ul li span.drop-down > i {
		font-size:22px;	
		color:#494949;
		
	}
	
	.menu-list-wrap > .menu-list .static-wrap ul li:hover a,
	.menu-list-wrap > .menu-list .static-wrap ul li:hover::after {
		color:#b6859a;	

	}
	
	
	.menu-list-wrap > .menu-list .static-wrap ul li ul {
		background-color:#F1F1F1;
	}
	
	.menu-list-wrap > .menu-list .static-wrap ul li ul li ul {
		background-color:#F8F8F8;
		padding-left:20px;
	}
	
	.menu-list-wrap > .menu-list .static-wrap > ul > li > ul,
	.menu-list-wrap > .menu-list .static-wrap > ul > li > ul > li > ul {
		display:none;	
	}
	
	.menu-list-wrap > .menu-list .static-wrap > ul > li.active > ul,
	.menu-list-wrap > .menu-list .static-wrap > ul > li.active > ul > li.active > ul {
		display:block;
	}
	
	.menu-list-wrap > .menu-list a:hover {
		color:#1986CB;	
	}
	.menu-list-wrap > .menu-list .static-wrap ul li.currentpath a,
	.menu-list-wrap > .menu-list .static-wrap ul li.currentpath::after {
		color:#fff;	
		background-color:#45124A;
	}
	
	.menu-list-wrap > .menu-list .static-wrap ul li.currentpath .drop-down i {
		color:#fff;
	}
	
	.menu-list-wrap > .menu-list .static-wrap ul li ul > li > a {
		padding-left:30px;	
		border-bottom:none;
	}
	
	.menu-list-wrap > .menu-list .icon-bar {
		position:fixed;
		overflow:hidden;
		height:73px;
		background-color:#fff;
		z-index:1000;
		width:85%;
		top:px;
	}

	.menu-list-wrap > .menu-list .icon-bar.shadow {
		-webkit-box-shadow: -13px -10px 20px 5px #8F8F8F;
		box-shadow: -13px -10px 20px 5px #8F8F8F;
	}
	
	.menu-list-wrap > .menu-list .icon-bar > div {
		float:right;
		width:50px;
		height:50px;
		line-height:50px;
		margin:0 auto;
		display:none;
	}
	
	.menu-list-wrap > .menu-list .icon-bar > div i{
		font-size:22px;
		cursor:pointer;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper {
		position:relative;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper > .image {
		position:relative;
		z-index:3;	
	}

	.article.item-image > .margin > .padding > .item-image-wrapper > .item-image-text {
		padding:10px;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-0 > .item-image-text {
		display:none;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-1 > .image {
		position:relative;
		z-index:3;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-1 > .item-image-text {
		position:absolute;
		z-index:5;
		background:rgba(255,255,255,0.70);
		left:3%;
		max-width:94%;
		bottom:3%;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-1 > .item-image-text > a {
		text-decoration:none;
		font-weight:normal;
		color:#000;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-1 > .item-image-text > a:hover {
		color:#000;
		cursor:pointer;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-2 > .image {
		float:right;
		width:40%;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-2 > .item-image-text {
		float:left;
		width:60%;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-3 > .image {
		float:left;
		width:40%;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-3 > .item-image-text {
		float:left;
		width:60%;
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-4 > .image {
		
	}
	
	.article.item-image > .margin > .padding > .item-image-wrapper.text-location-4 > .item-image-text {
	
	}