@charset "UTF-8";

/* CSS Document */

@font-face {
    font-family: 'NeueMontrealRegular';
    src: url('/assets/fonts/NeueMontreal-Regular.eot');
    src: url('/assets/fonts/NeueMontreal-Regular.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/NeueMontreal-Regular.woff2') format('woff2'), url('/assets/fonts/NeueMontreal-Regular.woff') format('woff'), url('/assets/fonts/NeueMontreal-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NeueMontrealLight';
    src: url('/assets/fonts/NeueMontreal-Light.eot');
    src: url('/assets/fonts/NeueMontreal-Light.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/NeueMontreal-Light.woff2') format('woff2'), url('/assets/fonts/NeueMontreal-Light.woff') format('woff'), url('/assets/fonts/NeueMontreal-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NeueMontrealMedium';
    src: url('/assets/fonts/NeueMontreal-Medium.eot');
    src: url('/assets/fonts/NeueMontreal.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/NeueMontreal-Medium.woff2') format('woff2'), url('/assets/fonts/NeueMontreal.woff') format('woff'), url('/assets/fonts/NeueMontreal-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');


/*================================================================
	default elements
================================================================*/
*, ::after, ::before {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    border: 0;
    background: #eaeaea;
    font-family: arial, verdana, tahoma, sans-serif;
    font-size: 10pt;
}

a {
    color: #358baf;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-size: 20px;
}

p {
	font-size: 20px;
	line-height: 1;
	margin-bottom: 1.5em;
}


.top {
    background: #555c4e;
    height: 5px;
}

.head {
    background: #fff;
    height: 200px;
}
@media (min-width: 992px) {
	.head {
		height: 115px;
	}
}
.headerwrap {
    width: 100%;
    margin: 0 auto;
    padding:20px;

}

@media (min-width: 992px) {
	.head {
    display: flex;
    justify-content: space-around;
	}
	.headerwrap {
		    display: flex;
    justify-content: space-between;
	}
}




.logo {
    justify-content: flex-start;
    display: flex;
    width: 340px;
}

.logo img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
#promotion {
    width: 210px;
    padding-top: 32px;
    float: right;
    padding-right: 17px;
}

.hdline {
    background: #ddd;
    height: 1px;
}

.hdspace {
    background: #fff;
    height: 1px;
}

.container {
    background: #fff;
    width: 100%;
    max-width: 70%;
    margin: 0 auto;
}

@media (min-width: 992px) {
	.container {
	width: 100%;
    max-width: 86%;
	}
}
@media (min-width: 1200px) {
	.container {
	width: 100%;
    max-width: 80%;
	}
}
.nav {
    background: #13483e;
    padding: 2.1em 0 4.1em;
}



.wrapper {
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
}

@media (min-width: 992px) {
	.wrapper {
	width: 100%;
    max-width: 86%;

	}
}
@media (min-width: 1200px) {
	.wrapper {
	width: 100%;
    max-width: 80%;
	}
}


.nav1 {

    float: left;
}

.nav2 {
    width: 13px;
    float: right;

    padding-right: 30px;
}

.nav3 {
    float: right;
    padding-right: 10px;
}

.splashcontainer {
    width: 1015px;
    height: 460px;
}

.igwrap {
    width: 1015px;
    height: 210px;
}

.container {
    width: 1015px;
    background: #fff;
    margin: 0 auto;
}

.content-container {
	display: flex;
    justify-content: flex-start;
    gap: 40px;
    flex-direction: column;
}
@media (min-width: 1024px) {
.content-container {
	gap: 150px;
	    flex-direction: row;
	}
}

.content-left {
    width: 730px;
    height: 1150px;
    float: left;
    background: white;
}

.content-right {
    width: 284px;
    height: 1150px;
    float: right;
    background: white;
}

.content-wrap {
    position: relative;
    background: #ffffff;
    width: 1015px;
    height: 1331px;
}

.content-wrap-home {
    position: relative;
    background: #ffffff;
	margin: 5em 30px auto;
	padding-top: 3em;
}

@media (min-width: 800px) {
	.content-wrap-home {
	margin: 5em 50px auto;
    max-width: 89%;
    padding: 3em;
}
}


.content-wrap-home h2 {
	font-size: 35px;
	font-family: 'NeueMontrealRegular', arial, sans-serif;
	text-align: center;
	margin-bottom: 20px;}

@media (min-width: 800px) {
.content-wrap-home h2 {
	 text-align: left;
	 }
}

.content-wrap-contact {
    position: relative;
    background: #ffffff;
    width: 1015px;
    height: 1231px;
}

.content-lefta {
    width: 730px;
    height: 3210px;
    float: left;
    background: white;
}

.content-righta {
    width: 284px;
    height: 3210px;
    float: right;
    background: white;
}

.content-wrapa {
    position: relative;
    background: #d8d8d8;
    width: 1015px;
    height: 3210px;
}

.content-leftb {
    width: 730px;
    height: 850px;
    float: left;
    background: white;
}

.content-rightb {
    width: 284px;
    height: 850px;
    float: right;
    background: white;
}

.content-wrapb {
    position: relative;
    background: #d8d8d8;
    width: 1015px;
    height: 850px;
}

.content-leftc {
    width: 730px;
    height: 850px;
    float: left;
    background: white;
}

.content-rightc {
    width: 284px;
    height: 850px;
    float: right;
    background: white;
}

.content-wrapc {
    position: relative;
    background: #d8d8d8;
    width: 1015px;
    height: 850px;
}

.content-leftd {
    width: 730px;
    height: 1250px;
    float: left;
    background: white;
}

.content-rightd {
    width: 284px;
    height: 1250px;
    float: right;
    background: white;
}

.content-wrapd {
    position: relative;
    background: #d8d8d8;
    width: 1015px;
    height: 1250px;
}

.content-lefte {
    width: 730px;
    height: 1330px;
    float: left;
    background: white;
}

.content-righte {
    width: 284px;
    height: 1330px;
    float: right;
    background: white;
}

.content-wrape {
    position: relative;
    background: #d8d8d8;
    width: 1015px;
    height: 1330px;
}

.content-leftf {
    width: 730px;
    height: 2250px;
    float: left;
    background: white;
}

.content-rightf {
    width: 284px;
    height: 2250px;
    float: right;
    background: white;
}

.content-wrapf {
    position: relative;
    background: #d8d8d8;
    width: 1015px;
    height: 2250px;
}

.content-lf {
    width: 675px;
    padding-left: 25px;
    padding-right: 15px;
    padding-top: 25px;
}

.content-rt {
    width: 284px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}

.hdv {
    width: 675px;
    height: 1px;
    background: #d8d8d8;
    margin-bottom: 20px;
}

.hdv1 {
    width: 675px;
    height: 1px;
    background: #d8d8d8;
    margin-top: 25px;
    margin-bottom: 20px;
}

.hdv-int {
    width: 675px;
    height: 1px;
    background: #d8d8d8;
    margin-bottom: 20px;
    margin-top: 5px;
}

.hdv-int1 {
    width: 675px;
    height: 1px;
    background: #d8d8d8;
    margin-bottom: 30px;
    margin-top: 25px;
}


/*================================================================
	navigation
================================================================*/

p.navigation {
    margin: 0px;
    font-family: 'Sintony', arial, verdana, tahoma, sans-serif;
    color: #fff;
    font-size: 10pt;
    font-weight: 300;
    text-transform: uppercase;
    padding-left: 18px;
    padding-top: 7px;
}

p.navigation a {
    margin: 0px;
    letter-spacing: .3px;
    font-family: 'Sintony', arial, verdana, tahoma, sans-serif;
    color: #fff;
    font-size: 10pt;
    text-decoration: none;
    padding-right: 10px;
    font-weight: 300;
    text-transform: uppercase;
    padding-left: 18px;
    padding-top: 7px;
}

p.navigation a:hover {
    text-decoration: none;
}

.right-side {
	width: 100%;
}

img.locks {
	width: 16px;
	height: 16px;
}

.navigation li>a {
    margin: 0px;
    letter-spacing: .3px;
    font-family: 'Sintony', arial, verdana, tahoma, sans-serif;
    color: #fff;
    font-size: 10pt;
    text-decoration: none;
    padding-right: 10px;
    font-weight: 300;
    text-transform: uppercase;
    padding-left: 18px;
    list-style: none;
    display: flex;
    flex-direction: row;
    padding-top: 7px;
}

.content-nav {
	display: flex;
	justify-content: center;
	flex-direction: row;
}

.navigation {
	display: flex;
	justify-content: center;
	flex-direction: row;
	width: 100%;
	max-width: 100%;
	min-width: 100%;
}

.navigation>li {
    margin: 0px;
    letter-spacing: .3px;
    font-family: 'Sintony', arial, verdana, tahoma, sans-serif;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    font-weight: 300;
    text-transform: uppercase;
    list-style: none;
    display: flex;
    flex-direction: row;

}

.flex-r a {
	 margin: 0px;
    letter-spacing: .3px;
    font-family: 'Sintony', arial, verdana, tahoma, sans-serif;
    color: #fff;
    font-size: 10pt;
    text-decoration: none;
    padding-right: 10px;
    font-weight: 300;
    text-transform: uppercase;
    padding-left: 18px;
    list-style: none;
    display: flex;
    flex-direction: row;
    padding-top: 7px;
}


/*================================================================
	homepage styles
================================================================*/
h1, h2, h3, h4, h5, h6 {
	    font-family:'NeueMontrealRegular', 'NeueMontrealLight', arial, sans-serif;
}


h2 {
    color: #003134;
    font-size: 26px;
    margin: 0px;
}

h3 {
    color: #515151;
    font-size: 24px;
    margin: 0px;
}

h4 {
    color: #003134;
    font-size: 23px;
    margin: 0px;
    text-transform: uppercase;
    padding-bottom: 9px;
}

h5 {
    color: #003134;
    font-size: 20px;
    margin: 0px;
    padding-bottom: 9px;
}

h6 {

    color: #4aa1c5;
    font-size: 18px;
    margin: 0px;
    padding-bottom: 9px;
}

h7 {
    font-family: 'NeueMontrealRegular', arial, sans-serif;
    color: #003134;
    font-size: 17px;
    margin: 0px;
    padding-bottom: 9px;
}

h8 {
    font-family: 'NeueMontrealRegular', arial, sans-serif;
    color: #16421e;
    font-size: 11pt;
    margin: 0px;
    padding-bottom: 5px;
    text-decoration: underline;
    font-weight: bold;
}

img.max {
	margin: 0 auto;
	max-width: 295px;
}

.b {
    font-weight: bold;
}

p.disclaimer {
    text-align: center;
    font-size: 22pt;
    letter-spacing: 0;
    color: #6B6B6B;
    max-width: 80%;
    margin: 1em auto 2em;
}

p.lst {
    margin: 0px;
}

.wrapch {
    width: 675px;
}

.span6 {

    float: left;
    text-align: left;
}

.span7 {

    float: left;
    text-align: left;
}

.span8 {
    width: 13px;
    float: left;
    text-align: left;
    paddding-right: 5px;
    padding-top: 2px;
    height: 15px;
}

.span9 {

    float: left;
    text-align: left;
}


.span11 {

    text-align: center;
    padding-top: 21px;
    padding-bottom: 21px;
}

.span12 {
    background: #d8d8d8;
    height: 1px;
}

.span13 {

    padding-left: 12px;
    padding-right: 12px;
    padding-top: 20px;
    clear: both;
}

.span14 {
    background: #d8d8d8;
    height: 1px;
    clear: both;
    margin-top: 15px;
    margin-bottom: 15px;
}

.span15 {

    padding-left: 12px;
    padding-right: 12px;
}

.span16 {
    background: #d8d8d8;
    height: 1px;
    clear: both;
    margin-top: 19px;
    margin-bottom: 15px;
}

.span17 {

    padding-left: 50px;
}

.span18 {
    background: #fff;
    height: 70px;
}



.span20 {
    background: #d8d8d8;
    height: 1px;
    margin-bottom: 20px;
}

.span21 {
    background: #d8d8d8;
    height: 1px;
    margin-top: 21px;
}

.span22 {

    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
    clear: both;
}

.sidebarlink {
    width: 220px;
    float: left;
    clear: both;
}



.arrow-right {
    width: 0px;
    height: 0px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #d3d3d3;
    float: left;
    margin-top: 4px;
    margin-bottom: 8px;
}

.arrow-left {
    width: 0px;
    height: 0px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #4692b5;
    float: left;
    margin-top: 2px;
    margin-bottom: 8px;
    margin-right: 8px;
}

p.caption {

    font-weight: none;
    margin: 0px;
    color: #1d2515;
}

p.captionb {

    font-weight: none;
    margin: 0px;
    color: #1d2515;

}

p.sdlink {
    color: #4aa1c5;

    margin: 0px;
}

p.sdlink a {
    color: #4aa1c5;

    text-decoration: none;
    margin: 0px;
}

p.sdlink a:hover {
    color: #4aa1c5;

    text-decoration: underline;
    margin: 0px;
}

p.cthpinfo {
    margin: 2px 0;
}

p.cthpinfo a {
    margin: 0px;
}

p.tptla {
    margin: 0px;
}

img.certifications {
    padding-left: 30px;
    padding-top: 10px;
}

img.dottedliner {
    margin-bottom: 5px;
}

img.dottedliner1 {
    margin-bottom: 5px;
    margin-top: 7px;
}

img.dottedliner2 {
    margin-bottom: 25px;
    margin-top: 9px;
}

.content-container {padding: 2em;}
/*================================================================
	homepage application
================================================================*/

#splash {

    background-color: #fff;
}

#formcontainer {
    float: right;
    width: 280px;
    margin-top: 15px;
    margin-right: 25px;
    background: #fff;
    height: 425px;
    z-index: 10;
}

