/*   
Theme Name: ggstyle
Theme URI: https://github.com/Greengraphics/ggstyle
Description: Nice theme. 
Author: Nathan
Author URI: http://www.greengraphics.com.au/
Version: 1.5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: left-sidebar, fluid-layout, responsive-layout, two-columns
Text Domain: ggstyle
*/





/******************************************************************************/

/*!     INDEX:                                                                */
/*!         i - Resets, Imports, Utilities, Misc                              */
/*!        ii - Body                                                          */
/*!       iii - Document Colors                                               */
/*!        iv - Typography                                                    */

/*!     STRUCTURE:                                                            */
/*!         1. - Header                                                       */
/*!         2. - Menus                                                        */
/*!         3. - Section                                                      */
/*!         4. - Article                                                      */
/*!         5. - Aside                                                        */
/*!         6. - Footer                                                       */
/*!         7. - Responsive                                                   */

/******************************************************************************/





/******************************************************************************/

/*!     i - Imports, Resets, Utilities, Misc                                  */

/******************************************************************************/




.search-form--label,
input.search-submit {
    display: inline-block;
}


.btn {
    background: rgba(0,0,0,0.5);
    color: white;
    display: block;
    font-family: 'Roboto Slab', sans-serif;
    font-size: 14px;
    padding: 32px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: background 0.3s ease;
            transition: background 0.3s ease;
}

.aside .btn {
	padding: 20px;
	margin-bottom: 15px;
}

.btn:hover {
    background: black;
    color: white;
}






/******************************************************************************/

/*!     ii - Body                                                             */

/******************************************************************************/





body {
	background: url(img/bg.jpg) no-repeat center top rgb(249, 229, 182) fixed;
	color: #333;
	font-size: 18px;
	font-family: 'Arial Narrow', Arial, Sans-serif;
	font-weight: 300;
}





/******************************************************************************/

/*!     iii - Document Colors                                                 */

/******************************************************************************/





.color1, h1, h3, a {
    color: rgb(74, 91, 87);
}
.color2, h2, a:hover {
    color: rgb(111, 102, 90);
}
.color3 {
    color: rgb(249, 229, 182);
}
.color4 {
    color: rgb(198, 177, 145);
}
.black, h4 {
    color: black;
}
.white {
    color: white;
}





/******************************************************************************/

/*!     iv - Typography                                                       */

/******************************************************************************/



nav, .footer, h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

.top { font-size: 15px; }

.aside { font-size: 16px;}

.footer { font-size: 14px; }





blockquote { 
    background: #efefef;
    font-size: 16px; 
    font-style: italic;
    margin: 15px 0 25px 0;
    padding: 20px;
    max-width: 600px;
}


a, .mobile-toggle:hover { text-decoration: none; }
a:hover { text-decoration: none; }

a[href*='tel:'] {
    font-weight: 700;
}

a.read-more {
    color: black;
    display: inline-block;
    font-style: italic;
    font-weight: 700;
}


input,
textarea,
.article .gform_wrapper textarea {
    padding: 6px 8px;
    text-indent: 0;
}




/******************************************************************************/

/*!     STRUCTURE START                                                       */

/*!     1. - Header                                                           */

/******************************************************************************/
	




.top {
    position: relative;
}


    .top__logo {
        display: block;
        float: left;
        width: 140px;
    } 
    
    
        .icon--logo {
            height: auto;
            width: 100%;
        }      
    




/******************************************************************************/

/*!     2. - Menus                                                            */

/******************************************************************************/





.top__menuToggle {
    background: rgb(74, 91, 87);
    display: block;
    float: right;
    padding: 28px;
}

    
    .top__menuIcon {
        display: block;
        float: right;
    }




.top__menu {
    background: rgb(74, 91, 87);
    display: none;
    padding: 16px 56px;
    position: absolute; top: 100%; right: 0;
    text-align: right;
    z-index: 2;
}


    .icon--H {
        display: none;
        height: 40px;
        margin: 0px auto;
        padding: 0 0 10px;
        position: absolute; bottom: 100%; left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        width: 100%;
    }
    
    
        .icon--H path {
            fill: rgb(74, 91, 87);        
        }
        
        .icon--H:hover path,
        li:hover .icon--H path,
        .current_page_item .icon--H path {
            fill: white;
            opacity: 0.8;
        }
        
        .current_page_item .icon--H path {
            opacity: 1;
        }
    
    


    nav ul {
        list-style-type: none;
        margin: 0 auto;
        max-width: 960px;
        padding: 0;
    }
    
    nav ul.menu, nav div.menu > ul {
        margin: 0 auto;
        padding: 0;
    }
        

        nav li {
            margin-bottom: 0;
            position: relative;
        }


            nav li a {
                color: white;
                display: block;
                padding: 0px 12px;
                text-decoration: none;
                text-transform: uppercase;
                -webkit-transition: all 0.3s ease;
                   -moz-transition: all 0.3s ease;
                        transition: all 0.3s ease;
                white-space: nowrap;
            }
            
            nav li:hover > a, 
            nav li.current-menu-item > a, 
            nav li.current_page_item > a {
                color: white;
                text-decoration: none;
            } 
            
            
            nav li > ul {
                background: white;
                margin: 0;
                padding: 0 0 0 20px;
            }
            
            
                nav li > ul li a {
                    padding: 5px 10px;
                }
              
                



