input::-webkit-input-placeholder { font-family: Verdana, Geneva, sans-serif; }
input::-moz-placeholder { font-family: Verdana, Geneva, sans-serif; }
input:-ms-input-placeholder { font-family: Verdana, Geneva, sans-serif; }s
input:-moz-placeholder { font-family: Verdana, Geneva, sans-serif; }
textarea::-webkit-input-placeholder { font-family: Verdana, Geneva, sans-serif; }
textarea::-moz-placeholder { font-family: Verdana, Geneva, sans-serif; }
textarea:-ms-input-placeholder { font-family: Verdana, Geneva, sans-serif; }
textarea:-moz-placeholder { font-family: Verdana, Geneva, sans-serif; }
  

.crop {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.crop img {
    width: 80%;
    height: 80%;
    margin: -15px 0 0 -15px;
}


table.bg_contactus {
  background: url(./akumal-vacation-rental-pics/akumal-beach-vacation-rental-paddleboarding-half-moon-bay-drone-2.5x1.jpg) no-repeat;
  background-position:center center;
}

table.description-bgXXXX {
  background: url(./akumal-vacation-rental-pics/akumal-beach-vacation-rental-paddleboarding-half-moon-bay-drone-2.5x1.jpg);
  background-position:center center;
  background-color:rgba(0, 0, 0, 0.5);
  opacity:1;
}
table.description-bg p {
  opacity:1;
}

div.description-bg-text
{
  z-index: 99;
  opacity:1;
}

div.description-bg-text p
{
  z-index: 101;
  font-size: 36px;
  font-weight: bold;
  opacity:1;
  color: black;
}

a.no_underline {
  text-decoration: none;
}
a.hoverlinks_orange {
  color: white;
  background-color: black;
}
a.hoverlinks_orange:hover {
  color: cyan;
  background-color: black;
  text-decoration: overline;
}


@-webkit-keyframes cf4FadeInOutAll {
 0% {
   opacity:0;
 }
 12.5% {
   opacity:0;
 }
 25% {
   opacity:0;
 }
 87.5% {
   opacity:0;
 }
 100% {
   opacity:0;
 }
}

@-webkit-keyframes cf4FadeInOutText1 {
 0% {
   opacity:1;
 }
 12.5% {
   opacity:1;
 }
 23% {
   opacity:0;
 }
 89.5% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-webkit-keyframes cf4FadeInOutText2 {
 0% {
   opacity:0;
 }
 14.5% {
   opacity:0;
 }
 25% {
   opacity:1;
 }
 37.5% {
   opacity:1;
 }
 48% {
   opacity:0;
 }
 87.5% {
   opacity:0;
 }
 100% {
   opacity:0;
 }
}

@-webkit-keyframes cf4FadeInOutText3 {
 0% {
   opacity:0;
 }
 12.5% {
   opacity:0;
 }
 25% {
   opacity:0;
 }
 39.5% {
   opacity:0;
 }
 50% {
   opacity:1;
 }
 62.5% {
   opacity:1;
 }
 73% {
   opacity:0;
 }
 87.5% {
   opacity:0;
 }
 100% {
   opacity:0;
 }
}

@-webkit-keyframes cf4FadeInOutText4 {
 0% {
   opacity:0;
 }
 14.5% {
   opacity:0;
 }
 25% {
   opacity:0;
 }
 37.5% {
   opacity:0;
 }
 50% {
   opacity:0;
 }
 64.5% {
   opacity:0;
 }
 75% {
   opacity:1;
 }
 87.5% {
   opacity:1;
 }
 100% {
   opacity:0;
 }
}

@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 12.5% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 87.5% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 12.5% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 87.5% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 12.5% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 87.5% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 12.5% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 87.5% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

#cf4a {
  position:relative;
  margin:0 auto;
  top: 72px;
}
#cf4a img {
  position:absolute;
  left:0;
}

#cf4a img.last {
  position:relative;
animation-delay: 0s;
animation-name: cf4FadeInOutAll;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
animation-direction: alternate;
}

#cf4a img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 16s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 16s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
}

#cf4a p.text1 {
  -webkit-animation-name: cf4FadeInOutText1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;

  -moz-animation-name: cf4FadeInOutText1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 16s;

  -o-animation-name: cf4FadeInOutText1;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 16s;

  animation-name: cf4FadeInOutText1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
}

