@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:700,300);
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype');
}

body{
	background-color: #ffffff !important;
	font-family: "Roboto","Helvetica Neue",Helvetica,Arial;
	font-weight: 500;
}

/*Scrolling*/
html{
	overflow-x:hidden;
}
html ::-webkit-scrollbar {
    width: 7px;
}

html ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

html ::-webkit-scrollbar-thumb {
    background-color: rgb(195, 195, 195);
    border-radius: 5px;
}

.table-responsive::-webkit-scrollbar {
    width: 4px !important;
}
.table-responsive::-webkit-scrollbar:horizontal {
  	height: 4px !important;
}
.table-responsive::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}
.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgb(195, 195, 195) !important;
}
.table-responsive::-webkit-scrollbar-corner{
	display: none;
}

.container-fluid{
	padding: 0px;
}
#page-wrapper{
	padding: auto 0px;
}

/*Nav*/

.navbar-brand>img{
	display: inline !important;
}
.navbar-brand{
	float: none;
}
.rappler-logo{
    position: relative;
    z-index: 9999;
    padding: 0px;
}

.top-nav h2{
    font-size: 40px;
    color: #fff;
    margin-top: 8px;
    margin-right: 10px;
    margin-bottom: 0px;
    font-weight: 700;
}

.navbar {
	min-height: 60px;
    margin-bottom: 0px;
}
.main-nav{
	background-color: #e76229;
    border: none !important;
}

.top-nav>li>a{
	color: #ffffff !important;
}

.top-nav>li>a:hover, .top-nav>li>a:focus, .top-nav>.open>a, .top-nav>.open>a:hover, .top-nav>.open>a:focus{
	background-color: #e67830 !important;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
	background-color: #475664;
	border-bottom: 1px solid #475664;
}

.navbar-fixed-top{
	background-color: #e76229;
	border: none !important;
}

.side-nav h3 {
    margin: 10px 10px 5px;
    text-align: center;
    padding: 5px 10px 10px;
    font-size: 18px;
    color: #b9c7cf;
    border-bottom: 1px solid #b9c7cf;
}

@media only screen and (min-width: 768px){
	.top-nav h2{
	    margin-right: 30px;
	}
	.navbar-left {
		padding-left: 50px !important;
	}
	.navbar-right {
		padding-right: 50px !important;
	}
	.rappler-logo {
	    float: left;
	}
	.navbar-brand>img{
		float: left !important;
	}
	.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
		background-color: #e76229 !important;
		border: none !important;
	}
	.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
	    margin-top: 0px !important;
	    padding: 14px !important;
	}
	.img-agos{
		width: 20% !important;
		display: block !important;
	}
	.img-description{
		width: 80% !important;
	}
	.panel-body .box{
	    width: 19% !important;
	    display: inline-block;
	    padding: 5px;
	}
	.panel-body{
		text-align: left !important;
	}
	.panel-bottom{
		margin-right: 43px;
		float: right;
	}
	.panel-bottom a{
	    font-size: 14px;
	    color: #333;
	    font-weight: normal;
	}
	#page-wrapper{
		padding-top: 40px !important;
	}
	.content-title{
		display: flex;
		justify-content: center;
		margin: 0px 50px;
	}
	.title-description p{
		text-align: left;
	}
}

@media only screen and (min-width: 1020px){
	.content-title{
		margin: 0px 150px;
	}
}

@media only screen and (min-width: 1240px){
	.content-title{
		margin: 0px 200px;
	}
}

@media only screen and (min-width: 1350px){
	.content-title{
		margin: 0px 350px;
	}
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #fff !important;
    margin-top: -8px;
    padding: 14px;
}
.navbar-inverse .navbar-nav>li>a{
	color: #b9c7cf !important;
}
.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover{
    background-color: #333333 !important;
}
.navbar-nav {
    margin: 0px -10px 7.5px;
}

.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #e67830;
}

.navbar-inverse .navbar-toggle {
    border-color: #fff;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border: none !important;
}

.navbar-left{
	padding-left: 25px;
	display: inline !important;
	float: left;
}

.navbar-right{
	padding-right: 25px;
	display: inline !important;
	float: right;
}
.top-nav>li>a{
	padding: 20px 15px !important;
	min-height: 60px !important;
}

.top-content{
	margin-top: 30px;
}

.text-normal{
    font-family: "Roboto Condensed";
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    color: #4c4c4c;
}

.top-left{
	padding:20px;
}

.img-agos{
	padding:20px 10px;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	float: left;
}
.img-description{
	padding: 20px 20px;
	width: 100%;
	float: right;
}

/*PANEL*/

