/*
 * Global resets
 */

html {
  font-size: 18px;
}

body {
   background-color: #fff;
}


h2, h3 {
  font-size: 24px;
  font-weight: 300;
}




/*

 * Masthead
 */

.masthead {
  padding: 27px;
}
.masthead a {
  color: #717171;
}
.masthead a:hover {
  color: #7a7a7a;
}

/* make logo adjustable */
.masthead img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

/* Masthead (headings and download button) #563d7c */
.masthead-title {
  align:left;
  margin-top: 0;
  margin-bottom: 14px;
  line-height: 1;
}
.masthead-title a {
  color: #005C7F;
}
.masthead-lead {
  margin-bottom: 14px;
  font-weight: 100;
  font-size: 11px;
  color:#717171;
}
.masthead-lead a {
  font-weight: normal;
}

/* Nav links */
.masthead-nav {
  list-style: none;
  padding-left: 0;
  margin-bottom: 14px;
  font-size: 15px;
}
.nav-item {
  display: block;
}
.nav-link {
  line-height: 1.6;
}
.nav-link-active {
  font-weight: 500;
  color: #3a3a3a;
}

/* Dividers */
.masthead-hr {
  width: 130px;
  margin-top: 18px;
  margin-bottom: 18px;
  border-top-color: #eee;
  border-bottom: 0;
}

@media (min-width: 768px) {
  .masthead {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
    max-width: 380px;
    padding: 54px 36px;
  }
}

@media (min-width: 768px) and (min-height: 700px) {
  .masthead {
    position: fixed;
  }
}

@media (min-width: 1170px) {
  .masthead {
    width: 25%;
  }
}




/*
 * Listing and pages
 *
 * Series of entries.
 */

.listing {
  max-width: 900px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.entry,
.page,
.list {
    margin-top:    0px;
  margin-bottom: 0px;
}

@media (min-width: 768px) {
  .listing {
    margin-left: 35%;
    width: 65%;
    padding-left: 0;
  }
  .entry,
  .page,
  .list {
    margin-top:    40px;
    margin-bottom: 20px;
  }
}

@media (min-width: 1170px) {
  .listing {
    width: 70%;
	margin-left: 27.5%;
    margin-right: 2.5%;
  }
}





/*
 * Showcase entries
 *
 * Thumbnails for the grid of entries on the homepage and individual post pages.
 */

/* Markdown override */
.entry p {
  margin-bottom: 0;
}

.entry-icon {
  position: absolute;
  display: block;
  text-align: center;
  top: 50%;
  left: 0;
  right: 0;
  font-size: 6rem;
  color: #fff;
  text-shadow: 0 0 3rem rgba(0,0,0,.15);
  opacity: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: opacity .2s linear;
  transition-delay: .05s;
}

.youtube {
  position: relative;
  display: block;
  border-radius: 3px;
}

.youtube img {
  display: block;
  width: 100%;
  transition: opacity .2s linear;
}
.youtube:hover img {
  opacity: .90;
}

.youtube:hover {
  opacity: .90;
}

.youtube:hover .entry-icon {
  opacity: 1;
}


.image img {
  display: block;
  width: 100%;
 }




.entry-content {
  text-align: center;
}
.entry-title {
   margin-top: 18x;
  margin-bottom: 4px;
}
.entry-title a {
	color:#005C7F;
 
}
.entry-title a:hover {
  color: #7a7a7a;
}
.entry-date {
  font-weight: 300;
  color: #3a8a8a;
}


.related {
  padding-top: 3rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-top: 1px solid #e5e5e5;
}
.related-title {
  font-weight: 300;
}
.related .entry {
  margin-top: .5rem;
  margin-bottom: 1rem;
}
.related p {
  font-size: 18px;
}

.YouTubeFramePosition{
margin-top: 30px;	
margin-left: 25px;
}


/*
 * Footer
 */

.footer {
  margin: 30px 0;
  padding: 20px 15px;
  color: #999;
  text-align: center;
}
.footer p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 30px;
}


