/*-------------- GENERLES -------------- */
:root {
	--red-color-rgb: rgb(228,0,32);
	--blue-color-rgb: rgb(5,27,48,1);
	--gris-color-rgb: rgb(195,195,195,1);
	--grisOs-color-rgb: rgb(143,145,147,1);
   }

   @font-face {
      font-family: HelveticaNeue_Medium;
      src: "./fuentes/HelveticaNeue_Medium.ttf";
    }

   *{
	   padding: 0;
	   margin:0;
	   /*font-family: 'Archivo Narrow', sans-serif;*/
   }
   
   html{
	   scroll-behavior: smooth;
   }
   
   header {
	top: 0;
	width: 100%;
	background: #FFFFFF;
	display: flex;
}


body {
	 margin: 0;
	 font-size: 1rem !important;
	 
}
   /*-------------- MENU -------------- */

   .description{
    /*display: inline;*/
   }

   .description .name {
        margin-top: 5px;
        }
   .contenedor {
	   width: 100%;
	   align-items: center;
	   margin: auto;
	   background: white;
	   position: fixed;
	   display: flex;
	   justify-content: space-between;
	   z-index: 1000;
     height: 60px;
     top: 0;
   }

   article img:not(.logoImg) {
	margin-right: 20px;
	margin-left: 20px;
	height: 30px;
	width: 30px;
	}

   .logoImg{
	   position: absolute;
	   top:0px;
	   left:50%;
	   transform: translateX(-50%);
	   height: 60px !important;
	   width: 300px !important;
   }

   @media screen and (max-width : 768px){

    article .logoImg{
      width: 40% !important;
    }

  }
  @media screen and (min-width : 551px) and (max-width : 768px){

    article .logoImg{
      transform: translate(-70%);
    }

  }

  @media screen and (max-width : 550px){

    article .logoImg{
      transform: translate(-70%);
    }

    article img:not(.logoImg) {
      margin-right: 10px;
      margin-left: 10px;
      height: 20px;
      width: 20px;
      }
      article .logoImg{
        width: 55% !important;
        height: 50px !important;
      }

  }
   
   .uno{
	   height: 30px;
	   width: 30px;
   }
   
   #btn-menu {
	   display: none;
	   cursor: pointer;
   }
   
   #btn-menu:checked ~ .menu {
	   margin: 0;
   }
   
   .imgMenu:hover{
	   cursor: pointer;
	   -webkit-transform: scale(1.3);
		-ms-transform: scale(1.3);
		transform: scale(1.3);
   }

   .menu {
	   position: fixed;
	   background: white;
	   margin-left: -70%;
	   transition: all 0.5s;
	   z-index: 1000 !important;
   }
   
   .menu ul {
	   margin: 0;
	   list-style: none;
	   padding: 0;
	   display: flex;
	   flex-direction: column;
   }
   
   .menu li {
	   border-right: 0.5px solid var(--gris-color-rgb);
	   border-top: 0.5px solid var(--gris-color-rgb);
	   border-bottom:  0.5px solid var(--gris-color-rgb);
   }
   
   .menu li:hover {
	   background: var(--red-color-rgb);
	   -webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
   }
   
   .menu li a {
	   display: block;
	   padding: 15px 20px;
	   color: var(--blue-color-rgb);
	   text-decoration: none;
   
   }
   
   .menu li a:hover {
     color: white;
   }


   .menu li ul{
    display:none;
    position:absolute;
    top:0px;
    left:150px;

    background: white;
    border-left:  10px solid var(--blue-color-rgb);
    width: 150px;
}
        
.menu li:hover ul{display:block;}
        
        

/*------------- barra de navegacion ------------*/
   
.description{
	position: fixed;
	background: #03243F;
	margin-top: 50px;
	height: 45px;
	width: 100vw;
	padding: 10px; 
  z-index: 999;
  top: 0;
}
.name{
	color:#ffff;
	margin-left: 1em;
}

/*---------------- animacion flecha ---------------*/

.btn-arrow{
	margin-top: 15px;
	height: 5vh;
	width: 5vw;

	-webkit-animation-duration: 2s;
	 animation-duration: 2s;
	 -webkit-animation-fill-mode: both;
	 animation-fill-mode: both;
	 animation: infinite flash 2s;
}

   @-webkit-keyframes flash {
	0%, 50%, 100% {
	opacity: 1;
	}
   25%, 75% {
	opacity: 0;
	}
   }
   @keyframes flash {
	0%, 50%, 100% {
	opacity: 1;
	}
   25%, 75% {
	opacity: 0;
	}
   }
   .flash {
	-webkit-animation-name: flash;
	animation-name: flash;
   }

   /*---------------- Botones ---------------*/

   

.btn-gray{
    /*background:#A7A9AC ;
    color:#ffff;
    width: 150px;
    border: none;
    text-transform: uppercase;
    margin-bottom: 15px;
    cursor: pointer;*/

    cursor: pointer;
    margin-bottom: 15px;
    width: 150px;
    color: #fff !important;
  font-weight: 500;
  background: #A7A9AC;
  position: relative;
  border: 2px solid #A7A9AC;
  outline: 1px solid;
  outline-color: #A7A9AC;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-gray:hover{
    box-shadow: inset 0 0 20px #A7A9AC , 0 0 20px #A7A9AC ;
  outline-color: rgba(167, 169, 172,0) ;
  outline-offset: 80px;
  text-shadow: 1px 1px 6px #fff;
}




  /*-----------Loading--------*/

  .loader {
    border: 16px solid rgba(224,0,32, 0.885);
    border-radius: 50%;
    border-top: 16px solid #03243F;
    border-bottom: 16px solid #03243F;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    position: fixed;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* --------- 768px --------*/

  @media screen and (max-width: 768px){
    .blue-button{
      font-size: 13px;
    }
    
	   
	   .titulo{
		   font-size: 18px;
	   }
	   .detalle{
		   font-size: 13px;
	   }
	   .btn-down{
		   margin-top: 10px;
     }
     .btn-arrow{
      margin-top: 15px;
      width: auto;
    }
   } 

   @media screen and (max-width : 1919px){

	
	#Filosofia{
		margin-top: 80px;
	}    
}

@media screen and (max-width : 992px){

    #textoImagen{
        font-size: 10px;
        }
    #tituloImagen{
        font-size: 14px;
        }

}

#logout_b {
    margin-left: 10px;
}

.clickable:hover{
  cursor: pointer
}