



/* ---------- FLOATING SOCIAL ICONS ---------- */



#social_side_links {

      position: fixed;

      bottom: 1px;

      left: 0;

      padding: 0;

      list-style: none;

      z-index: 5000;

      padding: 5px;

      

    

}



#social_side_links li {

    margin: 3px;

}



.social-circles {

    background-color: #000;

    width: 30px;

    height: 30px;

    float: left;

    margin: 2px;

    padding-left: 5px;

    border-radius: 15px;

    text-align: center;

}



.social-circles i {

    font-size: 20px;

    color: #fff;

    margin-top: 5px;

    margin-left: -5px;

    

}



.social-circles:hover {

    background-color: #fff;

    width: 30px;

    height: 30px;

    float: left;

    margin-right: 2px;

    padding-left: 5px;

    border-radius: 15px;

    transition: 0.5s all;

}



.social-circles i:hover {

    font-size: 20px;

    color: #000;

    transition: 0.5s all;

}



/*

@media screen and (max-width: 1200px) {

    .social-circles {

        width: 46px;

        height: 46px;

        border-radius: 23px;

        padding-left: 10px;

        padding-top: 5px;

    }

    

    .social-circles:hover {

        width: 46px;

        height: 46px;

        border-radius: 23px;

        padding-left: 10px;

    }

    

    .typcn {

        font-size: 26px;

        color: #fff;

}

    .typcn:hover {

        font-size: 26px;

    }

    

}

*/





/* ---------- HOME PAGE HEADER SECTION STYLES ---------- */



