body { 
  font-family: 'Tangerine', serif;
  font-size: 40px;
  text-shadow: 4px 4px 4px #aaaaaa;
  background: url("http://atbop.com/cloudsbg.jpg") no-repeat center fixed; 
  background-size: cover;
  font-weight: bolder;
  color: #00217a;
  max-width:100%;
  margin:0;
  padding:10px;
  background-color: #a69047;
}

.banner {
margin-top:70px;
}
.main {
vertical-align:20px;
max-width:57%;
min-width:400px;
background: none;
margin-right:auto;
margin-left:33%;
}
.content {
vertical-align:top;
background: none;
text-align: center;
background-color: #ffffff;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
border: 5px outset #a68f47;
border-radius: 12px;
box-shadow : 12px 12px 12px #000000;
margin-right:auto;
margin-left:auto;
padding: 10px;

}
.content2 {
vertical-align:top;
max-width: 50%;
background: none;
padding: 1%;
text-align: center;
background-color: #ffffff;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
border: 5px outset #a68f47;
border-radius: 12px;
box-shadow : 12px 12px 12px #000000;
margin-right:auto;
margin-left:auto;
}
.content3 {
max-width: 60%;
vertical-align:top;
background: none;
padding: 1%;
text-align: center;
background-color: #ffffff;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
border: 5px outset #a68f47;
border-radius: 12px;
box-shadow : 12px 12px 12px #000000;
margin-right:auto;
margin-left:auto;
}
.content4 {
vertical-align:top;
background: none;
padding: 2%;
text-align: center;
background-color: #ffffff;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
border: 5px outset #a68f47;
border-radius: 12px;
box-shadow : 12px 12px 12px #000000;
margin-right:auto;
margin-left:auto;
}

a  {  
font-weight:900;
text-decoration: none;
color:#00217a; 

} 
a:visited  { 
color:#00217a; 
text-decoration: none;
} 
a:active  { 
color : #9F9227; 
text-decoration: none;
} 
a:hover  { 
color : #00217a; 
background-color : #ffffff;
text-decoration : none; 
}
h1  {
font-size : 5vw; 
text-align : center; 
font-weight:bold;
line-height: 110%;
text-shadow: 4px 4px 4px #929292;
margin-right:auto;
margin-left:23%;
margin-top: -30px;
text-align:center;
}

