@charset "utf-8";
/* CSS Document */
::-webkit-scrollbar{
    width: 8px;
    background-color: #f3f3f3;
}
::-webkit-scrollbar-track{
    box-shadow: inset 0 0 6px rgba(0,0,0,0);
    background-color: #CCCCCC;
}
::-webkit-scrollbar-thumb{
    border-radius: 5px;
    background-color: rgb(0, 0, 0, .3);
}
.Load{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: #3147e3;
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .7s ease-in-out;
}
.cargador{
	height: 95px;
	display: flex;
	align-items: center;
}
.linea{
	width: 6px;
	height: 95px;
	background: #FFFFFF;
	margin:  0 3px;
	border-radius: 4px;
	animation: loader .8s infinite;
}
.linea:nth-child(2){
	animation-delay: .1s;
}
.linea:nth-child(3){
	animation-delay: .2s;
}
.linea:nth-child(4){
	animation-delay: .3s;
}
.linea:nth-child(5){
	animation-delay: .4s;
}
.linea:nth-child(6){
	animation-delay: .5s;
}
.linea:nth-child(7){
	animation-delay: .6s;
}
.linea:nth-child(8){
	animation-delay: .7s;
}
@keyframes loader {
	0%{
		height: 0px;
	}
	50%{
		height: 95px;
	}
	100%{
		height: 0px;
	}
}

body{
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	margin: 0px;
}

header#Superior {
	z-index: 100000;
	background:#3147e3;
	padding: .5rem 0;
	position:fixed;
	float: left;
	top: 0;
	left: 0;
	width:100%;
    overflow:hidden;
	box-sizing: border-box;
	border-radius: 0 0 15px 15px;
}
.header_fix a{
	color: #FFFFFF;
	text-decoration: none;
}
.maincontainer{
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}
.logo-nava-container{
	justify-content: space-between;
}
#Title{
	width: 100%;
	float: left;
	text-align: center;
}
.Titlenotsee{
	display: none;
}
#esc_left, #esc_right{
	width: 15%;
    float: left;
	&img{
		width: 48%;
		height: auto;
	}
}
#nametitle {
	width: 70%;
	float: left;
	color: #fff;
}
.cont-father{
	display: table;
	height: 100px;
	width: 100%;
}
.cont-father p{
	display: table-cell;
	font-size: 25px;
	font-weight: bold;
	vertical-align: middle;
}
.navigation ul{
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.navigation ul li{
	display: inline-block;
}
.navigation ul li a{
	display: block;
	padding: 0.5rem 1rem;
	transition: all 0.4s linear;
	border-radius: 5px;
}
.navigation ul li a:hover{
	background: #ccc;
}
#Title_2, .logo, .hamburger,.mobile_nav{
	display: none;
}
div#main {
	position: relative;
	top: 160px;
    width: 100%;
	padding: 50px 0;
	z-index: 999;
}
div#footer{
	position: relative;
	display: block;
	margin-top: 30px;
	top: 130px;
	right: 0;
	bottom: 0;
    width: 100%; 
	height: 100px;
	background: #1c1c1c;
	text-align: center;
	box-sizing: border-box;
	border-radius: 15px 15px 0 0;
	z-index: 1000;
}
div#footer div{
	width: 80%;
	height: 80px;
	margin: auto;
	box-sizing: border-box;
	color:#FFF;
	display: table;
	>p{
		display: table-cell;
		vertical-align: middle;
		font-size: .6rem;
	}
}

.lista{
	font-size: 14px;
	padding-left: 20px;
	> li{
		position: relative;
		display: table;
		background: #cccccc;
		padding: 8px 8px 8px 15px;
    	margin: 7px;
		border-radius: 5px;
	}
	>li::before{
		position: absolute;
		display: block;
		content: " ";
		left: -25px;
		margin-top: -10px;
		width: 32px;
		height: 32px;
		outline: 3px solid #ffffff;
		border-radius: 100%;
		background: #3147e3;
	}
}

