/* ==============================================================================
 * normalize.css v3.0.2 | MIT License | git.io/normalize 
 * ============================================================================== */ 
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}input{outline:none}
/* ============================================================================== */ 

/* ============================================================================== * 
 * ResponsiveBoilerplate v2.3.2 - 2014-06-24. 
 * Author: Fernando Monteiro - Licensed under MIT license.
 * ============================================================================== */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,em,img,small,strike,strong,b,u,i,ol,ul,li,form,label,legend,article,aside,footer,header,section{padding:0;margin:0;font-size:100%;vertical-align:baseline;border:0}article,aside,footer,header,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}body>.clearfix{zoom:1}img{max-width:100%}body>img,object,embed,video{width:100%}img{height:auto;vertical-align:middle;border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-ms-interpolation-mode:bicubic}a:focus{outline:0}.container{padding-right:20px;padding-left:20px}.container:before,.container:after{display:table;line-height:0;content:""}.container:after{clear:both}.content{width:100%}.content:before,.content:after{display:table;line-height:0;content:""}.content:after{clear:both}
@media handheld,only screen and (max-width:768px){body{font-size:1.0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none}.container{padding-right:10px;padding-left:10px}.content{width:100%}}@media screen and (max-width:400px){@-ms-viewport{width:device-width}@viewport{width:device-width}}
/* ============================================================================== */ 


/* LAYOUT 
 * ============================================================================== */ 
html{height:100%}
body{width:100%;height:100%;min-width:280px;background:url(donate.jpg) 50% 30% no-repeat fixed;background-size:cover}
body.thankyou{background:url(thankyou.jpg) 50% 30% no-repeat fixed;background-size:cover}
.page{width:100%;min-height:100%;height:auto !important;height:100%;position:relative}
.container{width:90%;max-width:960px;margin:0 auto}
/* ============================================================================== */ 


/* TEXT
 * ============================================================================== */ 
body { color: #444; font: 400 16px/140% 'Exo 2', Tahoma, Verdana, Segoe, sans-serif; }
a { color: #947; cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }
p { padding: 0 0 1em; margin: 0; text-align: left; }
p:last-child { padding-bottom: 0; }
em, i { font-style: italic; font-weight: 300; }
strong { font-weight: 600; }
/* ============================================================================== */ 


/* PAGE 1
 * ============================================================================== */ 
#page1{background:rgba(153,68,119,0.3);color:#fff}
.say{padding:20px 10px;font-size:25px;line-height:135%;font-weight:400;font-style:italic;text-align:center}
.btn{position:absolute;bottom:30px;left:50%;width:200px;padding:30px;margin-left:-130px;background:#cc3;color:#fff;font-size:24px;text-align:center;text-transform:uppercase;text-decoration:none;border:0}
.btn:hover{text-decoration:none}
input.btn{width:260px}
@media screen and (min-width:768px){.say{padding:40px;font-size:34px}.btn{bottom:40px}}
@media screen and (min-width:1024px){.say{padding:100px 40px 40px;font-size:41px}.btn{bottom:90px}}
/* ============================================================================== */ 


/* PAGE 2
 * ============================================================================== */ 
#page2{background:#fff;box-shadow:0 0 50px rgba(0,0,0,0.5)}
#page2:before{content:'';position:absolute;top:0;left:0;height:0;width:100%;border-top:4px solid #947}
p.input{margin:30px auto;font-weight:300;text-align:center}
.amount{padding:4px;margin-bottom:10px;font-size:80px;border:4px solid #fff;width:80%;text-align:center;color:#947}
.amount:hover, .amount:focus { border-color: #947; }
.input label { display: block; width: 100%; font-size: 28px; color: #947; }
.formsubmit { margin: 0 auto; display: block; position: static; }
.formsubmit:hover { background: #947; }
.tabs{position:relative;margin:20px 0 0 0;width:100%}
.tabs .psys { margin-right: 5px; }
.tabs label.psyslabel {display: inline-block; width: 90%;padding: 0 0 15px 0; }
.tabs input:hover + label{color:#bababa}
.tabs label:first-of-type{z-index:4}
.tablabel_ym{z-index:3}
.tablabel_visa{z-index:2}
.tabs label:after{content:'';background:#fff;position:absolute;bottom:-2px;left:0;width:100%;height:2px;display:block}
.tabs input:checked + label{z-index:6;color:#bababa;}
.tabcontent{position:relative;z-index:5;border-bottom:1px solid #eee}
.tabcontent div{position:absolute;top:0;left:0;z-index:1;/*opacity:0;transition:all linear 0.1s*/}
.tabs input.wm:checked ~ .tabcontent .donate_wm,
.tabs input.ym:checked ~ .tabcontent .donate_ym,
.tabs input.visa:checked ~ .tabcontent .donate_visa{z-index:100;}
.comeback {color:#fff;position:absolute;bottom:0;text-align:center}
@media screen and (min-width:480px) {
	.amount { width: 50%; }
	.mobileonly {display: none; }
	.tabs input.psys{z-index:1000;opacity:0;width:0;cursor:pointer}
	.tabs label.psyslabel{width:auto;position:relative;cursor:pointer;padding:10px;display:inline-block;border:1px solid #eee}
}
@media screen and (min-width:768px) {
	p.input { margin: 70px auto; }
	.tabs label.psyslabel { line-height:40px; padding: 20px 30px 20px 70px; background: url(paymetsys.jpg) 0 0 no-repeat; }
	.tabs label.tablabel_ym { background-position: 0 -80px; }
	.tabs label.tablabel_visa { background-position: 0 -160px; }
}
@media screen and (min-width:1024px) {
	.amount { width: 30%; }
	.tabs { margin-top: 70px; }
	.tabs label.psyslabel { font-size: 20px; }
}
/* ============================================================================== */ 


/* PAGE 3
 * ============================================================================== */ 
#page3 { background: rgba(232, 55, 162, 0.2);/*rgba(204, 204, 51, 0.2);*/ color: #fff; }
#page3 .say { font-size: 28px; position: absolute; bottom: 0px; }
#page3 .say small { font-size: 18px; display: block; }
@media screen and (min-width:768px) {
	#page3 .say { font-size: 56px; bottom: 20px; }
	#page3 .say small { font-size: 36px; }
}
/* ============================================================================== */ 



/* ==============================================================================
 * ANIMATION
 * ============================================================================== */ 
a, input {
  -webkit-transition: all 300ms; 
	 -moz-transition: all 300ms; 
	   -o-transition: all 300ms; 
		  transition: all 300ms; 
}
/* --- Outline Out --- */
.hvr-outline-out {
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2),0 0 10px rgba(0, 0, 0, 0.3);
}
.hvr-outline-out:before {
	content: '';
	position: absolute;
	border: #cc3 solid 4px;
	top: 0; right: 0; bottom: 0; left: 0;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: top, right, bottom, left;
	transition-property: top, right, bottom, left;
}
.hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before {
	top: -8px; right: -8px; bottom: -8px; left: -8px;
}
/* ============================================================================== */