/* core */        
.container {
max-width: 1800px;
padding-left: 30px;
padding-right: 30px;
}
:root {
--darkBlue: #0039cf;
--lightBlue: #0064fc;
--black: #000000;
--grey: #333333;
}


/* header */
.header-logo img {
width: 180px;
}
.site-header {
padding: 40px 0 0;
background-color: #fff;
position: fixed;
width: 100%;
border-bottom: 1px solid #fff;
transition: all 0.3s ease-in-out;
}
.site-header::after {
height: 100px;
content: '';
position: absolute;
width: 100%;
display: block;
background-image: url('https://www.jonwallacedesign.biz/collabora/bluezwebsite/headerCurve.svg');
background-repeat: no-repeat;
background-position: top center;
}
.site-header::after img {
height: 100%;
}
.site-header-scrolled {
filter: drop-shadow(0px 8px 8px rgb(0 0 0 / 0.1));
transition: all 0.3s ease-in-out;
}
/* medias */
@media only screen and (max-width: 1200px) {
.site-header {
padding: 40px 0 20px;
}
.site-header::after {
margin-top: 20px;
}
}
@media only screen and (max-width: 600px) {
.header-logo img {
width: 165px;
}
.site-header {
padding: 30px 0 20px;
}
}
@media only screen and (max-width: 450px) {
.header-logo img {
width: 150px;
}
.site-header {
padding: 30px 0 20px;
}
}

/* hero */
.hero {
background: none;
padding-top: 120px;
padding-bottom: 3.5vw;
overflow: hidden;
}
.hero h1 {
font-size: 40px;
margin-top: 4.3vw;
padding-left: 5%;
padding-right: 5%;
}
.hero p {
font-size: 21px;
line-height: 155%;
padding: 0 15%;
max-width: 100%;
}
.hero::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
display: block;
background: var(--gradient-blue);
background-image: url('https://www.jonwallacedesign.biz/collabora/bluezwebsite/heroTexture.jpg');
background-size: cover;
background-position: center center;
top: 0;
z-index: -99;
-webkit-animation: HeroBGAnim 15s;
animation: HeroBGAnim 15s;
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes HeroBGAnim {
100% {
-webkit-transform: scale(1,1); 
}
}
@keyframes HeroBGAnim {
100% {
transform: scale(1,1); 
}
}
/* medias */
@media only screen and (max-width: 1700px) {
.hero h1 {
margin-top: 5.3vw;
}
}
@media only screen and (max-width: 1250px) {
.hero h1 {
font-size: 40px;
margin-top: 6.8vw;
}
.hero {
padding-bottom: 4.5vw;
}
}
@media only screen and (max-width: 1000px) {
.hero p {
font-size: 19px;
padding: 0 10%;
}        
}
@media only screen and (max-width: 800px) {
.hero h1 {
font-size: 36px;
margin-top: 7.3vw;
}
.hero {
padding-bottom: 5.5vw;
}
}
@media only screen and (max-width: 700px) {
.hero p {
font-size: 17px;
padding: 0 5%;
}    
}
@media only screen and (max-width: 600px) {
.hero {
padding-bottom: 7vw;
}   
}
@media only screen and (max-width: 550px) {
.hero h1 {
font-size: 32px;
margin-top: 7.3vw;
}
.hero p {
font-size: 16px;
padding: 0 5%;
}
}
@media only screen and (max-width: 450px) {
.hero h1 {
font-size: 28px;
margin-top: 12vw;
}
.hero {
padding-bottom: 13vw;
} 
}

