/* CSS Document */
/*********************************************************
MAIN
*********************************************************/

body {
  margin: 0;
  padding: 0;
  font-family: PTMN;
  font-size: medium;
  font-weight: normal;
  color: #666;
}

@font-face {
  font-family: "FTRA"; /*a name to be used later*/
  src: url("https://www.succulentchinesemovie.com/scripts/ftra.ttc"); /*URL to font*/
}

@font-face {
  font-family: "PTMN"; /*a name to be used later*/
  src: url("https://www.succulentchinesemovie.com/scripts/ptmn.ttc"); /*URL to font*/
}

.clear {
  clear: both;
  margin: 0;
  padding: 0;
}

img.responsive {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

hr {
  border: 0px;
  color: #000;
  background-color: #000;
  height: 4px;
  margin: 0;
  padding: 0;
}

.shadow {
	border: 1px solid #000;
  	padding: 2px;
	background-color: #000;
  	box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.2);
	z-index: 501;
}

.uppershadow {
	border: 1px solid #000;
	margin: -1px 0 0 0;
  	padding: 2px;
	background-color: #000;
  	box-shadow: 0px -6px 6px rgba(0, 0, 0, 0.2);
	z-index: 500;
}

.dirtybackground {
	background-image: url("https://www.succulentchinesemovie.com/images/dirty-background.jpg");
	background-repeat: repeat;
	background-color: #f3dbca;
	margin: 0;
	padding: 0;
}

.mattressbackground {
	background-image: url("https://www.succulentchinesemovie.com/images/mattress-background.jpg");
	background-repeat: repeat;
	background-position: center;
	background-color: #f3dbca;
	margin: 0;
	padding: 0;
}

a:link {
  color: #c5bf75;
  text-decoration: underline;
}
a:visited {
  color: #c5bf75;
  text-decoration: underline;
}
a:hover {
  color: #f7c194;
  text-decoration: underline;
}
a:active {
  color: #666;
  text-decoration: underline;
}


a.dark:link {
  color: #666;
  text-decoration: underline;
}
a.dark:visited {
  color: #666;
  text-decoration: underline;
}
a.dark:hover {
  color: #c5bf75;
  text-decoration: underline;
}
a.dark:active {
  color: #c5bf75;
	text-decoration: underline;
}

.bannertop {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
	z-index: 100;
}



/*********************************************************
TYPE
*********************************************************/


h1 {
	font-family: "FTRA";
	font-weight: bold;
	font-size: 90px;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	color: #000;
}

h2 {
	font-family: "FTRA";
	font-weight: bold;
	font-size: 60px;
	margin: 0.5em 0;
	color: #000;
}

h3 {
	font-family: "FTRA";
	font-weight: 900;
	font-size: 30px;
	margin: 2em 0 1em 0;
	color: #000;
}


p {
	margin: 0 0 0.5em 0;
  padding: 0;
  font-family: PTMN;
  font-size: medium;
  font-weight: normal;
  color: #666;
	line-height: 1.6;
}


.black {
	color: #000000;
}

.grey {
	color: #bbbbbb;
}

.apricot {
	color: #f7c194;
}

.caravan {
	color: #c5bf75;
}

li {
	list-style: square;
	margin-bottom: 1em;
}

.footersubheading {
	color: #000;
	font-size: medium;
	margin: 2em 0 0.5em 0;
	padding: 0;
	line-height: 1.6;
}



/*********************************************************
FORMS
*********************************************************/

.formlabel {
	font-family: PTMN;
	font-size: small;
	color: #666;
	margin: 0;
	padding: 0;
}

.singlefield {
  width: 100%;
  padding: 0.5em;
  margin: 0 0 0.5em 0;
  display: inline-block;
  border: 1px solid #666;
  box-sizing: border-box;
}

a.button:link {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.5em 1em;
  outline: 1px solid #666;
  display: inline-block;
  transition: background-color 0.5s ease, color 0.5s ease;
  background-color: #fff;
  margin: 1em 0;
}

a.refreshbutton:link {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.5em 1em;
  outline: 1px solid #666;
  display: inline-block;
  transition: background-color 0.5s ease, color 0.5s ease;
  background-color: #c5bf75;
  margin-bottom: 0.5em;
}

