@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700');

body {background:#3c3c3c; margin:0; padding:0; font-family: 'Roboto Slab', serif; overflow-x:hidden;}

#logo {text-align:center; background:rgba(110,187,232,1); width:100%;}
#logo img {margin-right:-30px;}
#facebook {float:right; margin-right:55px; margin-top:125px;}

#video {background:url(../images/bg-video.jpg); background-position:center top; background-size:cover; background-repeat:no-repeat; padding:60px 0; text-align:center;}
#video h1 {color:#2a8bcb; font-size:40px; font-weight:normal; margin:0;}
#video h1 strong {color:#1f6493; font-weight:normal;}
#video img, #video iframe {border:1px solid #00dd00;}

#gallery {background:url(../images/bg-gallery.jpg) center center; background-size:cover; width:90%; height:auto; float:left; margin:123px 0 0; padding:70px 5%; text-align:center;}
#gallery h1 {color:#2a8bcb; font-size:40px; font-weight:normal; margin:0 0 40px;}
#gallery h1 strong {color:#1f6493; font-weight:normal;}
#gallery img {border:1px solid #00dd00; width:152px;}

#about {background:#2a8bcb; width:90%; height:auto; float:left; margin:0; padding:40px 5% 30px; text-align:center; color:#9ad7ff; font-size:18px; text-transform:uppercase;}
#about p {margin:0 0 25px; letter-spacing:8px;}
#about h1 {color:#FFF; font-size:81px; line-height:60px; font-weight:normal; margin:0;}
#about img {max-width:100%; height:auto;}
#whohelp {background:url(../images/bg-whohelp.jpg) center center; background-size:cover; width:90%; height:auto; float:left; margin:0; padding:20px 5% 40px; color:#FFF; font-size:16px; text-align:center;}
#whohelp p {margin:0 20% 30px;}
#whohelp img {margin:0 10px 10px; max-width:100%; height:auto;}
#prev, #next {width:5%; height:110px; float:left; margin:0; padding:90px 0 0;}
#next {text-align:right;}
#prev:hover, #next:hover {cursor:pointer;}
#slideshow {width:90%; height:200px; float:left; margin:0;}

#donate {background:#eff0f1; width:90%; height:auto; float:left; margin:0; padding:45px 5% 25px; color:#be0707; text-align:center; font-size:18px; text-transform:uppercase;}
#donate p {margin:0 0 25px; letter-spacing:8px;}
#donate h1 {color:#3c3c3c; font-size:81px; line-height:60px; font-weight:normal; margin:0;}
#donate img {max-width:100%; height:auto;}

#youhelp {background:url(../images/bg-youhelp.jpg); background-size:cover; width:100%; margin:0; color:#2c2c2c; font-size:23px; text-align:center; padding-bottom:80px;}
#youhelp p {margin-top:40px; padding-bottom:40px;}
#youhelp img {border:1px solid #62d85d; border-radius:20px; margin-top:50px;}
#youhelp a {color:#ffe47a; font-size:24px; text-transform:uppercase; text-decoration:none; padding:25px 65px; border-radius:20px; border:2px solid #ffff00;
background: rgba(225,110,43,1);
background: -moz-linear-gradient(left, rgba(225,110,43,1) 0%, rgba(212,53,21,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(225,110,43,1)), color-stop(100%, rgba(212,53,21,1)));
background: -webkit-linear-gradient(left, rgba(225,110,43,1) 0%, rgba(212,53,21,1) 100%);
background: -o-linear-gradient(left, rgba(225,110,43,1) 0%, rgba(212,53,21,1) 100%);
background: -ms-linear-gradient(left, rgba(225,110,43,1) 0%, rgba(212,53,21,1) 100%);
background: linear-gradient(to right, rgba(225,110,43,1) 0%, rgba(212,53,21,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e16e2b', endColorstr='#d43515', GradientType=1 );}
.hvr-float-shadow {vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent;
	position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform;}
.hvr-float-shadow:before {pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0;
	background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
	-webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity;}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {-webkit-transform: translateY(-5px); transform: translateY(-5px);}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px);}
#buttons {display:flex; flex-wrap:wrap; justify-content:center;}
#buttons a {margin-right:15px;}

#howhelp {width:100%; height:auto; margin:0; display:flex; flex-wrap:wrap;}
#howHead {background:url(../images/bg-howhelp.jpg) center center no-repeat #000; width:45%; height:auto; float:left; margin:0; padding:200px 0; color:#65fdff; text-align:center;
	font-size:18px; text-transform:uppercase;}
#howHead p {margin:0 0 25px; letter-spacing:8px;}
#howHead h1 {color:#FFF; font-size:81px; line-height:60px; font-weight:normal; margin:0; text-shadow:0 2px 5px rgba(0,0,0,.9);}
#howHead img {max-width:100%; height:auto;}
#howHead .triangle {position:absolute; top:50%; right:0;}
#howText {background:url(../images/bg-howText.jpg) center center; background-size:cover; width:45%; height:auto; float:left; margin:0; padding:90px 5%; color:#2c2c2c; font-size:18px;}
#howText h1 {color:#d8491d; font-size:32px; font-weight:normal; margin:0 0 30px;}
#howText h1 strong {color:#a80000; font-weight:normal;}
#howText p {margin:0 0 20px;}
#howText ul {margin:0 0 30px 45px;}

