/*
 Theme Name:   Venna theme
 Theme URI:    http://www.venna.fi/
 Description:  Generatepress Child Theme
 Author:       DG Mikkeli
 Author URI:   http://dgmikkeli.fi
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  venna
*/


@import url('https://fonts.googleapis.com/css?family=Abel');

/* Header */
.site-header {
    background: url('../../uploads/head-bg.png') repeat-x 0 0;
}

.inside-header {
    padding: 0px 0px;
}


/* Navigation */
#primary-menu {
    font-family: 'Abel', sans-serif;
}

.main-navigation .main-nav ul li[class*="current-menu-"] a::before{
    content:"- ";
}

.main-navigation .main-nav ul li[class*="current-menu-"] a::after{
    content:" -";
}

.main-navigation a{
    font-size: 1.3em;    
    text-transform: uppercase;

}

/* Basic */
h1 {
    font-size: 30px;
}


h1:before {
    content: '\f06c';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #4AAC01;
    padding-right: 7px;
    padding-bottom: 5px;
}

h2 {
    color: #ff730f;
}

/* Main area */
.page-id-2 #main {
    background: url('../../uploads/green-bg.jpg') repeat-x 0px -15px;  
}

.site-info {
    background: url('../../uploads/brown-bg.jpg') repeat-x 0 0 #343434;  
    padding: 40px 20px 40px 20px;
    font-family: 'Abel', sans-serif;
    color: #ff8f3d;
}

#etusivun-nostot h2{
    color: #FFF;
    font-weight: 900;
    margin-bottom: 0px;
}

#etusivun-nostot h3{
    color: #fbeb7b;
    margin-bottom: 35px;
}

#etusivun-nostot p{
    color: #fff;
    font-size: 0.9em;
}

/* color boxes */
.orange {
    background-color: #ff8f3d;
    padding: 30px 35px !important;
    margin-bottom: 0px !important;
}

.yellow {
    background-color: #ffc234;
    padding: 30px 35px !important;
    margin-bottom: 0px !important;
}

.green1 {
    background-color: #9cdb2c;
    padding: 30px 35px !important;
    margin-bottom: 0px !important;
}
.green2 {
    background-color: #61ddab;
    padding: 30px 35px !important;
    margin-bottom: 0px !important;
}

#etusivun-teksti .grid-container {
	max-width: 800px;
}


/* MEDIA */
@media (max-width: 768px) {
    .main-navigation, .main-navigation ul ul {
        background: url('../../uploads/green-bg.jpg') repeat 0px 0px #222222;
    }
    
    .inside-header > :not(:last-child) {
        margin-bottom: 0px;
    }
}


@media (min-width: 769px) {
    
    #primary-menu {
        margin-top: 45px;
    }
    
    #primary-menu a{
        margin-top: 5px;
        color: #705b46;
    }

    #main-navigation li a{
        color: #705b46;
    }

    .main-navigation .main-nav ul li a, .main-navigation .mobile-bar-items a, .menu-toggle {
        padding-left: 15px;
        padding-right: 15px;
        line-height: 60px;
    }    
    
    .main-navigation, .main-navigation ul ul {
        background: transparent;
    }

    .main-navigation .main-nav ul li > a:hover, .main-navigation .main-nav ul li > a:focus, .main-navigation .main-nav ul li.sfHover > a {
        color: #ff8f3d  !important;
        background: transparent;
    }

    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        color: #ff8f3d !important;
        background-color: transparent;
    }

    .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover, .main-navigation .main-nav ul li.sfHover[class*="current-menu-"] > a {
        color: #ff8f3d;
        background-color: transparent;
    }
   
}

@media (min-width: 769px) and (max-width: 804px) {
    .main-navigation .main-nav ul li a, .main-navigation .mobile-bar-items a, .menu-toggle {
        padding-left: 0px;
        padding-right: 18px;
    }     
   
}

@media (min-width: 769px) and (max-width: 1024px) {
	#etusivun-nostot .inside-grid-column {
		height: 240px;
		overflow: hidden;
	}
}

@media (min-width: 1025px) {
	#etusivun-nostot .inside-grid-column {
		height: 320px;
		overflow: hidden;
	}	
}

@media (max-width: 850px) { 
    #etusivun-teksti {
        padding: 0px 30px 30px 30px;
    }
}

@media (min-width: 1024px) {

	.site-header {
		position: fixed;
		top: 0px;
		z-index: 100;
		width: 100%;
	}

    .site-content {
        margin-top: 130px;
    }
    
    .page-id-2 .site-content {
        margin-top: 0px;        
    } 

    #etusivun-nostot {
        position: relative;
    }

    #etusivun-nostot .grid-container {
        margin-top: -130px;
        z-index:200;
        padding: 0px;
    }     
    
}