@charset "utf-8";
/* CSS Document */


.divBreakingFlow {
	display: block;
	clear: both;
}

.divCommentFormOuter {
	background-color: #370500;
	padding-top: 40px;
	padding-bottom: 100px;
	/*z-index: 30;*/
}

.divCommentFormOuter .spacerVertical {
	height: 100px;
}



.divCommentForm {
	background-color: #141716;
/*	width: 760px;
	left: 25%;*/
	
	width: 100%;
	
	margin: 0px auto;
	padding-left: 10px;
	padding-top: 10px;
	position: relative;
	


}

/*.divCommentFormLeft {
	width: 380px;
	margin: 0px;
	float: left;
	position: relative;
	top: 50px;
}

.divCommentFormRight {
	left: 380px;
	position: absolute;
	top: 50px;
}*/

.divFormColLeft {
	grid-column: 1;
}

.divFormColRight {
	grid-column: 2;
}
.divCommentForm .formFieldTitle {
	color: #DDDDDD;
	font-family: "Raleway", sans-serif;
	font-size: 14px;
	font-variant: normal;
	font-weight: 500;
}

.divCommentForm .formFieldOptions {
	color: #DDDDDD;
	font-family: "Raleway", sans-serif;
	font-size: 14px;
	font-variant: normal;
	font-weight: 400;
	font-style: italic;
}

.divCommentForm .formFieldOptions a {
	color: #DDDDDD;
	text-decoration: underline;
}

.divCommentForm .textAreaField {
	color: #141716;
	font-family: "Raleway", sans-serif;
	font-size: 12px;
	font-variant: normal;
	font-weight: 600;
	font-style: normal;
	width: 360px;
	padding: 12px 20px;
	margin: 10px 10px 0px 10px;
	box-sizing: border-box;
}

.divCommentForm .inputTextFields {
	color: #141716;
	font-family: "Raleway", sans-serif;
	font-size: 12px;
	font-variant: normal;
	font-weight: 600;
	font-style: normal;
}

.divCommentForm .formBtnSubmit {
	font-size: 16px;
	font-weight: 600;
    border: none;
    outline: none;
    color: #141716;
    padding: 10px 10px;
    background-color: #DDDDDD;
}

.divCommentsNotice {
	
}

.textCommentsNoticeHeader {
	color: #FFFFFF;
	font-family: "Raleway", sans-serif;
	font-size: 14px;
	font-variant: normal;
	font-weight: 400;
	font-style: italic;
	text-decoration: underline;
}

.textCommentsNoticeText {
	color: #FFFFFF;
	font-family: "Raleway", sans-serif;
	font-size: 14px;
	font-variant: normal;
	font-weight: 400;
	font-style: normal;
}

#CommentsNotice input {
	display:none;
}

#CommentsNotice input:checked ~ div {
	visibility: visible;
	height: auto;
}

#CommentsNotice input:not(checked) ~ div {
	visibility: hidden;
	height: 0px;
}



#CommentForm {
	position: relative;
	display: grid;
    grid-template-columns: 380px 380px;
    grid-gap: 20px;
}

#CommentForm input {
	visibility: visible;

}

#CommentForm input[type=text], input[type=email] {
	width: 360px;
	padding: 12px 20px;
	margin: 10px 10px 0px 10px;
	box-sizing: border-box;

}

.pColor1 {
	background-color: #3E4442;
	margin-right: 10px;
}
.pColor2 {
	background-color: #575E5C;
	margin-right: 10px;
}

@media screen and (min-width:1200px){
	.divCommentFormOuter {
		position: relative;
		margin: 0px auto;
		width: 100%;
	}
}

@media screen and (max-width:1200px){

	.divCommentFormOuter {
	background-color: #370500;
	width: 1096px;
	padding-top: 40px;
	padding-bottom: 100px;
	position: relative;
		margin: 0px;
	}

}






@media screen and (min-width:1367px) and (max-width:1920px)
{
	.divCommentFormOuter {
		max-width: 1366px;
		width: 100%;
	}

}

@media screen and (max-width:1366px) {
	.divCommentFormOuter {
		max-width: 1366px;
		width: 100%;
	}
}

@media screen and (max-width:1140px) {
	.divCommentFormOuter {
		max-width: 1139px;
		width: 100%;
	}
}

@media screen and (max-width:768px) {
	.divCommentFormOuter {
		max-width: 767px;
		width: 100%;
	}
}

@media screen and (max-width:480px) {
	.divCommentFormOuter {
		max-width: 479px;
		width: 100%;
	}
	.divFormColRight {
		grid-column: 1;
}
	#CommentForm {
		grid-template-columns: 315px;
		grid-gap: 0px;
	}
	
	#CommentForm input[type=text], input[type=email] {
		width: 285px;

		
	}
	
	.divCommentForm {
	margin: 0px auto;
	padding-left: 10px;
	padding-top: 10px;
	position: relative;
	}
	
	.divCommentForm .textAreaField {
		width: 285px;	
	}
	
}