@charset "UTF-8";

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #000000;
  --bs-primary: #2a5555;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #000000;
  --bs-primary-rgb: 42, 85, 85;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 0, 0, 0;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 0, 0, 0;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #000000;
  --bs-body-bg: #fff;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* grilla */

.item1 { 
  grid-area: header;
  padding: 15vh 0;
 }
.item2 { 
	grid-area: menu;
  background-color: black; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, #00000000,#99a7a7);
  padding: 50px 0;
  background-color: black;
  opacity: 0.8;
  /*transition: 5s*/
  /*z-index: 0;*/
}
.alert {
  width: 80px;
  height: 80px;
  transition: 5s;
}



.item2:hover {
  background-color: black;
  background-image: none;
  opacity: none;
}

.item2 > h1{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    opacity: none;
    font-size:larger;
    margin-left: 10%;
    text-align: left;
    color: white;
  }
.item2 > h2{
    font-size:large;
    margin-left: 10%;
    text-align: left;
    color: white;
    
}

.item3 { 
  grid-area: footer;
  text-align:center;
  margin-block-end:auto;
  color:white;
 }
 .item4 { 
  grid-area: right;
  background-color: #ffffff;
  text-align: center;
 }
.item5 {
  grid-area: left;
  text-align: left;
  margin-left: 10%;
  padding-bottom: 15px;
}


.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header'
    'menu menu menu menu menu menu'
    'footer footer footer footer footer';
  gap: 5px;
  /*background-color: #2196F3;*/
  padding: 1px;
}

.grid-container > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  text-align: center;
  padding: 1px 0;
  font-size: 30px;
}
/* fin grilla */

.jover :hover{
  color: red;
}
video.bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 60%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0.7;
    z-index: -2;
  }
body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color:#3e5c5b;
    opacity: 0.4;
    z-index: 0;
  }
  h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: "Tinos", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    line-height: 1.2;
  }
.cerenz {
       
        width:200px; 
         height:200px; 
         position:fixed; 
         top:50px; 
         left:10px; 
         
         transition: cubic-bezier(0.23, 1, 0.320, 1);
         z-index:3;
         -webkit-animation: cerenz 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: cerenz 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.logo {
  padding: 0px; 
  margin: 0x; 
  border: none; 
  float: left; 
  width: 200px;
  filter: drop-shadow(2px 2px 1px rgb(182, 180, 180))
  
  
}


 @-webkit-keyframes cerenz {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes cerenz {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


@media (min-width: 992px) {
  .cerenz {
  left:80%;
  }
}
@media (min-width: 412px) {
  .cerenz {
  left:10%;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}