.fieldcontainer {
    background: #e9e7e5;
    padding-bottom: 5px;
}

.fields {
    width: 248px;
    margin-left: 16px;
    margin-right: 16px;
    margin: auto;
    padding-top: 5px;
}

.formdivider {
    background: #ddd;
    height: 1px;
    margin-bottom: 4px;
}

.applybutton {
    width: 248px;
    margin-left: 16px;
    margin-right: 16px;
    margin: auto;
}


/*================================================================
	interior styles
================================================================*/

.applybox {
    background: url(/assets/img/apply_bg_ext.jpg) left;
    height: 400px;
    width: 284px;
}

.applywrap {
    width: 240px;
    padding-left: 22px;
    padding-right: 22px;
    padding-top: 20px;
}

.applyintro {
    font-family: arial;
    font-size: 8pt;
    color: #808080;
    margin: 0px;
    padding-top: 5px;
    padding-bottom: 8px;
}

.numberwrap {
    width: 675px;
    display: inline-block;
}

.numberlist {
    width: 60px;
    height: 50px;
    padding-right: 0px;
    text-align: left;
    float: left;
}

.numberlistcaption {
    width: 600px;
    text-align: left;
    float: right;
    padding-left: 2px;
}

.title1 {
    font-family: 'NeueMontrealRegular', arial, sans-serif;
    color: #003134;
    font-size: 16px;
    font-weight: bold;
    margin: 0px;
    padding-left: 0px;
    margin-top: 7px;
}

