/*
	Moore College of Art & Design - https://moore.edu/
	Agency: Creative Communication Associates - http://www.ccanewyork.com
	Crafted by: Matthew J. Stellato - http://www.ruggedpeak.co
*/

/*  Reset | http://meyerweb.com/eric/tools/css/reset/
---------------------------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,
caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,
figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,
legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,
strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}
ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
.clear:after,.clear:before,.clearfix:after{visibility:hidden;clear:both;height:0}table{border-collapse:collapse;border-spacing:0}
.clearfix:after{display: block;content: " ";font-size: 0;visibility:hidden;clear:both;height:0}.clear:after{clear:both}.clear{zoom:1}:focus{outline:0}.hidden{display:none}


/* General Styles
---------------------------------------------------------*/
body {
  color:#00001f;
  font-family: 'utile',sans-serif;
  font-weight: 400;
  font-style: normal;
	font-size: 22px;
	line-height: 1.4em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	background:#FFF;
}

a {
	color: #41b6e6;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transition: all 0.2s linear;
	text-decoration: none;
}

a:hover {
  color:#f19f00;
  text-decoration: underline;
}

p {
	padding:0 0 30px;
}

.wrap {
	max-width: 1250px;
	margin:0 auto;
	padding:30px;
	box-sizing: border-box;
	position: relative;
}

.wrap:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

.logo {
  width: 430px;
  display: block;
}


/* Header
---------------------------------------------------------*/
header {
	color:#00001c;
  background: #00001f url('../img/bg-header.jpg') no-repeat top center;
  background-size:cover;
	box-sizing: border-box;
	position: relative;
	padding:5px 0 60px;
}


/* Headings
---------------------------------------------------------*/
h1 {
  margin: 135px 0 5px;
  font-size: 65px;
  line-height: 65px;
  text-transform: uppercase;
  letter-spacing: 1.75px;
  max-width: 850px;
}

h2 {
  color:#007681;
  font-size: 65px;
  line-height: 70px;  
  text-transform: uppercase;   
  letter-spacing: 1px; 
}

h3 {
  color: #2abeef;
  padding:30px 0;
  font-size: 48px;
  line-height: 48px;
}

h4 {
  font-size:34px;
  line-height: 34px;
  padding-bottom:5px;
  color:#007481;
  text-transform: uppercase;
}

h5 {
  color:#007481;
  padding-bottom:15px;
  font-size:23px;
}

.orange {
  color:#f26322;
}

/* Sections 
--------------------------------------------------------- */  
section.p30 {
	padding:30px 0;
}

section.p60 {
	padding:60px 0;
}

section.p70 {
  padding:70px 0;
}


