/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {	border-collapse: collapse; border-spacing: 0;}

*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	position: relative;
}
/* @end */

html{ font-family: 'Roboto', sans-serif; line-height: 1.2; font-weight:400}
h1, h2, h3, h4, h5, h6, .hero-image > div, .condensed{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:700;
	text-transform: uppercase;
}

h1, .h1{font-size: 2.5rem}
h2, .h2{font-size: 1.8rem}
h3, .h3{font-size: 1.6rem}
h4, .h4{font-size: 1.4rem}
h5, .h5{font-size: 1.2rem}
h6, .h6{font-size: 1rem}

p {
    margin-bottom: 40px;
    line-height: 1.5;
    font-size: 1.2rem;
    font-weight: 300;
}
nav a{color: #777; cursor: pointer; text-decoration: none}
nav a:link {color:#777}
nav a:hover {color: #ccc; cursor: pointer;}

main a{color: #7cd123; cursor: pointer; text-decoration: none; transition: all .3s ease}
main a:hover {color: #5fab10;cursor: pointer;}

.special-link {color: #f78100; text-decoration: none;}

.btn {
    border: 1px solid;
    padding: 7px 30px;
    border-radius: 60px;
    margin-bottom: 30px;
    display: inline-block;
		color: #7cd123;
		cursor: pointer;
		text-decoration: none;
		transition: all .3s ease;
}

.btn:hover{background: #7cd123; color:#fff;border: 1px solid #7cd123;}

.light-headline{
	font-family: 'Roboto Light', sans-serif;
	line-height: 1.2;
	font-weight:100;
	text-transform:none;
	color: #999;
}

main ul.bulleted li,
.donations-page main li{
    margin-bottom: 20px;
    padding-left: 24px;
    background: url(../img/bullet.svg) top 6px left 0 no-repeat;
    background-size: 12px;
    line-height: 1.2;
}

.donations-page main h3{margin-bottom: 20px;}

.bold, strong, b{font-weight: 700;}

.light{font-weight: 300!important;}

.row{clear: both; overflow: hidden;}
.contain{ max-width: 1240px; margin:auto;}
.contain-sm{max-width: 984px; margin:auto;}

@media only screen and (max-width: 1400px) {
	.contain{ max-width: 1024px; margin:auto; padding: 0 40px}
}

@media only screen and (max-width: 769px) {
	.contain{ max-width: 100%; margin:auto; padding: 20px}
}

.bottom-xs{margin-bottom:10px}
.bottom-s{margin-bottom:20px}
.bottom-m{margin-bottom:30px}
.bottom-l{margin-bottom:40px}
.bottom-xl{margin-bottom:60px}

.top-xs{margin-top:10px}
.top-s{margin-top:20px}
.top-m{margin-top:30px}
.top-l{margin-top:40px}
.top-xl{margin-top:60px}

.left-xs{margin-left:10px}
.left-s{margin-left:20px}
.left-m{margin-left:30px}
.left-l{margin-left:40px}
.left-xl{margin-left:60px}

.right-xs{margin-right:10px}
.right-s{margin-right:20px}
.right-m{margin-right:30px}
.right-l{margin-right:40px}
.right-xl{margin-right:60px}

.pad-all-s{padding:20px}
.pad-all-m{padding:30px}
.pad-all-l{padding:40px}
.pad-all-xl{padding:50px}

.pad-left-xs{padding-left:10px}
.pad-left-s{padding-left:20px}
.pad-left-m{padding-left:30px}
.pad-left-l{padding-left:40px}
.pad-left-xl{padding-left:50px}

.pad-right-s{padding-right:20px}
.pad-right-m{padding-right:30px}
.pad-right-l{padding-right:40px}
.pad-right-xl{padding-right:50px}

.pad-top-s{padding-top:20px}
.pad-top-m{padding-top:30px}
.pad-top-l{padding-top:40px}
.pad-top-xl{padding-top:50px}

.pad-bottom-s{padding-bottom:20px}
.pad-bottom-m{padding-bottom:30px}
.pad-bottom-l{padding-bottom:40px}
.pad-bottom-xl{padding-bottom:50px}

.blue{color:#102338}
.blue-bg{background: #102338; color: #fff}

/*Icons*/
i[class^="icon-"] {
    height: 3vw;
    width: 3vw;
    display: inline-block;
    border: 1px solid chocolate;
}


/* For desktop: */
.col-1  {width: 8.33%;}
.col-2  {width: 16.66%;}
.col-3  {width: 25%;}
.col-4  {width: 33.33%;}
.col-5  {width: 41.66%;}
.col-6  {width: 50%;}
.col-7  {width: 58.33%;}
.col-8  {width: 66.66%;}
.col-9 	{width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.offset-1  {left: 8.33%;}
.offset-2  {left: 16.66%;}
.offset-3  {left: 25%;}
.offset-4  {left: 33.33%;}
.offset-5  {left: 41.66%;}
.offset-6  {left: 50%;}
.offset-7  {left: 58.33%;}
.offset-8  {left: 66.66%;}
.offset-9  {left: 75%;}
.offset-10 {left: 83.33%;}
.offset-11 {left: 91.66%;}
.offset-12 {left: 100%;}


.lc{text-transform: lowercase;}
.uc{text-transform: uppercase;}
.ctr{text-align: center;}
.center{margin: auto;}
.clear{clear: both;}
.pull-left{float: left;}
.pull-right{float: right!important;}
.flex{display:flex;}
.fullw {width: 100%;}
.block{display: block;}

@media only screen and (min-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        float: left;
    }
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}