.body-main{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='1440' preserveAspectRatio='none' viewBox='0 0 1440 1440'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1015%26quot%3b)' fill='none'%3e%3crect width='1440' height='1440' x='0' y='0' fill='rgba(0%2c 0%2c 0%2c 1)'%3e%3c/rect%3e%3cpath d='M841.8911369743596 326.1313670384152L865.8910375252285-17.083200933840487 522.6764695529728-41.0831014847094 498.6765690021039 302.1314664875463z' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M233.1480377833047 468.61061611919865L421.38156267512124 701.0596607726726 653.8306073285952 512.826135880856 465.5970824367786 280.37709122738204z' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M719.459398822065 557.4905907844067L707.9401974564687 218.35757657829356 453.68161170889016 371.13154780365574z' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1082.679%2c1323.611C1213.68%2c1332.901%2c1364.222%2c1326.984%2c1434.109%2c1215.793C1506.832%2c1100.09%2c1463.008%2c950.94%2c1389.207%2c835.921C1321.783%2c730.84%2c1207.422%2c662.87%2c1082.679%2c668.089C965.89%2c672.975%2c873.547%2c757.218%2c817.572%2c859.835C764.244%2c957.599%2c752.87%2c1074.721%2c808.136%2c1171.403C863.793%2c1268.768%2c970.81%2c1315.678%2c1082.679%2c1323.611' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M375.68236987131723 293.82359663879345L209.53869188528324-62.47267060116803-146.75757535467818 103.67100738486596 19.386102631355755 459.96727462482744z' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M941.503%2c964.793C1024.251%2c964.315%2c1084.8%2c896.395%2c1125.822%2c824.53C1166.401%2c753.44%2c1190.074%2c669.068%2c1151.525%2c596.857C1111.027%2c520.994%2c1027.498%2c479.75%2c941.503%2c479.258C854.609%2c478.761%2c768.641%2c518.012%2c727.279%2c594.431C687.533%2c667.865%2c711.65%2c754.401%2c753.458%2c826.681C795.193%2c898.835%2c858.149%2c965.275%2c941.503%2c964.793' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1015'%3e%3crect width='1440' height='1440' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");  z-index: 1000; width: 100%; height: 100%; position: absolute;  overflow-y: scroll; margin-top: 1rem;     background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    margin: 0;
    padding: 0;
  }

.body-main::-webkit-scrollbar {
    width: 3px;
}
.body-main::-webkit-scrollbar-track {
    background: rgb(0, 0, 0);
}
.body-main::-webkit-scrollbar-thumb {
    background: #f33f3f;
    border-radius: 50px;
}
.body-main::-webkit-scrollbar-thumb:hover {
    background: #f33f3f;
}

.body-container{display: flex; color: white; flex-direction: column; justify-content: center; z-index: 1000; width: 100%;}

body,html{width:100%;height: 100%; padding: 0; margin: 0;}
body{background-color: black;}



.post-container{color: rgb(0, 0, 0); margin: 1rem; margin-bottom: 5rem; background-color: rgb(255, 255, 255); border-radius: 10px; padding: 1rem; box-shadow: 5px 5px 20px rgb(85, 43, 43); display: flex;}
.post-container:last-of-type{margin-bottom: 5rem;}

.post-card-container{width: 100%;}
.users-card-container{width: 100%;}

.post-image-container{display: none;}
.post-image-container>img{height: auto; width: 100%; max-height: 31rem; border-radius: 5px; margin-left: 1%;}

