/* --------- Fichero Horizontal Styles --------- */
.fichero-horizontal {
	width:100%;
	margin:3.5% auto;
}
.fichero-horizontal p {
	margin-bottom:0;
}
.fich-tit {
	color:#4d4d4d;
	font-weight:bold;
	margin:5px 0 20px 0;
	font-size: 1.5rem;
}
.fichero-horizontal .nav-tabs {
	border-bottom:none;
}
.fichero-horizontal .nav-tabs li {
	margin:0;
	text-align:center;
	margin-right:3px;
	font-size:.875rem;
}
.fichero-horizontal .nav-tabs li a {
	color:#ccc;
	padding:15px 25px;
	border:none;
	position:relative;
	background:#999;
	font-weight:normal;
}
.fichero-horizontal .nav-tabs li a:hover {
	color:#fff;
	background:#ccc;
}
.fichero-horizontal .nav-tabs li.active a,.fichero-horizontal .nav-tabs li.active a:hover {
	border:none;
	color:#fff;
	background:#666666;
}
.fichero-horizontal .nav-tabs li.active a:after {
	content:"";
	border-top:10px solid #666666;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	position:absolute;
	bottom:-10px;
	left:43%;
}
.fichero-horizontal .tab-content {
	border:1px solid #ccc;
	margin-top:-1px;
	padding:2.5%;
	border-radius:0 10px 15px 15px;
}
.fichero-horizontal .tab-content p{
	margin: 0 auto 16px auto;
}
.fichero-horizontal .tab-content img{
	margin-top: 0;
    margin-bottom: 1%;
}
.fichero-horizontal .tab-content>.active {
	background:#fff;
	border-radius:10px;
	padding:5%;
	transition:2s;
    border:1px solid #ccc;
}
.nav-tabs>li>a {
	border-radius:5px 10px 0 0;
}
@media only screen and (max-width:480px) {
	.fichero-horizontal .nav-tabs li {
		width:100%;
		text-align:center;
		margin:1% auto 2% auto;
	}
	.fichero-horizontal .nav-tabs li.active a,.fichero-horizontal .nav-tabs li.active a:after,.fichero-horizontal .nav-tabs li.active a:hover {
		border: none;
	}
}
/* --------- Fichero Vertical ---------*/
.fichero-vertical {
	width:100%;
	margin:3.5% auto;
}
.tab {
	float:left;
	width:20%;
	min-height:300px;
	margin-right:2.5%;
}
.tab button {
	display:block;
	background:#ccc;
	color:#666;
	padding:10%;
	width:100%;
	border:none;
	outline:none;
	text-align:left;
	cursor:pointer;
	transition:0.3s;
	margin:0 0 6% 0;
	border-radius:10px 5px 12px 5px;
	font-weight:normal;
}
.tab button:hover {
	background:#999;
	color:#fff;
}
.tab button.active {
	background:#4d4d4d;
	color:#fff;
}
.tabcontent {
	float:left;
	padding:3%;
	border:1px solid #ccc;
	width:72.5%;
	min-height:300px;
	border-radius:10px 20px 10px 20px;
	background:#fff;
}
.tabcontent p {
	transition:2s;
}
.tabcontent img {
	margin-top: 0;
}
@media (max-width:767px) {
    .tab button {
        border-radius:5px 2px 10px 2px;
    }
}
@media (max-width:480px) {
	.tab {
		width:100%;
		text-align:center;
		margin:0;
	}
    .tab button {
        width: 100%;
        margin-bottom: 3%;
        padding: 5%;
    }
	.tabcontent {
		float:left;
		padding:5%;
		border:1px solid #ccc;
		width:100%;
		min-height:300px;
		border-radius: 5px 20px 5px 20px;
        margin-top: -35%;
	}
}