/* Buttons
---------------------------------------------------------*/
.btn, .action button {
	background-color:#f26322;
	color:#FFF;
	display: inline-block;
	padding:12px 30px 16px 30px;
	position: relative;
	font-weight: 700;
	border: 0;
	cursor: pointer;
	font-size: 22px;
	line-height: 24px;
	box-sizing: border-box;
	text-transform: uppercase;
	transition: all 0.3s ease;	
  background-image: linear-gradient(135deg, #68322A 50%, #f26322 51%);
  background-size: 100px 100px; 
  background-position: -50px -50px;
  background-repeat: no-repeat;
  transition: background ease 0.5s;	
  font-family: 'utile',sans-serif;  
}

.btn:after, .action button:after {
  content:'';
  display: inline-block;
	background-image: url('../img/arrow-right-white.svg');
  background-size: 28px;
  background-repeat: no-repeat;
  background-position: center right;
  width: 25px;
  height: 20px;
  position: relative;
  top: 2px;
  margin-left: 15px;
	transition: all 0.3s ease;  
}

.btn.blue, .action button {
	background-color:#41b6e6;  
  background-image: linear-gradient(135deg, #3499c2 50%, #41b6e6 51%);
  color:#1d1f2a !important;
}

.btn.blue:after, .action button:after {
	background-image: url('../img/arrow-right-blue.svg');
}

.btn:hover, .btn:focus, .action button:hover {
	color:#FFF;
	text-decoration: none;
  background-size: 200% 200%; 
  background-position: 0px 0px;
}

.btn:hover:after, .action button:hover:after {
  margin-left:25px;
}



/* ------- Actions------- */
.actions {
  padding-top:10px;
  margin: 0 -10px;
}

.actions .btn {
  font-size: 28px;
  line-height: 28px;
  padding: 20px 30px 24px 30px;
  margin: 0 10px;     
}


/* Forms
---------------------------------------------------------*/
#request {
  max-width: 650px;
}

.details {
  font-weight: bold;
  padding: 20px 0;
  font-size: 30px;
  line-height: 38px;
}

form {
  max-width:480px;
}


select,
input[type="text"],
input[type="email"] {
	-webkit-appearance: none;
	width: 100%;
	background:transparent;
	color:#000;
	font-size:18px;
	line-height: 20px;
  font-family: 'utile',sans-serif;
	padding:15px 45px 15px 15px;
	margin:0;
	border-radius: 0;
	border: none;	
	box-sizing: border-box;
	position: relative;
	z-index: 10;
}

::placeholder {
  color:#696969  
}

select {
	background:transparent url('../img/dropdown-arrow.svg') no-repeat top 50% right 15px;	
	background-size:16px;	
	line-height: 26px;
}

form .btn {
  margin-top:20px;
}

.form_question.form_h1,
.form_question[data-id="5bc7ba2f-e263-4807-8919-1dc6ddf51da3"],
.form_question[data-id="fa4a9131-6ba7-4b4a-87dd-af25e5bf6f67"],
.form_question[data-id="b3858922-9b71-45ca-873d-b7db5c679452"],
.form_question[data-id="d4925819-b557-416e-b731-ec1a9f452736"],
.form_question[data-export="sys:sex"],
.form_question[data-export="sys:field:gender"],
.form_question[data-export="sys:middle"],
.form_question[data-export="sys:address"],
.form_question[data-export="sys:mobile"],
.form_question[data-export="sys:field:sms_optin"],
.form_question[data-export="sys:school:name"],
.form_question[data-export="sys:field:entry_term_person"] {
  display: none !important;
}


.form_question[data-export="sys:first"],
.form_question[data-export="sys:last"] {
  width: calc(50% - 5px) !important;
  float: left;
  clear: none !important;
}

.form_question[data-export="sys:last"] {
  margin-left:calc(50% + 5px);
  float: none;  
}


#request div.form_question {
  padding: 0 !important;
}

div.form_question {
  position: relative;
  background: #FFF;
  margin-bottom:10px !important;
}


div.form_question.form_radio .form_responses {
  padding:10px 0 20px 0;
}

.form_responses div.form_response {
  overflow: hidden;
  padding-bottom: 15px;
}

.form_responses div.form_response input[type="radio"]{
  float: left;
  margin: 8px 0 0 0;
}

.form_responses div.form_response input+label {
  display: block;
  font-weight: normal;
  margin-left: 30px;
  line-height: 22px;
  font-size: 18px;
  color: #c1c1c1;
}


div.form_question input,
div.form_question.required select {
  border:2px solid transparent;
}

div.form_question.required {
  background:#FFF !important;
}

div.form_question.form_birthdate.required {
  background:transparent !important;
}

div.form_question.required input,
div.form_question.required select {
  border:2px solid #dd0000;
}
 
div.form_question.form_text .form_label, 
div.form_question.form_text label,
div.form_question.form_select .form_label {
  display: block;
  position: absolute;
  color: #888;
  top: 10px;
  left: 15px;
  font-size: 18px;
}

div.form_question.form_text .form_label.focus, 
div.form_question.form_text .form_label.selected,
div.form_question.form_select .form_label.selected {
  opacity: 0 !important
}


