html,
body {
	/*margin:0;
    font-family:'Segoe UI';
	padding:0;
	height:100%;
    cursor:default;
    border-top:6px solid #000;*/
}
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
header, .ColumnContainer, footer, #wrapper, nav {position:relative;}
#wrapper {
    padding: 0;
    margin: 0;
    height: auto;
}
	 	 

/**************************Nav menu**********************************************************/
.menu{display:block;
      background:#9CA3DA;
}
 
.menu li{display: inline-block;
position: relative;
z-index:100;}
 
.menu li a 
{
font-weight:600;
border-right:1px solid #97a1b4;
text-decoration:none;
padding:11px;
display:block;
color:#ffffff;
-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}
 
.menu li a:hover, .menu li:hover > a{color:#ffffff;
background:#6D79C9;}

/* hide the second level menu */
.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 45px;
left: 0px;
background: #ffffff;
}

/* display second level menu on hover */
.menu li:hover > ul{ display: block;
}
 
.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}

.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;}
 
.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}

.toggleMenu {

    height:30px;
    background: #666;
    padding: 5px 10px;
    color: #fff;
    cursor:pointer;
    border-style:none;
}
.toggleMenu:hover 
{
    background:#3E4156;
color:#ffffff;
text-decoration:none;
}
/***********************Nav menu- No Javascript*************************************************************/

#wrapper {
	min-height:100%;
}
/*header {
	padding:10px;
    height:150px;
	background-color:#f7f7f7;
    border-bottom:3px solid #fff; 
    border-style:none none solid none; 
    box-shadow:0 0 10px #eee;
    top: 0px;
    left: 0px;
}*/
.ColumnContainer {
	padding-bottom:100px;
    top: 0px;
    left: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}
.column1 {
    border:1px solid #c2c2c2;
    margin:auto;
    padding:10px;
   
}
footer {
	width:100%;
    padding:10px;
	height:80px;
	position:fixed;
    margin-bottom:10px;
    border-top:1px solid #bbb;
	bottom:0;
	left:0;
	background-color:#ccc;
}
#lfooter {
    left:10px;
    width: 30%;
    position:absolute;
}
#rfooter {
    right:10px;
    width:30%;
    position:absolute;
}
 /******** Responsive Images ***************************/
img{vertical-align:middle}
.img-responsive,.thumbnail>img,.thumbnail a>img,.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;width:100% \9;max-width:100%;height:auto}
.img-rounded{border-radius:6px}
.img-thumbnail
{
    display:inline-block;width:100% ;max-width:100%;height:auto;padding:4px;
    line-height:1.42857143;background-color:#fff;border:1px solid #ddd;
    border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}
.img-circle{border-radius:50%} 
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}

 /* Responsive Images */
img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }
/******** Responsive Images ***************************/

/*GRID SYSTEM*/
.grid-container{
    width: 100%; 
    max-width: 1200px;
    margin:auto;  
      
}

/*-- our cleafix hack -- */ 
.row:before, 
.row:after {
    content:"";
    display: table ;
    clear:both;
}

[class*='col-'] {
    float: left; 
    min-height: 1px; 
    width: 16.66%;
     line-height:28px;  
    /*-- our gutter -- */
    padding: 12px; 
    /*background-color: #FFDCDC;*/
}

.col-1{ width: 16.66%; }
.col-2{ width: 33.33%; }
.col-3{ width: 50%;    }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%;   }

.outline, .outline *{
    /*outline: 1px solid #F6A1A1;*/ 
}


/*-- some extra column content styling --*/
[class*='col-'] > p {
 /*background-color: #FFC2C2;*/ 
 padding: 0;
 
 margin: 0;
 text-align: justify; 
 color: #222; 
}
/***************/


/******************************************************************************************** MEDIA QUERIES */
@media screen and (max-width: 48em/*768px*/ ) {
        html {
        font-size:0.8125em;
    }
        img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }
        /*grid system*/
        .col-1{ width: 33.33%;  }
    .col-2{ width: 50%;     }
    .col-3{ width: 83.33%;  }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }

    .row .col-2:last-of-type{
        width: 100%; 
    }

    .row .col-5 ~ .col-1{
        width: 100%; 
    }
    /*grid system*/

 /*Menu*/
 
.show-menu{
    display:block;
}
 
.menu ul{
    margin:0;
background:none;
position: static;
display: none;
}
 
.menu li{display:block;
margin-bottom: 1px;
margin:0;

}
 .menu ul li, li a {
		width: 100%;
	}
.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;}
 
.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#797979;
border-left:3px solid #9CA3DA;
}

/*level 2 and 3 - make same width as all items*/
.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;
}
/*Menu*/

/**/
}
@media all and (max-width:650px)
{
    img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }
    .col-1{ width: 100%;     }
    .col-2{ width: 100%;    }
    .col-3{ width: 100%;    }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }

}

/* Then progressively add bigger sizes from small to large */

/* Smartphones start somewhere around here */
@media (min-width: 300px) {
    img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }
}

/* You might do landscape phones here if your content seems to need it */
@media (min-width: 450px) {
    img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }
}

/* Starting into tablets somewhere in here */
@media (min-width: 600px) {
    img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }
}

/* Perhaps bigger tablets */
@media (min-width: 750px) {
    img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }
}

/* Desktop screen or landscape tablet */
@media (min-width: 900px) {
    img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }
}

/* A bit bigger if you need some adjustments around here */
@media (min-width: 1100px) {
    img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }
}

/* Widescreens */
@media (min-width: 1500px) {
}
/******************************************************************************************** MEDIA QUERIES */