/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
h1 {font-size:1.4rem;} /*1rem = 16px*/
h2 {font-size:1.3rem;}
h3 {font-size:1.2rem;}
h4 {font-size:1.0rem;}
/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  
  h1 {font-size:1.4rem;} /*1rem = 16px*/
  h2 {font-size:1.3rem;}
  h3 {font-size:1.2rem;}
  h4 {font-size:1.0rem;}
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  h1 {font-size:1.6rem;} /*1rem = 16px*/
  h2 {font-size:1.5rem;}
  h3 {font-size:1.4rem;}
  h4 {font-size:1.2rem;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  h1 {font-size:2.2rem;} /*1rem = 16px*/
  h2 {font-size:2.1rem;}
  h3 {font-size:1.6rem;}
  h4 {font-size:1.3rem;}
  
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  h1 {font-size:2.7rem;} /*1rem = 16px*/ 
  h2 {font-size:2.6rem;} 
  h3 {font-size:1.6rem;}
  h4 {font-size:1.4rem;}
}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (min-width: 950px) and (max-width:1100px) { 
  h1 {font-size:2.75rem;} 
  h2 {font-size:2.6rem;}
  h3 {font-size:1.6rem;}
  h4 {font-size:1.2rem;}
}





/*




*/

.clean-block.clean-post {
    padding-top: 0px;
}


.clean-navbar .logo {
	font-size:1.5rem;
	max-height: 80px;
	}
	
.clean-block.clean-post .post-image {
    background-size: cover;
    background-repeat: no-repeat;
    width: 20%;
	height: 150px;
}


/* Takaisin ylös painike */

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: #9fc1d3;
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: #1f6390;
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

/* Espoo footer */



.page-footer.espoo {
    background-color: #0047b6
}

.page-footer .footer-copyright {
    background-color: #0047b6;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    margin-top: 50px;
    border: 0px solid #ededed
}

.page-footer.espoo .footer-copyright {
    background-color: #0047b6;
    border-color: #0047b6
}

.page-footer .footer-copyright p {
    margin: 10px;
    color: #ffffff
}

.page-footer.espoo .footer-copyright p {
    color: #ffffff
}

.page-footer ul {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.7
}

.page-footer h5 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 30px;
	    text-align: center;
}

.page-footer.espoo h5 {
    color: #fff
}

.page-footer a {
    color: #53595f;
    text-decoration: none
}

.page-footer.espoo a {
    color: #d2d1d1
}

.page-footer a:focus,
.page-footer a:hover {
    text-decoration: none;
    color: #1d2125
}

.page-footer.espoo a:focus,
.page-footer.e a:hover {
    color: #fff
}

/* Espoo_client */

.clean-block .block-heading p {
    max-width: 500px;
}

.clean-block.clean-hero {
	height: calc(30vh);
	width: calc(100%);
    position: relative;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 0
}

.figure-caption {
    font-size: 100%;
	font-style: italic;
    color: #6E6E6E;
}

.title.is-1-beta:after{
  content: "beta";
  position: absolute;
  width: 250px;
  height: 50px;
  background-color: rgba(0,80,187,0.9);

  top: 40px;
  left: -45px;
  text-align: center;
  font-size: 1.5rem;
  font-family: Montserrat, sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  line-height: 3rem;
  -ms-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.fixed-top {
position:static;	

}

.alert-primary {
    color: #fff;
    background-color: rgba(0,80,187,0.9);
    border-color: #0050BB
}

.alert-primary hr {
    border-top-color: #9fcdff
}

.alert-primary .alert-link {
    color: #002752
}

.close {
    float: right;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5
}

.close:focus,
.close:hover {
    color: #fff;
    text-decoration: none;
    opacity: .95
}

.close:not(:disabled):not(.disabled) {
    cursor: pointer
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none
}