/*
* Green Framework v1.0a - 2013
* A simple CSS framework for responsive websites
* Created by Mario Cavalcanti
* twitter.com/mariocavalcanti
 */

* {
    margin: 0px;
	padding: 0px;
}
 
html {
    font-size: 62.5%;
}

body {
    font-size: 16px; font-size: 1.6rem;
    -webkit-text-size-adjust: none;
}

html, body {
    font-family: Helvetica, Arial;
    height: 100%;
    min-width: 320px;

}

p {
    margin-bottom: 20px;
	font-size: 16px; font-size: 1.6rem;
}

p:last-child {
    margin-bottom: 0px;
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight:normal;
    font-family:Helvetica;
    margin-bottom: 20px;
    line-height:120%;
}

h1 {
    font-size: 34px; font-size: 3.4rem;
}

h2 {
    font-size: 30px; font-size: 3.0rem;
}

h3 {
    font-size: 28px; font-size: 2.8rem;
}

h4 {
    font-size: 24px; font-size: 2.4rem;
}

h5 {
    font-size: 22px; font-size: 2.2rem;
}

h6 {
    font-size: 18px; font-size: 1.8rem;
}

.container {
    width: 70%;
    max-width: 1000px;
    margin: 0px;
    padding: 0px;
    margin: 0 auto;
    display: table;
    height: auto;
}

.grid-5, .grid-10, .grid-15, .grid-20, .grid-25, .grid-30, .grid-33, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-66, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100 {
    box-sizing: border-box;
	-moz-box-sizing: border-box;
    float: left;
    padding: 1% 1%;
}

.left-5 {
    margin-left: 5%;
}

.left-10 {
    margin-left: 10%;
}

.left-15 {
    margin-left: 15%;
}

.left-20 {
    margin-left: 20%;
}

.left-25 {
    margin-left: 25%;
}

.left-30 {
    margin-left: 30%;
}

.left-33 {
    margin-left: 33%;
}

.left-35 {
    margin-left: 35%;
}

.left-40 {
    margin-left: 40%;
}

.left-45 {
    margin-left: 45%;
}

.left-50 {
    margin-left: 50%;
}

.left-55 {
    margin-left: 55%;
}

.left-60 {
    margin-left: 60%;
}

.left-65 {
    margin-left: 65%;
}

.left-70 {
    margin-left: 70%;
}

.left-75 {
    margin-left: 75%;
}

.left-80 {
    margin-left: 80%;
}

.left-85 {
    margin-left: 85%;
}

.left-90 {
    margin-left: 90%;
}

.left-95 {
    margin-left: 95%;
}

.left-100 {
    margin-left: 100%;
}

.right-5 {
    margin-right: 5%;
}

.right-10 {
    margin-right: 10%;
}

.right-15 {
    margin-right: 15%;
}

.right-20 {
    margin-right: 20%;
}

.right-25 {
    margin-right: 25%;
}

.right-30 {
    margin-right: 30%;
}

.right-33 {
    margin-right: 33%;
}

.right-35 {
    margin-right: 35%;
}

.right-40 {
    margin-right: 40%;
}

.right-45 {
    margin-right: 45%;
}

.right-50 {
    margin-right: 50%;
}

.right-55 {
    margin-right: 55%;
}

.right-60 {
    margin-right: 60%;
}

.right-65 {
    margin-right: 65%;
}

.right-70 {
    margin-right: 70%;
}

.right-75 {
    margin-right: 75%;
}

.right-80 {
    margin-right: 80%;
}

.right-85 {
    margin-right: 85%;
}

.right-90 {
    margin-right: 90%;
}

.right-95 {
    margin-right: 95%;
}

.right-100 {
    margin-right: 100%;
}

@media only screen and (min-width: 200px) and (max-width: 720px) {
    .only-desktop {
        display: none !important;
    }
	
    .container {
        width: 96%;
    }
	
    .grid-5, .grid-10, .grid-15, .grid-20, .grid-25, .grid-30, .grid-33, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100 {
        display: block;
        width: 100%;
        height: auto;
        padding: 10px;
    }
	
    .left-5, .left-10, .left-15, .left-20, .left-25, .left-30, .left-33, .left-35, .left-40, .left-45, .left-50, .left-55, .left-60, .left-65, .left-70, .left-75, .left-80, .left-85, .left-90, .left-95, .left-100 {
        margin-left: 0;
    }
	
    .right-5, .right-10, .right-15, .right-20, .right-25, .right-30, .right-33, .right-35, .right-40, .right-45, .right-50, .right-55, .right-60, .right-65, .right-70, .right-75, .right-80, .right-85, .right-90, .right-95, .right-100 {
        margin-right: 0;
    }
	
    .btn-green, .btn-grey, .btn-black {
        box-sizing: border-box;
		-moz-box-sizing: border-box;
        width: 100%;
    }
}

