/**
 * SFD 2015
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2015 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage splitscreen
 * @author     degener
 * @since      04.12.2015
 * @version    $Id: splitscreen.css 1168 2016-08-02 09:48:48Z schoening $
 **/
/*  =========================================================
    0. global setting
  1. figcaption
========================================================== */
/*  =========================================================
    0. global setting
========================================================== */
@media screen {
  .splitScreen {
    width: 100%;
    float: left;
    display: table;
    margin-bottom: 24px;
  }
  .splitScreen > .col {
    display: table-cell;
    vertical-align: top;
  }
  .splitScreen > .col.col_2 {
    width: 50%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .splitScreen.surveyMap {
    background-color: #d6d7d6;
  }
  .splitScreen.list > .nano {
    height: 80vh;
  }
  .splitScreen.list > .nano > .nano-content {
    height: 80vh;
    padding-right: 30px;
  }
  .splitScreen.list .hide {
    display: none;
  }
  .splitScreen.list .open {
    display: table-cell;
  }
  .splitScreen.gallery {
    height: 500px;
  }
}
@media only screen and (max-width: 1700px) {
  .splitScreen.list > .col.col_2:first-of-type {
    width: 60%;
  }
  .splitScreen.list > .col.col_2:last-of-type {
    width: 40%;
  }
}
@media only screen and (max-width: 950px) {
  .splitScreen.surveyMap > .col:last-child {
    display: none;
  }
  .splitScreen.list > .col.col_2.open {
    width: 100%;
    display: table-cell;
  }
  .splitScreen.list > .col.col_2.hidden {
    width: 100%;
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  .splitScreen.gallery > .col.col_2.open {
    width: 100%;
    display: table-cell;
  }
  .splitScreen.gallery > .col.col_2.hidden {
    width: 100%;
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .splitScreen.surveyMap {
    display: none;
  }
}
@media only screen and (max-width: 500px) {
  .splitScreen.gallery {
    height: auto;
  }
}
/*  =========================================================
    1. figcaption
========================================================== */
@media screen {
  #surveyMap {
    width: 100%;
    min-height: 560px;
    float: left;
    position: relative;
    background: transparent url(/portal/assets/images/environment/mapSurvay.svg) no-repeat 100% 100%;
    background-size: contain;
  }
  #surveyMap figcaption {
    width: calc(100% - 40px);
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #fff;
    padding: 15px;
    font-family: 'Neutra Demi';
    font-style: normal;
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: left;
  }
  #surveyMap figcaption .col {
    width: 50%;
    border-left: 20px solid transparent;
  }
  #surveyMap figcaption .col:first-child {
    border-right: 20px solid transparent;
    border-left: none;
  }
  #surveyMap figcaption .surveyButton {
    padding-top: 5px;
    padding-bottom: 5px;
    float: right;
  }
  .routing form > label {
    font-family: 'Neutra Demi';
    font-size: 1rem;
    text-transform: uppercase;
    margin-right: 20px;
    margin-top: 13px;
  }
  .routing form ul li {
    margin-right: 5px;
  }
  .routing form ul li:last-child {
    margin-right: 0;
  }
  .routing form ul li label {
    color: #d6d6d6;
    font-size: 2.2rem;
  }
  .routing form ul li label:before {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  .routing form ul li label[for^="routingVehicleCar"]:before {
    content: '\e97f';
  }
  .routing form ul li label[for^="routingVehicleBycicle"]:before {
    content: '\e980';
  }
  .routing form ul li label[for^="routingVehiclePublic"]:before {
    content: '\e981';
  }
  .routing form ul li label[for^="routingVehiclePerPedes"]:before {
    content: '\e9b0';
  }
  .routing form ul li input[type="radio"]:checked + label {
    color: #787878;
  }
  .routing form input {
    margin-top: 5px;
  }
  .routing form button {
    margin-top: 10px;
    width: 100%;
  }
}
@media screen and (min-width: 1950px) {
  #surveyMap {
    background-position-y: 20px;
  }
}