body {
	margin: 0;
	padding: 0;
	color: #5aadd6;
	background: #222 url('https://cdn.cockyboys.com/ghn/2411-join/bgm-250926.jpg') 0% 0% no-repeat padding-box;
	background-size: 100% auto;
}

.roboto-thin {
  font-family: "Roboto", serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", serif;
  font-weight: 900;
  font-style: normal;
}


.anton-regular {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/*<weight>: Use a value from 100 to 900 */
.montserrat-regular {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.passion-one-regular {
	font-family: "Passion One", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.passion-one-bold {
	font-family: "Passion One", sans-serif;
	font-weight: 700;
	font-style: normal;
}

body > aside:first-child {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	color: #12375e;
	background: #5aadd6;
	font-size: 13px;
	line-height: 25px;
	letter-spacing: 0.25px;
	text-transform: uppercase;
	text-align: center;
	padding: 8px 0;
}

body > aside:first-child a {
	color: #fff;
}

aside.redirect {
	text-transform: none !important;
	line-height: 23px;
}

body > aside:first-child i {
	display: none;
}

body > aside:first-child em {
	font-style: normal;
    background: #12375E;
    color: #fff;
    padding: 3px 5px;
    border-radius: 4px;
	display: inline-block;
	line-height: 15px;
}

main {
	position: relative;
}

main > a:first-child img {
	height: 32px;
	display: block;
	margin: 15px auto;
}

main h2 {
	font-family: "Passion One", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	text-align: center;
	padding: 0;
	margin: 15px 0 10px;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#createAccount {
	display: flex;
	flex-flow: column nowrap;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

#createAccount input {
	opacity: 0.7;
	background: #FFFFFFB3;
	border: 1px solid #12375E;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 15px;
	width: 225px;
	margin-bottom: 5px;
	transition: opacity 0.3s ease;
	transition: background-color 0.3s ease;
	outline: none;
	box-shadow: none;
	color: #12375E;
}

#createAccount input,
#createAccount input::placeholder {
	font-size: 14px;
	color: #12375E;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
}

#createAccount input:focus,
#createAccount input:valid {
	opacity: 1;
	background: #fff;
	border-color: #21b449;
}

#createAccount input:invalid {
	/*border-color: red;*/
	background: #fff;
	color: #12375E;
	opacity: 1;
}

#createAccount input:invalid:focus {
	border-color: #12375E;
}

#chooseMembership {
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	justify-content: center;
}

#chooseMembership input,
#cockycams input {
	opacity: 0;
	position: absolute;
}

#chooseMembership label {
	background: transparent linear-gradient(180deg, #5AADD6BF 0%, #5AADD6BF 22%, #FFFFFFBF 22%, #FFFFFFBF 100%) 0% 0% no-repeat padding-box;
	box-shadow: inset 0px 0px 5px #003761;
	width: 185px;
	height: 142px;
	border-radius: 5px;
	margin: 0 8px 8px 0px;
	transition: box-shadow 0.3s, transform 0.3s ease;
	cursor: pointer;
	transform: scale(1);
	position: relative;
}

#chooseMembership label .bow {
	position: absolute;
    left: -23px;
    top: -10px;
    width: 60px;
    transform: rotate(-25deg);
}

#chooseMembership input:checked + label,
#chooseMembership label.checked {
	background: transparent linear-gradient(180deg, #21b449 0%, #21b449 22%, #FFFFFF 22%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
	box-shadow: 0px 5px 20px #55B057;
}

#chooseMembership label p:first-child {
	height: 22%;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #fff;
	font-family: "Passion One", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	text-transform: uppercase;
	display: flex;
	flex-flow: column nowrap;
	align-content: center;
	justify-content: center;
}

#chooseMembership label section {
	height: 78%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

#chooseMembership label section h3, 
#chooseMembership label section h4,
#chooseMembership label section p {
	margin: 0;
	padding: 0;
}

#chooseMembership label section h3 {
	font: normal normal 700 19px/13px Roboto;
	color: #D6352A;
	margin: 20px 0 10px;
	text-align: center;
}

#chooseMembership label section h4 {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	font: normal normal bold 55px/32px Passion One;
	margin: 13px auto 18px;
	height: 20px;
	color: #003761;
}

#chooseMembership label section h4 span:first-child {
	font: normal normal bold 25px/31px Passion One;
	margin-right: 5px;
}

#chooseMembership label section h4 span:nth-child(2) {
	font-family: Passion One;
	font-size: 27px;
	font-weight: bold;
	line-height: 0;
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0 0 0 5px;
	height: 18px;
	text-transform: none;
}

