@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800;900&display=swap');
body{
    font-family: 'Poppins', sans-serif;
    width: 100%;
    margin: 0;
    float: left;
}
.volume{    
    position: absolute;
    z-index: 88888;
    width: 45px;
    height: 45px;
    right: 10px;
    padding: 10px 10px 8px 10px;
    bottom: 10px;
    border-radius: 30px;
    background-color:#253783;
    
}
.aquario{
    width: 100%;
    float: left;
    min-height: 800px;
    height: 100%;
    max-height: 1200px;
    overflow: hidden;
    position: fixed;
    margin: 0;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    background: url(../images/fundo3.png) no-repeat bottom center;
}
.seg-aquario {
    width: 100%;
    height: 100%;
    position: absolute;
}
.seg-info{
    width: 250px;
    background: #253683cc;
    padding: 15px;
    border-radius: 15px;
    float: left;
    margin-bottom: 20px;
    display: none;
    position: absolute;
    top: 0;
    left: 0;    
    z-index: 5;
}
.seg-info h2{
    font-size: 20px;
    color: #F3ED70;
    margin-bottom: 0;
    font-weight: 800;
}
.seg-info b{
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    color: #fff;
    line-height: 10px;
}
.seg-info p{
    font-size: 11px;
    color: #fff;
    margin: 0;
}
.modal-content{
    border: none !important;
}
.modal-dialog {
    max-width: 500px;
    margin: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background: #fff;
}
.modal{ z-index: 22222222;}
.modal{
    font-size: 15px;
    color: #333;
}
.modal-title{
    color: #253783;
    font-size: 25px;
    line-height: 20px;
}
.modal figure{
    width: 100%;
    padding: 20px;
}
.modal-title small{
    color: #666;
    font-size: 12px;
}
.detalhe{
    width: 20px;
    height: 80px;
    position: absolute;
    float: left;
    background: url(../images/detalhe.png) no-repeat center;
}
.seg-peixe{
    cursor: pointer;   
    max-width: 500px;
    position:absolute;  
    padding-top: 120px;  
}
.seg-peixe:hover  .seg-info{
    display: block;
    animation-play-state: paused;
}
.seg-peixe img{ max-width: 400px;}

.p1{
    animation-name: peixe1;
    animation-duration: 40s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    right: -500px;
    bottom: 0;
}