.listaCronologica{
    width: 80%;
    margin: 0 auto;
    display: grid;
    color: #ffffff;
    grid-template-columns: repeat(auto-fit, 50px) ;
    justify-content: center;
	column-gap: 30px;
    row-gap: 20px;

    >.elemCrono{
		display: grid;
		position: relative;
		justify-self: center;
		place-content: center;
		margin: 10px 0;
		width: 100%;
        height: 140px;
        cursor: pointer;
        background: #3147e3;
        transition: all 500ms linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
        >img{
            display: none;
        }
        >.textList{
            font-size: 15px;
            font-weight: bold;
            text-align: center;
            writing-mode: vertical-rl;
            transform: rotate(-180deg);
        }
    }
	.elemCrono::before, .elemCrono::after{
		border-bottom: 70px solid transparent;
		border-top: 70px solid transparent;
		position: absolute;
		content: " ";
		transition: all 1ms linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
	}

	.elemCrono::after{
		border-left: 15px solid #3147e3;
		right: -14px;
	}

	.elemCrono::before{
		border-left: 15px solid transparent;
		border-bottom-color: #3147e3;
		border-top-color: #3147e3;
		left: -14px;
	}

    .elemCrono:hover{
		z-index: 10;
		margin: 0;
        width: 130px;
		height: 160px;
        box-shadow: 0 0 40px 15px rgba(75, 75, 75, 0.7);
        >.textList{
            padding-top: 8px;
            writing-mode: horizontal-tb;
            transform: rotate(0deg);
        }
    	>img{
            display: block;
			margin: 5% auto;
			width: 55%;
			background: #ffffff;
        }
		&::before, &::after{
			border-bottom-width: 80px;
			border-top-width: 80px;
		}
    }
}

.imagenprueba{
	display: block;
    padding: 0;
    border: 0;
    width: auto;
    height: 90vh;
    outline: 1px solid #000;
	background: #060606b7;
    >img{
        display: block;
        margin: 0 auto;
        outline: 1px solid #000;
        width: auto;
        height: 100%;
    }
}

@media only screen and (max-width: 1260px){
	#Title, .container-menu{
		display: none;
	}
	#Title_2{
		display: block;
	}
	.hamburger{
		position: relative;
		display: block;
		width: 48px;
		padding-right: 15px;
		cursor:pointer;
		appearance: none;
		background: none;
		outline: none;
		border: none;
		z-index: 10000;
	}
	.hamburger .bar, .hamburger::after, .hamburger::before{
		content: '';
		display: block;
		width: 100%;
		height: 4px;
		background-color: #FFF;
		margin: 5px 0px;
		transition: 400ms;
	}

	.hamburger.is-active:before{
		transform: rotate(-45deg) translate(-9px,6px);
	}
	.hamburger.is-active:after{
		transform: rotate(45deg) translate(-7px,-3px);
	}
	.hamburger.is-active .bar{
		opacity: 0;
	}

	.container-menu{
		position: fixed;
		display: block;
		top: 0;
		right: -100%;
		background: rgba(0,0,0,0.5);
		width: 100%;
		height: 100vh;
		z-index: 9999;
		transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
		&.is-active{
			right: 0;
		}
	}

	.navigation{
		position: fixed;
		display: block;
		top: 0;
		right: -100%;
		background-color: #1f1f1f;
		width: 50%;
		height: 100vh;
		overflow-y: auto;
		font-weight: bold;
		transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
		> ul{
			padding: 90px 0;
		}
		> ul > li{
			position: relative;
			display: block;
			margin-bottom: 10px;
			> a{
				display: block;
				width:70%;
				text-decoration: none;
				padding: 12px 0 12px 5px;
				color: #FFFFFF;
				border-left: 5px solid transparent;
			}
			> a :hover{
				border-left: 5px solid #c7c7c7;
				background: #1f1f1f;
			}
		}
		&.is-active{
			right: 0;
		}
		&::-webkit-scrollbar {display: none;}
	}
	
	.logo-nava-container{
		display:flex;
		height: 70px;
	}
	.cont-son{
		display: table;
		height: 70px;
		box-sizing: border-box;
		width: 100%;
		color: #FFFFFF;
	}
	.cont-son p{
		display: table-cell;
		vertical-align: middle;
	}
	#esc_left, div .cont-father, #esc_right{
		display: none;
	}
	.logo{
		font-size: 20px;
		font-weight: bold;
		text-align: left;
		letter-spacing: .8px;
		padding-left: 2rem;
	}
	div#main{
		top: 80px;
	}
}