/* ==========================================================================
   Andrejs custom styles
   ========================================================================== */

body {
    font-family: 'Montserrat', sans-serif;
    color: #262626;
    -webkit-font-smoothing: antialiased;
}


/* ---------- INPUTS, BUTTONS ---------- */

input, textarea, select {
    -webkit-appearance: none;
    border-color: #CBD5E0;
}

textarea {
resize: none;
}


input:focus, textarea:focus {
    outline: none;
    border-color: #D8D8D8;
    -webkit-transition: background-color 0.15s, color 0.15s;
    transition: background-color 0.15s, color 0.15s;
}

::-webkit-input-placeholder { color: #8C8C8C; }
:-moz-placeholder { color: #8C8C8C; }



.js .pic-upload {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.pic-upload + label {
    box-shadow: 0 0 0 2px #FFCC29;
    cursor: pointer;
    overflow: hidden;
}

.no-js .pic-upload + label {
    display: none;
}

.pic-upload:hover + label, .pic-upload:focus + label,
.pic-upload.has-focus + label {
    box-shadow: 0 0 0 4px #FD5F13;
    background-color: rgba(255, 204, 44, 0.1);

    webkit-transition: color 0.1s, box-shadow 0.1s, background-color 0.1s;
    transition: color 0.1s, box-shadow 0.1s, background-color 0.1s;
}

/* ---------- CUSTOM RADIO SELECT ----------


.r-custom-product {
  opacity: 0;
  position: absolute;
}

.r-custom-product:focus + label  {
  outline: rgba(77, 97, 171, 0.5) auto 3px;
}

.r-custom-product::selection + label  {
  background-color: red;
} */


.r-product + label, .r-r-canvas + label {
    cursor: pointer;
    overflow: hidden;
}

.r-product:checked + label, .r-canvas:checked + label {
    box-shadow: 0 0 0 2px #FD5F13;
    background-color: white;
    color: #FD5F13;
}



/* ---------- CTA STYLES ---------- */

.cta {
    background-image: linear-gradient(120deg, #FC3008 0%, #FFCC2C 100%);
    border: none;
    padding: 1em;
    -webkit-transition: background-image 0.15s, color 0.15s;
    transition: background-image 0.15s, color 0.15s;
}

.cta:hover {
    background-image: linear-gradient(120deg, #AB435B 0%, #F26420 100%);
    -webkit-transition: background-image 0.15s, color 0.15s;
    transition: background-image 0.15s, color 0.15s;
}


/* ---------- HERO STYLES ---------- */


.hero-picture {background-image: none;}
@media (min-width: 1024px) {.hero-picture {background-image: url(../img/bg_hero_couch_side.png); background-color: #f8f9fa;}}

.hero-picture-mug {background-image: none;}
@media (min-width: 1024px) {.hero-picture-mug {background-image: url(../img/bg_hero_mug_side.png); background-color: #f8f9fa;}}

.hero-picture-phone {background-image: none;}
@media (min-width: 1024px) {.hero-picture-phone {background-image: url(../img/bg_hero_phone_side.png); background-color: #f8f9fa;}}

.hero-picture-canvas {background-image: none;}
@media (min-width: 1024px) {.hero-picture-canvas {background-image: url(../img/bg_hero_canvas_side.png); background-color: #f8f9fa;}}

.hero-picture-poster {background-image: none;}
@media (min-width: 1024px) {.hero-picture-poster {background-image: url(../img/bg_hero_poster_side.png); background-color: #f8f9fa;}}

.hero-about {background-image: none;}
@media (min-width: 1024px) {.hero-about {background-image: url(../img/bg_about_side.png); background-color: #f8f9fa;}}



/* ---------- HERO STYLES ---------- */


#error_message {
    text-align: center;
    padding: 1rem;
    margin-top: 1rem;
    background-color: rgba(250, 53, 9, 0.2);
}

#error_message h3, #success_message h3 {

    font-size: 1.25rem;
}


#success_message h3 {
    text-align: center;
    padding: 1rem;
    margin-top: 1rem;
    background-color: rgba(9, 250, 9, 0.2);
}


/* ---------- TEXT HIGHLIGHT ---------- */

::selection {opacity: 0.6; background: #595858; color:#ffffff;}
::-moz-selection {opacity: 0.6; background: #595858; color:#ffffff;}


/* ---------- LINK STYLE ---------- */

a {color: #048CCA;font-weight: inherit;}
a {-webkit-transition: color 0.15s; transition: color 0.15s;}
a:hover {text-decoration: none; color: #FD5F13;}
a:focus {text-decoration: none; color: inherit;}


/* ---------- FLOATING LABEL ---------- */




.float-placeholder {
  position: absolute;
  transition: all 0.1s linear;
  color: #676767;
}


.float-input:focus + .float-placeholder,
.float-input + .float-placeholder.show {
  transform: translateY(-26%);
  font-size: 75%;
  color: #bfbfbf;
}