/*This rule suggested by Tempest ticket 10974219 to control configurable messages background colour*/
.tdg-content .config-message-background {
/* background-color: #42f4ce;*/
 background-color: transparent; 
}

/*This rule removes the yellow background from configurable messages - replace with .tdg-content .config-message-background (above)*/
.config-message-background
{
    background-color: transparent;
}


/*This rule sets the Accounts List icon size and position on small screens*/
@media (max-width:575px)
{
    .system-comdev, .system-land, .system-dogs, .system-utility, .system-licensing
    {
        background-size: 25px 25px;
        background-position:  left top;
    }
}
/*This rule sets the Accounts List icon size and position on large screens*/
@media (min-width:576px)
{
    .system-comdev, .system-land, .system-dogs, .system-utility, .system-licensing
    {
        background-size: 30px 30px;
        background-position: 5px center;
        padding-left: 10px;
    }
}

/*Set the icon for DOGS accounts*/
.system-dogs {
    /*Default Tempest icon
    background-image: url(../../Images/DOGS.png);
    */
    /*Remove icon
        background-image: none;
    */
}

/*Set the icon for TAX accounts*/
.system-land
{
    /*Default Tempest icon
    background-image: url(../../Images/LAND.png);
    */
    /*Remove icon
        background-image: none;
    */
}

/*Set the icon for UTILITY accounts*/
.system-utility
{
    /*Default Tempest icon
    background-image: url(../../Images/UTILITY.png);
    */
    /*Remove icon
        background-image: none;
    */
}

/*  Set the icon for COMDEV folders
    NOTE: icons can be customized for each folder category and type
    see below for how this can be done.
*/
.system-comdev {
    /*Default Tempest icon
    background-image: url(../../Images/COMDEV.png);
    */
    /*Remove icon
        background-image: none;
    */
}

/*CUSTOMIZE COMDEV FOLDER ICONS
This rule can be used to customize icons for a specific folder category and type combination.
Spaces are not allowed in css rules thus all spaces in the category name or folder type will be replaced with hyphens
.system-comdev .category-[FOLDER CATEGORY HERE] .type-[FOLDER TYPE HERE]
{
}
*/

/*  Set the icon for LICENSING accounts
    NOTE: icons can be customized for each licensing category
    see below for how this can be done.
*/
.system-licensing {
    /*Default Tempest icon
    background-image: url(../../Images/LICENSING.png);
    */
    /*Remove icon
        background-image: none;
    */
}

/*CUSTOMIZE LICENSING ACCOUNT ICONS
This rule can be used to customize icons for a specific licensing category.
Spaces are not allowed in css rules thus all spaces in the category will be replaced with hyphens
.system-licensing .category-[LICENSING CATEGORY HERE]
{
}
*/





/************************************************************
 BEGINNING OF NEW WEST STYLE.CSS CONTENT
**********************************************************/

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
	font-family: 'Open Sans', sans-serif;
}

/****************************
UTILITIES
****************************/

.util-wrap {
	background-color: #002639;
	padding: 13px 20px;
	height: 46px;	
}

.util-wrap-container {
	max-width: 1215px;
	margin: 0 auto;
}

.util-wrap a {
	color: #DBA950;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	font-size: .875rem;
}

.util-wrap li {
	display: inline;
}

.util-left {
	float: left;
}

.util-wrap .util-left li {
	margin-right: 52px;
}

.util-left > ul > li:nth-child(2) a{
	background-image: url('../img/translate.png');
	background-repeat: no-repeat;
	padding: 4px 0px 4px 35px;

}

.util-left > ul > li:nth-child(2) {
	margin-right: 0;
}

.util-right {
	float: right;
	margin-right: 10px;
}



ul.social-links li {
	margin-left: 12px;
	list-style-type: none;
	display: inline;
}

ul.social-links li.fb a {
	background-image: url('data:image/svg+xml,<svg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2025%2025%27><path%20fill%3D%27%23c99b49%27%20d%3D%27M25%2012.5C25%2019.4%2019.4%2025%2012.5%2025S0%2019.4%200%2012.5%205.6%200%2012.5%200%2025%205.6%2025%2012.5zM13.5%208.2c0-.9.2-1.4%201.3-1.4h1.7l.1-3s-.9-.2-2.4-.2c-3.1%200-4.4%201.9-4.4%203.9v2.8h-2v3.1h2.1v7.8h3.6v-7.8h2.9l.2-3.1h-3.1V8.2z%27%2F><%2Fsvg>');
	background-repeat: no-repeat;
	padding: 4px 13px;
}