.panel-body .box{
    display: inline-block;
    padding: 5px;
}
.panel{
	margin-bottom: -2px;
	border-radius: 0px;
    text-align: -webkit-center;
}
.panel-body{
	text-align: center;
	padding: 4px 15px 0px;
}
.panel-heading h3{
	font-size: 14px;
    padding: 5px;
    color: #333;
}
@media only screen and (max-width: 1199px){
    .panel-heading h3{
        text-align: center;
    }
}
.panel-bottom{
	font-size: 16px;
	text-align: center;
    margin-top: 10px;
}

/*MODAL*/
button{
    font-family: "Roboto" !important;
}
.modal{
    z-index: 30000;
}
.login-modal-header {
    border-bottom: 1px solid #ccc;
    background-color: #475764;
    color: #fff;
}
.modal-header {
    padding: 17px 20px;
    text-align: center;
    border: 0 none;
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #eaeaea;
    min-height: 16.5px;
    text-align: center;
}

button.close-modal {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    float: right;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: #000 !important;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
}
.login-modal {
    background-color: #fff;
    padding-bottom: 30px;
}
.modal-body {
    color: #727272;
}
.modal-body {
    position: relative;
    padding: 20px;
}
.hide {
    display: none !important;
}
.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
    text-align: center;
}
.alert {
    padding: 15px;
    margin-bottom: 24px;
    border: 1px solid transparent;
    border-radius: 0px;
}
fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}
.login-form-group {
    max-width: 100%;
}
.form-group {
    margin-bottom: 15px;
}
label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold !important;
}
.row-fluid .form-group label{
    font-size: 14px;
}
.login-modal input[type="text"], .login-modal input[type="email"], .login-modal input[type="password"] {
    border: 1px solid #a9a9a9;
    padding: 10px 15px;
    width: 100%;
}
.modalheader{
    margin: 15px 0 10px;
    font-size: 25px;
    color: #fff;
}
.form-group {
    margin-bottom: 15px;
}
.login-modal-footer {
    text-align: center;
    background-color: #FFFFFF;
    border: none;
}
.login-button-container {
    padding-top: 20px;
}
.login-modal #btn_login_cancel {
    -webkit-box-shadow: 0px 3px 0px 0px rgba(53, 65, 75, 1);
    -moz-box-shadow: 0px 3px 0px 0px rgba(53, 65, 75, 1);
    box-shadow: 0px 3px 0px 0px rgba(53, 65, 75, 1);
}
.login-modal button {
    font: 15px 'helveticabold';
    padding: 12px 30px 9px;
    margin-left: 10px;
}
.rappler_btn_cancel {
    display: inline-block;
    font-size: 14px;
    padding: 5px 20px;
    color: #FFF;
    background-color: #475764;
    cursor: pointer;
    line-height: 1.25;
    border: 0 none;
    border-radius: 5px;
}
.login-modal #btn_login_submit {
    -webkit-box-shadow: 0px 3px 0px 0px rgba(200, 83, 4, 1);
    -moz-box-shadow: 0px 3px 0px 0px rgba(200, 83, 4, 1);
    box-shadow: 0px 3px 0px 0px rgba(200, 83, 4, 1);
}
.rappler_btn_submit {
    display: inline-block;
    font-size: 14px;
    padding: 5px 20px;
    color: #FFF;
    background-color: #E76229;
    cursor: pointer;
    line-height: 1.25;
    border: 0 none;
    border-radius: 5px;
}

@media only screen and (max-width: 335px){
    .login-modal button {
        font: 15px 'helveticabold';
        padding: 12px 25px 9px;
        margin-left: 10px;
    }
}
/*action links*/
a{
	color: #333;
	cursor: pointer;
	text-decoration: none !important;
}
.box-content-right a p:hover, .box-content-right a p:focus{
    color: #e76229;
    transition: color .3s ease;
}
a:hover, a:focus, a:active{
	color: #e76229;
	transition: color .3s ease;
}
.disaster101-link p:hover, .disaster101-link p:focus{
    color: #e76229;
    transition: color .3s ease;
}
.progress-name div a h2:hover, .progress-name div a h2:focus{
    color: #e76229;
    transition: color .3s ease;
}
.h4.thin-margin, .h5.thin-margin, .h6.thin-margin, h4.thin-margin, h5.thin-margin, h6.thin-margin {
    margin:15px 0px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: 0;
    color: #333332;
}
.caption, .details, label, small {
    margin-top: 6.25px;
    font-weight: 400;
    letter-spacing: 0;
}
.details, label, small {
    font-size: 12px;
    line-height: 1.25;
    margin-bottom: 12.5px;
    display: inline-block;
}
hr.thin {
    margin-top: 6.25px;
    margin-bottom: 6.25px;
}
.h4.small, .h4.top-in-moods-title, .h5.small, .h5.top-in-moods-title, .h6.small, .h6.top-in-moods-title, h4.small, h4.top-in-moods-title, h5.small, h5.top-in-moods-title, h6.small, h6.top-in-moods-title {
    font-weight: 400;
    line-height: 1.5;
    color: #333332;
    font-size: 14px;
    margin-top: 9px;
    margin-bottom: 9px;
}