/* Birthday Styling */
div.form_question.form_birthdate .form_label {
  display: block;
  font-size:18px;
  line-height: normal;
  padding: 0 0 5px;
  font-weight: bold;
}

div.form_question.form_birthdate {
  background:transparent;
}

div.form_question.form_birthdate select {
  background-color:#FFF;
}

div.form_question.form_birthdate .form_responses {
  display: flex;
}

.form_responses select[aria-label="Day"] {
  width: 100px;
}

.form_responses select[aria-label="Year"] {
  width: 160px;
}


/* Preference Styling */

.form_question[data-export="sys:field:continuing_education"] .form_label strong {
  font-size:18px;
  line-height: normal;
  padding: 0 0 5px;
  font-weight: bold;  
}

.form_question[data-export="sys:field:continuing_education"]{
  background:transparent;
}

.form_question[data-export="sys:field:continuing_education"] .form_label {
  line-height: normal;
  display: block;
  padding: 10px 0 15px;
}

.form_question[data-export="sys:field:continuing_education"] .form_label br {
  display: none;
}

.form_question[data-export="sys:field:continuing_education"] .form_label i {
  font-size:16px;
  display: block;
}

.form_question[data-export="sys:field:continuing_education"] .form_responses div.form_response input {
  float: left;
  width: 18px;
  height: 18px;
  outline: none;
  border: 0;
  background: #FFF;
  border-radius: 2px;  
}

.form_question[data-export="sys:field:continuing_education"] .form_responses div.form_response input+label {
  color:#000;
}




/* Content
--------------------------------------------------------- */
#content {
  background: #FFF;
  position: relative;
}

.intro {
  font-size: 32px;
  line-height: 40px;  
  border-bottom:1px solid #b2b2bb;
  padding-bottom: 60px;
  margin-bottom: 60px;
}

.intro strong {
  color:#007481;
}


/* Events
--------------------------------------------------------- */
.event {
  overflow: hidden;
  padding: 30px 0;
}

.event img {
  width: 45%;
  float: left;
  display: block;
  padding: 30px 0;
}

.event div {
  margin-left: calc(45% + 30px);
  text-align: left;
}

time {
  display: block;
  font-weight: bold;
  padding-bottom: 10px;
}

time span {
  font-weight: normal;
  color:#999;
  font-size: 18px;
  display: inline-block;
  padding-left: 5px;
}

.event ul {
  padding: 0 0 30px 25px;
  list-style: disc;
}

.event li {
  padding-bottom: 5px;
}

h6 {
  padding-bottom: 10px;
  
}



/* Quotes
---------------------------------------------------------*/
#quote {
  background: #00001c url('../img/bg-quote.jpg') no-repeat top left;
  background-size: cover;
}

blockquote {
  font-family: 'Playfair Display', serif;  
  font-size: 52px;
  line-height: 70px;
  text-align: center;
  padding-bottom: 40px;
  text-indent: -8px;
  color:#FFF; 
  font-style: italic;
  font-weight: bold;
}  

cite {
  font-weight: bold;
  font-style: normal;
  display: block;
  line-height: normal;
  color:#FFF;
  text-align: center;
  font-size: 22px;
  line-height: 28px;
}


/* Parents
---------------------------------------------------------*/
ul.arrows {
  padding-top:50px; 
}

ul.arrows li {
  background: url('../img/arrow-list.svg') no-repeat top left;
  padding: 3px 0 45px 75px;
  font-size: 32px;
  line-height: 40px;
  background-size: 55px;
  font-weight: bold;
}


/* Signup
---------------------------------------------------------*/

#signup {
  background: #00001c;
  color:#FFF;
}

#signup h2 {
  text-transform: uppercase;
  color: #febf2d;
  margin-bottom:10px;
}

#signup p {
  font-size: 32px;
  padding-bottom: 50px;
  line-height: normal;
}


