/* ================================================================================ 
   =====                            CSS STYLES FOR                            ===== 
   =====                        SCHOOLWEBSITE.NU SKIN                         ===== 
   ================================================================================ */


/* ================================================================================ 
                                  GENERAL SETTINGS
   ================================================================================ */
   
   
@font-face { 
	font-family: "Ionicons"; 
	src: url("fonts/Ionicons/ionicons.eot"); 
	src: url("fonts/Ionicons/ionicons.eot#iefix") format("embedded-opentype"), 
		 url("fonts/Ionicons/ionicons.ttf") format("truetype"), 
		 url("fonts/Ionicons/ionicons.woff") format("woff"), 
		 url("fonts/Ionicons/ionicons.svg#Ionicons") format("svg");
	font-weight:normal;
	font-style:normal; 
}
 
 
/* font for headers */
@font-face {
    font-family: 'headerfont_bold';
    src: url('fonts/blubbold.eot');
    src: url('fonts/blubbold.eot?#iefix') format('embedded-opentype'),
         url('fonts/blubbold.woff') format('woff'),
         url('fonts/blubbold.ttf') format('truetype'),
         url('fonts/blubbold.svg#headerfont_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'headerfont_book';
    src: url('fonts/lubalgraph-soorh.eot');
    src: url('fonts/lubalgraph-soorh.eot?#iefix') format('embedded-opentype'),
         url('fonts/lubalgraph-soorh.woff') format('woff'),
         url('fonts/lubalgraph-soorh.ttf') format('truetype'),
         url('fonts/lubalgraph-soorh.svg#headerfont_bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

/* font for navigation menu */
@font-face {
    font-family: 'navfont';
    src: url('fonts/soorh-din-bold-soorh.eot');
    src: url('fonts/soorh-din-bold-soorh.eot?#iefix') format('embedded-opentype'),
         url('fonts/soorh-din-bold-soorh.woff') format('woff'),
         url('fonts/soorh-din-bold-soorh.ttf') format('truetype'),
         url('fonts/soorh-din-bold-soorh.svg#soorh-din-bold-soorh') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* font for navigation menu */
@font-face {
    font-family: 'navfontlight';
    src: url('fonts/soorh-din-regular-soorh.eot');
    src: url('fonts/soorh-din-regular-soorh.eot?#iefix') format('embedded-opentype'),
         url('fonts/soorh-din-regular-soorh.woff') format('woff'),
         url('fonts/soorh-din-regular-soorh.ttf') format('truetype'),
         url('fonts/soorh-din-regular-soorh.svg#soorh-din-regular-soorh') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* icons */
@font-face {
    font-family: 'fontomas';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#fontomas-webfont') format('svg');
    font-weight: normal;
    font-style: normal;

}
 

html {
    height:100%;               /* om hoogte op 100% te zetten in geval van te weinig content */
    margin:0px; 
    padding:0px; 
    overflow-y:scroll;         /* Altijd een scrollbalk afdwingen i.v.m. verspringingen */
}

body {
	text-align:left;
	font-family:Calibri, Helvetica, Arial, sans-serif;
	font-size:14px;
	line-height:1.5;
}

#Body { height:100%;}    /* Achtergrondkleuren + afbeeldingen hier */

#Form { height:100%; min-height:100%;}      /* om hoogte op minimaal 100% te zetten, mag wel groter */


/* HEADINGS */
H1, H2, H3, H4, H5 {font-family: headerfont_book,Verdana,Geneva,sans-serif; color:#000; font-weight:bold;}
H1 {font-size:24px;}
H2 {font-size:20px;}
H3 {font-size:16px;}
H4 {font-size:14px;}
H5 {font-size:12px;}

/* LINKS */ 
A:link      {color:#000; text-decoration:none; transition:color 0.3s ease;}
A:visited   {color:#000;}
A:hover     {color:#000; text-decoration:underline;}
A:active    {color:#000;}

.HomeContentPane A:link      {color:#fff; text-decoration:underline; transition:color 0.3s ease;}
.HomeContentPane A:visited   {color:#fff;}
.HomeContentPane A:hover     {color:#fff; text-decoration:underline;}
.HomeContentPane A:active    {color:#fff;}

/* TABLES */
table {font-size:inherit;}               /* om de lettergrootte in de editor gelijk te zetten */
table tr {}
table tr th {}
table tr td { vertical-align:top;}

/* DNN SPECIFIC */
.Head, .SubHead, .SubSubHead, .Normal, .NormalTextBox, .NormalRed, .NormalBold, .CommandButton { font-family: inherit; color:inherit; line-height:inherit; font-size:inherit}
.Head { font-size:15px;}          /* style for module titles */
.SubHead {font-size:14px;}        /* style of item titles on edit and admin pages */
.SubSubHead { font-size:13px;}    /* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.NormalBold { font-weight:bold;}

.ContainerFooter{margin-top:5px;}
.CommandButton {background-color:#000; padding:5px 10px; border-radius:3px;}                  /* text style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {color:#fff; text-decoration:none !important;}            /* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:visited {color:#fff; text-decoration:none;}
A.CommandButton:hover {color:#fff !important; text-decoration:underline !important;}    
A.CommandButton:active {color:#fff; text-decoration:none;}

.StandardButton {}                 /* button style for standard HTML buttons */

/* COMMON  ISSUES */
img {border:0px;}                  /* geen standaard rand bij afbeeldingen wanneer er gelinkt wordt */

input[type=submit], input[type=button] {}
input[type=submit]:hover, input[type=button]:hover {}

* { transition:background-color 0.3s ease;}


/* Clearfix */
.clear{clear:both; display:block; height:0; overflow:hidden; visibility:hidden; width:0;}
.clearfix:after{clear:both; content:'.'; display:block; font-size:0; height:0; line-height:0; visibility:hidden; width:0;}
* html .clearfix,:first-child+html .clearfix{zoom:1;}   

/* ================================================================================ 
                                     MAIN LAYOUT
   ================================================================================ */
   
#Background{position:fixed; width:100%; height:100%; background-size:cover; background-color:#fff; z-index:-1;}
#Background div{background-image:url(images/bg_overlay.png);width:100%;height:100%; opacity: 0.3;}  
  
.ControlPanel { }

#Wrapper { margin:0px auto; min-height:100%; text-align:left;}
#Wrapper {}
#Wrapper.Home{}
.InnerWrapper { margin:0px auto; padding: 0 20px; max-width:960px; position:relative; box-sizing:border-box; -webkit-box-sizing:border-box;}


/* HEADER SECTION  */
#Header {}
#Header .InnerWrapper { padding:0px;}

.BannerPane {z-index:25; min-height:150px; padding-bottom: 40px;}


#Header .Line{z-index:28; background-image:url(images/dotsanddashes/grey.png); width:100%; height:23px; position:absolute; top:38px; left:0; background-repeat:repeat-x;}

.Home #Header .Line{top:435px;}

#Header .LogoBg{ position:absolute; top:0; left:0; z-index: 30; background-image:url(images/logo_bg.png); height:133px; width:330px; background-repeat:no-repeat;}
#Header .Logo{/*background-image:url(images/logos/balans.png);*/ width:80%; height:80%; background-size:contain; background-repeat:no-repeat; margin-top:0; margin-left:10%;}
#Header .SamenLeren{z-index: 30; position:absolute; top:20px; right:0; background-image:url(images/samen-leren-wereldkidz.png); width:203px; height:63px;}
.Home #Header .SamenLeren{display:none;}
#Header .Search{position:absolute; top:80px; right:0; z-index:30;}
.Home #Header .Search{display:none;}
.Menu .Search{display:none;}
.Home .Menu .Search{display:inline-block;}


/* BANNER */
#Header .BannerItemWrapper {z-index:20; background-color:#fff; position:relative; height:450px;}
#Header .BannerItemWrapper .BannerItem { background-position:center center; background-size:cover; background-repeat:no-repeat; height:450px; position:absolute; top:0; left:0; width:100%;z-index:10; overflow:hidden;}
#Header .BannerItemWrapper .BannerItem + .BannerItem { z-index:9; }
#Header .BannerItemWrapper .BannerItem + .BannerItem  + .BannerItem { z-index:8;  }
#Header .BannerItemWrapper .BannerItem .BannerItemQuote{ color:#777; font-family:headerfont_book,Verdana,Geneva,sans-serif;display: block; height: 7.6em; margin-top: 6em; width: 17em; text-align: left; padding:10px; font-size:1.8em; font-weight:100; line-height:1.7em;}
#Header .BannerItemWrapper .BannerItem .BannerQuoteAuthor{color:#777; font-family:headerfont_book,Verdana,Geneva,sans-serif;display: block; font-size: .6em; color: #9b9b9b; white-space: nowrap;} 

/* SEARCH  */
.Search { text-align:left; font-size:13px; margin-top:30px;}
.Search .searchInputContainer{padding:0px 5px; margin:0px; border:2px solid #ccc; background-color:#fff; color:#7a7a7a; height:26px;}
.Search .SkinObject{font-family: "Ionicons"; font-size:18px; vertical-align:middle; color:#ccc; background-color:#7a7a7a; display:inline-block;padding:0px 5px; border:2px solid #ccc; margin:2px 0px 0px -4px; height:26px; font-weight:bold;} 
.Search .SkinObject:hover{text-decoration:none;}  
.Search .NormalTextBox { -webkit-appearance:none; border:0;}
.Search .NormalTextBox:focus { outline:none;} 
.Search .searchSkinObjectPreview, #Search .searchInputContainer a.dnnSearchBoxClearText  {display:none !important;  }


/* LOGIN  */	
#Login { text-align:right;}
#Login a.LoginKey {font-family: "Ionicons"; font-size:18px; opacity:0; transition:opacity 0.3s ease; color:#e5e5e5;text-align: right; top: 0px; position: absolute; left: 328px;z-index: 30;}
#Login a.LoginKey:hover { text-decoration:none; opacity:1; color:#9b9b9b;}

/* MENU SECTION */
#Menu { position:relative; width:100%;}


/* BREADCRUMB SECTION */
#Breadcrumb {}
#Breadcrumb .SkinObject {}

/* PANES SECTION */
#Content { }
#Content .Container { margin-bottom:40px;}
#Content .InfoPane .Container { margin-bottom:0;}

.one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth { float:left; margin-right:4%; box-sizing:border-box; -webkit-box-sizing:border-box;}
.one-half.last, .one-third.last, .two-third.last, .one-fourth.last, .three-fourth.last, .one-fifth.last, .two-fifth.last, .three-fifth.last, .four-fifth.last, .one-sixth.last, .five-sixth.last  { margin-right:0;}

.one-half { width:48%;}
.one-third { width:30.66%;}
.two-third { width:65.33%;}
.one-fourth { width:22%;}
.three-fourth { width:74%;}
.one-fifth {width:16.8%}
.two-fifth { width:37.6}
.three-fifth { width:58.4%}
.four-fifth { width:79.2%}
.one-sixth {width:13.33%}
.five-sixth {width:82.66%}


/* FOOTER SECTION */
#Footer { text-align:center}
#Footer A:link      { }
#Footer A:visited   { }
#Footer A:hover     { }
#Footer A:active    { }


/*SocialMedia*/
.SocialMediaIcons {padding:10px 0;}
.SocialMediaIcons a {font-family: "Ionicons"; margin:0 10px 0 0; font-size:32px; line-height:1; display:inline-block; vertical-align:top; zoom:1; *display:inline; }
.SocialMediaIcons a:hover { text-decoration:none} 


/* INFOPANE */
.InfoPane{background-color:#9b9b9b; color:#333333; font-family:navfontlight, navfont, Verdana, Geneva, sans-serif; font-size:13px; margin:30px 0px 0px 0; padding:20px 10px 20px 10px !important;}
.InfoPane h2{color:#fff; font-family: navfont, Verdana, Geneva, sans-serif; font-size:13px; font-weight:normal;line-height:normal; padding:0; margin:0px 0px 5px 0px;}
.InfoPane p{padding:0; margin:0;}
.Home .InfoPane{ display:none;}


/* HOMEPAGE */
.NewsPane .DnnModule .DNNModuleContent {}
.HomeContentPane .DnnModule .DNNModuleContent, .ContentPane .DnnModule .DNNModuleContent, .RightPane .DnnModule .DNNModuleContent{ padding:10px;}
.HomeContentPane .DnnModule .DNNModuleContent{background-color:#777; color:#fff;}
.ContentPane .DnnModule .DNNModuleContent{background-color:#fff; color:#5f5f5f;}
.ContentPane .DnnModule .DNNModuleContent.ModICRArticlesC {background-color: transparent; color:#5f5f5f; padding: 10px 0;}


.RightPane .DnnModule .DNNModuleContent{background-color:#777; color:#fff;}
.RightPane h2{color:#fff; margin:0; padding:0; font-size:18px}
.HomeContentPane h1{font-family:headerfont_book,Verdana,Geneva,sans-serif; font-size:1.3em; line-height:1.4em; color:#fff }


/* CONTAINER TABS */
.CustomContainerHeader{display:inline-block; color:black; font-size:12px; font-weight:700px; text-transform:uppercase; padding: 2px 50px 2px 10px; background-image:url("images/tabs/top_lightgrey.png"); background-position:right top;}
.Menu .CustomContainerHeader{width:45%;}
.ContainerFooterLink{display:inline-block; float:right; color:#fff !important; font-size:12px; font-weight:700px; text-transform:uppercase; padding: 2px 10px 2px 40px; background-image:url("images/tabs/bottom_black.png"); background-position:left bottom; text-decoration:none !important; cursor:pointer;}
.ContainerFooterLink:hover{background-image:url("images/tabs/bottom_orange.png"); text-decoration:underline !important;}
.Home .Menu .CustomContainerHeader{display:none}

/* MAIN CONTENT TITLE STYLING */
div.BigTitle{}
div.BigTitle H1{color:#fff; background-color:#777; display:inline-block; padding:0px 10px; margin:0px 0px 10px 0px;}


/* ================================================================================ 
                                     MENU'S
   ================================================================================ */
  


#Menu { position:relative; z-index:960; isolation:isolate; padding:0;  }
.DesktopMenu .RadMenu_MainMenu .rmHorizontal{white-space: nowrap; position:relative; display: flex;}
.DesktopMenu .RadMenu_MainMenu ul,
.DesktopMenu .RadMenu_MainMenu li { margin:0px; padding:0px; list-style:none;}   

/* !!!!!!!!!!   Fake RadMenu */

/* --ROOT-- */
.DesktopMenu .rmHorizontal .rmSlide {display:block !important; box-sizing:border-box;  z-index:111; top:100%; left:0; overflow:hidden;  height:0; position: absolute; }
.DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmLast > .rmSlide {left:auto; right:0}
.DesktopMenu .rmHorizontal .rmGroup {opacity:0; transition:opacity 0.3s ease, transform 0.3s ease; transform:translate(0,-10px);   } 
.DesktopMenu .rmHorizontal .rmItem {margin: 0px;  padding: 0px; position: relative; clear: none; }
.DesktopMenu .rmHorizontal .rmItem .rmLink {  cursor: pointer;   text-decoration: none; display:block;  margin: 0px;  padding: 0px;  }  
.DesktopMenu .rmHorizontal .rmItem .rmLink .rmText{width:100%; box-sizing: border-box;  padding:0px 10px;   line-height: 30px;  font-size: 22px;   display: block;  white-space: normal;  color:#000;}
/*first,last,only*/
.DesktopMenu .rmHorizontal .rmItem.rmFirst{}
.DesktopMenu .rmHorizontal .rmItem.rmLast {}
.DesktopMenu .rmHorizontal .rmItem.rmOnly {}
/*expanded,hover,selected,breadcrumb*/
.DesktopMenu .rmHorizontal.rmRootGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText  {}
.DesktopMenu .rmHorizontal.rmRootGroup .rmItem:hover > .rmLink .rmText {color:#ff00ff; }
.DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmSelected > .rmLink > .rmText {color:#ff00ff; }
.DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmBreadcrumb > .rmLink > .rmText {color:#ff00ff; }

/*--SUB--*/
.DesktopMenu .rmHorizontal .rmLevel0 .rmGroup  {transform:translate(-20px, 0px); }
.DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide { overflow:visible; height:auto; transform:translate(0px, 0px); padding:0px; border-radius:15px;}
.DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide > .rmGroup {opacity:1; transform:translate(0px, 0px);}  
.DesktopMenu .rmHorizontal .rmSlide .rmItem:hover .rmSlide  {left:100%; top:0;}
.DesktopMenu .rmHorizontal .rmGroup .rmItem {width:100%; margin:0;}
.DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink {margin:0; padding:0; width:100%; display:block;}
.DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText{ min-width:175px;  color:#fff; line-height:40px;  font-size:18px; padding:0 30px; white-space:nowrap;}
/*first,last,only*/
.DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst {}
.DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst > .rmLink > .rmText{}
.DesktopMenu .rmHorizontal .rmGroup .rmItem.rmLast > .rmLink > .rmText{}
.DesktopMenu .rmHorizontal .rmGroup .rmItem.rmOnly > .rmLink > .rmText{}
/*expanded,hover,selected,breadcrumb*/
.DesktopMenu .rmHorizontal .rmGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText  {}
.DesktopMenu .rmHorizontal .rmGroup .rmItem:hover > .rmLink .rmText {color:#ff00ff}
.DesktopMenu .rmHorizontal .rmGroup .rmItem.rmSelected > .rmLink > .rmText {color:#ff00ff}
.DesktopMenu .rmHorizontal .rmGroup .rmItem.rmBreadcrumb  > .rmLink > .rmText {color:#ff00ff}


/* !!!!!!!!!!   Fake Panelbar / submenu */
.DesktopMenu  ul.rmRootGroup.rmVertical  {width:100%;   position: relative;    z-index: 100;}
.DesktopMenu .rmVertical .rmSlide {position:static}
.DesktopMenu .rmVertical .rmGroup{transform:translateY(0px); transform:translateX(0px);}
.DesktopMenu .RadMenu ul.rmRootGroup{ background-color:transparent; border:0;}
.DesktopMenu .rmVertical .rmItem {padding:0}
.DesktopMenu .rmVertical .rmItem .rmLink .rmText{ min-width:100px; background-color:#ff00ff;  color:#fff; font-size:14px; margin:0 !important;padding:3px 8px !important; display: block; font-weight:700;}
.DesktopMenu .rmVertical .rmSlide  {display:none !important}
.DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide   {display:block !important; height:auto; }
.DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide > .rmGroup  {opacity:1}
 /*sub*/
.DesktopMenu .rmVertical .rmSlide .rmItem {padding-left:0px;}
/*expanded,hover,selected,breadcrumb */
.DesktopMenu .rmVertical .rmItem .rmLink .rmText:hover { text-decoration: underline !important; }
.DesktopMenu .rmVertical .rmItem:has(.rmSlide:hover) > .rmLink > .rmText  {  }
.DesktopMenu .rmVertical .rmItem:hover > .rmLink > .rmText {  }
.DesktopMenu .rmVertical .rmItem .rmSelected > .rmLink > .rmText {  }
.DesktopMenu .rmVertical .rmItem.rmBreadcrumb  > .rmLink > .rmText {  }

.DesktopMenu .rmVertical .rmGroup .rmItem .rmLink .rmText{ padding:3px 12px !important; display: block; background-color: #7db873;font-size:12px;font-weight: 400; }
/* .DesktopMenu .rmItem .rmLink:hover{color:#fff;} */


.Home .DesktopMenu{margin-top:25px !important;}
.Home .DesktopMenu .rmItem .rmLink .rmText {background-color:#fff; color:#ff00ff; }
.Home .DesktopMenu .rmItem .rmLink .rmText:hover {text-decoration: underline; }
/* .Home .DesktopMenu .rmVertical .rmItem .rmLink:hover .rmText { color:#ff00ff; } */





/* ================================================================================ 
                                 MOBILE MENU
   ================================================================================ */   

#MobileMenu * {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);  -webkit-touch-callout: none;  -webkit-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none;}
.MobileMenuHeader {font-size:50px; font-family: "Ionicons"; line-height:50px; cursor:pointer; color:#fff; display:none; background-color:#9b9b9b;text-align:right;padding-right:5px;}
.MobileMenuHeader.active { color:#fff; transition:all .12s ease-in-out;}

#MobiNav { margin:0; text-align:left; display:none; padding:0; background-color:#777; }
#MobiNav ul {list-style:none; margin:0; padding:0 0 0 20px;}
#MobiNav li {list-style:none; margin:0; padding:0 0 0 10px;}
#MobiNav .item {font-family: navfont,Verdana,Geneva,sans-serif; min-height:40px; line-height:40px; border-bottom:1px solid #f0f0f0; position:relative; }
#MobiNav .item a {color:#fff !important}
#MobiNav .item a:hover, #MobiNav .item.selected > a {text-decoration:none; color:#fff !important}
#MobiNav .item.selected > a{font-weight:700}
#MobiNav .item a:hover{text-decoration:underline;}
#MobiNav .item.haschild:after { font-family: Calibri,Helvetica,Arial,sans-serif; position:absolute; top:0px; right:0px; margin:5px 4px 0 0;  height:30px; width:30px; display:block; font-size:32px; line-height:0.75; color:#fff !important; background-color:#9b9b9b; text-align:center; cursor:pointer;  transition:all .12s ease-in-out; content:"+"; cursor:pointer;}
#MobiNav .item.haschild:hover:after { background-color:#fff; color:#9b9b9b !important; cursor:pointer;}
#MobiNav .item.haschild.active:after { content:"-";cursor:pointer;} 
#MobiNav .item .subLevel {display:none;} 
#MobiNav .item.haschild.active > .subLevel {display:block;}
#MobiNav .subLevel .item.first {border-top:1px solid #f0f0f0;}
#MobiNav .item.last {border-bottom:0;}


.Home .MobileMenuHeader {color:#9b9b9b; background:none; text-align:left;}
.Home .MobileMenuHeader.active { color:#777;}
.Home #MobiNav {background-color:#fff;}
.Home #MobiNav .item a {color:#777 !important}
.Home #MobiNav .item a:hover, .Home #MobiNav .item.selected > a {color:#777 !important}
.Home #MobiNav .item.haschild:after { color:#fff !important; background-color:#9b9b9b;}
.Home #MobiNav .item.haschild:hover:after { color:#fff; color:#9b9b9b; cursor:pointer;}


/* ================================================================================ 
                                 SCROLL 2 TOP
   ================================================================================ */
#back-to-top, .touch-device #back-to-top:hover { background-color:#9b9b9b; color:#fff; opacity:0.7; bottom:10px; display:none; height:45px; position:fixed;	right:10px; text-shadow:none; transition:all .2s ease; width:45px; z-index:980;	line-height:45px; text-align:center; font-family: "Ionicons"; font-size:28px; border-radius:25px;}
#back-to-top:hover {background-color:#9b9b9b; color:#fff; opacity:1; text-decoration:none;}


/* ================================================================================ 
                                 PUBLICATIE MODULE
   ================================================================================ */
/* ARTICLE LIST */
.pubArticleList {}
.pubArticleList h1 {}

.pubArticleList .pubItem { margin-bottom: 20px;} 
.pubArticleList .pubItem:nth-child(3n+3) { margin-right: 0 !important;} 

.pubArticleList .pubItem .pubContent {padding:10px; background-color: #fff; min-height:150px;}
.pubArticleList .pubItem .pubContent .pubTitle{font-weight:bold;}
.pubArticleList .pubItem .pubContent .pubSummary {}
.pubArticleList .pubItem .pubContent .pubThumbNail{ width:100%;height:100px;background-size:cover; background-position:center center; margin-bottom:7px;}

.pubArticleList .pubControls {}
.pubArticleList .pubControls span, .pubArticleList .pubControls a{display:inline-block;background-color:#fff; padding: 5px 10px; font-weight:bold; float:left; margin-right:3px;}
.pubArticleList .pubControls table tr td:first-child{display:none;}
.pubArticleList .pubControls table tr td:last-child span:first-child, .pubArticleList .pubControls table tr td:last-child a:first-child, .pubArticleList .pubControls table tr td:last-child span:nth-child(2), .pubArticleList .pubControls table tr td:last-child a:nth-child(2){display:none;}
.pubArticleList .pubControls table tr td:last-child span:last-child, .pubArticleList .pubControls table tr td:last-child a:last-child, .pubArticleList .pubControls table tr td:last-child span:nth-last-child(-n+2), .pubArticleList .pubControls table tr td:last-child a:nth-last-child(-n+2){ display:none;}


/* ARTICLE DETAILS */
.pubArticleDetails {background-color:#fff; padding:10px;}
.pubArticleDetails h1 { }
.pubArticleDetails .pubMetaData { color:#999; font-size:11px; margin-bottom:7px;}
.pubArticleDetails .pubContent { margin-bottom:10px;}
.pubArticleDetails .pubReturnLink { overflow:hidden;}
.pubArticleDetails .pubReturnLink a { float:right;}

/* ARTICLE VIEWER */
.pubArticleViewer {}
.pubArticleViewer .pubItem {}
.pubArticleViewer .pubItem .pubTitle {font-size:14px; font-weight:bold;}
.pubArticleViewer .pubItem .pubMetaData {font-size:11px; color:#999;}

.pubArticleHomeViewer {}


.pubArticleHomeViewer .pubItem { background-color:#777; color:#fff; padding:10px;}
.pubArticleHomeViewer .pubItem .pubTitle {font-weight:bold;}
.pubArticleHomeViewer .pubItem .pubThumbNail{ width:100%; height:100px;background-size:cover; background-position:center center; margin-bottom:7px;}



/* PUB CONTACT ITEM */
.pubContactItem .pubContent{min-height:0 !important;} 
.pubContactItem .pubContent{}
.pubContactItem .left{float:left;}
.pubContactItem .right{float:right;}
.pubArticleList .pubItem .pubContent .right .pubThumbNail{ width:100px;height:100px;background-size:cover; background-position:center center; margin-bottom:7px;}





/* COMMENT VIEWER */
.pubCommentViewer .pubItem {}
.pubCommentViewer .pubItem .pubMetaData {font-size:11px; color:#999;}

/* SIDEBAR */
.pmsb_wrap { }
.pmsb_wrap .pm_block {}
.pmsb_wrap .pm_block .pm_block_header {  }
.pmsb_wrap .pm_block ul { }
.pmsb_wrap .pm_block ul li {  }
.pmsb_wrap .pm_block ul li a,
.pmsb_wrap .pm_block ul li span {  }


/* ================================================================================ 
                                CONTAINER LAYOUT'S
   ================================================================================ */
.Container {}
.ContainerHeader { }
.ContainerContent {}
.ContainerFooter {}


/* ================================================================================ 
                                   QUICK FIXES
   ================================================================================ */

/* -- footer fixed to bottom -- */ /*
#Wrapper { position: relative;}
#Panes { padding-bottom: 100px; }            
#Footer { position: absolute; width: 100%; height: 100px; bottom: 0px; margin-top: 20px;}
*/
.icr_options_and_folders_wrap, .CurrentCategoryTitle,.CurrentCategoryIntro, #icr_adv_optionsblock {background-color:#ffffff; padding:5px;}



/* ================================================================================ 
                                   2SX Smoelenboek
   ================================================================================ */
   
.ContentPane .DnnModule .DNNModuleContent.Mod2sxcC{background-color:transparent;}   
   
.SmoelenboekWrapper{}
.SmoelenboekItem{background-color:#fff; margin-bottom:30px;}

.SmoelenboekInfoWrapper{padding:30px; box-sizing:border-box; display:flex; justify-content:space-between;}
.SmoelenboekInfoWrapper .SmoelenboekImg{width:120px; height:120px; background-size:cover; background-repeat:no-repeat; background-position:center center;}
.SmoelenboekInfoWrapper .SmoelenboekInfo{width:calc(100% - 150px)}
.SmoelenboekInfoWrapper .SmoelenboekInfo .SmoelenboekName{font-family: headerfont_book,Verdana,Geneva,sans-serif; font-size:20px; display: inline-block; padding: 5px 10px;  margin-bottom:10px; background-color:#e84225; color:#fff; font-weight:bold;}
.SmoelenboekInfoWrapper .SmoelenboekInfo .SmoelenboekFunction{font-family: headerfont_book,Verdana,Geneva,sans-serif; font-size:16px; font-weight:bold; color:#6268a5; margin-bottom:5px;}
.SmoelenboekInfoWrapper .SmoelenboekInfo .SmoelenboekDescr{}
.SmoelenboekInfoWrapper .SmoelenboekInfo .SmoelenboekMail{display:inline-block; vertical-align:middle; font-family: headerfont_book,Verdana,Geneva,sans-serif; font-size:12px; font-weight:bold; color:#6268a5; transition:all 0.3s ease;}
.SmoelenboekInfoWrapper .SmoelenboekInfo .SmoelenboekMail:hover{text-decoration:none; color:#e84225;}
.SmoelenboekInfoWrapper .SmoelenboekInfo .SmoelenboekMail:before{content:"\f0e0"; font-family:"Font Awesome 5 Free"; display:inline-block; vertical-align:middle; font-size:16px; margin-right:10px; font-weight:normal;}

.SmoelenboekDays{background-color:#f49500; color:#fff; font-family: headerfont_book,Verdana,Geneva,sans-serif; font-size:16px; display:flex; justify-content:space-between; padding:10px 30px;}
.SmoelenboekDays .SmoelenboekDaysDescr{width:150px;}
.SmoelenboekDays .SmoelenboekDaysBlock{width:calc(100% - 150px)}
.SmoelenboekDays .SmoelenboekDaysBlock .Days{display:inline-block; margin-right:25px; vertical-align:middle;}
.SmoelenboekDays .SmoelenboekDaysBlock .Days:before{content:""; width:15px; height:15px; display:inline-block; background-color:#fff; margin-right:15px; vertical-align:middle;}
.SmoelenboekDays .SmoelenboekDaysBlock .Days.on:before{background-color:#e84225;}

.SmoelenboekItem:nth-of-type(2n) .SmoelenboekInfoWrapper{flex-direction:row-reverse;}

.SmoelenboekItem:nth-of-type(2n+1) .SmoelenboekInfoWrapper .SmoelenboekInfo .SmoelenboekName{background-color:#2e3687;}
.SmoelenboekItem:nth-of-type(2n+1) .SmoelenboekDays{background-color:#6268a5; }
.SmoelenboekItem:nth-of-type(2n+1) .SmoelenboekDays .SmoelenboekDaysBlock .Days.on:before{background-color:#2e3687;}


@media only screen and (max-width: 450px) {	

	.SmoelenboekInfoWrapper,
	.SmoelenboekItem:nth-of-type(2n) .SmoelenboekInfoWrapper{flex-direction:column;}
	.SmoelenboekInfoWrapper .SmoelenboekImg{margin-left:auto; margin-right:auto; margin-bottom:30px;}
	.SmoelenboekInfoWrapper .SmoelenboekInfo{width:100%;}
	.SmoelenboekDays{flex-direction:column;}
	.SmoelenboekDays .SmoelenboekDaysDescr,
	.SmoelenboekDays .SmoelenboekDaysBlock{width:100%;}
	.SmoelenboekDays .SmoelenboekDaysBlock{max-width:170px;}

}




/* ================================================================================ 
                                   MEDIA QUERIES
   ================================================================================ */
   
@media only screen and (max-width: 1000px) {	
	#Header .Search{right:20px;}
}

@media only screen and (max-width: 768px) {	
	/*.InnerWrapper { max-width:480px}*/
	.MobileMenuHeader, .MobileMenuHeader.active ~ #MobiNav {display:block;}
	.Menu .CustomContainerHeader{display:none;}
	.RadMenu, .RadPanelBar  {display:none;}	
	.one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth {float:none; margin-right:0; width:100%;}
	#Header .BannerItemWrapper { height:250px;}
	#Header .BannerItemWrapper .BannerItem {height:250px}
	.Home #Header .Line{top:235px;}
	.BannerItemQuote{display:none !important}	
	.NewsPane{margin-top:30px;}
	.InfoPane{display:none;}
}   

@media only screen and (max-width: 640px) {	
	.SamenLeren,
	.Line,
	.BannerPane{display:none;}
	.Search{ display:none !important}
	.HomeContent{padding-top:150px;}
} 



