/*******
 *
 *    THIS CSS is for dark-blue theme
 *
 *
 ***/

/* 
 * Style for elements regarding to responsive design
 * responsive design for mobile first
 */

/* 
 * Referrences for css shorthand are list below
 *
 * background properties (ordered, properties can be omitted)
 * 
 * background: background-color background-image background-repeat background-attachment background-position
*/
 body {
     color: #616161; /* #333333; */
 }


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

/* Text Color */

.text-primary, .text-primary * {
    color: #0d47a1; /* 061D95 */
}

.text-primary-light, .text-primary-light * {
    color: #4285F4;
}
.text-secondary, .text-secondary * {
    color: #1974D2;
}

.text-primary-grey, .text-primary-grey * {
    color:#424242;
}

.text-secondary-grey, .text-secondary-grey * {
    color: #9E9E9E;
}
.text-dark-blue, .text-dark-blue * {
    color: #000080;	/* Navy Blue */
}

.text-bright-blue, .text-bright-blue * {
    color: #7697A2;
}

.text-headline {
    color: #45526e;
}

.text-subheader-1 {
    color: #0d47a1;
}

/** Text Grey Color Shade **/

.text-grey-10 {
    color: #fafafa;
}
.text-grey-20 {
    color: #f5f5f5;
}
.text-grey-30 {
    color: #eeeeee;
}
.text-grey-40 {
    color: #e0e0e0;
}
.text-grey-50 {
    color: #bdbdbd;
}
.text-grey-60 {
    color: #9e9e9e;
}
.text-grey-70 {
    color: #757575;
}
.text-grey-80 {
    color: #616161;
}
.text-grey-90 {
    color: #424242;
}
.text-grey-100 {
    color: #212121;
}

/*** ---------------------------- Background Colors ----------------------------***/

.bg-primary {
    background-color: #0d47a1 !important;
}

.bg-secondary {
    background-color: #1974D2;
}

.bg-primary-light {
    background-color: #4285F4;
}
.bg-white {
    background-color: #FFFFFF !important;
}


.bg-dark-blue {
    background-color: #000080 !important;
}


.bg-footer {
	background-color: #F5F5F7;
}

/* Grey Background Colors */

.bg-grey-10 {
    background-color: #fafafa;
}
.bg-grey-20 {
    background-color: #f5f5f5;
}
.bg-grey-30 {
    background-color: #eeeeee;
}
.bg-grey-40 {
    background-color: #e0e0e0;
}
.bg-grey-50 {
    background-color: #bdbdbd;
}
.bg-grey-60 {
    background-color: #9e9e9e;
}
.bg-grey-70 {
    background-color: #757575;
}
.bg-grey-80 {
    background-color: #616161;
}
.bg-grey-90 {
    background-color: #424242;
}
.bg-grey-100 {
    background-color: #212121;
}

/* Border Style */

.border-primary-blue {
    border: 1px solid #3949AB;
    border-radius: 2px;
}

.border-secondary-blue {
    border: 1px solid #1974D2;
}

.border-grey {
    border: 1px solid #EEEEEE;
    border-radius: 2px;
}
.border-light-grey {
    border: 1px solid #F5F5F5;
    border-radius: 2px;
}

/* Style for logo image */
img.logo-img {
  fill: #3949AB;
}

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

    
/* Normal Link */
a {
    text-decoration: none;
    color: #616161;
   /* custom color here */
}

a:hover { /* , a:active, a:visited { */
  text-decoration: none;
  color: #1974D2;
}

p a:hover {
    color: #b71c1c;
}

a.subtitle-1, a.subtitle-2 {
    text-decoration: none;
    color: #212121;
}

a.subtitle-1:hover, a.subtitle-2:hover {
    text-decoration: none;
    color: #616161;
}

a.text-tag:link {
    border: 1px solid #e5e5e5;
    display: inline-block;
    /*float: left;*/
    font-size: 0.75rem;
    margin: 1px 2px 1px 0;
    padding: 6px 9px;
}
a.text-tag:link:hover {
    background-color:#002633;
    border: 1px solid #002633;
    color: #ffffff;
    transition: all 0.20s linear 0s;
    -o-transition: all 0.20s linear 0s;
    -ms-transition: all 0.20s linear 0s;
    -moz-transition: all 0.20s linear 0s;
    -webkit-transition: all 0.20s linear 0s;
}

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


