@import "https://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin-ext&.css";
@import "/css/blueprint/reset_clearfix.min.css";
/*---------------------------------------------------
    LESS Elements 0.6
  ---------------------------------------------------
    A set of useful LESS mixins by Dmitry Fadeyev
    Special thanks for mixin suggestions to:
      Kris Van Herzeele,
      Benoit Adam,
      Portenart Emile-Victor,
      Ryan Faerman

    More info at: http://lesselements.com
-----------------------------------------------------*/
@font-face {
  font-family: 'Grotex-Regular';
  src: url('../Fonts/Grotex-Regular.woff2') format('woff2');
}
.slick-slider div {
  transition: .3s all;
}
.custom-font {
  font-family: Grotex-Regular;
}
input {
  border-radius: 0;
}
textarea {
  border: 1px solid black;
  border-radius: 0;
}
* {
  font-family: Grotex-Regular;
}
strong {
  font-family: Grotex-Regular;
}
hr {
  border-color: black;
}
/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

.center {
  margin: 0 auto;
  text-align: center;
}
.center  > DIV {
  text-align: left;
}
.box-sizing,
.boxsizing {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */

}
.left {
  float: left;
}
.right {
  float: right;
}
IMG {
  display: block;
}
EM {
  font-style: italic;
  color: black;
}
html,
button,
input,
select,
textarea {
  color: #333333;
  font-family: Grotex-Regular;
}
html {
  overflow-y: scroll;
  background-color: white;
  height: 100%;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px red inset;
}
body {
  font-family: Grotex-Regular;
  color: black;
  font-size: 16px;
  position: relative;
  margin: 0;
  /*min-height: 100%;*/

}
body:before {
  content: "large";
  display: none;
  /* Prevent from displaying. */

}
::-moz-selection {
  background: blue;
}
::selection {
  background: blue;
}
::-webkit-input-placeholder {
  color: black;
}
::-moz-placeholder {
  color: black;
}
::-moz-placeholder {
  color: black;
}
::-ms-input-placeholder {
  color: black;
}
H2 {
  font-size: 21px;
}
H2.underline {
  border-bottom: 1px solid black;
}
A {
  color: black;
}
A:hover {
  text-decoration: none !important;
}
A:visited {
  color: black;
  text-decoration: none !important;
}
.uk-navbar {
  background-color: white;
}
.hidden {
  display: none;
}
.uk-container {
  max-width: 100%;
  padding: 0;
}
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */

}
#header {
  width: 100%;
  position: fixed;
  z-index: 999;
  padding: 0;
  color: white;
  background-color: red;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-transform: uppercase;
  overflow: hidden;
}
.header_holder {
  height: 40px;
}
a.no_underline {
  text-decoration: none !important;
  color: black !important;
}
.compensate-for-scrollbar {
  margin: 0 !important;
}
.menu,
.menu_ {
  display: none;
}
.motherDiv {
  display: block;
  margin: 0 auto;
}
.motherDiv .leftContent {
  float: left;
  position: fixed;
  width: 50%;
}
.motherDiv .leftContent .inside {
  height: calc(100vh - 40px);
}
.motherDiv .leftContent .inside .container {
  /*font-size: 55px;*/
  font-size: 53px;
  line-height: 60px;
  color: red;
  text-transform: uppercase;
  border-right: 2px solid red;
  border-bottom: 2px solid red;
  padding: 20px;
  cursor: pointer;
  height: calc(33.1% - 39px);
}
.motherDiv .leftContent .inside .container .image {
  display: inline-block;
  width: 40px;
}
.motherDiv .leftContent .inside .container .hidden {
  display: none;
}
.motherDiv .leftContent .inside .container:hover {
  background-color: red;
  color: white !important;
}
.motherDiv .leftContent .inside .container:hover .hidden {
  display: inline-block;
}
.motherDiv .leftContent .inside .container:hover .visible {
  display: none;
}
.motherDiv .leftContent .inside .borders {
  border-top: 2px solid white;
}
.motherDiv .leftContent .inside .selected .visible {
  display: none;
}
.motherDiv .leftContent .inside .selected .hidden {
  display: inline-block;
}
.motherDiv .rightContent {
  float: right;
  width: 50%;
  height: 100%;
}
.motherDiv .rightContent .inside {
  padding: 20px 0 20px 0;
  color: red;
}
.motherDiv .rightContent .inside .survey {
  padding: 0 20px 0 20px;
}
.motherDiv .rightContent .inside .survey #videoUpload {
  display: none;
}
.motherDiv .rightContent .inside .survey .photovideo {
  position: absolute;
  color: white;
  bottom: 50px;
  left: 10px;
  z-index: 9999;
  outline: 0;
}
.motherDiv .rightContent .inside .survey .clickable {
  cursor: pointer;
}
.motherDiv .rightContent .inside .survey .clickable:hover {
  text-decoration: underline;
}
.motherDiv .rightContent .inside .survey .uploadedPhotos {
  display: none;
  padding-left: 10px;
  position: absolute;
  top: 215px;
  color: white;
}
.motherDiv .rightContent .inside .survey .footer_text {
  font-size: 10px;
  line-height: 15px;
  padding-left: 10px;
  min-height: 58px;
}
.motherDiv .rightContent .inside .survey table {
  table-layout: fixed;
  width: 100%;
}
.motherDiv .rightContent .inside .survey table tr th,
.motherDiv .rightContent .inside .survey table tr td {
  line-height: 17px;
}
.motherDiv .rightContent .inside .survey table tr th {
  padding-left: 10px;
}
.motherDiv .rightContent .inside .survey table tr td {
  padding-bottom: 17px;
}
.motherDiv .rightContent .inside .survey .textbox {
  width: calc(100% - 20px);
  background-color: red;
  border: 0;
  outline: 0;
  color: white;
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px;
  padding-top: 5px;
}
.motherDiv .rightContent .inside .survey .textarea {
  overflow: hidden;
  resize: none;
  width: calc(100% - 20px);
  background-color: red;
  border: 0;
  outline: 0;
  color: white;
  padding: 2px;
  /*height je ovisan o tome kako se unosi tekst (Home.ascx jquery)*/
  height: calc(200px - 5px);
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px;
  padding-top: 5px;
}
.motherDiv .rightContent .inside .survey .sButton {
  padding-top: 35px;
}
.motherDiv .rightContent .inside .survey .checkbox {
  display: inline-block;
  height: 23px;
}
.motherDiv .rightContent .inside .survey .checkbox label {
  position: relative;
  /*min-height: 34px;*/
  display: block;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}