ul.social-links li.tw a {
	background-image: url('data:image/svg+xml,<svg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2025%2025%27><path%20fill%3D%27%23c99b49%27%20d%3D%27M25%2012.5C25%2019.4%2019.4%2025%2012.5%2025S0%2019.4%200%2012.5%205.6%200%2012.5%200%2025%205.6%2025%2012.5zm-3.1-4.6c-.6.3-1.3.5-2.1.5.8-.4%201.3-1.1%201.5-2-.7.4-1.4.7-2.2.9-.6-.7-1.6-1.1-2.6-1.1-2%200-3.5%201.6-3.5%203.6%200%20.3%200%20.5.1.8-3-.1-5.6-1.6-7.3-3.7-.3.5-.5%201.1-.5%201.8%200%201.2.6%202.3%201.6%203-.6%200-1.1-.2-1.6-.4%200%201.7%201.2%203.2%202.8%203.5-.3.1-.6.1-.9.1-.2%200-.5%200-.7-.1.4%201.4%201.8%202.4%203.3%202.4-1.2%201-2.7%201.6-4.4%201.6-.3%200-.6%200-.8-.1%201.6%201%203.4%201.6%205.4%201.6%206.5%200%2010.1-5.4%2010.1-10.1v-.5c.7-.4%201.3-1.1%201.8-1.8z%27%2F><%2Fsvg>');
	background-repeat: no-repeat;
	padding: 4px 13px;
}

ul.social-links li.yt a {
	background-image: url('data:image/svg+xml,<svg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2025%2025%27><path%20fill%3D%27%23c99b49%27%20d%3D%27M25%2012.5C25%2019.4%2019.4%2025%2012.5%2025S0%2019.4%200%2012.5%205.6%200%2012.5%200%2025%205.6%2025%2012.5zm-4.7%200c0-5.7%200-5.7-7.8-5.7s-7.8%200-7.8%205.7%200%205.7%207.8%205.7%207.8%200%207.8-5.7zm-9.9-3.1l5.2%203.1-5.2%203.1V9.4z%27%2F><%2Fsvg>');
	background-repeat: no-repeat;
	padding: 4px 13px;
}

ul.social-links li.ig a {
	background-image: url('data:image/svg+xml,<svg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2025%2025%27><path%20fill%3D%27%23c99b49%27%20d%3D%27M12.5%2025C5.6%2025%200%2019.4%200%2012.5c0-.9.1-1.8.3-2.6h6c-.3.8-.5%201.7-.5%202.6%200%203.7%203%206.8%206.8%206.8%203.7%200%206.8-3%206.8-6.8%200-.9-.2-1.8-.5-2.6h6c.2.8.3%201.7.3%202.6C25%2019.4%2019.4%2025%2012.5%2025zm4.9-17.2c-1.2-1.3-3-2.1-4.9-2.1-1.9%200-3.6.8-4.9%202.1H.9C2.7%203.2%207.3%200%2012.5%200c5.2%200%209.7%203.2%2011.6%207.8h-6.7zm-.2%204.7c0%202.6-2.1%204.7-4.7%204.7s-4.7-2.1-4.7-4.7%202.1-4.7%204.7-4.7%204.7%202.1%204.7%204.7z%27%2F><%2Fsvg>');
	background-repeat: no-repeat;
	padding: 4px 13px;
}

ul.social-links li.fb a:hover {
	opacity: 0.8;
}

ul.social-links li.tw a:hover {
	opacity: 0.8;
}

ul.social-links li.yt a:hover {
	opacity: 0.8;
}

ul.social-links li.ig a:hover {
	opacity: 0.8;
}
/****************************
HEADER
****************************/

.header-wrap {
	max-width: 1215px;
	margin: 0 auto;
	margin-top: 10px;
}

.city-logo {
	padding: 0 20px;
}

.mycity-logo img {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	max-width: 290px;
}

.header-image {
	width: 100%;
	height: 250px;
	background-image: url('../img/city-scene.jpg');
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 1px solid #002c53;
	border-top: 1px solid #002c53;
	margin-top: 20px;
}

/****************************
MAIN-NAV
****************************/

nav.main-nav {
	max-width: 1351px;
	margin: 0 auto;
}

nav.main-nav ul {
	margin-top: 10px;
	margin-bottom: 10px;
}

nav.main-nav ul li {
	display: inline;
}

nav.main-nav ul li a {
	border: 1px solid #5C7F95;
	border-right: none;
	padding: 10px 50px;
	text-decoration: none;
	color: #002c53;
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	font-size: .875rem;
	font-weight: 500;
	margin-left: -5px;
}

nav.main-nav ul li a:hover {
	color: #5C7F95;
}