#cf4a p.text2 {
  -webkit-animation-name: cf4FadeInOutText2;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;

  -moz-animation-name: cf4FadeInOutText2;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 16s;

  -o-animation-name: cf4FadeInOutText2;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 16s;

  animation-name: cf4FadeInOutText2;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
}

#cf4a p.text3 {
  -webkit-animation-name: cf4FadeInOutText3;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;

  -moz-animation-name: cf4FadeInOutText3;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 16s;

  -o-animation-name: cf4FadeInOutText3;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 16s;

  animation-name: cf4FadeInOutText3;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
}

#cf4a p.text4 {
  -webkit-animation-name: cf4FadeInOutText4;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;

  -moz-animation-name: cf4FadeInOutText4;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 16s;

  -o-animation-name: cf4FadeInOutText4;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 16s;

  animation-name: cf4FadeInOutText4;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
}

#cf4a img:nth-of-type(1) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}
#cf4a img:nth-of-type(2) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}
#cf4a img:nth-of-type(3) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#cf4a img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}


#text1 {
  animation-name: cf4FadeInOutText1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  z-index: 99;
  width: 800px;
  position: absolute;
  color: #80ffff;
  left: 50%;
  margin-left: -400px;
  font-size: 48px;
  font-weight: bold;
  top: 69px;
}


#text2 {
animation-name: cf4FadeInOutText2;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 99;
  width: 800px;
  position: absolute;
  color: white;
  left: 50%;
  margin-left: -400px;
  font-size: 48px;
  font-weight: bold;
  top: 69px;
}

#text3 {
animation-name: cf4FadeInOutText3;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 99;
  width: 800px;
  position: absolute;
  color: black;
  left: 50%;
  margin-left: -400px;
  font-size: 48px;
  font-weight: bold;
  top: 69px;
}

#text4 {
animation-name: cf4FadeInOutText4;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 99;
  width: 800px;
  position: absolute;
  color: cyan;
  left: 50%;
  margin-left: -400px;
  font-size: 48px;
  font-weight: bold;
  top: 69px;
}

#text_carbon1 {
  animation-name: cf4FadeInOutText1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  z-index: 99;
  position: absolute;
  top: 425px;
  width: 700px;
  left: 15%;
  margin-left: -351px;
  color: white;
  font-size: 18px;
  font-weight: bold;
}
#text_carbon2 {
  animation-name: cf4FadeInOutText2;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  z-index: 99;
  position: absolute;
  top: 425px;
  width: 700px;
  left: 15%;
  margin-left: -351px;
  color: black;
  font-size: 18px;
  font-weight: bold;
}
#text_carbon3 {
  animation-name: cf4FadeInOutText3;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  z-index: 99;
  position: absolute;
  top: 425px;
  width: 700px;
  left: 15%;
  margin-left: -351px;
  color: white;
  font-size: 18px;
  font-weight: bold;
}
#text_carbon4 {
  animation-name: cf4FadeInOutText4;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  z-index: 99;
  position: absolute;
  top: 425px;
  width: 700px;
  left: 15%;
  margin-left: -351px;
  color: white;
  font-size: 18px;
  font-weight: bold;
}

#text_message_sent1 {
  animation-name: cf4FadeInOutText1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  z-index: 99;
  position: absolute;
  top: 200px;
  width: 700px;
  left: 50%;
  margin-left: -351px;
  color: #E9D494;
  font-size: 36px;
  font-weight: bold;
}
#text_message_sent2 {
  animation-name: cf4FadeInOutText2;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  z-index: 99;
  position: absolute;
  top: 200px;
  width: 700px;
  left: 50%;
  margin-left: -351px;
  color: blue;
  font-size: 36px;
  font-weight: bold;
}
#text_message_sent3 {
  animation-name: cf4FadeInOutText3;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  z-index: 99;
  position: absolute;
  top: 200px;
  width: 700px;
  left: 50%;
  margin-left: -351px;
  color: #FFA319;
  font-size: 36px;
  font-weight: bold;
}
#text_message_sent4 {
  animation-name: cf4FadeInOutText4;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  z-index: 99;
  position: absolute;
  top: 200px;
  width: 700px;
  left: 50%;
  margin-left: -351px;
  color: cyan;
  font-size: 36px;
  font-weight: bold;
}



