/*  This css is for the donation page on the new venture WP site */
/*  This file is a modified css of the style2.css file */
/*  Reason I am creating this file so it does not affect the donation page currently on the LIVE SERVER. 
	AND also the look and feel has changed */


#hero {
    position: relative;
    text-align: center;
	padding-top: 10px;
}

#hero:before {
    position: absolute;
    left: 0;
    top: 0;
}

#hero:after {
    position: absolute;
    right: 0;
    top: 0;
}

.package .item {
    position: relative;
}

.package .item .caption {
    background: rgba(0,0,0,.41);
    padding: 20px;
    font-size: 18px;
    text-align: center;
    position: absolute;
    left: 15px;
    bottom: 15px;
    right: 15px;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
}

.package .item .caption p {
    color: #ffffff;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
}

.package .item .caption .cur {
    font-weight: 700;
    font-size: 40px;
    font-family: 'Open Sans', sans-serif;
}


#donation .boxed {
    background: #fff;
    padding: 20px;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    margin: 10px 0;
    font-weight: 700;
    text-align: center;
	border: 3px solid #7f8685;
}

#donation .boxed input[type=text] {
    width: 140px;
    height: 40px;
    background: #f5f5f5;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    font-weight: bold;
    color: #000000;
    padding: 0 10px;
    display: inline-block;
    position: relative;
    top: 10px;
}

#donation .boxed > span {
    display: inline-block;
    margin: 0 10px;
}

#donation .boxed > span big {
    margin-right: 5px;
    position: relative;
    bottom: -5px;
    font-size: 30px;
}

#donation .boxed .button {
    background: #e6b720;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    color: #000000;
    border: 0;
    border-radius: 20px;
    height: 40px;
    box-shadow: none;
    display: inline-block;
}

#submitButtonSection {
	width: 100%;
	text-align: center;
}

.form-donation #fcn_submit {
    background: #000;
    color: #ffffff;
    border-radius: 5px;
    border: 0;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px 40px;
	font-size: 20px;
}


#video {
    padding: 30px 0 70px 0;
    position: relative;
    text-align: center;
}

#video h2 {
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    margin: 0 0 50px 0;
}

#video:before {
    position: absolute;
    left: 0;
    top: 100px;
}

#video:after {
    position: absolute;
    right: 0;
    top: 100px;
}


#yourInfo,
#ccInfo {
    border: 0;
    background: #ffffff;
}

#label_uf_select_amount,
#label_cc_info {
    padding: 10px 30px;
    font-size: 21px;
    border-radius: 10px;
	border: 1px solid #dddddd;
	background-color: #ecb830;   /*  background-color: #16a541;  - xmas green color  */
	color:#fff;
}



@media (max-width: 767px) {
    .package {
        margin: auto;
        width: 300px;
    }

    .package .item {
        margin: 10px 0;
    }

    #donation .boxed > span {
        display: block;
        margin: 10px 0;
    }

    #video iframe {
        position: relative;
        width: 100% !important;
        z-index: 1;
    }
}



@media (max-width: 467px) {
    .package {
        padding: 0;
    }

    .package .item img {
        width: 100%;
    }

    .package {
        margin: auto;
        width: 100%;
    }	
}

@font-face {
    font-family: "roboto_bold";
    src: url(../../Fonts/Roboto/Roboto-Bold.ttf);
}
@font-face {
    font-family: "great_vibes";
    src: url(../../Fonts/Great_Vibes/GreatVibes-Regular.ttf);
}
#hero{
    font-family: great_vibes;
}
#hero .four.columns:first-child{
    text-align: right;
}
#hero .four.columns:last-child{
    text-align: left;
}
#hero .single{
    padding-top: 30px;
}
#hero .heading1, #hero .heading2{
    font-size: 38px;
    line-height: 60px;
    letter-spacing: 1px;
	font-weight: bold;
}
#hero .heading2{
    font-size: 46px;
    line-height: 69px;
    letter-spacing: 3px;
}
#hero .description{
    font-family: "roboto_bold";
    font-size: 20px;
    line-height: 28px;
    padding: 0;
}