.title1a {
    font-family: 'NeueMontrealRegular', arial, sans-serif;
    color: #003134;
    font-size: 16px;
    font-weight: bold;
    margin: 0px;
    padding-left: 0px;
    margin-top: 5px;
}

.title2 {
    font-family: 'NeueMontrealRegular', arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    margin: 0px;
}

.head-contain {
	background: #13483e;
    color: #fff;
    text-align: center;
    padding: 30px 10px;
    margin-bottom: 1.3em;
}

.head-contain h1 {  font-family: 'montserrat', arial, sans-serif; text-transform: uppercase;font-weight: 500; letter-spacing: .83px; margin-bottom: 14px;}
.head-contain p{font-size: 16px;line-height: 1.3em;}

.iZgdUT {
	display: none !important;
}
.iZgdUT svg {display: none !important;}
.iZgdUT a {display: none !important;}



/*================================================================
	footer styles
================================================================*/

.footer {
    background: #555c4e;
}

.copyrightln {
    background: #43483d;
    height: 1px;
}

.copyright {
    background: #4c5345;
padding: 3em 0 4em;
}

.copyrightwrap {
    width: 1015px;
}

.terms {
    width: 400px;
    float: left;
    text-align: left;
    padding-left: 20px;
}

.cpyrt {
    float: right;
    text-align: right;
    margin-right: 20px;
}

