/*
Theme Name: Bad Pixel 2023
Author: www.badpixel.fi
Author URI: www.badpixel.fi
Description: Teeman on toteuttanut © Bad Pixel Oy. | Teeman jälleenmyynti kielletty, ilman kirjallista lupaa.
Version: 0.1
Copyright: Kaikki oikeudet muutoksiin pidätetään © Bad Pixel Oy
*/

/* 
@import "assets/css/plugins.css"; 
@import "assets/css/style.css"; 
*/

/*--------------------------------------------------------------
# KOODIT
Keltainen: 	#f9b659
Tummaharmaa	#121212
Musta		#000

100 = thin
300 = light
400 = regular
500 = medium
700 = bold
800 = extra bold
900 = black
--------------------------------------------------------------*/

:root {
  --color-bg_1: #ffffff;
  --color-bg_2: #000000;
  --color-bg_3: #e3a506;



  --color-border_1: #ffffff;
  --color-border_2: #000000;
  --color-border_3: #e3a506;

  
  --color-font_1: #ffffff;
  --color-font_2: #16181a;
  --color-font_3: #e3a506;

  --color-bg_1: #ffffff;
  --color-bg_2: #16181a;
  --color-bg_3: #e3a506;
 
  --color-bg-button_1: #ffffff;
  --color-bg-button_2: #000000;
  --color-bg-button_3: #e3a506;

  --font-family-1: 'Oswald', sans-serif;

  --font-weight-1: 100; /* Thin */
  --font-weight-3: 300; /* Light */
  --font-weight-8: 800; /* Extrabold */

}

body {
  line-height: 1.8em;
}

.pointer {
  z-index: 10000000000000;
}

.archive .blog-posts.ajankohtaista-blogiwrapper .blogi-artikkeli div {
  /* border-bottom: 2px solid #e3a506; */
  border-top: 1px dotted #e3a506;
}

#murot .breadcrumb-item+.breadcrumb-item::before {
  display: none;
}

.home-slider-content .large-title-bold,
.home-slider-content .medium-title {
  font-size: 35px;
}

.home .portfolio-content .portfolio-content-inner {
  min-height: auto;
}

.muita-palveluita .portfolio-column-slider {
	width: 100%;
	height: 200px;
	position: relative;
}
.home .muita-palveluita .muita-palveluita-otsikko {
  display: none;
}

.home .muita-palveluita .title-style {
  font-size: 20px;
}

.home .client-list .brand-box {
  height: 120px;
  width: 120px;
}
.home .client-list li {
  height: 200px;
}


/* Hinnasto */
.price-table .price-list li {
	font-size: 1.2em;
	line-height: 18px
}


#CybotCookiebotDialog {
  z-index: 5 !important;
}

/* Branding on the banner */
a#CybotCookiebotDialogPoweredbyCybot,
div#CybotCookiebotDialogPoweredByText {
  display: none;
}

/* Branding on the Privacy trigger */
#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo {
    display: none;
}

/* Navin hamppari scroll*/
.midnightInner {
  overflow:  hidden !important;
}

/* Käyttö background: var(--color-bg_1); */

#pyyda-tarjous-1 .flex-min-height-inner {
  min-height: 500px;
}

.mainostoimistot-footer h3 {
	padding: .3em 0em;
}
@media (max-width: 767px) {
  .mainostoimistot-footer {
    display: none;
  }
}

.section-single .container,
.archive-single.container {
  max-width: 1000px;
  font-size: 16px;
}

.alasivu-videolla-1 .video-wrapper-alasivu{
  position: relative;
  width: 100%;
  height: 100%;
}
.alasivu-videolla-1 .video-wrapper-alasivu video {
  position: absolute;
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  min-height: auto;
  min-width: auto;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}


.kuva-small {
  width: 100%;
  height: auto;
  max-width: 200px;
  margin: auto;
}
.f-secure-kuva {
  max-width: 130px;
}

.client-list .empty-spot-box span span {
  height: 30px;
}

/* Slider */
.home-slider {
  max-height: 80vh !important;
  border-bottom: 2px solid var(--color-border_3);
}

.home-slider .flex-min-height-inner {
  min-height: 80vh !important;
}

.introbox-1 .flex-min-height-inner {
  min-height: 65vh !important;
}


/* Nuoli alas */

.nuolialas {
  position: relative;
  width: 28px;
  display: block;
  height: 70px;
  margin: auto;
}
.nuolialas .chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.nuolialas .chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.nuolialas .chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.nuolialas .chevron:before,
.nuolialas .chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.nuolialas .chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.nuolialas .chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

.nuolialas .chevron-text {
  display: block;
  margin-top: 75px;
  margin-left: -30px;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}


.avainsanat-blogi {
  margin-top: 2em;
  padding-top: 1em;
  margin-bottom: 1em;
  border-top: 1px dotted var(--color-bg_3);
}


/* Lomake contact form 7*/

input[type=text], 
input[type=tel],
input[type=email],  
select, 
textarea {
  padding: 10px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  resize: none;
}
input[type=text], input[type=tel], input[type=email] {
  width: calc(100% - 1.5em);
}

