html {
  font-size: 30px;
}

body {
--palette1_dark: #212931;
  --palette1_bgrey: #435969;
  --palette1_pale: #e7f0ed;
  --palette1_yellow: #feca01;
  --palette1_orange: #f87f01;
  
  --palette2_turquoise: #54afbc;
  --palette2_hay: #ffb449;
  --palette2_borange: #fe5c36;
  --palette2_graphite: #434343;

  --palette_hld1: #e75b34;
  --palette_hld2: rgba(242,58,0,1);

  --palette3_skybl: rgb(145, 203, 226);
  --palette3_apricot: rgb(233, 133, 67);
  --palette3_burntorg: rgb(197, 69, 37);
  --palette3_tcotta: rgb(160, 63, 54);
  --palette3_rosewood: rgb(90, 39, 39);
  --palette3_drkbrown: #221f1c;

  --palette_light: rgb(255, 255, 255);
  --palette_contrast: var(--palette3_skybl);
  --palette_dark: var(--palette3_drkbrown);
  --palette_1: var(--palette3_burntorg);
  --palette_2: var(--palette3_apricot);
  --palette_3: var(--palette3_tcotta);
  --palette_4: var(--palette3_rosewood);
  --palette_sand: rgb(226, 248, 255);

  --font_par: 'Baloo Tamma 2', serif;
  --font_head: 'Josefin Sans', sans-serif;

  margin: 0; padding: 0; position: absolute;
}

.hld_main, .hld_service, .hld_contact, .hld_info, .hld_form {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100vw;
  overflow-x: hidden;
  background-color: var(--palette1_dark);
}

.container {
  margin: 0;
  padding: 0;
  display: block;
}


@keyframes text_throw {
  0% {transform: translateX(100vw); opacity: 0.0;}
  100% {transform: translateX(inherit); opacity: inherit;}
}