a.button:visited,
a.refreshbutton:visited {
  color: #000;
}
a.button:hover,
a.refreshbutton:hover {
  background-color: #f7c194;
  color: #000;
}
a.button:active,
a.refreshbutton:active {
  color: #666;
  text-decoration: none;
}

.submit {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-size: small;
  padding: 0.5em 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  outline: 1px solid #666;
  display: inline-block;
  transition: background-color 0.5s ease, color 0.5s ease;
  background-color: #c5bf75;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
}

input[type="submit"]:visited {
  color: #000;
}

input[type="submit"]:hover {
  background-color: #f7c194;
  color: #000;
}

input[type="submit"]:active {
  color: #666;
  text-decoration: none;
}



/*********************************************************
COLUMNS
*********************************************************/

.pagewrapper {
	width: 96%;
	margin: auto 2%;
	padding: 0;
	max-width: 1600px;
}


.homeimagewrapper {
	width: 100%;
	height: 80vh;
	
}

.homelogo {
	position: absolute;
	width: 40%;
	max-width: 1200px;
	z-index: 100;
	margin-top: 8%;
	margin-left: 10%;
}


.col100{
	width: 98%;
	margin: 0 1% 2em 1%;
	padding: 0;
}

.col50left {
	width: 49%;
	margin: 0 2% 2em 0;
	padding: 0;
	float: left;
	display: inline-block;
}

.col50right {
	width: 49%;
	margin: 0 0 2em 0;
	padding: 0;
	float: left;
	display: inline-block;
}

.col50leftfixed {
	width: 49%;
	margin: 0 2% 2em 0;
	padding: 0;
	float: left;
	display: inline-block;
}

.col50rightfixed {
	width: 49%;
	margin: 0 0 2em 0;
	padding: 0;
	float: left;
	display: inline-block;
}

.col30left {
	width: 29%;
	margin: 0 2% 0 0;
	padding: 0;
	float: left;
	display: inline-block;
	background-color: #ff000;
}

.col70right {
	width: 69%;
	margin: 0 0 0 0;
	padding: 0;
	float: left;
	display: inline-block;
	background-color: #ff004;
}



/*********************************************************
NEWS
*********************************************************/


table.news td {
	border: none;
	padding: 1em 1em;
	font-size: small;
}

tr.news td:first-child {
    width: 1%;
    white-space: nowrap;
}





/*********************************************************
CONTACT
*********************************************************/

.col50leftsocials {
	width: 49%;
	margin: 0 2% 2em 0;
	padding: 0;
	float: left;
	display: inline-block;
}




/*********************************************************
HEADER
*********************************************************/

.headerwrapper {
	width: 96%;
	margin: 0;
	padding: 0;
	max-width: 1600px;
	
}

.col50leftheader {
	width: 59%;
	margin: 0 2% 0 0;
	padding: 1em 0 1em 0;
	float: left;
	display: inline-block;
}

.col50rightheader {
	width: 39%;
	margin: 0 0 1em 0;
	padding: 1em 0 0 0;
	float: left;
	display: inline-block;
	text-align: right;
}

/* nav list items style */
.menuitems {
		font-size: 30px;
		margin-top: -0.5em;
		margin-bottom: 1.4em;
		color: #000;
		line-height: 0.96;
	}


a.navmenu:link {
  color: #000;
  text-decoration: none;
}
a.navmenu:visited {
  color: #000;
  text-decoration: none;
}
a.navmenu:hover {
  color: #f7c194;
  text-decoration: none;
}
a.navmenu:active {
  color: #666666;
  text-decoration: none;
}




/*
 * MENU BUTTON
 */
