html {
  background: url(images/bg.jpg)
}


html, body{
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 62.5%;
  height: 100%;
}

body {
  color: #FFF;
  font-family: 'CharisSILRegular', Arial, Helvetica, sans-serif;
  font-size: 20px;
   background: url(images/big-bg.jpg) 50% 0 no-repeat;
   min-height: 900px;
}

a {
  color: #ac5347;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

p {
  margin-bottom: 18px;
  line-height: 1.2;
}

input, select, textarea, button {
  font: normal 14px 'CharisSILRegular', Arial, Helvetica, sans-serif;
}
textarea {
  overflow: auto;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
  font-size: 0;
  height: 0;
  line-height: 0;
}

#wrap {
  margin: 0 auto;
  text-align: left;
  width: 100%;
  max-width: 960px;
  padding-top: 58px;
}

.container {}
.container ul, .container ol, .container dl {
  margin-bottom: 18px;
  line-height: 1.2;
}

.f-btn {
  display: block;
  text-indent: -999em;
  outline: none;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;}

strong, h2, h3 {
  font-family: 'CharisSILBold';
}
em {
  font-family: 'CharisSILBoldItalic';
}


/*   ============   HEADER   ============   */

#header{
  height: 58px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background: url(images/header-bg.png) 0 0 repeat-x;
}
#header .wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 6px;
  text-align: center;
}



/*   ============   LEFT COLUMN   ============   */

#leftcolumn{
  float: right;
  position: relative;
  /*width: 325px;*/
  width: 33.85%;
  margin: 10px -4px 0 0;
  background: url(images/js.png) 0 0 no-repeat;
  min-height: 358px;
}
#leftcolumn .wrap {
  text-align: center;
  padding-top: 268px;
}
#leftcolumn .wrap h2 {
  text-transform: uppercase;
  font-size: 28px;
  margin-bottom: 2px;
 line-height: 1;
}
#leftcolumn .wrap p {
  font: 14px 'proximanova-bold';
  text-transform: uppercase;
}



/*   ============   MAIN CONTENT   ============   */

#maincontent{
  display: inline;
  float: left;
  position: relative;
  /*width: 620px;*/
  width: 64.58%;
  background: url(images/bg-top.png) 50% 0 no-repeat;
  margin-bottom: 44px;
}
#maincontent .wrap {
  background: url(images/bg-bottom.png) 50% 100% no-repeat;
  padding: 72px 20px 0;
  min-height: 300px;
  text-align: justify;
  line-height: 30px;
}


#logo {
  padding: 19px 0 0 277px;
  margin-bottom: 29px;
}
#logo a {
  width: 404px;
  height:197px;
  background: url(images/logo.jpg) 0 0 no-repeat;
}
#act-now {
  padding: 51px 0 45px 178px;
  background: url(images/stripes.png) 0 0 repeat-x;
  overflow: hidden;
}
#act-now h2 {
  text-transform: uppercase;
  font-size: 30px;
  margin-bottom: 22px;
  line-height: 1;
}
#join-us {
  float: left;
  margin-left: -4px;
  /*margin-left: 174px;*/
}
#join-us p, #donate p {
  text-align: center;
  margin-bottom: 12px;
  line-height: 1;
}
#join-us input[type=text] {
  width: 155px;
  height: 55px;
  line-height: 55px;
  background: transparent url(images/join-us-bg.png) 0 0 no-repeat;
  font-family: 'proximanova-regular-webfont';
  font-size: 14px;
  text-transform: uppercase;
  color: #333333;
  float: left;
  padding: 0 8px 0 14px;
  border:none;
}
#join-us input.f-btn {
  float: left;
  width: 57px;
  height: 55px;
  border: none;
  cursor: pointer;
  background: transparent url(images/join-us-bg.png) 100% 0 no-repeat;
}
#donate {
  float: left;
  margin-left: 145px;
}


/*   ============   FOOTER   ============   */

#footer{
  clear: both;
  padding: 31px 0;
  background: url(images/stripes.png) 0 0 repeat-x;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  font-family: 'proximanova-semibold';
}
#footer strong {
  font-family: 'proximanova-extrabold';
}





@media (max-width: 1024px) {
  #leftcolumn {
    margin-right: 0;
  }
#logo {
  padding-left: 0;
  text-align: center;
}
#logo a {
  display: inline-block;
}
#act-now {
  padding: 1em;
  text-align: center;
}
#join-us, #donate {
  max-width: 240px;
  margin: 1em auto 0;
  float: none;
  overflow: hidden;
}

}

@media (max-width: 768px) {
 #maincontent {
   float: none;
   width: 94%;
   max-width: 620px;
   margin: 0 auto;
   display: block;
 }
#leftcolumn {
  float: none;
  margin: 2em auto;
  width: 325px;
}
#maincontent .wrap {
  min-height: auto;
  padding-bottom: 60px;
}


}