body{border:0px solid white; width:100%; margin:0px 0px; padding:0px 0px; color:#000000; font-size:28px; font-family:Roboto; font-weight:300; background:#ffffff;
 background-image:url('bg.png' );


 background-size:100%   ;
 
 width:100%; height:100%; background-size:auto 100%; background-position:absolute;background:url(/images/bg_home.png) 50% 0px no-repeat fixed;  background-image:linear-gradient(to top left, #0000ff 40%, #000000 60%); 
 
}

#body{ background:#ff0000;}

body::-webkit-scrollbar{width:0;}
body{-ms-overflow-style:none; scrollbar-width:0;}

 .animate-top{position:relative;animation:animatetop 2s}@keyframes animatetop{from{top:300px;opacity:0} to{top:0;opacity:1}}
 
.animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}


.center{text-align:center;}
.wide{letter-spacing:6px;}
.full-height{height:100%; background:none;}
.circle{border-radius:50%;}
.shadow{margin:2px 0 6px 0; -webkit-box-shadow:0px 6px 6px #DDDDDD; -moz-box-shadow:0px 6px 6px #DDDDDD; box-shadow:0px 6px 6px #DDDDDD; background:white; border:0; border-radius:25px;}
.ripple:active{opacity:0.5;}.ripple{transition:opacity 0s;}
.fade0{-webkit-animation-name:fade; -webkit-animation-duration:9.5s; animation-name:fade; animation-duration:9.5s; opacity:1;}
@-webkit-keyframes fade0{from{opacity:1}to{opacity:0}}
@keyframes fade0{from{opacity:1}to{opacity:0}} 
.fade-in{animation:opac 6.5s}
@keyframes w3-animate-opacity2{from{opacity:1}to{opacity:0}}
.fade-out{-webkit-animation-name:fade; -webkit-animation-duration:9.5s; animation-name:fade; animation-duration:9.5s; opacity:0;}
@-webkit-keyframes fade{from{opacity:1}to{opacity:1}to{opacity:0}}
@keyframes fade{from{opacity:1}to{opacity:1}to{opacity:0}}
.animate-fading{animation:fading 10s 1}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity2{animation:opac 10.8s}
@keyframes w3-animate-opacity2{from{opacity:1}to{opacity:0}}
.spin{animation:spin 3s 1 linear}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}

.animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}

.animate-bottom{position:relative;animation:animatetop 3s}@keyframes animatebottom{from{top:-600px;opacity:0} to{bottom:0;opacity:1.0}}

.animate-bottom_1{position:relative;animation:animatetop 3s}@keyframes animatebottom{from{top:-600px;opacity:0} to{bottom:0;opacity:1.0}}

.animate-input{transition:width 0.4s ease-in-out}
.animate-input:focus{width:100%!important}
.hover-opacity{cursor:pointer;}
.animate-bottom_TAB_101{position:relative;animation:animatetop 3s}@keyframes animatebottom{from{top:-600px;opacity:0} to{bottom:0;opacity:1.0}}
.animate-bottom_TAB_1{position:relative;animation:animatetop 1s}@keyframes animatebottom{from{top:-600px;opacity:0} to{bottom:0;opacity:1.0}}
.animate-bottom_TAB_2{position:relative;animation:animatetop 1.5s}@keyframes animatebottom{from{top:-600px;opacity:0} to{bottom:0;opacity:1.0}}
.animate-bottom_TAB_3{position:relative;animation:animatetop 2s}@keyframes animatebottom{from{top:-600px;opacity:0} to{bottom:0;opacity:1.0}}
.animate-bottom_TAB_4{position:relative;animation:animatetop 2.5s}@keyframes animatebottom{from{top:-600px;opacity:0} to{bottom:0;opacity:1.0}}
.animate-bottom_TAB_5{position:relative;animation:animatetop 3s}@keyframes animatebottom{from{top:-600px;opacity:0} to{bottom:0;opacity:1.0}}
 
 
 
.index {

background: url('thankyou.jpeg')0px 50% no-repeat fixed #ffffff;
background-size: 100% 100%; }



input{font-size:24px; text-align:center; margin:2px 0;}
*{box-sizing:border-box;}
.full-height{height:100%; background:none;}

.col-16{width:100%; border:0px solid white; padding:0px; margin:0px; font-weight:normal; font-style:normal; text-align:center; float:left; background:transparent;}






.col-16#album{width:100%; border:0px solid red; padding:1% 4%; margin:0px; font-weight:normal; font-style:normal; text-align:center; float:left;




}

img.operator{-webkit-border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-khtml-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;
 }

div.col-4{width:24%; padding: 0px ; margin: 0px .5% 012px .5%; display:block; float:left; background:transparent; border:00px solid transparent; border-radius:12px; cursor:pointer;
 background-size:100% 100%;
}

div.col-4:hover{background-size:145% 145%; background-position:50% 50%;

-webkit-border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-khtml-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;
}