/* features */
.features-inner {
gap: 50px;
}
.features-list {
flex: unset;
width: 50%;
}
.features-description {
padding-left: 14%;
flex: unset;
width: 50%;
position: relative;
}
.features-description p {
font-size: 23px;
line-height: 165%;
position: relative;
}
.features-description p strong {
color: var(--lightBlue);
}
.features-list li {
font-size: 18px;
color: var(--grey);
padding-left: 25px;
margin-bottom: 9px;
line-height: 130%;
list-style-position: outside;
}
.features-description p::before {
content: url('https://www.jonwallacedesign.biz/collabora/bluezwebsite/bluetooth_logoIcon.svg');
width: 40px;
height: 100px;
display: inline-block;
position: absolute;
left: -55px;
}
/* medias */
@media only screen and (max-width: 1200px) {
.features-description {
padding-left: 8%
}
.features-description p {
font-size: 21px;
}
.features-list li {
font-size: 17px;
padding-left: 25px;
margin-bottom: 9px;
}
}
@media only screen and (max-width: 800px) {
.features-description {
padding-left: 60px;
}
.features-description p {
font-size: 19px;
}
.features-list li {
font-size: 16px;
padding-left: 20px;
margin-bottom: 8px;
}
.features-inner {
gap: 30px;
}
}
@media only screen and (max-width: 640px) {
.features-list {
width: 100%;
}
.features-description {
width: 100%;
text-align: center;
}
.features-description p {
text-align: center;
padding-right: 30px;
font-size: 18px;
}
.features-list ul {
margin: 0 15% 0 20%;
}
.features-list li {
font-size: 15px;
}
.features-inner {
gap: 20px;
}
}
@media only screen and (max-width: 550px) {
.features-list ul {
margin: 0 10% 0 15%;
}
.features-description {
padding-left: 0;
padding-right: 0;
}
.features-description p {
padding-right: 0;
}
.features-description p::before {
display: block;
position: relative;
left: unset;
margin: 0 auto;
height: 70px;
}
}
@media only screen and (max-width: 500px) {
.features-list ul {
margin: 0 10% 0 5%;
}
.features-description p {
font-size: 17px;
}
}
@media only screen and (max-width: 400px) {
.features-list ul {
margin: 0 5% 0 5%;
}
}

/* modules */
.modules .container {
padding-left: 10%;
padding-right: 10%;
}
.modules {
padding: 55px 0 65px;
}
.modules h2 {
font-size: 28px;
}
.module-card {
padding-top: 5px;
padding-bottom: 5px;
}
.module-card p {
font-size: 16px;
line-height: 150%;
}
/* medias */
@media only screen and (max-width: 1400px) {
.modules .container {
padding-left: 30px;
padding-right: 30px;
}
}
@media only screen and (max-width: 1150px) {  
.modules h2 {
font-size: 25px;
}
}
@media only screen and (max-width: 1050px) {
.modules-grid {
grid-template-columns: repeat(4,1fr);
gap: 15px 20px;
}
}
@media only screen and (max-width: 750px) {
.modules-grid {
grid-template-columns: repeat(3,1fr);
gap: 15px 20px;
}
.modules h2 {
font-size: 23px;
}
.module-card p {
font-size: 15px;
}
}
@media only screen and (max-width: 550px) {
.modules-grid {
grid-template-columns: repeat(2,1fr);
gap: 15px 20px;
}
.modules {
padding: 45px 0 55px;
}
}

/* profiles */
.profiles {
padding: 55px 10% 65px;
}
.profiles h2 {
font-size: 28px;
font-weight: 400;
}    
.profiles p {
font-size: 18px;
line-height: 145%;
padding-left: 5%;
padding-right: 5%;
}
.profile-table {
border-radius: 0;
padding: 0 0 15px;
}
.profile-table h3 {
background-color: #e8e8e8;
padding: 10px 15px;
color: var(--black);
font-size: 16px;
}
.profile-table ul {
margin: 0 15px;
padding-left: 15px;
}
.profile-table li {
padding-left: 5px;
font-size: 14px;
line-height: 130%;
margin-bottom: 6px;
}
/* medias */
@media only screen and (max-width: 1400px) {
.profiles {
padding: 55px 5% 65px;
}
}
@media only screen and (max-width: 1150px) {  
.modules h2 {
font-size: 25px;
}
}
@media only screen and (max-width: 1000px) {
.profiles {
padding: 50px 0 60px;
}
.profiles p {
font-size: 17px;
}
}
@media only screen and (max-width: 750px) {
.modules h2 {
font-size: 23px;
}
.profiles {
padding: 45px 0 55px;
}
}
@media only screen and (max-width: 650px) {
.profiles {
padding: 45px 0 55px;
}
}
@media only screen and (max-width: 640px) {
.profiles-grid {
grid-template-columns: repeat(2,1fr);
}
}
@media only screen and (max-width: 500px) {
.profiles-grid {
grid-template-columns: 1fr;
}
.profiles p {
font-size: 16px;
}
}

