@charset "utf-8";


#collage {
  margin: 0 auto;
  text-align: center;
}

#collage img {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  -webkit-opacity: 1;
   -moz-opacity: 1;
   opacity: 1;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

#collage a:hover img.back, #collage a:focus img.back {
  -webkit-opacity: 0.7;
   -moz-opacity: 0.7;
   opacity: 0.7;
}

#collage img.text {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  -webkit-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
  -o-transition:1.5s;
  -ms-transition:1.5s;
  -moz-transition:1.5s;
  -webkit-transition:1.5s;
  transition:1.5s;
}

#collage a:hover img.text, #collage a:focus img.text {
  -webkit-opacity: 1;
   -moz-opacity: 1;
   opacity: 1;
}

#collage a {
  margin: 0;
  padding: 0;
}

#collage a:hover {
  z-index: 2000;
}

#collage img.text {
  position: absolute;
}


#incollage { 
  margin: 0 auto;
  padding: 0;
  width: 95%;
  max-width: 450px;
  height: auto;
} 

#group1 {
  position: relative;
  float: right; 
  display: inline-block; 
  margin: 0; 
  padding: 0; 
  width: 100%;
}

#g1sub1 {
  position: relative;
  float: right;
  width: 100%; 
  margin: 0 0 2.22% 0; 
  padding: 0;
  background: #0125AB;
} 

#g1sub1 img.text {
  width: 50%;
  right: 3%;
  bottom: 3%;
}

#g1sub2 {
  position: relative; 
  float: right; 
  width: 100%;
  margin: 0 0 2.22% 0; 
  padding: 0;
  text-align: center;
}

#g1sub2textbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background: #668000;
}

#g1sub2text {
  display: table;
  width: 90%;
  height: 90%;
  margin: 1% 5% 0 5%;
}
  
#g1sub2 p { 
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: 0px;
  color: #FFFFFF;
}

span.lettero {
  color: #FFFFFF;
  font-family: georgia, serif;
  font-style: italic;
  font-size: 20px;
  font-style: normal;
}

#g1sub2 p a {
  color: #FFE985;
  font-weight: bold;
  letter-spacing: 1px;
	padding: 2px 4px;
  background: rgba(0, 0, 0, 0.15);
}

#g1sub2 p a:hover {
  color: #FEFB02;
}

#group2 { 
  position: relative;
  margin: 0; 
  padding: 0;  
  width: auto;
}

#g2sub1 {
  position: relative;
  float: right;
  width: 48.88%; 
  margin: 0 0 2.22% 0; 
  padding: 0;
  background: #00736A;
}

#g2sub1 img.text {
  width: 95%;
  left: 3%;
  bottom: 3%;
}

#g2sub2 {
  position: relative;
  float: left;
  width: 48.65%; 
  margin: 0 0 2.22% 0; 
  padding: 0;
  background: #F1856D;
}

#g2sub2 img.text {
  width: 45%;
  left: 3%;
  bottom: 6%;
}

#group3 {
  position: relative;
  width: auto;  
  margin: 0 0 2.22% 0; 
  padding: 0; 
}

#g3sub1 {
  position: relative;
  float: left;  
  margin: 0; 
  padding: 0;
  width: 48.65%;
  background: #F69679;
}

#g3sub1 img.text {
  width: 55%;
  left: 3%;
  top: 5%;
}

#g3sub2 {
  position: relative;
  float: right; 
  margin: 0 0 2.22% 0; 
  padding: 0; 
  width: 100%;
  background: #0071BC;
}

#g3sub2 img.text {
  width: 80%;
  left: 2%;
  bottom: 6%;
}

#group4 {
  position: relative;
  width: 100%; 
  float: right; 
  margin: 0 0 2.22% 0; 
  padding: 0; 
  display: inline-block;
}

#g4sub1 {
  position: relative;
  float: right; 
  margin: 0; 
  padding: 0; 
  width: 48.65%;
  background: #DBA500;
}

#g4sub1 img.text {
  width: 50%;
  left: 3%;
  top: 3%;
}

#g4sub2 {
  position: relative;
  float: left; 
  margin: 0 2.22% 0 0; 
  padding: 0; 
  width: 48.65%;
  background: #F26C4E;
}

#g4sub2 img.text {
  width: 70%;
  right: 3%;
  top: 3%;
}

#group5 {
  position: relative;
  width: 100%; 
  float: right; 
  margin: 0; 
  padding: 0; 
  display: block;
}

#g5sub1 {
  position: relative;
  float: left; 
  margin: 0 2.22% 0 0; 
  padding: 0; 
  width: 23.33%;
  background: #854B88;
}

#g5sub1 img.text {
  width: 85%;
  left: 5%;
  bottom: 3%;
}

#g5sub2 {
  position: relative;
  float: left; 
  margin: 0 2.22% 0 0; 
  padding: 0; 
  width: 23.33%;
  background: #B52252;
}

#g5sub2 img.text {
  width: 85%;
  right: 6%;
  bottom: 6%;
}