.ftterms {
    color: #a6a6a6;
    font-size: 8pt;
}

.ftterms a {
    color: #a6a6a6;
    font-size: 8pt;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
}

.ftterms a:hover {
    color: #fff;

    text-decoration: none;
}
.footerhd {
    font-family: 'Montserrat', arial, sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: underline;
    padding-bottom: 20px;
    font-weight: 600;
}
.footernav {
    font-family: 'Roboto', arial, sans-serif;
    font-size: 13px;
    color: #fff;
    margin: 0px;
    padding-bottom: 7px;
}

.footernav a {
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 0px;
    padding-bottom: 7px;
    text-decoration: none;
    padding-bottom: 20px;
}

.footernav a:hover {
    font-family: 'Roboto', arial, sans-serif;
    color: #000;
    margin: 0px;
    padding-bottom: 7px;
    text-decoration: underline;
}

.footernav1 {
    font-family: georgia;
    font-size: 8pt;
    color: #fff;
    margin: 0px;
    padding-top: 2px;
    padding-bottom: 7px;
}

.footernav1 a {
    font-family: georgia;
    font-size: 8pt;
    color: #fff;
    margin: 0px;
    padding-bottom: 7px;
    padding-top: 2px;
    text-decoration: none;
}

.footernav1 a:hover {
    font-family: georgia;

    color: #d8d8d8;
    margin: 0px;
    padding-bottom: 7px;
    padding-top: 2px;
    text-decoration: underline;
}

