/********************************************/
/*****		Elementos responsive		*****/
/********************************************/

.bread-crumb.main-header {
    display: flex;
}

.vSeparator {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
}

/*----------	Variaciones segun tamanno	-----------*/

.main-header{
	margin: 1em auto;
}

/*----------	Ocultos o visibles segun tamanno	-----------*/

/* La visibiladad se ocultara en formato movil */
.header-logo-big, .big.breadcrumb {
	display: none;
}
/* La visibiladad se mostrara en formato movil */
.header-logo-sml {
	display: flex;
}

.header-logo-sml img {
	max-height: 35px;
}

.sml.breadcrumb {
	display: block;
}

.breadcrumb {
	width: 100%;
}

.onlyMobile {
	display: table-cell;
}

.onlyDesktop {
	display: none;
}


/*----------	Disp. Flex o Block segun tamanno	-----------*/
.row {
	display: block;
	position: relative;
}
.col {
	width: 100%;
	margin: 5px;
}

.row.mobile {
	display: flex;
}

.justifyEnd {
	justify-content: end;
}

/*----------	Tamanno imagenes segun tipo pantalla	-----------*/
.mainImg{
	margin: auto;
    display: block;
	width: 100%;
}

/*----------	Estilos resguardo de citas	-----------*/
#cntDatosResguardo{		
	width: 100%;
	margin: auto;
}

@media (max-height: 720px) {
	.modal-body {
		height: 40%;
		max-height: fit-content;
	}
	
	.modal-title {
	    margin-top: 2vh;
	}
}

@media (min-width: 760px) {
/*----------	General content		----------*/
	 header {
        width: calc(100% - 2em);
	 }
	 
	.container {
	    max-width: 720px;
	}
	
/*----------	Header	----------*/
	
	.bread-crumb.main-header {
		margin: 0 1em;
	}
	.bread-crumb .logo{
		margin-top: 1em;
		margin-right: .5em;
	}
	
/*----------	Buttons	----------*/
	
	.button {
		width: fit-content;
	}

/*----------	Disp. Flex o Block segun tamanno	-----------*/
	.row {
		display: flex;
	}
	.col {
		width: auto;
		margin-bottom: 0;
		margin-right: 1em;
	}

	.row.desktop {
		display: block;
	}

	.row.desktop .col{
		width: fit-content;
		margin: auto
	}
	
	.hSeparator {
	    padding-right: 10px;
	    margin-right: 10px !important;
	    border-right: 1px solid #ccc;
	}

/*----------	Ocultos o visibles segun tamanno	-----------*/

	/* La visibiladad se mostrara en formato escritorio */
	.header-logo-big {
		display: flex;
	}
	/* La visibiladad se ocultara en formato escritorio */
	.header-logo-sml, .sml.breadcrumb {
		display: none;
	}
	
	.big.breadcrumb {
		display: block;
	}

	.onlyMobile {
		display: none;
	}
	
	.onlyDesktop {
		display: table-cell;
	}
	
/*----------	Tamanno imagenes segun tipo pantalla	-----------*/
	.mainImg{
		width: 70%;
	}
	
/*----------	Estilos resguardo de citas	-----------*/

	#cntDatosResguardo{		
		width: 60%;
	}
}

@media (min-width: 1280px) {
/*----------	General content		----------*/
	.big.breadcrumb {
		width: 70%;
	}
}


@media (min-width: 760px) {
    .bread-crumb.main-header {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(max-content, auto) minmax(180px, 1fr);
        align-items: center;
    }

    .bread-crumb .logo {
        grid-column: 1;
    }

    .big.breadcrumb {
        grid-column: 2;
        justify-self: center;
        margin: 0;
        padding: 1em 2em;
        background-color: var(--main-bg-color-cal);
        border-radius: 0 0 100px 100px;
        min-width: 60vw;
        max-width: 900px;
    }
}

/*----------	Adaptacion para tablets	----------*/
@media (min-width: 768px) and (max-width: 1040px) {
	.header-logo-big {
		width: 100%;
	}
	
	.header-img {
		width: inherit;
	}
}