html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}

img { display: block }

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

/*http://snook.ca/archives/html_and_css/font-size-with-rem*/
html { -webkit-text-size-adjust: 100%; font-size:62.5%; -webkit-font-smoothing: antialiased;}

body {
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	border-top: 10px solid #95A9CA;
	background: #e2e2ef;
	font-size: 1.6rem;
	color: #333;
}

.main {
	width: 95%;
	max-width: 650px;
	margin: 0 auto;
}

.jacketTop {
	display: flex;
	justify-content: space-between;
	margin: 2em 0;
}

.deLogo {
	flex-shrink: 0;
}

h1 {
	font-family: "adobe-caslon-pro", serif;
	font-size: 3rem;
	font-weight: normal;
	margin: 1em 0 .5em 0;
}

.formBox {
	padding: 1.5em;
	background: #95A9CA;
	/* background: #68768c; */
}

.formCol {
	float: left;
	width: 47%;
}

	.formCol:last-child { float: right; }


.submitBox {
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
}

.showSize {
	color: #fff;
	text-decoration: underline;
	cursor: pointer;
	font-weight: bold;
	opacity: 0;
}

.showSize:hover {
	color: #ffda54;
}

.chooseBG {
	padding: 1em;
	background: #AABDDC;
}

.jackets {
	display: flex;
	justify-content: space-around;
	margin: 1em 0;
}

.jacket {
	text-align: center;
	font-weight: bold;
}

.jacket img {
	width: 204px;
	height: 215px;
	margin: 1em auto;
}

.jacket-radio-outside {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #FFF;
	margin: 1em auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 250px;
}

.jacket-radio-inside {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid #ccc;
}

.jacketLabel {
	cursor: pointer;
	width: 220px;
}

.jacketLabel-Man, .jacketLabel-Woman {
	background-image: url(../img/jacket-male.svg);
	background-repeat: no-repeat;
	background-position: 50% 35%;
	background-size: 90%;
}

 .jacketLabel-Woman { background-image: url(../img/jacket-female.svg); }

.jacket-radio-real { display: none; }

.jacket-radio-real:checked ~ .jacketLabel .jacket-radio-outside .jacket-radio-inside {
	background: #ecc94d;
}

.jacket-radio-real:checked ~ .jacketLabel-Man {
	background-image: url(../img/jacket-Man.png);
}

.jacket-radio-real:checked ~ .jacketLabel-Woman {
	background-image: url(../img/jacket-Woman.png);
}

#size-Women {
	display: none;
}

.sizeTable {
	width: 100%;
	margin-top: 2em;
	display: none;
}

.sizeTable th {
	background: #8898b9;
	padding: .5em;
	color: #e4e8f8;
	border-top: 6px solid #AABDDC;
	border-bottom: 4px solid #AABDDC;
	border-left: 1px solid #81859a;
}

.sizeTable td {
	text-align: center;
	border:1px solid #a1a6c9;
	padding: .25em;
	background: #e4e8f8;
	color: #666;
	font-size: 1.3rem;
	vertical-align: middle;
}

.sizeItem {
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	font-size: 1.4rem;
	background: red;
	vertical-align: middle;
}

.units-head {
	font-size: 1.3rem;
}

.units { height: 30px; vertical-align: middle; }

.units span {
	background: #d2d4e3;
	padding: .5em;
	font-size: 1.1rem;
	color: #333;
	text-align: center;
	width: 40px;
	border-radius: 3px;
	display: inline-block;
}

#errBox {
	border: 1px solid #F00;
	padding: 1em;
	color: #F00;
	display: none;
}

.disclaimer {
	margin-top: 20px;
	color: #999;
	font-size: 1.4rem;
	line-height: 1.3em;
	margin: 2em 0;
	text-align: center;
}

.disclaimer img { margin: 0 auto; }

label {
	color: #fff;
	display: block;
	margin-bottom: 5px;
}


input[type=text] {
	width: 100%;
	border: 1px solid #c3c4c2;
	font-size: 1.8rem;
	padding: .5em;
	margin-bottom: 1em;
}

input[type=checkbox], input[type=radio] { font-size: 20px; }

input[type=submit] {
	-webkit-appearance: none;
	background: #ecc94d;
	text-align: center;
	color: #333;
	font-size: 2rem;
	border: none;
	font-weight: 600;
	display: block;
	padding: .3em 2em;
	cursor: pointer;
	text-transform: uppercase;
}

input[type=submit]:hover {
	background: #ffda54;
}

p {
	margin: 1em 0;
	line-height: 1.4em;
}

a { color: #4683c6; text-decoration: none; }
a:hover { text-decoration: underline;  }

ul { margin: 1em 0; }

li {
	list-style: disc;
	font-size: 1.4rem;
	margin: 0 0 .5em 1.5em;
	line-height: 1.4em;
}

select.pretty-dropdown { 
 	background-color: #ffffff;
	color: #40494e !important;
	margin: 0;
	border: none;
	outline: none;
	border-radius: 4px;
 	border: 1px solid #b2b7bd;
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
	padding: 10px 12px;
	background-image: url("../img/dd-down.svg");
	background-position:  right center;
	background-repeat: no-repeat;
	background-size: 36px;
	overflow: hidden;
	text-indent: 0.01px;
	-moz-appearance: none  !important; 
	appearance: none  !important;
	-ms-appearance: none  !important; 
	-o-appearance: none !important;
	-webkit-appearance: none;
	outline: none;
	box-shadow: none;
	margin-bottom: 10px; 
	width: 100%;	
}

select.pretty-dropdown:hover {
 	background-color: #ffffff;
	color: #40494e;
 	transition: background-color  .2s;
 	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

select.pretty-dropdown::-ms-expand { 
	display: none;
}

@media all and (max-width: 650px) {
	.formBox { padding: 1em; }
	.formCol { float: none; width: 100%;}
	label { margin-top: 1em; font-size: 1.4rem; }
	.inlineLabel { font-size: 1.4rem; }
	.jacket-radio-outside { margin-top: 160px; }
	.jacketLabel { width: 130px; }
	.chooseBG { padding: 0 1em; }
	.submitBox { display: block; padding: 0 0 1em 0;  }
	input[type=submit] { margin: 1em auto; }
	.deLogo { margin: 0 auto; }
}

@media all and (max-width: 420px) {
	.main { padding: .5em; }
	.jacketTop { display: block; }
	input[type=submit] { font-size: 1.6rem; padding: 1em 1.5em; }
	.sizeTable { margin-top: 0; }
	.sizeTable th, .sizeTable td { font-size: 1.1rem; }
	.units span { font-size: .9rem; }
	
}