/* --------------contact form------------------ */
html{
	width:100%;
	height: 100%;
	background-color: #ffffff;
}
body {
	/* height: 100%; */
	width: 74%;
	margin: 0 13%!important;
	background-position: center;
	background-image: url("../images/roughcloth.png");
	background-repeat: repeat;
	border-left: 5px solid #801818;
	border-right: 5px solid #606060;
}
img.logo {
	max-width: 30%;
}
.columnLogo {
	margin:3% auto!important;
	/* margin-left: auto; */
	width: 80%;
	text-align: center;
}
@media screen and (max-width: 600px) {
	.columnLogo {
		width: 98%;
		margin: auto!important;
		margin-top: 2%;
		/* float: none; */
	}
}
h1{
	font-family: Cinzel!important;
	font-size: 2em;
	font-weight:700;
	color: #801818!important;
	text-align: center;
	padding-top: 2em;
}
.containerForm {
	width:100%;
}

#screen {
	display: none;	
}
/* ----- spans ----- */
.center {
	text-align: center!important;
	margin-top: -1em;
	padding-left: 10%;
	font-family: 'Lato', sans-serif;
	font-style: italic;
	font-size: .85em!important;
	color: green;
	display: block;
}
.italSm {
	font-size: .75em!important;
	font-style: italic;
	letter-spacing: .05em;
	font-family: 'Lato', sans-serif;
	text-align: center!important;
}

/*----- form -----*/
.flex {
  list-style-type: none!important;
  padding: 0;
  max-width: 800px;
  margin: 0 3%;
}
.flex li {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content:flex-start;
}  
.flex > li:not(:last-child) {
  margin-bottom: 20px;
}
.flex > li > label + * {
  flex: 1 0 220px;
}
.flex2 {
	border: 2px solid #801818;
	border-radius: 7px;
	background-color: #ffffff;
	padding-top: 2px;
	width: 60%;
}
figure {
	display: inline-block;
	float: right;
	border: 2px solid white;
	border-radius: 7px!important;
	margin-left: 5%!important;
}
figcaption{
	font-family: 'Lato', sans-serif;
	font-weight: 300; 
	font-size: .70em!important;
	font-style: italic;
	letter-spacing: 1px;
	line-height: 1.2em;
}
.timeLine {
	color: black;
	font-weight: 700;
	font-size:1em;
	font-family: 'Lato', sans-serif;
	width: 85%!important;
	list-style-type: none!important;
	/* margin-left:.2em; */
} 
li.details {
	color: black;
	font-weight: 700;
	font-size:1em;
	font-family: 'Lato', sans-serif;
	width: 85%!important;
	list-style-type: none!important;
	margin-bottom: 12em;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

/* ------ inputs ------ */
button, input, select, label {
	font-family: 'Lato', sans-serif;
	font-size: 100%;
	cursor: pointer;
	outline: none;
}
 label {
	font-family: "Lato", sans-serif!important;
	color: #000000;
	/* vertical-align: bottom!important; */
	padding-top: 5px;
	
}
input[type="text"]{
	width: 85%!important;
	padding: 3px!important; /*padding inside input box*/
	border: 1px solid #556b2f;
	border-radius: 7px;
	background-color: white!important;
	display:inline-block;
	font-family: "Lato", sans-serif!important;
}
input[type="text"]:hover {
	background-color: #606060!important;
	border: 2px solid #556b2f!important;
	border-radius: 7px;
	color: #ffffff!important;
}
input[type="text"]:focus {
	background-color: #606060!important;
	border: 2px solid #556b2f!important;
	border-radius: 7px;
	color: #ffffff!important;
}
input[type="email"] {
	width: 85%!important;
	padding: 3px!important; /*padding inside input box*/
	border: 1px solid #556b2f;
	border-radius: 7px;
	background-color: white!important;
	display:inline-block;
	font-family: "Lato", sans-serif!important;
} 
input[type="email"]:hover {
	background-color: #606060!important;
	border: 2px solid #556b2f!important;
	border-radius: 7px;
	color: #ffffff!important;
}
input[type="text"], input[type="email"] {
	text-indent: .75em;
}
input::-webkit-input-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
}
input:hover::-webkit-input-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
	color: #ffffff!important;
	font-size: 1em;
}
input:focus::-webkit-input-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
	color: #ffffff!important;
	font-size: 1em;
}
input::-moz-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
} 
input:hover::-moz-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
	color: #ffffff;
	font-size: 1em;
}
input:focus::-moz-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
	color: #ffffff!important;
	font-size: 1em;
}
input::-ms-input-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
}
input:hover::-ms-input-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
	color: #ffffff!important;
	font-size: 1em;
}
input:focus::-ms-input-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
	color: #ffffff!important;
	font-size: 1em;
}
.radio-buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.radio-buttons input[type="radio"] {/* hides standard radio buttons */
  opacity: 0;
  position: fixed;
  width: 0;
}
.radio-buttons label {
    display: inline-block;
    background-color: #fff;
    padding: 1px 20px 0px 20px;
    font-family: "Lato", sans-serif;
    font-size: 1em;
    /* border: 2px solid #444; */
    border-radius: 7px;
}
.radio-buttons label:hover {
  background-color: #606060;
  color: #fff;
}
/* .radio-buttons input[type="radio"]:focus + label { */
    /* border: 2px dashed #801818; */
	/* background-color: #606060; */
