@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto+Slab&display=swap");
*, ::before, ::after { background-repeat: no-repeat; box-sizing: border-box; }

::before, ::after { text-decoration: inherit; vertical-align: inherit; }

html { cursor: default; font-family: system-ui,  -apple-system,  Segoe UI,  Roboto,  Ubuntu,  Cantarell,  Oxygen,  sans-serif,  "Apple Color Emoji",  "Segoe UI Emoji",  "Segoe UI Symbol",  "Noto Color Emoji"; line-height: 1.15; -moz-tab-size: 4; tab-size: 4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; word-break: break-word; }

body { margin: 0; }

h1 { font-size: 2em; margin: 0.67em 0; }

hr { height: 0; overflow: visible; }

main { display: block; }

nav ol, nav ul { list-style: none; }

pre { font-family: Menlo,  Consolas,  Roboto Mono,  Ubuntu Monospace,  Oxygen Mono,  Liberation Mono,  monospace; font-size: 1em; }

a { background-color: transparent; }

abbr[title] { text-decoration: underline; text-decoration: underline dotted; }

b, strong { font-weight: bolder; }

code, kbd, samp { font-family: Menlo,  Consolas,  Roboto Mono,  Ubuntu Monospace,  Oxygen Mono,  Liberation Mono,  monospace; font-size: 1em; }

small { font-size: 80%; }

::-moz-selection { background-color: #b3d4fc; color: #000; text-shadow: none; }

::selection { background-color: #b3d4fc; color: #000; text-shadow: none; }

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

audio, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

img { border-style: none; }

svg { fill: currentColor; }

svg:not(:root) { overflow: hidden; }

table { border-collapse: collapse; }

button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }

button, input, select { margin: 0; }

button { overflow: visible; text-transform: none; }

button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

fieldset { padding: 0.35em 0.75em 0.625em; }

input { overflow: visible; }

legend { color: inherit; display: table; max-width: 100%; white-space: normal; }

progress { display: inline-block; vertical-align: baseline; }

select { text-transform: none; }

textarea { margin: 0; overflow: auto; resize: vertical; }

[type="checkbox"], [type="radio"] { padding: 0; }

[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }

::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }

::-webkit-input-placeholder { color: inherit; opacity: 0.54; }

::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

::-moz-focus-inner { border-style: none; padding: 0; }

:-moz-focusring { outline: 1px dotted ButtonText; }

details { display: block; }

dialog { background-color: white; border: solid; color: black; display: block; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; }

dialog:not([open]) { display: none; }

summary { display: list-item; }

canvas { display: inline-block; }

template { display: none; }

a, area, button, input, label, select, summary, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; }

[hidden] { display: none; }

[aria-busy="true"] { cursor: progress; }

[aria-controls] { cursor: pointer; }

[aria-disabled], [disabled] { cursor: disabled; }

[aria-hidden="false"][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); display: inherit; position: absolute; }

body { font-family: 'Roboto Slab', serif; line-height: 1.5em; max-width: 1200px; margin: 0 auto; }

main, #main { max-width: 1200px; height: auto; position: relative; margin: 0 50px; }

header, #header { max-width: 1200px; color: #FFF; width: 100%; margin: 0 auto 1em auto; height: 120px; font-family: "Roboto Condensed"; position: relative; display: grid; }