#text_contactus_reply {
  z-index: 99;
  position: absolute;
  color: white;
  font-size: 3.0em;
  font-weight: bold;
  left: 25%;
  margin-right: -50%;
  top: 30%;
}
div.transbox
{
  z-index: 99;
  position: absolute;
  top: 200px;
  width: 700px;
  left: 50%;
  margin-left: -350px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.3;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
  z-index: 99;
  margin: 5%;
  font-size: 36px;
  font-weight: bold;
  opacity:1;
  color: black;
}

div.transbox_requestquote
{
  position: relative;
  width: 500px;
  left: 60%;
  margin-left: -250px;
  background-color: rgba(5,4,2,0.3);
  border: 1px solid cyan;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox_requestquote p
{
  font-size: 18px;
  font-weight: bold;
  color: white;
  opacity:1;
}


a.text_head1a {
animation-name: cf4FadeInOutText1;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 101;
  position: absolute;
  color: #EDDDA9;
  font-size: 32px;
  font-weight: bold;
  left: 15px;
  margin-top: 3px;
  top: 0%;
  text-decoration: none;
}
a.text_head1b {
animation-name: cf4FadeInOutText1;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 100;
  position: absolute;
  color: #E9D494;
  font-size: 32px;
  font-weight: bold;
  left: 15px;
  margin-top: 35px;
  top: 0%;
  text-decoration: none;
}
a.text_head2a {
animation-name: cf4FadeInOutText2;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 100;
  position: absolute;
  color: #99C2FF;
  font-size: 32px;
  font-weight: bold;
  left: 15px;
  margin-top: 3px;
  top: 0%;
  text-decoration: none;
}
a.text_head2b {
animation-name: cf4FadeInOutText2;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 100;
  position: absolute;
  color: #80B2FF;
  font-size: 32px;
  font-weight: bold;
  left: 15px;
  margin-top: 35px;
  top: 0%;
  text-decoration: none;
}
a.text_head3a {
animation-name: cf4FadeInOutText3;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 100;
  position: absolute;
  color: #FFAC30;
  font-size: 32px;
  font-weight: bold;
  left: 15px;
  margin-top: 3px;
  top: 0%;
  text-decoration: none;
}
a.text_head3b {
animation-name: cf4FadeInOutText3;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 100;
  position: absolute;
  color: #FFA319;
  font-size: 32px;
  font-weight: bold;
  left: 15px;
  margin-top: 35px;
  top: 0%;
  text-decoration: none;
}
a.text_head4a {
animation-name: cf4FadeInOutText4;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 100;
  position: absolute;
  color: #99C2FF;
  font-size: 32px;
  font-weight: bold;
  left: 15px;
  margin-top: 3px;
  top: 0%;
  text-decoration: none;
}
a.text_head4b {
animation-name: cf4FadeInOutText4;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
  z-index: 100;
  position: absolute;
  color: #80B2FF;
  font-size: 32px;
  font-weight: bold;
  left: 15px;
  margin-top: 35px;
  top: 0%;
  text-decoration: none;
}

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 99%;
  min-height: 99%;
  overflow: hidden
}
#text {
  white-space: nowrap;
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 64px;
  font-weight: bold;
  left: 10%;
  margin-right: -50%;
  top: 20%;
}

P {
  white-space: nowrap;
  text-align: center
}

.rates_size {
  font-size: 33px;
}






#cf4a_small {
  position:relative;
  margin:0 auto;
  top: 8px;
  left: 25px;
}
#cf4a_small img {
  position:absolute;
  left:0;
}

#cf4a_small img.last {
  position:relative;
animation-delay: 0s;
animation-name: cf4FadeInOutAll;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
animation-direction: alternate;
}

#cf4a_small img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 16s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 16s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 16s;
}
#cf4a_small img:nth-of-type(1) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}
#cf4a_small img:nth-of-type(2) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}
#cf4a_small img:nth-of-type(3) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#cf4a_small img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}






:focus{
outline:none;
}


#gallery0 {
width:200px;
height:116px;
top:0px;
position:relative;
}

#gallery0 a {
display:inline-block;
width:80px;
height:1px;
position:relative;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