#g5sub3 {
  position: relative;
  float: left; 
  margin: 0 2.22% 0 0; 
  padding: 0; 
  width: 23.33%;
  background: #CC2128;
}

#g5sub3 img.text {
  width: 70%;
  left: 5%;
  bottom: 5%;
}

#g5sub4 {
  position: relative;
  float: left; 
  margin: 0; 
  padding: 0; 
  width: 23.330%;
  background: #1A1364;
}

#g5sub4 img.text {
  width: 80%;
  right: 5%;
  bottom: 5%;
}

#group6 {
  display: none;
}



@media screen and (min-width: 440px) {  

#collage {
  margin: 10px 0 0 0; 
  display: inline-block;
} 

#incollage { 
  margin: 0 auto;
  padding: 0;
  width: 97%;
  max-width: 97%;
  height: auto;
  overflow: hidden;
} 

#group1 {
  float: right; 
  display: inline-block; 
  margin: 0 0 1.47% 1.47%; 
  padding: 0; 
  width: 66.17%;
}

#g1sub1 {
  float: right;
  width: 100% 
  margin: 0 0 2.22% 0; 
  padding: 0;
} 

#g1sub2 {
  position: relative; 
  float: right;
  width: 100%; 
  margin: 0; 
  padding: 0;
}

#group2 {
  float: right; 
  margin: 0 0 1.47% 0; 
  padding: 0; 
  display: inline-block; 
  width: 32.35%;
}

#g2sub1 {
  float: right;
  width: 100%; 
  margin: 0 0 4.54% 0; 
  padding: 0;
}

#g2sub2 {
  float: right;
  width: 100%; 
  clear: both; 
  margin: 0; 
  padding: 0;
}

#group3 {
  width: 100%; 
  clear: both; 
  float: right; 
  margin: 0 0 1.47% 0; 
  padding: 0; 
  display: inline-block;
}

#g3sub1 {
  float: right;  
  margin: 0; 
  padding: 0;
  width: 32.35%
}

#g3sub2 {
  float: right; 
  margin: 0 1.47% 0 0; 
  padding: 0; 
  width: 66.17%;
}

#group4 {
  width: 66.17%; 
  float: right; 
  margin: 0 0 1.47% 0; 
  padding: 0; 
  display: inline-block;
}

#g4sub1 {
  float: right; 
  margin: 0; 
  padding: 0; 
  width: 48.88%;
}

#g4sub2 {
  float: right; 
  margin: 0 2.22% 0 0; 
  padding: 0; 
  width: 48.88%;
}

#group5 {
  width: 32.35%; 
  float: right; 
  margin: 0 1.47% 1.47% 0; 
  padding: 0; 
  display: block;
}

#g5sub1 {
  float: left; 
  margin: 0 4.54% 4.54% 0; 
  padding: 0; 
  width: 47.72%;
}

#g5sub2 {
  float: left; 
  margin: 0 0 2.72% 0; 
  padding: 0; 
  width: 47.72%;
}

#g5sub3 {
  float: left; 
  margin: 0 4.54% 0 0; 
  padding: 0; 
  width: 47.72%;
}

#g5sub4 {
  float: left; 
  margin: 0; 
  padding: 0; 
  width: 47.72%;
}


}



@media screen and (min-width: 701px) and (max-width: 768px) {


#collage {
  margin: 4px 0 10px 0; 
  display: inline-block;
} 

#incollage { 
  margin: 0 auto;
  padding: 0;
  max-width: 97%;
  height: auto;
  overflow: hidden;
}

#g123join {
  float: left;
  width: 66.34%;
  margin-right: 0.97%;
  padding: 0;
} 

#group1 {
  float: right; 
  display: inline-block; 
  margin: 0 0 1.47% 1.47%; 
  padding: 0; 
  width: 66.17%;
}

#g1sub1 {
  float: right; 
  margin: 0 0 2.22% 0; 
  padding: 0;
} 

#g1sub2 {
  position: relative; 
  float: right; 
  margin: 0; 
  padding: 0;
}

#group2 {
  float: right; 
  margin: 0 0 1.47% 0; 
  padding: 0; 
  display: inline-block; 
  width: 32.35%;
}

#g2sub1 {
  float: right; 
  margin: 0 0 4.54% 0; 
  padding: 0;
}

#g2sub2 {
  float: right; 
  clear: both; 
  margin: 0; 
  padding: 0;
}

#group3 {
  width: 100%;  
  float: left; 
  margin: 0; 
  padding: 0; 
  display: inline-block;
}

#g3sub1 {
  float: right;  
  margin: 0; 
  padding: 0;
  width: 32.35%
}

#g3sub2 {
  float: right; 
  margin: 0 1.47% 0 0; 
  padding: 0; 
  width: 66.17%;
}

#g45join {
  position: relative;
  float: right;
  width: 32.68%;
  padding: 0;
  margin: 0;
}

#group4 {
  width: 65.68%; 
  float: right; 
  margin: 0; 
  padding: 0; 
  display: inline-block;
}

#g4sub1 { 
  margin: 0 0 4.54% 0; 
  padding: 0; 
  width: 100%;
}

