.body {font-family: Helvetica, "Helvetica Neue", Arial;font-size: 12px;line-height: 20px;color:#309; background-color:#EEE;}

#page {width:100%; min-width: 850px; height:auto; display:block; float: left; }
#header {width:100%; height:auto; display:block; float: left; text-align: center; padding:3% 0 4% 0; background-color:#FFF; }
.text {width:100%; height:auto; display:block; float:left; text-align:center; margin: 0 auto 0 auto;}
.text h1 {display:block; text-align:center; color:red; line-height: 45px; font-size:4em;}
.content h1 a {display:block; text-align:center; color:#FFF; line-height: 45px; text-decoration: none; }
.text h2 {display:block; text-align:center; color:black; font-size:1.8em;}
.text p {color:black; text-align: center; font-weight: bold; font-size: 1.3em;}
.transition_in {width:100%; height:20px; display:block; float: left; background: rgb(255,0,0) linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,255,255,1) 100%);}
.content {width:100%; height:auto; display:block; float: left; padding:1% auto; background-color:#CC1517;}
.content p {width:70%; height:auto; display:block; text-align:center; color:#FFF; line-height: 35px; font-size:2em; margin: 5px auto; padding: 1% 0; text-decoration: none; }
.transition_out {width:100%; height:20px; display:block; float: left; background: rgb(255,0,0) linear-gradient(180deg, rgba(255,0,0,1) 0%, rgba(255,255,255,1) 100%);}
.content-b {width: 80%; height: auto; display: block; float: left; padding: 2% 10% 3% 10%; background-color: #FFF;}
.content-b h2 {display:block; float: left; text-align:center; color:black; width: 100%; padding: 0 0 10px 0; font-size:1.8em;}
.social1 {width:168px; height:auto; display:  block; float:left; margin: 0 20px 50px 20px;}
.social1 h3 {display:block; text-align:center; color:black;}
.social1 img {height: 128px; width: 128px; display: block; text-align: center; margin: 0 auto; }
.social {width:25%; height:auto; display:  block; float:left;}
.social a{ display:block; text-align:center}
.social h3 {display:block; text-align:center; color:black;}
.social img {height: 128px; width: 128px;}
#footer {width:100%; height:auto; display:block; float: left; background-color:#CC1517;}
#footer h2, h2 a {text-decoration: none; display:block; float: left; text-align:center; color:white; width: 100%; padding: 5px 0; font-size:1.4em;}


@media only screen and (min-width: 300px) and (max-width: 850px)
{.body { background-color:#FFF;}
	
#page {width:100%; min-width: 300px; height:auto; display:block; float: left; }
#header {width:100%; height:auto; display:block; float: left; padding:20px 0% 20px 0; background-color:#FFF; }
.text {width:90%; height:auto; display:block; float:left; text-align:center; color:black; margin: 0 5%;}
.transition_in {display:none;}
.content {width:100%; height:auto; display:block; float: left; padding:0; background-color:#CC1517;}
.content h1 a {width:90%; height:auto; display:block; text-align:center; color:#FFF; line-height: 35px; font-size:.9em; margin: 30px auto; padding: 0; text-decoration: none; }
.transition_out {display:none;}
.content-b {width: 80%; height: auto; display: block; float: left; padding: 20px 10%; background-color: #FFF;}
.content-b h2 {display:block; float: left; text-align:center; color:black; width: 100%; padding: 0 0 10px 0; font-size:1.8em;}
.social {width:50%; height:auto; display:  block; float:left;}
	.social1 {width:100%; height:300px; display:  block; float:left; margin: 0;}
    .social1 h3 {display:block; text-align:center; color:black;}
    .social1 img {height: 200px; width: 200px; display: block; text-align: center; margin: 0 auto; }
	
.social a{ display:block; text-align:center}
.social h3 {display:block; text-align:center; color:black;}
.social img {height: 50%; width: 50%;}
#footer {width:100%; height:auto; display:block; float: left; background-color:#CC1517;}
#footer h2 {display:block; float: left; text-align:center; color:white; width: 100%; padding: 20px 0; font-size:1.4em;}
	
}