.hp-header-section {

    background: url('../images/promos/promo-malawi-coffee-bg.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    width: 100%;

    height: 100%;

    display: inline-table;

}


/**.main-logo {
    text-align: center;
    margin-top: 5%;
    padding: 10px 0px;
    background-color: rgba(0, 0, 0, 0.5);
}

@media screen (min-width: 320px) and (max-width: 500px) {
.main-logo {
    text-align: center;
    padding: 5px 0px;
    background-color: rgba(0, 0, 0, 0.5);
}	
}

.main-logo img {
    max-width: 160px;
    width: 100%;
    margin: auto;
}
@media screen (min-width: 320px) and (max-width: 500px) {
.main-logo img {
    max-height: 80px !important;
    width: auto;
    margin: auto;
}
}*/


 .img-respon {
  max-width: 160px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
@media screen (min-width: 320px) and (max-width: 500px) {
 .img-respon {
  max-width: 76px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important; 
}
}





.header-pattern img {

    float: right;

    margin-top: -4px;

}







/* ---------- HOME PAGE MENU SECTION STYLES ---------- */



.hp-menu-section {

    width: 100%;

    background: url('../img/hp-menu-bg-2.jpg') no-repeat;

    background-size: cover;

    text-align: center;

    height: 700px;

}



.hp-menu-row {

    max-height: 982px;

    padding: 0px

}



.menu-copy-section {

    background-color: rgba(231, 239, 239, 0.8);  

    height: 100%;

}



.menu-copy-block {

    margin-top: 15px;
	padding-bottom: 10px;
}

@media screen (min-width: 320px) and (max-width: 500px)  {
.menu-copy-block {
    margin-top: 5px;
	padding-bottom: 5px;
}
}

.hp-menu-section h4 {
    font-family:'css/FuturaStd-Book', sans-serif;
    font-size: 18px;
}

@media screen (min-width: 320px) and (max-width: 500px)  {
.hp-menu-section h4 {
    font-family:'css/FuturaStd-Book', sans-serif;
    font-size: 10px;
}
}

.hp-menu-section h1 {
    font-family:'FuturaStd-Heavy';
    font-size: 22px;
    margin-top: 0px;
	padding-bottom: 10px;
	color:#a8cf45;
}

@media screen (min-width: 320px) and (max-width: 500px)  {
.hp-menu-section h1 { 
    font-family:'FuturaStd-Heavy';
    font-size: 12px;
    margin-top: 0px;
	padding-bottom: 5px;
	color:#d9ad40;
}
}

.hp-menu-section p {
    font-family:'FuturaStd-Medium', sans-serif;
    font-size: 14px;
    margin-top: 8px;
    font-style: normal;
	color: #a8cf45;
}

@media screen (min-width: 320px) and (max-width: 500px)  {
.hp-menu-section p {
    font-family:'FuturaStd-Medium', sans-serif;
    font-size: 10px;
    margin-top: 6px;	
    font-style: normal;
	color: #a8cf45;
}	
}


.hp-menu-section .button {
    padding: 10px 12px;
    margin: 15px auto;
    width: 50%;
    border: 1px solid #a8cf45;
    transition: 0.5s all;
    font-family:'css/FuturaStd-Book', sans-serif;
    color: #a8cf45;
}
@media screen (min-width: 320px) and (max-width: 500px)  {
.hp-menu-section .button {
    padding: 5px 5px;
    margin: 5px auto;
    width: 100% !important;
    border: 1px solid #a8cf45;
    transition: 0.5s all;
    font-family:'css/FuturaStd-Book', sans-serif;
	font-size: 10px !important;
    color: #a8cf45;
}
}


.hp-menu-section a {
    text-decoration: none;
	font-size: 14px;
	font-family: 'FuturaStd-Medium', sans-serif;
}

@media screen (min-width: 320px) and (max-width: 500px)  {
.hp-menu-section a {
    text-decoration: none;
	font-size: 10px !important;
	font-family: 'FuturaStd-Medium', sans-serif;
}
}

.hp-menu-section .button:hover {
    padding: 10px 18px;
    text-decoration: none;
    width: 60%;
    border: 1px solid #a8cf45;
    background-color: #a8cf45;
    color: #fff;
    transition: 0.4s all;

}

@media screen (min-width: 320px) and (max-width: 500px)  {
.hp-menu-section .button:hover {
	padding: 5px 5px;
    text-decoration: none;
  	width: 100% !important;
    border: 1px solid #9dc2c1;
    background-color: #9dc2c1;
    color: #fff;
	font-size: 10px;
    transition: 0.4s all;	
}
}

/* ---------- HOME PAGE CUPCAKE SECTION STYLES ---------- */



.hp-cupcakes-section {

    width: 100%;

    background: url('../img/hp-cupcake-bg-2.jpg') no-repeat;

    background-size: cover;

    text-align: center;

    height: 700px;

}



.hp-cupcakes-section a {

    color: #fff;

    text-decoration: none;

}



.hp-cupcakes-section h4 {

    color: #fff;

    font-family:'css/FuturaStd-Book', sans-serif;

    font-size: 20px;

}



.hp-cupcakes-section h1 {

    color: #fff;

    font-family:'FuturaStd-Heavy', sans-serif;

    font-size: 42px;

    margin-top: 0px

}



.hp-cupcakes-section p {

    color: #fff;

    font-family:'FuturaStd-Medium', sans-serif;

    font-style: italic;

    font-size: 16px;

    margin-top: 15px;

/*    line-height: 1.5;*/

}



.hp-cupcakes-section h6 {

    color: #fff;

    font-family:'css/FuturaStd-Book', sans-serif;

    font-size: 12px;

}



.hp-cupcakes-section .button {

    padding: 10px 18px;

    margin: 25px auto;

    width: 40%;

    border: 1px solid #fff;

    transition: 0.5s all;

    font-family:'css/FuturaStd-Book', sans-serif;

}



.hp-cupcakes-section .button:hover {

    padding: 10px 18px;

    margin: 25px auto;

    width: 48%;

    border: 1px solid #fff;

    background-color: #fff;

    color: #3b2e22;

    transition: 0.4s all;

}



.hp-cupcakes-row {

    padding: 0px;

}



.hp-cupcakes-row img {

    margin: auto;

}



.cupcakes-copy-section {

    background-color: rgba(70, 75, 78, 0.8);

    height: 700px;

}



.cupcakes-copy-block {

    margin-top: 150px;

}



/* ---------- HOME PAGE MAP SECTION STYLES ---------- */



.hp-map-section {

    width: 100%;

    background: url('../img/hp-map-bg.jpg') no-repeat;

    background-size: cover;

    text-align: center;

/*    padding-top: 8%;*/

    color: #fff;

    height: 810px;

}



@media (max-width: 767px){

    .hp-map-section {

        padding-top: 0px;

        margin-top: -80px;

    }

}





.hp-map-row {

    max-width: 990px;

    margin: auto;

    margin-top: 60px;

}



.map-box {

    padding-right: 40px;

}



@media (max-width: 768px) {

    .map-form {

/*        background-color: rgba(0, 0, 0, 0.6);*/

    }

}





.map-box img {

    width: 100%;

}



.hp-map-section h4 {

    font-family:'css/FuturaStd-Book', sans-serif;

    font-size: 18px;

    margin-bottom: 1px;

}



.hp-map-section h1 {

    font-family:'FuturaStd-Heavy', sans-serif;

    font-size: 36px;

    margin: 0px;

}



.custom-checkbox {

    margin: 15px auto;

}



.hp-map-scroll {

    margin: 3%;

}



.find-input {

    width: 50%;

    margin: auto;

}



.find-restaurant {

    background-color: #000;

    color: #fff;

    

}



.find-restaurant:focus {

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(70, 16, 19, 0.6);

    border: 1px solid #878787;

}



.enter-location:focus {

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(70, 16, 19, 0.6);

    border: 1px solid #878787;

}





.hp-map-section h5 {

    font-family:'css/FuturaStd-Book', sans-serif;

    font-size: 16px;

    margin-top: 10px;

}



.hp-map-section a {

    color: #000;

    text-decoration: none;

}



.hp-map-section .button {

    padding: 10px 18px;

    margin: 25px auto;

    width: 40%;

    border: 1px solid #fff;

    transition: 0.5s all;

    font-family:'css/FuturaStd-Book', sans-serif;

}



.hp-map-section .button:hover {

    padding: 10px 18px;

    margin: 25px auto;

    width: 48%;

    border: 1px solid #fff;

    background-color: #fff;

    color: #3b2e22;

    transition: 0.4s all;

}



.hp-map-section p {

    color: #000;

    font-family:'FuturaStd-Medium', sans-serif;

    font-style: italic;

    font-size: 16px;

    margin-top: 15px;

/*    line-height: 1.5;*/

}

#home .stores-map-row p {color:#fff;}



.hp-map-section img {

    margin: auto;

}



.enter-location {

    border-radius: 0px;

}



.type-input >.input-group-addon {

    background-color: #000;

    border-radius: 0px;

}



@media screen and (max-width: 767px){

    .type-input {

        width: 60%;

        margin: auto;

        margin-bottom: 10px;   

    }

    

    .select-input-item {

        width: 60%;

        margin: auto;

    }

    

}



.select-input select:focus {

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(70, 16, 19, 0.6);

    border: 1px solid #878787;

    

}



.form-control {

    border-radius: 0;

    -webkit-appearance: none;

}





.map-form .button {

    padding: 10px 18px;

    margin: 20px auto;

    width: 40%;

    border: 1px solid #fff;

    transition: 0.5s all;

    font-family:'css/FuturaStd-Book', sans-serif;

    color: #fff;

    background: rgba(0,0,0,0.5);

}



.map-form .button:hover {

    padding: 10px 18px;

    

    width: 48%;

    border: 1px solid #042b20;

    background-color: #042b20;

    color: #fff;

    transition: 0.4s all;

}







.results {

    text-align: left;

    background-color: #fff;

    color: #000;

    font-family:'css/FuturaStd-Book', sans-serif;

    height: 122px;

    overflow: auto;

    padding:10px;

}



.results h6 {

    margin-bottom: 1px;

    font-family:'FuturaStd-Heavy', sans-serif;

}



.results p {

    font-size: 10px;

    line-height: 1.2;

}







/* =============== FOOTER STYLES =============== */



.footer {

    background-color: #fff;

    padding-top: 15px;

}



.footer img {

    width: 80%;

    margin: 60px auto;

    max-width: 250px;

}





@media screen and (max-width: 992px){

    .footer img {

        margin: 20px auto;

    }   

    

}





.footer-bar {
	
    padding-top: 10px;
    background-color: #38c4e7;
    position: absolute;
    width: 100%;
	font-family:'css/FuturaStd-Book', sans-serif;

}



.copyright {

    color: #fff;
	font-family:'css/FuturaStd-Book', sans-serif;

}



.powered {

    color: #fff;

    text-align: right;
	font-family:'css/FuturaStd-Book', sans-serif;

}



.powered a {

    color: #fff;
	font-family:'css/FuturaStd-Book', sans-serif;

}











/* ========== CUSTOM CHECKBOXES ========== */





/* CSS used here will be applied after bootstrap.css */	/* custom checkboxes */

	.custom-checkbox > [type="checkbox"],

	.custom-checkbox > label{

		margin-bottom:0px !important;

		-webkit-touch-callout: none;

		-webkit-user-select: none;

		-khtml-user-select: none;

		-moz-user-select: none;

		-ms-user-select: none;

		user-select: none;

	}

	.custom-checkbox > [type="checkbox"]:not(:checked),

	.custom-checkbox > [type="checkbox"]:checked {

		position: absolute;

		left: -9999px;

	}

	.custom-checkbox > [type="checkbox"]:not(:checked) + label,

	.custom-checkbox > [type="checkbox"]:checked + label {

		position: relative;

		padding-left: 22px;

        padding-right: 22px;

		cursor: pointer;

	}

	.custom-checkbox > [type="checkbox"]:not(:checked) + label:before,

	.custom-checkbox > [type="checkbox"]:checked + label:before {

		content: '';

		position: absolute;

		left:0; 

		top: 50%;

		margin-top:-9px;

		width: 17px; 

		height: 17px;

		border: 1px solid #ddd;

		background: #ffffff;

		border-radius: 2px;

	}

	.custom-checkbox > [type="checkbox"]:not(:checked) + label:after,

	.custom-checkbox > [type="checkbox"]:checked + label:after {

		font: normal normal normal 12px/1 'Glyphicons Halflings';

		content: '\e013';

		position: absolute;

		top: 50%;

		margin-top:-7px;

		left: 2px;

		color: #461013;

		xtransition: all .2s;

	}

	

	.custom-checkbox > [type="checkbox"]:not(:checked) + label:after {

		opacity: 0;

		transform: scale(0);

	}

	.custom-checkbox > [type="checkbox"]:checked + label:after {

		opacity: 1;

		transform: scale(1);

	}

	

	.custom-checkbox > [type="checkbox"][data-indeterminate] + label:after,

	.custom-checkbox > [type="checkbox"][data-indeterminate] + label:after {

		content: '\2212';

		left: 2px;

		opacity: 1;

		transform: scale(1);

	}

	

	.custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before,

	.custom-checkbox > [type="checkbox"]:disabled:checked + label:before {

	  	box-shadow: none;

	  	background-color: #eeeeee;

		border-color: #eeeeee;

		cursor: not-allowed;

		opacity: 1;

		color: #dadada;

	}

	.custom-checkbox > [type="checkbox"]:disabled:checked + label:after {

	  color: #dadada; cursor: not-allowed;

	}

	.custom-checkbox > [type="checkbox"]:disabled + label {

	  color: #aaa; cursor: not-allowed;

	}

	.custom-checkbox > [type="checkbox"]:checked:focus + label:before,

	.custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before {

		border: 1px solid #461013;

        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(70, 16, 19, 0.6);

	}

	.custom-checkbox > label:hover:before {

  		border: 1px solid #461013 !important;

	}

	.custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before,

	.custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before{

		border: 1px solid #E4E4E4 !important;

	}









/* ==================== ABOUT PAGE STYLES ==================== */



.about-section {

    width: 100%;

    background: url('../img/about-bg.jpg') no-repeat;

    background-size: cover;

    text-align: center;

    padding-top: 3%;

    color: #fff;

    height: 390px;

    

/*    background-position: -50px 0px;*/

}





.about-row {

   max-width: 1060px;

    margin: auto;

    margin: 90px auto;

}



.about-header {

    margin: 10px 0px;

   

}



.about-row-copy {

    max-width: 650px;

    margin: auto;

}



.about-copy {

    font-family:'css/FuturaStd-Book';

    font-size: 12px;

    padding: 35px 15px;

    text-align: center;

    margin: auto;



    

}







/*

.about-copy h1{

    text-transform: uppercase;

    font-size: 28px;

    color: #000;

    font-family:'FuturaStd-Heavy';

}

*/



.about-copy p {



    padding: 20px 0px;

    text-align: left;

}



.about-copy h5 {

    width: 80%;

    text-align: center;

    margin: auto;

    max-width: 500px;

}



.about-copy img {

    margin: auto;

}



.about-bottom {

    background: url('../img/about-bottom-bg.jpg') no-repeat;

    background-size: cover;

    height: 400px;

}





/* ==================== PROMO PAGE STYLES ==================== */

#promo_section ul li {list-style-type: none;margin-bottom: 10px;}

#promo_section ul {

    list-style-type: none;

    -webkit-margin-before: 0;

    -webkit-margin-after: 0;

    -webkit-margin-start: 0px;

    -webkit-margin-end: 0px;

    -webkit-padding-start: 0;    

}

#promo_section ul li img {max-width: 100%;height: auto;}

#promo_section span {clear: both;display: block;}









/* ======================================================================================================= */



/* ==================== STORES PAGE STYLES ==================== */



.stores-map-row {

    max-width: 990px;

    margin: auto;

    margin-top: 225px;

}





/* ======================================================================================================= */



/* =============================== INITIATIVES PAGES ================================ */









/* ==================== FAIRTRADE PAGE STYLES ==================== */



.fairtrade-section {

    width: 100%;

    background: url('../img/fairtrade-bg.jpg') no-repeat;

    background-size: cover;

    text-align: center;

    padding-top: 3%;

    color: #fff;

}



.fairtrade-row-copy {

    padding: 40px 0px;

    max-width: 650px;

    margin: auto;

}



.fairtrade-row {

   max-width: 1060px;

    margin: auto;

    margin: 165px auto;

}



.fairtrade-img {

    padding: 20px 0px;

   text-align: center;

}



.fairtrade-copy p {

    padding: 20px 0px;

    text-align: left;

}



.fairtrade-copy h5 {

    width: 80%;

    text-align: center;

    margin: auto;

    max-width: 500px;

}



.fairtrade-copy li {

        font-size: 13px;

    font-family: 'FuturaStd-Book';

}



.fairtrade-divider {

    text-align: center

}



.fairtrade-divider img {

    margin: 30px auto;

}



.fairtrade-bottom {

    background: url('../img/fairtrade-bottom-bg.jpg') no-repeat;

    background-size: cover;

    height: 400px;

}



.fairtrade-header {

    display: block;

}





/* ======================================================================================================= */



/* ==================== VARSITY SPORTS PAGE STYLES ==================== */



.vs-section {

    width: 100%;

    background: url('../img/vs-bg.jpg') no-repeat;

    background-size: cover;

    text-align: center;

    padding-top: 3%;

    color: #fff;

}



.vs-bottom {

    background: url('../img/vs-bottom-bg.jpg') no-repeat;

    background-size: cover;

    height: 230px;

}







/* ======================================================================================================= */



/* ==================== CUPCAKE PAGE STYLES ==================== */



.pdf_download_section a:hover {text-decoration:none}



.cupcake-section {

    width: 100%;

    background: url('../img/cupcakes-bg.jpg') no-repeat;

    background-size: cover;

    text-align: center;

    padding-top: 3%;

    color: #fff;

}



.cupcake-row {

    max-width: 800px;

    margin: auto;

    margin-top: 90px;

    height: 250px;

}



.cupcake-box {

    padding-top: 15px;

/*    background-color: rgba(75, 23, 21, 0.6);*/

}



.cupcake-box img {

    margin: auto;

}



.cupcakes-logo {

    text-align: center;

}



.cupcakes-logo img {

    margin: auto;

    

}



.cupcake-section h1 {

    font-family:'FuturaStd-Heavy', sans-serif;

    font-size: 50px;

    margin-top: 0px;

    text-shadow: 1px 1px 8px #000;

}



.cupcake-section h4 {

    font-family:'css/FuturaStd-Book', sans-serif;

    font-size: 25px;

    text-shadow: 1px 1px 8px #000;

}



.cupcake-counter {

    margin-bottom: -95px;

}



.counter {

    margin: auto;

    text-align: center;

}



.counter-heading {

    text-align: center;

}



.counter-heading img {

    margin: 95px auto 0px;

}



.counter h1 {

    float: left;

    margin-left: 10px;

    font-size: 72px;

}





.clock-builder-output {

    margin-left: 85px !important;

}







.cupcake-section p {

    font-family:'LobsterTwo-BoldItalic', sans-serif;

    font-size: 16px;

    margin-top: 15px;

    line-height: 1.5;

}



.cupcake-section h6 {

    font-family:'css/FuturaStd-Book', sans-serif;

    font-size: 12px;

}



.cupcake-section .button {

    padding: 10px 18px;

    margin: 25px auto;

    width: 40%;

    border: 1px solid #fff;

    transition: 0.5s all;

    font-family:'css/FuturaStd-Book', sans-serif;

}



.cupcake-section .button:hover {

    padding: 10px 18px;

    margin: 25px auto;

    width: 48%;

    border: 1px solid #fff;

    background-color: #fff;

    color: #3b2e22;

    transition: 0.4s all;

}



.leaflet {

    text-align: center;

}



.cupcake-scroll {

    margin: 150px;

}







.cupcake-section a {

    text-decoration: none;

    color: #e2e2e2;

}



.cupcake-section a:hover {

    color: #bcbcbc;

}



#cupcakes-heading-1 {

    display: block;

}



