@charset "utf-8";
.permit-top-nav {
    float: right;
    clear: both;
    width: 100%;
    display: block;
}

nav {
    display: block;
    align-items: center;
}

.permitnav {
    /*background-position: bottom;*/
    display: flex;
	
}

h1 span[dir="rtl"] {
	display:block;
}

@media screen and (max-width: 1200px) {
    .permitnav {
        flex-wrap: wrap;
    }

    .permitnav > li {
        flex-basis: 33%;
    }
}

@media screen and (max-width: 800px) {
    .permitnav > li {
        flex-basis: 50%;
    }
}

@media screen and (max-width: 410px) {
    .permitnav > li {
        flex-basis: 100%;
    }
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
	column-count: 4;
}
ul.nav{
	text-indent:inherit !important;
}

.nav-permit-row {
    width: 100%;
}

ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}


/*Icon above text*/
.nav-permit-cell img {
    display: block;
    width: 60%;
    height: 60%;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

li {
    height: auto;
}

.permitnav li {
    text-align: center;
    width: 16.667%;
    height: 60px;
    float: left;
}

.pintro{
	width: 100%;
	float:left;
	clear:both;
	padding: 15px 0;
}

/* Background colors for each type of permit */
.permit-cell[id$=construction], .nav-permit-cell[id$=construction] {
    background: #ba3235;
}

.permit-cell[id$=parking], .nav-permit-cell[id$=parking] {
    background: #0554a6;
}

.permit-cell[id$=ferry], .nav-permit-cell[id$=ferry] {
    background: #d6562a;
}

.permit-cell[id$=banner], .nav-permit-cell[id$=banner] {
    background: #00854d;
}

.permit-cell[id$=truck], .nav-permit-cell[id$=truck] {
    background: #069da7;
}

.permit-cell[id$=newsrack], .nav-permit-cell[id$=newsrack] {
    background: #703385;
}

/* Color and font of text*/
.permit-label {
    margin-top: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #ffffff;
}

.language-label {
    display: none;
}

.english-label {
    display: block;
}

.languagenav li {
    /*text-align: center;
    width: 9%;
    float: left;*/
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

#permits-display {
    display: none;
}


/*----------------------------------------------------*/

/* Make the container size appropriately for different screen sizes */
#permit-big-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}
/* Apply flexbox */
.permit-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-around;
	width: 100%;
}
/* Element surrounding each permit type */
.permit-cell {
    display: inline-block;
    padding: 0;
    margin: 0 0 .8em 0;
    position: relative;
    width: 100%;
    min-height: 1px;
    cursor: pointer;
}

@media (min-width: 576px) { /* On small screens, there will be 2 columns */
    .permit-cell {
        /*-ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;*/
        -ms-flex: 0 0 48%;
        flex: 0 0 48%;
        max-width: 48%;
        margin-right: .8em;
    }
}

@media (min-width: 992px) { /* On medium-to-large screens, there will be 3 columns */
    .permit-cell {
        /*-ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;*/
        -ms-flex: 0 0 31.25%;
        flex: 0 0 31.25%;
        max-width: 31.25%;
        margin-right: 0 .8em 0 0;
    }
}
/* Style the inside of each permit type (image and caption) */
.permit-cell img {
    display: block;
    width: 80%;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
	padding-top: 20px;
}

.permit-cell .permit-label {
    padding: 20px;
    text-align: center;
    font-weight: bold;
    color: inherit;
    font-size: 1.5em;
    padding-bottom: 0.5em;
	color:white;
}
select#filter-permit{
	width:auto;
}
.urdu-label,
.arabic-label{
	direction: rtl;
}
h2 .arabic,
h2 .urdu{
	direction: rtl;
	display: block;
}

/*---------Buttons------------------------*/
#home-button-small {
    display: inline-block;
    border: 1px solid #069;
    border-radius: 0.5em;
    padding: 0.5em;
}

#home-button-center {
    display: block;
    text-align: center;
    border: 1px solid #069;
    border-radius: 0.5em;
    padding: 0.5em;
}

.language-label h3{
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
    word-wrap: normal;
}