nav.main-nav ul li:first-child a {
	padding-right: 125px;
	margin-right: 4px;
	border-left: none;
}

nav.main-nav ul li:last-child a {
	padding-right: 125px;
	border-right: none;
}

@media screen and (max-width: 1361px){
	
	nav.main-nav ul li:first-child{
		display: none;
	}

	nav.main-nav ul li:last-child{
		display: none;
	}

	nav.main-nav {
		max-width: 996px;
	}

	nav.main-nav ul li:nth-child(2) a{
		border-left: none;
	}
}


/****************************
MOBILE-NAV
****************************/

nav.mobile-nav {
	display: none;
	position: absolute;
    right: 66px;
    top: 210px;
    background-color: #fff;
    border: 1px solid #002c53;
    padding: 20px;
    width: 260px;

}

nav.mobile-nav ul.small-nav {
	list-style-type: none;
	position: relative;
	top: -10px;
}

nav.mobile-nav ul.small-nav li {
	margin-top: 21px;
	border-top: 1px solid #002c53;
}

nav.mobile-nav ul.small-nav li a {
	padding: 10px 0;
	text-decoration: none;
	color: #5B7E91;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	position: relative;
	top: 10px;
}

nav.mobile-nav ul.small-nav li:last-child {
	border-bottom: 1px solid #002c53;
	padding-bottom: 21px;
}

.burger {
	display: none;
}

nav.mobile-nav ul.social-links {
	display: none;
	margin-top: 5px;
	position: relative;
	left: 42px;
}

.active{
	border-bottom: 5px solid #C99A48 !important;
	padding-bottom: 6px !important;
	color: #5C7F95 !important;

}


/****************************
CONTENT
****************************/

.content-wrap {
	max-width: 1215px;
	margin: 10px auto 0 auto;
}

.content-wrap .content-block {
	width: 65%;
	margin: 45px auto 0 auto;
}

h1 {
	margin-bottom: 5px;
    color: #002538;
    font-size: 36px;
}

p {
	font-size: 20px;
    color: #506973;
    margin-bottom: 5px;
}

.btn-primary {
	position: relative;
    /*left: 50%;
    transform: translateX(-50%);*/
    padding: 11px 22px;
    border: 1px solid #C7C7C7;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 5px;
}

.btn-primary:hover {
	color: #5C7F95;
}



/****************************
FOOTER
****************************/

footer {
	background-color: #C99A48;
	width: 100%;
	margin-top: 30px;
}

.footer-wrap {
	max-width: 1215px;
	margin: 0 auto;
	padding: 0 20px;

}

.copyright {
	color: #fff;
	padding: 35px 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
}

.copyright a {
	color: #002B54;
}

.copyright a:hover {
	color: #5C7F95;
}

.copyright span p {
	display: inline-block;
	font-size: 14px;
}

@media screen and (min-width: 1007px){
	nav.mobile-nav {
		display: none;
	}
}

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

	.header-wrap {
		max-width: 305px;
	}

	.city-logo {
		width: 250px;
		margin:0 auto;
	}

	.burger {
		display: block;
		width: 10%;
		position: absolute;
		top: 173px;
		right: 0;
		cursor: pointer;
	}

	.burger i {
		color: #002B54;
		font-size: 25px;
	}

	.mycity-logo img {
		left: 0;
		transform: none;
		float: left;
	}

	.header-image {
		margin-top: 90px;
	}

	nav.main-nav {
		display: none;
	}

	.active {
		border-bottom: none !important;
		padding-bottom: 0 !important;
	}

	.active::before {
		content: url(../img/marker.png);
		position: relative;
	    top: 6px;
	    margin-right: 10px;
	}

}

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

	.util-right{
		display: none;
	}

	nav.mobile-nav ul.social-links {
		display: block;
	}

	nav.mobile-nav {
		right: initial;
		left: 0;
		width: 100%;
		border: none;
		top: 219px;
		height: 100vh;
		z-index: 1000;

	}

	.util-left {
		float: none;
		width: 281px;
		margin: 0 auto;
	}

	.util-left > ul > li:nth-child(1) {
		margin-right: 20px;
	}

	nav.mobile-nav ul.social-links{
		width: 155px;
	    position: relative;
	    left: 50%;
	    transform: translateX(-50%);
	}

	.mycity-logo img {
		width: 220px;
	}

	.burger i {
		font-size: 35px;

	}

	.burger {
		top: 150px;
		right: 10px;
	}

}

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

	.copyright {
		text-align: center;
		display: block;
	}

}

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

	.burger {
		right: 52px;
	}

}

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

	.burger {
		right: 35px;
	}

}

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

	.burger {
		right: 13px;
	}

}