/* ---------------------------------------------------------------------------------------
* Author        : Jäger Health <christoph.klin@jaeger.health>
* Template Name : index
* File          : Main CSS styles
* Version       : 1
* -------------------------------------------------------------------------------------- */

/*
|-------------------------------------------------------------------------------
| 01.   Typography	       
|-------------------------------------------------------------------------------
|
| Embeds Google Fonts without the Google Fonts Web API by self-hosted the  
| web fonts on the website locally.
| Using https://gwfh.mranftl.com/fonts to download the web font.
|
| Media all.
| 
|
*/
/* noto-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-v38-latin-regular.woff2') format('woff2'),
       url('../fonts/noto-sans-v38-latin-regular.ttf') format('truetype');
}

/* noto-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-v38-latin-500.woff2') format('woff2'),
       url('../fonts/noto-sans-v38-latin-500.ttf') format('truetype');
}


/* noto-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/noto-sans-v38-latin-600.woff2') format('woff2'),
       url('../fonts/noto-sans-v38-latin-600.ttf') format('truetype');
}

/* noto-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-v38-latin-700.woff2') format('woff2'),
       url('../fonts/noto-sans-v38-latin-700.ttf') format('truetype');
}

/*
|-------------------------------------------------------------------------------
| 02.   Root definitions	       
|-------------------------------------------------------------------------------
|
| Sets all root variables and helper classes.
| 
| Media all.
| 
|
*/
:root {
    --this-body-family: 'Noto Sans', 'Helvetica', 'Arial', sans-serif;
    --regular:  400;
    --medium:   500;
    --semibold: 600;
    --bold:     700;
    --iqvia-lt-blue1:   #00CCFF;
    --iqvia-lt-blue2:   #00A3E0;
    --iqvia-dk-blue1:   #005587;
    --iqvia-dk-blue2:   #140B42;
    --iqvia-green1:     #43B02A;
    --iqvia-green2:     #00BFB3;
    --iqvia-lt-grey1:   #F4F4F4;
    --iqvia-lt-grey2:   #606B71;
    --iqvia-dk-grey:    #830065;
}

/*
|-------------------------------------------------------------------------------
| 03.   Bulma CSS overwrites
|-------------------------------------------------------------------------------
|
| Bulma uses global CSS variables defined at the :root level. They are all 
| prefixed with bulma-. You can overwrite them simply by setting a new value 
| at the same scope . See: https://bulma.io/documentation/customize/concepts/
| 
| Media all.
| 
|
*/
body {
    font-family: var(--this-body-family);
    color: #2B3A42;
}

[class*=is-primary] {
    background-color: var(--iqvia-green1) !important;
}

[class*=is-color-primary] {
    color: var(--iqvia-green1) !important;
}

[class*=title], [class*=subtitle] {
    font-weight: var(--bold) !important;
}

.is-size-1-desktop {
    font-size: 3.75rem !important;      /* 60 px */
}

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (orientation: portrait) {
    .container {
        padding-left:  25px;
        padding-right: 25px;
    }
}

.footer {
    background-color: var(--iqvia-dk-blue2);
}

/*
|-------------------------------------------------------------------------------
| 04.   Site UI Definitions	       
|-------------------------------------------------------------------------------
|
| Defines the custom layout by changing bulma standards and sets custom styles.
| 
| Media all.
| 
|
*/
.is-color-ltblue1 {
    color: var(--iqvia-lt-blue1) !important;
}

.is-color-ltblue2 {
    color: var(--iqvia-lt-blue2) !important;
}

.is-color-dkblue2 {
    color: var (--iqvia-dk-blue2) !important;
}

.is-color-ltgrey2 {
    color: var(--iqvia-lt-grey2) !important;
}

.is-green1 {
    background-color: var(--iqvia-green1) !important;
}

.is-green2 {
    background-color: var(--iqvia-green2) !important;
}

.is-ltblue1 {
    background-color: var(--iqvia-lt-blue1) !important;
}

.is-dkgrey {
    background-color: var(--iqvia-dk-grey) !important;
}

.is-ltgrey2 {
    background-color: var(--iqvia-lt-grey2) !important;
}