img.wide {
 width: 80%;
}
img.chart {
 width: 400px;
}


#transactionsgrid {
padding: 3em 0;
}

.grid0 {
    width: 51px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    padding-top: 12px;
    text-align: left;
    zoom: 1
}

.grid1 {
    width: 131px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    padding-top: 12px;
    text-align: left;
    zoom: 1
}

.grid2 {
    width: 1px;
    background: #4e5348;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    padding-top: 12px;
    margin-left: 10px;
    margin-right: 14px;
    text-align: left;
    zoom: 1
}

.grid3 {
    width: 163px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    padding-top: 12px;
    text-align: left;
    zoom: 1
}

.grid4 {
    width: 180px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    padding-top: 12px;
    text-align: left;
    zoom: 1
}

.grid5 {
    width: 167px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    padding-top: 12px;
    text-align: left;
    zoom: 1
}

.grid6 {
    width: 186px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    padding-top: 12px;
    padding-bottom: 25px;
    text-align: left;
    zoom: 1
}


/*================================================================
	form
================================================================*/

#container .form {
    background-color: #f1ebcd;
    padding: 6px;
    margin-bottom: 1px;
}

#container .form .inner {
    width: 260px;
    height: 233px;
    background: url(../images/form.jpg) no-repeat;
    padding: 90px 15px 0 15px;
    font-size: 13px;
}