/*socialmedia*/
.social-icon{
	padding: 5px 3px 5px 0px;
}

/*main content*/
.main-content{
	margin-top: 50px;
}
.title-icon{
    padding: 5px 15px;
    text-align: center
}
.title-description{
    padding: 5px 15px;
}
.title-description h2{
    font-weight: 700;
    font-size: 50px;
    color: #333;
}
.title-description p{
	color: #4c4c4c;
    font-size: 14px;
    text-align: justify;
    line-height: 21px;
    font-weight: 500;
}


/*progress bar*/

.progressbar{
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	background: none;
}
.progressbar .progress-name h2{
	font-size: 14px;
	color: #333;
	font-weight: 500;
}

@media only screen and (min-width: 400px){
	.progressbar .progress-name h2{
		font-size: 20px !important;
	    color: #333;
	    font-weight: 700;
	}
}

#seekslider{
    outline: none;
}
#prepare{
    margin-top: 20px;
	display: flex;
	justify-content: flex-start;
}
#respond{
    margin-top: 20px;
	display: flex;
	justify-content: center;
}
#recover{
    margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}

input[type=range] {
    -webkit-appearance: none;
    border-radius: 8px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #e86129;
    box-shadow: -webkit-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.30);
	-moz-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.30);
	box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.30);
    margin-top: -6px;
}
input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
}

/*color*/
.orange{
	background: #e76229;
	color: #fff;
}
.orange-link{
    color: #e76229;
}
.orange-link:hover, .orange-link:focus{
    color: #f6c7b3;
}
.orange-hover:hover, .orange-hover:focus{
    color: #e76229;
}
.gray {
    background-color: #f4f4f4;
    color: #333332;
}
.dark-gray{
	background-color: #475764;
	color:#fff;
}

.dark-gray a:hover, .dark-gray a:focus{
	color:#e76229 !important;
}

/*response*/
.report{
	margin-top: 50px;
    padding-right: 5px;
    padding-left: 5px;
}
.box-header {
    position: relative;
    padding: 10px;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
.box-header:after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 47%;
    border-width: 13px 13px 0;
    border-style: solid;
    border-color: #e76229 transparent;
    display: block;
    width: 0;
}

.box-body{
	background-color: #f4f4f4;
    max-height: 399px;
    padding-top: 10px;
    overflow-y: scroll;
}

.feature-box .box-body{
	background-color: #f4f4f4;
	overflow-y: hidden;
	max-height: 333px !important;
    padding-top: 15px;
}
.box-content{
	display: flex;
    padding: 24px 0px;
    border-bottom: 1px solid #dddddd;
    margin: 0px 20px;
}
.disaster-shelter{
	padding: 19px 0px;
}
.box-content-footer {
    display: flex;
    justify-content: flex-end;
    background-color: #f4f4f4;
    border-top: 1px solid #ddd;
    margin-top: -1px;
}
.box-content-left{
    width: 30%;
    padding: 0px 15px;
    text-align: -webkit-right;
}
.box-content-right{
    width: 70%;
    padding: 0px 15px;
    text-align: -webkit-left;
    margin: auto 0px;
}
.box-content-right p{
    font-size: 14px;
    font-weight: normal;
    line-height: 21px;
    color: #333;
}
.box-content-center{
	padding: 0px 0px;
    text-align: left;
    margin: auto 23px;
    display: list-item;
}
.box-content-center p{
    font-size: 14px;
    font-weight: normal;
    line-height: 21px;
    color: #E76229;
    margin: 0px;
}
.box-content-footer a {
    font-size: 14px;
    color: #333;
    font-weight: normal;
    padding: 20px 5px;
    margin: 0px 20px;
}
.box-content-footer-shelter{
    display: flex;
    justify-content: flex-end;
    padding: 26px 20px;
    background-color: #f4f4f4;
    margin-top: -2px;
    border-top: 1px solid #dddddd;
}
.box-content-footer-shelter a {
    font-size: 14px;
    color: #333;
    font-weight: normal;
}

/*adds*/
.adds{
	text-align: -webkit-center;
	margin-top: 50px;
}

