html, body {
    font-family: Helvetica;
}
hr {
    border-style: solid;
    border-width: 2px;
    border-color: #006E00;
}
h1 {
    font-size: 2em;
    line-height: 2em;
    font-weight: 400;
}
h2 {
    font-size: 1.2em;
    line-height: 1;
    font-weight: 400;
    text-transform: uppercase;
}
h3 {
    font-size: 1em;
    line-height: 0.8;
    font-weight: 400;
    text-transform: uppercase;
}
p {
    font-size: 0.9em;
    line-height: 1.2em;
    font-weight: 300;
    margin: 0.3em 0 0.3em 0;
    padding: 0;
}
body {
    margin: 0 0;
    padding: 0 0;
    line-height: 1em;
    color: #444;
    font-family: "Open Sans", sans-serif;
}
.jumbo {
    width: 100%; 
    margin: auto;
    clear: both; 
    text-align: center;
}
.center {
    text-align: center;
}
img {
    border: 0;
}
.section {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    padding: 2em;
    max-width: 1200px;
    width: 100%;
    clear: both; 
    display: inline-block;
}
.left {
    text-align: left; 
    padding: 0 2em 5em 2em;    
}

.display-inline-block {
    display: inline-block;
}
.service-anchor {
    text-decoration: none;
    color: #006E00;
    line-height: 1.2em;
    font-size: 1.2em;
}
.green-section {
    background: #006E00;
    color: #fff;
}
.green-title {
    color: #006E00;  
    text-align: center;
    text-decoration: none;
}
.green-a a {
    color: #FFF;
}

.logo-container img {
    float: left;
    vertical-align: top;
}

.train {
    font-family: serif; 
    font-size: 1.1em; 
    font-style: italic;
    margin: 0.8em 0 0.2em 0;
    text-align: left;
}
.lead {
    line-height: 1.5em;
    font-size: 1em;
    font-family: sans-serif;
    margin: 0.2em 0 0.4em 0;
    margin-top: 0;
    text-align: left;
}

.service {
    line-height: 1.5em;
    font-size: 1.4em;
    font-family: sans-serif;
    margin: 2em 0 0.4em 0;
    text-align: left;    
}

.silver a {
    color: #006E00;
    font-family: 'Pontano Sans', sans-serif;
    font-size: 1em;
    line-height: 1.2em;
    text-decoration: none;
    letter-spacing: 1px;
    
    display: inline-block;
    border-bottom: 1px solid #CCC;
}

.silver a:hover {
    border-bottom-color: #006E00;
}

.img-top {
    margin: 2em 0 2em 0;
}
.img-left {
    padding: 0 1em 0 0; 
    margin: 0 1em 0 0; 
    float: left;
}
.img-left img {
    width: 250px; 
    height: auto;
}

/* WORD CLOUD START*/

#word-cloud {
    max-width: 1200px;
    /* height: 10em; */
    margin: 0 auto;
    position: relative;
    display: block;
    clear: none;
    font-family: monospace;
    min-width: 300px;
}

#word-cloud span {
    position: absolute;
}
#word-cloud .bound {
    height: 20px;  
    display: inline-block;
}

#word-cloud .word-1 {
    color: #DEF;
    float: left;
    padding: 0.2em;
    font-size: 1.3em;
    -webkit-transform: skew(3deg,-3deg); /* Safari and Chrome */
    -moz-transform: skew(3deg,-3deg);   /* Firefox */
    -ms-transform: skew(3deg,-3deg);   /* IE 9 */
    -o-transform: skew(3deg,-3deg);   /* Opera */
    transform: skew(3deg,-3deg);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;    
}

#word-cloud .word-2 {
    color: #FDD;
    float: left;
    padding: 0.2em;
    font-size: 1.7em;
}

#word-cloud .word-3 {
    color: #FED;
    float: left;
    padding: 0.4em;
    margin: 0;
    font-size: 1em;
    -webkit-transform: skew(3deg,-3deg); /* Safari and Chrome */
    -moz-transform: skew(3deg,-3deg);   /* Firefox */
    -ms-transform: skew(3deg,-3deg);   /* IE 9 */
    -o-transform: skew(3deg,-3deg);   /* Opera */
    transform: skew(3deg,-3deg);    
    
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

#word-cloud .word-4 {
    color: #DDF;
    float: left;
    padding: 0em;
    font-size: 1.2em;
    -webkit-transform: skew(-2deg,2deg); /* Safari and Chrome */
    -moz-transform: skew(-2deg,2deg);   /* Firefox */
    -ms-transform: skew(-2deg,2deg);   /* IE 9 */
    -o-transform: skew(-2deg,2deg);   /* Opera */
    transform: skew(-2deg,2deg);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