.is-line-height-5 {
    line-height: 2.5rem;    /* 40 px */
}

.is-line-height-6 {
    line-height: 2rem;      /* 32 px */
}

.is-line-height-7 {
    line-height: 1.5rem;    /* 24 px */
}

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
select:first-child {
    color: #606B71
}

/* 	--------------------------------------------------
	:: Hero
	--------------------------------------------------  */
.hero {
    background-image: url(../img/hero-header-background.png);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.hero .hero-body {
    background-image: url(../img/iqvia-learning-academy-banner.png);
    background-attachment: fixed;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: top right;
}

.hero .hero-foot {
    height: 76px;
    background: #0C7BC0;
}

.hero .hero-foot .hero-foot--wrapper {
    margin-top: 18px;
}

.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop {
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--medium);
}

.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li {
    display: inline-block;
    padding-right: 50px;
    padding-left: 50px;
}

.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li a {
    color: white;
    text-decoration: none;
}

.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li a:hover,
.footer .navbar-menu a:hover {
    color: var(--iqvia-dk-blue);
    background-color: transparent;
    text-decoration: underline;
}

.fixed-container {
    position: relative;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Damit der Container über anderen Inhalten bleibt */
}

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
        .hero .hero-body {
            background: none;
        }
}

/* 	--------------------------------------------------
	:: Main Content Sections
	--------------------------------------------------  */
.main-content .overview {
    
}

.main-content .agenda {
    margin-bottom: 75px;
    margin-top: 75px;
    background-color: var(--iqvia-dk-blue1);
}

.main-content .faq {
    margin-bottom: 75px;
    margin-top: 75px;
    background-color: var(--iqvia-dk-blue2);
}

.footer .navbar{
    display: flex;
    align-content: center;
    justify-content: center;
    background-color: var(--iqvia-dk-blue2);
}

.footer .navbar-menu {
    flex-grow: initial!important;
    flex-shrink: initial!important;
}

/* Portrait */
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
        .main-content .overview {
            margin-bottom: 50px;
            margin-top: 50px;
        }
}


/* 	--------------------------------------------------
	:: Content Layout Elements
	--------------------------------------------------  */
.logo {
    position: absolute;
    top: 0;
    left: 65px;
    width: 236px
}

.light-box {
    background-color: var(--iqvia-lt-grey1);
    border-radius: 35px;
    padding: 50px;
}

.light-box.picture {
    width:  400px;
    height: 400px;
    padding: 0;
}

.light-box.picture img {
    border-radius: 35px;
}

.light-box hr.style-one {
    border: 0;
    height: 1px;
    background: #BFBFBF;
    background-image: linear-gradient(to right, #ccc, #BFBFBF, #ccc);
}

.circle {
    position: relative;
    top: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    z-index: -1; 
}

.pill {
    position: relative;
    top: -40px;
    width: 168px;
    height: 80px;
    border-radius: 9999px;
    z-index: -1; 
}

.number {
    font-size: 80px;
    line-height: 88px;
    color: #7FD1EF;
}

.message .message-header {
    background: none;
    border-bottom: 1px solid white;
    padding: 0;
}

.message .message-header a {
    width: 100%;
    padding: 1.0em 0;
    font-weight: 700;
    text-decoration: none !important;
}

.message .message-header a span.icon {
    /*float: right;*/
    background-image: url('../img/icon-chevron-down.svg');
    background-repeat: no-repeat;
    background-position: center center;
    /*transform: translateY(8px);*/
}

.message .message-header a.is-active span.icon {
    background-image: url('../img/icon-chevron-right-dark.svg');
}

.skills {
    background-color: var(--iqvia-lt-grey1);
    border-radius: 35px;
    padding: 60px 40px;
    position: relative;
    z-index: 0;
}

.skills ul.keyareas > li {
    /*list-style-image: url(../img/icon-arrow-right.svg);*/
    background: url(../img/icon-arrow-right.svg) no-repeat top left;
    background-position-y: 4px;
    padding-left: 1.5rem;
    padding-bottom: 1rem;
}

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (orientation: portrait) {
    .light-box.picture {
        width:  320px;
        height: 320px;
    }
}