/*
* Copyright (c) 2021 Jean-Francois Martel v202105151146. All rights reserved.
* This program and the accompanying materials are made available under the
* terms of the MIT License which is available at
* http://www.opensource.org/licenses/mit-license.php
*/

@import "co.css";

::selection {
	background-color: #000;
	color: white;
}

::-moz-selection {
	background-color: #000;
	color: white;
}

.img_article {
	width: 12em;
	height: 17em;
	border: 0.0625em solid #c6dbed;
}

.footer {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 1.125em;
}

.sn {
	padding: 0.625em;
	text-align: center;
	text-decoration: none;
	border-radius: 70%;
}

.sn:hover {
	opacity: 0.7;
}

* {
	font-size: 14px;
	font-family: "Droid Sans", "Verdana", "Helvetica", "Arial", "Sans-Serif";
	line-height: 1.5;
	font-weight: normal;
	color: #c6dbed;
	margin: 0;
	padding: 0 0 0 0;
}


h4 {
	padding: 0.325em 0 0.325em 0;
	text-align: center;
	font-weight: bold;
	color: #c6dbed;
}

.header_right {
	background-position: center;
	width: 100%;
}


a {
	font-weight: bold;
	text-decoration: none;
}

a:link {
	color: #7fb1e1;
}

a:active {
	color: #7fb1e1;
}

a:visited {
	color: #7fb1e1;
}

a:hover {
	color: #c6dbed;
}

.table {
	display: table;
}

td {
	white-space: pre;
	padding: 0.325em;
	font-size: 11px;
	border-bottom: 0.0625em solid #c0c0c0;
}

td a {
	font-size: 11px;
}

.coltitle {
	font-weight: bold;
}

.checkbox {
	border: 0.125em solid #c6dbed;
}

.photo {
	border: 0.0625em solid #000000;
	float: right;
}

.cell {
	display: inline-block;
	vertical-align: top;
}

.row {
	display: table-row;
}

.colgroup {
	display: table-row;
	width: 100%;
	/* border: 0.125em solid #c6dbed; */
}

.colgroup_left {
	display: table-cell;
	vertical-align: top;
	width: 20%;
	float: none;
	/* border: 0.125em solid #c6dbed; */
}

.colgroup_left .cell {
	border-bottom: 0.125em solid #efefef;
	width: 96%;
	padding-left:2%;
	padding-right:2%;
	padding-bottom:2%;
}

.colgroup_center_two_column .row {
	text-align: center;
	display: table-row;
}

.colgroup_center_two_column .cell {
	text-align: left;
	display: table-cell;
	width: 50%;
}

.colgroup_center_two_column {
	display: table-cell;
	vertical-align: text-top;
	width: 70%;
	float: none;
	text-align: center;
	/* border: 0.125em solid #c6dbed; */
	padding-top: 0.250em;
	padding-left: 10%;
	padding-right: 10%;
}

.colgroup_center_two_column img {
	float: left;
	margin: 0 0.625em 0.625em 0;
	border: 0.125em solid #c6dbed;
}

.colgroup_center_two_column h4 {
	text-align: left;
}

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

.colgroup_center iframe {
	display: block;
	margin-right: auto;
	margin-left: auto;
	width: 40em;
	height: 22.5em;
	border: 0;
	webkitallowfullscreen;
	mozallowfullscreen;
	allowfullscreen;
}

.colgroup_center img {
	max-width: 100%;
	min-height: auto;
	margin-bottom: 0.714em;
}

.colgroup_center .cell {
	padding-bottom: 0.800em;
}

.colgroup_center {
	width: 80%;
	display: table-cell;
	vertical-align: top;
	text-align: center;
	/* border: 0.125em solid #c6dbed; */
}

.colgroup_right {
	display: table-cell;
	vertical-align: top;
	width: 20%;
	float: none;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	/* border: 0.125em solid #c6dbed; */
}

.colgroup_right .cell {
	margin-bottom: 0.714em;
	padding-right: 1em;
	padding-left: 1em;
}

.colgroup_right img {
	width: 10em;
	
}

.terms {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
	font-size: 0.625em;
	text-align: justify;
}

.weblinks a {
	display: block;
}

header {
	width: 100%;
	height: 4.75em;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}

.navbar {
	background: rgba(0, 0, 0, 0.0);
	height: 2.5em;
}

.sticky {
	position: fixed;
	top: 0;
	width: 100%;
}

nav {
	float: right;
	padding: 0.625em;
	padding-right: 0.714em;
}

