/* -------------------------------------------------------------------------- */
/* index.css                                                                  */
/* -------------------------------------------------------------------------- */

#main > div:not(.col-l-spacer) {
    padding: 10px;
}

#main-top {
    background-color: rgba(245, 245, 245, 1.0);
}

#carousel {
    height: 200px;
}

#carousel div.carousel-inner,
#carousel div.item {
    height: 100%;
}

#carousel div.item {
    padding: 10px;
    font-size: 0.9em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#carousel div.solutions-overview {
    padding: 0;
}

#carousel div.solutions-overview > a {
    height: 100%;
    padding: 10px;
    display: block;
}

#carousel div.item-inner {
    line-height: 1;
}

#carousel div.item.solutions-overview {
    background-image: url(../../img/content/home/banner/solutions.jpg);
}

#carousel div.item.solutions-migration {
    background-image: url(../../img/content/solutions/migration/header.jpg);
}

#carousel div.item.solutions-optimization {
    background-image: url(../../img/content/solutions/optimization/header.jpg);
}

#carousel div.item.solutions-analysis {
    background-image: url(../../img/content/solutions/analysis/header.jpg);
}

#carousel div.item.solutions {
    background-image: url(../../img/content/home/banner/solutions.jpg);
}

#carousel div.item.news {
    background-image: url(../../img/content/home/banner/news.jpg);
}

#carousel div.item.events {
    background-image: url(../../img/content/home/banner/events.jpg);
}

#carousel div.item.webinars {
    background-image: url(../../img/content/home/banner/events.jpg);
}

#carousel div.item.papers {
    background-image: url(../../img/content/home/banner/events.jpg);
}

#carousel div.item.mugm {
    background-image: url(../../img/content/home/banner/mugm.jpg);
}

#carousel div.item.custom {
    background-image: url(../../img/content/home/banner/news.jpg);
}

#carousel div.carousel-caption {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
}

#carousel div.carousel-caption div {
    padding: 5px;
    font-size: 0.9em;
    color: rgba(51, 51, 51, 1.0);
    background-color: rgba(102, 255, 153, 1.0);
    text-shadow: none;
    display: inline-block;
}

#carousel div.carousel-caption a {
    color: rgba(204, 0, 0, 1.0);
}

#carousel div.carousel-caption span.glyphicon {
    margin-right: 5px;
    font-size: 0.8em;
}

#carousel div.solution-header {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 1.0);
    font-weight: 700;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}

#carousel div.solutions-overview > * {
    text-decoration: none;
}

#carousel div.solutions-overview div.solution-header {
    background-color: rgba(0, 51, 171, 1.0);
}

#carousel div.solutions-migration div.solution-header {
    background-color: rgba(123, 88, 166, 1.0);
}

#carousel div.solutions-optimization div.solution-header {
    background-color: rgba(255, 143, 42, 1.0);
}

#carousel div.solutions-analysis div.solution-header {
    background-color: rgba(60, 123, 199, 1.0);
}

#carousel div.solution > div {
    display: flex;
}

#carousel div.solutions-overview div.box-wrapper {
    width: 100%;
    display: flex;
}

#carousel a.box,
#carousel div.box {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 1.0);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
}

#carousel div.solutions-overview div.box {
    justify-content: space-between;
}

#carousel div.solutions-overview div.box-migration,
#carousel div.solutions-migration a.box {
    background-color: rgba(123, 88, 166, 1.0);
}

#carousel div.solutions-overview div.box-optimization,
#carousel div.solutions-optimization a.box {
    background-color: rgba(255, 143, 42, 1.0);
}

#carousel div.solutions-overview div.box-analysis,
#carousel div.solutions-analysis a.box {
    background-color: rgba(60, 123, 199, 1.0);
}

#carousel div.box-title {
    font-size: 1.0em;
    font-weight: 700;
    line-height: 1.2em;
}

#carousel div.solutions-overview div.box-title {
    font-size: 0.8em;
}

#carousel a.tool-description,
#carousel div.tool-description {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 1.0);
    line-height: 1.0em;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: space-between;
}

#carousel div.solutions-overview div.tool-description {
    color: rgba(51, 51, 51, 1.0);
    background-color: rgba(255, 251, 204, 0.9);
    border: 2px solid rgba(255, 251, 204, 1.0);
}

#carousel div.solutions-migration a.tool-description {
    background-color: rgba(123, 88, 166, 0.8);
    border: 2px solid rgba(123, 88, 166, 1.0);
}

#carousel div.solutions-optimization a.tool-description {
    background-color: rgba(255, 143, 42, 0.8);
    border: 2px solid rgba(255, 143, 42, 1.0);
}

#carousel div.solutions-analysis a.tool-description {
    background-color: rgba(60, 123, 199, 0.8);
    border: 2px solid rgba(60, 123, 199, 1.0);
}

#carousel div.solutions-overview div.tool-description strong {
    color: rgba(204, 51, 51, 1.0);
}

#carousel span.tool-description-details {
    margin: 10px 0;
}

#carousel span.tool-description-more {
    font-style: italic;
    align-self: flex-end;
    text-decoration: underline;
}

#carousel ol.carousel-indicators {
    bottom: 10px;
}

