/* This stylesheet is loaded last, overrulling some props of the main styles (mostly colors) */

/*  blue gradient background */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: radial-gradient(circle at center left, #173658, #406078);*/
    background: linear-gradient(150deg, #103040f0, #406080ff),
                url('../images/blackhole.gif') no-repeat center/cover fixed;         
    z-index: -1; /* Ensure the background is behind all content */
}
p {
    font-size: 1.2em;
}
h2 { 
    text-align: center;
}

/* top of screen (logo & menu) */
header.sticky,
.header.sticky {
    background-color: #081a2a;
    background: radial-gradient(circle at center left, #102944, #2f495b); 
    /* background: radial-gradient(circle at center left, #173658, #406078); */
}
footer {
    padding:20px 0;
    background-color: #081a2a;
    background: radial-gradient(circle at center left, #102944, #2f495b); 
}
.logo {
	max-width: 100px;	
	padding: 20px;
    display: none;
}
nav ul li a {	
	color:#5b8a9f;
}
nav ul li a:hover {	
    color: #80b0c0;
	transition: all 0.5s;
    font-weight: bold;
}
.nav-collapse a:active,
.nav-collapse .active a {
color:#fff;
}

/* main sheet disabled breaks on phones and tablets, but this causes layout issues in long headings */
@media only screen and (max-width: 768px) {
    br { display: inline !important;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    br { display: inline !important;}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 768px) {
    .backcolor {
        background-color:#081a2a;
        background: radial-gradient(circle at center left, #102944, #2f495b); 
    }
    nav ul li a {
        padding: 10px 0;
        text-align: left; 
    }
    .menu-item-spacer {
        visibility: hidden;
        height: 1.5em;
    }    
}
/* ---(end mobile)---- */

/* landingt title */
h1.datamick-title {
    font-family: Arial, sans-serif;
    font-size: 9em;
    font-weight: bold;
    text-transform: uppercase;     
    letter-spacing: 0.1em;
    transform: scaleX(1.2);
    transform-origin: center; 
    
    margin-top: 0em;
    
    line-height: 10px;

    color: #102e3e;     /* transparent not working in all browsers */
    text-shadow:
        1px 1px 0px #80b0c0,
        -1px -1px 0px #80b0c0, 
        -1px 1px 0px #80b0c0,  
        1px -1px 0px #80b0c0;  
    }

.datamick-slogan p {
    font-family: Arial, sans-serif;
    font-size:3.5em;        
    margin-top:0.5em;
    color:#5b8a9f;
    text-transform: uppercase;
    letter-spacing: 0.8em;
    transform: scaleY(1.1);
    transform-origin:center;
    text-align: center !important;
    
}
@media only screen and (max-width: 480px) {
    h1.datamick-title { font-size: 3em; }
    .datamick-slogan p {font-size: 1.2em; }
    .logo { display: none; }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    h1.datamick-title { font-size: 4em; }
    .datamick-slogan p {font-size: 1.6em; }
    .logo { display: none; }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    h1.datamick-title { font-size: 6em; }
    .datamick-slogan p {font-size: 2.4em; }
    .logo { display: none; }
}
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    h1.datamick-title { font-size: 7em; }
    .datamick-slogan p {font-size: 2.8em; }
    .logo { display: none; }
}

.banner .button-container a {
	background: #5b8a9f;
	color: #80b0c0;
}
.banner .button-container a:hover {
	background: #80b0c0;	
    color: #fff;
}
.banner p {
    text-align: left;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);    
    padding-bottom: 10px;
}
.banner h1 {
    text-transform: none;  
}

/* loading screen */
.se-pre-con { 
 background: #204060; /* #5b8a9f; */
}

span.line {	
	background: #80b0c0;
    margin-top: 0.2em;
    margin-bottom: 0.25em;
}

/* specific modules */
.video {
    background-color: #e4e8f4; /* #5b8a9f; #f4f4f4; */
}
.video h2 {
    text-align: center;
}
.video span.line {
    margin: 30px auto;
}
.services {
    background-color: #f0f0f0; /* #5b8a9f; #f4f4f4; */    
}
.services p {
    text-align:left;
}
.services img {
    border-radius: 5em;
    border: solid 0.3em #c8c8c8; /* #ed145b; */
    padding: 2em;
}

.contact {
    background-color: #f0f0f0; 
    padding-top: 20px;
}
.contact p {
    text-align:left;
}
.contact .top {
    padding-bottom: 20px;
}
.textpage {
    background-color: #f4f4f4;
}


.features {
	background-color: #f0f0f0;
}

.updates {
    background-color: #f4f4f4;  
}
.updates .top {
    padding: 15px;
}
.updates .content {
    width: 100%;
    height: 220px;
    min-height: 220px;
    max-height: 220px;
    overflow: hidden;   
}
.updates article {
    background-color: #f0f0f0;
}
.updates article p:before {
    content:'';
    width: calc(100% - 30px);      
    height:100px;    
    position:absolute;    
    left: 15px;
    bottom:0px;    
    z-index: 10;
    background: linear-gradient(to bottom, transparent, #f0f0f0);
} 
.updates h3 {
     color: #ed145b;
     font-weight:400;
     text-transform: uppercase;
     padding-top: 15px;
}
.updates article p {
    font-size: 0.9em;
}

/* mainly for blog items */
article {
    background: #f4f4f4;
}

.blog-container .content {
    width: 100%;
    height: 220px;
    min-height: 220px;
    max-height: 220px;
    overflow: hidden;   
}
/* to gradually fade out summary text if long */
.blog-container article p:before {
    content:'';
    width: 100%; /* calc(100% - 30px); */
    height:100px;    
    position:absolute;    
    left: 15px;
    bottom:60px;    
    z-index: 10;
    background: linear-gradient(to bottom, transparent, #f4f4f4);
  } 
.blog article h3 {
    padding: 5px 15px 0 15px;
    margin: 0;
}
.blog article p {
    margin: 0px;
    padding: 0px;    
    font-size: 0.9em;
}
.blog article img {
    padding: 15px;
    margin: 0;
}
  
.blog-list img {
    width: 100%;
    padding: 15px 15px 0 5px;
}
.blog-list p {
    margin: 0px;
    padding: 0px;    
}
.blog-list .content {
    padding: 15px;
}
  

.banner.banner-alt {        
    padding: 80px 0 10px 0; 
    background-size: cover;
    background-position: center 80px;
}
.banner.banner-alt h1 {        
    font-size: 2em;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}
.item-header h1 {
    background-color: #cccccccc; 
    line-height: 2em;
}
.imgDescription2 {
    background: #5b8a9f99;	
    border: solid 0.1em #c8c8c8; /* #ed145b; */
    /* background: #ffffff66; */
}
.imgDescription2 img {
    width: auto !important;    
}

/* speed up the animations except for home title*/
.animated:not(#home .animated) {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}