@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}

body {

font-family: "Puritan";font-size: 2em;


}

a.anchor {

display: block; position: relative; top: -60px; visibility: hidden;

}


.container {

	padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;

}

.container-fluid {
    padding-top: 80px;
	padding-bottom: 50px;

}


.potretti {

	width:280px;
	border:5px solid #D9D9DC;
	margin: auto;	
	
}

figure, figcaption {
	
	display:block;
}


#kehys, #kehys1 {

padding:20px 10px;
/*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/
width:100%;
max-width: 320px;
margin-left: auto;
margin-right: auto;
overflow:hidden;

}


/***Position the figures containing the images and captions***/
#kehys figure, #kehys1 figure {

float:left; /*places the images in a horizontal line*/
position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
/* width:200px; /width of the images*/ */
margin:10px 20px; /*space between the images*/
padding: 6px 8px 10px 8px; /*size of the frame*/
/*give the frame's background colour a gradient*/
background: #eee6d8; /*fallback colour for browsers that don't support gradients*/
background: -webkit-linear-gradient(top, #D9D9DC, #eee 20%, #f5f5f5 60%);
background: -moz-linear-gradient(top, #D9D9DC, #eee 20%, #f5f5f5 60%);
background: -o-linear-gradient(top, #D9D9DC, #eee 20%, #f5f5f5 60%);
background: -ms-linear-gradient(top, #D9D9DC, #eee 20%, #f5f5f5 60%);
background: linear-gradient(top, #D9D9DC, #eee 20%, #f5f5f5 60%); /*give the Polaroids a small drop shadow*/
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden; /*prevent rotated text in the caption being jagged in Chrome and Safari*/
}



/***Rotate each even numbered image 2 degrees clockwise***/
#kehys1 figure{
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden; 
/*because the image is rotated the opposite way, the drop-shadow needs moving to the other side of the image*/
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}

#kehys figure:before {
content: '';
display: block;
position: absolute;
left:5px;
top: -15px;
width: 75px;
height: 25px;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}

#kehys1 figure:before {
content: '';
display: block;
position: absolute;
left:150px;
top: -15px;
width: 55px;
height: 25px;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}


#kehys figcaption, #kehys1 figcaption{
text-align: center;
font-family: "Puritan";
font-size:.7em;
color: #000;
background:#fff;
padding: 5%;
}


.logos {

width:25px;

}

.postit {

	padding-bottom: 2%;
	margin-left: auto;
    margin-right: auto;
    max-width: 300px;

}


.container p {
    background-color:#fff;
    color:#1D2022;
    font-size:.8em;
    padding:10 10 0 10;
    text-align:center;
    margin-top:1.2em;
    margin-bottom:1em;
   
}


.container h1 {

	text-align: right;
	font-size:2em;
	letter-spacing:4px;
	color:#555555;
	
	

}


.container h2 {

	font-size:1.1em;
	color:#555555;
	text-align:center;
	margin-top:3.5em;
	padding: 5px;



}

.container h3 {

/* 	background-color:#eee; */
	font-size:.8em;
	text-align:center;
	padding:5px;
	margin-top:3em;
        
}


#navigation {
  padding: 10px;
}

#navigation li a {
  padding: .1em;
  margin-left:15px;
  font-size: 0.7em;

}


#mobile-nav {
  font-size: 1em;
  display: none;
}

#navigation i {

  margin-right: 5%;
  font-size: 1.5em;


}

#navigation span  {

  margin-right: 5%;
  font-size: 1.3em;

}

.pitka {
	width:105px;
}

.lyhyt {
	width:90px;
}

.medium {
	width:95px
}

.navbar-brand {

font-size: 2em;
font-family: 'Yesteryear';
color:#555555;
padding-left:20px;
padding-top:20px;

}

.jumbotron {

	padding-top:90px;
	margin-bottom:0px !important;
	

}



/****** Media Queries *****/


@media only screen and (max-width: 768px) {
    .container h1 {
            font-size: 1.5em
        }
        
    .navbar-brand {

		font-size: 1.4em;
		font-family: 'Yesteryear';
		color:#555555;
		padding-left:10px;
		padding-top:20px;
		
	}

    
        
        
}

@media (min-width: 1200px)
.container {
    width: 1170px;
    
}


@media only screen and (max-width: 768px) {
  /*Once 767 width reached, hide normal nav and display icon nav*/
  #navigation {
    display: none;
  }
  /*Using floats on header and right classes help them stay in the right place on screen resize*/
  .navbar-header {
    display: inline-block;
    float: left;
  }
  .navbar-right {
    float: right;
  }
  #mobile-nav {
    display: inline;
    white-space: nowrap;
  }
  #mobile-nav ul li {
    display: inline-block;
    padding: 0;
  }
  
#mobile-nav ul li a {
    padding:8px;
  }
  
  
  
  
}




.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
  

.footer i {  
	font-size: 2em;
}