html, body {
   background: #FFFFFF;
   height: 100%;
   /* the following was done for convienience.  makes 1rem = 10px */
   font-size: 62.5%;
  }

.wrapper {
	height: 100vh;
	margin: 0 auto -4.8rem;
    display: -webkit-box;
    display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-lines: single;
	-webkit-flex-flow: column nowrap;
	flex-flow: column nowrap;
	align-items: stretch;
  }

.push {
	height: 4.8rem;
	margin: 0;
	}
.footer {
   margin: .16rem;
   padding: .8rem .16rem .16rem .16rem;
   font-family: Segoe UI, Arial, sans-serif;
   font-size: 1.2rem;
   text-align: center;
   background: #FFFFFF;
   -webkit-flex: 0 0 auto;
   flex: 0 0 auto;
	-webkit-box-ordinal-group: 9;
   -webkit-order: 9;
	order: 9;
   }

.header {
   margin: 0px;
   padding: 0px;
   min-height: 14rem;
   background-image: url("images/banner.jpg");
   background-size: cover;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
	-webkit-box-orient: vertical;
   flex-direction: column;
   -webkit-box-align; start;
   justify-content: flex-start;
   -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
	-webkit-box-ordinal-group: 1;
   -webkit-order: 1;
	order: 1;
	}
   
.header > .overlay {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
	-webkit-box-orient: horizontal;
   flex-direction: row;
   -webkit-box-align; center;
    align-items: center;
   -webkit-box-pack; justify;
   justify-content: space-around;
   -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
	-webkit-box-ordinal-group: 1;
   -webkit-order: 1;
    order: 1;
   }
   
.logo {
   margin: 1.2rem;
   min-height: 12rem;
   min-width: 33rem;
   background-image: url("images/logo330x160.png");
   background-repeat: no-repeat;
   background-size: contain;
   -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
	-webkit-box-ordinal-group: 1;
   -webkit-order: 1;
    order: 1;
   }
.clubname {
   width: 60%;
   flex-direction: column;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
	-webkit-box-ordinal-group: 2;
   -webkit-order: 2;
    order: 2;
   }
clubtitle {
	font-family:comic sans ms; 
	font-size:3.36rem; 
    font-weight: bold;
	color:#69467C;
    text-align: center;
	-webkit-flex: 0 1 auto;
    flex: 0 1 auto;
	-webkit-box-ordinal-group: 1;
   -webkit-order: 1;
    order: 1;
   }
clubtitle  a:link, clubtitle a:visited {
	text-decoration: none;
	color:#69467C;
}
clubmotto {
	font-family:comic sans ms; 
	font-size:2.56rem; 
	color:#69467C;
	font-style:italic;
    text-align: center;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
	-webkit-box-ordinal-group: 2;
    -webkit-order: 2;
    order: 2;
   }

.intro {
   align-items: center;
   font-family: Segoe UI, Arial, sans-serif;
   font-size: 1.4rem;
   font-style: italic;
   text-align: center;
   background: #FFFFFF;
   -webkit-flex: 0 0 auto;
   flex: 0 0 auto;
   -webkit-box-ordinal-group: 2;
   -webkit-order: 2;
   order: 2;
	}
  
.main {
   margin: 0px;
   padding: 0px;
   font-family: Segoe UI, Arial, sans-serif;
   font-size: 1.40rem;
   max-width: 86.4rem;
   -webkit-flex: 1 1 auto;
   flex: 1 1 auto;
	-webkit-box-ordinal-group: 3;
   -webkit-order: 3;
	order: 3;
	align-self: center;
	}

.main2 {
   margin: 0px;
   padding: 0px;
   font-family: Segoe UI, Arial, sans-serif;
   font-size: 1.4rem;
   max-width: 112rem;
   -webkit-flex: 1 0 auto;
   flex: 1 0 auto;
	-webkit-box-ordinal-group: 3;
   -webkit-order: 3;
	order: 3;
	align-self: center;
	}

.content {
   margin: 0px;
   padding: 0px;
   font-family: Segoe UI, Arial, sans-serif;
   font-size: 1.6rem;
   display: -webkit-box;
   display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-lines: multiple;
	-webkit-flex-flow: column wrap;
	flex-flow: column wrap;
	justify-content: flex-start;
   -webkit-flex: 1 0 auto;
   flex: 1 0 auto;
	-webkit-box-ordinal-group: 3;
   -webkit-order: 3;
	order: 3;
	}