.menu__toggler {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  height: 28px;
  width: 28px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.menu__toggler span, .menu__toggler span::before, .menu__toggler span::after {
  position: absolute;
  content: '';
  width: 28px;
  height: 2.5px;
  background: #000000;
  border-radius: 20px;
  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu__toggler span::before {
  top: -8px;
}
.menu__toggler span::after {
  top: 8px;
}
.menu__toggler.active > span {
  background: transparent;
}
.menu__toggler.active > span::before, .menu__toggler.active > span::after {
  background: #000000;
  top: 0px;
}
.menu__toggler.active > span::before {
  transform: rotate(-225deg);
}
.menu__toggler.active > span::after {
  transform: rotate(225deg);
}
/*
 * SLIDING MENU PANEL
 */
.menu {
  position: absolute;
	margin-top: -1em;
  left: -30%;
  z-index: 998;
  color: #000;
  background: rgba(197, 191, 117, 0.9);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  width: 30%;
  height: 100%;
  max-height: 400px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
}
@media only screen and (max-width: 600px) {
  .menu {
    width: 250px;
    left: -250px;
    padding: 50px;
  }
}

.menu.active {
  left: 0;
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}





/*********************************************************
FOOTER
*********************************************************/

.footerwrapper {
	margin: 0;
}

.disclaimerwrapper {
	width: 100%;
	background-color: #000;
	padding: 0;
	margin: 0;
	line-height: normal;
}


.col50leftfooter {
	width: 49%;
	margin: 0.5em 2% 0.5em 0;
	float: left;
	display: inline-block;
}

.col50rightfooter {
	width: 49%;
	margin: 0.5em 0;
	float: left;
	display: inline-block;
	text-align: right;
}

.banner {
  position: relative;
  background-image: url("https://www.succulentchinesemovie.com/images/footerfamily.jpg");
  background-position: center right;
  width: 100%;
  margin: 0 auto;
}

.clipped {
  padding: 20px;  
  width: 60%;
  -webkit-clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
}

.clipped > * 
{
  max-width: 70%
}


.socials1, .socials2, .socials3, .socials4 {
	width: 18%;
	margin: 0;
	float: left;
	display: inline-block;
}

.socials1 {
	margin-left: -2%;
}

.logos {
	width: 18%;
	margin: 0 2% 0 0;
	float: left;
	display: inline-block;
}






/**************************************************************
MEDIA SCREEN MID
***************************************************************/

@media screen and (max-width: 62em) and (min-width: 40em) {

	.captcha{
			width:auto;
			float:none;
	}
	
	.homelogo{
		width: 50%;
		margin-top: 15%;
	}
	
	h1 {font-size: 60px}
	h2 {font-size: 40px}
	h3 {font-size: 20px}
	
	p {font-size: medium}

	.clipped {
	  padding: 20px;  
	  width: 50%;
	  -webkit-clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
	}
	
	
	.socials1, .socials2 {
		width: 40%;
		margin-bottom: 0;
		margin-left: 0;
	}
	
	.socials3, .socials4 {
		width: 40%;
		margin-top: 0;
	}
	
	.menu {
		width: 50%;
		left: -50%;
	}
	
	.menuitems {
		font-size: 30px;
	}
	
	.col50leftheader {
		width: 49%;
	}

	.col50rightheader {
		width: 49%;
	}
	
	.bannertop {
	  height: 100%;
	  width: auto;
	  margin-left: 50%;
      transform: translateX(-50%);
	  padding: 0;
	  min-width: 100%;
		outline: 1px solid #000;
	}
	
	.col30left, .col70right {
		width: 98%;
		margin: 0 2% 0.5em 0;
		float: none;
		display: inline-block;
	}
	

}





/**************************************************************
MEDIA SCREEN SMALL
***************************************************************/

@media screen and (max-width: 40em) {
	
	
 .mobileshow {
    display: block;
  }

  .mobilehide {
    display: none;
  }
	
	.col50left, .col50right {
		width: 96%;
		margin: 0 2% 2em 2%;
		float: none;
		display: inline-block;
		text-align: left;
	}
	
	.col30left, .col70right {
		width: 96%;
		margin: 0 2% 0 0;
		float: none;
		display: inline-block;
	}
	
	.singlefield {
		width: 96%;
		margin: 0.5em 2% 0.5em 0;
		float: none;
		display: inline-block;
		text-align: left;
	}
	
	.col50leftfooter, .col50rightfooter {
		width: 96%;
		margin: 0;
		float: none;
		display: inline-block;
		text-align: left;
	}
	
	
	h1 {font-size: xx-large}
	h2 {font-size: x-large}
	h3 {font-size: large}
	
	p {font-size: small;}
	
	.banner {
	  position: relative;
	  background-image: url("https://www.succulentchinesemovie.com/images/footerfamilymobile.jpg");
	  background-position: right;
	  width: 100%;
	  margin: 0 auto;
	}
	
	.clipped {
	  padding: 20px;  
	  width: 70%;
	  -webkit-clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
	}
	
	.socials1, .socials2 {
		width: 50%;
		margin-bottom: 0;
		margin-left: 0;
	}
	
	.socials3, .socials4 {
		width: 50%;
		margin-top: 0;
	}
	
	.disclaimerwrapper{
		padding-bottom: 1em;
	}
	
	.homeimagewrapper {
	height: 62vh;
	}
	
	.homelogo{
		width: 55%;
		margin-top: 15%;
	}
	
	.tinytext {
		font-size: x-small;
	}
	
	.col50leftheader {
		width: 29%;
	}

	.col50rightheader {
		width: 69%;
	}
	
	.menu {
		width: 70%;
		left: -70%;
	}
	
	.menuitems {
		font-size: 30px;
	}
	
	.bannertop {
	  height: 12vh;
	  width: auto;
	  margin-left: 50%;
      transform: translateX(-50%);
	  padding: 0;
	  min-width: 100%;
	}
	
	
	
}



/*********************************************************
EMAIL SIGN UP FORM
*********************************************************/


.field-group.error > input,
.field-group.error > select,
.field-group.error .addressfield input.empty,
.field-group.error .birthdayfield,
.field-group.error .subfields,
.field-group.error .datefield .dijitInputInner,
.datefield .dijitTextBoxError .dijitInputInner,
.field-group.error textarea {
    border-color:#FF0000 !important;
}

textarea {
    font:14px/18px;
    width:100%;
    height:150px;
    overflow:auto;
}

select {
    background:#fff url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat right -295px;
    background:#fff url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat right -295px, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1));
    background:#fff url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat right -295px, -webkit-linear-gradient(top, #fff, #f1f1f1);
    background:#fff url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat right -295px,     -ms-linear-gradient(top, #fff, #f1f1f1);
    background:#fff url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat right -295px,         linear-gradient(to bottom, #fff, #f1f1f1);
}
html[dir="rtl"] select {background-position:14px -295px;}

/* Firefox always displays native select arrow button, so hide the background image arrow. */
@-moz-document url-prefix() {
select {
    padding: 8px;
    background-position: -99px 0 !important;
    -moz-appearance: none;
}
}

input:focus, textarea:focus, select:focus, .focused-field .subfields {
border-color:#5d5d5d !important;
outline:none;
}

/* Prevent Chrome's autofill yellow box shadow */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}


.field-help {
    display:block;
    font-weight:normal;
    position:static;
    float:none;
    clear:both;
    margin:0;
    padding:0;
    max-height:0;
    overflow:hidden;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    transition: all .25s;
}
.focused-field .field-help, input:focus + .field-help {
    display:block;
    padding:10px 0;
    max-height:100px;
}

.field-help .help {
    min-height:16px;
    text-decoration: none;
}


/* Error container */
.feedback {
    padding:10px 0;
    line-height:16px;
    font-size:14px;
}

.feedback br {display:none;}

.feedback div {
    font:14px/20px !important;
    padding:0 !important;
    margin:0 !important;
}

.indicates-required {text-align:right;}
.indicates-required span {
    font-size:150%;
    font-weight:bold;
    display:inline !important;
}

.formstatus {
    margin-bottom:12px;
    font-size:18px;
}

.alert {
    background:#e4f3d4;
    border:2px solid #5ca000;
    font-size:14px;
    color:#4e7e0e !important;
    margin:10px 0;
    padding:10px;
}


/* Groups, checkboxes, radio buttons */
ul.interestgroup_field,
ul.interestgroup_field li,
ul.unsub-options,
ul.unsub-options li,
.interestgroup_row {
    display:block;
    padding:0;
    margin:0;
    list-style:none;
}
label.checkbox, label.radio {
    font-weight:normal;
    position:relative;
    line-height:24px;
}
.checkbox input, .radio input {
    width:auto !important;
    display:inline-block;
    margin-right:5px;
    padding:0;
    border:none;
    background-color:transparent;
}


/* Input placeholder color */
.dijitPlaceHolder {position:absolute; top:10px; left:10px; color:#ababab !important; font-weight:normal;}
::-webkit-input-placeholder {color:#ababab;}
:-moz-placeholder {color:#ababab; opacity:1;}
::-moz-placeholder {color:#ababab; opacity:1;}
:-ms-input-placeholder {color:#ababab;}

html[dir="rtl"] .dijitComboBox.dijitDateTextBox .dijitArrowButtonContainer {left:6px; right:auto;}
html[dir="rtl"] .dijitPlaceHolder {left:auto; right:10px;}

/* Archive list */
#archive-list {
    display:block;
    margin:15px 0;
    padding:0;
    border-top:1px solid #eee;
}
#archive-list li {
    display:block;
    list-style:none;
    margin:0;
    padding:6px 10px;
    border-bottom:1px solid #eee;
}

.borderbox, .field-help, input, textarea, select {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.field-shift {
    left: -9999px; position: absolute;
}

html[dir="rtl"] .field-shift {
    right: -9999px;
    left: auto;
}


/* Image replacement for checkbox and radio buttons. */
/* Placing in @media block forces browsers that don't support :checked to fall back to native inputs. */
@media only screen {
    .mergeRow-radio .field-group, .mergeRow-interests-checkboxes .field-group {margin:0;}

    .checkbox, .radio {
        margin:9px 0 0 0;
        padding:0;
    }

    /* Position and hide the real checkboxes and radio buttons */
    .checkbox input, .radio input {
        position:absolute;
        width:24px;
        height:24px;
        overflow:hidden;
        margin:0;
        padding:0;
        outline:0;
        opacity:0;
    }

    .checkbox input + span, .radio input + span {
        display:block;
        border-radius:3px;
        padding:6px 6px 6px 38px;
    }

    .checkbox:hover span,
    .checkbox input:focus + span,
    .radio:hover span,
    .radio input:focus + span {
        background:rgba(0,0,0,.05);
    }

    /* Insert a pseudo element inside each label with a background sprite.  */
    .checkbox input + span:before, .radio input + span:before {
        display:block;
        position:absolute;
        top:6px;
        left:6px;
        width:24px;
        height:24px;
        background:url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat;
        content:" ";
        vertical-align:top;
    }

    /* Position the background sprite based on state of checkbox/radio. */
    .radio input:focus + span:before { background-position:0 -30px; }
    .radio input:checked + span:before { background-position:0 -60px; }
    .radio input:checked:focus + span:before { background-position:-0 -90px; }
    .checkbox input + span:before { background-position:0 -120px; }
    .checkbox input:focus + span:before { background-position:0 -150px; }
    .checkbox input:checked + span:before { background-position:0 -180px; }
    .checkbox input:checked:focus + span:before { background-position:0 -210px; }

    /* Right-to-left checkbox/radio modifications */
    html[dir="rtl"] .checkbox input + span:before, html[dir="rtl"] .radio input + span:before {left:auto; right:0;}
    html[dir="rtl"] .checkbox input + span, html[dir="rtl"] .radio input + span {padding:6px 38px 6px 6px;}
}

/* Use high-res sprite for retina displays */
@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
    .checkbox input + span:before, .radio input + span:before, .calendar-icon {
        background-image:url('https://cdn-images.mailchimp.com/product/icons/signup-sprite-2x.png');
        background-size: 24px;
    }
}

/* IE6 and 7 overrides */
.ie-lte7 .field-group input, .ie-lte7 .subfields {width:535px;}
.ie-lte7 .cityfield input {width:170px;}
.ie-lte7 .statefield input {width:121px;}
.ie-lte7 .zipfield input {width:170px;}
.ie-lte7 .subfields input {width:40px;}
.ie-lte7 .hidden-from-view {display:none;}
.ie-lte7 select {
    display:inline-block;
    width:560px;
}

/* IE doesn't support input placeholders until v10, show labels on addresses */
.ie-lte7 .addressfield label, .ie-lte9 .addressfield label {display:block; font-weight:normal;}






		html[dir=rtl] .wrapper,html[dir=rtl] .container,html[dir=rtl] label{
			text-align:right !important;
		}
		html[dir=rtl] ul.interestgroup_field label{
			padding:0;
		}
		html[dir=rtl] ul.interestgroup_field input{
			margin-left:5px;
		}
		html[dir=rtl] .hidden-from-view{
			right:-5000px;
			left:auto;
		}
		.field-group input,select,textarea,.dijitInputField{
			color:#5d5d5d !important;
		}
		.asterisk{
			color:#cc6600;
		}
		label .asterisk{
			visibility:hidden;
		}
		.indicates-required{
			display:none;
		}
		.field-help{
			color:#777;
		}
		.error,.errorText{
			color:#e85c41;
			font-weight:bold;
		}