/* Footer
---------------------------------------------------------*/
footer {
  color:#FFF;
	background: #00001f;  
}

footer a {
  color:#FFF;
}

footer .logo {
  position: absolute;
  right: 30px;
  bottom: 45px;
  width: 245px;
}

footer p {
  margin: 55px 0 0;
  font-size: 14px;
  line-height: 20px;  
}


/* Thank You Page
---------------------------------------------------------*/

.thanks {
  color:#FFF;
  background: #00001f url('../img/bg-body-thanks.png') no-repeat bottom -100px right -100px;  
  background-size:850px;
  font-size: 32px;
}

.thanks header .logo {
  width: 540px;
}

.thanks header, .thanks footer {
  background: none;
  padding: 0;
}

.signature img {
  width: 350px;
  display: block;
  margin:20px 0 -15px;
}

.signature {
  font-size:20px;
  line-height: normal;
  margin-bottom:80px;
}

.signature span {
  font-size: 32px;
}

.signature a {
  font-weight: bold;
}

.thanks h3 {
  text-align: left;
  color:#efb322;
  padding:0 0 30px;
  font-style: italic;
}

.thanks h4 {
  color:#efb322;
  text-transform: none;
  padding: 0 0 15px 0;
}

.cta {
  max-width: 540px;
  padding-top:10px;
}

.cta li {
  padding-bottom:10px;
}

.cta li a {
  display: block;
}


.thanks footer .logo {
  position: static;
}

.thanks footer p {
  position: absolute;
  right: 30px;
  top:50%;
  margin: 0;
}


/* Responsive
--------------------------------------------------------- */

@media screen and (max-width: 1200px) {
  .logo {
    width: 275px;    
  }
  
  h1 {
    font-size: 55px;
    line-height: 55px;
    letter-spacing: 1.25px;
  }
  
  header {
    padding-bottom: 20px;
  }
  
  header p {
    font-size: 32px;
    max-width: 700px;
    line-height: 36px;
  }
  
  .actions .btn {
    font-size: 20px;
    line-height: 24px;
    padding: 15px 25px 18px 25px;    
  }
  
  .intro {
    font-size: 24px;
    line-height: 38px;
    padding-bottom: 40px;
    margin-bottom: 40px;    
  }
  
  h2 {
    font-size: 50px;
    line-height: 60px;    
  }
  
  blockquote {
    font-size: 35px;
    line-height: 52px;
  }
  
  ul.arrows li {
    padding: 3px 0 35px 60px;
    font-size: 22px;
    line-height: 30px;
    background-size: 35px;
  }  

}


@media screen and (max-width: 940px) {
  .logo {
    width:200px !important;
  }
  
  body {
    font-size:18px;
  }
  
  .intro {
    font-size: 20px;
    line-height: 32px;    
    padding: 0;
    margin: 0 0 30px;
  }
  
  
/*
  h1 {
    margin: 90px 0 5px;
    max-width: 600px;    
  }
*/
  
  h2 {
    font-size: 42px;
    line-height: 50px;
    letter-spacing: 1px;
  }
  
  #signup p, header p {
    font-size: 26px;
    padding-bottom: 30px;
    line-height: 1.3;    
  }
    
  header p {
    max-width: 600px;
    padding-bottom: 15px;   
  }
  
  .btn, .actions .btn {
    padding:8px 10px 12px 20px;
    font-size:16px;
  }
    
  .btn:after {
    background-size: 20px;
    margin-left: 0px;
    top:5px
  }
  
  h4 {
    font-size: 26px;
    line-height: 26px;    
  }
  
  h3 {
    padding: 0 0 25px;
    font-size: 34px;
    line-height: 34px;    
  }
  
  h5 {
    font-size:18px;
  }
    
  section.p60 {
    padding: 0 0;
  }  
  
  blockquote {
    font-size: 26px;
    line-height: 36px;    
  }  
  
  .event img {
    padding: 0;
  }
  
  .details {
    font-size: 23px;
    line-height: 30px;
    max-width: 500px;    
  }
  
  
  select, input[type="text"], input[type="email"] {
    padding: 12px 35px 12px 12px;
  }
  
  
  .thanks {
    font-size: 24px;
    background-size: 480px;
  }
  .thanks .p30 {
    padding: 0;
  }
  
  html, body {
    min-height: 100%;
  }
  
  .signature {
    margin-bottom:50px;
  }
  
  .signature img {
    width: 250px;
  }

}

