@charset "utf-8";
/* CSS Document */


html {
	  scroll-behavior: smooth;

}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Raleway', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
.container-fluid {margin-top: 0.1 rem;
max-width: 100%;}


.animate-opacity{animation:opac 2s; }
@keyframes opac{from{opacity:0} to{opacity:1}}

a:hover {
  color: #0056b3;
  text-decoration: none;
}

.btn {
	display: inline-block;
	font-weight: 900;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	padding-top: 1.5rem;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	padding-bottom: 1.5rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	letter-spacing: 0.15rem;
	text-transform: uppercase;
}
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Remove borders */
    outline: none; /* Set a background color */
    color: rgba(50,96,168,1.00); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    font-size: 3rem; /* Increase font size */
    border-style: none;
    background-color: rgba(255,255,255,0.00);
}

#myBtn:hover {
    opacity: 0.8;
}

/* NAVIGOINTI */
.navbar-toggler {
	padding: 0.25rem 0.75rem;
	font-size: 1.3 rem;
	line-height: 1;
	background-color: transparent;
	border: 0px solid transparent;
	border-radius: 0 rem;
	/* [disabled]float: right; */
}

.nav-link {
	display: block;
	padding-top: 1rem;
	padding-right: 1rem;
	padding-left: 1rem;
	padding-bottom: 1rem;
	margin-left: 0.9rem;
	margin-right: 0.9rem;
	font-size: 1rem;
	font-weight: 500;

}
@media (min-width: 576px) {

.nav-link {
    padding-right: 0.1rem;
    padding-left: 0.1rem;
	margin-left: 0.2rem;
	margin-right: 0.2rem;
	}}
@media (min-width: 992px) {

.nav-link {
    font-size: 0.8rem;
	margin-left: 0rem;
	margin-right: 0rem;
	}}
@media (min-width: 1200px) {

.nav-link {
    font-size: 1rem;
	margin-left: 0.2rem;
	margin-right: 0.2rem;
	}}
.dropdown-menu {

  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.05rem;
}
.dropdown-item {
	display: block;
	width: 100%;
	padding-top: 1rem;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	padding-bottom: 1rem;
	clear: both;
	font-weight: 500;
	color: #212529;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
}
@media (min-width: 992px) {

.dropdown-item {
	    font-size: 0.9rem;
}}
@media (min-width: 1200px) {

.dropdown-item {
	    font-size: 1rem;
	}}

.dropdown-item:hover, .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #ECECEC;
}

.logo {max-width: 300px; }

/* TAUSTAT */

.bg-primary {
  background-color: #1c355d !important;
}
.pisteet {
	background-image: url(../images/pisteet.png);
	background-repeat: no-repeat;
	background-position: -55px top;
}
.bg-white-50 {background-color: rgba(255,255,255,0.50)}
.bg-black-10 {background-color: rgba(0,0,0,0.10)}
.bg-counter {background-color: rgba(3,137,255,0.70)}

.card {
	border: 0px solid rgba(0, 0, 0, 0.125);
	background-color: rgba(255,255,255,0.00);
}
.bg-louhintahiekka {
    background-image: -webkit-linear-gradient(270deg,rgba(28,53,93,0.10) 0%,rgba(28,53,93,1.00) 100%), url(../images/louhintahiekka_helen_vuosaari_helsinki.jpg);
    background-image: -moz-linear-gradient(270deg,rgba(28,53,93,0.10) 0%,rgba(28,53,93,1.00) 100%), url(../images/louhintahiekka_helen_vuosaari_helsinki.jpg);
    background-image: -o-linear-gradient(270deg,rgba(28,53,93,0.10) 0%,rgba(28,53,93,1.00) 100%), url(../images/louhintahiekka_helen_vuosaari_helsinki.jpg);
    background-image: linear-gradient(180deg,rgba(28,53,93,0.10) 0%,rgba(28,53,93,1.00) 100%), url(../images/louhintahiekka_helen_vuosaari_helsinki.jpg);
    background-position: center center;
    background-size: cover;
    background-color: rgba(28,53,93,1.00);

}.bg-louhinta {
	background-image: url(../images/louhinta_louhintahiekka_helsinki.jpg);
	background-position: center center;
	background-size: cover;
}
.bg-maanrakennus {
	background-image: url(../images/maanrakennus_louhintahiekka_helsinki.jpg);
	background-position: center center;
	background-size: cover;
}
.bg-lujitus {
	background-image: url(../images/lujitus_ja_tuenta_louhintahiekka_helsinki.jpg);
	background-position: center center;
	background-size: cover;
}
.bg-taitorakenteet {
	background-image: url(../images/taitorakenteet_louhintahiekka_helsinki.jpg);
	background-position: center center;
	background-size: cover;
}
.kalusto {
    background-color: rgba(28,53,93,1.00);
    line-height: 1rem;
 }