h2  {
color : #00217a;
font-weight : bolder; 
font-style : oblique; 
font-size : 3vw; 
text-align : center;
line-height: 125%;

-webkit-filter: drop-shadow(4px 4px 4px #5a4d2e); /* Safari */
filter: drop-shadow(4px 4px 4px #5a4d2e);
}

h3  {
width:85%;
padding:10px;
color : #00217a;
font-weight:bolder;
font-size:xx-large;
text-align : center;
line-height:125%;
border-radius : 10px; 
box-shadow : 6px 6px 6px #393115; 
background-color: #e1deb1;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */ 
margin-right:auto;
margin-left:auto;
}
h4 {
font-style : oblique;
color : #00217a;
font-weight:bolder;
font-size:50px;
text-align : center;
line-height:1%;
text-shadow: 4px 4px 4px #5a4d2e;
}
p   {
color : #00217a;
font-weight:bold;
font-size : 3vw;
text-align : center;
line-height:120%;
text-shadow: 7px 7px 7px #aaaaaa;
padding:7px;
}

 b  { 
font-size : 110%; 
} 
.menu  {
margin-top:-300px;
max-width:25%;
min-width:185px;
float: left;
margin-left: 3px;
margin-right: auto;
vertical-align:top;
background: none;
text-decoration: none;
padding:10px;
text-align: center;
font-size:110%;
}
.clearfix {
  overflow: auto;
}
.menu  ul  {
list-style-type: none;
margin-left:-55px;
margin-right:25px;

}
.menu li{
padding:7px;
background-color: #ffffff;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
border: 5px outset #a68f47;
border-radius: 12px;
box-shadow : 12px 12px 12px #000000;
margin:15px;
width:100%;
}
.menu a:hover {
padding:5px;
color:#00217a; 
background-color : transparent;
text-decoration : none; 
text-shadow: 6px 6px 6px #000000;
border: 3px outset #000000;
border-radius: 12px;
box-shadow : 12px 12px 12px #000000;
}
.Products  {
margin-right:auto;
margin-left: auto;
text-align:center;
}
.Products img {
max-height: 100%;
max-width: 100%;
border-radius : 10px; 
box-shadow : 10px 10px 10px #5a4d2e; 
}
.Products a:link {
background: none;
}
.Products a:hover {
background: none;
}
.ads {
margin-right:auto;
margin-left: -50px;
text-align:center;
}
.ads img {
max-height: 100%;
max-width: 100%;
border: #ffffff 1px solid;
border-radius : 10px; 
box-shadow : 6px 6px 6px #393115; 
}
.ads2 {
margin-right:auto;
margin-left: -7px;
text-align:center;
}
.PayPal {
padding-bottom:10px;
margin-right:auto;
margin-left: auto;
}
form {
padding-bottom:5px;
margin-bottom: 5px;
margin-right:auto;
margin-left: auto;
}
.box  {
background-image: url("http://atbop.com/footer5.png"); 
background-repeat: no-repeat;
height:110px;
width: 100%;
margin-right:auto;
margin-left: 10%;
border:0;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */ 
}
.hr2 {
background-image:url('http://beachbangles.com/Feet_C.jpg');
background-repeat: repeat-x;
height:40px;
width:95%;
border:0;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
.hr3 {
background-image:url('http://beachbangles.com/Feet_D.jpg');
background-repeat: repeat-x;
height:40px;
width:95%;
border:0;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
.TransShadow img {
max-height: 100%;
max-width: 100%;
-webkit-filter: drop-shadow(5px 5px 5px #393115); /* Safari */
filter: drop-shadow(5px 5px 5px #393115);
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
.TransShadow a {
color : #00217a;
-webkit-filter: drop-shadow(4px 4px 4px #5a4d2e); /* Safari */
filter: drop-shadow(4px 4px 4px #5a4d2e);
}
.TransShadow a:hover {
color : #e1deb1;
background-color:transparent;
-webkit-filter: drop-shadow(4px 4px 4px #5a4d2e); /* Safari */
filter: drop-shadow(4px 4px 4px #5a4d2e);
}
.TransShadow h3  {
font-weight:bolder;
color : #00217a;
margin-right:15%;
margin-left:-3%;
padding:20px;
text-shadow: 2px 2px 2px #cec680;
background-color:transparent;
border-radius : 0px; 
box-shadow : 0px 0px 0px transparent; 
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */ 
-webkit-filter: drop-shadow(3px 3px 3px #5a4d2e); /* Safari */
filter: drop-shadow(3px 3px 3px #5a4d2e);
}
table {
margin-left:auto;
margin-right:auto;
text-align:center;
}
td  {
text-align:center;
vertical-align:top;
}
.clickhere  {
width:50%;
font-size:xx-large;
font-weight: bolder;
font-style:oblique;
color: #00217a;
text-align : center;  
list-style-type: none;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */ 
background : #b0a544;
border-radius : 10px; 
box-shadow : 6px 6px 6px #000000;
margin-right:auto;
margin-left:auto;
}
.clickhere2  {
width: 55%;
font-size:x-large;
font-weight: bolder;
font-style:oblique;
color: #00217a;
text-align : center;  
list-style-type: none;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */ 
padding: 5px;
background : #b0a544;
border: #ffffff 1px solid;
border-radius : 10px; 
box-shadow : 6px 6px 6px #000000;
margin-right:auto;
margin-left:auto;
}
img {
max-height: 100%;
max-width: 100%;
border-radius : 0px; 
box-shadow : 0px 0px 0px transparent; 
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */ 
-webkit-filter: drop-shadow(9px 9px 9px #5a4d2e); /* Safari */
filter: drop-shadow(9px 9px 9px #5a4d2e);
}
 

.gif-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin-left:20px;
  margin-right:auto;
}

.frame {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
 
.frame1 {
  background: url('img src="http://beachbangles.com/Gifs/Gif_1.jpg') no-repeat center center;
  background-size: cover;
}

.frame2 {
  background: url('img src="http://beachbangles.com/Gifs/Gif_2.jpg') no-repeat center center;
  background-size: cover;
}

.frame3 {
  background: url('img src="http://beachbangles.com/Gifs/Gif_3.jpg') no-repeat center center;
  background-size: cover;
}
.frame4 {
  background: url('img src="http://beachbangles.com/Gifs/Gif_4.jpg') no-repeat center center;
  background-size: cover;
}


@keyframes gifAnimation {
  0% { opacity: 1; }
  33% { opacity: 0; }
  66% { opacity: 0; }
  100% { opacity: 1; }
}

.frame1 {
  animation: gifAnimation 5s infinite;
}

.frame2 {
  animation: gifAnimation 5s infinite 1s;
}

.frame3 {
  animation: gifAnimation 5s infinite 2s;
}

.frame4 {
  animation: gifAnimation 5s infinite 3s;
}

h4 {
font-style : oblique;
color : #393115;
font-weight:bolder;
font-size:80px;
text-align : center;
line-height:125%;
text-shadow: 6px 6px 6px #c7be6f;
}
table {
width:110%;
margin-left:-5%;
margin-right:auto;
text-align:center;
}