/* Image blocks for overlay */
.image-with-hover-overlay {   /* parent block for image */
    display: block;
    position: relative; /* set relative for its children position */
}

.image-border-radius img, .image-border-radius .image-hover-overlay {
    border-radius: 3px;
}

.image-with-hover-overlay img {
    width: 100%;
}

/* Overlay element */
.image-hover-overlay {
    position: absolute; /* specified position relative to its parent */
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
    padding: 1.25rem;
    color: rgba(255,255,255, 0.75) !important;

    transition: all 0.20s linear 0s;
    -o-transition: all 0.20s linear 0s;
    -ms-transition: all 0.20s linear 0s;
    -moz-transition: all 0.20s linear 0s;
    -webkit-transition: all 0.20s linear 0s;

    transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.image-hover-overlay:hover {
    opacity: 1;
}

/* Overlay content */
.image-hover-overlay-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;       /* content will display at around center of its parent */
    
    transition: all 0.20s linear 0s;
    -o-transition: all 0.20s linear 0s;
    -ms-transition: all 0.20s linear 0s;
    -moz-transition: all 0.20s linear 0s;
    -webkit-transition: all 0.20s linear 0s;

    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.image-hover-overlay:hover > .image-hover-overlay-content {
    top: 50%;
}

/* image zoom */
.image-hover-zoom {
    display: block;
    overflow: hidden;
}
.image-hover-zoom img {
    transition: all 0.20s linear 0s;

    /* For other browser */
    -o-transition: all 0.20s linear 0s; /* opera */
    -ms-transition: all 0.20s linear 0s; /* IE */
    -moz-transition: all 0.20s linear 0s; /* Firefox */
    -webkit-transition: all 0.20s linear 0s; /* Chrome */
}

.image-hover-zoom:hover img {
    transform: scale(1.1);
}

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

/*****----- Horizontal Line Breaks -----*****/

/** Full Width Break **/
hr.break {
    border: 0;
    border-top: 1px solid #e5e5e5;
    display: block;
    margin: 40px 0;
}

hr.break:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

hr.break.break-dashed {
    border-top: 1px dashed #e5e5e5;
}

hr.break.break-dotted {
    border-top: 1px dotted #e5e5e5;
}

hr.break.break-double {
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    height: 8px;
}

hr.break.break-dashed-double {
    border-bottom: 1px dashed #e5e5e5;
    border-top: 1px dashed #e5e5e5;
    height: 8px;
}
hr.break.break-dotted-double {
border-bottom: 1px dotted #e5e5e5;
border-top: 1px dotted #e5e5e5;
height: 8px;
}

/** Small Break **/

hr.break-small {
    background: #000066; /* #e5e5e5; */
    border: 0;
    display: block;
    height: 2px;
    margin: 20px 0 35px;
    width: 60px;
}
hr.break-small.break-center {
margin: 20px auto 35px;
}
hr.break-small.break-double {
height: 0; 
margin-bottom: 39px;
}
hr.break-small.break-double:before {
background: #e5e5e5;
border: 0 none;
content: "";
display: block;
height: 2px;
margin: 5px 0 0;
width: 60px;
}
hr.break.break-small.break-double:after {
background: #e5e5e5;
border: 0 none;
content: "";
display: block;
height: 2px;
margin: 4px 0 35px;
width: 60px;
}
hr.break-small.break-center.break-double:before {
margin: 5px auto 0;
}
hr.break.break-small.break-center.break-double:after {
margin: 4px auto 35px;
}
hr.break-small.break-double.background-white:before, hr.break-small.break-double.background-white:after, 
.primary-color-white hr.break-small.break-double.background-primary:before, .primary-color-white hr.break-small.break-double.background-primary:after {
background: #fff;
}
hr.break-small.break-double.background-primary:before, hr.break-small.break-double.background-primary:after,
.primary-color-primary hr.break-small.break-double.background-primary:before, .primary-color-primary hr.break-small.break-double.background-primary:after {
background: #0000ff;
}

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

div.color-bar:after {
    height: 3em;
    background-color: #383C41; /* rgb(56, 60, 65); */
    border: none;
    display: block;
    content: "";
}