/*features*/
.features{
	margin: 40px 20px;
}
.feature-box{
	text-align: -webkit-center;
	max-height: 444px;
	margin: 10px 0px;
}
.features .volunteer{
	background-image: url("../img/img-be-a-volunteer.jpg");
	background-repeat: no-repeat;
    background-size: cover;
    height: 444px;
}
.features .v-respond{
    background-image: url("../img/img-respond.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 444px;
}
.volunteer-footer{
    padding:30px;
}
@media only screen and (min-width: 1200px){
	.volunteer-footer{
	    padding:120px 30px;
	}
}
.volunteer-title{
	display: block;
	padding: 30px 20px
}
@media only screen and (min-width: 768px) and (max-width: 1200px){
	.volunteer-title{
		display: block;
		padding: 25px 10px
	}
	.volunteer-footer {
	    padding: 10px 25px;
	}
}
.volunteer-img{
	margin: 10px 10px;
}
.volunteer-title h2{
   font-family: 'Roboto Condensed';
    font-weight: 700;
    line-height: 35px;
    font-size: 27px;
    color: #fff;
    text-align: center;
    margin: 10px;
}

.features .workshop{
	background-image: url("../img/img-workshop-sched.jpg");
	background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (min-width: 1380px){
	.volunteer-title h2{
	    margin: 30px -3px 20px;
	    text-align: left;
	}
}

/*buttons*/

@media only screen and (min-width: 960px){
	.btn-gray{
		padding: 20px 40px !important;
		font-size: 20px !important;
	}
}

.btn-gray{
    background-color: #475764;
    border-radius: 0px;
    border: none;
    padding: 10px 20px;
    outline: none !important;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    white-space: normal;
}
.btn-gray:hover, .btn-gray:active, .btn-gray:focus{
	color:#fff;
}

.volunteer span{
	font-size: 25px;
}

/*table workshop*/
@media screen and (max-width: 767px){
    .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th {
         white-space: normal;
    }
}
.td-left{
    border-right: 1px solid rgba(255,255,255,0.30);
	width: 25%;
	font-family: 'Roboto Condensed';
	font-weight: bold;
	font-size: 13px;
}
.table>thead>tr>th {
	border-bottom: none;
}
.workshop table{
	background-color: rgba(245,245,245,0.20);
    color: #fff;
    font-weight: bold;
    font-size: 13px;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(246,255,255,0.20);
}
.workshop .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: none !important;
}
.workshop-title h2{
	font-family: 'Roboto Condensed';
	font-weight: 700;
	font-size: 22px;
	color: #fff;
}
.workshop table tr td, .workshop table thead tr th{
	padding: 18px 15px;
    font-weight: 500;
}
.workshop .table-responsive{
    border: none !important;
    margin: 22px 20px;
    max-height: 300px;
    overflow: auto;
}
@media only screen and (max-width: 767px){
	.workshop .table-responsive{
		margin:20px 0px;
	}
}
.table-responsive table{
	width: auto;
    height: 100%;
    margin: 0px !important;
}
.workshop .workshop-title{
	padding: 8px 20px;
}
.workshop-footer{
    display: flex;
    justify-content: flex-end;
}
.workshop-footer a{
    padding: 4px 20px 18px;
    font-size: 14px;
    color: #fff;
    font-weight: normal;
}

/*Mood Meter*/

.mood-meter{
	text-align: center;
    padding: 15px 15px 15px 15px;
    margin: 50px 20px !important;
}
.box-shadow-1 {
    box-shadow: 0 2px 4px rgba(0,0,0,.02),0 2px 3px rgba(0,0,0,.1)!important;
}
.mood-embed{
	border: none;
    width: 998px;
    height: 420px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 991px) and (min-width: 768px){
	.hidden-xs.hidden-sm, td.hidden-xs.hidden-sm, th.hidden-xs.hidden-sm, tr.hidden-xs.hidden-sm {
	    display: none!important;
	}
}
/*main footer*/
.footer.padding {
    padding: 16px 0;
}
.footer {
    margin-bottom: 0;
    overflow: hidden;
    text-align: left;
    background-color: #475764;
}
@media only screen and (min-width: 768px){
	.footer.padding {
	    padding: 24px 0;
	}
}
@media only screen and (min-width: 992px){
	.footer.padding {
	    padding: 32px 0;
	}
}
@media only screen and (max-width: 991px){
    #map-left{
        padding-left:0
    }
    #map-right{
        padding-right:0
    }
}

.wrapper {
    margin: auto;
}
.main-wrapper {
    margin: 0 16px;
    position: relative;
}
@media (min-width: 768px){
	.main-wrapper {
	    margin: 0 24px;
	}
}
@media (min-width: 992px){
	.main-wrapper {
	    margin: 0 72px;
	}
}