.slide_right {
  animation-name: text_throw;
  animation-duration: 0.75s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.header_box {
  text-align: center;
  margin: auto;
  width: 100vw;
  height: 65px;
  z-index:1000;
  overflow: hidden;
  --header_height: 50px;

  background-image: url(/content/seina_1600p.jpg);
  background-attachment: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.header {
  width: 100%;
  max-width: 1280px;
  height: var(--header_height);
  margin: auto;
  overflow: hidden;
  z-index: 1001;
}

.logo {
  --h_logo_h: calc(var(--header_height)*0.8);
  float: left;
  margin: auto;
  height: var(--h_logo_h);
  width: calc(var(--h_logo_h)*4.5);
  padding: 7.5px;
  display: block;
}

.header a:not(.logo) {
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  font-family: var(--font_par);
  line-height: 30px;
  padding: 10px 20px;

  float: left;
  text-align: center;
    
  color: var(--palette_light);
  border-bottom: 0.7vh transparent solid;
  display: block;
}
  
.header a:hover, .ask_more:hover {
background-image: url(/content/pixil-frame-1.png);
background-repeat: repeat;
background-size: 2px;
}

  
.header a.active {
  background-color: var(--palette_hld2);
  border-bottom: transparent solid;
}


.header-right {
  float: right;
  display: block;
  overflow: hidden;
  height: 70px;
}
  

.header_stripe, .footer_stripe {
  width: 200vw;

  overflow: hidden;
  height: 15px;


  background: rgb(179,42,0);
  background: linear-gradient(90deg, rgba(179,42,0,1) 0%, rgba(113,28,1,1) 8%, rgba(94,23,0,1) 22%, rgba(163,39,0,1) 30%, rgba(179,42,0,1) 39%, rgba(242,58,0,1) 46%, rgba(179,42,0,1) 50%, rgba(113,28,1,1) 58%, rgba(94,23,0,1) 72%, rgba(163,39,0,1) 80%, rgba(179,42,0,1) 89%, rgba(242,58,0,1) 96%, rgba(179,42,0,1) 100%); 
    
  transform: translateX(-100vw);
  animation-name: striping;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes striping {
  0% {transform: translateX(-100vw);}
  100% {transform: translateX(0vw);}
  
}



/* Etusivu 
>
>
>
>
*/

.content_main {
  width: 100%;
  margin: auto;
  text-align: center;
}

.intro_container {
  background-image: url(/content/variroiske_1600p.jpg);
  background-attachment: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom; 
  filter: saturate(110%) hue-rotate(165deg);
  padding: 0;

  width: 100%
}

.intro_container::after {
  width: inherit;
  height: inherit;
  content: "";
  background-color: rgb(46, 211, 211);
  display: block;
  margin: 0; padding: 0;
}

.intro_box {
  height: 100vh;
  text-align: center;
  margin: auto;
  width: 66%;
  font-size: 20vh;
  opacity: 0.9;
}

.logo_type {
  padding-top: 33vh;
  width: 100%;
  margin: auto;
  text-align: center;
  z-index: 4;
  display: block;
  filter: drop-shadow(0.03rem 0.03rem 0px rgba(0, 0, 0, 0.8))
}

.suva {
  text-align: center;
  margin: auto;
  display: block;
  font-weight: 500;
  font-size: 6.5vw;
  color: rgb(255, 255, 255);
  font-family: 'Condiment';
  z-index: 3;
  opacity: 1;
  filter: drop-shadow(0.01rem 0.01rem 0px rgba(0, 0, 0, 0.8))
}

.split {
  position: relative;
  --splitheight: 13vh;
  height: 13vh;
  margin: calc(var(--splitheight) * -0.2) 0 calc(var(--splitheight) * -0.3);
  width: 100%;
  z-index: 100;
  background: var(--palette_hld2);
  clip-path: polygon(0% 80%, 100% 100%, 100% 0%, 0% 30%);
}

.flip {
  -moz-transform:    scaleX(-1); /* Gecko */
  -o-transform:      scaleX(-1); /* Opera */
  -webkit-transform: scaleX(-1); /* Webkit */
  transform:         scaleX(-1); /* Standard */
}

.welcome_container:before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  display: block;
  top: 0;
  background-color: rgba(209, 209, 209, 0.822);
}

.welcome_container {
  position: relative;
  background-image: url(/content/ikkuna_1600p.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
  background-position: bottom;
}
.welcome_box {
  scale: 0.9;
  width: 66vw;
  text-align: center;
  display: inline-block;
  opacity: 1;
  padding-bottom: 4rem;
}

.welcome_box label {
  margin-top: 8vh;
  color: var(--palette_light);
  font-size: 12vh !important;
  font-weight: 900;
  filter: drop-shadow(0.01rem 0.01rem 0px rgba(0, 0, 0, 0.8))
}

.welcome_box a {
  filter: drop-shadow(0.01rem 0.01rem 0px rgba(0, 0, 0, 0.8))
}

.para p {
  text-align: center;
  color: var(--palette_light);
  font-weight: 400;
  font-family: var(--font_head);
  font-size: 7vh;
  display: block;
  filter: drop-shadow(0.01rem 0.01rem 0px rgba(0, 0, 0, 0.8))
}

.welcome_box p:first-of-type {
  margin-top: 4vh;
}

.welcome_box a {font-size: 7vh;}


.contact_box {
    background-color: #1a171a;
    width: 100%;
    text-align: center;
    padding-bottom: 10vh;
    scroll-snap-align: start none;
}

.logo_contact {
  width: 6.6rem;
  margin-top: 10vh;
}

.contact-header {
  display: inline-block;
  text-align: center;
}

#contact_header {
  color: var(--palette_light);
  margin-bottom: 7.5vh;
}


/* Lomakkeen tulokset */

.form_box {
  width: 100%;
  padding: 10vh 0vh 20vh;
}

.hld_form {
  min-height: 100vh;
}

.form_box .intro_header {
  color: var(--palette1_pale);
}

.form_box p {  
  font-family: var(--font_par);
}

/* Palvelut
>
>
>
>
*/


.services_box {
  width: 100%;
  background-color: rgb(248, 255, 255);
}

.services_intro {
  padding: 50px 0px 25px;
}

.intro_header label {
  font-size: 70px;
  font-family: var(--font_head);
  font-weight: bolder;
  display: block;
}

.intro_header label::after {
  content: "";
  position: absolute;
  width: 0.7em;
  height: 0.125em;
  background-color: var(--palette_hld2);
  text-align: left;
}

.services_intro p {
  color: #1a171a;
  font-size: 32px;
  font-family: var(--font_par);
  display: block;
}

.ask_more {
  position: relative;
  color: var(--palette_light);
  font-family: var(--font_par);
  font-size: 3vw;
  display: block;
  text-decoration: none;
  z-index: 1000;
}

.ask_more::after {
  content: " >>";
  white-space: pre;
  display: inline-block;
  color: var(--palette_hld2);

}

.case_container {
  position: relative;
  display: inline-block;
  height: 30vw;
  width: 100%;
  margin-bottom: -0.5vw;
  background: transparent;
  overflow: hidden;
  text-align: center;
}

.case_text_container {
  padding: 0px 5%;
  width: 35%;
  height: 100%;
  overflow: hidden;
  display: inline-block;
}

.case_text_container label {
  padding-top: 1.5vw;
  color: var(--palette_light);
  font-family: var(--font_head);
  font-weight: 800;
  font-size: 5vw;
  display: block;
  float: left;
  width: 100%;
}

.case_right {
  clip-path: polygon(0vw 0vw, 100vw 0vw, 100vw 30vw, 0vw 25vw );
  background-color: var(--palette_1);
  margin-bottom: -5.6vw;
}

.case_right .img_container {
  float: right;
}

.case_right .case_info {
  float: left;
}

.case_left {
  clip-path: polygon(0vw 0vw, 100vw 5vw, 100vw 30vw, 0vw 30vw );
  background-color: var(--palette_4);
  text-align: left;
}

.case_left .img_container {
  float: left;
}

.case_left .case_info {
  float: right;
}

.case_left label {
  padding-top: 5.5vw;
}



.case_info {
  float: left;
  font-family: var(--font_par);
  font-size: 2vw;
  color: var(--palette_light);
  text-align: left;
  display: block;
  list-style: none;
}

.case_info li {
  text-transform: capitalize;
  text-align: center;
  padding: 0.3vw 1.2vw 0px;
  margin: 0.2vw 0vw;
  display: inline-block;
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.144);
}

.img_container {
  position: relative;
  float: left;
  width: 55%;
  height: 100%;
  overflow: hidden;
  display: block;
}

.img_container img {
  filter: saturate(30%);
  width: 100%;
}

.img_left {
  float: right;
}

.design {
  filter: saturate(50%) !important;
}

.decal {
  transform: translateY(3%);
  scale: 1.2;
}

.bigprint {
  transform: translateY(-10%) translateX(2%);
  scale: 1.2;
  filter: saturate(50%) !important;
}

.sign {
  transform: translateY(-9%);
}

.messe {
  transform: translateY(-35%) translateX(-2%);
  scale: 0.65;
}

#messu {
  font-size: 4vw;
  text-align: left;
}