.counter-block {

    text-align: center;

    margin-top: 30px;

    

}



.counter-block img {

    margin: auto;

}



.counter-row {

    max-width: 820px;

    margin: auto;

}



.cupcakes-copy {

    font-family:'css/FuturaStd-Book', sans-serif;

    font-size: 14px;

    padding-top: 40px;

/*    padding-left: 60px;*/

    padding-bottom: 46px;

}



.cupcakes-copy img {

    margin: auto;

}



.cupcakes-copy button {

    padding: 15px;

    color: #fff;

    background: #000;

    border: 1px solid #000;

    font-size: 16px;

    transition: 0.6s all;

    margin-top: 20px;

    margin-bottom: 30px;

    

}



.cupcakes-copy button:hover {

    padding: 15px 25px;

    color: #000;

    background: #f4eeeb;

    border: 1px solid #000;

    font-size: 16px;

    transition: 0.6s all;

}



@media (min-width: 511px) {

    .counter-img {

        display: none;

    }

}



@media screen and (max-width: 767px) {

    .cupcakes-copy {

        padding-top: 10px;

        padding-bottom: 25px;

    }

    

    .counter {

        margin: auto;

        width: 82%;

        text-align: center;

    }

    

}



@media screen and (max-width: 637px) {

    .counter {

        width: 100%;

    }

}



