/*******************************************************************************
UNIVERSIDAD SURCOLOMBIANA
CTICD
César Fernández
webmaster
2020
******************************************************************************** */


/*********************************************************************************/
/*********************************************************************************/

.fondo_vino{
	color: #DFD6A0;
	background-color: #8F141B !important;
}

.fondo_ocre{
	background-color: #DFD4A6 !important;
}

.fondo_gris{
	background-color: #EDEFF0 !important;
}

.fondo_gris2{
	background-color: #A6B1B6 !important;
}


[class^=borde_]{
	padding: 10px;
}

.borde_ocre{
	border: 1px solid #DFD4A6 !important;
}
.borde_gris{
	border: 1px solid #DBE0E2 !important;
}
.borde_vino{
	border: 1px solid #8F141B !important;
}

.txt_blanco{
	color: #FFF;
}

.txt_vino{
	color: #8F141B;
}

.txt_oscuro{
	color: #1E262B;
}

/*********************************************************************************/
/*********************************************************************************/

.grillaflex{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 5px;
	margin-bottom: 20px;
}

.justify-flex-start{
	justify-content: flex-start;
}

.grillaflex, .grillaflex div{
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
/*	box-sizing: content-box;*/
}

.grillaflex > div{
	float: left;
	display: flex;
	padding: 15px;
	width: 50%;
}

.grillaflex > div > div{
	width: 100%;/*85%*/
}

.grillaflex.alup > div{
	align-items: flex-start; 
}

.grillaflex.en3 > div, .en3 li{
	width: 33.333333%;
}

.grillaflex.en4 > div, .en4 li{
	width: 25%;
}

.grillaflex.en5 > div, .en5 li{
	width: 20%;
}

.grillaflex.en6 > div, .en6 li{
	width: 16.66666%;
}

.grillaflex h3{
	border-bottom: 1px solid #DBE0E2;
}

@media all and (max-width: 760px){
	.grillaflex > div{
		width: 50% !important;
	}
}
@media all and (max-width: 480px){
	.grillaflex > div{
		width: 100% !important;
	}
}

/*********************************************************************************/
/*********************************************************************************/

.col-1 {width: 8.333%;}
.col-2 {width: 16.666%;}
.col-2a {width: 20%;}
.col-3 {width: 25%;}
.col-4 {width: 33.333%;}
.col-5 {width: 41.666%;}
.col-6 {width: 50%;}
.col-7 {width: 58.333%;}
.col-8 {width: 66.666%}
.col-9 {width: 75%;}
.col-10 {width: 83.333%}
.col-11 {width: 91.666%;}
.col-12 {width: 100%}

[class^=col-]{
	display: flex;
    flex-wrap: wrap;
	height: auto;
	padding: 10px 15px;
	border: 1px solid transparent;
}

@media all and (max-width: 1100px){
	.col-1{width: 16.666%;}
	.col-10, .col-11{width: 100%;}
}
@media all and (max-width: 700px){
	.col-1, .col-2{width: 50%;}
	.col-2a{ width: 33.333%; }
}
@media all and (max-width: 500px){
	.col-4, .col-5, .col-8, .col-8{width: 50%;}
}
@media all and (max-width: 440px){
	[class^=col-]{width: 100%;}
}


.grilla_centro{
	justify-content: center;
}
.grilla_final{
	justify-content: flex-end;
}

/*********************************************************************************/
/*********************************************************************************/

.acord_btn, .acord_btn_int{
	clear: both;
	position: relative;
	display: flex;
	align-items: center;
    cursor: pointer;
}

.acord_btn{
	margin: 0 0 10px 0;
    padding: 10px;
    width: 100%;
    text-align: left;
    font-size: 120%;
    background: #EDEFF0;
    border: none;
}

.acord_btn:hover, .acord_btn.open{
	color: #8F141B;
	background: #DFD4A6;
}


.acord_btn_int{
    display: block;
    margin: 0;
    padding: 10px;
    width: 100%;
    text-align: left;
    font-size: 108%;
    background-color: #FFF;
    border: none;
    border-top: 1px solid #DBE0E2;
}

.acord_btn_int:hover, .acord_btn_int.open {
    background: #F8F8F8;
}


.acord_btn.close:after, .acord_btn.open:after,
.acord_btn_int.close:after, .acord_btn_int.open:after{
	content: "";
	display: block;
	position: absolute;
	top: 40%;
	right: 10px;
	width: 0;
	height: 0;
	transition: all 0.2s ease-out;
}
.acord_btn.close:after, .acord_btn_int.close:after{
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #4D626C;
}
.acord_btn.open:after, .acord_btn_int.open:after{
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid #4D626C;
}

/*********************************************************************************/
/*********************************************************************************/