#gallery0 a img {
display:block;
width:100%;
height:100%;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:2s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
position:absolute;
z-index:-1;
top:0px;
left:0px;
cursor:pointer;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;    
}

#gallery0 a.whiteborder:focus img{
width:864px;
height:486px;
top:84px;
left:250%;
position:absolute;
box-shadow:0 0 15px 2px white;
-moz-box-shadow:0 0 15px 2px white;
-webkit-box-shadow:0 0 15px 2px white;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1.25s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
cursor:default;
z-index:2;
}

#gallery0 a.whiteborder:focus::after {
    display: block;
    position: absolute;
    top:95px;
    left:225%;
    content: "Click on pictures or press TAB to scroll";
    color: white;
    font-family: "Trebuchet MS";
    font-size: 16px;
    white-space: nowrap;
    z-index:103;
}


#gallery {
width:300px;
height:100%;
top:0px;
left:3px;
position:relative;
}

#gallery a {
display:inline-block;
width:80px;
height:45px;
position:relative;
/*border:1px solid cyan;*/
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

#gallery a.whiteborder:focus img{
width:864px;
height:486px;
top:0px;
left:300%;
position:absolute;
box-shadow:0 0 15px 2px white;
-moz-box-shadow:0 0 15px 2px white;
-webkit-box-shadow:0 0 15px 2px white;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1.25s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
cursor:default;
z-index:2;
}


#gallery a.whiteborder:focus img:nth-of-type(5) {
  -webkit-animation-delay: 2;
  -moz-animation-delay: 2;
  -o-animation-delay: 2;
  animation-delay: 2;
}


#gallery a.orangeborder:focus img{
width:864px;
height:486px;
top:0px;
left:300%;
position:absolute;
box-shadow:0 0 15px 2px orange;
-moz-box-shadow:0 0 15px 2px orange;
-webkit-box-shadow:0 0 15px 2px orange;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1.25s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
cursor:default;
z-index:2;
}

#gallery a.greenborder:focus img{
width:864px;
height:486px;
top:0px;
left:300%;
position:absolute;
box-shadow:0 0 15px 2px green;
-moz-box-shadow:0 0 15px 2px green;
-webkit-box-shadow:0 0 15px 2px green;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1.25s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
cursor:default;
z-index:2;
}

#gallery a.cyanborder:focus img{
width:864px;
height:486px;
top:0px;
left:300%;
position:absolute;
box-shadow:0 0 15px 2px cyan;
-moz-box-shadow:0 0 15px 2px cyan;
-webkit-box-shadow:0 0 15px 2px cyan;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1.25s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
cursor:default;
z-index:2;
}

#gallery a.blueborder:focus img{
width:864px;
height:486px;
top:0px;
left:300%;
position:absolute;
box-shadow:0 0 15px 2px blue;
-moz-box-shadow:0 0 15px 2px blue;
-webkit-box-shadow:0 0 15px 2px blue;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1.25s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
cursor:default;
z-index:2;
}

#gallery a.yellowborder:focus img{
width:864px;
height:486px;
top:0px;
left:300%;
position:absolute;
box-shadow:0 0 15px 2px #FFCC00;
-moz-box-shadow:0 0 15px 2px #FFCC00;
-webkit-box-shadow:0 0 15px 2px #FFCC00;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1.25s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
cursor:default;
z-index:2;
}

#gallery a.pinkborder:focus img{
width:864px;
height:486px;
top:0px;
left:300%;
position:absolute;
box-shadow:0 0 15px 2px pink;
-moz-box-shadow:0 0 15px 2px pink;
-webkit-box-shadow:0 0 15px 2px pink;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1.25s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
cursor:default;
z-index:2;
}


#gallery a.cyanborder:focus::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
top:400px;
left:300px;
/*    content: "Paddleboarding on Half Moon Bay";*/
    color: white;
    font-family: "Trebuchet MS";
    font-size: 16px;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1.25s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
white-space: nowrap;
z-index:103;
}


#gallery a img {
display:block;
width:100%;
height:100%;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1.25s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1.25s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1.25s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1.25s;
position:absolute;
z-index:1;
top:0px;
left:0px;
cursor:pointer;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;    
}