@media screen and (max-width: 510px) {

    .counter {

       display: none;

    }

    

    .counter-img {

        display: block;

    }

    

    .counter-block {

        height: 0px;    

    }

}







.cupcakes-divider-lg {

    text-align: center;

}



.cupcakes-divider-lg img {

    margin: auto;

}



.cupcakes-events {

    text-align: center;

    padding: 25px 0px;

}



.cupcakes-month-block h5 {

    color: #fff;

    background-color: #000;

    width: 100%;

    text-align: center;

    padding: 10px 2px;

    font-family:'css/FuturaStd-Book', sans-serif;

}



.cupcakes-month-block p {

    padding: 10px;

 

}



.cupcakes-events-row {

    max-width: 820px;

    margin: auto;



}



.cupcakes-help h4 {

    text-transform: uppercase;

    text-align: center;

    color: #fff;

    font-family:'css/FuturaStd-Book', sans-serif; 

    padding: 30px 0px;

}



.cupcakes-help {

    background-color: #000;

    margin-top: 50px;

}



.cupcakes-help-info {

    background: url('../img/cupcakes-help-bg.jpg') no-repeat;

    background-size: cover;

    font-family:'css/FuturaStd-Book', sans-serif; 

    color: #fff;

   padding: 25px;

    text-align: center;

}



