/*
Theme Name: Old but Gold
Description: Green corporate web design for SIM Finnish Hanoverian Society
Author: Ingrid
E-mail: ingrid.virtuaali@gmail.com
*/

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap&subset=latin-ext');

html, body{
height: 100%;
}

body{
width: 100%;
margin: 0;
padding: 0;
background: #fff;
font-family: 'Roboto', sans-serif;
color: #333;
font-size: 14px;
line-height: 22px;
font-weight: 400;
text-align: justify;
}

#hox{
width: 100%;
height: 40px;
margin: 0 auto;
background: #ab3131;
position: static;
display: inline-block;
vertical-align: top;
}

#hoxtxt{
width: 100%;
height: 40px;
margin: 0 auto;
text-align: center;
}

.hoxtxt{
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
}

/* Typography */

.centered {
text-align: center;
}

.img_right{
margin: 10px 0 10px 20px;
padding: 0;
float: right;
}

.img_left{
margin: 10px 20px 10px 0;
padding: 0;
float: left;
}

strong {
font-weight: 700;
}

.lead{
font-family: 'Playfair Display', serif;
font-size: 18px;
font-weight: 400;
font-style: italic;
line-height: 28px;
}

ol.list {
list-style-position: inside;
margin: 0;
padding: 0;
}

ul.list {
list-style-type: square;
list-style-position: inside;
margin: 0;
padding: 0;
}

ul.nested {
list-style-type: circle;
list-style-position: inside;
}

li {
margin: 0;
padding: 0 0 7px 0;
}

a {
color: #004d05;
text-decoration: underline;
font-weight: normal;
}

a:hover {
color: #006206;
text-decoration: none;
font-weight: normal;
}

/* Titles */

h1{
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size: 35px;
color: #222;
}

h2{
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size: 25px;
color: #222;
}

.horses_left h2, .horses_center h2, .horses_right h2{
font-family: 'Playfair Display', serif;
font-size: 20px; 
font-weight: 700;
color: #29482b;
text-transform: uppercase;
text-align: center;
padding: 0;
margin: 0 0 4px 0;
}

.horses_left h3, .horses_center h3, .horses_right h3{
font-style: italic;
font-family:'Playfair Display', serif;
font-weight: 400;
font-size: 13px;
text-align: center;
color: #292929;
margin: 0 0 20px 0;
}

.footertxt h1{
font-family: 'Roboto Slab', serif;
font-size: 30px;
font-weight: 400;
color: #cecece;
text-align: left;
margin: 2px 0 5px 0;
}


/*top*/

#top{
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-image: url(topbg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: static;
display: inline-block;
vertical-align: top;
}

.top{
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}

/*navigation*/

#navbg{
width: 100%;
height: 60px;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255, 0.1);
}

#nav{
width: 100%;
margin: 0 auto;
}

.nav{
position: relative;
overflow: hidden;
}

.nav a, .nav a:visited{
font-family: 'Playfair Display', serif;
font-size: 15px;
font-weight: 400;
color: #e2ca5b;
text-transform: uppercase;
text-decoration: none;
text-align: center;
padding: 18px 16px;
float: left;
}

.nav a:hover{
color: #fff;
text-decoration: none;
}

.nav a.active{
color: #fff;
}

.nav-right{
float: right;
}

/*content*/

#container, #container2 {
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
background: #fff;
position: static;
}

.content {
margin: 0;
padding: 30px 0 50px 0;
overflow: auto;
}

.paragraph2_left{
width: 100%;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
float: left;
}

.paragraph2_right{
width: 100%;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
float: right;
}

.paragraph3_left{
width: 100%;
height: auto;
margin: 0 37px 0 0;
padding: 0;
overflow: auto;
float: left;
}

.paragraph3_right{
width: 100%;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
float: right;
}

table.events {
font-size: 13px;
width:100%;  
}

.headerow {
font-weight: 700;
background-color: #fafafa;
}

.row {
border-top: 1px solid #e4e4e4;
background-color: #fff;
}