#word-cloud .word-5 {
    color: #EFE;
    float: left;
    padding: 0.2em;
    font-size: 1.3em;
    -webkit-transform: skew(3deg,-3deg); /* Safari and Chrome */
    -moz-transform: skew(3deg,-3deg);   /* Firefox */
    -ms-transform: skew(3deg,-3deg);   /* IE 9 */
    -o-transform: skew(3deg,-3deg);   /* Opera */
    transform: skew(3deg,-3deg);
}

#word-cloud .word-6 {
    color: #DFD;
    float: left;
    padding: 0.2em;
    font-size: 1.2em;
}

#word-cloud .word-7 {
    color: #EFE;
    float: left;
    padding: 0.2em;
    font-size: 1.2em;
    -webkit-transform: skew(3deg,-3deg); /* Safari and Chrome */
    -moz-transform: skew(3deg,-3deg);   /* Firefox */
    -ms-transform: skew(3deg,-3deg);   /* IE 9 */
    -o-transform: skew(3deg,-3deg);   /* Opera */
    transform: skew(3deg,-3deg);}

/* WORD CLOUD END */

.footer {
    font-size: 0.8em;
    background: #006E00;
    color: #fff;
    padding: 3em;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
}
.rotate {
    -webkit-transform: rotate(270deg); /* Safari and Chrome */
    -moz-transform: rotate(270deg);   /* Firefox */
    -ms-transform: rotate(270deg);   /* IE 9 */
    -o-transform: rotate(270deg);   /* Opera */
    transform: rotate(270deg);
}
.unicode-icon {
    font-family: serif; 
    font-size: 8em;
    margin: 0; 
    line-height: 1em;
    text-align: center;
    color: #006511;
}

/* use these to switch between hamburger menu and tabs */
#top.hamburger-open #menu-full {
	display: block;
	
    position: absolute;
    right: 0px;
    margin-top: -2px;
    margin-left: -2px;
    width: 10.2em;
    /*top: 5em;
    left: 50%;
    margin-left: -5.1em;*/

	background-color: #F5F5F5;
	border: 2px solid #7d7d7d;
	padding: 0.5em;
	box-shadow: 0 0 0.5em 0.2em #AAA;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

#menu-button-hamburger {
    display: none;
    border: 2px solid #7d7d7d;
    padding: 0.2em;
    
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    -ms-border-radius: 0.2em;
    -o-border-radius: 0.2em;
    border-radius: 0.2em;
}

#top #menu-full .link-container {
    display: inline-block;
}
#top.hamburger-open #menu-full .link-container {
    display: block;
}

#top #menu-full a {
    display: inline-block;
    text-decoration: none;
}

#menu-full a {
    color: #555;
    border-bottom: 1px solid #AAA;
    text-decoration: none;
}

#menu-full a:hover {
    border-bottom-color: #006E00;
}

@media screen and (max-height: 320px) {
    #top.hamburger-open #menu-full {
        width: 16.4em;
        font-size: 0.9em;
    }
    #top.hamburger-open #menu-full .link-container {
        display: inline-block;
    }
}
@media screen and (min-width: 800px) {
    #menu-hamburger {
    	display: none;
    }
    #menu-full {
    	display: block;
        margin-top: 1em;
        white-space: nowrap;
    }
    .menu-positioning-container {
        float: right;
    }
}

@media screen and (max-width: 799px) {
    #menu-hamburger {
    	display: block;
    }
    #menu-button-hamburger {
        display: block;
    }
    #menu-full {
    	display: none;
    }
    .menu-positioning-container {
        position: fixed;
        top: 2px;
        right: 2px;
    }
}
/* END */



/* GRID STUFF */
.grid-4, .grid-3, .grid-2 {
    display: block;
    
}
.grid-4 .block, .grid-3 .block, .grid-2 .block {
    /*display: inline-block;*/
    width: 100%;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 2em;
    float: left;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

@media (min-width: 0) {
    .grid-4 .block {
        width: 100%;
    }
}
@media (min-width: 550px) {
    .grid-4 .block {
        width: 50%;
    }
    .second-row-left {
        clear: left;
    }
}
@media (min-width: 900px) {
    .grid-4 .block {
        width: 25%;
    }
    .second-row-left {
        clear: none;    
    }
}

@media (min-width: 0px) {
    .grid-3 .block {
        width: 100%;
    }
}
@media (min-width: 850px) {
    .grid-3 .block {
        width: 33.3%;
    }
}

@media (min-width: 500px) {
    .grid-2 .block {
        width: 50%;
    }
}