.cupcakes-help-info a {

    text-decoration: underline;

    color: #fff;

}



.cupcakes-help-info a:hover {

    color: #fac600;

    transition: 0.6s all;

}





/* ======================================================================================================= */



/* ==================== OTM PAGE STYLES ==================== */



.OTM-section {

    width: 100%;

    background: url('../img/OTM-bg.jpg') no-repeat;

    background-size: cover;

    text-align: center;

    padding-top: 3%;

    color: #000;

    height: 418px;

    

/*    background-position: -50px 0px;*/

}



.OTM-body {

   background: #f4eeeb; 

}



.OTM-body p {

    text-align: center;

    font-size: 14px;

}



.OTM-body button {

    padding: 15px;

    color: #fff;

    background: #000;

    border: 1px solid #000;

    font-size: 16px;

    transition: 0.6s all;

}



.OTM-body button:hover {

    padding: 15px 25px;

    color: #000;

    background: #f4eeeb;

    border: 1px solid #000;

    font-size: 16px;

    transition: 0.6s all;

}



.OTM-bottom {

    background: url('../img/OTM-bottom-bg.jpg') no-repeat;

    background-size: cover;

    height: 400px;

}



@media (max-width: 504px){

   .OTM-body .glyphicon-star {

        display: none;

    }

}