.label-wrapper {
    text-align: left;
    position: relative;
}
@media (min-width: 768px){
	.label-wrapper {
	    text-align: left;
	}
}
.rappler3-regular-section{
    padding-bottom: 30px;
}
.float-rappler-label{
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
    z-index: 8;
    text-align: center;
    color: #fff;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
    letter-spacing: 0;
}
.float-rappler-label:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -10px;
    left: 50%;
    margin-top: 25px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    z-index: 9;
}
.label-wrapper .orange:before{
	border-top: 10px solid #e76229;
}
.label-wrapper .dark-gray:before{
	border-top: 10px solid #475764;
}
.white.link:focus, .white.link:hover {
    color: #ccc;
}
.white.link {
    color: #fff;
}
.light {
    color: #FFF!important;
}
.caption {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 37.5px;
}
.caption, .details, label, small {
    margin-top: 6.25px;
    font-weight: 400;
    letter-spacing: 0;
}

/*news*/
.section-hover, .section-tile {
    position: relative;
}
.section-tile:after, .section-tile:before {
    content: " ";
    display: table;
}
.flex-video.widescreen {
    padding-bottom: 56%;
}
.flex-video {
    position: relative;
    padding-bottom: 67.5%;
    height: 0;
    overflow: hidden;
    display: block!important;
}
.flex-video img {
    max-width: none;
    width: 100%;
}
img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}
img, legend {
    border: 0;
}

.section-hover {
    background-color: transparent;
    overflow: hidden;
    padding: 16px 0 8px;
}
@media (min-width: 992px){
	.section-hover {
	    -webkit-transition: all .3s ease-out;
	    -moz-transition: all .3s ease-out;
	    -ms-transition: all .3s ease-out;
	    -o-transition: all .3s ease-out;
	    transition: all .3s ease-out;
	    overflow: hidden;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    color: #fff;
	    padding: 16px;
	    opacity: 0;
	    background-color: rgba(0,0,0,.7);
	}
}

.section-hover:hover{
    opacity: 1 !important;
}

.news{
    margin: 50px 20px;
}


/*Emotions*/
.happy.link {
    color: #ACD759;
}
.happy.link:focus, .happy.link:hover {
    color: #79a327;
}
.sad.link {
    color: #4C6676;
}
.sad.link:focus, .sad.link:hover {
    color: #243038;
}
.angry.link{
	color:#B70002
}
.angry.link:focus,.angry.link:hover{
	color:#510001
}
.dontcare.link{
	color:#9A9A9A
}
.dontcare.link:focus,.dontcare.link:hover{
	color:#676767
}
.inspired.link{
	color:#5FCC5C
}
.inspired.link:focus,.inspired.link:hover{
	color:#31942e
}
.afraid.link{
	color:#E1CA4C
}
.afraid.link:focus,.afraid.link:hover{
	color:#aa951d
}
.amused.link{
	color:#74D2E3
}
.amused.link:focus,.amused.link:hover{
	color:#28b0c9
}
.annoyed.link{
	color:#987989
}
.annoyed.link:focus,.annoyed.link:hover{
	color:#614a56
}

/*Sidebar Report*/
#sidebar-report .sidebar-report-top {
    background-color: #f4f4f4;
    text-align: center;
    overflow: hidden;
    padding: 30px 0;
    width: 100%;
    -webkit-box-shadow: 0px 1px 5px 0px #cccccc;
    -moz-box-shadow: 0px 1px 5px 0px #cccccc;
    box-shadow: 0px 1px 5px 0px #cccccc;
}

.btn-report a, .btn-report input[type="submit"] {
    background: #485764 url(../img/icon-report.png) 36px center no-repeat;
    padding: 12px 40px 12px 70px;
    border: 0 none;
    color: #fff;
    font-size: 15px;
}

.sort-header {
    border-bottom: 1px solid #cccccc;
    font: 14px 'helveticabold';
    padding: 15px 15px 10px;
    overflow: hidden;
}

ul#report-list {
    list-style: none;
    overflow-y: auto;
    /* max-height: 481px; */
    padding: 0;
    margin: 0;
    padding-bottom: 35px;
}