@media (max-width: 767px) {
    #hero .four.columns:first-child, #hero .four.columns:last-child {
        text-align: inherit;
    }
    #hero .description {
        width: 90%;
        margin: 0 auto;
    }
    #video:before, #video:after {
        top: 0;
    }
    #video iframe {
        margin-top: 230px;
    }
    #video h2 {
        margin: 0 auto;
        width: 60%;
    }
	
}
@media (max-width: 600px){
    #hero .row.single:first-child {
        padding-top: 235px;
    }
    #hero .swirl{
        display:none;
    }
	.spacer-area {padding-top:20px;}
	.holly {position: absolute; left: 400px; z-index:100;}
	
}



/* ******************************************* */
/*  CHI'S CODE                                 */
/* ******************************************* */
.leftbox {width: 90%;
 background: #f1f2f2;
 color: #000;
 text-align: center;
 font-size: 18px;
 line-height: 26px;
 padding: 30px 30px 30px 30px !important;;
 border-top-left-radius: 10px 10px;
 border-bottom-left-radius: 10px 10px;
 -moz-border-radius-topleft: 10px 10px;
 -moz-border-radius-bottomleft: 10px 10px;
 border-top-right-radius: 10px 10px;
 border-bottom-right-radius: 10px 10px;
 -moz-border-radius-topright: 10px 10px;
 -moz-border-radius-bottomright: 10px 10px;
 box-shadow: 5px 5px 5px #888888;
}
.rightbox {width: 90%;
  background: #f1f2f2;
 color: #000;
 text-align: center;
 font-size: 18px;
 line-height: 26px;
 padding: 30px 30px 30px 30px !important;;
 border-top-left-radius: 10px 10px;
 border-bottom-left-radius: 10px 10px;
 -moz-border-radius-topleft: 10px 10px;
 -moz-border-radius-bottomleft: 10px 10px;
 border-top-right-radius: 10px 10px;
 border-bottom-right-radius: 10px 10px;
 -moz-border-radius-topright: 10px 10px;
 -moz-border-radius-bottomright: 10px 10px;
 box-shadow: 5px 5px 5px #888888;
 }