@media only screen and (min-width: 721px) {
    .only-mobile {
        display: none !important;
    }
	
    .grid-5 {
        width: 5%;
    }
	
    .grid-10 {
        width: 10%;
    }
	
    .grid-15 {
        width: 15%;
    }
	
    .grid-20 {
        width: 20%;
    }
	
    .grid-25 {
        width: 25%;
    }
	
    .grid-30 {
        width: 30%;
    }
	
    .grid-33 {
        width: 33%;
    }
	
    .grid-35 {
        width: 35%;
    }
	
    .grid-40 {
        width: 40%;
    }
	
    .grid-45 {
        width: 45%;
    }
	
    .grid-50 {
        width: 50%;
    }
	
    .grid-55 {
        width: 55%;
    }
	
    .grid-60 {
        width: 60%;
    }
	
    .grid-65 {
        width: 65%;
    }
	
    .grid-70 {
        width: 70%;
    }
	
    .grid-75 {
        width: 75%;
    }
	
    .grid-80 {
        width: 80%;
    }
	
    .grid-85 {
        width: 85%;
    }
	
    .grid-90 {
        width: 90%;
    }
	
    .grid-95 {
        width: 95%;
    }
	
    .grid-100 {
        width: 100%;
    }
}

/* Buttons, panels and other extra classes */
 .pnl-green, .pnl-grey, .pnl-black {
    color: #fff;
    width: 100%;
    padding: 0px;
	display: table;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
}

.pnl-green {
    background: #2C6700;
}

.pnl-grey {
    background: #E5E4D7;
    color: #000;
}

.pnl-black {
    background: black;
}

.fixed-bottom {
    position: fixed;
    bottom: 0px;
}

.fixed-top {
    position: fixed;
    top: 0px;
}

.btn-green, .btn-grey, .btn-black {
    padding: 10px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    display: inline-block;
    transition: background 0.2s;
	-webkit-transition: background 0.2s;
    cursor: pointer;
}

a {
    color: #3399cc;
    text-decoration: none
}

a:hover {
    color: #CC6633;
    text-decoration: underline;
}

.pnl-green a {
    color: #fff;
}

.pnl-grey a {
    color: #005500;
}

.pnl-black a {
    color: #DDD;
}

.pnl-green a, .pnl-grey a, .pnl-black a {
    text-decoration: none;
}

.pnl-green a:hover, .pnl-grey a:hover, .pnl-black a:hover {
    text-decoration: underline;
}

a.btn-green, a.btn-grey, a.btn-black, a:hover.btn-green, a:hover.btn-grey, a:hover.btn-black {
    text-decoration: none;
}

a.btn-green, a.btn-black {
    color: #fff;
}

a.btn-grey {
    color: #000;
}

.btn-green {
    background: #2C6700;
}

.btn-green:hover {
    background: #407B14;
}

.btn-grey {
    background: #E5E4D7;
}

.btn-grey:hover {
    background: #DDD;
}

.btn-black {
    background: #000;
}

.btn-black:hover {
    background: #111;
}

.btn-small {
    padding: 8px 35px;
}

.btn-medium {
    padding: 12px 40px;
}

.btn-large {
    padding: 16px 45px;
}

.btn-xlarge {
    padding: 20px 50px;
}

.txt-small {
    font-size: 14px; font-size: 1.4rem;
}

.txt-medium {
    font-size: 16px; font-size: 1.6rem;
}

.txt-large {
    font-size: 18px; font-size: 1.8rem;
}

.txt-xlarge {
    font-size: 22px; font-size: 2.2rem;
}

.txt-black {
    color: #000;
}

.txt-white {
    color: #fff;
}

.txt-lightgrey {
    color: #E5E4D7;
}

.txt-grey {
    color: #666;
}

.txt-left {
    text-align: left;
}

.txt-right {
    text-align: right;
}

.txt-center {
    text-align: center;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: uppercase;
}

.rectangle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

.center {
    margin: 0px auto;
}

.clear {
    float: none;
    clear: both;
}

.lspace-10 {
    margin-left: 10px;
}

.rspace-10 {
    margin-right: 10px;
}

.tspace-10 {
    margin-top: 10px;
}

.bspace-10 {
    margin-bottom: 10px;
}

.lspace-20 {
    margin-left: 20px;
}

.rspace-20 {
    margin-right: 20px;
}

.tspace-20 {
    margin-top: 20px;
}

.bspace-20 {
    margin-bottom: 20px;
}

.lpadding-10 {
    padding-left: 10px;
}

.rpadding-10 {
    padding-right: 10px;
}

.tpadding-10 {
    padding-top: 10px;
}

.bpadding-10 {
    padding-bottom: 10px;
}

.lpadding-20 {
    padding-left: 20px;
}

.rpadding-20 {
    padding-right: 20px;
}

.tpadding-20 {
    padding-top: 20px;
}

.bpadding-20 {
    padding-bottom: 20px;
}

.padding-10 {
    padding: 10px;
}

.padding-20 {
    padding: 20px;
}

.txt-shadow {
    text-shadow: 1px 1px 0px #111;
}

.txt-shadow2 {
    text-shadow: 2px 2px 0px #111;
}

.no-txt-shadow {
    text-shadow: none;
}

.no-padding {
    padding: 0px;
}

.no-margin {
    margin: 0px;
}

.pnl-shadow {
    box-shadow: 0px 4px 8px #666;
}

.height-10, .height-20 {
    width: 100%;
    background: none;
}

.height-10 {
    height: 10px;
}

.height-20 {
    height: 20px;
}