sup,
sub {
	position: static;
	top: 0;
	bottom: 0;
}

#chooseMembership label section h4 span:nth-child(2) sub {
	font-family: Passion One;
	font-size: 10px;
	color: #D6352A;
}

#chooseMembership label section p:last-child {
	font: normal normal normal 10px/6px Roboto;
	color: #003761;
	margin-bottom: 20px;
}

#cockycams {
	margin-top: 10px;
}

#cockycams label {
	display: block;
	position: relative;
	text-align: center;
}

#cockycams p {
	font: normal normal normal 19px/18px Anton;
	text-align: center;
	display: inline-block;
	position: relative;
	left: 5px;
	padding: 0;
	margin: 5px 0 10px;
}

#cockycams p em {
	color: #D6352A;
	font-style: normal;
	text-transform: uppercase;
}

#cockycams > em {
	font-style: normal;
	font: normal normal normal 13px/19px Roboto;
	text-align: center;
	align-self: auto;
	display: block;
}

#cockycams > em span {
	color: #D6352A;
}

/* Hide the browser's default checkbox */
#cockycams input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: -25px;
  height: 20px;
  width: 20px;
  background-color: #21b449;
  border-radius: 2px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #e8e8e8;
}

/* When the checkbox is checked, change background color */
#cockycams input:checked ~ .checkmark {
  background-color: #21b449;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
#cockycams input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
#cockycams .checkmark:after {
  left: 7px;
  top: 2px;
  width: 4px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

input[type="submit"] {
	background: #21b449;
	width: 380px;
	height: 50px;
	border-radius: 5px;
	font: normal normal 900 20px/26px Roboto;
	text-transform: uppercase;
	color: #fff;
	border: 0;
	margin: 0 auto;
	display: block;
	margin-top: 10px;
	transition: transform 0.3s ease;
	transform: scale(1);
	cursor: pointer;
	max-width: 95vw;
}

#cc {
	width: 220px;
	display: block;
	margin: 15px auto 10px;
}

#safe {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	font: normal normal bold 11px/13px Roboto;
	letter-spacing: 0.22px;
	text-transform: uppercase;
	margin-bottom: 15px;
}

#safe img {
	height: 27px;
	width: 25px;
	margin-right: 5px;
}

.newsTicker {
	background: #003761E8;
	overflow: hidden;
	width: 100vw;
}

.newsTicker p {
	color: #fff;
	font: normal normal bold 20px/17px Passion One;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 25px 15px 25px 0;
}

.newsTicker p span {
	color: #D6352A;
	padding: 0 10px;
}

#press {
	margin: 20px 0;
	height: 161px;
	display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

#press div {
	text-align: center;
	width: 100%;
	margin: 0 auto;
}

#press img, #press svg {
	height: 37px;
	margin-bottom: 10px;
}

#press p {
	display: flex;
	flex-flow: row nowrap;
	font: normal normal normal 12px/20px Roboto;
	width: 400px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

#press p em {
	font-style: normal;
	font-size: 80px;
	font-family: Passion One;
	font-weight: bold;
	color: #D6352A;
	position: relative;
	top: 20px;
	margin: 0 15px;
}

#cta img {
	width: 100%;
	margin-bottom: -5px;
}

footer {
	background: #0B2841;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	color: #fff;
	font: normal normal normal 9px/10px Roboto;
}

footer a {
	color: #fff;
	text-decoration: none;
}

footer img {
	width: 80px;
	margin-bottom: 10px;
}

footer > p:nth-child(3) a {
	color: #D6352A;
}

#caret {
	font-size: 22px;
    font-family: 'Montserrat';
    font-weight: 100;
    line-height: 35px;
    width: 35px;
    height: 35px;
    background: #D6352A;
    text-align: center;
    border-radius: 35px;
	padding: 0;
	margin: -15px 0 20px;
	cursor: pointer;
}

#caret span {
	transform: scaleX(2);
	display: inline-block;
}

#secNav {
	font: normal normal normal 9px/23px Montserrat;
	text-transform: uppercase;
	text-align: center;
}

#secNav a {
	display: inline-block;
	margin-right: 25px;
}

#compliance {
	font: normal normal normal 7px/11px Montserrat;
	text-align: center;
	margin-bottom: 20px;
}

p.error {
	font-family: Anton;
	color: red;
	text-align: center;
	font-size: 20px;
	margin: 15px auto 20px;
	line-height: 27px;
	max-width: 600px;
}

