@charset "utf-8";

/* Chatbot */

@import url("https://dmvnv2.secure.force.com/chatbot/resource/ChatStyles");
@import url("https://fonts.googleapis.com/css?family=Work Sans");

iframe#chatFrame {
z-index: 20;   /* raises bot above main menu */
bottom: 9rem;  /* raises bot above the recaptcha flag on pages with forms */
}

/* original from Abbi  - Note in the original styles.css file, breadcrumps was changed to breadcrumbs
h1 {font:700 6rem/1.02 "Roboto",sans-serif}
@media only screen and (min-width: 768px){h1{font-size:8rem;line-height:1.025}} 
h1{font:700 6rem/1.033 "Roboto",sans-serif}
h2{font:700 4rem/1.125 "Roboto",sans-serif}
h3{font:italic 500 2.8rem/1.25 "Lora",serif}
h4{font: 500 2rem/1.39 "lora",sans-serif}
h5, h6{font:italic 500 1.8rem/1.39 "Lora",serif} */

h1{font:700 6rem/1.5 "Roboto",sans-serif}
@media only screen and (max-width: 575px){h1 {font-size: 5rem;}}
h2{font:700 4rem/1.5 "Roboto",sans-serif}
div.hero__alert h2 {font:italic 500 2.8rem/1.5 "Lora",serif}
h3{font:italic 500 2.8rem/1.5 "Lora",serif}
h4, h2.h2smalltext{font: 500 2.25rem/1.5 "lora",sans-serif}
h5, h6{font:italic 500 1.8rem/1.5 "Lora",serif}

