/* Header Styles Below
***************************************************/

/* BODY */
body {
    position: static!important;
    background-color: cornsilk!important;
    font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
}

/*
html, body, .carousel, .carousel-inner, .carousel-inner .item {
    height: 100%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
*/


.hidden-xs >.container {
    width: 100%;
    }

.footer-seal > img{
        width: 100%;
    max-width: 108px;
}

.content > div > div > img, .content > div > div > p > img,  .content > div > div > div > img {
    max-width: 100%;
}

@media screen and (min-width: 768px){

body > .content-container, body > form {min-height:650px;}

/* *** Masthead ** */
div.masthead.hidden-xs {
    /* background: rgba(0, 0, 128, 0.8) none repeat scroll 0 0; */
	background-color: #000080;
    position: absolute;
    top: 0;
    z-index: 3;
    display: block;
    width: 100%;
    min-width: 100%;
}


.masthead .toolbar {
    position: relative;
}

.masthead .toolbar-row{
        margin: 5px 0;
    }


li[data-sitemap-node="/311/"]{display: none;}

button#search-filter.btn.btn-default.dropdown-toggle{
     -moz-user-select: none;
    background-image: none;
    background-color: #DDD8D8;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    margin-bottom: 0;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    height: 25px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

input#q.form-control{
     background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 11px;
    height: 25px;
    line-height: 12px;
    padding: 5px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


button.btn.btn-default{
        -moz-user-select: none;
    background-image: none;
    background-color: #DDD8D8;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    margin-bottom: 0;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    height: 25px;
}

a.btn.btn-default{
        moz-user-select: none;
    background-image: none;
    background-color: #DDD8D8;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    margin-bottom: 0;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    height: 25px;
}

a.btn.btn-primary {
    -moz-user-select: none;
    background-image: none;
    background-color: #DDD8D8;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    margin-bottom: 0;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    height: 25px;
    color: #000;
}


.logo {
    width: 14%;
    float: left;
    padding: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0px;
    margin-top: -50px;
    position: absolute;
    top: 49px;
}

.logo > img {
    width: 100%;
    height: auto;
}

/* Social Media Injected with jquery document ready
$('.toolbar-row').prepend("<div class='toolbar-item'><div class='col-xs-3 col-sm-3 col-md-3 header-social'><a href='//twitter.com/cityofdoral' target='_blank'><div class='col-xs-1'><i class='fa fa-twitter'></i></div></a></div><div class='col-xs-3 col-sm-3 col-md-3 header-social'><a href='//www.facebook.com/cityofdoral' target='_blank'><div class='col-xs-1'><i class='fa fa-facebook'></i></div></a></div><div class='col-xs-3 col-sm-3 col-md-3 header-social'><a href='//www.youtube.com/user/DoralTV77' target='_blank'><div class='col-xs-1'><i class='fa fa-youtube'></i></div></a></div><div class='col-xs-3 col-sm-3 col-md-3 header-social'><a href='//instagram.com/cityofdoral/' target='_blank'><div class='col-xs-1'><i class='fa fa-instagram'></i></div></a></div></div>")
 */

.header-social > a > div {
    width: 25px;
    height: 25px;
    -webkit-transition: background-color .3s;
    -moz-transition: background-color .3s;
    transition: background-color .3s;
    border-radius: 50%;
    display: inline-block
}


.header-social > a > div > i {
    color: inherit;
    display: inline-block;
    padding: 8px 20px 5px;
    font-size: 34px;
    vertical-align: -7px;
    position: relative;
    right: 24px;
    bottom: 0px;
    -webkit-transition: color .3s;
    -moz-transition: color .3s;
    transition: color .3s;
    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: initial;
    transition-delay: initial;
    color: #fff;
    padding: 8px 20px 5px;
    font-size: 20px;
    right: 29px;
    bottom: 5px;
}

.toolbar i.fa {top:-5px !important;}

.toolbar span.fa {top:0 !important;}
	
.header-social > a > div > i.fa-facebook {
    right: 25px;
}


.header-social span{
    color:#ffffff;
}

.header-social > a > div > i.fa-twitter:active, i.fa-instagram:active , i.fa-facebook:active, i.fa-youtube:active{
 color:#ffffff;
}

.header-social > a > div > i.fa-twitter:hover{
  color: #00aced;
}

.header-social > a > div > i.fa-instagram:hover{
color: #DEB887;
}

.header-social > a > div > i.fa-youtube:hover{
color: #cd201f;
}

.header-social > a > div > i.fa-facebook:hover{
color: #3B5998;
}

.header-social:hover .col-xs-1 {
    background: #ffffff;
}

.header-social:hover i.fa-twitter{
  color: #00aced;
}

.header-social:hover i.fa-instagram{
color: #DEB887;
}

.header-social:hover i.fa-youtube{
color: #cd201f;
}

.header-social:hover i.fa-facebook{
color: #3B5998;
}
	
.page-container {
		margin:-60px 0 0 0;
}

/* *** Header Navbar ** */
.navbar-left {
	margin:0 0 0 20px;
	}

div.header-navbar.navbar.navbar-default.navbar-static-top{
    position: relative;
    margin-top: 56px;
    background-color: transparent !important;
    border-color: transparent !important;
    z-index: 2;
}
	#readspeaker_button1 {
		z-index: 1 !important;
	}