/* --------- Flip Card --------- */
.fcard-tit {
	color:#fff;
	font-weight:normal;
	font-size:1.25rem;
	text-align:center;
	height:17.5%;
	background:#9d2449;
	border-radius:10px 25px 0 0;
	display:grid;
	align-items:center;
}
.fcard-txt {
	height:100%; /*Originalmente decía 82.5%, pero al quitar el título del html, lo debo de poner al 100%*/
	padding:7.5%;
	font-size:1rem;
	background:#f2e7eb;
	width:100%;
	border-radius:0 0 5px 15px;
    display: grid;
    align-items: center;
}
.fcard-txt p {
	text-align:center!important;
}
.flip-card {
	background:transparent;
	width:100%;
	height:320px;
	perspective:1000px;
	margin:5% auto;
}
.flip-card-inner {
	position:relative;
	width:100%;
	height:100%;
	text-align:center;
	transition:transform 0.8s;
	transform-style:preserve-3d;
}
.flip-card:hover .flip-card-inner {
	transform:rotateY(180deg);
	cursor: pointer;
}
.flip-card-front,.flip-card-back {
	position:absolute;
	width:100%;
	height:100%;
	-webkit-backface-visibility:hidden;
	/* Safari */
	backface-visibility:hidden;
	border-radius:25px 10px;
}
.flip-card-front {
	display:grid;
	align-items:center;
	background:#7f2141;
	color:#f2f2f2;
	text-align:center;
	font-size:4rem !important;
	font-weight:bold;
}
.flip-card-front p {
	margin-top:5%;
}
.flip-card-front img {
	height:auto;
	width:100%;
}
.flip-card-back {
	color:#4d4d4d;
	transform:rotateY(180deg);
}
#c1 {
	background-image:url(../img/img_005.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}
#c2 {
	background-image:url(../img/img_001.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}
#c3 {
	background-image:url(../img/img_004.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position: center;
}
@media (max-width:1023px) {
    .flip-card {
        width:75%;
        margin:3% auto;
    }
}
@media (max-width:666px) {
    .flip-card {
        width:100%;
        margin:5% auto;
    }
    .fcard-tit {
        border-radius:5px 15px 0 0;
    }
    .flip-card-front, .flip-card-back {
        border-radius: 15px 5px;
    }
}

/* --------- Slideshow --------- */
.slideshow-container {
	max-width:90%;
	position:relative;
	margin:5%;
}
.mySlides {
	display:none;
}
.mySlides img {
	width:100%;
	margin:0 auto;
	border-radius:25px 10px 35px 15px;
}
.prev,.next {
	cursor:pointer;
	position:absolute;
	top:50%;
	width:50px;
	height:50px;
	margin:-25px 15px 0px auto;
	padding:0;
	color:#fff;
	font-weight:bold;
	font-size:2rem;
	transition:0.6s ease;
	border-radius:25px;
	user-select:none;
	border:none;
	background:#d8d8d8;
}
.next {
	right:0;
	border-radius:25px;
}
.prev:hover,.next:hover {
	background:#999;
}
.text {
	color:#f2f2f2;
	font-size:15px;
	padding:8px 12px;
	position:absolute;
	bottom:8px;
	width:100%;
	text-align:center;
}
.numbertext {
	color:#f2f2f2;
	font-size:12px;
	padding:8px 12px;
	position:absolute;
	top:0;
}
@media (max-width:767px) {
    .mySlides img {
        border-radius:15px 2.5px 20px 5px;
    }
}
@media (max-width:666px) {
    .mySlides img {
        border-radius:15px 2.5px 20px 5px;
    }
    .prev,.next {
        width:35px;
        height:35px;
        font-size:1.5rem;
    }
}

