body{
margin:0;
background-color:#fafaff;
font-size: 1rem;
}

html{
scroll-behavior:smooth;
}

div{
word-wrap: break-word;
}

a{
text-decoration:none;
}

section{margin-top:70px;margin-bottom:70px;}

.inner{
padding:20px;
}



/*importit fonteille*/
@font-face{
font-family:'Orbitron';
src: url('/fonts/Orbitron-Regular.woff2') format('woff2');
font-weight:400;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:'Oxanium';
src: url('/fonts/Oxanium-Regular.woff2') format('woff2');
font-weight:400;
font-style:normal;
font-display:swap;
}

/*iso otsikko etusivu ylin*/
.lightgreen_large,.white_large{
font-family:Orbitron,arial;
font-size:25px;
letter-spacing:5px;
color:#a834eb;
}

/*iso otsikko etusivu ylin*/
.white_large{
letter-spacing:1px;
color:#d7d7db;
}

/*pienemmat vihreat otsikot etusivu ylhaalla*/
.strong_lightgreen_small,.white_small{
font-family:Orbitron,arial;
font-size:22px;
letter-spacing:5px;
color:#a561ef;
}

/*pienemmat valkoiset otsikot etusivu ylhaalla*/
.white_small{
letter-spacing:1px;
color:#d7d7db;
font-weight:700;
}

