/* ============================================================================== */
/*  Demo                                                                          */
/* ============================================================================== */

div.titre {
	text-transform: none;
}

a:hover {
	text-decoration: none;
}

.CTable {
	/* padding: 6px; */
	font-weight: normal;
	color: #444444 !important;

	margin: 10px 6px 10px 6px;
	max-width: 346px;
}
.demobox {
	border: 1px solid #bbb;
	border-radius: 8px;
	-moz-border-radius: 8px;
	min-height: 210px;
	background: -webkit-linear-gradient(bottom, rgb(255,255,255) 85%, rgb(255,255,255) 100%);
}
.demobox:hover {
	border: 1px solid #bbb;
	border-radius: 8px;
	-moz-border-radius: 8px;
	box-shadow: 2px 2px 8px #BBB;
}
.demomaxoveflow {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.poweredby_container{
	height: 362px !important;
	display: block;
	position: absolute;
	top: 0px;
}
.poweredbycontent{
	position: absolute;
	left: 20px;
	bottom: -5px;
}
.demologowhite {
	display: none;
}
@media only screen and (min-width: 641px)
{
	.csscolumns {
	    margin-top: 6px;
	    margin-bottom: 5px;
	    -webkit-column-count: 3; /* Chrome, Safari, Opera */
	    -moz-column-count: 3; /* Firefox */
	    column-count: 3;
	    text-align: left;
	}
	#divprofdemoall {
		max-width: unset;
	}

	.demomaxoveflow {
	    max-width: 200px;
	}
}
@media only screen and (max-width: 840px)
{
	.csscolumns {
		-webkit-column-count: 3; /* Chrome, Safari, Opera */
	    -moz-column-count: 3; /* Firefox */
	    column-count: 3;
        text-align: left;
	}
}
@media only screen and (max-width: 640px)
{
	.csscolumns {
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
	    -moz-column-count: 2; /* Firefox */
	    column-count: 2;
        text-align: left;
	}
}
@media only screen and (max-width: 420px)
{
	.demomaxoveflow {
	    max-width: none !important;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.csscolumns {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
	    -moz-column-count: 1; /* Firefox */
	    column-count: 1;
        text-align: left;
	}
	.demomaxoveflow {
	    max-width: 220px !important;
	}
}


/* For demo pages */
.demobody {
	line-height: 130%;
	font-size: 150%;
	text-align: center;
}
.demobantext {
	max-width: 1024px;
	text-align: center;
	display: inline-block;
}
.demobanbox {
	font-size: 90%;
}
.demothumbtext {
    font-size: 0.85em;
}
img.demothumb {
    /* box-shadow: 2px 2px 8px #BBB; */
    transform: translateY(9px);
	transition: all 0.3s ease-in-out;
}
.demobackground {
    background-image: linear-gradient(to bottom, rgba(250, 250, 255, 0), rgba(250, 250, 255, 0)), url('tactic_demo_ban.jpg');
    background-size: cover;
    object-fit: contain;
    height: 362px;
    background-position-y: bottom;
	background-position-x: right;
}
.demologo {
	width: 500px;
}

@media only screen and (max-width: 767px)
{
	.CTable {
		width: 300px;
	}
    .demobody {
    	line-height: 150% !important;
        font-size: 100% !important;
    }
    .demobox {
		min-height: 170px !important;
	}
    img.demothumb {
        /* box-shadow: 1px 1px 4px #BBB; */
    }
    .demobanbox {
        font-size: 100%;
    }
    div#tr1profdemoall {
        margin-left: 0px;
        margin-right: 0px;
    }
	.demologowhite {
		display: block;
	}
	.demologo {
		width: 350px;
	}
	.demologoblack {
		display: none;
	}
}

@media only screen and (max-width: 450px)
{
	.demologo {
		width: 257px;
	}
	.demologoblack {
		display: none;
	}
	.demologowhite {
		display: block;
	}
}

.demobackgrounddiv {
    background: linear-gradient(white, #e1f1ff);
}
.demothumbtext {
	font-size: 18px;
    text-transform: capitalize;
    font-weight: 600;
    line-height: 1.4;
    padding-top: 20px;
    transition: all 0.3s ease-in-out;
}
.demobox:hover .demothumbtext {
    color:#0053ad;
}
.demobox:hover img.demothumb {
    transform: translateY(1px) !important;
}