.contactSocial { padding: 0; padding-left: 120px; background-color: #083050; display: flex; justify-content: space-around; align-items: center; height: 100px; }

.contact { text-transform: uppercase; font-size: 1.75em; grid-area: contact; }

.contact a { color: inherit; text-decoration: none; }

.social { grid-area: social; }

.social img { margin: 0px 0.25em; border: 0; outline: 0; }

.shield { margin: 0px 1em; border: 0; outline: 0; }

nav label, #hamburger { display: none; }

nav, #nav { background-color: #C72127; position: relative; height: 25px; text-align: right; z-index: 50; }

nav ul, #nav ul { list-style: none; padding: 0; margin: 0; }

nav ul li, #nav ul li { padding-right: .75em; }

nav ul a, #nav ul a { color: inherit; text-decoration: none; }

.compName, .call, .shield { display: inline-block; }

.compName { grid-area: compName; }

.call { grid-area: call; }

.shield { grid-area: shield; }

#logo { width: 120px; height: 120px; position: absolute; top: 5px; left: 5px; z-index: 60; }

.seminars { background-image: url(/img/CPL-logo_shield-only.jpg); background-size: cover; background-position: center top; background-attachment: fixed; background-repeat: no-repeat; }

.description { border-top: 16px solid #0017a4; border-bottom: 4px solid rgba(255, 255, 255, 0.94); background-color: rgba(191, 244, 255, 0.94); padding: 0.5em 1.5em; width: 75%; max-width: 1200px; margin: 0 auto; }

h1, h2, h3 { font-family: 'Roboto Slab', sans-serif; font-weight: 700; color: #083050; }

h1 { line-height: 1.3em; margin: 0; }

h4, h5, h6 { font-family: 'Roboto slab', sans-serif; font-weight: 400; color: #083050; }

.button { padding: 0.5em 1.25em; background-color: #DAAE28; color: #083050; border-radius: 15px; border: 2px ridge #C72127; margin: .3em; text-align: center; text-decoration: none; }

a .button, a:visited .button { color: #083050; text-decoration: none; }

a:hover .button { color: #FFF; }

.regButton { background-color: blue; color: #FFF; padding: .5rem; border-radius: 10px; width: 200px; text-align: center; text-decoration: none; display: inline-block; }

a div.regButton, a:visited div.regButton { color: #FFF; text-decoration: none; }

a:hover div.regButton { color: yellow; background-color: #C72127; }

label { font-size: 12px; display: block; }

footer { background-color: #C72127; text-align: left; padding: 1px 2em; color: #FFF; display: flex; justify-content: space-around; max-width: 1200px; margin: 0px auto; border-top: .5em solid #FFF; }

footer a { color: #FFF; text-decoration: none; }

footer h4 { color: #FFF; }

/********* HOME PAGE QUADRANT ******/
.quad { 
  display: grid; 
  grid-template-columns: 50% 50%; 
  grid-template-rows: minmax(300px, 320px); 
  grid-template-areas: "heroImg nextSeminar"
  " specialBanner specialImg"
  " classImg mainCopy"; 
  grid-column-gap: .5em; grid-row-gap: .5em;
  margin-top: 1em; }

.nextSeminar { padding: 0 1em; grid-area: nextSeminar; background-color: #C72127; color: #FFF; overflow: visible; position: relative; }

.nextSeminar h2 { color: #FFF; }

.nextSeminar a { color: #FFF; text-decoration: none; }

.nextSeminar a:hover { color: #DAAE28; }

.singleSlide { position: absolute; top: 1.2em; transition: visibility 0.5s, opacity 0.5s linear; padding: 0 1em; }

.mainCopy { grid-area: mainCopy; padding: .75em; }

.classImg, .heroImg, .specialImg { width: 100%; height: auto; grid-auto-rows: auto; background-repeat: no-repeat; background-size: cover; }

.specialImg { grid-area: specialImg; background-image: url(/img/Exam-picture.jpg); background-position: center top; }

.classImg { grid-area: classImg; background-image: url(/img/classroom-1.JPG); background-position: center top; }

.heroImg { grid-area: heroImg; background-image: url(/img/policecaratnight.jpg); }

.payInvoice, .payByCheck { color: black; background-color: #DDD; border-radius: 10px; text-align: center; padding: .5em; width: 200px; height: 40px; margin: 1em 0; }

@media only screen and (max-width: 880px) { .contactSocial { height: 100px; display: grid; grid-template-areas: "contact" 								"social"; grid-template-columns: 1fr; justify-items: center; }
  .shield { margin: 0px 0.25em; } }

@media only screen and (min-width: 801px) { nav ul li { display: inline-block; } }

@media only screen and (max-width: 800px) { /* Show Hamburger */
  nav label { display: inline-block; color: #fff; font-style: normal; font-size: 1.2em; padding: 10px; background-color: #C72127; }
  /* Break down menu items into vertical */
  nav ul { background-color: rgba(199, 33, 39, 0.95); box-shadow: 1px 2px 9px 1px #191917; }
  nav ul li { border-top: 2px solid #FFF; border-bottom: 0px solid #FFF; display: block; padding: .25em; }
  nav ul li:nth-last-child(1) { border-bottom: 4px solid rgba(255, 255, 255, 0.85); }
  /* Toggle show/hide menu on checkbox click */
  nav ul { display: none; }
  nav input:checked ~ ul { display: block; } }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 910px) { .seminars { background-position: center center; }
  .description { width: 95%; }
  blockquote { padding: .24em; margin: auto; }
  main, #main { margin: 0px; padding: .3em; }
  .contactSocial { padding: 0; padding-left: 100px; }
  #logo { width: 100px; height: 100px; }
  .compName, .call { font-size: .65em; margin: 0px auto; text-align: center; display: block; }
  .shield { display: none; }
  .socialIcon { width: 25px; height: 25px; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.25em; }
  .quad { display: flex; flex-wrap: wrap; flex-direction: column; }
  .nextSeminar { height: 350px; }
  .classImg, .heroImg, .specialImg { width: 100%; height: 350px; }
  .quad1 { grid-template-columns: 1fr; grid-template-rows: 500px; grid-template-areas: 
    "nextSeminar" 			"heroImg" 			
    "specialBanner" 			"specialImg" 			
    "mainCopy" 			"classImg"; 
    margin-top: 1em; }
  .button { width: 90%; }
  .singleSlide blockquote { width: 90%; padding: 0px; margin: 0; }
  footer { flex-direction: column; } }