.kalusto-louhinta {	background-color: rgba(87,91,98,1.00);}
.kalusto-kuljetus {	background-color: rgba(20,39,69,1.00);}
.kalusto-muut {background-color: rgba(105,122,148,1.00);
 }
.jumbotron.jumbotron-fluid.louhintahiekkaa.text-center .pisteet .display-4.py-4.text-white {
	padding-top: 0rem;

}
.card-title.palvelutes a {
    display: block;
    color: rgba(255,255,255,0.90);

}
.card-title.palvelutes a:hover {
	display: block;
	opacity: 0.8;

}
.card-title.kalusto a {
	display: block;
	padding-bottom: 2rem;
background-color: rgba(255,255,255,0.00);

}
.card-title.kalusto a:hover {
	background-color: rgba(255,255,255,0.20);

}

.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.5rem;
}

.toteutuneet .col-sm-6.col-md-4 p {
	color: white;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.etusivunak  {
    height: 200px;
    overflow-y: hidden;
    
}
.etusivunrefet .col-md-3 p {
	color: white;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.rounded-circle.img-fluid {
    margin-bottom: 2rem;
    margin-left: auto;
    clear: both;
    display: block;
    margin-right: auto;
    max-width: 50%;
}

.palvelut {
	min-height: 20rem;
	text-align: center;
	animation:opac 2s;
}
.col-sm-6.col-md-4.py-2 .rounded-circle.img-fluid {
	max-width: 10rem;
	max-height: 10rem;
}
.flag {
	max-width: 2rem;
	display: inline-block;
	clear: none;
	float: right;
}

.flag:hover {
	opacity: 0.7;
}






@media (min-width: 992px){
.palvelut {
	min-height: 30rem;

}}
	#louhinta {
	background-image: url(../images/louhintahiekka_louhinta_vaijerisahaus_telakkaranta.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: rgba(28,53,93,1.00);
	animation:opac 2s;

}	

#tuenta {
	background-image: url(../images/louhintahiekka_ruiskubetonointi_lippulaiva_espoo.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: rgba(28,53,93,1.00);
	animation:opac 2s;

}
#kaivuu {
	background-image: url(../images/louhintahiekka_pirkkalan_lentoasema_massanvaihdot.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: rgba(28,53,93,1.00);
	animation:opac 2s;

}
#taitorakenteet {
	background-image: url(../images/louhintahiekka_betonirakenteet_silllan_rakennus_pietila_jarvenpaa.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: rgba(28,53,93,1.00);
}
#suunnittelunohjaus {
    background-image: url(../images/louhintahiekka_louhinta_ruiskubetonointi_ankkurointi_tuenta.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: rgba(28,53,93,1.00);
    animation: opac 2s;
}	
#laatu {
	background-image: url(../images/louhintahiekka_kallionottoalue_numminen.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: rgba(28,53,93,1.00);
	animation:opac 2s;

}
#kiertotalous {
	background-image: url(../images/louhintahiekka_kiertotalous_seulonta.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: rgba(28,53,93,1.00);
	animation:opac 2s;

}
#rekry {
    background-image: url("../images/rekry.jpg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    background-color: rgba(28,53,93,1.00);
    animation: opac 2s;

}
#news {
    background-image: url("../images/louhinta_vaijerisahaus_louhintahiekka_munkkiniemen_kadetti_helsinki.jpg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    background-color: rgba(28,53,93,1.00);
    animation: opac 2s;

}.bg-louhinta, .bg-maanrakennus, .bg-lujitus, .bg-taitorakenteet {
	padding-top: 5rem;
	min-height: 14rem;
}

@media (min-width: 768px){
.bg-louhinta, .bg-maanrakennus, .bg-lujitus, .bg-taitorakenteet {
	padding-top: 7rem;
	min-height: 16rem;
}

}

/* TYPO */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	margin-bottom: 0.5rem;
	font-family: inherit;
	font-weight: 900;
	line-height: 1.2;
	color: rgba(28,53,93,1.00);
	text-transform: uppercase;
}
@media (min-width: 768px){.staff p {
	font-size: 0.8rem;}}
@media (min-width: 992px){.staff p {
	font-size: 0.9rem;}}
@media (min-width: 1200px){.staff p {
	font-size: 1rem;}}

.display-1, .display-2, .display-3, .display-4 {
  font-weight: 900;
}
.display-1, .display-2, .display-3, .display-4 {
  font-weight: 900;
}
.container.py-5 .display-4.py-5.text-white span {
	font-weight: 400;
}
.display-3 {font-size: 1.8rem; }
.display-4 {
	font-size: 1.6rem;
}
@media (min-width: 576px){
.display-3 {font-size: 2.5rem; }
.display-4 {
	font-size: 2rem;
}}
	
@media (min-width: 768px){
.display-3 {font-size: 4rem; }
.display-4 {
	font-size: 3.5rem;
}}	

.card-title {
	text-align: center;
	background-image: none;
	color: rgba(255,255,255,0.95);
	font-size: 2rem;
margin-bottom:0; }
.intro-lead {font-weight: 800; color: #ffffff; font-size: 1.4rem;}
@media (min-width: 576px){
.intro-lead {font-size:2rem;}
}

.intro-lead a {color: #B6DBFC; }
.intro-lead a:hover {opacity:0.8;}

.row.py-4 .col-12.py-4 .lead.text-center.text-white a {
    color: rgba(3,137,255,1.00);
}

@media (min-width: 992px){
.card-title {
	font-size: 2.3rem;}
}
.card-title :hover {
opacity: 1.0;}

.text-break {
overflow-wrap: break-word;
	word-break: break-word;}

.block-thumbnail-1 .block-thumbnail-content {
    color: #fff;
padding-right:1rem;}
.block-thumbnail-1 .block-thumbnail-content h3{font-size:18px;color:#fff!important}
.block-thumbnail-1 .block-thumbnail-content .post-meta{opacity:.8;color:#fff!important}

/* JUMBOTRON */

.jumbotron {
	padding-right: 1rem;
	padding-left: 1rem;
	border-radius: 0rem;
	color: #fff;
	background-repeat: no-repeat;
	background-color: #1C355D;
}
.jumbotron-fluid {
	background-image: url(../images/pisteet.png);
	background-position: left top;
	background-repeat: no-repeat;
}
.louhintahiekkaa{
    background-image: url(../images/louhintahiekka_maanrakennusprojektien_toteuttaja.jpg);
    background-size: cover;
    background-position: center top;
    overflow-y: hidden;
}


/* karuselli */



.carousel-caption {
  right: 0%;
  left: 0%;
}
.carousel-item .carousel-caption .h1 {
    color: rgba(255,255,255,0.90);
    text-shadow: 0px 0px 10px rgba(0,0,0,0.70);
    font-size: 2rem;
}

.carousel-inner .carousel-item .d-block.mx-auto {
	max-height: 20rem;
}
@media (min-width: 768px){
.carousel-inner .carousel-item .d-block.mx-auto {
	max-height: 50rem;
}
}	
.staff:hover .desc{
    opacity: 1;
    margin-top: 10px;
    height: 210px;
    overflow-y: scroll;
}
.templateux-footer,.templateux-section{
    padding-top: 3rem;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 3rem;
}
.block-thumbnail-1.one-third{width:100%}
	@media (min-width:576px){.block-thumbnail-1.one-third{width:100%}}
	@media (min-width:768px){.block-thumbnail-1.one-third{width:50%}}.block-thumbnail-1.two-third{width:100%}
	@media (min-width:576px){.block-thumbnail-1.two-third{width:100%}}
	@media (min-width:768px){.block-thumbnail-1.two-third{width:50%}}