/* } */
.radio-buttons input[type="radio"]:checked + label {
    background-color: #801818;
    border-color: #801818;
	color: #fff;
	padding-bottom: 2px;
}
/* ----- calendar ----- */
.coc-block-row {
	margin-bottom: 10px;
	margin-left: 20%;
	border-radius: 7px;
	background-color: #ffffff;
	width: 60%;
	padding: 5px;
}
.coc-block {
	font-family: quicksand, sans-serif;
	font-weight: 700;
	font-style: normal;
	padding-left: 10px;
	width: 100%;
	display: flex;
	flex-direction:row;
	flex-wrap: nowrap;
	justify-content: space-between!important;
}
.coc-block-label {
	font-size: .85em;
	display: inline-block;
	width: 45%;
	margin-right: 5%;
	display: flex;
	flex-direction:row;
	flex-wrap: nowrap;
	justify-content: space-between!important;
	padding-top: 7px;
}
.form-control {
	width: 25%;
	margin-right: 5%;
}
/* ----- end calendar ----- */

textarea {
	padding: 7px!important;
	border-radius:7px;
	border: 1px solid #556b2f;
	background-color: #ffffff;
	font-family: "Lato", sans-serif!important;
	font-size: 1.2em!important;
	width: 60%!important;
}
textarea:hover{
	background-color: #606060;
	border: 2px solid #556b2f!important;
	border-radius: 7px;
	color: #ffffff!important;
}
textarea:focus{
	background-color: #606060;
	border: 2px solid #556b2f!important;
	border-radius: 7px;
	color: #ffffff!important;
	font-family: "Lato", sans-serif!important;
	font-size: 1em;
}
::-webkit-input-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
}
:hover::-webkit-input-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
	color: #ffffff!important;
}
:focus::-webkit-input-placeholder{
	font-family: "Lato", sans-serif!important;
	font-style: italic!important;
	color: #606060!important;
}
button[type="reset"] {
	margin: 0 47%!important;
	background-color: rgba(255,255,255,0.60)!important;
	border-radius: 50%!important;
	border: 0px solid #ffffff;
	height: 2em!important;
	font-size: .75em!important;
	color: green!important;
}
button[type="reset"]:hover {
	background-color: rgba(0,128,0,0.60)!important;
	color:#ffffff!important;
}
button[type="submit"] {
	margin: 2em 44% 1em 44%!important;
	border: 0px solid #ffffff;
	border-radius: 50%;
	background-color:#821024;
	height: 6em;
	width: 6em;
	color: #ffffff!important;
	font-style: italic;
	font-weight: bold;
	float: left;
}
button[type="submit"]:hover {
	background-color: #009900;
	color:#ffffff;
}

/*-----Focus, Active, Hover, Valid, Invalid, Required-----*/
input:required:invalid, input:focus:invalid {
	border: 1px solid #821024!important;
	border-radius: 7px;
}
input:required:valid, input:focus:valid {
	border: 1px solid #556b2f!important;
	border-radius: 10px;
}
option.disabled {
	font-style: italic!important;
	font-size: .75em;	
}

/* ----- footer ----- */
div.smaller {
	width: 100%;
	font-size: .65em!important;
	text-align: center!important;
	margin: 10em 0;
	font-family: 'Cinzel', "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	color: #000000;
	font-weight: bold;
}
footer {
	margin-bottom: 25em;
}
/* ----- responsive ----- */
@media screen and (max-width: 767px) and (min-width: 180px){
	html {
		width: 100%;
		background-position: center;
		background-image: url("../images/roughcloth.png");
		background-repeat: repeat;
	}
	body {
		width: 98%;
		margin-left: 2%!important;
		/* height: 98%; */
		padding: 3% 7%!important;
}
	h1{
		padding-top: 1em;
}
	.flex {
	    margin: 0 5%;
	}
	button{
		margin: 2em 45%;
	}
	figure.img {
	    max-width: 50%;
		text-align: center;
		margin: 1em auto!important;
		float: none;
	}
	coc-block-row {
	    margin-bottom: 10px;
    	
    	border-radius: 7px;
    	background-color: #ffffff;
    	width: 100%!important;
    	
	}
}

/* -----iPad media queries ----- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 
		html {
		width: 100%;
		background-position: center;
		background-image: url("../images/roughcloth.png");
		background-repeat: repeat;
	}
	body {
		width: 98%;
		margin-left: 2%!important;
		/* height: 98%; */
		padding: 3% 7%!important;
}
	h1{
		padding-top: 1em;
}
	.flex {
	    margin: 0 5%;
	}
	button{
		margin: 2em 45%;
	}
	figure {
		text-align: center;
		margin: 1em 33%;
		float: none;
	}
}