@media screen and (max-width: 750px) {
  
  footer .logo {
    position: static;
  }
  
  footer p, .thanks footer p {
    margin: 15px 0 0;
    padding: 0;
    line-height: 16px;
    position: static;        
  }

}


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

  .logo {
    width: 145px !important;
  }
  
  .wrap {
    max-width: 420px;
    padding: 20px;
  }
  
  header {
    padding: 0;
    background: #f9a56f url('../img/bg-header-mobile.jpg') no-repeat bottom right;
    background-size: auto 325px;
  }
  
  header:before {
    content:'';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    background: #00001f;
    height: 80px;
  }
  
  h1, h2 {
    margin: 35px 0 10px;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: .5px;
    max-width: 450px;
  }  
  
  .actions {
    padding: 0;
    margin: 0;
  }
  
  .actions .btn {
    margin: 5px 0;
  }
  
  .intro {
    font-size: 18px;
    line-height: 26px;    
  }
  
  #signup p, header p {
    font-size:22px;
  }
  
  header p {
    max-width:290px;
  }
  
  .event {
    padding: 10px 0 20px 0;
  }
  
  .event img {
    float: none;
    width: 100%;
    margin-bottom:10px;
  }
  
  .event div {
    margin: 0;
  }
  
  h3 {
    padding: 0 0 20px;
    font-size: 24px;
    line-height: 30px;    
  }
  
  h2 {
    margin: 15px 0 5px;    
  }  
    
  .details {
    font-size: 18px;
    line-height: 24px;
    padding: 0;
  }    
  
  div.form_question.form_text .form_label, 
  div.form_question.form_text label,
  div.form_question.form_select .form_label {
    font-size: 14px;
    top:6px;
    left: 10px;
  }
  
  
  select, input[type="text"], input[type="email"] {
    padding: 8px 34px 8px 10px;
  }  
  


  div.form_question.form_birthdate .form_label,
  .form_question[data-export="sys:field:continuing_education"] .form_label strong {
    font-size:16px;
  }
  
  .form_question[data-export="sys:field:continuing_education"] .form_label i {
    font-size:12px;
  }  
  
  .form_responses div.form_response input+label {
    font-size:16px;
  }
  
  select {
    background-size: 12px;
  }
  
  .form_responses select[aria-label="Day"] {
    width: 130px;
  }  
    
  ul.arrows {
    padding-top: 30px;    
  }


  ul.arrows li {
    padding: 0px 0 25px 45px;
    font-size: 18px;
    line-height: 24px;
    background-size: 28px;
  }  
  
  .thanks, .signature {
    font-size:18px;
  }
  
  .thanks {
    padding-bottom:50px;
    background-size:300px;
    background-position: bottom -80px right -50px;
  }
  
  .signature {
    margin:0 0 5px;
  }
  
  .signature span {
    font-size:24px;
  }
  
  .signature img {
    width: 200px;
    margin: 0 0 -5px;    
  }


  .cta li a {
    font-size:14px;
  }

}

@media screen and (max-width: 500px) {
  header {
    background-position: bottom 0px right -98px;
    background-size: auto 305px;
  }
  h1 {
    margin: 35px 0 10px;
    font-size: 26px;
    line-height: 29px;
    letter-spacing: .5px;
    max-width: 235px;    
  }
  
  header p, #signup p {
    font-size: 18px;    
  }
  header p {
    max-width: 235px;    
  }
  
}