.sponsors {
   margin: .6rem;
   padding: .2rem;
   text-align: center;
   align-items: center;
   background: #FFFFFF;
   }
#sponsorsimg
	{
	margin: 1rem 2rem 1rem 2rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	width: 15rem;
}

.news {
   margin: .6rem;
   padding: .2rem;
   background: #FFFFFF;
  }
  
.calendar {
   margin: .6rem;
   padding: .2rem;
   text-align: center;
   background: whitesmoke;;
   }

.calendar-container {
	font-size: 1.4rem;
	}
.view-container {
	font-size: 1.4rem;
	}
	
.blogs{
   margin: .6rem;
   padding: .2rem;
   text-align: center;
   background: whitesmoke;
   }

SPAN.NewsTitle {
   font-family: Segoe UI, Arial, sans-serif;
   font-size: 1.76rem;
   font-weight: bold;
   color: #69467C;
}

SPAN.NewsText {
   font-family: Segoe UI, Arial, sans-serif;
   font-size: 1.76rem;
}

SPAN.NewsDate {
   font-family: Segoe UI, Arial, sans-serif;
   font-size: 1.7rem;
	COLOR: gray;
}

h1 {
font-size: 2.3rem;
color: #69467C;
}

h1.gradient {
font-size: 2.3rem;
color: white;
background-image: url("rmcc-gradient3.png");

}
h2 {
font-size: 2.0rem;
}