ul#report-list li {
    border-bottom: 1px solid #cccccc;
    padding: 20px 14px;
    margin: 0;
    overflow: hidden;
}
.report-list-top {
    padding-bottom: 8px;
}
.report-type {
    text-align: center;
    margin-right: 15px;
    width: 25px;
    float: left;
}
.report-type .report-twitter {
    background: url(../img/icon-twitter.png) 0 0 no-repeat;
    height: 12px;
    width: 15px;
}
.report-type span {
    display: inline-block;
}
@media only screen and (min-width: 1025px){
    em {
        font-family: Arial;
        font-style: italic;
    }
}
.timestamp, .reply-count {
    font-size: 12px;
}
.timestamp, .reply-count {
    font-size: 12px;
}
.hide {
    display: none !important;
}
sup {
    top: -0.5em;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.up-vote {
    color: #e76229;
    font-size: 12px;
    float: right;
}
.up-vote span {
    cursor: pointer;
}
.up-count {
    border: 1px solid #e76229;
    font: 12px arial;
    padding: 2px 3px;
}
.btn-up {
    background: url(../img/icon-arrow-up.png) 0 0 no-repeat;
    margin: 2px 5px 0;
    border: 0 none;
    height: 14px;
    width: 14px;
    padding: 0;
    -webkit-appearance: button;
    cursor: pointer;
    text-transform: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
@media only screen and (min-width: 1025px){
    .clear {
        clear: both;
        height: 0;
    }
}
@media only screen and (min-width: 1025px){
    ul#report-list li .report-content {
        cursor: pointer;
        display: block;
    }
}
.side {
    text-align: center;
    margin-right: 15px;
    width: 25px;
    float: left;
}
@media only screen and (min-width: 1025px){
    ul#report-list .report-marker {
        padding-top: 3px;
        padding-bottom: 10px;
        float: left;
    }
}
@media only screen and (min-width: 1025px){
    ul#report-list .report-content p {
        font-family: arial;
        /*max-width: 230px;*/
        line-height: 18px;
        margin: 0;
        /*float: left;*/
    }
}
@media only screen and (min-width: 1025px){
    ul#report-list .report-content .report-photo-thumb {
        float: right;
    }
}
@media only screen and (min-width: 1025px){
    ul#report-list .report-content .report-photo-thumb img {
        border: 1px solid #eeeeee;
        height: 48px;
        width: 48px;
    }
}
.sidebar-title{
    background-color: #3d5d6a;
    color: #fff;
    padding: 10px;
    text-align: -webkit-center;
}

/*Shelter*/
.shelter{
    background-color: #f4f4f4;
    height: 444px;
    padding: 25px;
}
.shelter h2{
    text-align: left;
    font-size: 20px;
    font-weight: 700;
    padding-left: 13px;
}
.shelter-label{
    text-align: left;
    font-family: 'Roboto Condensed';
    font-size: 14px;
    color:#596A77;
    font-weight: 700;
    display: block;
    line-height: 1.7em;
}
.shelter-label p{
    text-align: left;
    display: inline;
    font-weight: 500;
    font-size: 14px;
    color: #EE7835;
}
.shelter-info{
    border-bottom: 1px solid #dddddd;
    padding-bottom: 25px;
}
.shelter-footer{
    padding:30px;
}
.shelter-content-box{
    max-height: 290px;
    overflow-y: auto;
}
/*BANGONPH*/
.bangon-box{
    height: 100%;
    padding-bottom: 0px;
}
.bangon-content{
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 30px;
    display: flex;
    justify-content: center;
}
.bangon-content h2{
    font-family: 'Roboto Condensed';
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    padding: 30px;
    top: 10%;
    text-align: -webkit-left;
    position: absolute;
}
.bangon-content p{
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    position: absolute;
    top: 40%;
    text-align: -webkit-left;
    padding: 30px;
}
.bangon-content img{
    bottom: 40px;
    position: absolute;
}
@media only screen and (max-width: 477px){
    .bangon-content p{
        font-size: 15px;
        top: 34%;
    }
    .bangon-content h2{
        font-size: 30px;
        top:0;
    }
    .bangon-content img{
        bottom: 20px;
    }
}
@media only screen and (max-width: 399px){
    .bangon-content p{
        font-size: 14px;
        top: 34%;
        line-height: 1.2em;
        padding: 10px;
    }
    .bangon-content h2{
        font-size: 20px;
        top: 0;
        padding: 10px;
    }
    .bangon-content img{
        bottom: 5px;
    }
}


@media only screen and (max-width: 330px){
    .report{
        padding-left: 10px;
        padding-right: 10px
    }
    .features{
        margin-left: 10px;
        margin-right: 10px;
    }
    .news{
        margin-left: 0px;
        margin-right: 0px;
    }
}

.twitter-feed{
    background-color: #f4f4f4;
    overflow-y: scroll;
    padding-top: 15px;
    height: 615px;
}

/*Recover bangon ph*/
.bangonph-update{
    border: 1px solid #c3c3c3;
    box-shadow: 0px 0px 2px #ddd;
    height: 510px;
    border-radius: 8px;
}

