/* custom font */
@font-face {
font-family:Segment7Standard;
font-display: swap;
src:url(../fonts/Segment7Standard.otf) }

* {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 300;
box-sizing: border-box;
color: #484848;
margin: 0;
padding: 0;
outline: none}

body a {
color: #f35a2d}

.wrap .guide-left {
width:1000px;
max-width:100%}

.wrap p {
margin: 0 0 20px}

h1, h2, h3, h4 {
font-family: Manrope, serif;
font-size: 30px;
margin-bottom: 30px;
font-weight: normal;
color: #144B93}

.wrap article.guide-left h1{
font-size: 23px}

body .wrap {
margin-top: 40px;
display: flex;
flex-wrap: wrap}

.wrap .guide-left .bottom-navigation p.Back {
margin-bottom: 20px}
.wrap .guide-left .bottom-navigation .help-button a {
font-size: 14px }

.wrap .guide-left ul.MainPageLeft {
padding-left: 15px;
list-style: disc;
margin: 20px 0}

.wrap .guide-left ul.MainPageLeft li{
margin-bottom: 10px}

.wrap p.warning {
color: #B10005;
font-weight: bold;
font-size: 1.1em }

.wrap p.warning::before {
display: inline-block;
content: '';
width: 40px;
height: 40px;
margin: 0 6px 6px 0;
background: url(img/warning.png);
background-size: cover;
position: relative;
top: 12px; }

.wrap p.notice {
font-weight: bold;
font-style: italic }

.wrap .answers {
background: #f5f5f5;
padding: 10px 20px;
margin-bottom: 20px; }

.wrap .answers p {
margin: 20px 0;
font-weight: 400;
font-size: 24px }

.wrap .answers span {
font-size: 24px }

.wrap .answers a.cta {
color: #fff;
background: #F35A2D;
letter-spacing: .5px;
text-decoration: none;
display: inline-block;
padding: 14px 25px;
appearance: none;
-webkit-appearance: none;
font-size: 16px;
margin: 10px 20px 20px 0;
border: 0;
text-transform: uppercase;
font-weight: normal;
border-radius: 40px;
transition: all 0.2s ease}

.wrap .guide-main img {
display: inline-block;
max-width:100%;
width:auto;
padding: 10px}

.wrap .guide-left section p {
position: relative; }

.wrap a.show-img-on-hover {
color: initial;
border-bottom: 1px dashed #000;
cursor: pointer }

.wrap a.show-img-on-hover > img {
visibility: hidden;
border: 1px solid black;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.75);
position: absolute;
z-index: 10;
width: 100%;
max-width: 400px;
left: 0;
bottom: 0;
transform: translateY(100%) }

.wrap a.show-img-on-hover:hover > img {
visibility: visible; }

#breadcrumbs {
color: #666;
font-size: 14px }

#breadcrumbs a{
font-size: 14px;
display: inline-block}

#breadcrumbs a:first-child::before, p.PDFText::before{
display: inline-block;
content:"";
height: 15px;
margin-right: 2px;
position: relative;
top:2px;
width:19px;
background: url(img/home.png);
background-size: cover}

.bottom-navigation {
display: flex;
align-items: flex-end;
justify-content: space-between }

p.PDFText::before{
height:19px;
background: url(img/flowchart.png);
background-size: cover}

body:not(.home)  #breadcrumbs a::after{
display: inline-block;
content:" > ";
color: #666;
pointer-events: none;
margin-left: 10px}

.digital {
font-family: "Segment7Standard"; }

body.home #alarm-instructions {
margin-top: 30px }

body.home #alarm-instructions h4 {
font-size: 20px;
margin-bottom: 10px;}

body.home #alarm-instructions .intro {
margin-bottom: 20px }

body.home #alarm-instructions .content {
display: flex}
   
body.home #alarm-instructions .section {
margin-right: 15px;
max-width: calc(33% - 10px);}

body.home #alarm-instructions .section:last-child {
margin-right: 0; }

body.home #alarm-instructions .section .image img {
padding: 0}

body.home #alarm-instructions .section .text {
margin-top: 10px;
padding: 0 10px;
line-height: 20px; }

body.home #alarm-instructions .section .text ul {
margin-left: 20px }

body.home #alarm-instructions .section .text ul li {
padding-top: 8px}

@media (min-width: 700px) {
.wrap article.guide-left {
padding-right: 40px;
border-right: 1px solid;
width: 25%}

body article.guide-main {
padding-left: 40px;
width: 75%}

.wrap .guide-main img.narrow-img {
width:19%}

.wrap .guide-main img.wide-img {
width:73%}
}

@media (max-width: 500px) {
body.home #alarm-instructions .content {
display: block}
      
body.home #alarm-instructions .section {
margin: 0 0 40px 0;
max-width: 90%;}
}