.navbar-nav>li>.dropdown-menu {
    margin-top:4px !important;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff !important;
    font-size: 1.2em;
    font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
	font-weight: 900;
	text-shadow: rgb(3, 3, 3) 3px 3px 3px;
	text-transform: uppercase;
}

div#header-navbar-collapse.navbar-collapse.collapse{
        margin-left: 15%;
}


.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background: none !important;
    color: #ffffff !important;
    border-bottom: none;
}

.navbar-default .navbar-nav > li > a{
    border-bottom: solid 4px transparent;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #ffffff !important;
    border-bottom: 2px solid #cccccc;
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: 3px solid #cccccc;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: none;
    float: left;
    font-size: 14px;
    left: 0;
    list-style: outside none none;
    margin: 4px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    text-align: left;
    top: 100%;
    z-index: 1000;
    opacity: 1;
    filter: alpha(opacity=100);
}

.dropdown-menu > li:first-child > a {
    clear: both;
    color: #000000;
    display: block;

    line-height: 1.42857;
    padding: 3px 20px;
    white-space: nowrap;
}


.dropdown-menu > li > a {
    clear: both;
    color: #000000;
    display: block;
    font-weight: 400;
    line-height: 1.42857;
    padding: 3px 20px;
    white-space: nowrap;
	font-size:1.5em;
}
.dropdown-menu > li > a:hover {
	background-color: #dcdcdc !important;
	}


.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus {
        background-color: transparent !important;
        color: #000000;
}
.dropdown-menu>.active>a:hover{
		background-color: #cccccc;
}

.dropdown-menu .divider {
    background-color: #cccccc;
    height: 3px;
    margin: 9px 0;
    overflow: hidden;
}

.caret {
    /* border-left: 4px solid #ffcc00; */
    /* border-right: 4px solid #ffcc00; */
    color: #ffffff;
    border-top: 4px dashed;
    display: inline-block;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    width: 0;
}


.footer-spliter {
    border-left: solid 2px;
}


}


/* Footer */

.footer {
    bottom: 0;
    width: 100%;
    margin-top: 0!important;
    /* background: rgba(0, 0, 128, 0.8) none repeat scroll 0 0; */
	background-color: #000080;
    color: #fff;
}

.footer-seal {
    padding-top: 2%;
}

.footer-split {
    border-left: solid 2px lightgray;
    margin-top: 22px;
}

.footer-spliter > ul > li > a{color:#ffffff;}
.footer-spliter > ul > li > a:hover{color: #337ab7;}
.footer-links {
    border: 0 none;
    padding-top: 2em;
    padding-bottom: 2em;
}

.footer-links > .col-xs-12 > h3 { text-shadow: 1px 1px 5px #000000;}
.strip .container, .container.footer-links, #EntityFormControl, .slider-bottom-content .container {
    max-width: 1170px;
}

.bx-wrapper {
	border: none !important;
}




@media screen and (max-width: 767px) {

.hidden-xs {
        display: inherit!important;
}

div.masthead.hidden-xs > div.container > div.toolbar{
    display: none!important;
}


    .header-social > a > .col-xs-6{
        display:none;
    }

.logo {
   text-align: center;
}

}