﻿@charset "UTF-8";

/* TYPOGRAPHY */
html {height: 100%;}
body {font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 15px; background: #fff; height: 100%;}
h1, h2, h3 {color: #222; font-family: "Open Sans", sans-serif; font-weight: 700;}
h1 {font-size: 32px; color: #fff; margin: 0;}
h2 {font-weight: 700; font-size: 24px; color: #002e5d;}
h3 {font-size: 16px; color: #002e5d; font-weight: 700; border-bottom: 1px solid #ddd; position: relative; padding: 0 0 10px 0; text-transform: uppercase; margin: 10px 0 25px 0;}
h3:not(#ot-category-title):after {position: absolute; left: 0; bottom: -2px; width: 75px; height: 3px; background: #b7312c; content: "";}
p {margin-bottom: 2em;}
hr {border-color: #ddd; margin: 30px 0;}
img {max-width: 100%;}
div { font-family: "Open Sans" !important }

/* LINKS */
p a {text-decoration: underline;}
a {color: #b7312c;}
a:visited {}
a.btn-primary {}
a.btn-primary:hover {}
.container {position: relative;}

/* Ensures links within meet WCAG 2.1 accessibility standards*/
.a11y-link a {
	text-decoration: underline;
}

/* Exceptions for links with unique styles */
.a11y-link a:is([class*="btn"], .news-item), .a11y-link :is(.breadcrumb, .pill, .sf-social-share, h1, h2, h3, h4, h5, h6) a {
	text-decoration: none;
}

/* Animate */
a, .slide-text, #nav-main ul, a:before, .lock, .lock img, .expand-btn, .expand-btn span {
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}

/* Mobile First */
#map div:first-child{top: 0px;}
.container {position: relative;}
.socialMediaContainer h1 {color:black !important}
#header {border: 0; margin: 0; border-top: 5px solid #b7312c; box-shadow: 0 3px 3px rgba(0,0,0,.07); border-radius: 0; position: relative; z-index: 500;}
#logo {padding: 10px; display: block;border-bottom: 1px solid #ddd;}
#logo span {display: none; font: italic 16px "Lora", sans-serif; color: #999;}
#toggle {background: #b7312c; margin: 15px 10px; padding: 10px;}
#toggle .icon-bar {background: #fff; height: 3px;}

#navbar {}
.affix {position: relative;}
#navbar a {color: #666; border-bottom: 1px solid #ddd;}
#nav-main, #nav-mini {margin: 0 -30px;}
#nav-main ul {display: none;}
#nav-main .nav-path-selected > a {font-weight: 600; color: #444;}
#nav-login .dropdown-menu {padding: 0; border-radius: 0;}

#nav-mini a {padding: 10px 10px 10px 25px; text-transform: uppercase; font-weight: 600; color: #222; background: #f5f5f5;}
#nav-mini a:before {border-top: 5px solid transparent;border-bottom: 5px solid transparent;border-left: 7px solid #eaaa00; position: absolute; left: 10px; top: 15px; content: "";}


#slider {width: 100%; margin: 0 0 30px 0; position: relative;}
#slider .slide {width: 100%;}
.slide .container {background: #eee;}
.slide-text {padding: 0 0 20px 0;}
.slide-text h2 {font-weight: 800; letter-spacing: -.5px; font-size: 26px; text-transform: uppercase;}
.slide-text a {display: inline-block; background:#b7312c; color :#fff; font-weight: bold; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; margin: 0 5px 0 0;}
.slide-text a:hover {opacity: 1; text-decoration: none;}

.slide-item { position: relative; margin: 0 2px; overflow: hidden;}
.slide-item figure {width: 100%;}
.slide-item figure img {width: 100%;}
.slide-item .hover {position: absolute; top: 100%; min-height: 300px; background: rgba(0,0,0,.75); padding: 20px 25px; width: 100%}
.slide-item p {color: #fff; font-size: 13px; font-weight: 400; opacity: 0; position: relative; left: -50px;-webkit-font-smoothing: antialiased; backface-visibility: hidden;}
.slide-item h2 {position: absolute; bottom: 100%; left: 0; width: 100%; color: #fff; font-size: 14px; line-height: 21px; font-weight: 500; background: #1e3764; margin: 0; padding: 5px; opacity: .9;}
.slick-prev:before, .slick-next:before {color: #002e5d;}
.slick-next {right: -17px;}

#pager {display: none;}
#next, #prev {position: absolute; top: 50px; left: 10px; z-index: 500; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,.75);}
#next {left: auto; right: 10px;}

.feature-content {margin: 0 0 40px 0;}
.feature-content h2 {font-size: 18px;}
.feature-content p {font-size: 14px;}

.feature-content a{position: relative; padding: 5px 10px 5px 15px;}
.feature-content a:hover{background: #eee; text-decoration: none;}
.feature-content a:before{border-top: 3px solid transparent; border-bottom: 3px solid transparent;border-left: 5px solid #A4252B; position: absolute; left: 5px; top: 15px; content: "";}

.mt20{margin-top:20px !important;}

.hpg-news h3 {margin: 20px 0 10px 0;}
.news-item {border-bottom: 1px dotted #ddd; padding: 15px 10px 15px 0; display: block;}
.news-item:hover {padding: 15px 5px 15px 5px; background: #eee; text-decoration: none;}

.news-item h3 {border: none; margin: 0 0 5px 0; padding: 0; text-transform: none; font-weight: 500; font-size: 15px;}
.news-item h4 {font-size: 12px; color: #595959; margin: 0;}
.news-item h3:after {display: none;}

#content #page-hdr {position: relative; margin: 20px 0;}
#content #page-hdr hgroup {}
#content #page-hdr hgroup h1 {background: #A4252B; padding: 5px;}
#content header .breadcrumb {background: #1e3764; border-radius: 0; padding: 5px; font-size: 13px;}
#content header .breadcrumb a {color: #fff; opacity: .7;}
#content header .breadcrumb li {color: #fff;}


#content .lead {font-size: 21px;}
#content ul {margin-bottom: 2em;}

.content-feature {width: 100%; overflow: hidden; margin: 0 0 30px 0; border-left: 10px solid #ddd; background: #f8f8f8; padding: 20px 0 0 0;}
.content-feature p {padding: 20px 20px 40px 20px;margin: 0;}
#content .col-sm-4 img {margin-top: 10px;}
#content aside nav {background: #f3f3f3; padding: 15px; margin: 0 0 20px 0;}
#content aside nav.unstyled {background: unset; padding: unset; margin: unset;}
#content aside h3 {font-size: 14px; margin: 0 0 10px 0;}
#content aside h3 a {color: #002e5d;}
#content aside ul {list-style: none; padding: 0; margin: 0 0 0 0;}
#content aside ul a {display: block; padding: 5px 5px 5px 15px; color: #555; font-size: 13px; position: relative;}
#content aside ul a:before {border-top: 3px solid transparent; border-bottom: 3px solid transparent;border-left: 5px solid #A4252B; position: absolute; left: 3px; top: 12px; content: "";}
#content aside ul a:hover {background: #eee; padding: 5px 0 5px 20px; text-decoration: none;}
#content aside li.active > a {font-weight: bold;}
#content aside ul ul {padding: 0 0 0 0; margin: 8px 0 8px 5px; border-left: 4px solid #ccc; display: none;}
#content aside ul ul a:before {display: none;}
#content aside ul ul a:hover {background: #ddd;}
#content aside ul li.active ul {display: block;}

/* Duplicates for content that should not be in an aside semantically */
#content .aside-standin nav {background: #f3f3f3; padding: 15px; margin: 0 0 20px 0;}
#content .aside-standin nav.unstyled {background: unset; padding: unset; margin: unset;}
#content .aside-standin h3 {font-size: 14px; margin: 0 0 10px 0;}
#content .aside-standin h3 a {color: #002e5d;}
#content .aside-standin ul {list-style: none; padding: 0; margin: 0 0 0 0;}
#content .aside-standin ul a {display: block; padding: 5px 5px 5px 15px; color: #555; font-size: 13px; position: relative;}
#content .aside-standin ul a:before {border-top: 3px solid transparent; border-bottom: 3px solid transparent;border-left: 5px solid #A4252B; position: absolute; left: 3px; top: 12px; content: "";}
#content .aside-standin ul a:hover {background: #eee; padding: 5px 0 5px 20px; text-decoration: none;}
#content .aside-standin li.active > a {font-weight: bold;}
#content .aside-standin ul ul {padding: 0 0 0 0; margin: 8px 0 8px 5px; border-left: 4px solid #ccc; display: none;}
#content .aside-standin ul ul a:before {display: none;}
#content .aside-standin ul ul a:hover {background: #ddd;}
#content .aside-standin ul li.active ul {display: block;}
/* End "Duplicates for content that should not be in an aside semantically" */
/* Styles to match semantic components to existing insurance page */
#content .aside-standin .no-hidden-children ul {display: list-item;}
#content .aside-standin .no-hidden-children a::before {content: unset;}
#content .aside-standin .no-hidden-children ul a::before {display: block; content: ""}
#content .aside-standin .no-hidden-children a {display: unset; padding: unset; color: unset; font-size: 14px; position: relative;}
#content .aside-standin .no-hidden-children a:hover{padding:unset; background-color: unset;}
#content .aside-standin .no-hidden-children ul a {display: block; padding: 5px 5px 5px 15px; font-size: 13px;}
#content .aside-standin .no-hidden-children ul a:hover {padding: 5px 0 5px 20px; background: #eee;}
#content .aside-standin .no-hidden-children ul {padding: 0; margin: 0; border-left: none;}

#find-agent {background: url('../img/bkg-agent.jpg') 0 0 no-repeat; background-size: cover; padding: 15px; color: #fff; font-size: 13px;}
#content #find-agent h3 {border-color: rgba(0,0,0,.2); margin-bottom: 30px;}
#find-agent .form-group {margin-bottom: 5px; opacity: .7;}
#find-agent .form-control {border: 1px solid rgba(0,0,0,.5); font-size: 12px; padding: 5px; height: 30px;}
#find-agent button {background: #002e5d; color: #fff; text-transform: uppercase; font-weight: bold;}


.expand-btn {text-decoration:none !important;   color:#fff !important; margin-bottom:10px;margin-top: 10px;line-height: 1.1;display:block; font-size:18px;padding: 15px; border-left: 10px solid #A4252B; background: #27417A; position: relative; text-transform: uppercase; font-weight: 300; letter-spacing:1px; color: #fff;}
.expand-btn.collapsed:hover {background: #1e305a; cursor: pointer;}
.expand-btn.collapsed {padding: 15px; border-left: 10px solid #A4252B; background: #27417A;}
.expand-btn.collapsed span {transform: rotate(0); color: #fff;}
.expand-btn span {position: absolute; right: 15px; top: 16px; transform: rotate(180deg);}
.expand {padding: 10px 0;}

#footer-cta {text-align: center; background: url(../img/bkg-cta.jpg) center center no-repeat #eee; padding: 60px 30px; margin: 60px 0 0 0;border-top: 1px solid #ccc;}
#footer-cta img {display: block; margin: 0 auto 10px auto;}
#footer-cta a {display: block; background: #19326C; color :#fff; font-weight: bold; text-transform: uppercase; padding: 10px 15px; border-radius: 4px; margin: 0 0 10px 0; opacity: .9;}
#footer-cta a:hover {opacity: 1; text-decoration: none;}

#footer {background: #333; padding: 20px 0 0 0; border-top: 5px solid #A4252B;}
#footer h3 {color: #fff; margin: 30px 0 10px 0; padding: 0; border: 0;}
#footer h3:after {display: none;}
#footer ul {list-style: none; padding: 0; margin: 0;}
#footer a {color: #fff; opacity: .7; font-size: 13px; text-decoration: underline;}
#footer ul a {text-decoration: none;}
#footer a:hover {opacity: 1;}
#footer p {margin: 0 0 10px 0; color: rgba(255,255,255,.7); font-size: 13px;}
#footer p.copy {text-align: center; margin: 0; padding: 20px 0; background: #222; border-top: 1px solid #222; margin: 30px 0 0 0; font-size :11px;}
#footer p.copy a {text-decoration: none;}
 .lock {display: none;}
 .attention{color: #b7312c;}

.tags-container{position: relative; height: 300px; overflow:hidden}
.tags-gradient { height: 20px; background-image: linear-gradient( to bottom, transparent, #fff ); position: absolute; bottom: 0px; width: 100%;}
.cta-wrapper a{background: #002e5d; color: #fff; width:100%; text-decoration: none; border-style:none;}
.cta-wrapper a:hover {background-color: #002e5d}
.cta-btn-only{border-style:none;}
.cta-btn-only{margin-top: 15px;}
.title-image-caption-cta {background-size: cover; margin-top: 20px; margin-bottom: 20px; border-style: none}
.title-image-caption-cta a{background: #002e5d; color: #fff; width:100%; text-decoration: none; border-style:none;}
.title-image-caption-cta a:hover{background-color:#002e5d}
.title-image-caption-cta h2{margin-top:0px}
.title-image-caption-cta .row{padding: 20px;}
.title-image-caption-cta .cta-description{margin-bottom:15px}
.tags-view-less{display:none;}
/* Default Styling for Sitefinity forms*/
div.sf-fieldWrp  label{ vertical-align: top;margin-right: 1%}
div.sf-fieldWrp textarea{ min-height: 120px; min-width: 400px}
div.sf-fieldWrp button[type="submit"] {margin-left: 80px;background: #002e5d;color: #fff;text-transform: uppercase;font-weight: bold;}

/* UFG Custom doc list*/
.ufgDoclist td{ vertical-align: middle !important; padding: 1% 1% !important;}
.ufgDoclist a {width: 100%; margin-top: 3%}
.doc-list-link {color: white; background: #002e5d;}
.doc-download-link { color: black; background: lightgray; }
.btn.doc-list-link:hover, .btn.doc-list-link:focus { color: #e6e6e6; }
.doc-download-link:hover, .doc-download-link:focus { color: #fff; }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#header .container > .navbar-header { height: 120px }
#logo {border: 0;}
#find-agent { background-size: 120%;}
#navbar {border-top: 1px solid #ddd; background: #f7f7f7; position: relative; z-index: 50; width: 100%; box-shadow: inset 0 2px 3px rgba(0,0,0,.05);}
#navbar a {border: 0;}

#nav-main {width: 100%; text-align: left; margin: -1px 0 0 0;}
#nav-main a {padding: 15px 8px; text-transform: uppercase; font-size: 13px;}
#nav-main > li:focus-within > a,
#nav-main > li:hover > a {background: rgba(0,0,0,.06);}
#nav-main .nav-path-selected > a {font-weight: 400; color: #fff; background: #002e5d;}
#nav-main .nav-path-selected:focus-within > a,
#nav-main .nav-path-selected:hover > a {background: #002e5d;}
#nav-main li:focus-within ul,
#nav-main li:hover ul {display: block;}
#nav-main li ul {width: 200px; border-top: 5px solid #002e5d; position: absolute; left: 0; top: 100%; padding: 0; margin: 0; list-style: none; background: #fff; box-shadow: 2px 2px 4px rgba(0,0,0,.2);}
#nav-main li ul a {text-transform: none; padding: 7px 10px 7px 15px; display: block;}
#nav-main li ul a:hover {padding: 7px 5px 7px 20px; background: rgba(0,0,0,.05); text-decoration: none;}

#nav-mini {position: absolute; left: 15px; top: -55px; margin: 0;}
#nav-mini a {background: none; font-size: 14px; padding: 10px 5px 10px 22px;}
#nav-login , #policyHolderLogin  { background: #002e5d !important;  font-weight: 700;  width: 110px; /*padding: 15px 15px 15px 30px;width: 130px;*/}

#nav-main li ul.nav-child-custom {
	border-top: 1px solid #eeeeee;
	position: unset;
	box-shadow: none;
}

#policyHolderLogin > a {
	color: #fff;
}
#policyHolderLogin {border-right: solid 2px white !important; margin-left:2%}
#nav-login > a {color: #fff;  }

#nav-login .agentlogin { line-height: 16px !important; padding: 10px 33% 8px 33% !important; }
#nav-mini a:hover:before {left: 13px; border-left-color: #A4252B;}
#nav-mini a:hover {color: #A4252B; background: #f4f4f4;}
#nav-login .dropdown-menu {top: 102px; right: 0; left: auto;}

#nav-login a:hover {color: #fff;}

 .lock {display: block; width: 35px; height: 50px;position: absolute; left: 10%; top: 0; z-index: 9999;margin-right: 20px;}
 .lock img {position: absolute; left: 0px; top: 12px; width: 20px; opacity: .5;}
#nav-login:hover .lock-top {top: 10px; transition-delay: .15s; opacity: 1;}
#nav-login:hover .lock-btm {top: 15px; transition-delay: .15s; opacity: 1;}

#slider {overflow: hidden;}
.slide .container {background: none;}
.slide img {position: absolute;}
.slide-text {background: none; padding: 35px 0; width: 50%;}
.slide-text h2 {font-size: 40px;}
.slide-text a:hover {transform: scale(1.05,1.05) rotate(0.01deg); box-shadow: 4px 4px 1px rgba(0,0,0,.1);}

.feature-content {margin: 0 0 10px 0;}

#next {top: 150px; right: 20px;}
#prev {top: 150px; left: 20px;}

#content #page-hdr hgroup {position: absolute; left: 40px; bottom: 30px; box-shadow: 5px 5px 5px rgba(0,0,0,.2);}
#content #page-hdr hgroup h1 {background: #A4252B; padding: 10px;}
#content header .breadcrumb {background: #1e3764; border-radius: 0; padding: 5px 10px; font-size: 13px; margin: 0;}
#content header .breadcrumb a {color: #fff; opacity: .7;}

#footer-cta a {display: inline-block; margin: 0 2px;}

.title-image-caption-cta {background-size: cover;}
.title-image-caption-cta .col{min-height: 80px;}
.title-image-caption-cta .cta-vertical-center {position: absolute; top: 50%; transform: translatey(-50%);}
.title-image-caption-cta .h2-description {width:100%}
.title-image-caption-cta .action {width:80%}
.title-image-caption-cta .cta-description{margin-bottom:0px}
.title-image-caption-cta .row{padding: 12px;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.report-claim-phone-wrapper { border-right: thin solid #ddd; padding-right:20px; }
	#header .container > .navbar-header { height: auto }
	#navbar.affix {position: fixed; top: 0; box-shadow: 0 3px 4px rgba(0,0,0,.2);}
	#fix-affix {min-height: 50px;}

	#logo {padding: 20px 0;}
	#logo span {display: inline-block; border-left: 1px solid #ddd; margin-left: 10px; padding: 5px 0 5px 10px;}
	#nav-main a {padding: 15px 20px;}
	#nav-mini {top: -65px; right: 15px; left: auto;}
	#nav-mini #nav-login a {bottom: -114px;}
	#nav-login .dropdown-menu {top: 113px;}

	#nav-main li ul {display: block; opacity: 0; visibility: hidden; top: 95%;}
	#nav-main li:focus-within ul,
	#nav-main li:hover ul {top: 100%; opacity: 1; visibility: visible;}

	#nav-main li ul.nav-horizontal {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: min-content;
	}

	#nav-main li ul.nav-child-custom {
		border-top: 1px solid #eeeeee;
		position: unset;
		box-shadow: none;
	}

	#nav-login , #policyHolderLogin  {  width: 140px;}

	#policyHolderLogin {margin-left:3%}
	.lock {left: 15%;}

	.slide-text {background: none; padding: 50px 0; width: 50%;}
	.slide-text h2 {font-size: 52px; letter-spacing: -1px;}
	.slide-text p {font-size: 18px;}
	.slide-text a {padding: 10px 15px;}

	#footer-cta {background-size: cover;}

	#content #page-hdr hgroup h1 {font-size: 42px;}
	.ufgDoclist a {width: 45%;margin-top: 0%}
}


/* Getting the Zindex to 45 so that it doesn't compete with navbar'*/
.backToTop {z-index: 45;cursor: pointer;position: relative}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	#nav-main a {padding: 15px 25px;}
	#policyHolderLogin {margin-left:14.5%}

	#slider {height: 450px; overflow: hidden;}
	.slide img {position: absolute; width: 100%;}
	.slide-text {background: none; padding: 75px 0 125px 0; width: 49%;}
	.cycle-slide-active .slide-text {}
	.slide-text h2 {font-size: 68px; line-height: 66px; margin-bottom: 20px;}

	#next, #prev {padding: 17px 20px; background: rgba(0,0,0,.1); font-size: 18px; top: 200px; text-shadow: 0 0 5px rgba(0,0,0,.1); opacity: 0;}
	#next {right: 10px;}
	#prev {left: 10px;}
	#slider:hover #next {opacity: .8; right: 20px;}
	#slider:hover #prev {opacity: .8; left: 20px;}
	#slider:hover #next:hover, #slider:hover #prev:hover {opacity: 1;}

	#content .col-sm-9 {padding-left: 50px;}
}

@media (min-width: 1400px) {
	#nav-mini a {padding: 10px 10px 10px 25px; font-size: 15px;}

	#slider {height: 550px;}
	#next, #prev {top: 250px;}
	.slide-text {padding: 100px 0 125px 0;}
}


#blogufghome{float:right; background: #002e5d !important; color:#fff !important;  font-weight: 700;  /*padding: 15px 15px 15px 30px;width: 130px;*/}
#blogufghome a{color:#fff !important;}
.text-2x{font-size:20px !important;}
.mar-top{margin-top:12px;}
.mar-btm{margin-bottom:12px;}
.sidebarpan{border:1px solid #ddd;padding:16px 12px 16px 12px; border-top:4px solid #b7312c; margin-top:20px;}
.blog #content .col-sm-9{padding-left:15px;}
.blog-item-panel{border:1px solid #ddd; border-radius:0px; position:relative; }
.blog-featured{background-color:#009cde; padding:6px 12px 6px 12px; color:#fff; width:125px;position:absolute; left:0px; top:0px;}
.blog-content-container{padding:15px 25px; font-size:15px;}
.blog-content-container h3{margin-bottom: 10px !important;}
.blog-content-container h3 a {font-size: 14px !important; color: #002e5d !important; font-weight: 700 !important; border:none;}
.blog-content-container h3 a:hover {text-decoration:none !important;}

.blog-list-unstyled li{list-style-type:none !important; border-bottom:1px solid #ddd; padding-bottom:6px;padding-top:4px;}
.blog-list-unstyled a{padding-left:0px !important;}
.blog-list-unstyled a:before{display:none;}
.blog-list-unstyled li:last-child{border-bottom:none;}
.blog-list-unstyled .nav-path-selected{font-weight:bold}

.feature-content .blog-list-unstyled a:before{display:none;}
.pill {background-color:#ddd; padding:3px 6px 3px 6px; float:left; display:block; margin-right:4px; margin-bottom:4px;}
.pill a{font-size:13px !important; color:#555 !important;}
.text-sm{font-size:11px;}
.search-container{background-color:#f3f3f3; padding:16px 12px 16px 12px; margin-bottom:20px}
.btn-blog-search{border-left:0px;}
.btn-blog-search{color:#999 !important;}
.btn-blog-search button:hover{background-color:#fff;}
.no-hover button:hover{background-color:#fff;}

.blog-post-title h1 {font-size: 24px; color: #002e5d; font-weight: 700; border-bottom: 1px solid #ddd; position: relative; padding: 0 0 10px 0; text-transform: uppercase; margin: 10px 0 10px 0;}
.blog-post-title h1:after {position: absolute; left: 0; bottom: -2px; width: 75px; height: 3px; background: #b7312c; content: "";}

.blog-secondary-breadcrumb .breadcrumb {background: #1e3764 !important; border-radius: 0 !important; padding: 5px !important; font-size: 13px !important;margin-bottom:0px !important;}
.blog-secondary-breadcrumb .breadcrumb a {color: #fff !important; opacity: .7 !important;}
.blog-secondary-breadcrumb .breadcrumb li {color: #fff !important;}

.blog-search-container h3{margin-bottom:0px;}
.blog-search-container h3 a {font-size: 14px !important; color: #002e5d !important; font-weight: 700 !important; border:none; margin-bottom:8px !important;}
.blog-search-container h3 a:hover {text-decoration:none !important;}

/* Marketing boxes with colored backgrounds */
.background-row {padding-left: 0; padding-right: 0;}
.gray-box {padding: 15px; box-sizing: border-box; clear: both; overflow: hidden; background-color: #f3f3f3;}
.green-box {padding: 15px; box-sizing: border-box; clear: both; overflow: hidden; background-color: #B7BF11;}
.blue-box {padding: 15px; box-sizing: border-box; clear: both; overflow: hidden; background-color: #002E5D;}
.light-blue-box {padding: 15px; box-sizing: border-box; clear: both; overflow: hidden; background-color: #009CDE;}
.purple-box {padding: 15px; box-sizing: border-box; clear: both; overflow: hidden; background-color: #84329B;}
.red-box {padding: 15px; box-sizing: border-box; clear: both; overflow: hidden; background-color: #B7312C;}
.yellow-box {padding: 15px; box-sizing: border-box; clear: both; overflow: hidden; background-color: #EAAA10;}
.mt-20 {margin-top: 20px;}
.mb-20 {margin-bottom: 20px;}

/* Find an agent sidebar container */
.sidebar-box {padding: 15px 0; font-size: 13px; box-sizing: border-box; clear: both; overflow: hidden; background-color: #f3f3f3;}
.white-cta .btn-primary {background: #fff; border: solid 1px #ccc; color: #333;}
.white-cta .btn-primary:hover {background: #f2f2f2;}

.nav-sec-subheader {
	padding-top: 10px;
}

.nav-sec-subheader > a,
.nav-sec-subheader > a:hover,
.nav-sec-subheader > a:active,
.nav-sec-subheader > a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #333333;
	font-size: 14px;
	line-height: 18px;
}

/***
 Changes for AB Testing Login
*/

/* Renamed Buttons */

#navbar .login-nav-button a {
	text-transform: capitalize;
}

@media (min-width: 768px) {
	#navbar .login-nav-button {
		max-width: 113px;
		max-height: 50px;
	}

	#navbar .login-nav-button a {
		background: #002e5d;
		font-weight: 700;
		color: #fff;
		padding: 10px 5px;
		line-height: 15px;
	}

	#navbar .login-nav-button a span {
		max-width: 100px;
		display: inline-block;
	}

	#navbar .login-nav-button a:hover {
		background: #002e5d;
	}

	#navbar #policyholder-login.login-nav-button {
		margin-left: 2%;
	}

	#navbar #policyholder-login.login-nav-button a {
		border-right: solid 2px white;
	}
}

@media (min-width: 992px) {
	#navbar .login-nav-button {
		max-width: fit-content;
	}

	#navbar .login-nav-button a {
		padding: 10px 20px;
	}

	#navbar #policyholder-login.login-nav-button {
		margin-left: 3%;
	}
}

@media (min-width: 1200px) {
	#navbar .login-nav-button {
		white-space: nowrap;
	}

	#navbar .login-nav-button a {
		padding: 18px 25px;
	}

	#navbar .login-nav-button a span {
		max-width: fit-content;
	}

	#navbar #policyholder-login.login-nav-button {
		margin-left: 8.5%
	}
}

/* Dropdown */

@media (max-width: 767px) {
	#navbar #loginDropdown > a {
		display: none;
	}

	#navbar #loginDropdown ul {
		display: block;
		list-style: none;
		padding: 0px;
	}

	#navbar #loginDropdown ul li {
		border-bottom: 1px solid #ddd;
	}

	#navbar #loginDropdown ul li a {
		border-bottom: none;
		display: block;
		padding: 10px;
		padding-left: 15px;
	}

	#navbar #loginDropdown ul li a:hover {
		text-decoration: none;
		background-color: #eee;
	}

	#navbar #loginDropdown span,
	#navbar #loginDropdown ul li:last-child {
		display: none;
	}
}

@media (min-width: 768px) {
	#navbar #loginDropdown > a {
		display: block;
		background: #002e5d;
		font-weight: 700;
		color: #fff;
		padding: 18px 5px;
		line-height: 15px;
		height: 50px;
		cursor: pointer;
	}

	#navbar #loginDropdown:hover > a {
		background: #002e5d;
	}

	#navbar #loginDropdown li a {
		font-weight: 700;
		border-bottom: 1px solid #ddd;
	}

	#navbar #loginDropdown span {
		display: block;
		font-weight: normal;
		margin: 5px 0px;
	}
}

@media (min-width: 992px) {
	#navbar #loginDropdown {
		margin-left: 23%;
	}

	#navbar #loginDropdown > a {
		padding: 18px 20px;
	}

	#navbar #loginDropdown ul {
		width: 250px;
		margin-left: -170%;
	}

	#navbar #loginDropdown ul a {
		padding: 15px;
	}
}

@media (min-width: 1200px) {
	#navbar #loginDropdown {
		margin-left: 31%;
	}

	#navbar #loginDropdown > a {
		padding: 18px 25px;
	}

	#navbar #loginDropdown ul {
		min-width: 350px;
		margin-left: -240%;
	}
}