/* ======================================================================================================= */



/* ==================== FRANCHISE PAGE STYLES ==================== */



.franchise-section {

    width: 100%;

    background: url('../img/franchise-bg.jpg') no-repeat;

    margin-top: -40px;

    background-size: cover;

    text-align: center;

    padding-top: 3%;

    color: #fff;

/*    background-position: -50px 0px;*/

}



@media screen and (max-width: 767px) {

    .franchise-section {

        background-position: -170px 0px;

    }

    

}



.franchise-copy {

    font-family:'css/FuturaStd-Book';

    font-size: 14px;

    padding-top: 35px;

    text-align: left;

    

}



.franchise-content {

    max-width: 880px;

    margin: auto;

}



.franchise-button {

    text-align: center;

}



.franchise-button button {

    padding: 15px;

    color: #fff;

    background: #000;

    border: 1px solid #000;

    font-size: 16px;

    transition: 0.6s all;

    margin-top: 20px;

    margin-bottom: 30px;

}



.franchise-button button:hover {

    padding: 15px 25px;

    color: #000;

    background: #f4eeeb;

    border: 1px solid #000;

    font-size: 16px;

    transition: 0.6s all;

}



.franchise-contact {

    

    margin: 25px 0px;

    font-size: 11px;

}



@media screen and (min-width: 768px){

    

    .franchise-copy p {

/*    float: right;*/

    max-width: 400px;

    margin: auto;

    margin-top: 10px;

    }

}





.franchise-disclaimer {

    background-color: #000;

    

}





.disclaimer-row {

    padding: 35px 0px;

}



.franchise-disclaimer h5 {

    width: 80%;

    text-align: center;

    margin: auto;

    color: #fff;

    max-width: 500px;

}



.franchise-disclaimer p {

    padding-top: 20px;

    color: #fff;

    text-align: center;

    max-width: 700px;

    margin: auto;

}



.franchise-row {

   max-width: 1060px;

    margin: auto;

    margin: 90px auto;

}



.franchise-header {

    margin: 130px 0px;

    float: right;

   

}



@media screen and (max-width: 1040px) {

    .franchise-header {

        background-color: rgba(0, 0, 0, 0.6);

        padding: 50px 0px;

        margin: 80px 0px;

    }

}