/* #container .form{
	background-color: #fff;
	padding: 6px;
	margin-bottom: 1px;
}

#container .form .inner{
	width: 260px;
	height: 385px;
	padding: 0px 10px 10px 10px;
	font-size: 13px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0px 0px 15px #888;
	-webkit-box-shadow: 0px 0px 15px #888;
	box-shadow: 0px 0px 15px #888;
	margin-left: 5px;
	margin-top: 5px;
} */

form {
    margin: 0;
}

input {
    border: 1px solid #c5bc8a;
    padding: 3px;
    color: #6d570c;
    margin-bottom: 3px;
    font-size: 13px;
}

input.nb {
    border: 0px solid #c5bc8a;
    padding: 3px;
    margin-bottom: 3px;
    font-size: 13px;
}

input.hp {
    border: 1px solid #ddd;
    padding: 0.5em 0.7em;
    color: #696969;
    margin-bottom: 3px;
    font-size: 12px;
}

input.hpp {
    border: 1px solid #ddd;
    padding: 0.5em 0.7em;
    color: #696969;
    margin-bottom: 3px;
    font-size: 12px;
    width: 230px;
}

input.hap {
    border: 1px solid #ddd;
    padding: 0.5em 0.7em;
    color: #696969;
    margin-bottom: 3px;
    font-size: 12px;
    width: 104px;
}

input.hap1 {
    border: 1px solid #ddd;
    padding: 0.5em 0.7em;
    color: #696969;
    margin-bottom: 3px;
    margin-right: 4px;
    font-size: 12px;
    width: 104px;
}

input.int {
    width: 232px;
}

input.apply-button {
    border: 0px solid #c5bc8a;
    padding: 3px;
    margin-bottom: 3px;
    font-size: 13px;
}


/* phone */



.wrapper-nav {

    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: 30px;
}


@media (min-width: 992px) {
	.wrapper-nav {
		width: 600px;
	}
}



.phone-grid {
    display: flex;

}

.phone-info {
	font-size: 18px;
	letter-spacing: .6px;
}

.phone-info a {text-decoration: none}

.phone-info p {
    font-family: 'poppins', arial, sans-serif;
    color: #000;
    line-height: 1.1;
    margin: 0;
}

.icon-call {
	display: none;
}
@media (min-width: 992px){
.icon-call {
    margin: 5px 30px 0;
    display: flex;
    align-items: center;
    max-width: 40px;
    width: 100%;
}
}
.icon-call img {
	max-width: 40px;
	width: 100%;
}
p.small {font-size: 13px;}

.contact-footer {
	margin: 0 0 5px;
    color: #fff;
}

.bbb {
	width: 100%;
	max-width: 45px;
	height: auto;
}
.bbb:hover {
	  opacity: 0.3;
	width: 100%;
	max-width: 45px;
	height: auto;
}


/* ==== ICONS */


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  --locked-color: #5fadbf;
  --unlocked-color: #ff5153;
}
.form-listing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

/* Locked */
.lock {
  width: 24px;
  height: 21px;
  border: 3px solid var(--locked-color);
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.lock:after {
  content: "";
  display: block;
  background: var(--locked-color);
  width: 3px;
  height: 7px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3.5px 0 0 -2px;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.lock:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  bottom: 100%;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  border: 3px solid var(--locked-color);
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom: 0;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
/* Locked Hover */
.lock:hover:before {
  height: 12px;
}
/* Unlocked */
.unlocked {
  transform: rotate(10deg);
}
.unlocked:before {
  bottom: 130%;
  left: 31%;
  margin-left: -11.5px;
  transform: rotate(-45deg);
}
.unlocked,
.unlocked:before {
  border-color: var(--unlocked-color);
}
.unlocked:after {
  background: var(--unlocked-color);
}
/* Unlocked Hover */
.unlocked:hover {
  transform: rotate(3deg);
}
.unlocked:hover:before {
  height: 10px;
  left: 40%;
  bottom: 124%;
  transform: rotate(-30deg);
}