#whyhelp {width:100%; height:auto; display:flex; flex-wrap:wrap;}
#whyText {width:60%; height:auto; float:left; margin:0; padding:20px 1.5%;
background: rgba(90,90,90,1);
background: -moz-linear-gradient(left, rgba(90,90,90,1) 0%, rgba(60,60,60,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(90,90,90,1)), color-stop(100%, rgba(60,60,60,1)));
background: -webkit-linear-gradient(left, rgba(90,90,90,1) 0%, rgba(60,60,60,1) 100%);
background: -o-linear-gradient(left, rgba(90,90,90,1) 0%, rgba(60,60,60,1) 100%);
background: -ms-linear-gradient(left, rgba(90,90,90,1) 0%, rgba(60,60,60,1) 100%);
background: linear-gradient(to right, rgba(90,90,90,1) 0%, rgba(60,60,60,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#3c3c3c', GradientType=1 );}
#whyTextInside {width:89%; height:auto; float:left; margin:0; padding:20px 5%; border:3px solid #3c7b3c; color:#FFF; font-size:16px;}
#whyTextInside img {float:left; margin:0 30px 10px 0;}
#whyTextInside h1 {color:#9ad7ff; font-size:18px; font-weight:normal; margin:0 0 10px; padding:20px 0 0; text-transform:uppercase; letter-spacing:8px;}
#whyTextInside h2 {font-size:60px; line-height:60px; font-weight:normal; margin:0 0 50px; text-transform:uppercase;}
#whyPic {background:url(../images/bg-whyPic.jpg) center center; background-size:cover; width:37%; height:auto; float:left; margin:0;}

#contact {background:url(../images/bg-contact.jpg); background-size:cover; width:100%; height:auto; margin:0;}
#contactCurve {background:url(../images/bg-contactCurve.png) no-repeat; width:94%; padding:3%; height:auto;}
#contactInside {width:90%; height:auto; margin:0; padding:40px 5%; border:5px solid #959595;}
#contactInside h1 {color:#8b0000; font-size:18px; font-weight:normal; margin:0 0 25px; text-transform:uppercase; letter-spacing:8px; text-align:center;}
#contactInside img {display:block; margin:0 auto; max-width:100%; height:auto;}
#contactInside h2 {color:#323232; font-size:35px; font-weight:normal; text-align:center;}
#contactInside a {color:#323232; text-decoration:none;}
#contactInside h2 strong {color:#2a8bcb; font-weight:normal;}
#contactInside h3 {color:#323232; font-size:24px; font-weight:normal; text-transform:uppercase; margin:0 0 30px; text-align:center;}
#contactInside h4 {color:#cf3838; font-size:81px; line-height:60px; font-weight:normal; margin:0; text-transform:uppercase;}
#contactInside p {color:#4a4a4a; font-size:28px; margin:0 0 30px; text-align:center;}
#contactInside .space {width:5%;}
#contactInside .field {width:30%;}
#contactInside .submit {width:300px;}
input, textarea {width:100%; margin-bottom:20px;}
#contactInside input, #contact textarea {color:#afafaf; font-family: 'Roboto Slab', serif; font-size:18px; border:1px solid #20b7ef;}
#contactInside input.btn {background:#2a8bcb; width:100%; height:75px; color:#FFF; margin:30px 0 0; max-width:450px;}

#form {display:flex; flex-wrap:wrap; width:100%; justify-content:space-between !important;}
#form div {width:48%;}

footer {background:#3c3c3c; width:100%; height:auto; padding:15px 10px; color:#9ad7ff; font-size:18px; text-transform:uppercase; text-align:center;}
footer a {color:#9ad7ff; text-decoration:none;}
footer a strong {color:#FFF; font-weight:normal;}
footer a:hover {text-decoration:underline;}
footer a {display:inline!important;}

@media screen and (min-width: 320px) {
  html, body {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #whohelp {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  #whohelp img.golf {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }
}

@media only screen and (max-width: 900px) {
#howHead h1 {font-size:61px; line-height:50px;}
#buttons {justify-content:space-evenly;}
#buttons a {margin-right:0;}
#whyTextInside img {display:none;}
#contactInside h4 {font-size:61px; line-height:50px;}
}

@media only screen and (max-width: 815px) {
#video h1 {font-size:30px;}
#howHead {width:100%; float:none; padding:100px;}
#howText {width:100%; float:none;}
#whyText {width:100%; float:none;}
#whyTextInside {float:none;}
#whyPic {width:100%; float:none; height:200px !important;}
}

@media only screen and (max-width: 700px) {
#contactInside h4 {font-size:51px; line-height:40px;}
#buttons a {margin-bottom:15px;}
#form div {width:100%;}
}

@media only screen and (max-width: 650px) {
#about h1 {font-size:61px; line-height:40px;}
#donate h1 {font-size:61px; line-height:40px;}
#video {background:url(../images/bg-video.jpg); background-size:fit; background-repeat:no-repeat;}
}

@media only screen and (max-width: 450px) {
#about h1 {font-size:46px; line-height:25px;}
#donate h1 {font-size:46px; line-height:25px;}
#gallery img {width:125px;}
#contactInside textarea, #contactInside input {margin-bottom:15px; width:100%}
}