.motherDiv .rightContent .inside .survey .checkbox label:hover {
  text-decoration: underline;
}
.motherDiv .rightContent .inside .survey .checkbox label:before {
  content: '';
  position: absolute;
  right: -20px;
  top: 0;
  margin: 4px;
  width: 7px;
  height: 7px;
  border: 1px solid red;
  float: right;
}
.motherDiv .rightContent .inside .survey .checkbox label:after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  position: absolute;
  float: right;
  top: 5px;
  right: -15px;
}
.motherDiv .rightContent .inside .survey .checkbox input[type="checkbox"] {
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
  margin-left: -20px;
}
.motherDiv .rightContent .inside .survey .checkbox input[type="checkbox"]:checked ~ label:after {
  background-color: red;
}
.motherDiv .rightContent .inside .survey .checkbox input[type="checkbox"]:focus + label::before {
  outline: 0;
}
.motherDiv .rightContent .inside .answer {
  display: none;
  font-size: 20px;
  line-height: 25px;
}
.motherDiv .rightContent .inside .answer .testimony:first-child {
  padding: 0 20px 0 20px;
}
.motherDiv .rightContent .inside .answer .testimony {
  text-transform: uppercase;
  padding: 20px 20px 0 20px;
}
.motherDiv .rightContent .inside .answer .content {
  padding: 0 20px 0 20px;
}
.motherDiv .rightContent .inside .answer .attachments {
  padding-top: 6px;
  /*padding-bottom: 30px;*/
  position: relative;
}
.motherDiv .rightContent .inside .answer .attachments .fancybox img {
  max-height: 535px;
  width: 100%;
  object-fit: cover;
  /*object-fit: contain;*/

  /*image-orientation: from-image;*/

}
.motherDiv .rightContent .inside .staticText {
  display: none;
  font-size: 40px;
  line-height: 45px;
  padding: 0 20px 0 20px;
  font-family: Grotex-Regular !important;
}
.motherDiv .rightContent .inside .staticText .footer_text {
  font-size: 10px;
  line-height: 15px;
  margin-top: 135px;
}
.playbutton {
  background-image: url('../images/play.png');
  background-repeat: no-repeat;
  background-size: 60px;
  height: 70px;
  width: 70px;
  position: absolute;
  top: 44%;
  left: 48%;
}
.marquee {
  overflow: hidden;
}
.selected {
  background-color: red;
  color: white !important;
}
.submit {
  background-color: red;
  color: white;
  border: 0;
  padding: 10px;
  cursor: pointer;
  outline: 0;
  font-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
.fancybox-button--zoom,
.fancybox-button--play {
  display: none !important;
}
.fancybox-button--arrow_right {
  background-image: url('/images/arrow_right.png') !important;
  background-position: 71% 49% !important;
  background-size: 12px !important;
  background-repeat: no-repeat !important;
}
.fancybox-button--arrow_right div svg {
  display: none;
}
.fancybox-button--arrow_left {
  background-image: url('/images/arrow_left.png') !important;
  background-position: 32% 49% !important;
  background-size: 12px !important;
  background-repeat: no-repeat !important;
}
.fancybox-button--arrow_left div svg {
  display: none;
}
.fancybox-button--thumbs {
  background-image: url('/images/more_images.png') !important;
  background-position: 50% 50% !important;
  background-size: 15px !important;
  background-repeat: no-repeat !important;
}
.fancybox-button--close {
  background-image: url('/images/X.png') !important;
  background-position: 50% 50% !important;
  background-size: 15px !important;
  background-repeat: no-repeat !important;
}
.fancybox-button svg path {
  display: none !important;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 767px) and (max-width: 1220px), only screen and (min-moz-device-pixel-ratio: 2) and (min-width: 767px) and (max-width: 1220px), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 767px) and (max-width: 1220px), only screen and (min-device-pixel-ratio: 2) and (min-width: 767px) and (max-width: 1220px), only screen and (min-resolution: 192dpi) and (min-width: 767px) and (max-width: 1220px), only screen and (min-resolution: 2dppx) and (min-width: 767px) and (max-width: 1220px), only screen and (min-width: 767px) and (max-width: 1220px) {
  body:before {
    content: "tablet";
  }
  .container {
    font-size: 32px !important;
    line-height: 35px !important;
  }
  .staticText {
    font-size: 20px !important;
    line-height: 30px !important;
  }
  .uk-container {
    padding: 0;
  }
  .survey .checkbox {
    width: 100%;
  }
  .survey .checkbox label {
    width: 95%;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px), only screen and (max-width: 767px), all and (max-width: 767px) {
  body:before {
    content: "smartphone";
  }
  .container {
    font-size: 25px !important;
    line-height: 30px !important;
  }
  .staticText {
    font-size: 16px !important;
    line-height: 23px !important;
  }
  .uk-container {
    padding: 0;
  }
  .menu {
    display: block;
  }
  .menu_ {
    display: block;
    padding: 0;
    top: 40px;
  }
  .menu_ .leftContent {
    background-color: white;
    z-index: 99;
  }
  .menu_ .leftContent .inside {
    height: auto;
  }
  .menu_ .leftContent .inside .container {
    height: auto;
  }
  .motherDiv {
    overflow: hidden;
  }
  .motherDiv .leftContent {
    width: 101%;
    float: none;
    position: relative;
  }
  .motherDiv .leftContent .inside .container:hover {
    background-color: white;
    color: red !important;
  }
  .motherDiv .leftContent .inside .container .image {
    width: 20px !important;
  }
  .motherDiv .leftContent .inside .container .visible {
    display: inline-block !important;
  }
  .motherDiv .leftContent .inside .container .hidden {
    display: none !important;
  }
  .motherDiv .leftContent .inside .selected {
    color: red !important;
    background-color: white;
  }
  .motherDiv .rightContent {
    width: 100%;
    float: none;
    position: relative;
  }
  .motherDiv .survey {
    padding: 0 !important;
  }
  .motherDiv .survey .checkbox {
    width: 100%;
    line-height: 23px !important;
  }
  .motherDiv .survey .checkbox label {
    width: 95%;
  }
  .motherDiv .survey #videoUpload {
    width: 100%;
  }
  .motherDiv .survey #videoUpload .podaci input[type="text"] {
    width: 90%;
  }
  .motherDiv .answer .testimony {
    font-size: 16px;
    line-height: 23px;
  }
  .motherDiv .answer .content {
    font-size: 16px;
    line-height: 23px;
  }
  .mandatory {
    line-height: 31px;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 460px), only screen and (min-moz-device-pixel-ratio: 2) and (max-width: 460px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 460px), only screen and (min-device-pixel-ratio: 2) and (max-width: 460px), only screen and (min-resolution: 192dpi) and (max-width: 460px), only screen and (min-resolution: 2dppx) and (max-width: 460px), only screen and (max-width: 460px), all and (max-width: 460px) {
  
}