* {
    box-sizing: border-box;
}

body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
	/*color:#4B6A88;*/
	color:grey;
	width: 1000px;
    padding: 20px 0;
    margin: 0 auto;    
}
main {
	padding:50px 0 100px 0;	
	clear:both;
}

footer {
	
	background-color:#f1f1f1;
}


h2{
	color:#FF4500;
	font-weight:500;

}

input[type=text], textarea, select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}



label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit]:hover {
    background-color: #45a049;
}

input[type=reset] {
    background-color: red;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=reset]:hover {
    background-color: #f44242;
}	

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-weight:100;
	color: grey;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-weight:100;
	color: grey;
}

::-ms-input-placeholder { /* Microsoft Edge */
    font-weight:100;
	color: grey;
}

form {
	font-weight:200;
	font-size: 20px;
	padding: 10px 10px 80px 10px;
	background-color:#efecc4;
}

/* Style the header */
.header {
	float:  left;
	color:  grey;
	font-size: 25px;
	margin:0px;	
	width: 100%;
	text-align: center; 
	padding: 0px;
}



.img-header{
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
	
	
}

.img-main{
	clear:both;
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}





/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
    
}

/* Left and right column */
.column.side {
    width: 15%;
	
}

/* Middle column */
.column.middle {
    width: 100%;
	
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
   .column.middle {
    width:100%;
  }
}


.col {
	float: left;
	text-align: center;
	
	height: 250px;	
	padding: 70px 0;
	
	
	width: 100%;
	display: block;
	margin: auto;
	
}
.col.first {
	width: 25%;		
	
}
.col.second {
	width: 25%;	
	
}
.col.third {
	width: 25%;
	
}
.col.fourth {
	width: 25%;	
	
}






.footercol {
	float: left;
	padding: 10px;
}
.footercol.left {
	width: 50%;	
}
.footercol.middle {
	width: 50%;	
}
@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .footercol.left, .footercol.middle {
    width:100%;
  }
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Style the footer */
.footer {
	
	/*border-top: 1px solid #939393 ; 	*/
    padding: 10px;
	color: #939393 ; 	
   
}
.nav-wrapper{
	padding-top: 50px;
	padding-bottom:50px; 
    
}

ul.topnav {
	border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
	
}


ul.topnav li {
	display:inline;
}

ul.topnav li a {
    
    color: grey ;
    background-color: white;
    text-align: center;    
    text-decoration: none;
	display:inline-block;
    padding:10px;
	
	
}

ul.topnav li a:hover:not(.active) {background-color: #D24D57; color:white;} 

ul.topnav li a.active {background-color: #4B6A88; color:white;}

ul.topnav li.right {float: right;}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column.side, .column.middle {
        width: 100%;
    }
    /*
	ul.topnav li.right, 
    ul.topnav li {float: none;display:none;}
    */
}


.responsiveHeader {
    width: 100%;
    max-width: 500px;
    height: auto;
}



table {
    width:100%;
	height:100%;
	border: 0px solid #ccc;
}
table, th, td {
    
    border-collapse: collapse;
}
th, td {
    padding: 0px;
    text-align: left;
}
table.tblHrsOp caption{padding: 20px; font-size:20px; #939393 ;}

table.tblHrsOp tr:nth-child(even) {
    /*background-color: #f1f1f1;*/
	font-size:20px;
	color: #939393 ;
	padding-bottom: 20px;
}
table.tblHrsOp tr:nth-child(odd) {
   
   font-size:20px;
   color: #939393 ;
   padding-bottom: 20px;
}
table.tblHrsOp th {
	background-color:lightgrey;	
    
	padding-bottom: 10px;
}



.box{
	transition: transform .2s; /* Animation */
	width: 100%;
	display: block;
	margin: auto;
	
}
.box:hover {
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.zoom {
    
    transition: transform .2s; /* Animation */
    display: block; /*for the img inside your div */  
	margin-left: auto ;
	margin-right: auto ;
	width: 100%;
    max-width: 500px;
	min-width: 500px;
    height: auto;
    margin: 0 auto;
	text-align: center;
	
	background-color: lightgrey;
}

.zoom:hover {
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}




div.gallery {
    border: 0px solid #ccc;
}

div.gallery:hover {
    border: 0px solid #777;
}

div.gallery img {
    
    height: 200;
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 88%;
	
}


@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 50%;
    }
}

div.gallery2 {
    border: 0px solid #ccc;
}

div.gallery2:hover {
    border: 0px solid #777;
	transform: scale(1.9);
}

div.gallery2 img {
    
    height: 700;
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
	
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 50%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}