body{background:#f5f7f9; font-family: "Avenir Next", Arial, sans-serif; font-size: 100%; text-align: center; margin: 0; color:#666;}
.container-small{width:80%; max-width: 640px; margin: auto;}
.container-med{width:90%; max-width: 940px; margin: auto;}
.d-flex{display: flex;}

.jumbotron{width:100%; padding:5rem 0 calc(5rem + 100px) 0; display: flex; justify-content: center;}
.jumbotron img{margin-bottom: 2rem;}

.template-wrap{display: flex; flex-wrap: wrap; width: 90%; max-width: 900px; align-items: center; justify-content: center; margin: -100px auto 5rem auto;}
.template{flex:0 0 calc(31.66666667% - 30px); align-self: center; margin: 0 2.5% 2.5% 0; background: #fff; padding:15px; -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); transition:all 0.2s ease-in-out; bottom:0;}
.template:nth-child(3n+3), template:last-child{margin-right: 0;}
.template:hover{position: relative; bottom:10px; cursor: pointer;}
.template img{display: block;}

.strip{display: flex; background: #fff; border-top:1px solid #ececec; justify-content: center; font-size: 1.3rem; padding: 5rem 0;}
.strip .left{ flex-basis:35%; margin-right: 5%; text-align: left;}
.strip .right{flex:0 0 25%; margin-left:5%; text-align: left; align-self: center;}

.strip-heading{background: #fff; text-align: center; border-top:1px solid #ececec; padding:20px 0;}
.strip-heading h3{margin:0; font-size: 1.4rem; font-weight: normal;}

.strip-tiles{display: flex; background:#fff; border-bottom: 1px solid #ececec; flex-wrap: wrap; margin-bottom: 5rem;}
.strip-tiles .tile{flex: 1; border-right: 1px solid #ececec; padding:50px 30px; border-top:1px solid #ececec; }
.strip-tiles .tile:last-child{border-right:none;}
.strip-tiles .tile p{margin-bottom: 0; margin-top: 10px;}

.testimonial{display: flex; background: #2c2f3d; border-radius: 7px; padding:30px 50px; margin-bottom: 5rem; -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
.testimonial .img-wrap{align-self: center;}
.testimonial .img-wrap img{border-radius: 100%;}
.testimonial .statement{text-align: left; margin-left: 50px; font-size: 1.4rem; font-style: italic; color:#fff;}
.testimonial .statement strong{color:#22ccaa; font-weight: normal; font-style: normal;}
.testimonial .statement p:last-of-type{margin-bottom: 0;}

h1{color:#2c2f3d; font-size: 3.5rem; margin-top: 0; font-weight: 700; line-height: 3.9rem;}
.jumbotron p{font-size: 1.4rem; color:#fff;}
img{max-width: 100%;}
.button{background: #22ccaa; color:#fff; font-size: 1.4rem; padding:10px 20px; border-radius: 7px; border-bottom:5px solid rgba(0,0,0,0.5); text-decoration: none; display: inline-block; text-align: center; transition:all 0.1s ease-in-out;}
.button:active{border-bottom: none; position: relative; top:5px; margin-bottom: 5px;}
.button.green{background: #22ccaa;}
.button.green:hover{background: #10AE90;}

.checklist{list-style-type: none; padding:0; margin: 0;}
.checklist li{background: url('../i/tick-green.svg') left center no-repeat; padding: 10px 0 10px 50px;}

body#seasonal .jumbotron{background: #009D6B url('../i/mast-green.svg') bottom center no-repeat; background-size: 101%;}
body#seasonal.thanksgiving .jumbotron{background: #3B1A08 url('../i/bg-thanksgiving.png') top center no-repeat;}
body#seasonal .jumbotron h1{color:#fff;}
body#seasonal.thanksgiving .jumbotron h1{color:orange;}
body#seasonal .strip h2{color: #3B1A08;}
body#seasonal .strip-heading h3{color:#3B1A08;}

body#seasonal .button{background: #ffcc33; color:#fff; font-size: 1.4rem; padding:1rem 1.5rem; border-radius: 100px; text-decoration: none; display: inline-block; text-align: center; transition:all 0.1s ease-in-out; border: none; color:#212529;}
body#seasonal .button:hover{background-color:#e0a800; color:#fff;}
body#seasonal .button:active{border-bottom: none; position: relative; top:5px; margin-bottom: 5px;}

body#seasonal .button.green{background: #22ccaa;}
body#seasonal .button.green:hover{background: #10AE90;}
			
@media only screen and (max-width: 1260px) {
.strip .left{ flex-basis:45%;}
.strip .right{flex:0 0 35%;}
}


@media only screen and (max-width: 915px) {
.strip{flex-direction: column; justify-content: space-around; padding:2rem 0;}
.strip .left{ width: 60%; margin-right: 0; align-self: center; text-align: center;}
.strip .right{width:60%; align-self: center; text-align: center;}

.template-wrap{margin-bottom: 2rem;}

.checklist{margin-top: 30px;}
.checklist li{background: url('../i/tick-green.svg') top center no-repeat; padding: 30px 0 0 0; margin-bottom: 20px;}
}

@media only screen and (max-width: 760px) {
h1{font-size: 2.5rem; line-height: 3rem;}
.jumbotron p{font-size: 1.2rem;}
.jumbotron .container-small{width:80%;}
.container-small{width:60%;}
.template{flex:0 0 calc(48.75% - 20px); margin: 0 2.5% 2.5% 0; background: #fff; padding:10px;}
.template:nth-child(2n+2), template:last-child{margin-right: 0;}
.template:nth-child(3n+3){margin-right: 2.5%;}
.strip{font-size: 1.2rem;}
.strip .left{ width: 80%; margin-right: 0; align-self: center; text-align: center;}
.strip .right{width:80%; align-self: center; text-align: center;}
.testimonial{flex-direction: column;}
.testimonial .img-wrap{width:60%;}
.testimonial .statement{margin-left: 0; text-align: center;}
}

@media only screen and (max-width: 500px) {
	.container-small{width: 90%;}
	}