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

body{margin:0}

header {
	height: 50px;
	background-color: #C00003;
}

/* Main content */
.main {
  margin-top: 0px; /* Add a top margin to avoid content overlay */
}

#navbar 
{color: #FDFDFD;
background-color: #C00003;}

a:link {
  text-decoration: none;
}

/* Logokuvat */

.logo_mini {
	 display: block;
  margin-left: auto;
  margin-right: auto;
}

/* isot kuvat */

.kuva_iso {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Google fontit */

.courgette-regular {
  font-family: "Courgette", serif;
  font-weight: 400;
  font-style: normal;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 900

.red-hat-display-<uniquifier> {
  font-family: "Red Hat Display", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.red-hat-display-semibold {
  font-family: "Red Hat Display", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}




/* Tekstien tyylit */

h1 {
  font-family: "Red Hat Display", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;font-size: 30px;
  color: #C00003;}

p {font-family: "Red Hat Display", serif;
  font-optical-sizing: auto;
	}

.navtext {
  font-family: "Red Hat Display", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;font-size: 18px;
color: white}

.kieliversiolinkki {font-weight: 500; font-size: 14px;}

.kursiivi {font-family: 'Courgette';font-size: 22px; color: darkgray}
.teese {font-size:5vw;}

.leipis {font-weight: 500; font-style: normal;font-size: 18px;}

.iso {font-style: normal;font-size: 24px;}

.isompi {font-style: normal;font-size: 30px;}

.lihava {font-weight: 800;}

.linkki {
  font-family: "Red Hat Display", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;font-size: 18px;
line-height: 30px;}



.infoteksti1 {font-size: 20px;}

.infoteksti2 {font-size: 15px;}

.valkoinen {color: white}

.harmaa1 {color: lightgray}

/* Sivun osioiden muotoilut */

/* yläpalkki alkaa */

.top_logo, .top_fin
{ padding: 20px; 
	text-align: center;}


.valikko
{ padding: 10px; 
text-align: center;
	}


/* yläpalkki loppuu */

#slogan
{ padding: 10px; 
text-align: center;
color: #f2f2f2;
background-color: #C00003;}

#slogan2
{ text-align: center;}

#kuva
{ text-align: center;}

#huoneet
{ padding-top: 10px; text-align: center;}

#palvelut
{ padding-top: 10px; text-align: center;}

#varaus
{ text-align: center;}

#tutustu
{ background-color: dimgray; text-align: center;
padding-top: 20px; padding-bottom: 30px;}

#yhteys
{ background-color: #C00003; text-align: center;
padding-top: 20px; padding-bottom: 30px;}

/* Karttakuva responsiivinen */

.karttaosa{text-align: center; padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  max-width: 100%;
  max-heigth: 100%;
}


/* For smart phones */
@media screen and (max-width: 600px) {
}

/* For tablets */
@media screen and (min-width: 600px) and (max-width: 900px) {
}

/* For desktop computers */
@media screen and (min-width: 900px) {
}