.operation-box{
    max-height: none;
}
.operation-box .operation-body{
    max-height: 440px !important;
}
@media only screen and (max-width: 330px){
    .report-recover {
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media only screen and (max-width: 386px){
    .features-recover {
        margin-left: 0px;
        margin-right: 0px;
    }
    .mobile-res{
        padding:0px;
    }
}

/*Nav Nav*/
.navbar-rappler-top {
    background-color: #e76229;
    border-top: 10px solid #C05133;
    height: 70px;
    z-index: 20031;
}
.navbar {
    min-height: 30px;
}
.nav>li, .nav>li>a, .navbar {
    position: relative;
}
.navbar-brand-top {
    margin: -10px 0 0 16px;
    position: absolute;
    z-index: 101;
}
@media (min-width: 768px){
    .navbar-brand-top {
        margin: -10px 0 0 24px;
    }
}
@media (min-width: 992px){
    .navbar-brand-top {
        margin: -10px 0 0 32px;
    }
}
@media (min-width: 1200px){
    .navbar-brand-top {
        margin: -10px 0 0 72px;
    }
}
.mdd-wrapper {
    padding-right: 16px;
}
@media (min-width: 768px){
    .mdd-wrapper {
        padding-right: 24px;
    }
}
@media (min-width: 992px){
    .mdd-wrapper {
        padding-right: 72px;
    }
}
.navbar-rappler, .navbar-rappler-top .navbar-collapse, .navbar-rappler-top .navbar-form, .navbar-rappler-top .navbar-toggle {
    border: none;
}
.navbar-collapse {
    max-height: 340px;
    overflow-x: visible;
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px){
    .navbar-collapse.collapse {
        display: block!important;
        height: auto!important;
        padding-bottom: 0;
        overflow: visible!important;
    }
    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }
}
.navbar {
    border-radius: 0px;
}
body {
    margin-top: 0px !important;
}
.navbar-rappler-top .navbar-nav>li>a {
    color: #FFF;
    padding: 0px 10px;
    margin-top: 17px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 25px;
    font-size: 14px!important;
    font-family: Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight: 400;
    letter-spacing: 0;
}
@media (min-width: 768px){
    .navbar-nav>li>a {
        padding-top: 2.5px;
        padding-bottom: 2.5px;
    }
}
.navbar-rappler-top .navbar-nav>li>a:focus, .navbar-rappler-top .navbar-nav>li>a:hover {
    color: #ccc;
    background: none;
}
.navbar-right {
    padding-right: 0px !important;
    display: inline !important;
    float: right;
}
.nav>li>.social-header {
    padding: 8px;
}
a#login {
    margin-right: 0px !important;
}
.navbar-left {
    margin-left: 177px !important;
    padding-left: 0px !important;
    margin-top: 12px !important;
    text-transform: capitalize;
}
.trend-header{
    float: left;
    position: absolute;
    margin-left: 13px;
    color: #fff;
    font-weight: bold !important;
}
.trend-header p{
    margin: 0px;
    font-family: 'Roboto';
    font-weight: 700;
    display: inline;
}
/*Nav Nav*/

/*2nd nav*/