/*----- Acordion -----*/
.accordion-container {
	position:relative;
	width:100%;
	outline:0;
	cursor:pointer;
}
.accordion-container .accordion-title {
	display:grid;
    align-items: center;
	position:relative;
	background:#ccc;
	padding:2.5%;
	font-size:1.25em;
	font-weight:normal;
	color:#4d4d4d;
	cursor:pointer;
	margin:1% auto;
	border-radius:5px 2px 15px 2px;
	border-left:15px solid #4d4d4d;
    min-height: 60px;
}
.accordion-container .accordion-title:hover,.accordion-container .accordion-title:active,.accordion-container .content-entry.open .accordion-title {
	background-color:#666;
	color:#fff;
	display:grid;
    align-items: center;
}
.accordion-container .accordion-title:hover i:before,.accordion-container .accordion-title:hover i:active,.accordion-container .content-entry.open i {
	color:#fff;
}
.accordion-container .content-entry i {
	position:absolute;
	top:3px;
	left:12px;
	font-style:normal;
	font-size:1rem;
	sans-serif;
	color:#666;
}
.accordion-content {
	display:none;
	padding:5% 3% 3% 3%;
	border:1px solid #ccc;
	border-top:none;
	margin-top:-3%;
	border-radius:0 0 15px 15px;
}
.accordion-content img{
	margin: 0;
}
@media (max-width:666px) {
    .accordion-container .accordion-title {
        margin: 3% auto;
        font-size: 1.125rem;
    }
}
@media (max-width:767px) {
    .accordion-container .accordion-title {
        font-size: 1.125rem;
    }
}
/*----- Ventana Modal -----*/
.modal {
	display:none;
	position:fixed;
	z-index:1100;
	padding-top:80px;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgba(0,0,0,0.8);
	/* Black w/ opacity */
}
.modal-content {
	position:relative;
	background-color:#fff;
	margin:7.5% auto;
	padding:0;
	border:none;
	width:70%;
    min-height: 360px;
	box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.2);
	-webkit-animation-name:animatetop;
	-webkit-animation-duration:0.4s;
	animation-name:animatetop;
	animation-duration:1s;
	border-radius:25px 20px 25px 15px;
}
@-webkit-keyframes animatetop {
	from {
		top:-300px;
		opacity:0
	}
	to {
		top:0;
		opacity:1
	}
}
@keyframes animatetop {
	from {
		top:-300px;
		opacity:0
	}
	to {
		top:0;
		opacity:1
	}
}
.modal-title {
	display:inline-block;
	margin:0 1% 0 0;
	max-width:95%;
}
.close {
	height:35px;
	width:35px;
	color:white;
	float:right;
	font-size:34px;
	font-weight:bold;
	opacity:1;
	text-align:center;
	display:inline-block;
	position:static;
	margin:0 0 0 1% !important;
	float:right;
}
.close:hover,.close:focus,.close:active {
	text-decoration:none;
	cursor:pointer;
	text-shadow:none;
	transform:scale(1.1);
	opacity:1;
	color:#999;
	font-size:36px;
}
.modal-header {
	padding:2% 2% 2% 4%;
	background-color:#424242;
	color:#fff;
	font-size:1.5rem;
	font-weight:normal;
	border:none;
	border-radius:20px 10px 0 0;
}
.modal-body {
	padding:4%;
}
.modal-footer {
	padding:4%;
	background-color:#424242;
	color:#fff;
	border:none;
	border-radius:0 0 20px 10px;
}
.modal-button {
	background:#4d4d4d;
	color:#fff;
	border:none;
	margin:7% auto;
	border-radius:12px;
	max-width:250px;
	width:70%;
	text-align:center;
	font-size:1rem;
	height:60px;
}
.modal-button:hover {
	background:#323232;
	cursor:pointer;
	transform:scale(1.06);
}
.from-top {
	-webkit-animation-name:animatetop;
	-webkit-animation-duration:2s;
	animation-name: animatetop;
}
@media (max-width:1280px) {
    .modal-content {
        width: 80%;
        margin: 5% auto;
    }
    .modal-header {
        padding: 2% 2% 2% 3%;
    }
}
@media (max-width:767px) {    
    .modal-content {
        margin: -6% auto;
    }
    .modal-header {
        padding: 3% 2% 3% 5%;
        font-size: 1.25rem;
    }
    .modal-body {
        padding: 3.5% 5%;
    }
    .close {
        margin:-1% 0 0 1% !important;
    }
    .modal-button {
        margin: 10% auto;
    }
}
@media (max-width:666px) {    
    .modal-header {
        padding: 7% 2% 5% 7%;
        font-size: 1.25rem;
    }
    .modal-body {
        padding: 5% 10%;
    }
    .modal {
        padding-top: 10%;
    }
    .close {
        margin:-2% 0 0 1% !important;
    }
    .modal-button {
        margin: 20% auto;
    }
}


/* ----- TIMELINE ----- */
.timeline {
	position:relative;
	max-width:1200px;
	margin:5% auto;
	background:none;
	padding:5% 0;
	border-radius:25px 10px;
    border: 1px solid #ccc;
}
.timeline::after {
	content:'';
	position:absolute;
	width:6px;
	background-color:#ccc;
	top:0;
	bottom:0;
	left:50%;
	margin-left:-3px;
}
.container-time {
	padding:10px 40px;
	position:relative;
	width:50%;
}
.container-time::after {
	content:'';
	position:absolute;
	width:25px;
	height:25px;
	right:-17px;
	background-color:#f2f2f2;
	border:4px solid #999;
	top:37px;
	border-radius:50%;
	z-index:1;
	box-shadow:0px 10px 8px -5px rgba(0,0,0,0.5);
}
.container-time p{
    margin: 16px 0 0 0;
}
.content-time {
	padding:5% 10%;
	background-color:#ccc;
	position:relative;
	border-radius:20px 10px;
}
.left-time {
	left:-0.5%;
}
.right-time {
	left:50.4%;
}
.left-time::before {
	content:" ";
	height:0;
	position:absolute;
	top:40px;
	width:0;
	z-index:1000;
	right:30px;
	border:medium solid;
	border-width:10px 0 10px 10px;
	border-color:transparent transparent transparent #ccc;
}
.right-time::before {
	content:" ";
	height:0;
	position:absolute;
	top:40px;
	width:0;-time
	z-index:1100;
	left:30px;
	border:medium solid;
	border-width:10px 10px 10px 0;
	border-color:transparent #ccc transparent transparent;
}
.right-time::after {
	left:-16px;
}

