/* ############## Google Fonts */

/* metrophobic-regular - latin-ext_latin */
@font-face {
    font-family: 'Metrophobic';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../../webfonts/metrophobic-v17-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../../webfonts/metrophobic-v17-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}
/* open-sans-regular - latin-ext_latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../../webfonts/open-sans-v28-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../../webfonts/open-sans-v28-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
  }
/* open-sans-700 - latin-ext_latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('../../webfonts/open-sans-v28-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../../webfonts/open-sans-v28-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}
/* open-sans-italic - latin-ext_latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local(''),
         url('../../webfonts/open-sans-v28-latin-ext_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../../webfonts/open-sans-v28-latin-ext_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}

/* ############## Global variables */
:root {
    --radix-primary-hex     :#012030;
    --radix-secondary-hex   :#13678A;
    --radix-highlight-1-hex :#45C4B0;
    --radix-highlight-2-hex :#9AEBA3;
    --radix-highlight-3-hex :#DAFDBA;
    --magic-number: 0.0262038896; /* tan(3°)/2 */
    --content-width: 100vw;
    --skew-padding: calc(var(--content-width) * var(--magic-number));
}
.text-primary {
    /* dark blue */
    color: var(--radix-primary-hex) !important;
}
.text-secondary {
    /* blue */
    color: var(--radix-secondary-hex) !important;
}
.text-highlight-1 {
    /* turquoise */
    color: var(--radix-highlight-1-hex) !important;
}
.text-highlight-2 {
    /* green */
    color: var(--radix-highlight-2-hex) !important;
}
.text-highlight-3 {
    /* lemon */
    color: var(--radix-highlight-3-hex) !important;
}

/* ############## Define body fonts */
html, body {
    height: 100%;
}
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
}
body > .container {
    padding: 40px 15px 0;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Metrophobic', sans-serif;
    font-weight: 400;
    color: var(--radix-primary-hex);
}
h1 {
    text-transform: uppercase;
}
/* ############## Navbar Style */
.navbar {
    background-color: var(--radix-primary-hex);
}
/* Toggler icon on mobile */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler {
    border-color: rgb(255,255,255);
} 
/* Radix Logo in navbar */
.navbar-brand-on {
    display: none;
}
.navbar-brand-off {
    display: block;
}
.navbar-brand:hover .navbar-brand-on {
    display: block;
}
.navbar-brand:hover .navbar-brand-off {
    display: none;
}
/* Default color */
.nav-link {
    color: #fff;
}
/* Current active */
.active > a {
    color: var(--radix-highlight-1-hex) !important;
}
/* On mouse over */
.nav-item > a:hover {
    color: var(--radix-highlight-2-hex) !important;
}
/* ############## Dropdown in Navbar */
.nav-link:focus {
    color: var(--radix-highlight-2-hex) !important;
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--radix-highlight-2-hex) !important;
}
/* ############## Contact Button in Navbar */
.contact-navbar {
    margin: 0.2rem;
    padding: 0.2rem;
    /*border-radius: 0rem;*/
    color: #000;
    background-color: var(--radix-highlight-1-hex) !important;
    border-color: var(--radix-highlight-1-hex) !important;
}
.contact-navbar:hover {
    background-color: var(--radix-highlight-2-hex) !important;
    border-color: var(--radix-highlight-2-hex) !important;
    color: #000;
}