p.error strong {
	font-family: Roboto;
    font-size: 16px;
	font-weight: normal;
	display: block;
}

p.error strong:first-child {
	margin-top: 5px;
}

input.error {
	border: 1px solid red !important;
}

body.iframe > aside:first-child,
.iframe main > a:first-child img,
.iframe .newsTicker,
.iframe #press,
.iframe #cta,
.iframe footer,
.iframe #login {
	display: none !important;
}




@media screen and (min-width: 768px) {

	body {
		/*background: transparent url('https://cdn.cockyboys.com/ghn/2411-join/bg-tablet2.jpg') 0% 0% no-repeat padding-box; */
		background: #222 url('https://cdn.cockyboys.com/ghn/2411-join/bgt-250926.jpg') 0% 0% no-repeat padding-box;
		background-size: 100% auto;
	}
	
	main h2 {
		font-size: 29px;
		margin-top: 20px;
	}
	
	main > a:first-child img {
		height: 41px;
	}
	
	#createAccount {
		flex-flow: row nowrap;
	}
	
	#createAccount input:first-child {
		margin-right: 15px;
	}
	
	#cta img {
		display: none;
	}
	
	#cta img:nth-child(3) {
		display: block !important;
	}
	
	#caret {
		width: 42px;
		height: 42px;
		font-size: 27px;
		line-height: 42px;
	}
	
	#login {
		font: normal normal normal 14px/11px Roboto;
		color: #C7C7C7;
		position: absolute;
		right: 15px;
		top: 0;
		display: block !important;
		padding: 0;
		margin: 0;
	}
	
	#login a {
		color: #5aadd6;
		text-decoration: none;
	}
	
	#login a:hover {
		text-decoration: underline;
	}
	
	#cockycams {
		margin-top: 5px;
		margin-bottom: 15px;
	}
	
	#cockycams p {
		font-size: 18px;
	}
	
	#cc {
		margin-top: 25px;
	}
	
	#safe {
		margin-bottom: 25px;
	}
	
	.newsTicker p {
		font: normal normal bold 26px/29px Passion One;
	}
	
	#press {
		height: 210px;
		margin-top: 30px;
	}
	
	#press img, #press svg {
		height: 40px;
		margin-bottom: 20px;
	}
	
	#press p {
		font: normal normal normal 20px/25px Roboto;
		width: 640px;
		font-weight: 300;
	}
	
	footer {
		position: relative;
		flex-flow: row nowrap;
		padding: 25px 0;
	}
	
	footer #caret {
		position: absolute;
		top: -5px;
	}
	
	footer > p:nth-child(3) {
		display: none;
	}
	
	footer > img {
		margin: 0 auto 0 15px;
		flex-grow: 0;
	}
	
	#compliance {
		text-align: right;
		font-size: 6px;
		margin: 0 15px 0 auto;
		flex-grow: 0;
	}
	
	#secNav {
		margin: 0 auto 0 30px;
		flex-grow: 1;
		text-align: left;
	}
	
	#chooseMembership label {
		width: 200px;
		height: 165px;
	}
	
	#chooseMembership label section h3 {
		font: normal normal 700 21px/15px Roboto;
	}
	
	#chooseMembership label section h4 {
		font: normal normal bold 72px/38px Passion One;
		margin: 22px auto 30px;
	}
	
	#chooseMembership label section h4 span:first-child {
		font: normal normal bold 35px/31px Passion One;
	}
	
	#chooseMembership label section h4 span:nth-child(2) {
		font-size: 35px;
		height: 30px;
	}
	
	#chooseMembership label section h4 span:nth-child(2) sub {
		font-size: 14px;
	}
	
	#createAccount input,
	#createAccount input::placeholder {
		font-size: 15px;
	}
	
	#cockycams p {
		font-size: 23px;
	}
	
	#cockycams > em {
		font: normal normal normal 14px/21px Roboto;
	}
	
	input[type="submit"] {
		font-size: 25px;
		width: 400px;
		height: 60px;
	}
	
	body > aside:first-child i {
		display: inline;
	}
	
	body > aside:first-child br {
		display: none;
	}
	
	body > aside:first-child {
		font-size: 15px;
		padding: 10px 0;
	}
	
	#chooseMembership label p:first-child {
		font-size: 23px;
	}
	
	#chooseMembership label section p:last-child {
		font-size: 11px;
	}
	
}

