/* HTML Web Banner Styles */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

body {
    font-family: 'Lato', sans-serif;
}
h3 span {
    color: #ddd;
}
/* Preview Mode Styles */
.preview {
    padding: 2em;
}
.preview .carousel-inner {
    display: flex; gap: 30px;
}
.preview .banner-container--728x90,
.preview .banner-container--160x600,
.preview .banner-container--300x250 {
    width: unset;
    height: unset;
    background: white;
    padding: 10px;
    border: 1px solid #dae8ed;
    border: 1px solid #eaf2f5;
    border-radius: 4px;
}
.preview .banner-container--728x90 .carousel-inner,
.preview .banner-container--300x250 .carousel-inner {
    flex-direction: column;
    gap: 15px;
}
.preview .banner {
    border: none;
}

/* Container Styles */
.banner-container {
    margin-bottom: 15px;
}
.banner-container--728x90 {
  width: 728px;
  height: 90px;
}
.banner-container--160x600 {
  width: 160px;
  height: 600px;
}
.banner-container--300x250 {
  width: 300px;
  height: 250px;
}
.banner-container--300x300 {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

/* Banner Styles */

.banner {
    background: #ebeef2;
    display: flex;
    position: relative;
}
.banner--type-power {
    background: #27325b; /* backup */
    background: linear-gradient(to top, #354684 25%, #27325b 75%, #27325b);
}
.banner--type-biomedical {
    background: linear-gradient(#f9fafe, #e6f2fe);
}
.banner--type-news {
    background: #f9fbff;
    background: linear-gradient(to bottom, #f9fbff, #e5f2ff);
}

/* Custom Banner Backgrounds */

.banner--728x90.banner--type-power {
    background: linear-gradient(to right, #27325b, #27325b 25%, #354684 75%);
}
.banner-label {
  display: inline-block; color: #aaa; font-size: 12px; padding: 2px 10px; background: #fafcfc; border-radius: 0 4px 4px 0; margin-bottom: 15px; border: 1px solid #f2f2f2; border-left: 3px solid #368ccb; margin-left: 0px; margin-top: 15px;
}
.banner--728x90 {
    width:  728px;
    height:  90px;
}
.banner--160x600 {
    width:  160px;
    height: 600px;
}
.banner--300x250 {
    width:  300px;
    height: 250px;
}
.banner--300x300 {
    width: 300px;
    height: 300px;
}

/* Banner Logo */

.banner__logo {
    position: absolute;
}
.banner--type-biomedical .banner__logo-img, .banner--type-news .banner__logo-img {
    /*filter: drop-shadow(0 0 5px rgba(39, 50, 91, .35));*/
}
.banner--728x90 .banner__logo {
    bottom: 0px;
    right: 5px;
}
.banner--728x90 .banner__logo-img {
    display: block;
    width: 130px;
    height: 40px;
}
.banner--160x600 .banner__logo {
    bottom: 0px;
    right: 15px;
}
.banner--160x600 .banner__logo-img {
    display: block;
    width: 130px;
    height: 40px;
}
.banner--300x250 .banner__logo {
    bottom: 0px;
    right: 5px;
}
.banner--300x250 .banner__logo-img {
    display: block;
    width: 130px;
    height: 40px;
}
/* Banner Logo - Custom Positions */
.banner--300x250.banner--type-biomedical .banner__logo {
    bottom: 0;
    left: 5px;
}

/* Banner Backgrounds */

.banner__bg {
    flex: 1;
    opacity: 0;
    animation: fadein--img 1.5s ease-in 0s 1 forwards;
    transition: background-size .5s;
}
.banner--728x90 .banner__bg {
  background-size: 728px 90px;
}
.banner--160x600 .banner__bg {
    background-size: 160px 600px;
}
.banner--300x250 .banner__bg {
    background-size: 300px 250px;
}
.banner:hover .banner__bg {
    background-size: 103.5% 103.5%;
}
.banner--160x600 .banner__bg--test {
    opacity: .15 !important;
    background-image: url('https://picsum.photos/id/49/160/600');
}
.slide-banner__bg {
    flex: 1;
    opacity: 100;
}


/* Biomedical Story: Med Institute */
.banner--728x90 .banner__bg--medinstitute {
    background-image: url('https://cdn.comsol.com/web-banners/img/biomedical/MEDInstitute_728x90.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--160x600 .banner__bg--medinstitute {
    background-image: url('https://cdn.comsol.com/web-banners/img/biomedical/MEDInstitute_160x600.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--300x250 .banner__bg--medinstitute {
    background-image: url('https://cdn.comsol.com/web-banners/img/biomedical/MEDInstitute_300x250.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}

/* Biomedical Story: Microport CRM */
.banner--728x90 .banner__bg--microport-crm {
    background-image: url('https://cdn.comsol.com/web-banners/img/biomedical/MicroportCRM_728x90.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--160x600 .banner__bg--microport-crm {
    background-image: url('https://cdn.comsol.com/web-banners/img/biomedical/MicroportCRM_160x600.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--300x250 .banner__bg--microport-crm {
    background-color: #ecf5ff;
    background-image: url('https://cdn.comsol.com/web-banners/img/biomedical/MicroportCRM_300x250.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}

/* Biomedical Story: Kejako */
.banner--728x90 .banner__bg--kejako {
    background-image: url('https://cdn.comsol.com/web-banners/img/biomedical/Kejako_728x90.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--160x600 .banner__bg--kejako {
    background-image: url('https://cdn.comsol.com/web-banners/img/biomedical/Kejako_160x600.png');
    background-position: bottom -50px right 0;
    background-repeat: no-repeat;
}
.banner--300x250 .banner__bg--kejako {
    background-image: url('https://cdn.comsol.com/web-banners/img/biomedical/Kejako_300x250.png');
    background-position: bottom 0 right -6px;
    background-repeat: no-repeat;
}

/* Power Story: Bosch */
.banner--728x90 .banner__bg--bosch {
    background-image: url('https://cdn.comsol.com/web-banners/img/power/Bosch_728x90.png');
    background-position: bottom 0 right -80px;
    background-repeat: no-repeat;
}
.banner--160x600 .banner__bg--bosch {
    background-image: url('https://cdn.comsol.com/web-banners/img/power/Bosch_160x600.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--300x250 .banner__bg--bosch {
    background-image: url('https://cdn.comsol.com/web-banners/img/power/Bosch_300x250.png');
    background-position: bottom -20px right 0;
    background-repeat: no-repeat;
}

/* Power Story: Hellenic */
.banner--728x90 .banner__bg--hellenic {
    background-image: url('https://cdn.comsol.com/web-banners/img/power/Hellenic_728x90.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--160x600 .banner__bg--hellenic {
    background-image: url('https://cdn.comsol.com/web-banners/img/power/Hellenic_160x600.png');
    background-position: bottom -65px right 0;
    background-repeat: no-repeat;
}
.banner--300x250 .banner__bg--hellenic {
    background-image: url('https://cdn.comsol.com/web-banners/img/power/Hellenic_300x250.png');
    background-position: bottom -2px right 0;
    background-repeat: no-repeat;
}

/* Power Story: Pollar Night */
.banner--728x90 .banner__bg--polar-night {
    background-image: url('https://cdn.comsol.com/web-banners/img/power/PolarNight_728x90v2.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--160x600 .banner__bg--polar-night {
    background-image: url('https://cdn.comsol.com/web-banners/img/power/PolarNight_160x600v3.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--300x250 .banner__bg--polar-night {
    background-image: url('https://cdn.comsol.com/web-banners/img/power/PolarNight_300x250v2.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}

/* COMSOL News - Banner Backgrounds (728x90) */
.banner--728x90.banner--cable-design .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/CableDesign_728x90.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--728x90.banner--battery-design .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/BatteryDesign_728x90.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;

}
.banner--728x90.banner--additive-manufacturing .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/AdditiveManufacturing_728x90.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--728x90.banner--biomedical-applications .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/BiomedicalApplications_728x90.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}

/* COMSOL News - Banner Backgrounds (160x600) */
.banner--160x600.banner--cable-design .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/CableDesign_160x600.png');
    background-position: bottom -75px right 0;
    background-repeat: no-repeat;
}
.banner--160x600.banner--battery-design .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/BatteryDesign_160x600.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;

}
.banner--160x600.banner--additive-manufacturing .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/AdditiveManufacturing_160x600.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--160x600.banner--biomedical-applications .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/BiomedicalApplications_160x600.png');
    background-position: bottom -20px right 0;
    background-repeat: no-repeat;
}

/* COMSOL News - Banner Backgrounds (300x250) */
.banner--300x250.banner--cable-design .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/CableDesign_300x250.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--300x250.banner--battery-design .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/BatteryDesign_300x250.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--300x250.banner--additive-manufacturing .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/AdditiveManufacturing_300x250.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
}
.banner--300x250.banner--biomedical-applications .banner__bg {
    background-image: url('https://cdn.comsol.com/web-banners/img/news/BiomedicalApplications_300x250.png');
    background-position: top 0 right 0;
    background-repeat: no-repeat;
}

/* Idea ML Basics 18Min - Banner Backgrounds (300x300) */
.banner--300x300 .banner__bg--basics-model {
    background-image: url('https://cdn.comsol.com/web-banners/img/idea-ML-basic-18min/BASICS-UI.png');
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
    background-size: initial;
    z-index: 1;
}
.banner--300x300 .banner__bg--basics-cover {
    background-image: url('https://cdn.comsol.com/web-banners/img/idea-ML-basic-18min/Idea-ML-BASICS-18min-model_300x300.png');
    background-position: top 0 right 0;
    background-repeat: no-repeat;
    background-color: #25325b;
    z-index: 2;
}

.banner__content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    text-decoration: none;
}
.banner--160x600 .banner__content {
    flex-direction: column;
    padding: 1em 10px;
}
.banner--300x250 .banner__content {
    flex-direction: column;
    padding: 15px 15px;
}
/* Banner Content Custom Styles */
.banner--160x600.banner--type-news .banner__content {
    padding-top: 2em;
}

.titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.banner--728x90 .titles {
    margin-left: 20px;
}
.banner--160x600 .titles {
    margin-left: 0;
}
.banner-container--300x300 .banner__content, .banner-container--300x300 .subtitle {
    flex-direction: row-reverse;
}
.banner-container--300x300 .title, .banner-container--300x300 .subtitle {
    padding-right: 20px;
    
}
.banner-container--300x300 .titles {
    padding-bottom: 20px;
    justify-content: flex-end;
    position: absolute;
    top: 190px;
    left: 5px;
    z-index: 7;
    width: 300px;
}
.basics-cover__block {
    position: absolute;
    top: 0;
}

/* Content Hover Styles */
.banner-container--300x300:hover .banner__bg--basics-model {
    background-position: top 0 left 0;
    transition: ease-in-out 1.7s;
}
.banner-container--300x300:hover .basics-cover__block {
    opacity: 0;
    transition: ease .5s;
}

/* CTA Button */

.cta-button {
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 220ms, color 220ms;
    border-radius: 3px;
    background-color: #ddd;
    color: #888;
}
.banner--728x90 .cta-button {
    padding: 4px;
    padding-left: 8px;
    line-height: 1.2;
}
.banner--160x600 .cta-button {
    margin: 0;
    padding: 4px;
    padding-left: 8px;
    line-height: 1.2;
}
.banner--300x250 .cta-button {
    margin: 0;
    padding: 4px;
    padding-left: 8px;
    line-height: 1.2;
}
.banner-container--300x300 .cta-button {
    font-size: 15px;
    margin: 0;
    padding: 4px;
    padding-left: 8px;
    line-height: 1.2;
    background-color: transparent;
    color: #eea342;
}

/* Custom Button Styles - Position */

.banner--728x90.banner--type-news .cta-button {
    position: absolute;
    top: 0;
    right: 15px;
    margin-top: 33px;
}
.banner--728x90.banner--type-biomedical .cta-button,
.banner--728x90.banner--type-power .cta-button {
    margin-left: 5px;
}

/* Custom Button Styles - Colors */

.banner--type-news .cta-button {
    background-color: #368ccb;
    color: rgba(255,255,255,.75);
}
.banner--type-power .cta-button {
    background-color: #005596;
    color: rgba(255,255,255,.75);
}
.banner--type-biomedical .cta-button {
    background-color: #ddd;
    color: #888;
}

/* Custom Button Styles - Hover */

.banner--type-biomedical .banner__content:hover .cta-button {
    color: #eda34b;
    background-color: #fed89d;
    text-decoration: none;
}
.banner--type-power .banner__content:hover .cta-button {
    background-color: #368ccb;
    color: white;
    text-decoration: none;
}
.banner--type-news .banner__content:hover .cta-button {
    background-color: #005596;
    color: white;
    text-decoration: none;
}
.banner-container--300x300:hover .cta-button {
    color: #e65e30;
}

/* Banner Title */

.title {
    color: #333;
    font-size: 1.1em;
    font-weight: 900;
    opacity: 0;
    animation: fadein--text 1.2s ease-in 200ms 1 forwards;
    margin-bottom: 0;
}
.banner--type-news .title {
    opacity: 1;
}
.banner--728x90 .title {
  line-height: 1.5;
}
.banner--160x600 .title {
    line-height: 1.2;
    margin-bottom: 10px;
}
.banner--300x250 .title {
    line-height: 1.2;
    margin-bottom: 10px;
}
.banner-container--300x300 .title {
    line-height: 1.2;
    margin-bottom: 10px;
    color: #d3e2e9;
    text-align: right;
    font-weight: 500;
    font-size: 1.5em;
    animation: none;
    opacity: 100;
}

.banner-container--300x300:hover .title {
    color: #25325b;
    transition: ease .5s;
    font-weight: 600;
}

/* Custom Colors */

.banner--type-biomedical .title {
    color: #333;
}
.banner--type-power .title {
    color: #e7edf5;
    text-shadow: 1px 1px 2px #27325b;
}
.banner--type-news .title {
    color: #555;
    text-shadow: none;
    font-weight: 600;
    font-style: italic;
    animation: none; /* Turns off default fade-in effect */
    font-size: 16.5px;
}
.banner--160x600.banner--type-news .title,
.banner--300x250.banner--type-news .title {
    margin-bottom: 0px;
}
.banner--160x600.banner--type-news .title {
    font-style: normal;
    font-weight: 900;
    font-size: 17.5px;
}

/* Subline Styles */

.subtitle {
    color: #368ccb;
    font-weight: 900;
    font-size: 12.5px;
    display: flex;  
}

/* 300x300 basics slide */
.basics-model__block {
    position: absolute;
    top: 0;
    left: 0;
}
.banner-container--300x300:hover .basics-model__block {
/*    animation: move--img-block .75s ease .5s 1 forwards;*/
}


/* Subline Element Timings */

.subtitle__org {
    opacity: 0;
    animation: fadein--text .75s ease-in 1s 1 forwards;
}
.banner--type-biomedical .subtitle__org,
.banner--type-power .subtitle__org {
    text-transform: uppercase;
}

.subtitle__dividers {
    opacity: 0;
    animation: fadein--text .75s ease-in 1s 1 forwards;
}
.subtitle__desc {
    opacity: 0;
    animation: fadein--text .75s ease-in 1.4s 1 forwards;
}
.cta-button {
    opacity: 0;
    animation: fadein--text .75s ease-in 1.8s 1 forwards;
    text-transform: uppercase;
}
.banner-container--300x300 .cta-button {
    opacity: 100;
    animation: none;
}
.subline__mph, .subline__topic {
    font-weight: 900;
    text-transform: lowercase;
    font-size: 16.5px;
    line-height: 1.2;
}
.subline__mph {
    color: #555;
    animation: none;
}
.subline__topic {
    color: #eea342;
    opacity: 0;
    animation: fadein--text .75s ease-in .75s 1 forwards;
}
.banner--type-news .cta-button {
    animation: fadein--text .75s ease-in 1.75s 1 forwards;
}
/* Custom Subline Styles */
.banner--728x90 .subtitle {
    flex-direction: row;
    align-items: center;
    column-gap: 2.5px;
}
.banner--160x600 .subtitle {
    flex-direction: column;
    align-items: flex-start;
}
.banner--160x600 .subline__mph {
    font-size: 17.5px;
    font-weight: 900;
    line-height: 1.2;
}
.banner--160x600 .subline__mph, 
.banner--300x250 .subline__mph {
    font-style: normal;
    font-weight: 900;
}
.banner--160x600 .subline__topic {
    font-size: 17.5px;
    line-height: 1.2;
}
.banner--type-news.banner--160x600 .subtitle,
.banner--type-news.banner--300x250 .subtitle {
    row-gap: 0px;
}
.banner--300x250.banner--type-news .title,
.banner--300x250.banner--type-news .subline__topic,
.banner--300x250.banner--type-news .subline__mph {
    font-size: 18.5px;
}

.banner--300x250 .subtitle {
    flex-direction: column;
    align-items: flex-start;
}
.banner--160x600 .subline__topic {
    margin-bottom: 15px;
}
.banner--300x250 .subline__topic {
    margin-bottom: 10px;
}
/* Subline Custom Colors */
.banner--type-power .subtitle { 
    color: #eea342; /* yellow */
}
.banner--type-news .subtitle {}
.banner--type-biomedical .subtitle {}

/* Subline Description Styles */

.banner--160x600 .subtitle__desc {
    margin-bottom: 15px;
    line-height: 1.2;
    font-size: 12.5px;
    font-style: italic;
}
.banner--300x250 .subtitle__desc {
    margin-bottom: 15px;
    line-height: 1.2;
    font-size: 12.25px;
    font-style: italic;
}



/* Custom Colors */

.banner--type-power .subtitle__desc {
    color: #84c2ea;
}
.banner--type-biomedical .subtitle__desc {
    color: #005596;
    font-style: italic;
}

/* Dividers */

.subtitle__dividers {
    color: #aaaaaa;
}
.banner--728x90 .subtitle__dividers {
    display: inline-block;
}
.banner--160x600 .subtitle__dividers {
    display: none;
}
.banner--300x250 .subtitle__dividers {
    display: none;
}

/* Custom Styles */
.banner--type-biomedical .subtitle__dividers {
    color: #aaaaaa;
}
.banner--type-power .subtitle__dividers {
    color: rgba(255,255,255,.4);
}

/* Subtitle Element Transition */
.subtitle, .subtitle__desc, .subtitle__dividers {
    transition: color 300ms;
}

/* Subline Hover Settings */
.banner--type-biomedical .banner__content:hover .subtitle,
.banner--type-biomedical .banner__content:hover .subtitle__desc,
.banner--type-biomedical .banner__content:hover .subtitle__dividers {
    color: #999999;
}
.banner--type-power .banner__content:hover .subtitle,
.banner--type-power .banner__content:hover .subtitle__desc,
.banner--type-power .banner__content:hover .subtitle__dividers {
    color: #9e9b9c;
}

/* Symbols */
.material-symbols-outlined {
    font-size: 20px;
    vertical-align: middle;
    font-weight: bold;
    line-height: 19px;
}
.banner .material-symbols-outlined {
    font-size: 15px;
    line-height: 14px;
}

/* Banner Animations */

@keyframes move--img-block {
    from {
        right: 0px;
    }
    to {
        left: -300px;
    }
}
@keyframes fadein--text {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadein--img {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes slide--model-img {
    from {
        right: 0;
    }
    to {
        right: 315px;
    }
}

/* Utility Classes */

.hidden {
    display: none;
}