.bar{
	background:#044A7D;
	width:100%;
	padding:0.3rem 0 0.2rem 0.5rem;
	color:#FFF;
}
.bar2{
	background:#044A7D;
	width:100%;
	padding:0.3rem 0 0.2rem 0.5rem;
	margin:1.5rem 0 0 0;
	color:#FFF;
}
.title{
	width:100%;
	padding:1.5rem 1.5rem 0 1.5rem;
	color:#333;
	font-size:22px
}
.title2{
	width:100%;
	padding:0 0 0 1.5rem;
	margin:-0.5rem 0 0 0;
	color:#333;
	font-size:14px;
	font-style:italic;
	color:#009AE1
}
.title3{
	width:100%;
	padding:0 1.5rem 0 1.5rem;
	color:#333;
	font-size:22px
}
.title4{
	width:100%;
	padding:0 1.5rem 0 0rem;
	color:#009AE1;
	font-size:20px
}
.title5{
	width:100%;
	padding:0 1.5rem 0 1.5rem;
	color:#333;
}
.content{
	width:100%;
	padding:1.5rem;
	text-align:justify
}
.content3{
	width:100%;
	padding:0;
	background:#FEFEFD;
	text-align:justify;
	overflow:hidden;
	border:1px #999 solid
}

.page-right4{
	width:100%;
}
    /* Smartphones (portrait and landscape) ---------- */
    /*@media screen and (min-width: 320px) and (max-width: 480px){*/
    @media screen and (min-width: 320px) and (max-width: 600px){
        /* styles */
h1 {
	color: fuchsia;
}

.desc:after {
	content:" In fact, it's between";
}
.wrap{
	width:100%;
  	margin: 0;
	text-align:left
}
.left-header{
	width:100%;
	text-align:center
}
.page-left{
	visibility:hidden;
	position:absolute
}
.page-right{
	visibility:hidden;
	position:absolute
}
.page-left2{
	width:100%;
	float:left;
	margin:1.5rem 0;
	background:#FEFEFD;
}
.page-left3{
	visibility:hidden;
	position:absolute
}
.page-right3{
	width:100%;
	float:left;
	margin:1.5rem 0;
}
.right-header{
	width:100%;
}
.top{
	width:100%;
	margin:0.5rem 0 0 0;
	height:50px;
	background:#044A7D;
}
.join{
	background: url(../images/join.png) no-repeat center;
	height:26px;
}
.content2{
	background:#044A7D;
	width:100%;
	padding:1.5rem;
}
.content3{
	visibility:hidden;
	position:absolute
}
.getinvloved{
	margin:1.5rem 0 0 0
}

.menu{
	width:100%;
	height:40px;
}
#contact-form{
	padding:0.5rem 0 0 0
}
.col1{
	background:#CC0C26 url(../images/arrow2.png) 90% -8px no-repeat;
	width:95%;
	padding:0.5rem;
	margin:0.7rem 0.7rem 0 0.7rem;
	font-size:1.2em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col1 a{
	padding:1.0rem;
	color:#FFF;
}
.col1 a:hover{
	color:#CCC
}
.col2{
	background:#009AE1 url(../images/arrow2.png) 90% -8px no-repeat;
	width:95%;
	padding:0.5rem;
	margin:0.7rem 0.7rem 0 0.7rem;
	color:#FFF;
	font-size:1.2em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col2 a{
	padding:1.0rem;
	color:#FFF;
}
.col2 a:hover{
	color:#CCC
}		
    }
    /* Smartphones (portrait and landscape) ---------- */
    /*@media screen and (min-width: 480px) and (max-width: 768px){*/
    @media screen and (min-width: 600px) and (max-width: 768px){
        /* styles */

h1 {
  color: green;
}

.desc:before {
  content: "This browser window is ";
}
.wrap{
	width:100%;
  	margin: 0;
	text-align:left
}
.wrap2{
	background:#FEFEFD;
	width:100%;
  	margin: 0;
	display:inline-block;
	text-align:left
}
.left-header{
	width:30%;
	float:left;
}
.right-header{
	width:70%;
	float:left;
}
.page-left{
	width:70%;
	float:left;
	margin:1.5rem 0;
	background:#FEFEFD;
}
.page-right{
	width:27%;
	float:right;
	margin:1.5rem 0 0 0.5rem;
}
.top{
	width:100%;
	height:50px;
	background:#044A7D;
}

.join{
	background: url(../images/join.png) no-repeat center;
	height:26px;
}
.content2{
	background:#044A7D;
	width:100%;
	padding:1.5rem;
}
.menu{
	width:100%;
	height:40px;
}
.col1{
	background:#CC0C26 url(../images/arrow2.png) 90% 0px no-repeat;
	width:48%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	font-size:1.3em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col1 a{
	padding:1.0rem;
	color:#FFF;
}
.col1 a:hover{
	color:#CCC
}
.col2{
	background:#009AE1 url(../images/arrow2.png) 90% 0px no-repeat;
	width:48%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	color:#FFF;
	font-size:1.3em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col2 a{
	padding:1.0rem;
	color:#FFF;
}
.col2 a:hover{
	color:#CCC
}
.col3{
	background:#CC0C26 url(../images/arrow2.png) 90% 0px no-repeat;
	width:92%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	font-size:1.3em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col3 a{
	padding:1.0rem;
	color:#FFF;
}
.col3 a:hover{
	color:#CCC
}
.col4{
	background:#009AE1 url(../images/arrow2.png) 90% 0px no-repeat;
	width:92%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	color:#FFF;
	font-size:1.3em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col4 a{
	padding:1.0rem;
	color:#FFF;
}
.col4 a:hover{
	color:#CCC
}
.page-left2{
	width:70%;
	float:left;
	margin:1.5rem 0;
	background:#FEFEFD;
}
.page-left3{
	width:50%;
	float:left;
	margin:1.5rem 0;
}
.page-right3{
	width:50%;
	float:right;
	margin:1.5rem 0;
}
						
    }
    /* Smartphones (portrait) ---------- */
    @media screen and (max-width: 320px){
        /* styles */

h1 {
	color: fuchsia;
}

.desc:after {
	content:" In fact, it's between 500px and 600px wide.";
}
.wrap{
	width:100%;
  	margin: 0;
	text-align:left
}
.left-header{
	width:100%;
	text-align:center
}
.page-left{
	visibility:hidden;
	position:absolute
}
.page-right{
	visibility:hidden;
	position:absolute
}
.page-left2{
	width:100%;
	float:left;
	margin:1.5rem 0;
	background:#FEFEFD;
}
.page-left3{
	visibility:hidden;
	position:absolute
}
.page-right3{
	width:100%;
	float:left;
	margin:1.5rem 0;
}
.right-header{
	width:100%;
}
.content3{
	visibility:hidden;
	position:absolute
}
.top{
	width:100%;
	margin:0.5rem 0 0 0;
	height:50px;
	background:#044A7D;
}
.getinvloved{
	margin:1.5rem 0 0 0
}

.menu{
	width:100%;
	height:40px;
}
#contact-form{
	padding:0.5rem 0 0 0
}
.col1{
	background:#CC0C26 url(../images/arrow2.png) 90% -8px no-repeat;
	width:95%;
	padding:0.5rem;
	margin:0.7rem 0.7rem 0 0.7rem;
	font-size:1.2em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col1 a{
	padding:1.0rem;
	color:#FFF;
}
.col1 a:hover{
	color:#CCC
}
.col2{
	background:#009AE1 url(../images/arrow2.png) 90% -8px no-repeat;
	width:95%;
	padding:0.5rem;
	margin:0.7rem 0.7rem 0 0.7rem;
	color:#FFF;
	font-size:1.2em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col2 a{
	padding:1.0rem;
	color:#FFF;
}
.col2 a:hover{
	color:#CCC
}		
    }
    /* Smartphones (landscape) ---------- */
    @media screen and (min-width: 321px){
        /* styles */
    }
    /* tablets, iPads (portrait and landscape) ---------- */
    @media screen and (min-width: 768px) and (max-width: 1025px){
        /* styles */
h1 {
  color: green;
}

.desc:before {
  content: "This browser window is ";
}
.wrap{
	width:100%;
  	margin: 0;
	text-align:left
}
.wrap2{
	background:#FEFEFD;
	width:100%;
  	margin: 0 auto;
	display:inline-block;
	text-align:left
}
.left-header{
	width:30%;
	float:left;
}
.right-header{
	width:70%;
	float:left;
}
.page-left{
	width:70%;
	float:left;
	margin:1.5rem 0;
	background:#FEFEFD;
}
.page-right{
	width:27%;
	float:right;
	margin:1.5rem 0 0 0.5rem;
}
.top{
	width:100%;
	height:50px;
	background:#044A7D;
}

.join{
	background: url(../images/join.png) no-repeat center;
	height:26px;
}
.content2{
	background:#044A7D;
	width:100%;
	padding:1.5rem;
}
.menu{
	width:100%;
	height:40px;
}
.col1{
	background:#CC0C26 url(../images/arrow2.png) 90% 0px no-repeat;
	width:48%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	font-size:1.3em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col1 a{
	padding:1.0rem;
	color:#FFF;
}
.col1 a:hover{
	color:#CCC
}
.col2{
	background:#009AE1 url(../images/arrow2.png) 90% 0px no-repeat;
	width:48%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	color:#FFF;
	font-size:1.3em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col2 a{
	padding:1.0rem;
	color:#FFF;
}
.col2 a:hover{
	color:#CCC
}
.col3{
	background:#CC0C26 url(../images/arrow2.png) 90% 0px no-repeat;
	width:92%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	font-size:1.3em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col3 a{
	padding:1.0rem;
	color:#FFF;
}
.col3 a:hover{
	color:#CCC
}
.col4{
	background:#009AE1 url(../images/arrow2.png) 90% 0px no-repeat;
	width:92%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	color:#FFF;
	font-size:1.3em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col4 a{
	padding:1.0rem;
	color:#FFF;
}
.col4 a:hover{
	color:#CCC
}
.page-left2{
	width:70%;
	float:left;
	margin:1.5rem 0;
	background:#FEFEFD;
}
.page-left3{
	width:50%;
	float:left;
	margin:1.5rem 0;
}
.page-right3{
	width:50%;
	float:right;
	margin:1.5rem 0;
}
		
    }
    /* tablets, iPads (portrait) ---------- */
    @media screen and (min-width: 768px){
        /* styles */
		
    }
    /* tablets, iPads (landscape) ---------- */
   @media screen and (min-width: 1025px){ 
        /* styles */
h1 {
  color: blue;
}

.desc:before {
  content: "This browser window is at least 640px wide!";
}
.wrap{
	width:62%;
  	margin: 0;
	text-align:left
}
.wrap2{
	background:#FEFEFD;
	width:100%;
  	margin: 0 auto;
	display:inline-block;
	text-align:left
}
.left-header{
	width:30%;
	float:left;
}
.right-header{
	width:70%;
	float:left;
}
.page-left{
	width:70%;
	float:left;
	margin:1.5rem 0;
	background:#FEFEFD;
}
.page-right{
	width:27%;
	float:right;
	margin:1.5rem 0 0 0.5rem;
}
.top{
	width:100%;
	height:50px;
	background:#044A7D;
}

.join{
	background: url(../images/join.png) no-repeat center;
	height:26px;
}
.content2{
	background:#044A7D;
	width:100%;
	padding:1.5rem;
}
.menu{
	width:100%;
	height:40px;
}
.col1{
	background:#CC0C26 url(../images/arrow2.png) 90% 0px no-repeat;
	width:24%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	font-size:1.2em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col1 a{
	padding:1.0rem;
	color:#FFF;
}
.col1 a:hover{
	color:#CCC
}
.col2{
	background:#009AE1 url(../images/arrow2.png) 90% 0px no-repeat;
	width:23%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	color:#FFF;
	font-size:1.2em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col2 a{
	padding:1.0rem;
	color:#FFF;
}
.col2 a:hover{
	color:#CCC
}
.col3{
	background:#CC0C26 url(../images/arrow2.png) 90% 0px no-repeat;
	width:92%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	font-size:1.3em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col3 a{
	padding:1.0rem;
	color:#FFF;
}
.col3 a:hover{
	color:#CCC
}
.col4{
	background:#009AE1 url(../images/arrow2.png) 90% 0px no-repeat;
	width:92%;
	padding:1.0rem;
	margin:0.7rem 0 0 0.7rem;
	color:#FFF;
	font-size:1.3em;
	font-family: Arial,Helvetica,sans-serif;
	float:left
}
.col4 a{
	padding:1.0rem;
	color:#FFF;
}
.col4 a:hover{
	color:#CCC
}
.page-left2{
	width:70%;
	float:left;
	margin:1.5rem 0;
	background:#FEFEFD;
}
.page-left3{
	width:50%;
	float:left;
	margin:1.5rem 0;
}
.page-right3{
	width:50%;
	float:right;
	margin:1.5rem 0;
}		
    }
    /* Desktops and laptops ---------- */
    @media screen and (min-width: 1224px){
        /* styles */
    }
    /* Large screens ---------- */
    @media screen and (min-width: 1824px){
        /* styles */
    }