* {
    box-sizing: border-box;
}

/* Style the body */
body {
  font-family: 'News Cycle', Helvetica, Arial, sans-serif;
  color:#000000;
  font-size:30px;
  margin: 0;
  font-weight:400;
  line-height:1.5;
  letter-spacing:normal;
}
/* Headings */
h1 {
  font-size:42px;
  color:#ffffff;
  text-shadow: 2px 2px 2px #000000;
  text-align:center;
  margin:0px;
  line-height:1.3;
}

h2 {
  color:#ffffff;
  font-weight:normal;
  font-size:38px;
  text-shadow: 2px 2px 2px #000000;
  text-align:center;
}

h3 {
  color:#b5cee0;
  margin:10px;
  text-shadow: 2px 2px 2px #000000;
  font-size:20px;
}

/* Links */
a
  {
  color:#274ea5;
  text-decoration:none;
  } 
  
a:hover
  {
  color:#590c20;
  cursor:pointer;
  /*text-decoration:underline;*/
  border-bottom:1px dotted;
  padding-bottom:1px;
  }
  
/* Top Content */
.single-col-content {
    padding:30px 150px 30px 150px;
	width:100%;
	overflow:hidden;
}

/* Flex Column containers */
.row {  
    display: flex;
    flex-wrap: wrap;
	/*margin: 0px 40px 0px 40px;*/
	padding:0px 120px 0px 120px;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 35%;
    /* background-color: #f1f1f1; */
    padding: 10px 30px 30px 30px;
}

/* Main column */
.main {
    flex: 65%;
    /* background-color: white; */
    padding: 0px 30px 30px 30px;
}

/* Equal Flex Columns */
.col {
  flex: 1;
  padding: 30px;
}

.logo {
	width:100%;
	max-width:900px;
	margin:auto;
	display:block;
}

.joe  {
	max-width:300px;
	border:1px solid #000000;
	margin:auto;
	display:block;
	border-radius:15px;
}

/* Backgrounds */
.white-back {
	background:#ffffff;
}

.white-blue-gradient {
	background-image:linear-gradient(#ffffff, #b5cee0);
}

.board-back {
	background: url('../images/board-background.jpg') no-repeat center;
	text-align:center;
}

.demo {
	text-align:center;
	background: url('../images/wave-bg-3.png') no-repeat center;
	padding:10px 0px 30px 0px;
}

.services {
	background:#efefef;
}

.use-list {
	list-style-type:circle;
	font-family: 'News Cycle', sans-serif;
	font-size:38px;
	color:#000000;
	line-height:1.2;
	margin:auto;
	display:block;
}

/* Footer */
.footer {
    padding: 20px;
    text-align: center;
    background: #062e4b;
	background-size:cover;
	color:#ffffff;
	font-size:16px;
}

.footer a{
	color:#ffffff;
}

.footer a:hover{
	color:#d6c9aa;
}

.foot-logo {
	max-width:250px;
}

/* Mobile Only */
.mobile-only {
	display:none;
}

/* Contact Form */
/* 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 */
	font-size:18px;
    resize: none /* Allow the user to vertically resize the textarea or NOT (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #1868a0;
    font-size:24px;
    padding: 12px 50px 12px 50px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	color:#ffffff;
}

/* Change color on mouseover */
input[type=submit]:hover {
    background-color: #062e4b;
	color: #ffffff;
}

label{
	font-style:italic;
	padding-left:5px;
	font-size:18px;
	color:#1868a0;
}

.message-box {
	height:200px;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 700px) {
    .row {   
        flex-direction: column;
		padding:0;
    }
	.single-col-content {   
        flex-direction: column;
		padding:30px 30px 30px 30px;
    }
	.mobile-only {
		display:initial;
	}
	h1 {
		font-size:28px;
	}
	h2 {
		font-size:20px;
	}
	body {
		font-size:20px;
	}
	.use-list {
		font-size:24px;
		margin:0px 0px 0px 140px;
		padding:0px;
		line-height:1.5;
	}
	.col {
		padding:0px;
	}
	.joe {
		margin:20px auto;
	}
	.spacer {
		margin:0px 0px 20px 0px;
	}
}