/******************************************************************************/

/*!     3. - Section                                                          */

/******************************************************************************/





.section {
    
}


.subscribe {
    margin: 0 auto;
    max-width: 960px;
    padding: 56px 0;
}

.subscribe p {
    margin: 0;
}




/******************************************************************************/

/*!     4. - Article                                                          */

/******************************************************************************/





.article {
    padding: 16px;
    position: relative;
}


.home .article,
.home .full .article {
    padding: 0;
}


    .slide__text {
        background: rgba(0,0,0,0.5);
        color: white;
        font-size: 16px;
        padding: 16px 32px 16px 25%;
        text-shadow: 0 0 15px black;
    }
    
    
    
    
    .action__item {
        position: relative;
        overflow: hidden;
    }
    
    
        .action__title {
            color: white;
            margin: 0;
            padding: 16px;            
            position: absolute; top: auto; right: 0; bottom: 0; left: 0;
            text-align: center;
            text-transform: uppercase;
            z-index: 2;
        }
       
        
            .action__title .icon--H {
                opacity: 0;
                position: absolute; bottom: 42px;        
                -webkit-transition: opacity 0.5s;
                        transition: opacity 0.5s;                
            }
            
                .action__title .icon--H path {
                    fill: white;
                    opacity: 1;
                }
        
    
        .action__bg {
            background: rgba(0,0,0,0.5);            
            height: 53px;
            position: absolute; right: 0; bottom: 0; left: 0;
            -webkit-transition: height 0.5s;
                    transition: height 0.5s;             
            z-index: 1;
        }
    
            
    .action__item:hover .action__bg {
        height: 100%;
    }
    .action__item:hover .icon--H,
    .action__item .icon--H:hover {
        opacity: 1;
    }
    
    .post__details {
	    font-style: italic;
	    margin-bottom: 10px;
    }
    





/******************************************************************************/

/*!     5. - Aside                                                            */

/******************************************************************************/





.aside {
    background: rgba(249, 229, 182,0.5);
    padding: 16px;
}






/******************************************************************************/

/*!     6. - Footer                                                           */

/******************************************************************************/



.pageinate {
    clear: both;
    padding: 20px;
    text-align: center;
}


    .page-numbers {
        background: white;
        border: 1px solid black;
        border-radius: 3px;
        display: inline-block;
        font-size: 16px;
        font-weight: 700;
        padding: 5px 8px;
    }
    
    .page-numbers.current {
        background: #efefef;
    }
    
    .page-numbers.next, .page-numbers.prev {
        margin: 0 10px;
    }



.footerDeco {
    background: url(img/deco.png) no-repeat 15% top rgb(200,223,142);
    height: 75px;
}


.footer {
	background: rgb(74, 91, 87); 
    color: white;
	padding: 32px 16px;    
	width: 100%;
}

.footer p {
    margin: 0;
}

.footer a {
    color: white;
}


    .footer .alignleft {
        margin: 32px 0;
    }


    .social__link {
        display: block;
        margin: 5px 0;
    }
    
    .aside .social__link {font-size: 1.2em;}



.bg__pattern {
    background: url(img/bg__pattern.png) repeat-y center top;
    background-size: contain;
    display: none;
    position: fixed; top: 0; right: 40px; bottom: 0;
    width: 70px;
    z-index: -1;
}



/******************************************************************************/

/*!     7. - Responsive                                                       */

/******************************************************************************/


@media (max-width: 580px) {

	.top__logo {
	margin: 20px 0 0 20px;
	width: 120px;
}

}

@media (min-width: 580px) {
    
    .top {
        padding: 32px 0 0;
    }    
    
    
    .top__logo {
        float: none;
        margin: 0 auto;
        text-align: center;   
    }
    
    
    .top__menuToggle {
        float: none;        
        margin: 16px 0 0;
        padding: 16px;
    }
    
}


@media (min-width: 768px) {
     
    .article {
        float: left;
        padding: 32px 16px;
        width: 70%;
    }
    
    .aside {
        float: right;
        padding: 32px 16px;
        width: 30%;
    }
    
    
    .full .article, .article.full {
        float: none;
        padding: 32px;
        width: 100%;
    }
    
    
    .slide__text {
        font-size: 22px;
        padding: 16px 32px 16px 16px;
        position: absolute; top: 50%; right: 0;
        transform: translateY(-50%);
        width: 50%;
        z-index: 1;
    }    
    
    
    
    .bg__pattern {
        display: block;
    }

}


@media (min-width: 820px) {
    
    
    .top__menuToggle {
        display: none;
    }
    
    
    .top__menu {
        display: block;
        margin: 16px 0 0;
        padding: 56px 0 16px;
        position: static;
        text-align: center;
        width: auto;
    }
    
    
        .icon--H {
            display: block;
        }
    
    
        nav li {
            border-right: 1px solid white;
            display: inline-block;
        }
        
        nav li:last-child {
            border-right: none;
        }
        
            nav li a {
                line-height: 1;
            }    
    
}


@media (min-width: 960px) {
    
}