.form-laheta, 
.form-laheta:active, 
.form-laheta:hover, 
.form-laheta:focus {
  width: 100%; 
  background: #3e3e3e !important; 
  border-radius: 0px; 
  color: #fff;
  padding: 0.5em;
}

.form-nimi, 
.form-yritys, 
.form-puh, 
.form-email, 
.form-viesti, 
.form-valitsetuote { 
  width: 100%; 
  margin-bottom: 3px; 
  max-height: 130px;
}


/* Ajanvaraus */
#fbuilder {
  border: 1px solid #bfbfbf;
  padding: 3em;
}

#fbuilder #formheader_1 {
  margin-bottom: 1em;
}

#fbuilder .pbSubmit {
  background: #e3a506 !important;
  color: #fff !important;
  padding: 15px 15px !important;
  width: 100% !important;
  max-width: 250px !important;
}

#fbuilder .captcha {
  max-width: 200px;
}
#fbuilder .captcha #captchaimg_1 {
  margin-bottom: 1em;
}

.kartoitus-1 select {
  padding: 10px;
  border: 1px solid #e3a506 !important;
  background: #fff;
  border-radius: 4px;
  resize: none;
  margin-top: 1em;
}

/* Tekstikenttien säätö */
#fbuilder .large {
  padding: 0.5em 1em !important;
  margin: 0.4em 0em 0em !important;
}
/* Valittu aika boksi */
.ahb_m2 #fbuilder .usedSlots .ahb_list {
  border: 1px solid #e3a506;
  padding: 0.7em;
  margin: 0.2em 0em;
}

/* Kalenterin hover */
.ahb_m2 #fbuilder td:not(.ui-datepicker-unselectable) a.ui-state-default:hover {
  color: #000 !important;
  background: #d1d1d1 !important;
}
/* Kalenterin active */
.ahb_m2 #fbuilder td:not(.ui-datepicker-unselectable) a.ui-state-default.ui-state-active {
  color: #fff !important;
  background: #e3a506 !important;
}
/* Kalenteriajan reunus ja valittu aika*/
.ahb_m2 #fbuilder .slots div a {
  border: 1px solid #000000 !important;
}
.ahb_m2 #fbuilder .slots div:not(.htmlUsed) a:hover {
  background: #e3a506 !important;
}


/* Listaukseen välistystä */
.list-dots li {
  margin-bottom: 1em;
}


/* Cookie */
body .cc_logo {display: none;} 
body .cc_container {padding-bottom: 47px; bottom: 80px; font-size: 14px; width: 210px;} 
body .cc_container .cc_btn {bottom: 10px;}

/* Placeholders */
::-webkit-input-placeholder { color: #6d6d6d; padding-left: 3px; }
:-moz-placeholder { color: #6d6d6d; padding-left: 3px; } /* Firefox 18- */
::-moz-placeholder { color: #6d6d6d; padding-left: 3px; } /* Firefox 19+ */
:-ms-input-placeholder { color: #6d6d6d; padding-left: 3px; }

/* Homma ok viesti */
div.wpcf7-mail-sent-ok {
    border: 3px solid #3e3e3e !important;
    color: #3e3e3e !important;
}
/* Ei mennyt nappiin */
div.wpcf7-validation-errors {
    border: 3px solid #ff7272 !important;
    color: #ff7272 !important;
}
span.wpcf7-not-valid-tip {
    color: #ff7272 !important;
}

/* Tekstiboksin hienosäätö */
div.wpcf7-response-output {
    margin: 0em 0.0em 1em !important;
}

/* Scroll popup säätö */
#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 500px;
  min-width: 300px;
  height: 80%;
  max-height: 550px;
  /*overflow-y: scroll;*/
  z-index: 100;
}

#popup .popup-inner {
    overflow-y: scroll;
    height: 100%;
    overflow-x: hidden;
}

.popuppi-1 {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgb(237 237 237 / 90%);
  width: 100%;
  height: 100%;
  display: block;
  z-index: 99;
}

#popup .btn-1 {
  border: 1px solid black;
  padding: 0.5em 2em;
  position: absolute;
  top: -1.3em;
  background: #fff;
  right: 1em;
  z-index: 1;
}


/* GrainedJS säätö */
.grained {
	width: 100%;
	height: 100%;
}


@media (max-width: 767px) {
  .footer .footer-center-mobile {
    display: inline-block;
    margin: auto;
    width: 100%;
    text-align: center;  
  }
}

@media (max-width: 767px) {
  .hide-767 {
    display: none;
  }
  .text-center-767 {
    text-align: center;
  }
}

@media (max-width: 500px) {
  .hide-500 {
    display: none;
  }
  .text-center-500 {
    text-align: center;
  }
  .margin-0-500 {
    margin: 0px;
  }
}

@media (max-width: 270px) {
  .client-list {
    display: none;
  }
}


/* Herokuva / Video */
.hero-image.mobile-only {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%, -50%);
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 1200px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}