/*dodgerblue otsikot*/
.blue_headers,.darkblue_headers,.dark_head,.blue_headers2{
font-family:Orbitron,arial;
font-size:22px;
letter-spacing:1px;
color:#a834eb;
}
.dark_head{color:#111;}

.darkblue_headers{color:#a834eb;}
.blue_headers2{color:dodgerblue;}

/*valk. tummat normaalit tekstit*/
.dark_font,.white_font,.white_font2,.white_font3,.green_links,.footer a{
font-family:Oxanium,arial;
font-size:18px;
color:#111;
}

.white_font{
color:#dddce0;
}


/*efekti fontti*/
.e_font{
font-family:Orbitron,arial;
font-size:20px;
letter-spacing:1px;
color:#a561ef;
}

/*kaytossa footer*/
.white_font2,.white_font3{color:#dddce0;}

/*merkit*/
.green_color,.extra{
color:#93d620;
font-weight:bold;
}


.extra{
font-size:25px;
}

.red_cross{
color:red;
font-weight:bold;
}

.grey_link,.footer a{color:grey;}


/*linkit*/
div.scr a:hover,.arrow2 a:hover{
text-decoration:none;
color:#93d620;
}

.green_links{color:#93d620;}

/*oranssi hover*/
.green_links:hover,.arrow_down a:hover,.top a:hover,.si a:hover,.up:hover,.arrow_down3 a:hover{
color:orange;
border:none;
scale:1.05;
transition:0.3s;
}

/*vihrea hover*/
.logo_container a:hover,.top a:hover,.top a.active:hover,.footer a:hover{
color:#93d620;
scale:1.05;
transition:0.3s;
}



/*varsinainen sisalto alkaa*/


.empty{
height:55px;
background-color:#08010f;
}

.top{
z-index:1;
margin:0;
position:fixed;
top:0;
background-color:rgba(0,0,0,0.6);
-webkit-backdrop-filter: blur(5px);
backdrop-filter:blur(5px);
overflow:hidden;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.19);
transition:top 0.3s;
}

.logo_container{
margin-left:20px;
width:auto;
height:auto;
display:flex;
align-items:center;
}

.logo{
width:25px;
height:25px;
margin-left:20px;
margi-right:10px;
}

.top a{
margin:15px;
margin-right:20px;
text-decoration:none;
font-family:Orbitron,arial;
font-weight:light;
font-size:16px;
letter-spacing:1px;
color:white;
}



.nav_flex_links{
display:flex;
align-items:right;
float:right;
}

.logo_container a{
margin-left:5px;
text-decoration:none;
font-family:Orbitron,arial;
font-size:20px;
letter-spacing:2px;
color:white;
}

.si{
height:auto;
width:0;
position:fixed;
z-index:2;
top:0;
right:0;
background-color:#111;
-webkit-backdrop-filter:none;
backdrop-filter:none;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.19);
overflow-x:hidden;
overflow-y:scroll;
padding-top:30px;
transition:0.5s;
}

.centered{
text-align:left;
margin-left:20px;
}

.si a{
padding:10px;
text-decoration:none;
font-family:Orbitron,arial;
font-size:16px;
color:white;
display:block;
transition:0.3s;
}

.si .cb{
position:absolute;
top:5px;
right:10px;
font-size:30px;
color:white;
background-color:transparent;
border:none;
}

.ob{
font-size:30px;
cursor:pointer;
background-color:transparent;
color:white;
padding:10px 15px;
border:none;
border-radius:33px;
margin-right:20px;
margin-top:5px;
margin-bottom:5px;
}

.ob:hover{
color:white;
background:orange;
transition: 0.3s;
}

.main1{
margin:0 auto;
min-height:100vh;
width:auto;
background-color:#000000;
background-image:url("./all-images/purple-bg.webp");
background-size: cover;
background-position:center center;
background-repeat:no-repeat;
background-attachment:relative;
object-fit:scale-down;
display:block;

padding-top:10px;
padding-bottom:60px;
}

.flex-grid1{
  width:80%;
  margin:0 auto;
  margin-top:100px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
}
.slogan{
grid-column: 1 / 2;
grid-row: 1;
width:auto;
text-align:left;
}
.topimg{
grid-column: 2 / 2;
grid-row: 1;
width:100%;
min-height:100px;
text-align:right;
}
.topimg img{
width:60%;
height:auto;
object-fit:scale-down;
border-radius:20px;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.29);
}

.mobile_img{
  display:none;
  width:55%;
  height:auto;
  border-radius:20px;
  text-align:center;
  object-fit:scale-down;
}

.flex-grid2{
  width:85%;
  margin:0 auto;
  margin-top:100px;
  display:grid;
  grid-template-columns:auto auto auto;
  gap:50px;
}
.prod{
  padding:20px;
  width:auto;
  height:auto;
  background-color:rgba(0,0,0,0.55);
  border-radius:20px;
  align-items:center;
}


.font1,.font1_colored,.font1_colored2,.font2{
font-family:Orbitron, arial;
font-weight:bolder;
font-size:3vw;
color:#d7d7db;

text-shadow: 2px 2px #111;
}

.font1_colored{color:#a834eb;}

.font2{
font-size:18px;
letter-spacing:2px;
}

.text_container{
display:block;
width:75%;
margin:0 auto;
justify-content:center;
}


.text_container_white_bg{
display:flex;
width:100%;
margin:0 auto;
justify-content:center;
background-color:#19181a;
}

.text_content_white_bg > section{background-color:#f3f2f5;padding:20px;border-radius:20px;}

.text_content_white_bg{
margin:0 auto;
width:75%;
text-align:left;
word-wrap:break-word;
}

.text_content{
text-align:left;
word-wrap:break-word;
}
.text_content > section{
background-color:#19181a;
padding:20px;
border-radius:20px;
}


.text_container4{
width:75%;
height:auto;
margin:0 auto;
display:grid;
grid-template-columns: 1fr 1fr;
gap:20px;

}

.text_content4{
height:auto;
display:block;
text-align:left;
word-wrap:break-word;
padding:10px;
}

.wp_container{
width:100%;
height:auto;
display:grid;
grid-template-columns: 1fr 1fr;
gap:20px;
}
.card{
height:auto;
display:block;
text-align:left;
word-wrap:break-word;
padding:5px;
border:solid 2px #19181a;
border-radius:20px;
}


.getwp{
  background-color:#a834eb;
  padding:10px;
  border:none;
  font-family:Oxanium, arial;
  font-size:17px;
  color:#fff;
  border-radius:20px;
  box-shadow:0 4px 8px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.29);
  
}
.getwp:hover{background-color:#93d620;color:#111;transition:0.3s;}

.arrow_down{
text-align:center;
}

.arrow_down a{
color:#d7d7db;
font-size:40px;
text-decoration:none;
}

.arrow_down3 a{
margin:0 auto;
color:#d7d7db;
font-size:40px;
text-decoration:none;
}

.service_links{
margin:0 auto;
height:auto;
width:75%;
text-align:center;
justify-content:center;
display:grid;
grid-template-columns:auto auto auto;
gap:50px;


background-image:url("./all-images/bg.webp");
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
background-attachment:absolute;
padding:20px;

}

.link_container{
margin:0 auto;
display:block;
width:auto;
min-height:350px;
height:100%;
text-align:left;
justify-content:center;
background-color:rgba(0,0,0,0.85);

box-shadow:0 4px 8px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.29);
}


.dark{
padding:10px;
background-color:rgba(0,0,0,0.65);
border-radius:20px;
}


.link_a_image,.link_b_image,.link_c_image,.link_d_image,.link_e_image,.link_f_image{
width:100%;
height:auto;
padding:0;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
background-attachment:absolute;
object-fit:scale-down;
box-shadow:none;
}

.link_a_image{
background-image:url("./all-images/lataus29.webp");
}

.link_b_image{
background-image:url("./all-images/lataus35.webp");
}

.link_c_image{
background-image:url("./all-images/lataus13.webp"); 
}

.link_d_image{
background-image:url("./all-images/lataus34.webp");
background-position:top center;
}

.link_e_image{
background-image:url("./all-images/lataus23.webp"); 
}

.link_f_image{
background-image:url("./all-images/lataus27.webp"); 
background-position:bottom center;
}


.imgset{
background-color:#000000;
text-align:center;
margin-top:20px;
margin-bottom:20px;
height:431px;
max-width:480px;
object-fit:scale-down;
}

.calculations{
background-color:#e6f7fa;
padding:5px;
border-radius:20px;
}


/*palvelut valinta ylhaalla*/
.btn_group{
margin:0 auto;
display:grid;
grid-template-columns: auto auto auto auto;
width:75%;
height:auto;
text-align:center;
justify-content:left;
margin-bottom:100px;
font-family:Orbitron,arial;
font-size:16px;
letter-spacing:1px;
padding:20px;
gap:10px;
}

.btn_group a{text-decoration:none;color:#dddce0;font-weight:bold;}

.btn1,.btn2,.btn3,.btn4,.btn5,.btn6,.btn7,.btn8{
border-radius:5px;
padding:10px;
line-height:20px;
text-decoration:none;
background-color:transparent;
border:solid 2px #19181a;
max-width:200px;
}

.btn1:hover,.btn2:hover,.btn3:hover,.btn4:hover,.btn5:hover,.btn6:hover,.btn7:hover,.btn8:hover{
background:linear-gradient(to right, #03146f, purple);
color:#111;
scale:1.05;
transition:0.3s;
}


.accordion{
background-color:transparent;
cursor:pointer;
padding:10px;
width:100%;
border:solid 2px #19181a;
text-align:left;
outline:none;
transition:0.4s;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.4),0 6px 20px 0 rgba(0,0,0,0.19);
border-radius:20px;
}

.limited{margin-top:20px;margin-bottom:20px;}
.accordion a{color:#a834eb;}

.active2,.accordion:hover{
background-color:#93d620;
color:#111;
}

.accordion:after{
content:'\25BC';
color:#111;
font-weight:bold;
float:right;
margin-left:5px;
}

.active2:after{
content:"\2718";
color:#111;
}

.panels{padding:0 18px;
background-color:#fff;
max-height:0;
overflow:hidden;
transition:max-height 0.2s ease-out;
}

.panels2{
padding:0 18px;
background-color:#fff;
max-height:0;
overflow:hidden;
transition:max-height 0.2s ease-out;
}

.arrow2 a{
font-size:30px;
color:dodgerblue;
text-decoration:none;
}

.arrow2 a:hover{color:#93d620;}






/*footer setup*/
.footer{
margin:0 auto;
width:100%;
height:auto;
display:flex;
justify-content:space-around;
align-items:flex-start;
background-color:#111;
gap:10px;
border-top:solid 1px #19181a;
border-bottom:solid 1px #19181a;
}

.foot_content{
display:block;
padding:10px;
word-wrap:break-word;
}

.footer a{
text-decoration:none;
color:grey;
}


.copy{
text-align:center;
}

.up {
display:none;
position:fixed;
bottom:20px;
right:20px;
z-index:3;
border:none;
border-radius:10px;
cursor:pointer;
opacity:0.85;
color:#93d620;
font-size:40px;
line-height:45px; 
}

@media only screen and (min-width: 1400px) and (max-width: 2600px) {
  
  .service_links{
    grid-template-columns: auto auto auto;
  }
  .text_container4{
     grid-template-columns: 1fr 1fr;
    }
   
}

@media only screen and (min-width: 1200px) {
  .si{display:none;}
  .ob{display:none;}
    
  
}


@media only screen and (max-width: 1200px){
   
  .service_links{
    grid-template-columns: 1fr 1fr 1fr;
  }
   .text_container4{
     grid-template-columns: 1fr 1fr;
    }

}


@media only screen and (min-width: 771px) and (max-width: 1199px){
   .nav_flex_links{display:none;}
     .si{display:run in;}
     .ob{display:run in;}
       
      .main1{
     background-image:url("./all-images/icons.webp");
background-size: auto;//cover;
background-position:center center;
background-repeat:no-repeat;
background-attachment:relative;
object-fit:scale-down;
     margin-top:51px;
     padding-top:60px;
     padding-bottom:60px;
    
    }
    .topimg{display:none;}

   .flex-grid1{
  width:80%;
  margin:0 auto;
  
 
  grid-template-columns: 1fr;
  gap:0;
  background-color:rgba(40,40,60,0.90);
  padding:10px;
  border-radius:20px;
  justify-content:center;
}

     .slogan{
       width:100%;
       grid-row:2;
       z-index:0;
       display:inline-block;
       margin:0;

       text-align:center;
     }
     .font1,.font1_colored{font-size:6vw;}
    
      .flex-grid2{
       width:70%;
     
       grid-template-columns:auto;
       gap:10px;
       justify-content:center;
      }
      .prod{width:50%;padding:10px;background-color:rgba(0,0,0,0.85);text-align:center;}
  


  .text_container,.text_content_white_bg{width:85%;margin-top:0;}
  .service_links{width:85%;grid-template-columns:1fr 1fr;}
  .btn_group{justify-content:center;}

    .text_container4{
     width:85%;
     grid-template-columns: 1fr 1fr;
    }
    

  .footer{display:flex;text-align:center;}
  .foot_content{
    width:70%;
    margin: 0 auto;
    margin-bottom:20px;
   }
}


@media only screen and (min-width: 480px) and (max-width: 770px){
     .nav_flex_links{display:none;}
     .si{display:run in;}
     .ob{display:run in;}  
     
    

      .main1{
     background-image:url("./all-images/icons.webp");
background-size: auto;
background-position:center center;
background-repeat:no-repeat;
background-attachment:relative;
object-fit:scale-down;
     margin-top:51px;
     padding-top:60px;
     padding-bottom:60px;
     
    }
    .topimg{display:none;}

   .flex-grid1{
  width:85%;
  margin:0 auto;
  text-align:center;
  grid-template-columns: auto;
  gap:0;
  background-color:rgba(40,40,60,0.90);
  padding:10px;
  border-radius:20px;
  justify-content:center;
   }

     .slogan{
       width:auto;
       grid-row:1;
       z-index:0;
       margin:0;
       text-align:center;
       margin:0;
     }
     .font1,.font1_colored{font-size:5vw;}
     

      .flex-grid2{
     
       grid-template-columns:auto;
       gap:10px;
      }
      .prod{width:50%;padding:10px;background-color:rgba(0,0,0,0.85);text-align:center;}



  .lightgreen_large,.white_large{font-size:25px;}
  .strong_lightgreen_small,.white_small,.blue_headers,.blue_headers2,.darkblue_headers{font-size:22px;}



   .text_container4{
     width:90%;
     grid-template-columns: 1fr 1fr;
    }


   
  .text_container,.text_content_white_bg{width:85%;}



  .text_container3{
      display:block;
    }

  
  .service_links{width:90%;grid-template-columns:1fr 1fr;gap:10px;padding:0;}
  .btn_group{grid-template-columns: auto auto;justify-content:center;}
  .footer{display:flex;text-align:center;}
  .foot_content{
    width:70%;
    margin: 0 auto;
    margin-bottom:20px;
    text-align:left;
   }
}


@media only screen and (max-width: 479px) {
   .nav_flex_links{display:none;}
     .si{display:run in;}
     .ob{display:run in;}
      
  
  

      .main1{
     background-image:url("./all-images/icons.webp");
background-size: auto;//cover;
background-position:center center;
background-repeat:no-repeat;
background-attachment:relative;
object-fit:scale-down;
     margin-top:51px;
     padding-top:60px;
     padding-bottom:60px;
    }
    .topimg{display:none;}

   .flex-grid1{
  width:80%;
  margin:0 auto;
  
 
  grid-template-columns: 1fr;
  gap:0;
  background-color:rgba(40,40,60,0.90);
  padding:10px;
  border-radius:20px;
  justify-content:center;
}

     .slogan{
       width:100%;
       grid-row:1;//2;
       z-index:0;
       //display:inline-block;
       margin:0;
       text-align:center;
     }
     .font1,.font1_colored{font-size:6vw;}
     

      .flex-grid2{
       
       grid-template-columns:auto;
       gap:10px;
      }
      .prod{text-align:center;padding:10px;background-color:rgba(0,0,0,0.85);}


  .lightgreen_large,.white_large{font-size:23px;}
  .strong_lightgreen_small,.white_small,.blue_headers,.blue_headers2,.darkblue_headers{font-size:22px;}


  


  .text_container,.text_content_white_bg{width:90%;}

   .text_container3{
      display:block;
    }


    .text_container4{
     width:90%;
     grid-template-columns: 1fr;
    }

   

   
  .service_links{width:90%;grid-template-columns:auto;}
  .imgset{width:80%;height:auto;}
  .btn_group{grid-template-columns: 1fr 1fr;justify-content:center;}
  .footer{display:block;text-align:center;}
  .foot_content{
    width:70%;
    margin: 0 auto;
    margin-bottom:20px;
    text-align:left;
   }
}

@media only screen and (max-width: 360px) {

    
    
       .flex-grid1{
     
       grid-template-columns:auto;
       text-align:center;
     }

        .flex-grid2{
      
       grid-template-columns:auto;
     }
    
    
    
    .font1,.font1_colored{font-size:7vw;}
    .font2{font-size:16px;}

   .lightgreen_large,.white_large{font-size:22px;}
  .strong_lightgreen_small,.white_small,.blue_headers,.blue_headers2,.darkblue_headers{font-size:20px;}
   .welc{padding:10px;}

      .text_container4{
     width:90%;
     grid-template-columns: 1fr;
    }

  .text_container,.text_content_white_bg{width:90%;}
  .service_links{width:90%;grid-template-columns:auto;}
  .btn_group{grid-template-columns: 1fr 1fr;justify-content:center;}
}

   

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
  .panels,.panels2{background-color:#111;}
  .accordion:after{
    color:#fff;
   }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #fafaff;
  }
  .green_color{color:green;}
  .empty{background-color:#fafaff;}
  .main1{background-color:#fafaff;}
  .service_links{background-image:none;background-color:#fafaff;}
  .text_container_white_bg{background-color:#fafaff;}
  .copy .white_font{color:#111;}
  .white_font3{color:#111;}
  .btn_group a{color:#111;}.btn_group a:hover{color:#fff;}
}