@keyframes peixe1 {
    0%   { right:-500px; bottom:0px; } 
   100% { right:200%; bottom:50%; }
}
.p2{
    animation-name: peixe2;
    animation-duration: 35s;
    animation-iteration-count: 1;
    animation-delay: 5s;
    animation-timing-function: linear;
    left:-500px; top:10%;
}
@keyframes peixe2 {
    0%   { left:-500px; top:10%; }  
  100% { left:110%; top:50%; }
}
.p2 img ,  .p7 img, .p8 img, .p9 img, .p13 img, .p12 img, .p11 img{
   
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
.p2 .detalhe,  .p7 .detalhe, .p8 .detalhe, .p9 .detalhe,  .p13 .detalhe, .p12 .detalhe , .p15 .detalhe, .p11 .detalhe {
    right: 15px;
}
.p3{
    animation-name: peixe3;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-delay: 30s;
    animation-timing-function: linear;
    right:-400px; bottom:50px;
}
.p3 img{
    width: 400px;
}
@keyframes peixe3 {
    0%   { right:-400px; bottom:50px; } 
  100% { right:150%; bottom:80%; }
}
.p4{
    animation-name: peixe4;
    animation-duration: 30s;
    animation-delay: 50s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    right:-350px; top:-10%; 
}
.p4 img{
    width: 350px;

}
@keyframes peixe4 {
    0%   { right:-350px; top:-10%; } 
  100% { right:120%; top:50%; }
}
.p5{
    animation-name: peixe5;
    animation-duration: 30s;
    animation-delay: 40s;
    animation-iteration-count: infinite; 
    animation-timing-function: linear;
    right:-550px; bottom:30%;
}
@keyframes peixe5 {
    0%   { right:-550px; bottom:30%; }  
  100% { right: 120%; bottom:60%; }
}

.p6{
    animation-name: peixe6;
    animation-duration: 30s;
    animation-delay: 30s;
    animation-iteration-count: 2; 
    animation-timing-function: linear;
    right:-500px; bottom:50%;
}
@keyframes peixe6 {
    0%   { right:-500px; bottom:50%; }   
  100% { right: 120%; bottom:5%; }
}
.p7{
    animation-name: peixe7;
    animation-duration:70s;
    animation-delay:3s ;
    left:-450px;
    bottom:5%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes peixe7 {
    0%   { left:-450px; bottom:5%; }   
  100% { left: 250%; bottom:40%; }
}
.p7 img{
    width:  350px;
}
.p8{
    animation-name: peixe8;
    animation-duration: 30s;
    animation-delay: 50s;
    animation-iteration-count: infinite; animation-timing-function: linear;
    left:-500px; top:100px; 
    animation-iteration-count: 2;
}
@keyframes peixe8 {
    0%   { left:-400px; top:100px; }   
  100% { left: 80%; top:60%; }
}
.p8 img{
    width: 400px;
}
.p9{
    animation-name: peixe9;
    animation-duration: 50s;
    animation-delay: 10s;
    /*animation-iteration-count: infinite; */
    animation-timing-function: linear;
    left:-500px;
    top:10%;
    animation-iteration-count: 2;
}
@keyframes peixe9 {
  0%   { left:-500px; top:10%; }  
  100% { left: 120%; top:90%; }
}
.p10{
    animation-name: peixe10;
    animation-duration: 50s;
    animation-delay: 50s;
    animation-iteration-count: infinite; animation-timing-function: linear;
    right: -500px; top: 10%;
}
@keyframes peixe10 {
    0%   { right:-150%; top:10%; }
    65% { right: 0;  top:10%; }   
    100% { right: 120%;  top:40%; }
}
.p11{
    animation-name: peixe11;
    animation-duration: 40s;
    animation-delay: 5s;
    animation-iteration-count: infinite; animation-timing-function: linear;
    left:-450px; bottom:-10%;
}
@keyframes peixe11 {
    0%   { left:-450px; bottom:-10%; }   
  100% { left: 250%;  bottom:80%; }
}

.p12{
    animation-name: peixe12;
    animation-duration: 60s;
    animation-delay: 50s;
    animation-iteration-count: infinite; 
    animation-timing-function: linear;
    left:-550px; bottom:-450px;
}
@keyframes peixe12 {
    0%   { left:-550px; bottom:0px; }   
    100% { left: 120%; bottom:80%; }
}
.p13{
    animation-name: peixe13;
    animation-duration: 50s;
    animation-delay: 5s;
    animation-iteration-count: infinite; animation-timing-function: linear;
    left:-300px; top:-10%;
}
@keyframes peixe13 {
    0%   { left:-300px; top:-10%; }   
    100% { left: 250%;  top:40%; }
}
.p14{
    animation-name: peixe14;
    animation-duration: 50s;
    animation-delay: 5s;
    animation-iteration-count: infinite; animation-timing-function: linear;
    right:-500px; top:10%; 
}
@keyframes peixe14 {
    0%   { right:-500px; top:10%; }   
  100% { right: 150%;  top:80%; }
}
.p15{
    animation-name: peixe15;
    animation-duration: 50s;
    animation-delay: 20s;
    animation-iteration-count: infinite; animation-timing-function: linear;
    left: -500px;
    top: -500px;
}
@keyframes peixe15 {
    0%   { left:-120%; top:-10%; }   
    100% { left: 120%;  top:80%; }
}
/*PEQUENOS*/
.p3 img, .p7 img, .p8 img,  .p13 img, .p4 img, .p15 img{ max-width: 250px; }
/*GRANDES*/
.p5 img, .p14 img, .p12 img ,  .p10 img  { max-width: 500px; }

@media (max-width: 1090px) { 
    /*PEQUENOS*/
.p3 img, .p7 img, .p8 img,  .p13 img, .p4 img, .p15 img{ max-width: 150px; }
/*GRANDES*/
.p5 img, .p14 img, .p12 img ,  .p10 img  { max-width: 250px; }
.seg-peixe img{ width: 250px;}
.aquario{    position: fixed;}
}