/* The Radix Button */
.btn-radix {
    color: #000;
    background-color: var(--radix-highlight-1-hex) !important;
    border-color: var(--radix-highlight-1-hex) !important;
}
.btn-radix:hover {
    background-color: var(--radix-highlight-2-hex) !important;
    border-color: var(--radix-highlight-2-hex) !important;
    color: #000;
}
/* ############## Rotated backgrounds */
.diagonal-box-color-a {
    position: relative;
    z-index: -1;
    background-image: linear-gradient(45deg, var(--radix-primary-hex), var(--radix-secondary-hex));
    color: #fff !important;
    transform: skewY(-3deg);
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.diagonal-box-color-a h1 {
    color: var(--radix-highlight-2-hex) !important;
}
.diagonal-box-color-b {
    position: relative;
    z-index: -1;
    background-image: linear-gradient(45deg, var(--radix-highlight-3-hex), var(--radix-highlight-1-hex));
    color: #000 !important;
    transform: skewY(-3deg);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.diagonal-box-color-c {
    position: relative;
    z-index: -1;
    background-image: linear-gradient(45deg, var(--radix-secondary-hex), var(--radix-highlight-1-hex));
    color: #000 !important;
    transform: skewY(-3deg);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.content {
    margin: 0 auto;
    transform: skewY(3deg);
}
/* ############## Footer Style */
.footer {
    color: #fff;
    background-color: var(--radix-primary-hex);
}
.footer-title {
    font-family: 'Metrophobic', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 180%;
}
.social-link {
    color: #fff;
    font-size: 150%;
}
.social-link:hover {
    color: var(--radix-highlight-2-hex) !important;
}
.links-inline {
    display: inline-block;
    text-decoration: none;
    color: #fff;
}
.links-inline:hover {
    color: var(--radix-highlight-2-hex) !important;
}
.links-block {
    display: block;
    text-decoration: none;
    color: #fff;
}
.links-block:hover {
    color: var(--radix-highlight-2-hex) !important;
}
/* ############## Scrolling Photos */
.background-photo {
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #fff;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
/* On mobile we don't wont this scroll attachment */
@media only screen and (max-device-width: 991px) {
    .background-photo {
        border-radius: .25rem!important;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        background-attachment: scroll;
    }
}
.background-photo .frame {
    -webkit-box-shadow: inset 0px 5px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 5px 10px rgba(0,0,0,0.5);
    box-shadow: inset 0px 5px 10px rgba(0,0,0,0.5);
}
.usrp {
    background-image: url("../../img/scroller/usrp.jpg");
    height: 20rem;
}
.pc {
    background-image: url("../../img/scroller/pc.jpg");
    height: 20rem;
}
.phones {
    background-image: url("../../img/scroller/phones.jpg");
    height: 20rem;
}
.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
/* ############## Featurette */
.featurette-divider {
    margin: 5rem 0;
}
.featurette-heading {
    font-weight: 300;
    line-height: 1;
}
@media (min-width: 40em) {
    .featurette-heading {
        font-size: 50px;
    }
}
@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 0rem;
    }
}
/* ############## Research */
/* Conference label on paper photo */
.conf-label {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.2rem;
    width: 120px;
    background-color: var(--radix-highlight-1-hex) !important;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    z-index: 1
}

/* Paper photo zoom effect */
.card-image-holder {
    position: relative;
    overflow: hidden;
}

.card-image-holder img {
    width: 100%;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.card-img-top:hover {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
}

/* Make font size smaller in tables on mobile */
@media only screen and (max-device-width: 767px) {
    .table {
        font-size: 0.8em;
    }
}

/* DataTables - Hide Green / Red Icon */
table.dataTable.dtr-column>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-column>tbody>tr>th.dtr-control:before,
table.dataTable.dtr-column>tbody>tr>td.control:before,
table.dataTable.dtr-column>tbody>tr>th.control:before {
    display: none;
}

/* Timeline */
/* The actual timeline (the vertical ruler) */
.main-timeline-2 {
   position: relative;
}
  
  /* The actual timeline (the vertical ruler) */
.main-timeline-2::after {
    content: "";
    position: absolute;
    width: 3px;
    background-color: #012030;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}
  
  /* Container around content */
  .timeline-2 {
    position: relative;
    background-color: inherit;
    width: 50%;
  }
  
  /* The circles on the timeline */
  .timeline-2::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    right: -11px;
    background-color: #012030;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
  }
  
  /* Place the container to the left */
  .left-2 {
    padding: 0px 40px 20px 0px;
    left: 0;
  }
  
  /* Place the container to the right */
  .right-2 {
    padding: 0px 0px 20px 40px;
    left: 50%;
  }
    
  /* Fix the circle for containers on the right side */
  .right-2::after {
    left: -14px;
  }
  
  /* Media queries - Responsive timeline on screens less than 600px wide */
  @media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .main-timeline-2::after {
      left: 31px;
    }
  
    /* Full-width containers */
    .timeline-2 {
      width: 100%;
      padding-left: 70px;
      padding-right: 25px;
    }
  
    /* Make sure that all arrows are pointing leftwards */
    .timeline-2::before {
      left: 60px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
    }
  
    /* Make sure all circles are at the same spot */
    .left-2::after,
    .right-2::after {
      left: 18px;
    }
  
    .left-2::before {
      right: auto;
    }
  
    /* Make all right containers behave like the left ones */
    .right-2 {
      left: 0%;
    }
  }