body { 
	background-color: #EEEEEE;
	background-image: url("../images/bg-grid.jpg");
	color: rgb(26,83,120);
	font-family: Helvetica, 'Helvetica Neue', 'Trebuchet MS', sans-serif;
	margin: 0px;
}

.main {
	padding: 134px 0px 0px 0px;
}

/* Navigation Header Section Styles */
.navHeader {
	overflow: hidden;
	background-color: rgb(255,255,255);
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 99;
}

.companyLogoImg {
	max-width: 240px;
	max-height: 120px;
	float: left;
	display: block;
	pointer-events: none;
}

.navBar {
	float: right;
	margin-top: 65px;
}

.navHeader a {
	float: left;
	text-decoration: none;
	padding: 10px 12px;
	font-size: 115%;
	color: rgb(26,83,120);
}

.navHeader a.navCurrent {
	color: rgb(220,105,10);
}

.navBar a:hover {
	background-color: #DDDDDD;
	border-radius: 10px;
}

/* Hide the link that should open and close the topnav on small screens */
.navHeader a.navIcon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 780px) {
  .navHeader a:not(:first-child) {display: none;}
  .navHeader a.navIcon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 780px) {
  .navHeader.responsive {position: relative;}
  .navHeader.responsive a.navIcon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navHeader.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .mainResp {padding: 0px 0px 0px 0px;}
}

.navFooter {
	display: inline-block;
	width: 100%;
	background-color: #DDDDDD;
	height: 4px;
}

/* Primary Content Section Styles */
.primaryContentRow {
	background-color: #FFFFFF;
	text-align:center;
	min-height:100px;
/*	display: inline-flex;
	height: 100%;
    width: 99%;*/
}

.primaryContentRow,
.primaryContentRow > .primaryContentCol {
    padding: 8px;
}

.primaryContentCol {
	background-color: #FFFFFF;
	min-height:100px;
	float: left;
    width: 32%;
}

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

.primaryContent {
}

.primaryContent p {
	color: rgb(10,67,100);
	padding-bottom: 5px;
}

/* Responsive layout - makes a one column-layout instead of three columns */
@media (max-width: 900px) {
    .primaryContentCol {
        width: 100%;
    }
}

.contentRow {
	display:inline-table;
}

/* Create two equal columns that floats next to each other */
.teamCol {
    display: inline-flex;
	height:100%;
    width: 49%;
}

/* Content */
.teamContent {
    background-color: rgb(225,225,225);
    padding: 10px;
	border: 2px,2px,2px,2px;
	border-style: dotted;
	margin-left: 25px;
	margin-right: 25px;
	height: 100%;
	width: 100%;
}

.teamContent img {
	max-width: 400px;
	max-height: 400px;
}

.empContact {
	text-align: left;
}


h1, h2, h3 {
	color: rgb(26,83,120);	 
}

.socialMedia {
	text-align: center;
	margin-top: 6px;
}
.socialMedia img{
	width:50px;
	height:50px;
}

/* Footer Section Styles */
footer {
	position:relative;
	width: 100%;
	text-align: center;
}




/* Gallery -------------------------------------------------------------------------------------------------------*/
.portRow {
    margin: 8px;
}

/* Add padding BETWEEN each column (if you want) */
.portRow,
.portRow > .portCol {
    padding: 8px;
}

/* Create four equal columns that floats next to each other */
.portCol {
    float: left;
    width: 23%;
}

/* Clear floats after rows */ 
.portRow:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.portContent {
    background-color: white;
    padding: 10px;
}

.portContent img {
	cursor: pointer;
    transition: 0.3s;
	border-radius: 8px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	width:100%
}

.portContent img:hover {
	opacity: 0.8;
	-ms-transform: skew(2deg, -4deg); /* IE 9 */
    -webkit-transform: skew(2deg, -4deg); /* Safari */
    transform: skew(2deg, -4deg);
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 1200px) {
    .portCol {
        width: 31%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 900px) {
    .portCol {
        width: 47%;
    }
}

@media (max-width: 700px) {
    .portCol {
        width: 100%;
    }
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 140px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}


.modalContent {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1024px;
}

.modalCaption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1024px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modalContent, .modalCaption { 
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modalContent {
        width: 100%;
    }
}


/* Contact -------------------------------------------------------------------------------------------------------*/

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: rgb(225,225,225);  /*was: #f2f2f2;*/
    padding: 20px;
	max-width: 600px;
	margin:0 auto;
	padding: auto;
/*	border-style: solid;*/
}