#menu-icon {
	position: absolute;
	top: 0.625em;
	right: 0.625em;
	display: hidden;
	width: 2.714em;
	height: 2.375em;
	background:
		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIYExoDT3GKcQAAAwFJREFUWMPtmE1PG0kQhp/uGgw28SYbbxJIsKJICcsNiTMnfgo+wY+cE2efEVha5WNhN+Bgx9hgZ6p7LzVoQE6iHGaCVmmpZU/bo371dtXT1Q2/2o81N29QRFzVQlQ1zhVmYvLuK9YVi11VozNRHhAgARbs01ewWhEIgAIZ8MW+B5eLEpElVW0CTaBuAssWl4u6Bi5FZKSqEyBLTPmCqjZXVlZW19bWnqtqC6g75yTGWEq8OedijDEAU+fcYDKZ/HN4eHhiQjUXVgMe7ezsrHU6nT9VtQ08tHFXYlwpcOmcO+31evW9vb0pMAamN44By6r6RFVfqeoboGXCfInCMmAoIstZlo2Bk3zOpJCJicVW09z6HVgsWdgXm/sCaJhBgomJBVtnwMTsrNtz2Y6Nbc6pPYeisAyYiEhfRN475zxwXlGMjbz3J7Va7V/g0swIScHSUbfbPVVViTEOzdqkRGEUUNE/Pz//GxiYczccq4lI0zDxh8XYki2jK5n2M2AE9EWkr6qDPCvv/jkUOhUIC3e2JICYL1WiqvV2u/14fX39eZZlT733DSAJIZQmzHsfQgjXIvJpMBi4brc7tUSYFTnW3N7eXt3d3V0PIby05VwoyTFXzErv/cnx8bHs7++PgSFwlRQY1gghtGKML0MIbyzWytovnS1hBnx2zi2q6hD48DXALgHLwG/WqwAswAPj5k1VUwRsZqk7Bj6b8kocM35dfQ+wb+3lj1XFmIjkgB3NBezBwcHp2dmZN5aUDdgcFdci8uni4uKbgH1sVUXVgL0sAHYIXCdzLPZ3etnCfCEB87lcEbCNjY2N1ubm5osY47OfsFdKmqZ5oXgbsFtbW6udTicH7KMqq4ter+fTNB1ZnN0GrKq2VLWtqq8NsFVVsLXZbDYA3s0DrNhgwyD7oCLAZjbn4rcAe2UsGdpvlThmkJ0UzpUUOTYWkTMR+cteqPSUlCTJqQm8BdgZMEjT9MPR0VFQ1Y8/41wJ9C1L9d6exO/v3cW9vu25j/djv9r/pv0HQCC4K/1uLBcAAAAASUVORK5CYII=")
		no-repeat center;
}

ul {
	list-style: none;
}

li {
	display: inline-block;
	float: left;
}

header {
	position: absolute;
}

#menu-icon {
	display: inline-block;
}

nav ul, nav:active ul {
	display: none;
	position: absolute;
	padding: 0.125em;
	background: rgba(0, 0, 0, 0.7);
	border: 0.0625em solid #c6dbed;
	border-radius: 0.325em 0.325em 0.325em 0.325em;
	right: 1.25em;
	top: 2.8125em;
	width: 40%;
}

nav li {
	text-align: center;
	width: 100%;
	margin: 0;
}

nav:hover ul {
	display: block;
}

.cell-pre {
	display: block;
	white-space: pre-wrap;
	text-align: center;
	color: #fbd281;
	border-bottom: 0.125em solid #c6dbed;
	line-height: 1.3em;
	padding-bottom: 0.325em;
}

.cell-pre-center {
	display: block;
	white-space: pre;
	text-align: center;
}


.cell-pre-one {
	display: block;
	text-align: left;
	margin-left: 1em;
	white-space: pre;
	align-content: left;
}

.hidden {
	display: none;
}

.form-order {
	display: table;
	margin-right: auto;
	margin-left: auto;
}

.center img {
	right: 50%;
	position: absolute;
}


.cell input, select, textarea {
	float: left;
	border: 0.125em solid #4d4d4d; 
	background-color: rgba(58, 58, 58, .7);
	border-radius: 30.125em;
	padding-left: 0.400em; 
	padding-top: 0.625em;
}

#file {
	visibility:hidden;
	font-size: 0em;
}

/* Begin Customize radio, checkbox container */
.container {
	display: block;
	position: relative;
	margin-bottom: 0.857em;
	cursor: pointer;
	font-size: medium;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.container input {
	position: absolute;
	opacity: 0;
}

/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 0.250em;
	left: 0;
	height: 0.650em;
	width: 0.650em;
	background-color: rgba(58, 58, 58, .7);
	border-radius: 70%;
	margin-left: 3.850em;
}

.container:hover input ~ .checkmark {
	background-color: #ccc;
}