.franchise-info {

    text-align: center;

    max-width: 450px;

    margin: 0px auto;

}



.franchise-info h1{

    margin-top: 40px;

    text-transform: uppercase;

    font-size: 28px;

    color: #000;

    font-family:'FuturaStd-Heavy';

}



@media (max-width: 420px){

   .franchise-copy .glyphicon-star {

        display: none;

    }

}





/* ======================================================================================================= */



/* ==================== CONTACT PAGE STYLES ==================== */



.contact-form-section {

    background: url('../img/contact-bg.jpg') no-repeat;

    background-size: cover;

    min-height: 810px;

    color: #fff;

    font-family:'FuturaStd-Heavy', sans-serif;

    

}



.contact-form {

    padding-top: 135px;

    margin: auto;

    text-align: center;

}



#contact-form {

    display: block;

}



.set-height {

    height: 695px;

}



.contact-form h1 {

    margin: auto;

    text-align: center;

    font-size: 45px;

}



.contact-form p {

    font-family:'FuturaStd-Medium';

    font-size: 12px;

    margin: auto;

    margin-top: 10px;

    width: 70%;

}



.contact-inputs {

    margin: 15px auto;

    width: 80%;

    

}



.contact-inputs input {

    border: none;

    padding: 5px;    

    -webkit-appearance: none;
    color: #fff;
}



.contact-inputs textarea {

    border: none;

    padding: 5px;    

    -webkit-appearance: none;

}



.contact-input-name {

    background-color: rgba(0, 0, 0, 0.5);

    margin-bottom: 5px;

}



.contact-input-name:focus {

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(70, 16, 19, 0.6);

}



.contact-input-email {

    background-color: rgba(0, 0, 0, 0.5);

}



.contact-input-email:focus {

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(70, 16, 19, 0.6);

}



.contact-input-message {

    height: 140px;

    padding-top: 0px;

    overflow: auto;

    background-color: rgba(0, 0, 0, 0.5);

    width: 100%;

    color: #fff;

    margin-top: -10px;

}



.contact-input-message:focus {

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(70, 16, 19, 0.6);

}



.contact-form .button-reset {

    padding: 5px 5px;

    margin: 9px auto;

    width: 50px;

    border: 1px solid #fff;

    transition: 0.8s all;

    font-family:'css/FuturaStd-Book', sans-serif;

    float: right;

}



.contact-form .button-reset:hover {

        padding: 5px 5px;

    

    width: 55px;

    border: 1px solid #fff;

    background-color: #fff;

    color: #3b2e22;

    transition: 0.4s all;
    cursor: pointer;
}



.contact-form .button-submit {

    padding: 10px 18px;

    margin: 5px auto;

    width: 90%;

    border: 1px solid #fff;

    transition: 0.5s all;

    font-family:'css/FuturaStd-Book', sans-serif;

    

}



.contact-form .button-submit:hover {

    padding: 10px 18px;

    width: 100%;

    border: 1px solid #fff;

    background-color: #fff;

    color: #3b2e22;

    transition: 0.4s all;
    cursor: pointer;
}



.address-box-info {

    padding-top: 16px;

}



.address-box h6 {

    font-size: 14px;

}



.address-box p {

    font-family:'FuturaStd-Medium';

    font-size: 12px;

}



.form-submitted {

    margin-top: 205px;

    text-align: center;

    font-family:'FuturaStd-Medium';

   

}



#form-submitted {

    display: none;

}



.form-submitted h1 {

    font-size: 80px;

}



.form-submitted h3 {

    margin-top: -18px;

    font-size: 28px;

}



.form-submitted h2 {

    margin-top: -8px;

    font-size: 37px;

}



.form-submitted p {

   margin-top: 11px;

    font-size: 18px;

}





/* ======================================================================================================= */



/* ==================== LEGAL PAGE STYLES ==================== */



.legal-section {

    width: 100%;

    background: url('../img/legal-bg.jpg') no-repeat;

    margin-top: -40px;

    background-size: cover;

    text-align: center;

    padding-top: 3%;

    color: #fff;

/*    background-position: -50px 0px;*/

    

}



.legal-row {

   max-width: 1060px;

    margin: auto;



}



.legal-header {

    margin: 130px 0px;

    float: right;

   

}



.legal-content {

    max-width: 880px;

    margin: auto;

}



.legal-spacer {

    height: 100px;

}



.legal-info {

    text-align: center;

    max-width: 450px;

    margin: 0px auto;

}



.legal-info h1{

    margin-top: 40px;

    text-transform: uppercase;

    font-size: 28px;

    color: #000;

    font-family:'FuturaStd-Heavy';

}



.legal-copy {

    font-family:'css/FuturaStd-Book';

    font-size: 14px;

    padding: 35px 25px;

    text-align: left;

    

}