/*
.closed{
position:absolute;
top:-30px;
right:-905px;
display:none;
text-align:center;
font-weight:bold;
font-size:70px;
color:#555;
width:20px;
height:20px;
-webkit-text-shadow:0px 0px 5px #fff;
-moz-text-shadow:0px 0px 5px #222;
text-shadow:0px 0px 5px #fff;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
cursor:pointer;
z-index:30;
}
*/


.closed-layer{
display:none;
position:absolute;
top:140px;
left:150px;
width:500px;
height:352px;
background:transparent;
z-index:30;
cursor:pointer;
}

#gallery a:focus~.closed, a:focus~.closed-layer{
display:block;
}

#gallery a:focus{
border:none;
}


#gallery a:focus:nth-child(3n+1) img{
left:350%;
}
#gallery a:focus:nth-child(3n+2) img{
left:250%;
}
#gallery a:focus:nth-child(3n+3) img{
left:150%;
}
#gallery a:focus:nth-child(4) img{
top:-49px;
}
#gallery a:focus:nth-child(5) img{
top:-49px;
}
#gallery a:focus:nth-child(6) img{
top:-49px;
}

#gallery a:focus:nth-child(7) img{
top:-98px;
}
#gallery a:focus:nth-child(8) img{
top:-98px;
}
#gallery a:focus:nth-child(9) img{
top:-98px;
}

#gallery a:focus:nth-child(10) img{
top:-147px;
}
#gallery a:focus:nth-child(11) img{
top:-147px;
}
#gallery a:focus:nth-child(12) img{
top:-147px;
}

#gallery a:focus:nth-child(13) img{
top:-196px;
}
#gallery a:focus:nth-child(14) img{
top:-196px;
}
#gallery a:focus:nth-child(15) img{
top:-196px;
}

#gallery a:focus:nth-child(16) img{
top:-245px;
}
#gallery a:focus:nth-child(17) img{
top:-245px;
}
#gallery a:focus:nth-child(18) img{
top:-245px;
}

#gallery a:focus:nth-child(19) img{
top:-294px;
}
#gallery a:focus:nth-child(20) img{
top:-294px;
}
#gallery a:focus:nth-child(21) img{
top:-294px;
}

#gallery a:focus:nth-child(22) img{
top:-343px;
}
#gallery a:focus:nth-child(23) img{
top:-343px;
}
#gallery a:focus:nth-child(24) img{
top:-343px;
}

#gallery a:focus:nth-child(25) img{
top:-392px;
}
#gallery a:focus:nth-child(26) img{
top:-392px;
}
#gallery a:focus:nth-child(27) img{
top:-392px;
}

#gallery a:focus:nth-child(28) img{
top:-441px;
}
#gallery a:focus:nth-child(29) img{
top:-441px;
}
#gallery a:focus:nth-child(30) img{
top:-441px;
}

#gallery a:focus:nth-child(31) img{
top:-490px;
}
#gallery a:focus:nth-child(32) img{
top:-490px;
}
#gallery a:focus:nth-child(33) img{
top:-490px;
}


/*
#gallery a:nth-child(1) {
  border:1px solid white;
}
#gallery a:nth-child(2) {
  border:1px solid cyan;
}
#gallery a:nth-child(3) {
  border:1px solid white;
}
#gallery a:nth-child(4) {
  border:1px solid cyan;
}
#gallery a:nth-child(5) {
  border:1px solid white;
}
#gallery a:nth-child(6) {
  border:1px solid white;
}
#gallery a:nth-child(7) {
  border:1px solid white;
}
#gallery a:nth-child(8) {
  border:1px solid cyan;
}
#gallery a:nth-child(9) {
  border:1px solid orange;
}
#gallery a:nth-child(10) {
  border:1px solid cyan;
}
#gallery a:nth-child(11) {
  border:1px solid orange;
}
#gallery a:nth-child(12) {
  border:1px solid cyan;
}
#gallery a:nth-child(13) {
  border:1px solid white;
}
#gallery a:nth-child(14) {
  border:1px solid cyan;
}
#gallery a:nth-child(15) {
  border:1px solid white;
}
#gallery a:nth-child(16) {
  border:1px solid cyan;
}
#gallery a:nth-child(17) {
  border:1px solid pink;
}
#gallery a:nth-child(18) {
  border:1px solid cyan;
}

*/