.container input:checked ~ .checkmark {
	background-color: #7fb1e1;
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.container input:checked ~ .checkmark:after {
	display: block;
}

.container .checkmark:after {
	top: 0.100em;
	left: 0.070em;
	height: 0.650em;
	width: 0.650em;
	border-radius: 50%;
	background: white;
}
/* End Customize radio and checkbox */
.tableforms {
	margin-top: 1em;
	margin-left: 1em;
	margin-right: 1em;
	width: 70%;
	/* border: 0.0625em solid #c0c0c0; */
}

.tableforms .row {
	text-align: left;
}

.tableforms .cell {
	font-size: medium;
	display: table-cell;
}

.label {
	margin-top: .0125em;
	margin-bottom: 0.325em;
	width: 85%;
	/* border: 0.0625em solid #e1e1e1; */
}

input[name=submit] {
	background: none;
	border: none;
	border-radius: 0%;
}

#message {
	display: block;
	margin-lef: auto;
	margin-righ: auto;
	border: 0.0625em solid #c6dbed;
	padding: 0.125em;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	h4 {
		text-align: left;
	}
	.colgroup_center {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.colgroup_center iframe {
		display: none;
	}
	.colgroup_center h4 {
		text-align: center;
	}
	.colgroup_left {
		display: none;
	}
	.cell-pre-center {
		white-space: normal;
	}
	.colgroup_center_two_column {
		display: table-row;
	}
	.colgroup_center_two_column img {
		margin-right: 10%;
		margin-left: 10%;
	}
	.colgroup_center_two_column h4 {
		clear: both;
	}
	.colgroup_right img {
		width: auto;
	}
	.colgroup_right {
		/* width:90%; */
		display: block;
		padding-top: 1em;
		margin-left: 20%;
		margin-right: 20%;
	}
	.colgroup_right h4 {
		text-align: center;
	}
	.cell-pre-one {
		margin-left: 2.5em;
		text-align: center;
	}
	.cell-pre-one h4 {
		text-align: center;
	}
	.tableforms {
		margin-right: 1em;
		margin-left: 0em;
		width: 100%;
	}
	.tableforms .cell {
		display: table;
		width: auto;
	}
}

input[name=submit] {
	width: 12em;
	font-weight: bold;
	color: #7fb1e1;
	text-align: center;
	font-size: xx-small;
}

.cell img[alt] {
	min-width: 11em;
	font-weight: bold;
	color: #7fb1e1;
	text-align: center;
	font-size: xx-small;
	white-space: pre-wrap;
}

.label img[alt] {
	font-size: 22%;
	width: 0.125em;
	height: 4em;
}

#captcha {
	min-width: 60em;
	min-height: 30em;
	border-radius:30em;
}


#notifywrapper {
	position: fixed;
	width: 98%;
	margin: 0 0 0 0;
	bottom: 5%;
	/* border: 0.125em solid #c6dbed; */
}

#notify {
	margin-left: 0.625em;
	margin-right: 0.625em;
	bottom: 0%;
	border-radius: 0.325em 0.325em 0.325em 0.325em;
	border: 0.125em solid #c6dbed;
	height: auto;
	color: #c6dbed;
	font-weight: normal;
	background: rgba(0, 0, 0, 0.7);
	padding: 0.325em 0.325em 0.325em 0.325em;
	text-align: center;
}

.errors {
	visibility: hidden;
}


input:required:invalid {
	border-left-color: #EAC47D;
	border-left-width: 0.225em;
	outline-color: rgba(0, 0, 0, 0.7);
}

input:required:valid {
	border-left-color: #c6dbed;
	border-left-width: 0.225em;
	outline-color: rgba(0, 0, 0, 0.7);
}

.container input[type=radio]:required:invalid ~ .checkmark {
	background-color: #EAC47D;
} 

.container input[type=radio]:required:valid ~ .checkmark {
	background-color: #4d4d4d;
} 

input:optional:invalid {
	border-left-color: #EAC47D;
	border-left-width: 0.225em;
	outline-color: rgba(0, 0, 0, 0.7);
}

input:optional:valid {
	border-left-color: #c6dbed;
	border-left-width: 0.225em;
	outline-color: rgba(0, 0, 0, 0.7);
} 

#notification {
	vertical-align: bottom;
	
}

div[id^='noti'] p {
	color: #EAC47D !important;
	margin-left: 0.125em;
}

placeholder {
	color: #383838 !important;
}

.button{
	margin-top: 0.625em;
	position:relative;
	background-image: linear-gradient(#9f9f9f,#ffffff,#3f3f3f);
	border:none;
	font-style:oblique;
	color:#2c2c2c;
	padding:0.065em;
	width: 6em;
	text-align: center;
	-webkit-transition-duration:0.4s;
	transition-duration:0.4s;
	text-decoration:none;
	overflow:hidden;
	cursor:pointer;
	border-radius: 30.125em;
}

.button:after{
	content:"";
	background: #5f5f5f;
	display:block;
	position:absolute;
	padding-top: 300%;
	padding-left: 350%;
	margin-left: -8em !important;
	margin-top: -120%;
	opacity: 0;
	transition: all 0.8s;
}

.button:active:after{
	padding:0;
	margin:0;
	opacity: 1;
	transition:0s;
}