.colhead {
font-family: Verdana, Arial;font-size: 18px; font-style: normal; color:#717171; padding: 10px 0px 10px 0px; text-align: left;}

.colbody {
font-family: Verdana, Arial;font-size: 14px; font-style: normal; color: #717171; padding: 10px 0px 10px 0px; text-align: justify;}

h1{
font-family: Verdana, Arial;font-size: 24px;  font-weight:normal; color:#0091D0; padding: 10px 0px 10px 0px; line-height: 30px; text-align: center;}


/* Search Box */

.searchbox {

    background-image:url(search.png);
    width:220px;
	z-index:20;
    background-position:left;
	background-repeat:no-repeat;
    padding-left:25px;
	padding-bottom:4px;
	background-color: transparent;
	border-width: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	font-size: 14px; 
	font-style: normal; 
	color:#717171;
}

.searchbox:hover, .searchbox:focus {
    background-image:url(search.png);
    background-color:#fff;
	
}

/* Forum Styles */

#virtualcontainer
{
margin-left:0px;
margin-top:75px;	
list-style-type: disc;
}

.forumheader{font-family: Bahnschrift,Verdana,Arial; text-align:left; font-weight:900; color:#239BED; font-size:22px;}

.header3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; color:#239BED; padding-top: 5px;padding-bottom: 5px;}

.mextra { height: 1px; 
line-height: 1px;
 margin-top: 18px;
  margin-bottom: 18px;
  background:#eee;
  border-bottom: 0;}

.mgrey{font-family: Verdana, Arial; font-size: 14px; font-style: normal; format: normal; color: #239BED; padding-top: 10px; padding-bottom: 10px; background-color: none;} /*  #f3f3f3 */
.mwhite {height: 1px; line-height: 1px; background:#d2d2ce; margin-top: 4px; margin-bottom: 4px;}

.dupdirtext {font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px; font-style: normal; color: #239BED; padding-top: 5px;padding-bottom: 5px; width:650px;}
.messageeven{padding-top: 10px; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; -webkit-border-radius: 10px; /* Webkit - Safari prototype */ -moz-border-radius: 10px; /* Gecko browsers */ border-radius: 10px; /* Everything else #dfefff / sijmon blue: #e4f1fc you tube blue #e6efff */ width: 650px;; border: 1px solid #d2d2ce; background-color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; format: normal; color:#717171; text-align: justify;}
.messageodd{padding-top: 10px; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; -webkit-border-radius: 10px; /* Webkit - Safari prototype */ -moz-border-radius: 10px; /* Gecko browsers */border-radius: 10px; /* Everything else */ width: 650px;
border: 1px solid #d2d2ce; background-color: #f8f8f8; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; format: normal; color:#717171; text-align: justify;}
.snormal {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; format: normal; color: #717171; margin: 0 0 0 0;}

.composebutton
{display:block; width:0;
overflow:visible;
color: #239BED;
background-color: #f8f8f8;
font-family:verdana, arial;
font-size:12px;
padding: 2 5 2 5;
margin-bottom: 10px;
margin-top:10px;
width: 100px;
border: 1px solid #d2d2ce;
border-radius: 4px;
-webkit-border-radius: 4px;  
-moz-border-radius: 4px; 
}

.composebutton[class] { /* IE ignores [class] */
width: auto;
}
.composebutton-hover
{
display:block;
width:0;
overflow:visible;
color:#239BED;
background-color: #f8f8f8;
font-family:verdana, arial;
font-size:12px;
text-decoration: underline;
padding: 2 5 2 5;
margin-bottom: 10px;
margin-top:10px;
border: 1px solid #d2d2ce;
border-radius: 4px;
-webkit-border-radius: 4px;  
-moz-border-radius: 4px; }

.composebutton-hover[class] { /* IE ignores [class] */
width: auto;
}

.bodytext1 {font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 18px; font-style: normal; color:#717171; padding-top: 5px;padding-bottom: 5px;}
.bodytext2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; color: #717171; padding-top: 5px;padding-bottom: 5px;}
.bodytext3 {font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px; font-style: normal; color: #717171; padding-top: 5px;padding-bottom: 5px;}
.bodytext4 {font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px; font-style: normal; color: #717171; padding-top: 5px;padding-bottom: 5px;}


/* Terms & Conditions */
.termsandconditions
{
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
font-style: normal; 
color: #717171; 
margin-left: 0px;
text-align: justify;	
}

/* Page Loader */
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #fafafa;

	}
	
/* Picture Sijmon Handling */


@media (max-width:767px)
{
.textsijmon
{
margin-top: 5px;
margin-left: 15px;	
margin-right: 10px; 
font-size: 11px
}
}

@media (min-width:768px) and (max-width:991px)
{
.textsijmon
{
margin-top: 5px;
margin-left: 15px;	
margin-right: 10px; 
font-size: 11px
}
}

@media (min-width:992px) and (max-width:1199px)
{
.textsijmon
{
margin-top: 0px;	
margin-left: 130px;	
margin-right: 10px; 
font-size: 11px
}
}

@media (min-width:1200px)
{
.textsijmon
{
margin-top: 0px;	
margin-left: 130px;	
margin-right: 10px; 
font-size: 11px
}
}	

a {
  color: #3a3a3a;	
}

a:hover {
  color: #7a7a7a;
  text-decoration: none;
}


 


*{
    margin:0;
}
html, body {
    height:100%;
}
.overlay {
    position:absolute;
    display:none;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:rgba(0, 0, 0, 0.8);
    z-index:9999;
}


@media screen and (max-width: 1079px) {
  h1.entry-title {
    font-size: clamp(28px, 4vw, 36px) !important;
    margin-left: 0 !important;
    line-height: 1.1 !important;
  }
}

/* Extended Action Button 2025 Styling */
/* Extended Action Button 2025 Styling */
/* Extended Action Button 2025 Styling */

/* Wrapper for extended action buttons */
.ca-btn-wrapper {
    text-align: left;
    margin-top: 15px;
    margin-bottom: 10px;
}

.ca-newbtn {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    border-radius: 4px;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px;color:#717171;font-weight:500;
    text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ca-newbtn img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: middle;
}

.ca-newbtn span {
    vertical-align: middle;
}

/* Hover: slightly darker grey background + slightly darker border */
.ca-newbtn:hover {
	color: #333;
    background: #ececec;
    border-color: #ccc;
}

/* Contact Form 2025 Styling */
/* Contact Form 2025 Styling */
/* Contact Form 2025 Styling */

/* Master font size and wrapper */
.contact-form-wrapper {
	background: #f7f7f7;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
	width: max-content;
	border: 1px solid #ddd;
    background: #f7f7f7;
    border-radius: 4px;
}

/* Base form */
.contact-form {
    text-align: left;
    font-size: 12px;
    color: #717171;              /* <— input+textarea text */
}

/* Labels */
.contact-form .form-label {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 0px;
    color: #717171;
}


/* Inputs + textarea text color */
.contact-form .form-control {
	 width: 450px;      
    font-size: 11px;
	padding: 5px 8px;
    border-radius: 4px;
    border-color: #d2d6de;
    color: #717171 !important;    /* <— form field text */
}

/* Placeholder color */
.contact-form ::placeholder {
    color: #717171 !important;    /* <— placeholder text */
    opacity: 1;                   /* required for Firefox */
}

/* Focus state */
.contact-form .form-control:focus {
    border-color: #f15a4a;
    box-shadow: 0 0 0 0.12rem rgba(241, 90, 74, 0.15);
}

/* Spacing */
.contact-form .mb-2 {
    margin-bottom: 8px !important;
}

/* Submit button */
.contact-form .btn-danger {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    border: none;
}

/* Helper text */
.contact-form p.small {
    font-size: 11px !important;
    color: #717171 !important;    /* same gray tone */
    margin-top: 4px;
}


/* Slimmer form-control inputs and textareas */
input.form-control,
textarea.form-control {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    line-height: 1.2;
    height: auto;        /* allow height to adjust */
}

/* Optional: for very consistent height */
input.form-control,
textarea.form-control {
    min-height: 18px;
}


.contact-form .form-control {
    max-width: 234px;     /* or any size you prefer */
}


/* CSS Footer Logo Scroller 2025 Styling */
/* CSS Footer Logo Scroller 2025 Styling */
/* CSS Footer Logo Scroller 2025 Styling */

/* Outer viewport (mask) */
.logo-scroller {
  overflow: hidden;
  width: 100%;
  position: relative;
  font-size:13px;
  font-style:italic;
  font-family:Verdana, Arial;
  color:#717171;
  text-align:left;
}

/* Moving track */
.logo-track {
  display: flex;
  animation: scroll-logos 25s linear infinite;
}

/* Ensure logos line up horizontally */
.logo-track ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}

/* Optional: Slight transparency hover effect */
.logo-track img {
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.logo-track img:hover {
  opacity: 1;
}

/* Animation */
@keyframes scroll-logos {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}