h3.gradient{
margin: 0px 0px 8px 0px;
padding: 0px;
font-size: 1.76rem;
line-height:2.5rem;
color:#69467C;
background: #ffffff;
background: linear-gradient(to bottom, #ffc63a 0%, #d2960a);
background: -moz-linear-gradient(to bottom, #ffc63a 0%, #d2960a);
background: -webkit-linear-gradient(to bottom, #ffc63a 0%,#d2960a);
}

a:link{
text-decoration:none;
color:#005CE6;
/*font-weight:bold;*/
/*#0645AD;*/
/*#0066FF;*/
} 
a:visited{
text-decoration:none;
color:#005CE6;
/*font-weight:bold;*/
} 

a:hover {
   color: #cc0000;
/*#D11919;*/
}
/* One column */
@media screen and (min-resolution: 97dpi) and (max-resolution: 200dpi){
	html {
		font-size: 120%;
	}
}

@media screen and (min-resolution: 201dpi) {
	html {
		font-size: 200%;
	}
}
@media screen and (max-width: 680px) and (max-resolution: 96dpi) {
  .header    { 
    background: #ffeebb;
  }
  .logo {
   margin: 1rem;
   min-height: 6rem;
   min-width: 15rem;
  }
   clubtitle {
	font-size:2.4rem; 
  }
  clubmotto {
	display: none;
  }
  ul.drop a { font-size: 1.2rem}
  .intro  { 	display: none; }
  .content {
	-webkit-box-orient: vertical;
	-webkit-box-lines: single;
	-webkit-flex-flow: column nowrap;
	flex-flow: column nowrap;
  }
  .news  {  
    font-size: 1.6rem;
   -webkit-flex: 1 1 auto;
           flex: 1 1 auto;
	-webkit-box-ordinal-group: 2;
   -webkit-order: 2;
	order: 2; }

  .calendar  { 
    font-size: 1.6rem;
   -webkit-flex: 1 1 auto;
           flex: 1 1 auto;
	-webkit-box-ordinal-group: 1;
   -webkit-order: 1;
	order: 1;
  }
  .blogs  { 
    font-size: 1.6rem;
   -webkit-flex: 1 1 auto;
           flex: 1 1 auto;
	-webkit-box-ordinal-group: 3;
   -webkit-order: 3;
	order: 3;
  }
  .blogs > a > img {
   width: 32rem
   }
   
  .sponsors  { 
   -webkit-flex: 1 1 auto;
           flex: 1 1 auto;
	-webkit-box-ordinal-group: 4;
   -webkit-order: 4;
	order: 4;
  }

}
/* two columns */
@media screen and (min-width: 681px) and (max-width: 1048px) and (max-resolution: 96dpi) {
 .footer {
   text-align: right;
   }
clubtitle {
	font-size:3rem; 
  }
  clubmotto {
	font-size:2.24rem;
  }
  .intro  {  }
  .content  { 
    width: 100%;
    font-size: 1.4rem;
	height: 415rem;
/*	align-content: flex-start; */
  }
  .news {  
	width: 55%;
	-webkit-box-ordinal-group: 4;
   -webkit-order: 4;
	order: 4;
   -webkit-flex: 0 1 auto;
           flex: 0 1 auto;
/*	align-self: stretch; */
	}

  .calendar  { 
    width: 40%;
	-webkit-box-ordinal-group: 1;
   -webkit-order: 1;
	order: 1;
   -webkit-flex: 0 1 auto;
           flex: 0 1 auto;
	}
  .blogs  { 
	width: 40%;
	-webkit-box-ordinal-group: 2;
   -webkit-order: 2;
	order: 2;
   -webkit-flex: 0 1 auto;
           flex: 0 1 auto;
/*	align-self: center; */
	}
  .blogs > a > img {
   width: 90%
   }
   
  .sponsors  { 
	width: 40%;
	-webkit-box-ordinal-group: 3;
   -webkit-order: 3;
	order: 3;
   -webkit-flex: 0 1 auto;
           flex: 0 1 auto;
  }
}
/* three columns */
@media screen and (min-width: 1049px) and (max-resolution: 96dpi) {
   .content  { 
    font-size: 1.4rem;
    height: 420rem;
	max-width: 140rem;
	align-content: flex-start;
  }
  .news  {  
    max-width: 40%;
	-webkit-box-ordinal-group: 3;
   -webkit-order: 3;
	order: 3; 
   -webkit-flex: 1 1 auto;
           flex: 1 1 auto;
	align-self: flex-start;
  }
  .calendar  { 
    max-width: 40rem;
	align-self: stretch;
	-webkit-box-ordinal-group: 1;
   -webkit-order: 1;
	order: 1;
   -webkit-flex: 0 1 auto;
           flex: 0 1 auto;
  }
  .blogs  { 
    max-width: 40rem;
    align-self: stretch;
	-webkit-box-ordinal-group: 2;
   -webkit-order: 2;
	order: 2;
   -webkit-flex: 0 1 auto;
           flex: 0 1 auto;
  }
  .blogs > a > img {
   width: 90%
   }
   
  .sponsors  { 
	-webkit-box-ordinal-group: 4;
   -webkit-order: 4;
	order: 4;
   -webkit-flex: 0 1 auto;
           flex: 0 1 auto;
  }
}

/*<---- CROSS BROWSER DROPDOWN MENU ---->*/

nav { font-family: Segoe UI, Arial, sans-serif;
	font-size: 1.4rem;
	text-decoration: none;
	color: #fff;
	margin: 0px;
	padding: 0px;
	background: #8e58ac;
	-webkit-flex: 0 1 auto;
		   flex: 0 1 auto;
	-webkit-box-ordinal-group: 2;
	-webkit-order: 2;
	order: 2;
}
nav ul {
	background: #8e58ac;
	background: linear-gradient(to bottom, #8e58ac 0%, #5e287c 100%);  
	background: -moz-linear-gradient(to bottom, #8e58ac 0%, #5e287c 100%); 
	background: -webkit-linear-gradient(to bottom, #8e58ac 0%,#5e287c 100%); 
	padding: 0px;
	margin: 0px;
	list-style: none;
	position: relative;
}
nav ul:after {
	content: ""; clear: both; display: block;
}
nav ul ul {
	display: none;
	background: #8e58ac;
	position: absolute; top: 100%;
}
nav ul li {
	background: linear-gradient(to bottom, #8e58ac 0%, #5e287c 100%);  
	background: -moz-linear-gradient(to bottom, #8e58ac 0%, #5e287c 100%); 
	background: -webkit-linear-gradient(to bottom, #8e58ac 0%,#5e287c 100%); 
	border-top: .1rem solid silver;
	border-bottom: .1rem solid silver;
	border-right: .1rem solid silver;
	float: left;
}
nav ul li:hover {
	position: relative;
	background: #f2b62a;
	background: linear-gradient(to bottom, #ffc63a 0%, #e2a61a 90%);
	background: -moz-linear-gradient(to bottom, #ffc63a 0%, #e2a61a 90%);
	background: -webkit-linear-gradient(to bottom, #ffc63a 0%,#e2a61a 90%);
}
nav ul li:hover > ul {
	display: block;
}
nav ul li:hover a {
	color: #ffffff;
}
nav ul li a:link {
	display: block;
	padding: .5rem 1rem;
	color: #ffffff;
	text-decoration: none;
}
nav ul li a:visited {
	display: block;
	padding: .5rem 1rem;
	color: #ffffff;
	text-decoration: none;
}
nav ul ul li {
	float: none; 
	border-top: .1rem solid silver;
	border-bottom: .1rem solid silver;
	border-right: .1rem solid silver; 
	border-left: .1rem solid silver;
	position: relative;
	font-size: 1.4rem;
	width: 23.2rem;
}
nav ul ul li a {
	padding: .5rem 1rem;
	color: #ffffff;
}	
nav ul ul li a:hover {
	background: #f2b62a;
}
nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

/*<---- CROSS BROWSER button-like MENU ---->*/

bl { font-family: Segoe UI, Arial, sans-serif;
	font-size: 1.4rem;
	text-decoration: none;
	color: #fff;
	margin: 0px;
	padding: 0px;
	-webkit-flex: 0 1 auto;
		   flex: 0 1 auto;
	-webkit-box-ordinal-group: 2;
	-webkit-order: 2;
	order: 2;
}
bl ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
	position: relative;
}

bl ul li {
	background: #8e58ac;
	background: linear-gradient(to bottom, #8e58ac 0%, #5e287c 100%);  
	background: -moz-linear-gradient(to bottom, #8e58ac 0%, #5e287c 100%); 
	background: -webkit-linear-gradient(to bottom, #8e58ac 0%,#5e287c 100%); 
	border-top: .1rem solid silver;
	border-bottom: .1rem solid silver;
	border-right: .1rem solid silver;
	border-left: .1rem solid silver;
	max-width: 45%;
	margin: 0 3% 0 3%;
	float: left;
}
bl ul li:hover {
	position: relative;
	background: #f2b62a;
	background: linear-gradient(to bottom, #ffc63a 0%, #e2a61a 90%);
	background: -moz-linear-gradient(to bottom, #ffc63a 0%, #e2a61a 90%);
	background: -webkit-linear-gradient(to bottom, #ffc63a 0%,#e2a61a 90%);
}
bl ul li:hover > ul {
	display: block;
}
bl ul li:hover a {
	color: #ffffff;
}
bl ul li a {
	display: block; padding: .5rem 1rem;
	color: #ffffff;
	text-decoration: none;
}

flexbwrap { font-family: Segoe UI, Arial, sans-serif;
	font-size: 1.4rem;
	color: #fff;
	margin: 0px;
	padding: 0px;
	-webkit-flex: 0 1 auto;
		   flex: 0 1 auto;
	-webkit-box-ordinal-group: 2;
	-webkit-order: 2;
	order: 2;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-lines: single;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	justify-content: space-around;
}
flexbwrapl { font-family: Segoe UI, Arial, sans-serif;
	font-size: 1.4rem;
	color: #fff;
	margin: 0px;
	padding: 0px;
	-webkit-flex: 0 1 auto;
		   flex: 0 1 auto;
	-webkit-box-ordinal-group: 2;
	-webkit-order: 2;
	order: 2;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-lines: single;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	justify-content: space-around;
}
flexbutton {
    text-align: center;
	background: #8e58ac;
	background: linear-gradient(to bottom, #8e58ac 0%, #5e287c 100%);  
	background: -moz-linear-gradient(to bottom, #8e58ac 0%, #5e287c 100%); 
	background: -webkit-linear-gradient(to bottom, #8e58ac 0%,#5e287c 100%); 
	border-top: .1rem solid silver;
	border-bottom: .1rem solid silver;
	border-right: .1rem solid silver;
	border-left: .1rem solid silver;
}
flexbutton a:link {
	display: block;
	padding: .5rem 1rem;
	color: #ffffff;
	text-decoration: none;
}
flexbutton a:visited {
	display: block;
	padding: .5rem 1rem;
	color: #ffffff;
	text-decoration: none;
}
flexbutton:hover {
	background: #f2b62a;
}