/*

Theme Name:				See See
Theme URI: 				https://creativeclass.co/
Version: 					4.0
Description: 			A WordPress theme specifically for Creative Class
Author: 					Paul Jarvis
Author URI: 			https://creativeclass.co
Details URI: 			https://creativeclass.co
License: 					All rights reserved
Text Domain: 			seesee
Tags: 						white



version:					4.0.0

font sizes:				14 (0.001), 20 (-0.010), 26 (-0.014), 46 (-0.016), 64 (-0.016)
fonts: 						Inter UI 500

spacing:					4, 16, 32, 48, 96, 128
grid:							60 (12) = 72, total = 648

pink							#fd5096
black							#111
dark medium				#777
medium						#aaa
*/

* { margin: 0; padding: 0; border: none; outline: none; list-style: none; box-sizing: border-box; text-decoration: none; font-size: 100%; vertical-align: baseline; font-weight: 400; }










/* = fonts -.-. -.-. */      /* ONLY IMPORT MEDIUM LATER */

@import url('https://rsms.me/inter/inter-ui.css');











/* = structure -.-. -.-. */

html, body { height: 100%; background: #111; }
body { font: 400 26px/1.22 "Inter UI", sans-serif; color: #aaa; text-align: center; letter-spacing: -0.014em; text-align: center; }

.rapper { max-width: 648px; margin: 0 auto 96px auto; text-align: left; padding: 16px; }

.half, .medium { font-size: 20px; letter-spacing: -0.010em; margin-bottom: 32px; color: #777; line-height: 1.44; }

.count { background: #000; padding: 16px; font-size: 14px; letter-spacing: 0.001em; margin: 0 0 32px 0; text-align: left; }






/* = navigation -.-. -.-. */

.nav { font-size: 14px; letter-spacing: 0.001em; }
header .nav { background: url("creativeclass.svg") right 0 no-repeat; background-size: 15px auto; }
.nav.primary { margin-bottom: 16px; }
.nav.secondary li a, .nav.secondary li { color: #777; }
.nav li { margin: 0 0 4px 0; }
.nav li a { color: #aaa; text-decoration: none; transition: ease color .2s; }
.nav li a:hover { color: #fd5096; }
.nav li.logo a { color: #fff; }










/* = typography .--. .. -.-. --- */

h1 { color: #fff; font-size: 36px; letter-spacing: -0.016em; margin-bottom: 32px; }
h1 span { color: #777; display: block; }

p, ul, ol, blockquote, img, form, .button-wrap, form, table { margin-bottom: 32px; }
	ul li {}
	ol li {}
	aside p { margin-bottom: 8px; }

blockquote { color: #fff; }
cite { font-style: normal; display: block; color: #777; margin-top: 8px; }

p span, li span, .form-span, .half span { color: #fff; }

.half p, .half li, .medium li { margin-bottom: 16px; }
aside li { margin-bottom: 8px; }

a { color: #fd5096; text-decoration: underline; transition: ease color .2s; }
a:hover { color: #fff; }
	.medium a, small a, .half a, aside a { color: #aaa; }
	.medium a:hover, small a:hover { color: #fff; }
	.text a { color: #777; }
	.half a, aside a { text-decoration: none; }
	aside a:hover { color: #fff; }

	a.wpc-lesson-completed, a.wpc-button-completed { color: #777; }


small, .post-edit-link, .text, aside { font-size: 14px; letter-spacing: 0.001em; color: #777; display: block; }
	small p { margin-bottom: 0; }

img { max-width: 100%; margin-right: 32px; }
	img.logos { margin: 16px 0 48px 0; }

.extra-space, .mc4wp-form { margin-top: 32px; }
.button-wrap .text { margin-top: 16px; }

table { width: 100%; margin-left: -8px; }
	td, th { padding: 8px; font-size: 20px; letter-spacing: -0.010em; color: #aaa; }

.wpc-bar-progress { padding-bottom: 32px; width: 100%; }
.wpc-bar-progress .wpc-numbers { display: none !important; }
.wpc-bar-progress.wpc-rounded .wpc-progress-track, .wpc-bar-progress.wpc-rounded .wpc-progress-fill { border-radius: 0 !important; }
.wpc-bar-progress .wpc-progress-fill { position: relative; background: #fd5096; height: 2px !important; width: 0%; text-align: center; font-size: 0; line-height: 0; }

a.wpc-button { display: inline-block; text-decoration: none; background: transparent !important; font-size: 20px; letter-spacing: -0.010em; border: 2px solid #fff; border-radius: 8px; padding: 16px 32px; display: inline-block; color: #fff; text-decoration: none; transition: ease color, background .2s; cursor: pointer; margin: 32px 0; }
a.wpc-button-loading { }
a.wpc-button-complete { }
a.wpc-button-completed { border-color: #aaa; color: #aaa !important; }
a.wpc-button:hover {  }
a.wpc-button span.wpc-active { display: none; }

.video { position: relative; height: 0; overflow: hidden; padding-bottom: 55.8%; box-sizing: border-box; margin: 0 0 32px 0; }
	.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }





/* = forms .--. .. -.-. --- */

form {}

fieldset { position: relative; }

.float { display: block; position: relative; width: 100%; border-bottom: 2px solid #aaa; margin-bottom: 32px; padding: 8px 0; }
	.half .float { margin-bottom: 32px; }
	.float input { border-bottom: none; padding: 0; }
	.float input + label { position: absolute; top: 32px; opacity: 0; left: 0; font-size: 14px; letter-spacing: 0.001em; color: #777; transition: none; }
	.float input:valid + label { opacity: 1; top: -12px; transition: ease all .2s; }

input { background: none; color: #fff; display: block; width: 100%; font-size: 20px; letter-spacing: -0.010em; border-bottom: 2px solid #fff; padding: 8px 0; border-radius: none; appearance: none; }
input::placeholder { color: #777; }

button, .button a { font-size: 20px; letter-spacing: -0.010em; border: 2px solid #fff; border-radius: 8px; padding: 16px 32px; display: inline-block; color: #fff; text-decoration: none; transition: ease color, background .2s; background: none; cursor: pointer; }

button:hover, .button a:hover, button.main { background: #fff; color: #111; }
button.main:hover { background: none; color: #fff; }

button#rcp_apply_discount { padding: 0; border: none; position: absolute; top: 8px; right: 0; transition: ease color .2s; }
button#rcp_apply_discount:hover { background: none; color: #fd5096; }

.pink .button a { color: #fd5096; border-color: #fd5096; }
.pink .button a:hover { background: #fd5096; color: #111; }
.pink .text, .notice { color: #fd5096; }

.rcp_message { font-size: 14px; letter-spacing: 0.001em; margin: 16px 0; }
.rcp_message p span { color: #fd5096; }

.rcp_remember input { display: none; }
.rcp_remember label { font-size: 14px; letter-spacing: 0.001em; color: #777; display: block; cursor: pointer; }
.rcp_remember input + label:before { content: "Forget me"; }
.rcp_remember input:checked + label:before { content: "Remember me"; }

.rcp_gateways_fieldset input { display: none; }
.rcp_gateways_fieldset span { font-size: 20px; letter-spacing: -0.010em; border: 2px solid #777; border-radius: 8px; padding: 16px 32px; display: inline-block; color: #777; text-decoration: none; transition: ease color, background .2s; background: none; cursor: pointer; }
.rcp_gateway_option_label input:checked ~ span { color: #aaa; border-color: #aaa; }

.card-grid { display: grid; grid-template-columns: 1fr 60px 90px 80px; grid-column-gap: 0; }


#rcp_agree_to_terms_wrap input { display: none; }
#rcp_agree_to_terms_wrap input + label:before { content: "👎"; }
#rcp_agree_to_terms_wrap input:checked + label:before { content: "👍"; }








/* = media -.-. -.-. */
@media screen and (min-width: 720px) {
	body { }
	.rapper { padding: 48px 0; }
	header, section, form, .wpc-bar-progress, .video { margin-bottom: 96px; }

	.nav li { display: inline-block; margin: 0 16px 0 0; }
	
	h1 { font-size: 64px; line-height: 1; margin-bottom: 96px; }

	.float { margin-bottom: 32px; }
	.half .float { margin-bottom: 0; }
	.extra-space, .mc4wp-form { margin-top: 96px; }

	.half { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 32px; }	
	.button-wrap { display: grid; grid-template-columns: 1fr 1.5fr; grid-column-gap: 16px; align-items: center; }
	.button-wrap .text { text-align: right; margin-top: 0; }

.rcp_remember label { text-align: right; }

}


@media screen and (min-width: 1152px) {
	.page-template-page-lesson .rapper, .page-template-page-freelesson .rapper { max-width: 1152px; }
	.lesson-wrap { display: grid; grid-template-columns: 648px 288px; grid-column-gap: 216px; }


}