/* news */
.news {
padding: 55px 10% 65px;
}
.news-grid {
gap: 35px;
}
.news h2 {
font-size: 28px;
font-weight: 400;
}
.news h2 a {
color: #fff;
}
.news-card-image {
border-radius: 0;
margin-bottom: 25px;
}
.news-card h3 {
font-size: 22px;
font-weight: 400;
color: #fff;
}
.news-card time {
font-size: 12px;
color: #fff;
}
.news-card p {
font-size: 15px;
color: #fff;
line-height: 155%;
}
.news-card a:hover {
text-decoration: none;
}
.news-card .news-card-image img {
transition: 0.45s all ease-in-out;
}
.news-card a:hover .news-card-image img {
transform: scale(1.08);
transition: 0.3s all ease-in-out;
}
.news-card a:hover h3 {
/*text-decoration: underline;*/
}
.news .news-card a {
display: block;
transition: all 0.3s ease-in-out;
padding: 30px;
height: 100%;
}
.news .news-card a:hover {
transform: scale(1.02);
transition: all 0.3s ease-in-out;
box-shadow: 0px 0px 40px rgba(0,0,0,0.05);
background-color: var(--lightBlue);
}
/* medias */
@media only screen and (max-width: 1550px) {
.news {
padding: 55px 5% 65px;
}
.news-grid {
gap: 20px;
}
}
@media only screen and (max-width: 1200px) {  
.news-grid {
gap: 10px;
}
.news .news-card a {
padding: 25px;
}
}
@media only screen and (max-width: 1150px) {  
.news h2 {
font-size: 25px;
margin-bottom: 15px;
}
.news-grid {
gap: 10px;
}
.news {
padding: 55px 2% 65px;
}
.news .news-card a {
padding: 20px;
}
}
@media only screen and (max-width: 750px) {
.news h2 {
font-size: 23px;
margin-bottom: 13px;
}
.news {
padding: 45px 0 55px;
}
}
@media only screen and (max-width: 650px) {
.news {
padding: 45px 0 55px;
}
.news .news-card a {
padding: 20px;
}
.news-grid {
gap: 5px;
}
.news .news-card {
margin: 5px 0;
}
}
@media only screen and (max-width: 640px) {
.news-card {
padding: 0 5%;
}
}
@media only screen and (max-width: 450px) {
.news-card {
padding: 0 2%;
}
.news {
padding: 30px 0 40px;
}
.news h2 {
margin-bottom: 10px;
}
}

/* footer links */
.footer-links {
padding: 55px 0 65px;
}
.footer-links .container {
padding-left: 10%;
padding-right: 10%;
}
.footer-link-col h3 {
font-size: 18px;
}
.footer-link-col p {
font-size: 13px;
line-height: 155%;
padding-right: 10%;
}
.footer-link-col a {
font-size: 16px;
font-weight: 700;
line-height: 130%;
padding-right: 10%;
text-align: left;
}
.footer-link-action svg  {
fill: #000;
width: 30px;
height: 30px;
}
a.footer-link-action:hover {
opacity: 0.7;
text-decoration: underline;
}
a.footer-link-action:hover svg {
fill: var(--darkBlue) important;
}
/* medias */
@media only screen and (max-width: 1150px) {
.footer-links {
padding: 50px 0 60px;
}
.footer-link-col p , .footer-link-col a {
padding-right: 5%;
}
}
@media only screen and (max-width: 1000px) {
.footer-links .container {
padding-left: 5%;
padding-right: 5%;
}
}
@media only screen and (max-width: 700px) {
.footer-links {
padding: 45px 0 55px;
}
}
@media only screen and (max-width: 640px) {
.footer-link-col p , .footer-link-col a {
padding-right: 0%;
}
.footer-links {
text-align: center;
}
}
@media only screen and (max-width: 550px) {
.footer-links {
padding: 40px 0 50px;
}
}

