@import url('../fonts/stylesheet.css');

body,html {height:100%;}
body {font-family: 'Sanomat Sans';line-height:1.3;color:#000000;font-weight:300;text-align: center;font-size:14px;}
strong {font-weight:500;}
.small, small {  font-size: .675em;}

.navbar-brand {display: block;padding-top:50px;margin-bottom:30px}
.navbar-brand img{max-width:200px;}
.nav-link {color:#000;letter-spacing: 3px;}
.nav-link:hover {color:#000;opacity:0.7;}
.nav-item.active .nav-link {font-weight:bold;}
.navbar-toggler {margin:0 auto;border-color:#000}
.navbar-toggler:focus {box-shadow: none;}

#hero .nav-link, #hero-small .nav-link {color:#FFFFFF;}
#hero .nav-link:hover, #hero-small .nav-link:hover {color:#FFFFFF;}
#hero .navbar-toggler,#hero-small .navbar-toggler {border-color:#FFFFFF}

#hero {      background-size: cover;      height: 100vh;      min-height: 200px;    display:flex;align-items:center;justify-content:space-between;flex-direction: column;background-repeat: no-repeat;background-position: center;}
.hero-caption {font-size:40px;color:#FFFFFF;letter-spacing: 8px;font-weight:200;}
.hero-icon {display: inline-block;}
.hero-footer {padding:20px 0;text-align: center;}
.hero-footer a {color:#FFFFFF;text-decoration: none;margin:0 15px;letter-spacing: 1px;}

h1,.h1 {font-size:18px;letter-spacing: 4px;margin:20px 0 50px 0;font-weight:200;}
h2 {font-size:20px;letter-spacing: 8px;font-weight:200;}
h2 strong {font-weight:400;}
h3 {font-size:28px;letter-spacing: 8px;font-weight:400;}
h4 {font-size:24px;letter-spacing: 4px;font-weight:200;}
p {font-size:14px;letter-spacing: 0.5px;margin-bottom:20px;line-height:1.5;text-wrap: pretty;}

p.large {font-size:16px}

#intro {      padding: 60px 0    }
#intro p {line-height:30px;margin-bottom:30px;}
#intro a {color:#000000;text-decoration: none;}

.content-panel {      padding: 60px 0    ;color:#FFFFFF}
.content-panel p {line-height:30px;margin-bottom:30px;}
.content-panel a {color:#FFFFFF;text-decoration: none;}

#land-form,#contact-form {max-width:360px;margin:0 auto;}
#land-form input, #land-form textarea, #contact-form input, #contact-form textarea {border:1px solid #000000;border-radius:0;padding:7px 15px;margin-bottom:20px;font-size:14px;width:100%;font-size:18px;}
#land-form label, #contact-form label {font-size:16px}
.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
  transform: scale(.75) translateY(-.5rem) translateX(.35rem);
}
.btn-primary {background-color:#000000;border-color:#000000;border-radius:0;padding:6px 24px;font-size:18px;letter-spacing: 1px;}

#contact-form {max-width:300px;}
#contact-form label {color:#FFFFFF;}
#contact-form input, #contact-form textarea {border:1px solid #FFFFFF;background-color:#000000;color:#FFFFFF;}
#contact-form .btn-primary {background-color:#FFFFFF;border-color:#FFFFFF;border-radius:0;padding:6px 24px;font-size:18px;letter-spacing: 1px;color:#000000;}

footer {padding-top:100px}
footer img {max-width:200px;}
footer > div:nth-child(2) {margin-top:20px;letter-spacing: 0.5px;background-color:#000000;padding:30px 0;color:#FFFFFF;}
footer a {color:#FFFFFF;text-decoration: none;margin:0 15px;letter-spacing: 1px;}

.modal.show .modal-dialog {
  padding: 30px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	h1,.h1 {font-size:24px;letter-spacing: 7px;margin:35px 0 80px 0;}
	h2 {font-size:30px;letter-spacing: 12px;}	
	h3 {font-size:28px;letter-spacing: 7px;}
	h4 {font-size:24px;letter-spacing: 4px;}
	#intro,.content-panel {      padding: 80px 0    }	
	.hero-footer a {margin:0 25px;letter-spacing: 2px;}
	footer a {margin:0 25px;letter-spacing: 2px;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	h1,.h1 {font-size:26px;letter-spacing: 7px;margin:35px 0 80px 0;}
	h2 {font-size:30px;letter-spacing: 12px;}	
	h3 {font-size:28px;letter-spacing: 7px;}
	h4 {font-size:24px;letter-spacing: 4px;}
	.nav-link {padding-left:20px !important;padding-right:20px !important;}
	#intro,.content-panel {      padding: 90px 0    }
	#contact-form {max-width:360px;}
	.modal.show .modal-dialog {  padding: 0;}

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	h1,.h1 {font-size:28px;letter-spacing: 7px;margin:35px 0 80px 0;}
	h2 {font-size:30px;letter-spacing: 12px;}
	h3 {font-size:28px;letter-spacing: 7px;}
	h4 {font-size:24px;letter-spacing: 4px;}	
	#intro,.content-panel {      padding: 100px 0    }
}