.clickhere-text {font-size: 16px; font-weight:bold;}
.clear {clear: both;}
h2.blktext {color: #000;}
 
input[type="number3"]{
	font-size: 16px;
	line-height: 1.3;
	padding: 15px 10px 11px 0px;
	border-radius: 4px;
	border: solid 3px #c1c1ba;
	margin-bottom: 0px;
	height: auto;
	text-align: left;
	color: #333232;
	width: 100%;
	cursor: pointer;
	vertical-align: bottom;
	-webkit-appearance: none;
}
input[type="number3"]:focus{
	border-color: #ecb830;
	outline: 0
}

input[type="number2"]{
	font-size: 16px;
	line-height: 1.3;
	padding: 15px 10px 11px 0px;
	border-radius: 4px;
	border: solid 3px #c1c1ba;
	margin-bottom: 0px;
	height: auto;
	text-align: left;
	color: #333232;
	width: 100%;
	cursor: pointer;
	vertical-align: bottom;
	-webkit-appearance: none;
}
input[type="number2"]:focus{
	border-color: #ecb830;
	outline: 0
}

.lh {
	position: relative;
	margin-bottom: 10px;
}
.lh label {
	position: absolute;
	padding: 0;
	top: 9px;
	left: 11px;
	z-index: 5
}
.lh label {
	top: -4px;
	left: 10px;
	background: #fff;
	font-size: 8px;
	line-height: 1;
	opacity: 0
}

.prefix, .postfix, .preinput, .postinput {
	font-weight: 500;
	font-size: 0.8rem;
	line-height: 1rem;
	color: #c1c1ba;
	padding: 15px 30px 11px 30px; /* control spacing for $ and USD */
}
.prefix {
	text-align: right
}
.lh .preinput, .lh .postinput {
	top: 1px
}
.preinput, .postinput {
	position: absolute;
	top: 21px;
	z-index: 1
}
.preinput ~ input, .postinput ~ input {
	padding-left: 30px
}
.preinput {
	left: 0;
}
.postinput {
	right: 0
}

.donate-amount input {
	height: 60px;
	font-size: 16px;
	color: #369ff4;
	width: 100%;
	
}
.donate-amount .postinput, .donate-amount .preinput {
	color: #333232;
	font-size: 16px;
	top: 10px;

}

input[type="number3"],input[type="number2"] {
	-moz-appearance: textfield;
}




.whitetxt {color: #fff;}

.custom-check, .custom-check2 {
	position: relative;
	margin: 20px 0 20px 15px;/* control left spacing for checkbox */
	text-align: left;
}
.custom-check input[type="checkbox"]+label, .custom-check2 input[type="checkbox"]+label {
	margin: 0 0 0 40px;
	padding: 0;
	display: block;
	line-height: 40px;
	float: left; /* i added this */	
}
.custom-check input, .custom-check label:before, .custom-check2 input, .custom-check2 label:before {
	position: absolute;
	width: 26px;
	height: 26px;
	left: 0;
	margin-top: 5px;
}
.custom-check input[type=checkbox], .custom-check2 input[type=checkbox] {
	opacity: 0;
	z-index: 1;
}
.custom-check input[type=checkbox]+label:before {
	content: "";
	display: inline-block;
	border: 1px solid #c1c1ba;
	font-family: "cw-icons";
	background-color: #fff;
	-webkit-transition: 0.1s linear all;
	-moz-transition: 0.1s linear all;
	transition: 0.1s linear all;
	text-align: center;
	border-radius: 2px;
	color: #ecb830;	
}

.custom-check2 input[type=checkbox]+label:before {
	content: "";
	display: inline-block;
	border: 1px solid #c1c1ba;
	font-family: "cw-icons";
	background-color: #fff;
	-webkit-transition: 0.1s linear all;
	-moz-transition: 0.1s linear all;
	transition: 0.1s linear all;
	text-align: center;
	border-radius: 2px;
	color: #000;
}

.custom-check input[type=radio]+label:before, .custom-check2 input[type=radio]+label:before {
	border-radius: 1rem;
}
.custom-check input[type=checkbox]:checked+label:before, .custom-check2 input[type=checkbox]:checked+label:before {
	content: "✓";
	line-height: 24px;
}

.custom-check input[type=checkbox]:hover+label:before, .custom-check input[type=checkbox]:active+label:before, .custom-check input[type=checkbox]:focus+label:before {
	border-color: #ecb830;
}

.custom-check2 input[type=checkbox]:hover+label:before, .custom-check2 input[type=checkbox]:active+label:before, .custom-check2 input[type=checkbox]:focus+label:before {border-color: #000;}

.custom-check input[type=checkbox][disabled]+label, .custom-check input[type=checkbox][disabled]+label:before, .custom-check2 input[type=checkbox][disabled]+label, .custom-check2 input[type=checkbox][disabled]+label:before {
	color: #c1c1ba;
	border-color: #c1c1ba;
	cursor: default;
}
.custom-check.error input[type=checkbox]+label:before, .custom-check .error input[type=checkbox]+label:before, .custom-check2.error input[type=checkbox]+label:before, .custom-check2 .error input[type=checkbox]+label:before {
	border-color: #fa575d;
}
.custom-check.error label, .custom-check .error label, .custom-check2.error label, .custom-check2 .error label {
	color: #fa575d;
}

.error { color: red; }

.subtitle-space {padding-top:30px; clear: both;}
.bullet-space {padding-top: 86px; clear: both;}
.spacer-area {padding-top:55px; clear: both;}
.yellowbg {background: #e6b720; color:#fff;}


.donateconfirm {
width: 180px;
font-size:0.8em;
font-family:'Open Sans';
font-weight:600;
background-color:#ecb830; /* background-color:#16a541; - xmas green color */
text-align:center;
color:#fff;
padding:20px 10px;
border-radius:5px;
margin:30px 8px;
float: left;
border: 1px solid #b7b7b7;
}
.donateconfirm a {color:#222 !important; cursor: pointer;}  /*  .donateconfirm a {color:#222 !important; cursor: pointer;}  - yellow but */
.donateconfirm a:hover {color:#fff !important; cursor: pointer;}

.donateconfirm-blk {
width: 220px;
font-size:1.15em;
font-family:'Open Sans';
font-weight:600;
background-color:#000;
text-align:center;
color:#fff;
padding:20px;
border-radius:5px;
margin:30px 5px;
float: left;
}
.donateconfirm-blk a {color:#e6b720 !important; cursor: pointer;}
.donateconfirm-blk a:hover {color:#fff !important; cursor: pointer;}



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

.leftbox {font-size: 18px; line-height: 30px; padding: 30px 20px 0px 20px;}
.rightbox {font-size: 18px; line-height: 30px; padding: 30px 20px 0px 20px;}

.donateconfirm, .donateconfirm-blk {width: 90%; font-size:1.2em; margin: 10px 0;}

}


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

.leftbox {width: 99%; font-size: 18px; line-height: 30px; padding: 30px 10px 0px 10px;}
.rightbox {width: 99%; font-size: 18px; line-height: 30px; padding: 30px 10px 0px 10px;}

.donateconfirm, .donateconfirm-blk {width: 100%;font-size:1em; margin: 10px 0;}
.whitetxt, .blktxt {font-size: 13px;}

.leftbox br, .rightbox br {display: none;}
}


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

.leftbox {font-size: 18px; line-height: 30px; padding: 30px 20px 0px 20px; }
.rightbox {font-size: 18px; line-height: 30px; padding: 30px 20px 0px 20px;}

.donateconfirm, .donateconfirm-blk {width: 100%; margin: 10px 0;}
.whitetxt, .blktxt {font-size: 12px;}

.bullet-space {padding-top: 87px; clear: both;}

}


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

.leftbox {font-size: 20px; line-height: 30px; padding: 30px 30px 0px 30px;}
.rightbox {font-size: 20px; line-height: 30px; padding: 30px 30px 0px 30px; margin-top: 30px;}

.donateconfirm, .donateconfirm-blk {width: 100%; margin: 10px;}

.whitetxt, .blktxt {font-size: 13px;}

.subtitle-space {padding-top:30px; clear: both;}
.bullet-space {padding-top: 10px; clear: both;}


.form-donation #fcn_submit {
	width: 100%;
}


}


@media only screen and (max-width:450px){
.leftbox {width: 120%; font-size: 16px; line-height: 30px; padding: 30px 30px 0px 30px;}
.rightbox {width: 120%; font-size: 16px; line-height: 30px; padding: 30px 30px 0px 30px; margin-top: 30px;}

.donateconfirm, .donateconfirm-blk {width: 90%; margin: 10px 0;}
.whitetxt, .blktxt {font-size: 12px;}

.bullet-space {padding-top: 10px; clear: both;}
.subtitle-space {padding-top:10px; clear: both;}

::-webkit-input-placeholder {font-size: 12px;}
:-moz-placeholder { /* Firefox 18- */  font-size: 12px;}
::-moz-placeholder {  /* Firefox 19+ */  font-size: 12px; }
:-ms-input-placeholder {font-size: 14px; }

#video h2 {text-align: left; z-index: 100;}
}


/* ==========================================================================
   DONATE HTML PAGE - converted WP to HTML page
   ========================================================================== */
   
.bodycontent {font-family:open sans, sans-serif; font-size: 16px; line-height: 30px; text-align: center;}
a.header {color: #000;}
a.header:hover {color: #ebb82d;}
a.footer {color: #8c8c8c;}
a.footer:hover {color: #ebb82d;}
a.footer:active {color: #ebb82d;}

.faq-spacer {height: 550px;}

.faqsaccordion {background: url(/uf/images/donation.jpg) no-repeat 0px 0px scroll;}

.uf-footers {background-color:#333232; color: #8c8c8c; line-height: 32px;}
.textalignleft {text-align:left;}
.textaligncenter {text-align:center;}

.socialicons {padding: 40px 0 15px 0; text-align: center;}
.email, .facebook, .twitter, .youtube {display: inline-block; width: 50px; height: 26px;} 
.email {background: url('/uf/images/icon-email.gif') bottom;}
.email:hover {background: url('/uf/images/icon-email-hover.gif');}

.facebook {background: url('/uf/images/icon-facebook.gif') bottom;}
.facebook:hover {background: url('../images/icon-facebook-hover.gif');}

.twitter {background: url('/uf/images/icon-twitter.gif') bottom;}
.twitter:hover {background: url('/uf/images/icon-twitter-hover.gif');}

.youtube {background: url('/uf/images/icon-youtube.gif') bottom;}
.youtube:hover {background: url('/uf/images/icon-youtube-hover.gif');}

hr.footer {height: 1px; border:0; background: #ebb82f;}

.footer-copyrights {text-align: center; padding: 15px 0 25px 0;}

h2.donate {font-family: open sans condensed, sans-serif; font-size: 36px; text-transform: uppercase; font-weight: bold; margin-bottom: 20px;}
h5.footer {font-family: open sans condensed, sans-serif; color:#ebb82d; font-weight: 600; font-size: 16px; letter-spacing: 0.1em; margin-bottom: 12px;}
.donate-content {font-size: 20px; line-height: 28px; font-weight: 600;}
.donate-tagline {font-size: 34px; line-height: 50px; font-style:italic; text-shadow: 2px 1px 5px #868585;}



.effectshadow {box-shadow: 0px 0px 6px #bdbdbd;}
.imgspacing {margin: 0 10px;}
.monthly-donation {font-size: 26px; line-height: 50px;}
.monthly-donation span {font-size: 16px; font-weight: bold;} /* control monthly and one-time text */
.monthly-donation-large {font-size: 34px; line-height: 44px; font-weight: bold;}

.donation-boxx {border: 1px solid #979a9c; margin-top: 20px; padding: 2px 10px 4px 10px; width: 85%; margin:0 auto;}
.donation-boxx input[type=text].boxx-contribution, .donation-boxx-noborder input[type=text].boxx-contribution {
    width: 30% !important;
	height: 40px !important;
    background: #fff;
    border: 1px solid black;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    font-weight: bold;
    color: #000000;
    padding: 0 10px;
    display: inline-block;
    position: relative;
    top: 5px;
    font-size: 22px !important;	 
}
.donation-boxx-title {font-size:16px; font-weight: 500; margin-bottom: 0px; padding-bottom: 0;}
.donation-boxx-noborder {padding: 20px 10px; width: 85%; margin:0 auto;}

.donate-boxx {border: 1px solid #979a9c; padding: 10px; width: 100%; height:120px; box-shadow: 2px 1px 5px #868585; font-size: 18px; font-weight:bold;}
.donate-boxx-title {font-size: 28px; line-height: 45px;}


@media only screen and (max-width:1024px){
.donation-boxx {width: 100%;}
.donation-boxx-noborder {padding: 20px 0px; width: 100%; margin:0 auto;}
.donation-boxx input[type=text].boxx-contribution, .donation-boxx-noborder input[type=text].boxx-contribution {width: 90% !important;}
.monthly-donation br {display: none;}
}



/* ==========================================================================
   WORDPRESS SITE - DONATE ON HOME PAGE "JOIN OUR MONTHLY GIVING PROGRAM"
   ========================================================================== */
/*  border */ 
.borderme {width: 100%; border: 1px solid #979a9c; box-shadow:  2px 2px 6px #888888; text-align: center; padding-bottom: 15px;}
.bordermelarge {width: 96%; border: 1px solid #979a9c; box-shadow:  2px 2px 6px #888888; text-align: center; padding: 15px;}

.childtitle {font-size: 28px; font-weight: bold; padding-top: 15px; margin-bottom: 0px;}

#headerimg {
   background-image: url('https://unstoppablefoundation.org/uf/images/hp-1child.jpg');
   height: 204px;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#headerimg:hover {
   background-image: url('https://unstoppablefoundation.org/uf/images/hp-1child-hover.jpg');
}


#headerimg2 {
   background-image: url('https://unstoppablefoundation.org/uf/images/hp-3children.jpg');
   height: 204px;
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#headerimg2:hover {
   background-image: url('https://unstoppablefoundation.org/uf/images/hp-3children-hover.jpg');
}


#headerimg3 {
   background-image: url('https://unstoppablefoundation.org/uf/images/hp-5children.jpg');
   height: 204px;
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#headerimg3:hover {
   background-image: url('https://unstoppablefoundation.org/uf/images/hp-5children-hover.jpg');
}




/* ==========================================================================
   GENERIC & INSPIRE FORM
   ========================================================================== */
h1.title {font-size:36px; font-weight: bold; text-align: center; height:48px;}
h2.title {font-size:20px; font-weight: bold; text-align: center; height:40px;}