/* footer */
.footer-logo {
width: 120px;
margin-bottom: 20px;
}
.site-footer-inner p {
color: #000;
line-height: 140%;
}
.site-footer-inner p a {
color: #000;
}
.site-footer-inner p a:hover {
color: var(--darkBlue);
}
.site-footer {
border-bottom: 10px solid var(--darkBlue);
}
@media only screen and (max-width: 600px) {
.footer-logo {
width: 100px;
margin-bottom: 17px;
}
.site-footer-inner p {
font-size: 11px;
}
}



/* content hero */
.hero.contentHero h1 {
margin-bottom: 0;  
}
.hero.contentHero {
padding-bottom: 2.85vw;
}
/* medias */
@media only screen and (max-width: 1700px) {
.hero.contentHero h1 {
margin-top: 5.3vw;
}
}
@media only screen and (max-width: 1250px) {
.hero.contentHero h1 {
font-size: 40px;
margin-top: 6.8vw;
}
.hero.contentHero {
padding-bottom: 4.5vw;
}
}
@media only screen and (max-width: 800px) {
.hero.contentHero h1 {
font-size: 36px;
margin-top: 7.3vw;
}
.hero.contentHero {
padding-bottom: 5.5vw;
}
}
@media only screen and (max-width: 600px) {
.hero.contentHero {
padding-bottom: 7vw;
}   
}
@media only screen and (max-width: 550px) {
.hero.contentHero h1 {
font-size: 32px;
margin-top: 7.3vw;
}
}
@media only screen and (max-width: 450px) {
.hero.contentHero h1 {
font-size: 28px;
margin-top: 12vw;
}
.hero.contentHero {
padding-bottom: 13vw;
} 
}