.bg-volcanes{background-color: #fff4f4 !important;}
.bg-playa{background-color: #ffffe9 !important;}
.bg-cultural{background-color: #e6eeff !important;}
.bg-other{background-color: #ffffff !important;}
.bg-naturaleza{background-color: #eeffe7 !important;}


.text-volcanes{color: #750000 !important;}
.text-playa{color: #757300 !important;}
.text-cultural{color: #001b75 !important;}
.text-other{color: #000000 !important;}
.text-naturaleza{color: #1f7500 !important;}

.post-header{border-bottom: 1px solid rgb(104, 104, 104); border-radius: 5px;margin-bottom: 1rem;padding-bottom: 0.5rem;}
.post-header-container{display: flex; flex-direction: row; justify-content: space-around; align-content: center;}
.post-header-item{align-self: center;}
.post-header-item>a{text-decoration: none; color: rgb(104, 104, 104); font-style:italic; font-size: 0.9rem;}
#post-header-item-name{text-transform: uppercase;}


.post-body-see{display: flex; justify-content: space-around; flex-direction: row; align-content: center; overflow-x: scroll; padding: 1rem;}
.post-body-table-see{border-radius: 5px; text-align: center; padding: 1rem; margin-left: 26rem;}
.post-body-table-see>thead>tr>th{border: 1px solid rgb(104, 104, 104); border-top: none; border-right: none; padding: 1rem; border-radius:10px;}
.post-body-table-see>tbody>tr>td{border: 1px solid rgb(104, 104, 104); border-bottom: none; border-left: none; padding: 1rem; border-radius:10px;}

.post-body{display: flex; justify-content: space-around; flex-direction: row; align-content: center;}
.post-body-table{border-radius: 5px; text-align: center; padding: 1rem;}
.post-body-table>thead>tr>th{border: 1px solid rgb(104, 104, 104); border-top: none; border-right: none; padding: 1rem; border-radius:10px;}
.post-body-table>tbody>tr>td{border: 1px solid rgb(104, 104, 104); border-bottom: none; border-left: none; padding: 1rem; border-radius:10px;}


.post-footer{border-top: 1px solid rgb(104, 104, 104); border-radius: 5px;margin-top: 1rem;padding-top: 0.5rem; font-size: 1rem; display: flex; flex-direction: column; align-content: flex-start; justify-content: left;}
.post-footer-item:first-of-type{font-size: 0.9rem;}
.post-footer-item:last-of-type{text-transform: uppercase; color: rgb(104, 104, 104); font-size: 0.7rem; padding: 1rem; align-self: center;}

.title-admin{font-size: 1rem; padding-top: 1rem; padding-bottom: 1rem; text-transform: uppercase;}

footer{width: 100%; position: fixed; bottom: 0; z-index: 3000;}
.footer-container{position: fixed; bottom: 0; background-color: rgb(0, 0, 0); width:100%; display: flex; justify-content: space-around; color: wheat; min-height: 4rem; align-content: center;z-index: 2000;}
.footer-container>div{color: #fff; align-self: center;}
.footer-container>div>a>img{width: 2rem; height: 2rem;}
.footer-container>div:first-of-type{font-size: 1rem; color: #fff; font-weight:900;}
.footer-container>div>em:first-of-type{color: #f33f3f; font-weight:900;}

.search-container{display: flex; width: 100%; justify-content: space-around; align-content: center; border-bottom: 1px solid white;}
.search-container:hover{border-color: #750000}
.search-container>input{background-color: rgb(0, 0, 0); border-radius: 0px 0px 0px 0px; width: 100%; height: 1rem; padding: 1rem; align-self: center; text-align:left; color:rgb(255, 255, 255); outline: none; border-top: none; border: none;}
.search-container>input::placeholder{color: rgb(180, 180, 180);}
.search-container>input:hover{border-color: #750000; outline: none; border-top: none; border-right: none; border-left: none;}

.search-container>a{color: rgb(180, 180, 180); background-color: black; height: 100%; width: 15%; align-self: center; display: flex; justify-content: space-around; font-size: 1rem; user-select: none;}
.search-container>a:hover{color: rgb(255, 255, 255);}
.search-container>a:link{text-decoration: none; background-color: none;}
.search-container>a:active{text-decoration: none; background-color:none;}



.carousel-container{width: 100%;}
.carousel-slider-container{width: 100%; min-height: 10rem;}
.carousel-slider-item>img{height: 10rem;} 


.carousel-button-contianer{display: flex; width: 100%; justify-content: space-around; align-content: center;align-items: center;}
.carousel-button-item{align-self: center; text-decoration: none; color: white; background-color: #191919; padding: 1rem; margin: 1rem; border-radius: 5px;}


.title-container{background-color: rgba(0, 0, 0, 0.486); margin-top: 1rem; margin-bottom: 1rem; /*border-radius: 20px 0px 0px 20px;*/}
.title{font-size: 2rem; margin-left: 2.5rem;  /*border-radius: 20px 0px 0px 20px;*/}
.title-inner{text-decoration: none; color: #f33f3f; font-size: 1rem; align-self: flex-end; text-transform: uppercase;}
@media (min-width: 800px) {

    .search-container>a{width: 7%; font-size: 2rem;}
    .search-container>input{padding: 1.5rem;}

    .carousel-container{width: 100%; align-self: center;}
    .carousel-slider-item>img{height: 20rem;} 

    .post-container{width: 60%; align-self: center;}
    .post-footer-item:first-of-type{font-size: 1.5rem;}
    
}





  .login-main{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='1440' preserveAspectRatio='none' viewBox='0 0 1440 1440'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1015%26quot%3b)' fill='none'%3e%3crect width='1440' height='1440' x='0' y='0' fill='rgba(0%2c 0%2c 0%2c 1)'%3e%3c/rect%3e%3cpath d='M841.8911369743596 326.1313670384152L865.8910375252285-17.083200933840487 522.6764695529728-41.0831014847094 498.6765690021039 302.1314664875463z' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M233.1480377833047 468.61061611919865L421.38156267512124 701.0596607726726 653.8306073285952 512.826135880856 465.5970824367786 280.37709122738204z' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M719.459398822065 557.4905907844067L707.9401974564687 218.35757657829356 453.68161170889016 371.13154780365574z' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1082.679%2c1323.611C1213.68%2c1332.901%2c1364.222%2c1326.984%2c1434.109%2c1215.793C1506.832%2c1100.09%2c1463.008%2c950.94%2c1389.207%2c835.921C1321.783%2c730.84%2c1207.422%2c662.87%2c1082.679%2c668.089C965.89%2c672.975%2c873.547%2c757.218%2c817.572%2c859.835C764.244%2c957.599%2c752.87%2c1074.721%2c808.136%2c1171.403C863.793%2c1268.768%2c970.81%2c1315.678%2c1082.679%2c1323.611' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M375.68236987131723 293.82359663879345L209.53869188528324-62.47267060116803-146.75757535467818 103.67100738486596 19.386102631355755 459.96727462482744z' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M941.503%2c964.793C1024.251%2c964.315%2c1084.8%2c896.395%2c1125.822%2c824.53C1166.401%2c753.44%2c1190.074%2c669.068%2c1151.525%2c596.857C1111.027%2c520.994%2c1027.498%2c479.75%2c941.503%2c479.258C854.609%2c478.761%2c768.641%2c518.012%2c727.279%2c594.431C687.533%2c667.865%2c711.65%2c754.401%2c753.458%2c826.681C795.193%2c898.835%2c858.149%2c965.275%2c941.503%2c964.793' fill='rgba(255%2c 0%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1015'%3e%3crect width='1440' height='1440' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");  z-index: 1000; width: 100%; height: 100%; position: absolute;  overflow-y: scroll; margin-top: 1rem;     background-position: center;
    background-repeat: no-repeat;
    background-size: cover; display: flex; width: 100%; height: 100%; justify-content: space-around; align-content: center; flex-direction: column; margin: 0; padding: 0;}

  .login-main::-webkit-scrollbar {
      width: 3px;
  }
  .login-main::-webkit-scrollbar-track {
      background: rgb(0, 0, 0);
  }
  .login-main::-webkit-scrollbar-thumb {
      background: #f33f3f;
      border-radius: 50px;
  }
  .login-main::-webkit-scrollbar-thumb:hover {
      background: #f33f3f;
  }
    
    .login-container{width: 100%; align-self: center; background-color: rgba(0, 0, 0, 0.466); display: flex; flex-direction: column; align-content: center; justify-content: center;
        
    }

    .login-form-title{width: 100%; display: flex;  justify-content: space-around; align-content: center; background-color: rgba(245, 222, 179, 0); text-align:center; margin-top: 1rem;margin-bottom: 1rem;}
    .login-title{align-self: center; width: 100%;  color: #ffffff;}
    .login-title>em{align-self: center; width: 100%;  color: #f33f3f;}

    .login-form-inputs{background-color: rgba(222, 184, 135, 0); width: 100%; align-self: center; display: flex; align-content: center; justify-content: space-around; flex-direction: column;}
    .login-form-inputs-item{align-self: center; width: 100%;display: flex; background-color: rgba(128, 255, 0, 0); justify-content: space-around;}
    .login-form-inputs-item>input{padding: 1rem; margin:1rem; align-self: center; border-radius: 20px; outline: none; border: 1px solid rgb(153, 153, 153); width: 70%; font-size: 1rem;}


    .login-form-btn{background-color: rgba(231, 148, 40, 0); width: 100%; align-self: center; display: flex; align-content: center; justify-content: space-around; flex-direction: column;}
    .login-form-button-item{align-self: center; width: 100%;display: flex; background-color: rgba(0, 38, 255, 0); justify-content: space-around;}
    .login-form-button-item>button{padding: 1rem; margin:1rem; align-self: center; border-radius: 10px; outline: none; border: 1px solid #f33f3f; width: 50%; background-color: #f33f3f00; font-weight: 900; font-size: 1rem; text-transform: uppercase; color: #f33f3f;}
    .login-form-button-item>button:hover{border: 1px solid #000000;background-color: #f33f3f;color: #ffffff;}

    .login-error-message{background-color: none; color: #f33f3f; width: 60%; font-size: 1rem; font-weight: 100; text-align: center; align-self: center;}

    .login-section-form{display: flex; flex-direction: row; width: 100%; height: 100%;}
    .login-slide{display:none}
    .login-slide{filter: brightness(80%);}


    @media (min-width: 981px) {
      .post-card-container{width: 60%;}
      .users-card-container{width: 100%;}
      .post-image-container{width: 40%; display: block;}
        .login-slide{width: 100%; display: block;}
      }