#g4sub2 { 
  margin: 0; 
  padding: 0; 
  width: 100%;
}

#group5 {
  width: 31.34%; 
  float: right; 
  margin: 0 2.98% 0 0; 
  padding: 0; 
  display: block;
}

#g5sub1 {
  float: left; 
  margin: 0 0 9.52% 0; 
  padding: 0; 
  width: 100%;
}

#g5sub2 {
  float: left; 
  margin: 0 0 9.52% 0; 
  padding: 0; 
  width: 100%;
}

#g5sub3 {
  float: left; 
  margin: 0 0 9.52% 0; 
  padding: 0; 
  width: 100%;
}

#g5sub4 {
  float: left; 
  margin: 0; 
  padding: 0; 
  width: 100%;
}

}

@media screen and (min-width: 769px) {


#collage {
  margin: 4px 300px 0 0; 
  display: inline-block;
} 

#incollage { 
  margin: 0 auto;
  padding: 0;
  width: auto;
  max-width: 97%;
  height: 728px;
  overflow: hidden;
} 

#group1 {
  float: right; 
  display: inline-block; 
  margin: 0 0 1.47% 1.47%; 
  padding: 0; 
  width: 66.17%;
}

#g1sub1 {
  float: right; 
  margin: 0 0 2.22% 0; 
  padding: 0;
} 

#g1sub2 {
  position: relative; 
  float: right; 
  margin: 0; 
  padding: 0;
}

#group2 {
  float: right; 
  margin: 0 0 1.47% 0; 
  padding: 0; 
  display: inline-block; 
  width: 32.35%;
}

#g2sub1 {
  float: right; 
  margin: 0 0 4.54% 0; 
  padding: 0;
}

#g2sub2 {
  float: right; 
  clear: both; 
  margin: 0; 
  padding: 0;
}

#group3 {
  width: 100%; 
  clear: both; 
  float: right; 
  margin: 0 0 1.47% 0; 
  padding: 0; 
  display: inline-block;
}

#g3sub1 {
  float: right;  
  margin: 0; 
  padding: 0;
  width: 32.35%
}

#g3sub2 {
  float: right; 
  margin: 0 1.47% 0 0; 
  padding: 0; 
  width: 66.17%;
}

#group4 {
  width: 66.17%; 
  float: right; 
  margin: 0 0 1.47% 0; 
  padding: 0; 
  display: inline-block;
}

#g4sub1 {
  float: right; 
  margin: 0; 
  padding: 0; 
  width: 48.88%;
}

#g4sub2 {
  float: right; 
  margin: 0 2.22% 0 0; 
  padding: 0; 
  width: 48.88%;
}

#group5 {
  width: 32.35%; 
  float: right; 
  margin: 0 1.47% 1.47% 0; 
  padding: 0; 
  display: block;
}

#g5sub1 {
  float: left; 
  margin: 0 4.54% 4.54% 0; 
  padding: 0; 
  width: 47.72%;
}

#g5sub2 {
  float: left; 
  margin: 0 0 4.54% 0; 
  padding: 0; 
  width: 47.72%;
}

#g5sub3 {
  float: left; 
  margin: 0 4.54% 0 0; 
  padding: 0; 
  width: 47.72%;
}

#g5sub4 {
  float: left; 
  margin: 0; 
  padding: 0; 
  width: 47.72%;
}

#group6 {
  width: 100%; 
  height: 300px;
  clear: both; 
  float: right; 
  margin: 0; 
  padding: 0; 
  display: inline-block;
} 
  
#g6sub1 {
  position: relative;
  float: right; 
  margin: 0; 
  padding: 0; 
  width: 66.17%;
  height: 100%;
  background: url(torontoislands/torontoislandspics/toislands01.jpg) no-repeat center top;
}

#g6sub1 img.text {
  width: 50%;
  left: 2%;
  top: 2%;
}

#g6sub2 {
  position: relative;
  float: right;  
  margin: 0 1.47% 0 0; 
  padding: 0;
  width: 32.35%;
  height: 100%;
  background: url(rbgrock/rockpics/rock11.jpg) no-repeat -25px -110px;
}

#g6sub2 img.text {
  width: 40%;
  left: 2%;
  top: 2%;
}


#g6sub1 img.g6back, #g6sub2 img.g6back {
  -webkit-opacity: 0;
   -moz-opacity: 0;
   opacity: 0;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

#g6sub1:hover img.g6back, #g6sub2:hover img.g6back {
  -webkit-opacity: 0.3;
   -moz-opacity: 0.3;
   opacity: 0.3;
}


}



@media screen and (min-width: 961px) {

#incollage { 
  margin: 0 auto;
  max-width: 644px;
} 

}


@media screen and (min-width: 380px) and (max-width: 439px) {

#g1sub2 p { 
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 1px;
}

}

@media screen and (min-width: 600px) and (max-width: 699px) {

#g1sub2 p { 
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 1px;
}

}

@media screen and (min-width: 940px) {

#g1sub2 p { 
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 1px;
}

}