/* news index */
.news.newsIndex {
background: transparent;
padding-bottom: 35px;
}
.newsIndexLoadMoreWrapper {
width: 100%;
margin: 100px 0 0;
position: relative;
}
.newsIndexLoadMoreWrapper a {
font-size: 16px;
font-weight: 700;
color: var(--black);
text-align: center;
border: 1px solid #eaeaea;
padding: 16px 45px;
background: #fff;
z-index: 999;
margin: 0 auto;
display: table;
transition: all 0.3s ease-in-out;
}
.newsIndexLoadMoreWrapper a::after {
content:'';
width: 100%;
border-top:1px solid #eaeaea;
position: absolute;
z-index: -99;
left: 0;
top: 28px;
}
.newsIndexLoadMoreWrapper a:hover {
background-color: var(--darkBlue);
color: #fff;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.news.newsIndex .news-card-image {
border: 1px solid #eaeaea;
}
.news.newsIndex .news-card a {
display: block;
transition: all 0.3s ease-in-out;
}
.news.newsIndex .news-card a:hover {
transform: scale(1.02);
transition: all 0.3s ease-in-out;
background-color: #fff;
}
.news.newsIndex .news-card h3 {
color: var(--black);
transition: all 0.3s ease-in-out;
}
.news.newsIndex .news-card a:hover h3 {
color: var(--darkBlue);
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.news.newsIndex .news-card time {
color: var(--grey);
}
.news.newsIndex .news-card p {
color: var(--black);
}
/* medias */
@media only screen and (max-width: 500px) {
.news .container {
padding-left: 10px;
padding-right: 10px;
}
}

/* news article */
.newsArticleBody {
padding: 0 10%;
}
.newsArticleDateWrapper {
margin: 30px 0 40px;
width: 100%;
text-align: center;
}
.newsArticleDateWrapper p {
font-size: 15px;
}
.newsArticleBody .heroIMG {
width: 100%;
height: auto;
margin-bottom: 40px;
}
.news.newsArticleFeedWrapper {
margin-top: 50px;
background: #f6f6f6;
}
.news.newsArticleFeedWrapper h3 {
color: var(--darkBlue);
}
.news.newsArticleFeedWrapper .news-card time {
color: var(--grey);
}
.news.newsArticleFeedWrapper .news-card p {
color: var(--black);
}
.newsIndexLoadMoreWrapper.backToNewsBtnWrapper {
margin-top: 75px;
margin-bottom: 60px;
}
.newsArticleBody code {
display: inline-block;
font-family: "Source Code Pro", Courier, 'Courier New', Arial;
font-weight: 500;
font-size: 14px;
line-height: 150%;
max-width: 100%;
}
.newsArticleBody code span {
font-size: 14px;
line-height: 140%;
margin-bottom: 7px;
display: block;
word-break: break-word;
}
.news.newsArticleFeedWrapper .news-card a:hover {
background: #fff;
}
/* general elements styling */
.newsArticleBody p , .newsArticleBody li {
line-height: 150%;
}
.newsArticleBody hr {
margin: 25px 0;
border: none;
border-top: 1px solid #eaeaea;
}
.newsArticleBody h1 , .newsArticleBody h2 , .newsArticleBody h3 , .newsArticleBody h4 , .newsArticleBody h5 , .newsArticleBody h6 {
line-height: 130%;
margin: 25px 0 10px;
padding: 0;
}
.newsArticleBody ul , .newsArticleBody ol {
margin-left: 15px;
margin-bottom: 15px;
}
.newsArticleBody li {
padding-left: 15px;
margin-bottom: 4px;
}
.newsArticleBody blockquote {
border-left: 3px solid var(--darkBlue);
margin-left: 0;
padding: 10px 0px 10px 30px;
color: var(--lightBlue);
}
/* medias */
@media only screen and (max-width: 1250px) {
.newsArticleBody {
padding: 0 5%;
}
}
@media only screen and (max-width: 1000px) {
.newsArticleBody {
padding: 0 3%;
}
.newsArticleBody p , .newsArticleBody li {
font-size: 15px;
}
.newsArticleBody .heroIMG {
margin-bottom: 30px;
}
.newsArticleDateWrapper {
margin: 25px 0;
}
.newsArticleDateWrapper p {
font-size: 14px;
}
}
@media only screen and (max-width: 800px) {
.newsArticleBody .heroIMG img {
width: calc(100% + 60px + 8%);
position: relative;
left: calc(-30px - 4%);
max-width: inherit;
}
.newsArticleDateWrapper {
margin: 20px 0 25px;
}
.newsArticleBody code span {
font-size: 13px;
}
}
@media only screen and (max-width: 650px) {
.newsArticleBody {
padding: 0 2%;
}
.newsArticleBody .heroIMG {
margin-bottom: 25px;
}
.newsArticleDateWrapper {
margin: 20px 0;
}
.newsArticleDateWrapper p {
font-size: 13px;
}
.newsArticleBody .heroIMG img {
width: calc(150% + 60px + 4%);
position: relative;
left: calc(-30px - 2% - 25%);
}
main {
overflow-x: hidden;
}
.newsArticleBody ul , .newsArticleBody ol {
margin-left: 10px;
margin-bottom: 15px;
}
.newsArticleBody li {
padding-left: 10px;
}
}
@media only screen and (max-width: 450px) {
.newsArticleBody {
padding: 0 0;
}
.newsArticleBody p , .newsArticleBody li {
font-size: 14px;
}
.newsArticleDateWrapper {
margin: 15px 0 20px;
}
.newsArticleBody ul , .newsArticleBody ol {
margin-left: 8px;
margin-bottom: 15px;
}
.newsArticleBody li {
padding-left: 8px;
}
}