body { background-color: #fcfcfc; font-family: 'Open Sans', sans-serif }
body, h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; font-size: 16px }
.container { max-width: 1400px; margin: 0 auto }

a:link, a:visited { text-decoration: none; color: #f47f20 }
a:hover, a:active { color: #4a7023 }
input { font-size: 1.2em !important }
.fa-2x { font-size: 1.4em }

#background-img { background: url('../images/slider_2048.jpg') no-repeat; min-width: 490px;padding: 100px 0; }
#background-img-modano { background: url('../images/modano_2048.jpg') no-repeat; min-width: 490px;padding: 100px 0; }

#powered_by { display:none }

/*============================================*/
/* Gray arrow for "more info"/auto-scroll     */
/*============================================*/
#arrow-more { position: absolute; right: 0; top: 86%; z-index: 999; margin-right: 40px; color: #000; font-size: 1.2em }
#arrow-more a { color: #000 }
#arrow-more .fa { display: block; text-align: center }

/*============================================*/
/* Navigation bar - globals                   */
/*============================================*/
#nav-primary { height: 54px; margin: 0 !important }
#nav-primary a:link, #nav-primary a:visited { color:#333 !important }
#nav-primary a:hover, #nav-primary a:active { color:#f47f20 !important }

.navbar-default { background-color: rgba(248, 248, 248, 0.6); border-radius: 0; border: 1px solid rgba(248, 248, 248, 0.56) }
.navbar-header { position: absolute; top: 0; left: 0; margin-left: 50px; margin-top: 12px }
.navbar-brand { margin: 0; padding: 0 }
.navbar-getapp { border: 3px solid #bcd631; margin-left: 30px; margin-right: 50px; padding: 5px }
.navbar-text { position: absolute; right: 0; top: 0 }
#tango-navbar-collapse { padding: 0 }
.navbar-nav li { text-align: center; font-size: 1em }
/*============================================*/
/* Scrolling navigation bar                   */
/*============================================*/
#nav-scrolling { background-color: #454545; border: none }
#nav-scrolling .navbar-brand { padding: 7px 0 }
#nav-scrolling .navbar-brand img { height: 32px; margin-top: -6px }
#nav-scrolling a:link, #navbar-scrolling a:visited { padding: 0 15px; color: #fefefe }
#nav-scrolling a:hover, #navbar-scrolling a:active { color: #5cb3c5 }
#nav-scrolling .navbar-getapp { border: none; color: #bcd631 }
#nav-scrolling .navbar-text { top: -3px }
#nav-scrolling ul { margin: 10px auto; min-height: 20px }
#nav-scrolling li { margin-top: 3px }
#nav-scrolling li.active a { color: #5cb3c5; background: none }
#nav-scrolling .fa-angle-right { vertical-align: middle; margin-top: -6px }
/*============================================*/
/* Gray navigation bar                        */
/*============================================*/
#navbar-share { font-size: 1em; padding-top: 10px; float: left; clear: both; width: 103%; margin-left: -15px; background-color: #737373 }
#navbar-share div { display: inline-block }
#navbar-share a:link, #navbar-share a:visited { color: #d4d4d4 }
#navbar-share a:hover, #navbar-share a:active { color: #5cb3c5 }
#navbar-share #fed-goal { width: 100%; height: 4px; background-color: rgba(0, 0, 0, 0.3) }
#navbar-share #fed-progress { background-color: #bcd631; width: 0%; height: 4px; vertical-align: top }
/*============================================*/
/* Items in slider                            */
/*============================================*/
#total-fed { font-weight: 700; font-size: 1.125em; position: absolute; top: 60px; left: 50%; color: #ff7e00; z-index: 999 }
#total-fed img { display: block; margin: 0 auto }

.tango-caption
{ 
    position: absolute;
    color: #fff;
    top: 55%;
    left: 0; 
    background-color: rgba(255, 126, 0, .85);
    float: left;
    height: 121px;
    width: 75%;
    text-align: right;
    padding: 20px 30px 20px 0;
    margin-bottom: 30px;
}

.tango-caption-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding-right: 2em }
.tango-caption h1 { font-size: 3em; font-weight: normal }
.tango-caption p { font-size: 1.2em }

.tango-buttons { position: absolute; color: #fff; top: 81%; left: 0; float: left; text-align: right; width: 75% }
.tango-buttons button { border: none; color: #fff; font-size: 1em; height: 48px; width: 200px }
.tango-buttons .button-signup { background-color: rgba(188, 214, 49, .85); margin-right: 40px }
.tango-buttons .button-getapp { background-color: rgba(188, 214, 49, .85) }
.tango-buttons p { margin: 10px 0; font-size: 1.2em;}
/*============================================*/
/* Slider                                     */
/*============================================*/
.carousel-indicators li { border-color: #fff !important }
.carousel-indicators li.active { background-color: #ff7e00 !important }

.carousel-inner { max-height: 780px; } 
.fill { width: 100%; height: 100%; background-position: center; background-size: cover }


/* Very large devices (desktops, 1920px and up) */
@media (min-width: 1920px)
{
#tango-carousel [class*="slider-img-"] { display: block; -moz-box-sizing: border-box; box-sizing: border-box; width: 2048px; height: 954px }
    #tango-carousel .slider-img-1 { background: url('../images/slider_2048.jpg') no-repeat }
    .tango-buttons { top: 75%; }		
}

/* Large devices (large desktops, up to 1920px) */
@media (max-width: 1920px)
{
#tango-carousel [class*="slider-img-"] { display: block; -moz-box-sizing: border-box; box-sizing: border-box; width: 1920px; height: 894px }
    #tango-carousel .slider-img-1 { background: url('../images/slider_1920.jpg') no-repeat }
    .tango-buttons { top: 75%; }	
	#arrow-more {top: 70%; margin-right: 40px; font-size: 1.4em }	
}

/* Large devices (large desktops, up to 1400px) */
@media (max-width: 1400px)
{
#tango-carousel [class*="slider-img-"] { display: block; -moz-box-sizing: border-box; box-sizing: border-box; width: 1400px; height: 610px }
    #tango-carousel .slider-img-1 { background: url('../images/slider_1400.jpg') no-repeat }
    .tango-caption h1 { font-size: 2.5em; font-weight: normal; }
    .tango-caption p { font-size: 1em }
	.tango-buttons { top: 81%; }		
	#arrow-more {top: 80%; margin-right: 40px; font-size: 1.2em }	
}

/* Medium devices (desktops, up to 1024px) */
@media (max-width: 1024px)
{
#tango-carousel [class*="slider-img-"] { display: block; -moz-box-sizing: border-box; box-sizing: border-box; width: 1024px; height: 477px }
    #tango-carousel .slider-img-1 { background: url('../images/slider_1024.jpg') no-repeat } 
    .tango-caption { height: 100px }
    .tango-caption h1 { font-size: 2em; font-weight: normal; }
    .tango-caption p { font-size: 0.8em }
    .tango-buttons button { border: none; color: #fff; font-size: 0.9em; height: 36px; width: 120px }
	#arrow-more {top: 70%; margin-right: 40px; font-size: 1.1em }			
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px)
{
#tango-carousel [class*="slider-img-"] { display: block; -moz-box-sizing: border-box; box-sizing: border-box; width: 768px; height: 358px }
    #tango-carousel .slider-img-1 { background: url('../images/slider_768.jpg') no-repeat }
	.tango-caption-container { padding-right: 1em }	
    .tango-caption { height: 76px }
    .tango-caption h1 { font-size: 1.2em; font-weight: normal; margin-top:12px }
    .tango-caption p { font-size: 0.7em }
    .tango-buttons button { border: none; color: #fff; font-size: 0.8em; height: 28px; width: 110px }	
	#arrow-more {top: 70%; margin-right: 40px; font-size: 0.9em }		
}
/* Extra small devices (phones, less than 768px) */
@media (max-width: 480px)
{
	#tango-carousel [class*="slider-img-"] { display: block; -moz-box-sizing: border-box; box-sizing: border-box; width: 480px; height: 224px }
    
    .tango-caption-container { padding-right: 0.5em }	
	.tango-caption { height: 55px }
    .tango-caption h1 { font-size: 1em; font-weight: normal; margin-top:10px }
    .tango-caption p { font-size: 0.5em }

	.tango-buttons button { border: none; color: #fff; font-size: 0.5em; height: 20px; width: 70px }
	.carousel-indicators { display: none }
	#arrow-more {top: 60%; margin-right: 40px; font-size: 0.8em }	
	#tango-carousel .slider-img-1 { background: url('../images/slider_480.jpg') no-repeat }
}
/*============================================*/
/* Featured-in area                           */
/*============================================*/
#featured { padding: 20px 0 }
#featured a { margin: 0 10px; opacity: .4 }
/*============================================*/
/* Main header with mission                   */
/*============================================*/
#main-messaging { padding: 0 30px 15px 30px }
#main-messaging p { font-size: 1em; text-align: justify; margin: 20px auto; width: 94% }
#main-messaging h1 { font-size: 2em; color: #ff7e00; text-align: center }
#people-fed-count, #tangotab-people-fed-count { font-weight: 700; font-size: 2em; text-align: center; margin-top: 20px }
#fed-by-text { font-weight: 100; letter-spacing: 2px; text-align: center }

/*============================================*/
/* More info chiclets and blinds effect       */
/*============================================*/
#blinds { margin-top: 75px; text-align: center }
#blinds .chiclet { border: 1px solid #ccc; padding: 0; display: inline-block; width: 280px; margin: 0 1% }
#blinds .chiclet img { display: block; margin: 0 auto; width: auto; height: 280px }
#blinds .chiclet .chiclet-container { position: relative; overflow: hidden; height: 280px; padding-top: 50px; font-size: 1em }
#blinds .chiclet .overlay { font-size: 1.25em; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(92, 179, 197, 0.85); position: absolute; -webkit-transition: top 0.2s ease-out }
#blinds .chiclet .overlay p { font-size: 1.25em; color: #fefefe; text-align: center; font-weight: 500; margin-top: 60px }
#blinds .chiclet:hover .overlay:nth-of-type(1) { top: -350px }

#blinds .chiclet .glyph-container { position: absolute; bottom: 60px; height: 30px; width: 100% }
#blinds .chiclet .glyphicon { color: #fefefe; font-size: 1.5em; display: block; margin-left: auto; margin-right: auto }
#chiclet-bluebox-overlay
{ position: absolute; font-size: 1.25em; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(92, 179, 197, 1.0); -webkit-transition: top 0.2s ease-out; z-index: 999; display: none }

#all-chiclets-container { color: #fefefe }
#all-chiclets-container h2 { font-size: 1.2em; font-weight: 700; text-align: center }
#all-chiclets-container p { font-weight: 100 }
#all-chiclets-container button.close
{
    color: #333;
    font-size: 1.3em;
    margin: -35px 0px 0 0;
    border-radius: 50px;
    border: 2px solid #ccc;
    width: 30px;
}
/*============================================*/
/* Search area - inputs, map, results         */
/*============================================*/
#find-deals { background-color: #555; margin-top: 75px; padding-bottom: 50px }
#find-deals h1 { color: #fff; text-align: center; font-size: 2em; margin-top: 50px }
#find-deals .subheading { color: #fff; font-size: 1.3em; margin-top: 10px; text-align: center }
#find-deals .city-select { color: #999; padding: 12px 0 10px; font-size: 1em; margin-top: 20px; margin-bottom: 30px; width: 100%; border: 2px solid #bcd631; text-indent: 30px }
#find-deals #map-canvas { height: 500px; border: 2px solid #bcd631; border-right: none }

.input-box { box-sizing: border-box; border: 2px solid #bcd631; margin-top: 20px; margin-bottom: 30px; background-color: #fff; padding: 0 }
.input-box .spyglass { font-size: 1em; float: left; color: #aaa; margin: 15px 0 0 10px; padding-right: 5px }
.fa-angle-right { vertical-align: middle; margin-top: -6px }
.input-box input { float: left; height: 42px; line-height: 42px; border:none; width: 90% }
.btn-search { font-size: 1em; text-shadow: 1px 1px #555; border: 2px solid #fefefe; color: #fff; background-color: #bcd631; padding: 10px; margin-top: 20px; width: 98% }
.btn-search:hover { background-color: #ff7e00 }

#search-results { background-color: #fff; height: 500px; overflow: auto; border: 2px solid #bcd631; border-left: none }
#search-results h2 { font-weight: 700; font-size: 1.2em; margin-bottom: 10px; padding-left: 10px }
#search-results ul { list-style-type: none; padding: 0 }
#search-results li { border-bottom: 2px solid #ccc; border-top: 2px solid #ccc; padding: 5px }
#search-results li h3 { color: #ff7e00; margin: 0 }
#search-results li div { display: inline-block; vertical-align: middle; margin: 0; margin-left: 5px; width: 56%; font-size: 0.75em }
#search-results li img { width: 100px; height: 67px; display: inline-block; font-size: 1.2em }
#search-results-container { position: relative }
#search-results-container>div[class*="col-"] { padding-left: 0; padding-right: 0 }
/*============================================*/
/* Donation information                       */
/*============================================*/
#donate { margin-top: 20px }
#donate h1 { text-align: center; font-size: 2em; color: #ff7e00; margin-bottom: 35px }
#donate p { text-align: left; font-size: 1em }
#donate .charity-logos { list-style-type: none; margin-bottom: 45px }
#donate .charity-logos li { display: inline-block; margin: auto 32px }
#donate .charity-logos img { height: auto; width: 75px }
/*============================================*/
/* Gray sticky footer bar                     */
/*============================================*/
.footer { background-color: #555; color: #fefefe; height: 40px; padding: 10px; font-size: 0.8em; margin-top: 25px; border-top: 1px solid #fefefe }
.footer .fa { margin-top: -6px; vertical-align: middle }
.footer a { text-decoration: none; border-bottom: 1px dashed #eee }
.footer a:link { color: #fefefe }
.footer a:visited { color: #fefefe }
.footer a:hover { color: #ff7e00 }
.footer a:active { color: #bcd631 }
.footer.navbar { min-height: 20px }
/*============================================*/
/* Modal window - globals                     */
/*============================================*/
.modal { overflow-x: hidden }
.modal-footer { border: none }
.modal-header { border: none }
.modal-content { background-color: #000; height: 250px; background: rgba(0, 0, 0, 0.8); border: 4px solid #fff; margin-top: 25% }
.modal-body { margin-top: 30px }
.modal-dialog { width: 900px }

button.close { opacity: 1.0; color: #fff }
.form-group { padding: 5px 2px }
/*============================================*/
/* Modal window - signup                      */
/*============================================*/
#info-safe { color: #fefefe; float: right }
#signup-modal input, #getapp-modal input { border: 2px solid #bcd631; background-color: #dfdfdf; border-radius: 0; margin: auto 5px }
#signup-modal .modal-body { margin-top: 15px; padding-top: 0 }
#button-signup, #button-getapp { height: 34px; line-height: 34px; background-color: #bcd631; border: none; color: #fefefe; font-size: 1.2em; padding: 0; margin-left: 5px; width: 100% }
/*============================================*/
/* Modal window - get app                     */
/*============================================*/
#getapp-modal .modal-dialog { width: 520px }
#getapp-modal .modal-content { height: 110px }
#getapp-modal .modal-body { margin: 0; padding: 0 }
#getapp-modal button.close { margin-top: -10px }
.modal-body #cellphone { width: 200px; margin-top: -5px }
#getapp-errors, #signup-errors { color: red; font-size: 0.8em; text-align: center; padding: 0 5px }
#button-getapp { width: 180px }
#button-signup { width: 300px; height: 2.2em }
/*============================================*/
/* RSS feed                                   */
/*============================================*/
.feedEkList { width: 100% }
#rss-feed { margin-bottom: 150px }
#rss-feed img { width: 150px; display: inline-block; vertical-align: top }
#rss-feed .new-content { display: inline-block; width: 75%; padding: 0 10px 10px 10px; margin-left: 1em }
#rss-feed .itemTitle a:link, #rss-feed .itemTitle  a:visited { color: #f47f20 !important }
#rss-feed .itemTitle a:hover, #rss-feed .itemTitle a:active { color: #4a7023 !important }