body {
  background: url(../img/betonitausta_56.jpg) no-repeat top left fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 400;
}

p {
  font-size: 1.25em;
  line-height: 1.6;
  color: #000;
}

hr {
  border-color: #999999;
  max-width: 400px;
}

.brand,
.address-bar {
  display: none;
}

.toplogo {
    background-color: #fff;
    margin-bottom: 20px;
    margin-top: 25px;
    width: 100%!important;
}


.navbar-brand {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
}

.navbar-nav {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 400;
}


#nav.visible { /*sticky*/
  left: 50%;
  width: 100%;
  margin-left: 0px;
  position: fixed;
  top: -20px;
  left: 0px;
  z-index: 250;
  background: none repeat scroll 0 0 rgba(255, 255, 255, 1)
}

#stickynavcontainer { /*prevents jumping*/
display:block;
width:100%;
clear: both;
}


.img-full {
  min-width: 100%;
}

.brand-name {
  font-weight: 700;
  font-size: 1.5em;
  text-transform: capitalize;
  letter-spacing: normal;
}

.tagline-divider {
  margin: 15px auto 3px;
  border-color: #999999;
  max-width: 250px;
}

.box {
  background: #fff;
  background: rgba(255,255,255,0.9);
  margin-bottom: 20px;
  padding: 30px 15px;
}

.intro-text {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.25em;
  font-weight: 400;
}

.img-border {
  float: none;
  margin: 0 auto 0;
  border: #999999 solid 1px;
}

.img-left {
  float: none;
  margin: 0 auto 0;
}

footer {
  /*
  background: #fff;
  background: rgba(255,255,255,0.1);
  */
  background:transparent;
}

footer span {
  margin: 0;
  padding: 30px 0 0 100px;
  font-size: 1.1em;
  color:#777;
}

footer span a {
    color:#ddd;
}

footer .footergrey {
color:#bbb;
font-weight: lighter;
font-size: 0.8em;
}

#tuunix, #tuunix a{
    padding: 0px;
    float:right;
    color:#aaa;
}
#tuunix:hover, #tuunix a:hover {
    color:#2a6496;
}
h1 {
    font-size: 26px;
    color:#f6f6f6;
    text-align: center;
    text-shadow: 3px 2px 1px #676767;
    margin-top: 0px;
    margin-bottom: 22px;
}

.form-palaute-error {
background-color: #FBFBD0;
border:2px solid #B81F1F;
color:#333;
position: absolute;
left:5%;
top:400px;
width:400px;
height:100px;
display:block;
z-index: 1222;
font-weight: bold;
padding:5px;
display:none;
}

.tilaajavastuulogolink, .tilaajavastuulogolink img {
    margin:0px auto 0px auto;
    padding:0px;
}


.carousel-caption {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

@media screen and (min-width: 768px) {

.brand {
  display: inherit;
  font-weight: 700;
  font-size: 5em;
  line-height: normal;
  text-align: center;
  margin: 0;
  padding: 30px 0 10px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.top-divider {
  margin-top: 0;
}

.img-left {
  float: left;
  margin-right: 25px;
}

.ruflag {
    float:right;
    position: absolute;
    clear:none;
    margin-left: 115px;
}

.address-bar {
  display: inherit;
  text-align: center;
  margin: 0;
  padding: 0 0 20px;
  font-size: 1.25em;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 400;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.navbar {
  border-radius: 0;
}

.navbar-header {
  display: none;
}

.navbar {
  min-height: 0;
}

.navbar-default {
  background: #fff;
  background: rgba(255,255,255,0.9);
  border: none;
}

.nav>li>a {
  font-size: 14px;
  padding: 15px;
}

.navbar-nav>li>a {
  line-height: normal;
}

.navbar-nav {
  float: none;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
  font-size: 1.25em;
}
.slidercontainer-outer {
    border-bottom:30px solid #F6F6F6;
    margin-bottom: 30px;
    margin-left:0px;
    margin-right:0px;
}

}

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

.nav > li > a {
  padding: 15px;
}

.navbar-nav {
  font-size: 0.90em;
}

#nav.visible { /*sticky nav*/
  top: -10px;
}


}

/* BUBBLE */

.bubble strong {
    color:#fff;
}
.bubble 
{
position: relative;
/*width: 250px;*/
/*height: 120px;*/
padding: 1px;
background: #5ead35;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #ddd solid 1px;
-moz-box-shadow: 1px 2px 6px #555;
-webkit-box-shadow: 1px 2px 6px #555;
box-shadow: 1px 2px 6px #555;
}

.bubble p {
    color:#eee !important;
    text-shadow: 1px 1px 2px #5A5A5A;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 12px 15px 12px 0;
border-color: transparent #5ead35;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 24px;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 12px 15px 12px 0;
border-color: transparent #dddddd;
display: block;
width: 0;
z-index: 0;
left: -16px;
top: 24px;
}


/* BUBBLE */

img.cboxPhoto {
    max-width: 100%!important;
    -moz-box-sizing:content-box;
}

/*colorbox bootstrap ffox fixi */
#cboxContent, #cboxLoadedContent, #cboxMiddleLeft, #cboxTitle, #cboxWrapper, #colorbox, #cboxOverlay {
    -moz-box-sizing:content-box;
    -webkin-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing:content-box;
}




@media screen and (max-width: 1200px) {
.nav>li>a {
    font-size: 12px;
    padding-left:5px;
    padding-right:5px;
}
}
@media screen and (max-width: 968px) {
.nav>li>a {
    font-size: 9px;
    padding-left:5px;
    padding-right:5px;
}
}

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

#homenav::after { 
    content: " ETUSIVU";
}
.footergrey {
    padding-top: 5px;
    clear:both;
    display:block;
}
#nav {
    z-index: 2000;
}
#nav.container {
    z-index: 2100;
}
#stickynavcontainer {
    z-index: 8000;
}
#maincontainer3 {
    z-index: 20;
}
#maincontainer3 .row {
    z-index: 40;
}
#maincontainer3 .row .box {
    z-index: 50;
}
#maincontainer3 .row .box img{
    z-index: 60;
}

.navbar-ex1-collapse, .navbar-fixed-bottom {
  position: relative;
}
.navbar-ex1-collapse {
  top: 0px;
}
.navbar.navbar-default {
    margin-top: 7px;
}

#nav > div > div.navbar-collapse.navbar-ex1-collapse.in {
    z-index: 8900;
    clear:both;
}
.box img {
    margin-bottom: 4px;
}
.toplogo {
    margin-bottom: 0px;
    margin-top: 0px;
}

.carousel-caption {
    top:0px;
}
.carousel-caption h3{
    font-size: 18px;
}

h1 {
    font-size: 18px;
    color:#f6f6f6;
    text-align: center;
    text-shadow: 3px 2px 1px #676767;
    margin-top: 20px;
    margin-bottom: 22px;
    clear:both;
}

.nav>li>a {
    font-size: 12px;
}

footer span {
  margin: 0;
  padding: 30px 0 0 10px;
  font-size: 1.1em;
  color:#777;
}



}