/*
ruskea #b98757
vihrea #8abb2a
turkoosi #50acc3
harmaa #77797c
*/

/*********************
    Yleisiä
*********************/
html{background-color: #77797c;}
body{font-family: menco, sans-serif; background: url(../i/bg_ppkt.jpg) center fixed;color:#77797c;font-weight: 300;}
h1,h2,h3,h4,h5,h6{font-weight: 400;text-transform: uppercase;}
a{color:#8abb2a;}
a:hover {
    color: #8abb2a;
    text-decoration: underline;
}
.white-bg{background:#fff;}
.brown-bg{background:#b98757;}
.green-bg{background:#8abb2a;color:#fff;}
.turq-bg{background:#50acc3;color:#fff;}
.gray{background:#f3f3f3;}
.gray.dark{background:#ececec;}

.turq-bg .btn.btn-primary{border:solid 1px #fff;}

.green-text{color:#8abb2a;}
p{padding:0 15px; }
.index h3 i{font-size: 80px; padding: 10px;}

.h1, h1 {
    font-size: 2.0rem;
    margin-top: 0.5rem;color:#8abb2a;
}

.otsikkorow .h1,.otsikkorow  h1 {
    margin-top: 1rem;margin-bottom: 1rem;
}
.navilogo{max-width: 180px; margin-left: 15%;}
@media (min-width: 1200px){
    .container {
        max-width: 1400px;
    }
}
.sec{padding-bottom: 50px;}
.section{padding-bottom: 10px; padding-top: 10px;}

.btn{text-transform: lowercase;border-radius: 0;border:none;}
.btn.btn-primary{background-color:#50acc3;}
.btn:hover,.btn:focus,.btn.active{background-color:#77797c !important;}



.index .nosto h3{font-size: 35px; text-transform: uppercase; color:#77797c;min-height: 200px;}
.index .nosto h3 i{color:#8abb2a}
.index .nosto .btn{min-width: 40%;background-color:#50acc3;}


@media (min-width: 1200px){
    .meista p{padding: 0 60px;}
}
/********************/


/*********************
    Yritys
*********************/
.yritys>.container>.row>.col-12{margin-bottom: 15px;}

.yritys .pala{position: relative;padding:0 25px;height: 100%;}
.yritys .pala.minvar{height: calc(100% - 10px);}
.yritys .minvar+.varit.puoliksi{margin-left: 1px;width: calc(100% - 1px);}
.yritys .pala{padding-bottom: 100px;padding-top: 100px;}
.yritys .pala i{font-size: 60px;padding: 10px;}
.yritys .pala img{margin: 10px;}



.pala.turq-bg{background: url(../i/bg_turkoosi.jpg) no-repeat top left;/*background-size: cover;*/ color:#fff;}
.pala.green-bg{background: url(../i/bg_vihrea.jpg) no-repeat top left;/*background-size: cover;*/ color:#fff;}
.green-bg.notpala{background: url(../i/bg_vihrea.jpg) no-repeat top left;/*background-size: cover;*/ color:#fff;}
.pala.gray-bg{background: url(../i/bg_footer_ppkt.jpg) no-repeat top left;/*background-size: cover;*/ color:#fff;}

   
@media (max-width: 1200px){
    .yritys .pala{padding-bottom: 60px;padding-top: 60px;}
}
   
@media (min-width: 991px){
    .yritys .pala h3{margin-left:  auto !important; margin-right: auto !important; max-width: 65%;}
}

.yhteystiedot{padding: 15px 30px !important;}
.yhteystiedot h4{text-transform: none;color: #8abb2a;}
.yhteystiedot h5{text-transform: none;color: #8abb2a;font-size: 1.15rem;}

.tiedot{list-style: none;padding-left: 15px;font-size: 1rem}
.osoite i,.osoite span{float: left;}
.osoite i,.puh i,.mail i{padding-right: 8px;color: #8abb2a;}
.tiedot .osoite div{display: inline-block;}
.tiedot .osoite div p{padding: 0;}

.yht-tiedot .ot-row{margin-bottom: 10px;padding-left: 15px;}
.yht-tiedot .latka{margin-bottom: 10px;}



.side-yt .latka .col-12{padding: 15px;color:#8abb2a;margin-bottom: 10px;}
.side-yt .latka img{padding-bottom: 25px;  max-height: 200px;}
.side-yt .latka h4{text-transform: none;color: #8abb2a;}
.side-yt .latka h5{text-transform: none;color: #8abb2a;font-size: 1.15rem;}
.side-yt .latka .btn{font-size: 0.85rem;}
.side-yt h3 a{text-decoration: none;}
  
@media (max-width: 768px){
    .yhteystiedot{padding: 15px 15px !important;}
}
/********************/



/*********************
    inner
*********************/
.innerrow{   }
.innerrow,.innerrow .col-12{padding-right: 0;}
.content{padding: 4px;}
@media (min-width: 768px){
.content{padding: 25px 45px;}
}
.innerrow .content{padding: 15px 0 0 15px;}
.content img{max-width: 100%;padding: 10px;height: auto;}
.content p{padding: 0;}
.innerrow p{margin: 0;padding-bottom: 10px;}
.content .max380{margin-bottom: 30px;}

@media (min-width: 450px){
.content .max380{max-width:380px;}
    
}

.innerrow h3{color:#8abb2a;}
.innerrow a{color:#8abb2a;}
.somet i{font-size: 30px;}
.somet span{line-height: 30px;}
    
@media (max-width: 1200px){
.somet span{font-size: 13px;}
}

@media (max-width: 991px){
    .content{margin-bottom: 10px;}
    .innerrow .content{margin-bottom: 0px;}
    .innerrow{padding-left: 0; display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;background-color: #fff;}
    .somet span{font-size: 16px;}
}
/********************/





/*********************
    Footer
*********************/
.footer{background: url(../i/bg_footer_ppkt.jpg) no-repeat top left;/*background-size: cover;*/ color:#fff;}
.footer .row{min-height: 300px;}
.footer i{font-size: 40px; padding: 10px;}

@media (min-width: 768px){
    .footer .row>.col-12{border-right: 2px solid #eeeeee;}
    .footer .row>.col-12:last-child{border-right:none;}
}
.footer a{color:#fff;}
/********************/


/*********************
  bs overwrite  
*********************/
.pdd, .row .row .col-sm-5, .row .row .col-sm-7{padding-top: 25px; padding-bottom: 25px;}
.index .col, .index .col-1, .index .col-10, .index .col-11, .index .col-12, .index .col-2, .index .col-3, .index .col-4, .index .col-5, .index .col-6, .index .col-7, .index .col-8, .index .col-9, .index .col-auto, .index .col-lg, .index .col-lg-1, .index .col-lg-10, .index .col-lg-11, .index .col-lg-12, .index .col-lg-2, .index .col-lg-3, .index .col-lg-4, .index .col-lg-5, .index .col-lg-6, .index .col-lg-7, .index .col-lg-8, .index .col-lg-9, .index .col-lg-auto, .index .col-md, .index .col-md-1, .index .col-md-10, .index .col-md-11, .index .col-md-12, .index .col-md-2, .index .col-md-3, .index .col-md-4, .index .col-md-5, .index .col-md-6, .index .col-md-7, .index .col-md-8, .index .col-md-9, .index .col-md-auto, .index .col-sm, .index .col-sm-1, .index .col-sm-10, .index .col-sm-11, .index .col-sm-12, .index .col-sm-2, .index .col-sm-3, .index .col-sm-4, .index .col-sm-5, .index .col-sm-6, .index .col-sm-7, .index .col-sm-8, .index .col-sm-9, .index .col-sm-auto, .index .col-xl, .index .col-xl-1, .index .col-xl-10, .index .col-xl-11, .index .col-xl-12, .index .col-xl-2, .index .col-xl-3, .index .col-xl-4, .index .col-xl-5, .index .col-xl-6, .index .col-xl-7, .index .col-xl-8, .index .col-xl-9, .index .col-xl-auto {
padding-right: 0px;
padding-left: 0px;
}

nav .col, nav .col-1, nav .col-10, nav .col-11, nav .col-12, nav .col-2, nav .col-3, nav .col-4, nav .col-5, nav .col-6, nav .col-7, nav .col-8, nav .col-9, nav .col-auto, nav .col-lg, nav .col-lg-1, nav .col-lg-10, nav .col-lg-11, nav .col-lg-12, nav .col-lg-2, nav .col-lg-3, nav .col-lg-4, nav .col-lg-5, nav .col-lg-6, nav .col-lg-7, nav .col-lg-8, nav .col-lg-9, nav .col-lg-auto, nav .col-md, nav .col-md-1, nav .col-md-10, nav .col-md-11, nav .col-md-12, nav .col-md-2, nav .col-md-3, nav .col-md-4, nav .col-md-5, nav .col-md-6, nav .col-md-7, nav .col-md-8, nav .col-md-9, nav .col-md-auto, nav .col-sm, nav .col-sm-1, nav .col-sm-10, nav .col-sm-11, nav .col-sm-12, nav .col-sm-2, nav .col-sm-3, nav .col-sm-4, nav .col-sm-5, nav .col-sm-6, nav .col-sm-7, nav .col-sm-8, nav .col-sm-9, nav .col-sm-auto, nav .col-xl, nav .col-xl-1, nav .col-xl-10, nav .col-xl-11, nav .col-xl-12, nav .col-xl-2, nav .col-xl-3, nav .col-xl-4, nav .col-xl-5, nav .col-xl-6, nav .col-xl-7, nav .col-xl-8, nav .col-xl-9, nav .col-xl-auto {
    padding-right: 0px;
    padding-left: 0px;
}
.row{margin-right: 0px;
margin-left:0px;}

/********************/




/*********************

Main Contact
    
*********************/


@media (min-width: 768px){
.main-contacts{min-height: 540px;}
}

/********************/


/*********************
    Varit
*********************/
/* ALKUPERÄINEN Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b98757+0,b98757+22,8abb2a+22,8abb2a+55,50acc3+55,50acc3+67,77797c+67,77797c+100 
background: #b98757; 
background: -moz-linear-gradient(left,  #b98757 0%, #b98757 22%, #8abb2a 22%, #8abb2a 55%, #50acc3 55%, #50acc3 67%, #77797c 67%, #77797c 100%);
background: -webkit-linear-gradient(left,  #b98757 0%,#b98757 22%,#8abb2a 22%,#8abb2a 55%,#50acc3 55%,#50acc3 67%,#77797c 67%,#77797c 100%); 
background: linear-gradient(to right,  #b98757 0%,#b98757 22%,#8abb2a 22%,#8abb2a 55%,#50acc3 55%,#50acc3 67%,#77797c 67%,#77797c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b98757', endColorstr='#77797c',GradientType=1 );
*/


.varit{ height:10px;width: 100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b98757+0,b98757+25,8abb2a+25,8abb2a+50,50acc3+50,50acc3+75,77797c+75,77797c+100 */
background: #b98757; /* Old browsers */
background: -moz-linear-gradient(left,  #b98757 0%, #b98757 25%, #8abb2a 25%, #8abb2a 50%, #50acc3 50%, #50acc3 75%, #77797c 75%, #77797c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #b98757 0%,#b98757 25%,#8abb2a 25%,#8abb2a 50%,#50acc3 50%,#50acc3 75%,#77797c 75%,#77797c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #b98757 0%,#b98757 25%,#8abb2a 25%,#8abb2a 50%,#50acc3 50%,#50acc3 75%,#77797c 75%,#77797c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b98757', endColorstr='#77797c',GradientType=1 ); /* IE6-9 */

}
.varit.puoliksi{ height:10px;width: 100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b98757+0,b98757+25,8abb2a+25,8abb2a+50,50acc3+50,50acc3+75,77797c+75,77797c+100 */
background: #b98757; /* Old browsers */
background: -moz-linear-gradient(left,  #b98757 0%, #b98757 25%, #8abb2a 25%, #8abb2a 50%, #50acc3 50%, #50acc3 75%, #77797c 75%, #77797c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #b98757 0%,#b98757 25%,#8abb2a 25%,#8abb2a 50%,#50acc3 50%,#50acc3 75%,#77797c 75%,#77797c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #b98757 0%,#b98757 25%,#8abb2a 25%,#8abb2a 50%,#50acc3 50%,#50acc3 75%,#77797c 75%,#77797c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b98757', endColorstr='#77797c',GradientType=1 ); /* IE6-9 */
}
.varip::after{content:"";display: inline-block;height:10px;width: calc(100% + 15px);margin-left: -15px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b98757+0,b98757+25,8abb2a+25,8abb2a+50,50acc3+50,50acc3+75,77797c+75,77797c+100 */
background: #b98757; /* Old browsers */
background: -moz-linear-gradient(left,  #b98757 0%, #b98757 25%, #8abb2a 25%, #8abb2a 50%, #50acc3 50%, #50acc3 75%, #77797c 75%, #77797c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #b98757 0%,#b98757 25%,#8abb2a 25%,#8abb2a 50%,#50acc3 50%,#50acc3 75%,#77797c 75%,#77797c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #b98757 0%,#b98757 25%,#8abb2a 25%,#8abb2a 50%,#50acc3 50%,#50acc3 75%,#77797c 75%,#77797c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b98757', endColorstr='#77797c',GradientType=1 ); /* IE6-9 */
}
.varip::after{height:10px;width: calc(100%);margin-left:0px;}
.innerrow .varit{/*margin-top: -10px;*/margin-bottom: 10px;}
.innerrow .varit:last-child{/*margin-top: -10px;*/margin-bottom: 0px;}
/********************/
.work-email{display: none;}
.error{color:#50acc3;font-weight:400;}