@media screen and (min-width: 1024px) {
	
	.newsTicker {
		margin-top: 60px;
	}
	
}

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

	body {
		/*background: transparent url('https://cdn.cockyboys.com/ghn/2411-join/bg-desktop2.jpg') 0% 0% no-repeat padding-box; */
		background: #222 url('https://cdn.cockyboys.com/ghn/2411-join/bgd-250926.jpg') 0% 0% no-repeat padding-box; 
		background-size: 100% auto;
	}
	
	.newsTicker {
		position: absolute;
		bottom: -20px;
		left: 0;
	}
	
	#press {
		height: 280px;
		margin-top: 50px;
	}
	
	#chooseMembership label:hover {
		background: transparent linear-gradient(180deg, #21b449 0%, #21b449 22%, #FFFFFF 22%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
		box-shadow: 0px 5px 20px #55B057;
		transform: scale(1.02);
	}
	
	input[type="submit"]:hover {
		transform: scale(1.03);
	}
	
}

@media screen and (min-width: 1920px) {
	
	body > aside:first-child {
		font-size: 21px;
		letter-spacing: 0.45px;
		padding: 15px 0;
	}
	
	main > a:first-child img {
		height: 78px;
	}
	
	main h2 {
		font: normal normal normal 40px/60px Passion One;
		margin-top: 20px;
	}
	
	#createAccount input,
	#createAccount input::placeholder {
		font: normal normal normal 23px/28px Roboto;
	}
	
	#createAccount input {
		width: 375px;
	}
	
	#chooseMembership label {
		width: 375px;
		height: 315px;
		border-radius: 15px;
		margin: 0 25px 25px 0;
	}
	
	#chooseMembership label img {
		left: -40px;
		top: -20px;
		width: 100px;
	}
	
	#chooseMembership label p:first-child {
		font: normal normal bold 37px/38px Passion One;
	}
	
	#chooseMembership label section h3 {
		font: normal normal 700 39px/33px Roboto;
	}
	
	#chooseMembership label section h4 {
		font: normal normal bold 135px/76px Passion One;
		margin: 55px auto 60px;
	}
	
	#chooseMembership label section h4 span:first-child {
		font: normal normal bold 85px/77px Passion One;
	}
	
	#chooseMembership label section h4 span:nth-child(2) {
		font-size: 69px;
		height: 30px;
	}
	
	#chooseMembership label section h4 span:nth-child(2) sub {
		font-size: 27px;
	}
	
	#chooseMembership label section p:last-child {
		font: normal normal normal 22px/16px Roboto;
	}
	
	#cockycams p {
		font: normal normal normal 30px/38px Anton;
	}
	
	.checkmark {
		height: 30px;
		width: 30px;
		top: 3px;
		left: -43px;
		border-radius: 4px;
	}
	
	#cockycams .checkmark:after {
		left: 10px;
		top: 2px;
		width: 7px;
		height: 17px;
	}
	
	#cockycams {
		margin: 20px 0 35px;;
	}
	
	#cockycams > em {
		font: normal normal normal 24px/35px Roboto;
	}
	
	input[type="submit"] {
		width: 600px;
		height: 90px;
		font: normal normal 900 44px/50px Roboto;
	}
	
	#cc {
		width: 442px;
		margin: 40px auto 30px;
	}
	
	#safe {
		font: normal normal bold 21px/24px Roboto;
	}
	
	#safe img {
		height: 50px;
		width: 46px;
	}
	
	.newsTicker {
		position: absolute;
		bottom: -20px;
		left: 0;
	}
	
	.newsTicker p {
		font: normal normal bold 50px/55px Passion One;
		margin: 60px 15px 60px 0;
	}
	
	#press {
		height: 300px;
		padding-bottom: 330px;
		margin-top: 80px;
	}
	
	#press img, #press svg {
		height: 95px;
		margin-bottom: 40px;
	}
	
	#press p {
		font: normal normal 300 30px/45px Roboto;
		width: 1000px;
	}
	
	#press p em {
		font-size: 210px;
		top: 50px;
	}
	
	footer {
		padding: 40px 0;
	}
	
	footer #caret {
		width: 70px;
		height: 70px;
		font-size: 50px;
		line-height: 65px;
		top: -20px;
	}
	
	footer img {
		width: 150px;
		margin-left: 35px;
	}
	
	#secNav {
		font: normal normal normal 18px/22px Montserrat;
	}
	
	#compliance {
		font: normal normal normal 10px/15px Montserrat;
		margin-right: 35px;
	}
	
	#login {
		font: normal normal normal 20px/21px Roboto;
		right: 25px;
		top: 5px;
	}
	
}