.col-8{width:50%; border:0px solid white; padding:0px; margin:0px; font-weight:normal; font-style:normal; float:left; background:transparent;}

.col-8.r{text-align:right;}

.col-8.l{text-align:left;}

.glovebox{text-align:right; position:absolute; right:0;}




form.col-16.album_cover{border:01px solid white;}
form.col-16.album_cover span.col-16.title{border:0px solid yellow; font-size:24px; text-transform:Capitalize;}
form.col-16.album_cover cover{border:0px solid green;}
form.col-16.album_cover button{border:0px solid blue; cursor:pointer;}
form.col-16.album_cover img{border:0px solid purple;}
form.col-16.album_cover span.col-16.description{border:0px solid black;}



 
div.col-4 img{
border:00px solid #545454; width:100%; padding:1px; margin:0px; display:block; float:left; cursor:pointer; background:transparent;}






div.col-4 span.col-16.title{border:0px solid red; width:100%; padding:0px; margin:0px; font-size:20px; font-weight:normal; font-style:normal; text-align:center; text-transform:Capitalize; display:block; float:left; background:transparent;}




div.col-16.albumimgbig{width:100%; height:100%; padding: 0px; display:none;}
div.col-16.albumimgbig span.title{border:0px solid #000000; width:100%; padding:0px; margin:0px; font-size:24px; font-weight:normal; font-style:normal; text-align:center; text-transform:Capitalize; display:block; float:left; background:#ffffff;}


div.col-16.albumimgbig span.description{border:00px solid red; width:100%; padding:0 10%; margin:0px; font-size:18px; font-weight:normal; text-align:center; display:block; float:left; background:#ffffff;}

.position_next{display:none;}
.position_back{display:none;}

div.col-16.toprow {position:fixed; top:0; left:0; background:transparent;}
div.col-16.bottomrow {position:fixed; bottom:0; left:0; background:#eeeeff;}


div.col-16.bottomrow img{width:60px;-webkit-border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-khtml-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;
-webkit-box-shadow: 0px 6px 6px #DDDDDD;
-moz-box-shadow: 0px 6px 6px #DDDDDD;
box-shadow: 0px 6px 6px #DDDDDD;}

  



span.col-16#badge img{width:60px;-webkit-border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-khtml-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;
-webkit-box-shadow: 0px 6px 6px #DDDDDD;
-moz-box-shadow: 0px 6px 6px #DDDDDD;
box-shadow: 0px 6px 6px #DDDDDD;}

  



img.badge{width:120px; margin: -1px 0px 0px 0px ; vertical-align: middle; -webkit-border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-khtml-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;
-webkit-box-shadow: 0px 6px 6px #DDDDDD;
-moz-box-shadow: 0px 6px 6px #DDDDDD;
box-shadow: 0px 6px 6px #DDDDDD;}






span.title{border:0px solid red; width:100%; padding:0px; margin:0px; font-size:24px; font-weight:normal; font-style:normal; text-align:center; text-transform:Capitalize; display:block; float:left; background:transparent;}



div.srcposition:hover{xdisplay: none;}


img.srcposition:hover{position:relative; z-index:9; width:460px; height:345px;  border:1px solid #787878; top:-40px; border-radius:15px; }

img.srcposition{position:relative; z-index:8; width:90px; height:59px;  border:0px solid blue; border-radius:15px; }

 

.mySlides {display: none;}
img {vertical-align: middle;}

 
.slideshow-container {
  width: 100%;
   height: 100%;
  position: fixed;
  margin: auto;
}
  
 

 

@-webkit-keyframes fade {
  from {opacity: .0} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .0} 
  to {opacity: 1}
} 




 
.fade2 {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 16.5s;
  animation-name: fade;
  animation-duration: 16.5s;
}

@-webkit-keyframes fade2 {
  from {opacity: .0} 
  to {opacity: 1}
}

@keyframes fade2 {
  from {opacity: .0} 
  to {opacity: 1}
} 


.w3-animate-opacity2{animation:opac 10.8s 0}

@keyframes opac{from{opacity:1} to{opacity:0}

}

 
 
 
 
 
.none{display:none;}
 
 
 
 
 
 
 

@media only screen and (max-width: 300px) {
body{font-size:18px;}
}


@media only screen and (max-width:1200px){
body{font-size:18px;}
}



.transform{border: 0px; padding:0px 8px; margin: 4px 0px 8px 0px; color:#000000; font-size:28px; font-family:Roboto; font-weight:300; background:#ffffff; cursor:pointer;-webkit-border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-khtml-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;
-webkit-box-shadow: 0px 6px 6px #DDDDDD;
-moz-box-shadow: 0px 6px 6px #DDDDDD;
box-shadow: 0px 6px 6px #DDDDDD;"}



@media only screen and (max-device-width:1600px)
{
 { }
}