/* -----------------------------------------------------------------------------

    This file should be used to add your own CSS definitions or override
	the existing ones.

----------------------------------------------------------------------------- */
:lang(ar) 	{
    font-size: 101%;
    }
	#header.m-large .header-menu>ul>li>a:lang(ar){font-weight:bold}
	#header.m-standard .header-menu>ul>li>a:lang(ar){font-weight:bold}
	#header-fixed .header-menu>ul>li>a:lang(ar){font-weight:bold}
	.hcntube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.hcnvid {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.hcnbrand {
    position: relative;
    display: inline-block;
	margin-right:5px;
	margin-bottom: 24px;
}
.hcnbrand a { text-decoration:none;border: 0; } 

/* Tooltip text */
.hcnbrand .hcnbrandtext {
    visibility: hidden;
	width: 220px;
    bottom: 80%;
    right: 25%; 
    margin-right: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
	opacity: 0;
    transition: opacity 1s;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.hcnbrand:hover .hcnbrandtext {
    visibility: visible;
	opacity: 1;
}
.hcnbrand .hcnbrandtext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    right: 50%;
    margin-right: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
.sj_shf,.sj_shf a{font-size:90%;margin:5px;vertical-align:top;background:#4c69ba;background:-webkit-gradient(linear,center top,center bottom,from(#4c69ba),to(#3b55a0));background:-webkit-linear-gradient(#4c69ba,#3b55a0);border:none;-webkit-border-radius:2px;color:#fff;cursor:pointer;font-weight:bold;height:20px;line-height:20px;padding:0;text-shadow:0 -1px 0 #354c8c;white-space:nowrap}
.sj_shf a:hover{color:#FFF}.sj_shf a:before {content: "\f082";font-family: FontAwesome;vertical-align:top;height:20px;line-height:20px;padding:0;}

.sj_shg a:before {color:#dd4b39;content:"\f0d4";font-family: FontAwesome;font-size:120%;margin:5px;vertical-align:top;height:20px;line-height:20px;padding:0;white-space:nowrap}

.sj_sht a:before {color:#55acee;content:"\f081";font-family: FontAwesome;font-size:120%;margin:5px;vertical-align:top;height:20px;line-height:20px;padding:0;white-space:nowrap}

.sj_shw a:before {color:#34af23;content:"\f098";font-family: FontAwesome;font-size:120%;margin:5px;vertical-align:top;height:20px;line-height:20px;padding:0;white-space:nowrap}


/* -----------------------------------------------------------------------------

    RESPONSIVE DEFINITIONS

----------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
        LARGE DEVICES
		devices with width between 992px and 1199px
    ------------------------------------------------------------------------- */

    @media ( max-width: 1199px ) {

		/* your CSS here */

	}

    /* -------------------------------------------------------------------------
        MEDIUM DEVICES
		devices with width between 768px and 991px
    ------------------------------------------------------------------------- */

    @media ( max-width: 991px ) {

		/* your CSS here */

	}

	/* -------------------------------------------------------------------------
        SMALL DEVICES
		devices with width between 481px and 767px
    ------------------------------------------------------------------------- */

    @media ( max-width: 767px ) {

		/* your CSS here */

	}

	/* -------------------------------------------------------------------------
        EXTRA SMALL DEVICES
		devices with width up to 480px
    ------------------------------------------------------------------------- */

	@media ( max-width: 480px ) {

		/* your CSS here */

	}