a:focus {color: #1c9ed1;}
a:hover {color: #1c9ed1;}
.spec-card__text a:focus {color: #1c9ed1;}
.link-underline a {text-decoration:underline; font-weight:400}
.link-underline a:focus {text-decoration: none; font-weight:400;}
.link-underline a:hover {text-decoration: none; font-weight:400;}

.border-title-12px {padding-bottom: 10px; margin-bottom: 12px}
.bordered-title--red:after{background-color:#c00}
.border-777 {border: 1px solid #777}

.hero__image-300px {width: 300px; margin: auto; display: block} /* place this on the <img>, not the <figure> */

.navy-waves-bg-100 {background-size: 100% 100%}

.spec-card__title {font-size: 2.1rem;}

/* shows list bullets in inverse sections */
.inverse .spec-card__text .styled-list li:after {border-left-color: #ffffff !important}

th, td {vertical-align: top;}

/* layout stuff */
body {font-weight: normal; line-height: 1.5}
.clear {clear: both;}
@media only screen and (max-width: 767px){.clear767{clear:both}} /* used in <ul> below floated figure */
.clearfix::after {content: ""; clear: both; display: table;}
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.bold {font-weight: bold;}
.bold-normal {font-weight: 400;}
.bold-red {font-weight: bold; color: #c00}
ul {margin-bottom: 24px; padding-left: 1rem}
ol {margin-bottom: 24px; padding-left: 3rem}
li {margin-bottom: 0.25em}
li.details {margin-bottom: 0}

/* lists nested into a styled list */  
.styled-list ol, .styled-list ul {margin: 0.25em 0;}
.styled-list ol li:after, .styled-list ul li:after {border-left: none;}
.styled-list ul {padding-left: 24px; list-style-type: circle;}

@media only screen and (min-width: 768px){.show-in-mobile{display: none}}

figure {margin-bottom: 1em}
div#content-wrapper figure {text-align: center} /* half-accordion blank space on load */
div#content-wrapper figure img {max-width: 350px; margin-top: 36px}
.dmvform, .smallfont, table.smallfont th, table.smallfont td {font-size: 1.5rem}
.dmvform, .marginleft1 {margin-left: 1rem;}
.dmvform a {font-size: 1.8rem}
.dmvform li, p.dmvform {margin-bottom: 14px}
.fullfont {font-size: 1.8rem}
.marginleft2 {margin-left: 2rem;}
.marginleft3 {margin-left: 3rem;}
.marginbottom0 {margin-bottom: 0;}
.marginbottom025em {margin-bottom: 0.25em}
.marginbottom12px {margin-bottom: 12px}
.marginbottom24px {margin-bottom: 12px}
.marginbottom1rem {margin-bottom: 1rem}
.marginbottom3rem {margin-bottom: 3rem}
.margintop3rem {margin-top: 3rem}
.margintop6rem {margin-top: 6rem}
.margintop12px {margin-top: 12px}
.margintop0 {margin-top:0;}
.padding0 {padding: 0}
.padding1rem {padding: 1rem;}
.padding3rem {padding: 3rem;}
.paddingbottom0 {padding-bottom: 0}
.paddingtop1em {padding-top: 1em}
hr {height:2px;border-width:0;color:#1c9ed1;background-color:#1c9ed1; margin:12px 0}
hr.red {height:2px;border-width:0;color:#CC0000;background-color:#CC0000; margin:12px 0 24px 0}
.pointer {cursor:pointer}

.w20 {width: 20%; float: left}
.w25 {width: 25%; float: left}
.w33 {width: 33%; float: left}
.w39 {width: 39%; float: left}
.w45 {width: 45%; float: left}
.w49 {width: 49%; float: left}
.w60 {width: 60%; float: left}
.w74 {width: 74%; float: left}
.w79 {width: 79%; float: left}
.w100 {width: 100%}
.floatright {float: right}

@media only screen and (max-width: 767px){.w20, .w25, .w33, .w39, .w45, .w49, .w60, .w74, .w79 {width: 100%;}}

.w10news {width: 10%; float: left;}
@media only screen and (max-width: 767px){.w10news {width: 30%; margin-bottom: 2rem}}
.w80-centered {width: 80%; margin: 0 auto}

.show-at-1100 {display: none;}  /* show and hide at 1100 pixels, used to hide wide tables and show PDF link instead */
@media only screen and (max-width: 1099px) {.hide-at-1100 {display:none} .show-at-1100{display: block}}

/* links in place of hero image. overriding styles.css 
@media only screen and (max-width: 767px){.hero__links{margin-top:4rem}}
@media only screen and (min-width: 768px){.hero__links{width:346px}} */
.hero__links .link-with-arrow:first-child{margin-bottom:0rem}
@media only screen and (min-width: 768px){.hero__links .link-with-arrow:first-child{margin-bottom:0rem}}
.hero__links .link-with-arrow {padding: 3rem 0 3rem 1rem}

/*.triangle-line-bottom:after {content:'';position:absolute;bottom:0;left:0;display:block;width:100%;height:7px;background:url("../img/common/triangle-line.svg") 50% 50% repeat;background-size:auto}*/
 .triangle-line-bottom {display:block;width:100%;height:7px;background:url("../img/common/triangle-line.svg") 50% 50% repeat;background-size:auto; margin-top:4em}
@media only screen and (min-width: 768px){.triangle-line-bottom{margin-top:6em;}}

figcaption, .vid-caption {font-size: 1.5rem; font-style: italic; padding: 4px}
.vid-caption {text-align: center; font-weight: bold;}

.imgleft {float:left; margin: 0 2em 1em 0;}
/* text-align, font and inner div margin are for captions. */
.imgright {float:right; margin: 0 0 1em 2em;}
.imgleft div, .imgright div {margin-bottom:0.25em} 
@media only screen and (max-width: 767px){.imgleft, .imgright {width: 100%;}}
.img-inline-right {margin: 0 0 0 2em; height: 1.25em; width: auto;}
.img-inline-left {float:left; clear:both; margin: 0 2em 0 0; height: 2em; width: auto;}

.icon-header {vertical-align: text-bottom; height: 40px}
.icon-left {float: left; margin-right: 6px; height: 40px}
.icon-right {float: right; margin-left: 6px; height: 40px}


/* tables */
caption {font-weight: 700; font-size: 1.25em; padding-bottom: 0.5em;}
table {margin-bottom: 3rem; border-collapse: collapse}
.custom-table, .custom-table tr, .custom-table td, .custom-table th {font-size: 1.8rem; font-weight: 400;}
.custom-table th {padding: 10px 20px; font-weight: 700; background-color: #003e67; color: #fff;}
@media only screen and (max-width: 767px){.custom-table {font-size: 1.5rem; table-layout: fixed; width:100%;}}
@media only screen and (max-width: 767px){.table-small-width-100 {table-layout: fixed; width:100%;}}

.graybg {background-color: #eee;}  /* used in fuel.htm */
.table-gray th, .table-gray td {
        padding: 4px 2px; 
        border: 1px solid #ccc; 
        }
.table-gray th {color: #fff; background-color: #003E67}

.grayshadow {-webkit-box-shadow: 5px 5px 5px #888888; box-shadow: 5px 5px 5px #888888; border-collapse:separate;}

/* license plate fee table */
.plate-table {width: 100%; margin:0 4rem 24px 0; text-align: center; border-collapse: collapse;}
@media only screen and (min-width: 768px){
.plate-table {width:25%; float:left}
.plate-table-forms {width:40%}
.plate-table caption {font-size: 1em; padding-bottom: 0;}
}

.plate-table th, .plate-table td {padding: 2px; font-weight: 400;}
.plate-table th {padding-top: 0; border-bottom: 1px solid #777;}

.table-school {width:100%; max-width:778px;margin:0 auto;border-spacing:0}
.table-school tr:nth-child(even) {background-color: #E8F5FA;}
.table-school th {padding: 10px 0; color: white; background-color: #003e67}
.table-school td {padding: 10px;}
.table-school-act {font-size: 1.7rem; line-height:1.39; width: 100%; margin: -5px 0 0 0;}
.table-school-act tr:nth-child(even) {background-color: transparent;}
/*.table-school-act th {padding: 0; height: 1px; font-size: 1px; overflow:hidden; background-color: transparent}*/
.table-school-act th {padding: 2px; background-color: transparent; color: #003e67; border-bottom: 1px solid #777}
.table-school-act td {padding: 0;}

/* full width accordion */
.accordion-full .link-with-arrow {height:auto; padding:20px;}
.accordion-full .link-with-arrow:after{transform:translateY(-50%) rotate(90deg)}
.accordion-full.active .link-with-arrow:after{transform:translateY(-50%) rotate(-90deg)}
h3.accordion-full {font: 700 1.8rem "Roboto",sans-serif; line-height: 1.5;}
h3.accordion-full.active {background-color: #21D4FD;}
h3.accordion-full span {width: 100%;}
h3.accordion-full img {max-width: 80px; margin-right: 2rem;}
div.accordion-full-container {margin-top: 24px}
/* div.accordion-full-container > :first-child {border-top: 1px solid #21D4FD} */
.border-top-blue {border-top: 1px solid #21D4FD}

.accpanel {max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; padding: 0 20px;
  box-sizing: border-box;}
.accpanel  > :last-child {margin-bottom:20px}

.accpanel img.accpanel-img-plate {display:block; margin: 0 auto 20px auto; width: 100%;}

.accpanel div.vet-plate-left {text-align: center; padding-bottom: 14px}

@media only screen and (min-width: 576px){
.accpanel img.accpanel-img-plate {width:75%;}
}
@media only screen and (min-width: 768px){
.accpanel img.accpanel-img-plate {width:35%;}
.accpanel img.accpanel-img-left {float: left; width: 25%;}
.accpanel div.vet-plate-left {float: left; width: 30%;}
.accpanel div.accpanel-div-right {float: right; width: 73%;}
.accpanel div.vet-plate-right {float: right; width: 68%}
}
@media only print {.accpanel img.accpanel-img-plate {width:50%;}
.accpanel img.accpanel-img-left {float: left; width: 25%;}
.accpanel div.accpanel-div-left {float: right; width: 73%;}
}
.accpanel-spacer {height:20px;}

/* used in licence-grid carousel. Not necessary in feature carousel */
.click-or-swipe {margin-top: 1rem; height: 26px; background: url('../img/icons/click-or-swipe.svg') no-repeat top center; background-size: 225px 25px; margin-bottom: 24px}
@media only screen and (min-width: 768px){.click-or-swipe {display:none;}}

/* images in carousels */
.feature img, .license-card__inner img, .license-action-card img {display:block; margin: 0 auto 24px auto}
.license-action-card img {margin-bottom: 14px}

/* .page-header__logo */
#searchbox input {color: #FFFFFF; box-shadow: none}

/* position Google Translate pulldown if used below DMV logo on main menu
.page-header .lang__list li {height: 40px; padding: 8px 0 0 0;} 
@media only screen and (max-width: 767px){.page-header .lang__list li {padding: 13px 0 0 0;}}
* hide info below pulldown *
.goog-logo-link {display: none;} 
div.skiptranslate.goog-te-gadget {color: #003E67} */

/* removes excess 10px between items in main menu on mobile */
@media only screen and (max-width: 767px){.main-nav .sub-menu {padding-bottom: 0;}}

/* blank page section */
.section--top-blank {padding: 100px 0 0 0}
.section--top-blank h1 {margin-bottom: 40px}
.section--top-blank u1, .section--top-blank ol {margin-bottom: 24px}

/* hide repetitive h3 in details accordion on mobile */
@media only screen and (max-width: 767px){.details-content h3 {display: none;}}

/* form labels. Span is used in original styles.css */
label.title{font-weight:bold;line-height:1.11;color:#003e67;text-transform:uppercase}
.custom-form__item.error label.title{color:#f18f3a}
.custom-form--middle .custom-form__item label.title{font-size:14px}
.custom-form--small .custom-form__item label.title{font-size:14px}
.custom-form{margin-bottom: 24px}

input.inputbutton, button.inputbutton, a.inputbutton {margin-top: 24px; padding: 16px 20px 17px; background-color: #003e67; color: white; border: 1px solid #003e67; font-weight: bold}
input.inputbutton:hover, button.inputbutton:hover, a.inputbutton:hover {background-color: white; color: #003e67; border: 1px solid #21D4FD; cursor: pointer}

input:focus {box-shadow: 0 0 10px #21d4fd;}
select:focus {box-shadow: 0 0 10px #21d4fd;}
textarea:focus {box-shadow: 0 0 10px #21d4fd;}
a.link-with-arrow:focus {box-shadow: 0 0 10px #21d4fd;}

/* used in full-width forms outside of .custom-form contact_us.htm */
.fields {margin-top:0.25em; width:49%; float:left;}
.fields input, .fields textarea {margin-top:12px; padding: 16px 20px 17px; line-height: 1.39; border: 1px solid #003e67; width: 100%}
@media only screen and (max-width: 767px){.fields {width:100%;}}
/* placing two inputs side by side*/
@media only screen and (min-width: 768px){.fieldsleft {float:left; width:48%; margin: 0;} .fieldsright {float:right; width:48%; margin: 0;}}
@media only screen and (max-width: 767px){.fieldsleft {margin-bottom: 10px;}}
/* link to top*/
.bottom-of-td {font-weight: normal; margin-top:2em; float: right}

/* tabs */
.tab {
  overflow: hidden;
}
/* Style the buttons */
.tab button {
  float: left;
  transition: 0.3s;
  font-size: 17px;
  background-color: white; 
  color: #003e67; 
  border: 1px solid #21D4FD; 
  cursor: pointer;
  margin: 0 24px 0 0;
}

/* active/current tab */
.tab button.active {
  background-color: #003e67; 
  color: white;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
/* end tabs */

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding: 75px 0; /* Location of the box */ 
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
@media only screen and (max-width: 767px){.modal{padding: 50px 0}}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 2px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close, .close2 {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover, .close2:hover,
.close:focus, .close2:focus {
  color: #ddd;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #003e67;
  color: white;
}
.modal-header h2 {color: white}
.modal-body {padding: 24px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #003e67;
  color: white;
}

/* videos */
.vid-wrapper {
  width: 100%; 
  max-width: 720px; 
  margin: 0 auto 3rem auto;
}

.vid-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* fixes IE error where text displays outside of box */
@media only screen and (min-width: 768px){.feature__text{width:100%;}}

/* Skip to Main Content Link */
.skip {
  position: absolute;
  left: -1000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip:focus {
  position: static;
  width: auto;
  height: auto;
}

.page-footer__copy-nav {line-height: 1.25}

a[href$=pdf]:after {
    content: "\0000a0(PDF)";
    font-size: 0.75em; 
    display: inline-block;
    height: auto;
    left: auto;
    position: relative;
    right: auto;
    top: auto;
   bottom: auto;
}

.no-pdf-marker a[href$=pdf]:after {
    content: "";
    font-size: 1em; 
    }

a[href$=xlsx]:after {
    content: "\0000a0(Excel)";
    font-size: 0.75em; 
    display: inline-block;
    height: auto;
    left: auto;
    position: relative;
    right: auto;
    top: auto;
   bottom: auto;
}

/* keeps content above the top of the wave, other p:last-child have zero margin  */
.section--bottom-waves p:last-child {margin-bottom: 24px;}
.section--bottom-waves table:last-child {margin-bottom: 24px;}

/* from Abbi,  */
section:not(.hero) {
    position: relative;
    /* z-index: 99;
    background-color: white; */
}

@media only print {
    a.skip, div#banner-container, header.page-header, ul.breadcrumbs, footer#footer {display: none}
    .hero__image {width: 300pt; margin: 0 auto;}
    .hero__alert {margin-bottom: 2em}
    .bordered-title, .border-title-12px {padding-bottom: 0.25em; border-bottom: 1px solid #777}
    .inverse, .inverse h2, .inverse h3, .inverse h4, inverse h5, .inverse h6, .grid-wrapper, .spec-card a.link-with-arrow {color: #000000}
    .page-break-before {page-break-before: always}
    .page-break-after {page-break-after: always}
}