#messu_box {
  background-color: var(--palette_light);
}

.printing {
  float: right;
  transform: translateY(-5%);
}


/* Contact form
>
>
>
>
*/





form {
  width: calc(100% - 64px);
  margin: 32px;
  display: inline-block;
}


.contact-label {
  display: inline-block;
  width: 100%;
  color: var(--palette_light);
  font-size: 6vh;
  font-weight: 600;
  font-family: var(--font_head);
  margin: 10% 0 10%;
  text-align: center;
}

.container_form {
  margin: auto;
  max-width: 1280px;
  border-radius: 5px;
  background-color: #f2f2f2;
}

.container_form label {
  font-size: 0.75rem;
  color: #1a171a;
  font-weight: 100;
  font-family: var(--font_par);
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 3px 0px 16px;
  resize: vertical;
  font-family: var(--font_par);
}


.submit_container {
  box-sizing: border-box;
  resize: none;
}

input[type=submit] {
  background: rgb(179,42,0);
  background: linear-gradient(90deg, rgba(179,42,0,1) 0%, rgba(113,28,1,1) 16%, rgba(94,23,0,1) 48%, rgba(163,39,0,1) 82%, rgba(242,58,0,1) 100%);
  background-size: 100vw; 
  background-position: right;
  background-position-x: -1vw;
  filter: brightness(1.5) saturate(80%);

  padding: 7px 12px 5px;
  border: none;
  border-radius: 8px;
  cursor: pointer;

  border: transparent solid;
  
  color: var(--palette_light);
  font-weight: 800;
  font-size: 20px;
  font-family: var(--font_head);
}

.container_form input[placeholder] {
  font-size: 20px;
}

input[type=submit]:hover {
  background: rgb(179,42,0);
  background: linear-gradient(90deg, rgba(179,42,0,1) 0%, rgba(113,28,1,1) 16%, rgba(94,23,0,1) 48%, rgba(163,39,0,1) 82%, rgba(242,58,0,1) 100%);
  background-size: 100vw; 
  background-position: right;
  background-position-x: -1vw;
  filter: brightness(1.6)
}





.otsikko {
  color: var(--palette_light);
  display: inline-block;
  font-family: var(--font_head);
  font-weight: 800;
  overflow-x: hidden;
}

.otsikko::after {
  content: "";
  position: absolute;
  display: block;
  height: 0.15rem;
  width: 1rem;
  background-color: var(--palette_hld2);
}

.tinyprint {
    color: var(--palette_light);
    font-size: 1rem;
    font-family: var(--font_par);
    line-height: 150%;
    display: block;
    text-decoration: none;
}