.row2 {
border-top: 1px solid #e4e4e4;
background-color: #fafafa;
}

/*green wrapper*/

#wrapper_green{
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
background: #29482b;
color: #e6e6e6;
}

#wrappertxt{ 	
width: 100%;
margin: 0 auto;
}

.wrappertxt{
padding: 50px 0;
margin: 0;
}

/*horses*/

.horses_left{
width: 100%;
height: auto;
margin: 10px 0 10px 0;
padding: 30px;
float: left;
text-align: center;
background: #fafafa;
}

.horses_center{
width: 100%;
height: auto;
margin: 10px 0 10px 18px;
padding: 30px;
float: left;
text-align: center;
background: #fafafa;
}

.horses_right{
width: 100%;
height: auto;
margin: 10px 0 10px 0;
padding: 30px 20px;
float: right;
text-align: center;
background: #fafafa;
}

.horses_left a, .horses_center a, .horses_right a{
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 14px;
color: #e2ca5b;
text-transform: uppercase;
background: #29482b;
padding: 10px 20px;
margin: 13px 0 0 0;
text-align: center;
text-decoration: none;
display: inline-block;
}

.horses_left a:visited, .horses_center a:visited, .horses_right a:visited {
color: #e2ca5b;
text-decoration: none;
}

.horses_left a:hover, a:active {
color: #fff;
font-weight: 400;
text-decoration: none;
}

.horses_center a:hover, a:active {
color: #fff;
font-weight: 400;
text-decoration: none;
}

.horses_right a:hover, a:active {
color: #fff;
font-weight: 400;
text-decoration: none;
}


/*footer*/

#footer{
width:100%;
height: 400px;
background: #112713;
margin: 0 auto;
padding: 0;
display: inline-block;
vertical-align: bottom;
position: static;
}

#footertxt{ 	
width: 100%;
height: 400px;
margin: 0 auto;
}

.footertxt{
padding:50px 0 0 0;
margin:0 0 8px 0;
font-family: 'Roboto', sans-serif;
color: #cecece;
font-size: 13px;
font-weight: 400;
line-height: 20px;
}

.footertxt_left{
width: 100%;
height: 250px;
margin: 30px 0 50px 0;
padding: 0;
overflow: auto;
float: left;
border-right: 1px solid #173319;
}

.footertxt_right{
width: 100%;
height: 250px;
margin: 30px 0 50px 0;
padding: 0;
overflow: auto;
float: right;	
}

.footertxt a{
color: #fff;
text-decoration:underline;
font-weight: normal;
}

.footertxt a:hover, a:active {
color: #cecece;
text-decoration: none;
font-weight: normal;
}

.vertical-menu {
width: 100%;
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
}

.vertical-menu a {
display: block;
padding: 12px 0;
text-decoration: none;
border-bottom: 1px solid #173319;
color: #fff;
}

.vertical-menu a:hover {
color: #cecece;
}

/*css for different screens*/

@media screen and (min-width: 1152px) {
#nav { 	
width: 1220px;
}

.top, #container, #container2, #wrappertxt, #footertxt { 	
width: 1200px;
}

.paragraph2_left, .paragraph2_right, .footertxt_left, .footertxt_right{ 	
width: 580px;
}

.paragraph3_left, .paragraph3_right{
width: 375px;
}

.horses_left, .horses_center, .horses_right{
width: 335px;
}

}

@media screen and (min-width: 600px) and (max-width: 1151px) {	
#nav { 	
width: 99%;
}

#top, .top{ 	
width: 100%;
}

#container, #container2, #wrappertxt, #footertxt { 	
width: 90%;
}

.paragraph2_left, .paragraph2_right{ 	
width: 48%;
}

.footertxt_left{ 	
width: 48%;
}

.footertxt_right{ 	
width: 48%;
}

.paragraph3_left, .paragraph3_right{
width: 30%;
}

.horses_left, .horses_center, .horses_right{
width: 26%;
}
}