.visible-lg, td.visible-lg, th.visible-lg, tr.visible-lg {
    display: none!important;
}
@media (min-width: 1200px){
    .visible-lg {
        display: block!important;
    }
}
.navbar-rappler {
    background-color: #475764;
    height: 40px;
    z-index: 20030;
}
.navbar-rappler, .navbar-rappler-top .navbar-collapse, .navbar-rappler-top .navbar-form, .navbar-rappler-top .navbar-toggle {
    border-color: #d75118;
}
.box-shadow-2 {
    height: 100%;
    box-shadow: 0 4px 7px rgba(0,0,0,.04),0 4px 7px rgba(0,0,0,.1)!important;
}
.navbar-header {
    padding: 4px 8px 4px 0;
    width: 105px;
    margin-left: 72px;
    margin-right: 16px;
    margin-top: 2px;
}
@media (min-width: 768px){
    .navbar-collapse.collapse {
        display: block!important;
        height: auto!important;
        padding-bottom: 0;
        overflow: visible!important;
    }
}
.navbar-collapse {
    max-height: 340px;
    overflow-x: visible;
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px){
    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }
}
.menu, .menu>li {
    position: static!important;
}
.navbar-nav {
    margin: 1.25px -15px;
}
@media (min-width: 768px){
    .navbar-nav {
        float: left;
        margin: 0;
    }
}
.navbar-rappler .navbar-nav>li>a {
    color: #FFF;
    padding: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.navbar-rappler .navbar-nav>li>a:focus, .navbar-rappler .navbar-nav>li>a:hover {
    color: #ccc;
    background:none;
}
.header-menu{
    width: 100%;
}
.header-menu-fixed{
    position: fixed;
    top: 0px;
}
.header-menu-mobile{
    position: fixed;
    top: 0px;
    width: 100%;
    display: none;
}
@media(max-width: 1199px){
    .header-menu-mobile{
        display: block;
    }
}
.navbar-rappler-mobile {
    background-color: rgb(231, 98, 41);
    height: 50px;
    z-index: 20030;
}
.navbar-header-mobile{
    margin-left: 25px;
    width: 100%;
    padding: 7px 8px 4px 0;
}
.sidebar-toggler{
    font-size: 30px;
    margin-top: -6px;
    display: inline-block;
}
.sidebar-toggler a{
    color: #fff;
    font-weight: bolder;
}
.sidebar-toggler a:hover, .sidebar-toggler a:focus{
    color: #fff;
    font-weight: bolder;
}
.mobile-logo{
    margin-top: -13px;
    margin-left: 10px;
}
/*2nd nav*/

/*Popover*/
.popover.bottom {
    margin-top: 10px;
}
.popover {
    display: block;
    position: absolute;
    top: 55px;
    left: -110px;
    z-index: 20010;
    display: none;
    max-width: 276px;
    padding: 1px;
    text-align: left;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    white-space: normal;
}
@media only screen and (min-width: 1025px){
    .popover {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
}
.popover.bottom .arrow {
    left: 75%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999999;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    top: -11px;
}

.popover .arrow {
    border-width: 11px;
}
.popover .arrow, .popover .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.popover.bottom .arrow:after {
    content: " ";
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #ffffff;
}
.popover .arrow:after {
    border-width: 10px;
    content: "";
}
.popover .arrow, .popover .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.popover-content {
    padding: 9px 14px;
}
.popover-mobile{
    position: relative;
    top: 35px;
    left: 72px;
    float: right;
}
.popover-arrow-mobile{
    left: 80% !important;
}
@media (max-width: 484px){
    .popover-2{
        top: -2px;
        left: -2px;
    }
}
.sign-in-text {
    font-size: 14px;
    font-family: 'HelveticaRegular', Arial;
}
@media only screen and (min-width: 768px){
    a#login {
        margin-right: 15px;
    }
}

.alertmap-title{
    text-align: center;
    color: #e76229;
    font-family: 'Roboto Condensed';
    font-size: 36px;
    margin-top: 10px;
}
.alertmap-btn{
    color: #fff;
    width: 100%;
    margin: 0px;
    font-size: 16px;
}
.alertmap-btn:hover, .alertmap-btn:focus{
    color:#e0e0e0;
}
.alertmap-box{
    margin: auto 0px auto 50px;
    padding: 50px 30px;
    border: 1px solid #e0e0e0;
    height: 500px;
    text-align: -webkit-center;
}
.alertmap-box .alert-p1{
    margin: 40px 10px 0px;
    text-align: center;
    font-size: 16px;
    line-height: 1.4em;
}
.alertmap-box .alert-p2{
    margin: 30px 10px 40px;
    text-align: center;
    font-size: 16px;
    line-height: 1.4em;
}
.volunteer2{
    padding-top: 120px;
}
@media only screen and (max-width: 1029px){
    .volunteer2{
        display: block;
        padding-top: 0px;
        padding: 25px 10px;
    }
}
@media only screen and (max-width: 1042px){
    .alertmap-box{
        padding: 20px;
    }
    .alertmap-box .alert-p1{
        font-size: 14px;
        margin: 20px 10px 0px;
    }
    .alertmap-box .alert-p2{
        font-size: 14px;
        margin: 10px 10px 20px;
    }
}
@media only screen and (max-width: 1340px){
   .alertmap-box{
        margin-left: 2px;
        margin-right: 0px;
        padding:20px 20px;
    }
}
@media only screen and (max-width: 991px){
   .alertmap-box{
        margin: 0px;
        padding: 50px 30px;
    }
    .alertmap-box .alert-p1{
        margin: 40px 10px 0px;
        font-size: 16px;
    }
    .alertmap-box .alert-p2{
        margin: 30px 10px 40px;
        font-size: 16px;
    }
}
@media only screen and (max-width: 383px){
   .alertmap-box{
        margin: 0px;
        padding: 30px 30px 0px;
    }
    .alertmap-box .alert-p1{
        margin: 40px 10px 0px;
        font-size: 14px;
    }
    .alertmap-box .alert-p2{
        margin: 30px 10px 40px;
        font-size: 14px;
    }
}
@media only screen and (max-width: 341px){
   .alertmap-box{
        padding: 20px 10px 0px;
    }
}