.half-line {
  line-height: 250%;
}

footer .tinyprint {
  color: var(--palette_light);
  font-size: 1em;
  font-family: var(--font_par) !important;
  line-height: 150%;
  display: block;
  text-decoration: none;
}

/* Yhteystiedot
>
>
>
>
*/

.info_box {
  padding: 3rem 0px 2rem;
  width: 100%;
}

.info_box label {
  color: var(--palette_light);
}

.routes_container {
  width: 100%;
  text-align: center;
  background-color: var(--palette_light);
}


.map_img {
  height: 100%;
  width: 33%;
  background-color: rgba(80, 23, 5, 0.239);
  display: inline-block;
  text-align: center;
  overflow: hidden;
}

.map_img label {
  line-height: calc(375px);
}

.map_info {
  width: 66%;
  height: 100%;
  text-align: left;
  display: block;
  float: left;

}

.map_container {
  width: 1280px;
  height: calc(1280px/3);
  background-color: var(--palette_light);
  overflow: hidden;
  --padding: 1em;
  font: 2vh;
  text-align: center;
  display: inline-block;
  margin-bottom: -0.5vw;
}

.map_container p {
  font-family: var(--font_par);
  font-size: 0.8em;
  color: var(--palette_dark); 
  padding: 0px calc(var(--padding) * 1.5);
}

.map_container label {
  font-family: var(--font_head);
  color: var(--palette_dark);
  font-size: 1.5em;
  padding: var(--padding);
  display: block;
}

.info_box header {
  color: var(--palette_light);;
  font-family: var(--font_par);
  font-size: 2rem;
}

#info_label {
  margin-bottom: 2rem;
}

#hannele_info::before {
  content: "Suunnittelu";
  font-size: 1.5rem;
  color: var(--palette_sand);
}

#arto_info::before {
  content: "Myynti- ja tuotanto";
  font-size: 1.5rem;
  color: var(--palette_sand);
}

.info::before {
  display: block;
  font-family: var(--font_head);
  font-weight: 600;
  color: var(--palette_sand);
}

#info_address label {
  font-size: 1.5rem;
  font-family: var(--font_head);
  font-weight: 600;
}

#info_address::before {
  content: "• • •";
  display: block;
  line-height: 350%;
  color: var(--palette_light);
}

.tinyprint label {
  margin-bottom: -1rem;
}

.routes {
  font-family: var(--font_head);
  color: var(--palette_light);
  font-size: 2.5rem;
  padding: 1rem;
  background-color: rgb(26, 30, 37);
}




/*Footer
>
>
>
>
*/

.footer_box {
  padding-top: 0;
  margin: 0;
  width: 100vw;
  background-color: var(--palette_dark);
  font-family: var(--font_head);
  font-weight: 400;
  display: inline-block;
  text-align: center;
  display: inline-block;
  font-size: 16px;
}


.footer_upper {
  max-width: 1280px;
  width: 100%;
  padding: 2% 0vw 0vw;
  display: inline-block;
}

.footer_left {
    width: 30%;
    float: left;
    text-align: left;
    font-size: 1em;
    padding-left: 3%;
}

.footer_middle {
  width: 33%;
  float: left;
  height: 100%;
  text-align: center;
}

.footer_navigation {
  margin-top: 0.75em;
}

.footer_navigation a:hover:before {
  content: "< ";
  color: var(--palette1_yellow);
}

.footer_navigation a:hover:after {
  content: " >";
  color: var(--palette1_yellow);
}

.footer_navigation a {
  text-align: center;
  display: block;


  color: var(--palette_light);
  font-size: 1em;
  font-family: var(--font_par);
}

.footer_right {
    width: 30%;
    float: right;
    text-align: right;
    font-size: 1em;
    padding-right: 3%;
}

.title_name {
  width: calc(100%-3%);
  display: block;
}

.title_name p {  
  font-size: 1.25rem;
}

#hannele::before {
  content: "Suunnittelu";
}

#arto::before {
  content: "Myynti ja tuotanto";
}

#hannele::before, #arto::before{
  float: left;
  text-align: right;
  display: block;
  width: 50%;
  font-family: var(--font_head);
  font-weight: 600;
  padding-right: 3%;
  border-right: rgba(204, 204, 204, 0.644) 2.5px solid;
  color: var(--palette_sand);
}




.logo-box {
  display: inline-block;
  width: 3em;
  text-align: center;
  margin: 2em 0em -0.5em;
}

header .title_name {
  display: inline-block;
  margin: 25px 50px;
}