@media (max-width: 1024px) { 
    .content-time {
        padding:5% 12.5%;
        background-color:#ccc;
        position:relative;
        border-radius:12px 3.5px;
    }
    .headings-int {
        border-radius: 10px 2px !important;
    }
}
    
/* -----GALERIA DE CONCEPTOS -----*/
.carousel {
	position:relative;
}
.carousel-inner {
	position:relative;
	width:100%;
	overflow:hidden;
}
.carousel-inner img{
    margin: 0;
}
.carousel-inner>.item>img,.carousel-inner>.item>a>img {
	line-height:1;
}
@media all and (transform-3d),(-webkit-transform-3d) {
	.carousel-inner>.item {
		transition:transform .75s ease-in-out;
		backface-visibility:hidden;
	}
}
.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev {
	display:block;
}
.carousel-inner>.active {
	left:0;
}
.carousel-inner>.next,.carousel-inner>.prev {
	position:absolute;
	top:5.5%;
	width:100%;
	background:none;
	border:none;
}
.headings-int{
    color: #fff;
    font-weight: bold;
    margin-bottom: 30px;
    background: #666;
    padding: 2% 5%;
    margin: -1px auto;
    border-radius: 15px 2px;
    border: none;
    display: grid;
    align-items: center;
    font-size: 1.5rem;
}
.slide-s {
	padding:5% 10%;
	width:95%;
	margin:5% auto;
	border-radius:25px 10px;
	border:1px solid #ccc;
    background: #fff;
    min-height: 360px;
}
#idTextPanel{
    padding: 5% 2.5%;
}
.prev-slide,.next-slide {
	cursor:pointer;
	position:absolute;
	top:50%;
	width:50px;
	height:50px;
	margin:-25px 15px 0px auto;
	padding:0;
	color:#fff;
	font-weight:bold;
	font-size:2rem;
	transition:0.6s ease;
	border-radius:25px;
	user-select:none;
	border:none;
	background:#d8d8d8;
}
.next-slide {
	right:-15px;
	border-radius:25px;
}
.prev-slide:hover,.next-slide:hover {
	background: #999;
}
@media screen and (max-width:666px) {
	.timeline::after {
		left:31px;
	}
	.container-time {
		width:100%;
		padding-left:70px;
		padding-right:25px;
	}
	.container-time::before {
		left:60px;
		border:medium solid white;
		border-width:10px 10px 10px 0;
		border-color:transparent #ccc transparent transparent;
	}
	.left-time::after,.right-time::after {
		left:15px;
	}
	.right-time {
		left:0%;
	}
    .headings-int{
        font-size: 1.25rem;
        padding: 5%;
        border-radius: 10px 2px;
    }
    .prev-slide,.next-slide {
        width:35px;
        height:35px;
        font-size:1.5rem;
    }
}

/* ----- SIDE BAR ----- */
.sidebar {
	height:100%;
	width:0;
	position:fixed;
	z-index:2000;
	top:0;
	left:0;
	background-color: rgba(0,0,0,0.9);
	overflow-x:hidden;
	transition:0.5s;
	padding-top:60px;
}
.sidebar a {
	padding:4% 1% 4% 8%;
	text-decoration:none;
	font-size:1.125rem;
	color:#999;
	display:block;
	transition:0.3s;
}
.sidebar a:hover {
	color:#fff;
    transform:scale(1.1);
}
.sidebar .closebtn {
	position:absolute;
	top:0;
	right:25px;
	font-size:36px;
	margin-left:50px;
}
.sidebar .closebtn:hover{
    transform: none;
}
.openbtn_icon {
	font-size:1.5rem;
}
.openbtn {
	font-size:1rem;
    font-weight: lighter;
	cursor:pointer;
	background:transparent;
	color:#fff;
	border:none;
    padding: 0;
    margin: -5px 0 0 0;
}
.openbtn:hover {
	color:#323232;
}
#main {
	transition:margin-left .5s;
}
/* On smaller screens,where height is less than 450px,change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height:450px) {
	.sidebar {
		padding-top:15px;
	}
	.sidebar a {
		font-size: 18px;
	}
}