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

/*HOME SLIDESHOW*/

.slider {
  max-width: 100%;
  height: 100%;
  margin: 0px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(http://surfaceandsky.com/HomeImages/FeaturedImage_Home_01.jpg)no-repeat center;
      background-size: cover;
    animation:fade 18s infinite;
-webkit-animation:fade 18s infinite;

} 
.slide2 {
  background: url(http://surfaceandsky.com/HomeImages/FeaturedImage_Home_02.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 18s infinite;
-webkit-animation:fade2 18s infinite;
}
.slide3 {
    background: url(http://surfaceandsky.com/HomeImages/FeaturedImage_Home_03.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 18s infinite;
-webkit-animation:fade3 18s infinite;
}
.slide4 {
    background: url(http://surfaceandsky.com/HomeImages/FeaturedImage_Home_04.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 18s infinite;
-webkit-animation:fade3 18s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}
@keyframes fade4
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

/*HOME CONTENT*/
.HomePhotoWrapper {
	position:static;
	width:99%;
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	background-color: #D8E6EB;
	z-index: 10;
}
.HomePhotoLeftWrap {
	width:60%;
	float:left;
	height:340px;
	overflow: hidden;
}
img.PhotoImageHome{
	max-width: 1000px;
	position:relative;  
    top: -104.5px;  
    margin: auto;
}
.HomePhotoRightWrap {
	width:39%;
	height: 100%;
	float:left;
	overflow:auto;
}
.HomePhotoText {
	font-size: 100%;
	font-family: 'Open Sans', sans-serif;
	color: #222;
	width: 90%;
	margin: 0 auto;
}
.HomePhotoText > h2{
	font-size: 1.6em;
}
.HomePhotoText > p> a{
	font-size: 1.2em;
	text-decoration: none;
	color: #1881A4;
}
.HomePhotoText > p > a:hover{
	text-decoration: underline;
}
.HomeVideoWrapper {
	position:static;
	width:99%;
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	background-color: #D8E6EB;
	z-index: 10;
}
.HomeVideoRightWrap {
	width:60%;
	float:right;
	height:340px;
	overflow: hidden;
}
img.VideoImageHome{
	max-width: 1000px;
	position:relative;  
    top: -104.5px;  
    margin: auto;
}
.HomeVideoLeftWrap {
	width:39%;
	height: 100%;
	float:left;
	overflow:auto;
}
.HomeVideoText {
	font-size: 100%;
	font-family: 'Open Sans', sans-serif;
	color: #222;
	width: 90%;
	margin: 0 auto;
}
.HomeVideoText > h2{
	font-size: 1.6em;
}
.HomeVideoText > p> a{
	font-size: 1.2em;
	text-decoration: none;
	color: #1881A4;
}
.HomeVideoText > p > a:hover{
	text-decoration: underline;
}
.HomeVirtualWrapper {
	position:static;
	width:99%;
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	background-color: #D8E6EB;
	z-index: 10;
}
.HomeVirtualLeftWrap {
	width:60%;
	float:left;
	height:340px;
	overflow: hidden;
}
img.VirtualImageHome{
	max-width: 1000px;
	position:relative;  
    top: -104.5px;  
    margin: auto;
}
.HomeVirtualRightWrap {
	width:39%;
	height: 100%;
	float:left;
	overflow:auto;
}
.HomeVirtualText {
	font-size: 100%;
	font-family: 'Open Sans', sans-serif;
	color: #222;
	width: 90%;
	margin: 0 auto;
}
.HomeVirtualText > h2{
	font-size: 1.6em;
}
.HomeVirtualText > p> a{
	font-size: 1.2em;
	text-decoration: none;
	color: #1881A4;
}
.HomeVirtualText > p > a:hover{
	text-decoration: underline;
}


/*RESPONSIVE RULES ALL PAGES*/

@media (min-width: 0px) and (max-width: 420px) {
.HomePhotoLeftWrap {
	width:100%;
	float:left;
	height:130px !important;
}
img.PhotoImageHome{
	width: 390px !important;
	height:auto;
	top: -36px !important;
}
.HomeVirtualLeftWrap {
	width:100%;
	float:left;
	height:130px !important;
}
img.VirtualImageHome{
	width: 390px !important;
	height:auto;
	top: -36px !important;
}
.HomeVideoRightWrap {
	width:100%;
	float:right;
	height:130px !important;
}
img.VideoImageHome{
	width: 390px !important;
	height:auto;
	top: -36px !important;
}
}
@media all and (max-width: 640px) {
.HomeVideoRightWrap {
	width:100%;
	float:right;
	height:190px;
}
img.VideoImageHome{
	width: 610px;
	height:auto;
	top: -70px;
}
.HomeVideoLeftWrap {
	width:100%;
	height: 100%;
}
.HomeVideoText {
	width: 95%;
	overflow: auto;
}
.HomePhotoLeftWrap {
	width:100%;
	float:left;
	height:190px;
}
img.PhotoImageHome{
	width: 610px;
	height:auto;
	top: -70px;
}
.HomePhotoRightWrap {
	width:100%;
	height: 100%;
}
.HomePhotoText {
	width: 95%;
	overflow: auto;
}
.HomeVirtualLeftWrap {
	width:100%;
	float:left;
	height:190px;
}
img.VirtualImageHome{
	width: 610px;
	height:auto;
	top: -70px;
}
.HomeVirtualRightWrap {
	width:100%;
	height: 100%;
}
.HomeVirtualText {
	width: 95%;
	overflow: auto;
}
}
@media (min-width: 641px) and (max-width : 768px) {
.HomeVideoRightWrap {
	width:100%;
	float:right;
	height:210px;
}
img.VideoImageHome{
	width: 730px;
	height:auto;
	top: -95px;
}
.HomeVideoLeftWrap {
	width:100%;
	height: 100%;
}
.HomeVideoText {
	width: 95%;
	overflow: auto;
}
.HomePhotoLeftWrap {
	width:100%;
	float:left;
	height:210px;
}
img.PhotoImageHome{
	width: 730px;
	height:auto;
	top: -95px;
}
.HomePhotoRightWrap {
	width:100%;
	height: 100%;
}
.HomePhotoText {
	width: 95%;
	overflow: auto;
}
.HomeVirtualLeftWrap {
	width:100%;
	float:left;
	height:210px;
}
img.VirtualImageHome{
	width: 730px;
	height:auto;
	top: -95px;
}
.HomeVirtualRightWrap {
	width:100%;
	height: 100%;
}
.HomeVirtualText {
	width: 95%;
	overflow: auto;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.HomePhotoLeftWrap {
	width:100%;
	float:left;
	height:320px;
}
img.PhotoImageHome{
	width: 1000px;
	height:auto;
	top: -110px;
}
.HomePhotoRightWrap {
	width:100%;
	height: 100%;
}
.HomePhotoText {
	width: 95%;
	overflow: auto;
}
.HomeVirtualLeftWrap {
	width:100%;
	float:left;
	height:320px;
}
img.VirtualImageHome{
	width: 1000px;
	height:auto;
	top: -110px;
}
.HomeVirtualRightWrap {
	width:100%;
	height: 100%;
}
.HomeVirtualText {
	width: 95%;
	overflow: auto;
}
.HomeVideoRightWrap {
	width:100%;
	float:right;
	height:320px;
}
img.VideoImageHome{
	width: 1000px;
	height:auto;
	top: -110px;
}
.HomeVideoLeftWrap {
	width:100%;
	height: 100%;
}
.HomeVideoText {
	width: 95%;
	overflow: auto;
}
}
@media (min-width: 1025px) and (max-width :1366px) {

}
@media (min-width: 1367px) and (max-width: 1600px) {

}