.intro { background: url("https://media1.shmoop.com/images/landing_images/school_district_bigbgr.jpg") no-repeat scroll center top transparent; width: 100%;} 
.intro h1 { font-family: 'Homemade Apple'; color: #fff; font-size: 7.5em; margin: 10px auto 50px; width: 100%;}
.intro .wrapper center p { font-family: 'Bitter'; color: #f4e3ca; font-size: 2.6em; margin: 0 auto;}

.features { background-color: #faf8f5; width: 100%; margin: 0; padding: 0 0 20px 0;}
.features h2 { font-family: 'Roboto'; color: #333; font-weight: lighter; font-size: 2.6em; margin-bottom: 0;}
.features h3 { font-family: 'Bitter'; color: #333; text-align: center; font-size: 1.4em; margin-top: 3px;}
.feature1, .feature2, .feature3 {width: 90%; border-radius: 3px; color: #fff; padding: 10px 15px; text-align: center; margin-top: 10px;}
.feature1 strong, .feature2 strong, .feature3 strong {color: #efead8; font-family: 'Roboto'; font-size: 1.5em;}
.feature1 .icon, .feature2 .icon, .feature3 .icon {margin: 3px auto 5px;}
.feature1 p, .feature2 p, .feature3 p {font-family: 'Roboto'; font-size: 1em; font-weight: lighter; font-style: italic; height: 110px;}
.feature1 {background: #df5c34 url('https://media1.shmoop.com/images/landing_images/school_district_orange_block.png') no-repeat;}
.feature2 {background: #009a62 url('https://media1.shmoop.com/images/landing_images/school_district_green_block.png') no-repeat;}
.feature3 {background: #1465ad url('https://media1.shmoop.com/images/landing_images/school_district_blue_block.png') no-repeat;}
.features .feature-button {color: #ff613b; font-family: 'Roboto'; font-weight: bold; text-transform: uppercase; font-size: 1em; padding: 6px 10px 4px; width: 75%; margin: 10px auto 5px; border-radius: 3px; cursor: pointer;
	background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #f6f3ea), color-stop(1, #e8e1c7));
	background-image: -o-linear-gradient(bottom, #f6f3ea 0%, #e8e1c7 100%);
	background-image: -moz-linear-gradient(bottom, #f6f3ea 0%, #e8e1c7 100%);
	background-image: -webkit-linear-gradient(bottom, #f6f3ea 0%, #e8e1c7 100%);
	background-image: -ms-linear-gradient(bottom, #f6f3ea 0%, #e8e1c7 100%);
	background-image: linear-gradient(to bottom, #f6f3ea 0%, #e8e1c7 100%);}
.features .feature-button:hover{
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbfaf6), color-stop(1, #f0ecda));
		background-image: -o-linear-gradient(bottom, #fbfaf6 0%, #f0ecda 100%);
		background-image: -moz-linear-gradient(bottom, #fbfaf6 0%, #f0ecda 100%);
		background-image: -webkit-linear-gradient(bottom, #fbfaf6 0%, #f0ecda 100%);
		background-image: -ms-linear-gradient(bottom, #fbfaf6 0%, #f0ecda 100%);
		background-image: linear-gradient(to bottom, #fbfaf6 0%, #f0ecda 100%);
}
.features .feature-button img {display: inline; margin-left: 5px; margin-top: -2px; height: 12px;}

.licence-wrapper {background-color: #efead8; width: 100%;}
.license .shmooperman {margin: 5px auto;}
.license p {color: #20292f; font-family: 'Roboto'; font-weight: bold; font-size: 1.2em; line-height: 1.3em; margin-top: 46px; margin-bottom: 0; text-align: right;}
.license .license-button {margin-top: 40px; background-color: #0070c9; color: #fff; float:left; padding: 12px 14px 10px 15px; font-family: 'Roboto'; text-transform: uppercase; font-size: 1.1em; line-height: 1.3em; border-radius: 3px; cursor: pointer;}
.license .license-button:hover {background-color: #0063b2;}
.license .license-button .icon {display: block; float: left; margin-bottom: 6px; margin-right: 7px;}
.license .span4 {position: relative;}
.license .arrow {position: absolute; right: -40px;}

.why { background: #5d1111 url('https://media1.shmoop.com/images/landing_images/school_district_blue_pattern.png') repeat; color: #FFF; position: relative; }
.why p { font-family: 'Bitter'; margin: 20px 0 15px; font-size: 1.2em;}
.why ul { font-family: 'Roboto'; list-style: none; margin: 0; padding: 0; font-size: 1em;}
.why ul li { margin-bottom: 5px; }
.icon-check {font-size: 1.1em; margin-right: 3px;}


@media only screen 
and (max-width : 780px) {
	.intro h1 { font-size: 4.6em; margin: 5px auto;}
	.intro .wrapper center p { font-size: 1.8em;}
	.feature1, .feature2, .feature3 {margin-top: 5px;}
	.feature1 {background: #df5c34;}
	.feature2 {background: #009a62;}
	.feature3 {background: #1465ad;}
	.feature1 p, .feature2 p, .feature3 p {height: 100%;}
}


/* Self checkout*/

.checkout-area #prices-note {background-color: #f0ebde; border-radius: 3px; font-family: 'Roboto'; padding: 15px 25px; margin: 20px 0; color: #20292f;}
.checkout-area #prices-note .heading {color: #333; font-weight: bold; font-size: 1.2em;}
.checkout-area #prices-note table tr td{vertical-align: top;}
.checkout-area #prices-note tr td:first-child {width: 80px;}
.checkout-area h2 {color: #333; font-family: 'Roboto'; font-size: 2.2em; font-weight: lighter; text-transform: uppercase; margin: 25px 0 0 0;}
.checkout-area h3 {color: #898989; font-family: 'Roboto'; font-size: 1.4em; margin-top: 0;}
.checkout-area .grants {display: block; margin: 25px 0 10px; color: #fff; font-size: 1.3em; background-color: #9dc18b; padding: 10px 20px 12px; text-align: center; text-decoration: none; border-radius: 8px;}
.checkout-area .grants:hover {background-color: #80a76d;}
.checkout-area .product-header {color: #333; font-family: 'Bitter'; font-weight: bold; background-color: #f0ebd9; padding: 20px; font-size: 1.2em; margin: 0; line-height: 1em;}
.checkout-area .self-serve-cart-form {background-color: #faf8f5; width: 100%;}
.checkout-area .self-serve-cart-form td {padding: 5px 20px;}
.checkout-area .small-print {text-align: right; color: #898989; background-color: #faf8f5; font-weight: 400; font-style: italic; padding: 20px; font-size: 1.1em;}

.checkout-area .weird-prices {margin: 59px 0 9px 0;}
.checkout-area .weird-prices a {color: #ff613b; font-family: 'Roboto'; font-size: 1.2em; }
.checkout-area .shopping-cart {min-height: 180px; background-color: #faf8f5; padding-bottom: 30px;}
.checkout-area .shopping-cart h3 {color: #333; font-family: 'Bitter'; font-weight: bold; background-color: #f0ebd9; padding: 18px 20px 15px; font-size: 1.2em; margin: 0; line-height: 1em;}
.checkout-area .shopping-cart h3 img {display: inline; margin-right: 5px;}
.checkout-area .shopping-cart table {background-color: #faf8f5; width: 100%; margin: 0; padding: 0;}
.checkout-area .shopping-cart table td {padding: 10px 20px;}
.checkout-area .price {background:  url('https://media1.shmoop.com/images/landing_images/school_district_shopping_cart_graphic.png') no-repeat; width: 184px; height: 133px; margin: -35px auto 0;}
.checkout-area .price-box {color: #fff; font-family: 'Roboto'; font-size: 2em; margin: 0 auto; padding: 45px 0 0 50px; text-align: center;}
.checkout-area .btns {margin: 10px auto;}
.checkout-area .btns input {border-radius: 3px; color: #fff; cursor: pointer; font-family: 'Roboto'; font-size: 1.2em; padding: 10px 20px 8px; text-transform: uppercase; width: 200px; border: none; display: block; margin: 0 auto;
	background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #07BD89), color-stop(1, #05A766));
	background-image: -o-linear-gradient(bottom, #07BD89 0%, #05A766 100%);
	background-image: -moz-linear-gradient(bottom, #07BD89 0%, #05A766 100%);
	background-image: -webkit-linear-gradient(bottom, #07BD89 0%, #05A766 100%);
	background-image: -ms-linear-gradient(bottom, #07BD89 0%, #05A766 100%);
	background-image: linear-gradient(to bottom, #07BD89 0%, #05A766 100%);}
.checkout-area .btns input:hover{
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #07c190), color-stop(1, #06af73));
		background-image: -o-linear-gradient(bottom, #07c190 0%, #06af73 100%);
		background-image: -moz-linear-gradient(bottom, #07c190 0%, #06af73 100%);
		background-image: -webkit-linear-gradient(bottom, #07c190 0%, #06af73 100%);
		background-image: -ms-linear-gradient(bottom, #07c190 0%, #06af73 100%);
		background-image: linear-gradient(to bottom, #07c190 0%, #06af73 100%);
}
.checkout-area .submit_chevron {display: inline; margin-left: 5px; background-color: red;}


/* Contact Form*/
#quote-modal{font-size: 14px; font-family: Arial,​sans-serif;}
#quote-modal h2 { color: #df6039; font-family: 'Oswald',impact; text-transform: uppercase; font-size: 26pt; margin: 24px 0 10px; text-align: center; text-shadow: none; font-weight: normal; }
#quote-modal p { margin: 20px; }

#quote-modal .loading { color: #DF6039; font-family: 'Oswald',impact; font-size: 16pt; font-weight: normal; margin: 0 0 10px; text-align: center; text-shadow: none;}
#quote-modal a.get-quote { display: block; background: #00A7CB; color: #FFF; font-family: 'Oswald',impact, sans-serif; text-transform: uppercase; font-size: 24px; padding: 10px; width: 125px; margin: 20px auto 0; border-radius: 6px; cursor: pointer; text-decoration: none; font-weight: normal;}

#quote-modal .product-select { margin-bottom: 20px; }
#quote-modal .product-select p { font-size: 12pt; font-weight: bold; margin: 0 0 10px 20px; }
#quote-modal .product-select .area { margin: 0 0 10px 15px; font-size: 11pt; }

#quote-modal .checkout-details { background: #91c83e; border-radius: 6px; margin: 0 0 20px 0; padding: 15px 0; color: #20292f; } 
#quote-modal .checkout-details p { margin-bottom: 10px; font-weight: bold; font-size: 12pt; margin-top: 0; }
#quote-modal .checkout-details ol { border-bottom: 1px solid #86b73a; margin: 0; padding-bottom: 15px; }
#quote-modal .checkout-details ol li { margin: 0 0 8px 0; font-size: 11pt; }
#quote-modal .checkout-details ol li a { float: right; height: 17px; width: 17px; background: transparent url("https://media1.shmoop.com/images/sprites/product-modal-sprite.png") no-repeat; text-indent: -9999px; overflow: hidden; cursor: pointer; margin-right: 15px; }

.modal .user-details .field { position: relative; margin: 0 0 15px 0; font-size: 11pt; }
.modal .user-details .field label { position: absolute; left: 10px; top: 9px; font-family: "Lucida Sans Unicode","Lucida Grande",Helvetica,Arial,Verdana,sans-serif; }
.modal .user-details .field label.error { left: 288px; }
.modal .user-details .field input { width: 453px; background: #EEE; border-radius: 6px; box-shadow: -2px -2px 0 #AAA; padding: 10px 10px 10px 100px; border: none; font-size: 11pt; color: #666;}

.modal .user-details .field input#phone,
.modal .user-details .field input#email { padding-left: 65px; width: 488px; }
.modal .user-details .field input#school { padding-left: 135px; width: 418px; }
.modal .user-details .field input#title { padding-left: 92px; width: 462px; }
.modal .user-details .field input#city { padding-left: 55px; width: 499px; }
.modal .user-details .field input#state { padding-left: 130px; width: 424px; }

#quote-modal .checkout-details .license-details { padding: 10px 15px 0; border-top: 1px solid #b4d288; }
#quote-modal .checkout-details .license-details .license-size { float: left; width: 230px; }
#quote-modal .checkout-details .license-details .license-length { float: right; width: 275px; }

#quote-modal .checkout-details .license-details .license-size .edit-students { margin: 10px 0 0 0; display: none; }
#quote-modal .checkout-details .license-details .license-size .edit-students a { cursor: pointer; background: #00A7CB; color: #fff; padding: 5px; border-radius: 8px; }

#quote-modal .checkout-details .license-details .license-size a.edit { padding: 0 0 0 33px; background: transparent url("https://media1.shmoop.com/images/sprites/product-modal-sprite.png") 10px -61px no-repeat; text-decoration: underline; color: #20292f; cursor: pointer; }

/*
adapting to bootstrap */
#quote-modal label{display: inline;}
#quote-modal input[type="checkbox"]{vertical-align: top;}
#quote-modal .field input{margin-bottom: 0;}
#quote-modal .area label{padding-left: 4px; margin: 0;}
#quote-modal .area input[type="checkbox"]{margin: 5px 3px 3px 4px;}
#quote-modal .loading{display: none;}

#quote-modal .closebox {
    background: url("https://media1.shmoop.com/images/sprites/static_sprites.png") repeat scroll 0 -210px rgba(0, 0, 0, 0);
    cursor: pointer;
    height: 16px !important;
    position: absolute;
    right: 13px;
    top: 10px;
    width: 15px;
    z-index: 2;
}


/* Student user Popup*/
#teachers-only-modal {overflow: hidden;}`
#teachers-only-modal .modal-dialog{ width: 370px; transform: translate(0, 50%) !important; -ms-transform: translate(0, 50%) !important; /* IE 9 */ -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */ }
#teachers-only-modal .modal-body {background-color: #fff; padding: 20px; margin: auto; text-align: center; color: #20292f; font-family: 'Roboto'; border-radius: 3px;}
#teachers-only-modal .modal-body .content {color: #20292F;}
#teachers-only-modal .modal-body .content h2 {color: #20292F; font-size: 2.2em;}
#teachers-only-modal .modal-body .content p {color: #20292F; font-size: 1em;}
#teachers-only-modal .modal-body .content .exit-to-student {width: 140px; height: 30px; color: #000; background-color: #f36523; font-size: 2.0em; font-weight: bold; text-decoration: none; margin: 15px auto; padding: 15px; cursor: pointer;}
#teachers-only-modal .modal-body .content .exit-to-student:hover {color: #333;}