#boxes-solutions {
    display: none !important;
}

#boxes-solutions > div,
#boxes-bottom > div {
    display: flex;
}

#boxes-solutions a,
#boxes-bottom > div > a {
    width: 100%;
    text-decoration: none;
    display: flex;
}

#boxes-solutions div.box {
    width: 100%;
    margin-bottom: 10px;
    background-color: rgba(245, 245, 245, 1.0);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#boxes-solutions > div:nth-child(1) div.box {
    color: rgba(255, 255, 255, 1.0);
    background-color: rgba(123, 88, 166, 1.0);
}

#boxes-solutions > div:nth-child(2) div.box {
    color: rgba(255, 255, 255, 1.0);
    background-color: rgba(255, 143, 42, 1.0);
}

#boxes-solutions > div:nth-child(3) div.box {
    color: rgba(255, 255, 255, 1.0);
    background-color: rgba(60, 123, 199, 1.0);
}

#boxes-solutions div.box-header,
#boxes-bottom div.box-header {
    margin: 20px 20px 0;
    font-size: 1.5em;
    line-height: normal;
}

#boxes-solutions div.box-content,
#boxes-bottom div.box-content {
    padding: 5px 20px ;
    text-decoration: underline;
}

#boxes-bottom > div {
    min-height: 200px;
    flex-direction: column;
}

#box-tabs,
#box-special,
#box-applications {
    width: 100%;
    margin-bottom: 10px;
}

#box-tabs {
    background-color: rgba(255, 188, 33, 1.0);
    display: flex;
    flex-direction: column;
    flex: 1;
}

#box-tabs ul.ui-tabs-nav a {
    padding: 5px;
    font-weight: 700;
}

#box-tabs div.title {
    margin: 10px 0;
}

#box-tabs div.title a {
    text-decoration: none;
    display: inline-block;
}

#box-tabs div.title a:hover {
    text-decoration: underline;
}

#box-tabs-latest label {
    color: rgba(51, 51, 51, 0.66);
    font-weight: 700;
}

#box-tabs-latest hr {
    margin-top: -4px;
}

#box-applications-wrapper > div.row {
    display: flex;
}

#box-special-wrapper > a,
#box-applications-wrapper > div.row:nth-child(2) {
    flex: 1;
}

#box-semiwiki,
#box-semiwiki img,
#box-flyer,
#box-flyer img {
    width: 100%;
}

#box-semiwiki {
    margin-bottom: 10px;
}

#box-flyer {
    margin-top: 10px;
}

#box-applications {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 1.0);
    background-color: rgba(203, 61, 58, 1.0);
}

#box-applications div.box-applications-header {
    margin: 20px 20px 0;
    font-size: 2.0em;
    line-height: normal;
}

#box-applications div.box-applications-content {
    margin: 10px 20px 0;
}

#box-applications div.box-applications-content a {
    width: 100%;
    color: rgba(255, 255, 255, 1.0);
    margin-bottom: 10px;
    text-decoration: none;
    display: inline-block;
}

#box-applications div.box-applications-content a span {
    margin-right: 10px;
}

/* -------------------------------------------------------------------------- */
/* GRID VIEW                                                                  */
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 400px) {
    #carousel div.item-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; }
    #carousel div.solution { display: flex; }
    #carousel div.solutions-overview div.box-title { font-size: 1.0em; }
}

@media only screen and (max-width: 599px) {
    #carousel { height: 200px; }
    #carousel div.solution > div:last-child { display: none; }
    #carousel a.box { margin: 0; }
}

@media only screen and (min-width: 600px) {
    #main > div:not(.col-l-spacer) { padding: 20px; }
    #carousel { height: 400px; }
    #carousel div.item { padding: 20px 20%; }
    #carousel div.solutions-overview { padding: 0; }
    #carousel div.solutions-overview > a { padding: 20px 20%; display: block; }
    #carousel div.item-inner { font-size: 1.2em; }
    #carousel div.item-inner div.solution > div:first-child { margin-right: 10px; }
    #carousel div.solutions-overview div.box-wrapper { display: block; }
    #carousel div.carousel-caption div { padding: 20px; font-size: 1.5em; }
    #carousel div.carousel-caption span:not(.glyphicon) { display: block; }
    #boxes-solutions { display: inline-flex; }
    #boxes-solutions > div:nth-child(1) div.box { margin: 0 0 20px 0; }
    #boxes-solutions > div:nth-child(2) div.box { margin: 0 0 20px 20px; }
    #boxes-solutions > div:nth-child(3) div.box { margin: 0 0 20px 20px; }
    #boxes-solutions div.box-header { font-size: 2.0em; }
    #box-tabs, #box-special, #box-semiwiki { margin-bottom: 20px; }
    #box-flyer { margin-top: 20px; }
}

@media only screen and (min-width: 1024px) {
    #carousel div.item-inner { font-size: 1.5em; }
    #boxes-bottom { display: inline-flex; }
    #box-tabs { margin: 0; }
    #box-special { margin: 0 0 0 20px; }
    #box-semiwiki { margin: 0 0 20px 20px; }
    #box-applications { margin: 0 0 0 20px; }
    #box-flyer { margin: 20px 0 0 20px; }
}