.fullAnchoSale{
    position: relative;
    width: 100%;
    padding: 40px 0 30px 0;
}

.fullAnchoSale p{
	padding-left: 20px;
	padding-right: 20px;
}

.fullAnchoSale img{
	width: 100%;
}

/*********************************************************************************/
/*********************************************************************************/

.back_cover{
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/*********************************************************************************/
/*********************************************************************************/

.interna a.boton{
    padding: 10px 20px;
    text-decoration: none;
    color: #FFF;
    background-color: #8F141B;
}

.interna a.boton.fondo_ocre, .interna a.boton.fondo_gris, .interna a.boton.fondo_gris2{
	color: #333;
}


.interna a.boton:hover{
    color: #FFF;
    background-color: #1E262B !important;
}



.imgsvg{
	width: 100px;
	height: auto;
	max-width: 100%;
}

/*********************************************************************************/
/*********************************************************************************/

.interna h2.decora1, .interna h2.decora2{
	clear: both;
	position: relative;
	margin: 50px 0;
	text-align: center;
}
.interna h2.decora1 span, .interna h2.decora2 span{
	position: relative;
	z-index: 2;
}
.interna h2.decora1 span {
	padding: 15px;
	background-color: #FFF;
}
.interna h2.decora2 span {
	padding: 8px 15px;
	color: #FFF;
	background-color: #8F141B;
}
.interna h2.decora1::after, .interna h2.decora2::after{
	content: '';
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 1px;
	top: 50%;
	left: 0;
	background-color: #8F141B;
}

.interna h2.decora3{
	position: relative;
	display: inline-block;
}
.interna h2.decora3::after, .interna h2.decora3::before{
	content: "";
	position: absolute;
	bottom: 50%;
	margin: 0 10px;
	width: 40px;
	border-bottom: 1px solid #8F141B;
}
.interna h2.decora3::before{
	left: -60px;
}
.interna h2.decora3::after{
	right: -60px;
}

/*********************************************************************************/
/*********************************************************************************/

.imgsvg path{fill: #8F141B !important;}
.imgsvg.ocre path{fill: #DFD4A6 !important;}

.contenido a .imgsvg:hover path{fill: #4D626C !important;}

.imgsvg.blanco path{fill: #FFF !important;}

.imgsvg.gris path{fill: #4D626C !important;}

.imgsvg.fondo{
	padding: 20px;
}


.cubre_svg{
	padding: 20px;
	width: 140px;
	height: 140px;
}

div > .cubre_svg{
	margin-top: 20px;
}


.acor_btn .imgsvg, .acord_btn .imgsvg, .acord_btn_int .imgsvg{
	padding-right: 10px;
	width: 50px;
}

/*********************************************************************************/
/*********************************************************************************/

.noPadding{
	padding: 0;
}

.paddingLat10{
	padding-left: 10px;
	padding-right: 10px;
}
.paddingLatL10{
	padding-left: 10px;
}
.paddingLatR10{
	padding-right: 10px;
}

.paddingSupT10{
	padding-top: 10px;
}
.paddingSupB10{
	padding-bottom: 10px;
}
.paddingSup10{
	padding-top: 10px;
	padding-bottom: 10px;
}
.padding10{
	padding: 10px;
}


.paddingLat20{
	padding-left: 20px;
	padding-right: 20px;
}
.paddingLatL20{
	padding-left: 20px;
}
.paddingLatR20{
	padding-right: 20px;
}

.paddingSupT20{
	padding-top: 20px;
}
.paddingSupB20{
	padding-bottom: 20px;
}
.paddingSup20{
	padding-top: 20px;
	padding-bottom: 20px;
}
.padding20{
	padding: 20px;
}

.marginT20{
	margin-top: 20px;
}
.marginB20{
	margin-bottom: 20px;
}
.margin20{
	margin-top: 20px;
	margin-bottom: 20px;
}
.marginT30{
	margin-top: 30px;
}
.marginB30{
	margin-bottom: 30px;
}
.margin30{
	margin-top: 30px;
	margin-bottom: 30px;
}
.marginT40{
	margin-top: 40px;
}
.marginB40{
	margin-bottom: 40px;
}
.margin40{
	margin-top: 40px;
	margin-bottom: 40px;
}


.redondo6{
	border-radius: 6px;
}
.redondo12{
	border-radius: 12px;
}
.redondo18{
	border-radius: 18px;
}

/*********************************************************************************/
/*********************************************************************************/

.separa{
	height: 20px;
}
.separa40{
	height: 40px;
}
.separa60{
	height: 60px;
}
.separa80{
	height: 80px;
}

[class^=separa]{
	clear: both;
	position: relative;
	float: left;
	width: 100%;
}