.panel-default > .panel-heading {

    color: #fff;

    background-color: #000;

    border-radius: 0px;

}



.panel-group .panel {

    border-radius: 0px;

}



/* ======================================================================================================= */



/* ==================== ALL PAGES - STYLES ==================== */







#heading {

	width: 100%;

	position: fixed;

	top: 0;

	z-index: 1;

}



#images {

	position: fixed;

	top: 0;

	width: 100%;

	z-index: 2;

}



#images img {

	padding-top: 50px;

}



#img-moon {

	position: absolute;

	top: 1500px;

	left: 50%;

}



#img-rocket {

	position: absolute;

	top: 3000px;

	left: 50%;

}



#img-saturn {

	position: absolute;

	top: 4500px;

	left: 50%;

} 





#content {

	color: #fff;

	position: relative;

	margin: 0 auto;

	width: 100%;

	z-index: 10;

}



#content article {



	width: 100%;

}



#content article h2 {

	color: #b2c1cd;

	font-size: 34px;

	margin-bottom: 0;

}



#menu {

    background: url('../img/hp-menu-bg-2.jpg') no-repeat;

    z-index: 4;

}



#cupcakes {

    z-index: 3;

}





#earth {

	width: 100%;

	position: relative;

	text-align: center;

	z-index: 900;

}



.hp-menu-copy {

    position: relative;

    top: 50px;

   

}



.hp-menu-copy img {

    margin: auto;

}



.hp-cupcake-row {

    position: relative;

    top: 150px;

    height: 250px;

}



#menu-anchor {

    height: 50px;

    width: 100%;

    top: 850px;

    position: absolute;

    

}



#cupcake-anchor {

    height: 50px;

    width: 100%;

    top: 1730px;

    position: absolute;

    z-index: 500;

}



#map-anchor {

    height: 50px;

    width: 100%;

    top: 10px;

    position: absolute;

    z-index: 500;

    

}



.carousel-control.right, .carousel-control.left {background-image:none}

.carousel-control.right {right:45px}



/* ======================================================================================================= */



/* ==================== PROMOS PAGE STYLES ==================== */





.promos-section {

    background: url(../images/promos/promos-header.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    padding: 50px;

}





.promo-01 {

    background: url(../images/promos/promo-brazil-coffee-bg.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    

}



.promo-coffee-row {

    padding: 0px;

}



.promo-coffee-info {

    text-align: center;

	    background-color: rgba(0, 0, 0, 0.7);

    padding: 80px 50px;

}



.promo-coffee-info .promo-fairtrade-logo {

    margin: auto;

    width: 300px;}



.promo-coffee-info .promo-malawi-coffee {

    width: 400px;

    margin: auto;

    margin-bottom: 50px;}

	

	

.promo-coffee-info img {

    margin: auto

}



/* ==================== VITALITY PAGE STYLES ==================== */



.viatlity-section {

    background: url(../images/promos/promos-header.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    padding: 50px;

}

.vitality-coffee-info {

    text-align: center;

}

.vitality-coffee-info .vitality-malawi-coffee {

    width: 300px;

    margin: auto;

    margin-bottom: 50px;

}

.vitality-coffee-info .vitality-fairtrade-logo {

    margin: auto;

    width: 300px;

}

.vitality-01 {

    background: url(../img/vitality-bg.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    background-position: 42% 64%;

}

.vitality-01a {

    background: url(../images/promos/promo-discovery-bg.jpg);

    background-repeat: no-repeat;

    background-size: cover;

}

.vitality-02 {

    width: 100%;

    background-color: #003C2F;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 23px;

}

.vitality-coffee-row {

    padding: 0px;

}

.vitality-coffee-info {

    text-align: center;

    background-color: rgba(215, 241, 233, 0.4);

    padding: 80px 50px;

}

.vitality-section .button {

    padding: 10px 18px;

    margin: 25px auto;

    width: 40%;

    border: 1px solid #fff;

    transition: 0.5s all;

    font-family:'css/FuturaStd-Book', sans-serif;

}



.vitality-section .button:hover {

    padding: 10px 18px;

    margin: 25px auto;

    width: 48%;

    border: 1px solid #fff;

    background-color: #fff;

    color: #3b2e22;

    transition: 0.4s all;

}



#vitality-icon {display:inline-block}



#vitality-icon svg {

    margin-top: 7px

}



.content-outline {

    border: 1px solid #FFF;

}



.content-outline-grey {

    border: 1px solid #393F3F;

}



@media screen and (max-width: 768px) {

    .content-outline {

        border: 1px solid #FFF;

        margin-top: 20px;

    }

}

.content-outline-grey {

    border: 1px solid #393F3F;

}



.line {

    border-top: 2px solid white;

    width: 100%

}