/* Skaalaus
>
>
>
>
*/

@media screen and (min-width: 900px), screen and (max-resolution: 120dpi)  {
  
  .container_form label {
    float: left;
    padding-left: 0.66em;
  }

}

@media screen and (max-width: 900px), screen and (min-resolution: 120dpi)  {

  html {
    font-size: 5vw;
  }

  .intro_box {
    height: unset;
    overflow: hidden;
    width: 90%;
  }

  .logo_type {
    padding-top: 25vh;
  }

  .suva {
    padding-bottom: 10vh;
  }



  .welcome_box {
    height: 50vh;
    width: 100%;
  }

  .para span {visibility: hidden;}

  .para p, .para a {
    font-size: 1rem;
  }
  
  .header, .header_box, .header-right {
    width: 100vw;  
    padding: 0px;
    overflow: visible;
    height: unset;
    min-width: 100%;
  }

  .header a:not(.logo) {
    text-align: center;
    min-height: 3rem;
    width: 100%;
    padding: 0;
    font-size: 1rem;
    line-height: 3rem;
    overflow: hidden;
    display: inline-block;
  } 


  .logo {
    width: 80vw;
    margin: auto;
    text-align: center;
    float: none;
    display: inline-block;
    padding-top: 5vh;
  }


  .contact_box {
    width: 100vw;
    margin: 0px;
    padding-bottom: 0px;
  }

  .container_form {
    text-align: center;
    margin: auto;
    max-width: 100vw;
    width: 100%;
    border-radius: 0px;
    border: 0px;
    padding: auto;
    overflow-x: hidden;
  }

  form input[type="text"], form textarea {
    display: block;
  }

  .img_container {
    width: 100%;
    display: block;
  }

  .case_container {
    overflow: visible;
  }


  .services_box {
    z-index: -10;
  }

  .footer_box {
    font-size: 5vw;
  }

  .footer_upper {
    padding-top: 1rem;
  }

  .footer_middle label {
    margin-top: 0.66rem;
  }

  .footer_left, .footer_right, .footer_middle {
    width: 100%;
    float: center;
    text-align: center;
    margin: auto;
    margin-bottom: 0.5rem;
    padding: 0px;
  }

  #hannele::before, #arto::before {
    line-height: inherit;
    border-right: none;
    display: block;
    text-align: center;
    width: 100%;
  }

  .tinyprint::before {
    width: 100%;
    border: none;
    float: none;
    text-align: center;
    white-space: pre-wrap;
  }
  
  .title_name {
    width: 100%;
    padding: inherit 0px;
    display: block;
  }

  .info_box {
    padding: 4rem 0px 3rem;
    width: 100%;
  }

  .routes label, .intro_header label {
    padding: initial, 0px;
    font-size: 1.8rem !important;
    display: block;
  }

  .intro_header p {
    font-size: 1.2rem;
    padding: unset 1rem;
  }

  .case_right, .case_left {
    height: auto;
    width: 100%;
    clip-path: none;
    padding: 0; margin: 0;
    text-align: center;
    overflow: hidden;
    display: block;
  }


  .case_text_container {
    text-align: center;
    float: none;
    padding: 0.6rem 0.3rem 0.7rem !important;
  }

  .case_text {
    margin-top: 0 !important;
    padding-top: 0 !important;
    float: none;
    text-align: center;
    width: 100%;
  }

  .case_info {
    float: none;
    text-align: center;
    font-size: 0.5em;
    width: 100%;
    padding: 0;
  }

  #messu {
    text-align: center;
  }
  
  .img_container, .case_text_container {
    padding: 0;
    width: 100%;
    display: block;
  }
  
  .img_container {
    height: 50vw;
  }
  
  .img_container img {
    width: 100%;
  }

  .decal {
    scale: 1.15;
    -webkit-transform:scale(1.15);

  }

  .messe {
    scale: 0.6;
    -webkit-transform:scale(0.6);
    transform: translateY(-20%);
  }

  .sign {
    scale: 1.1;
    -webkit-transform:scale(1.1);    
    transform: translateY(-10%);
  }

  .bigprint {
    scale: 1.2 !important;
    -webkit-transform:scale(1.2);
    transform: translateY(-10%);
  }

  .design {
    transform: translateY(-5%);
  }

  .routes_container {
    width: 100vw;
  }

  .map_container {
    height: unset;
    width: 100%;
  }
  .map_info {
    width: 100%;
  }

  .map_img {
    height: 100vw;
    width: 100%;
  }

  .map_img label {
    line-height: 100vw;
  }
}