* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
} 


@font-face {
  font-weight: 400;
  font-style:  normal;
  font-family: 'Circular-Loom';

  src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Book-cd7d2bcec649b1243839a15d5eb8f0a3.woff2') format('woff2');
}

@font-face {
  font-weight: 500;
  font-style:  normal;
  font-family: 'Circular-Loom';

  src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Medium-d74eac43c78bd5852478998ce63dceb3.woff2') format('woff2');
}

@font-face {
  font-weight: 700;
  font-style:  normal;
  font-family: 'Circular-Loom';

  src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Bold-83b8ceaf77f49c7cffa44107561909e4.woff2') format('woff2');
}

@font-face {
  font-weight: 900;
  font-style:  normal;
  font-family: 'Circular-Loom';

  src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Black-bf067ecb8aa777ceb6df7d72226febca.woff2') format('woff2');}


BODY {
  background-color: #FFCC01;
  font-family: 'Circular-Loom', verdana, arial, helvetica;
  font-size: 12pt;
  margin: 0;
}

ADDRESS {
  font-size: 12pt;
}

STRONG {
  font-weight: bold;
}

.important {
  background-color: yellow;
}

CODE {
  font-size: 18pt;
  font-weight: bold;
  font-family: monospace;
}

PRE {
  font-family: monospace;
  font-weight: bold;
}

TT {
  font-size: 17pt;
  font-family: monospace;
  font-weight: bold;
}

KBD {
  font-style: normal;
  font-size: 18pt;
  font-weight: bold;
  font-family: arial, helvetica, geneva;
}

H1  {
  color: #99000;
  align: center;
  text-align: center;
  font-size: 20pt;
}

H2  {
  color: #99000;
  align: center;
  text-align: center;
  font-size: 18pt;
}

H3  {
  color: #99000;
  text-align: left;
}

H5  {
  font-size: 80%;
}

.footer {
  text-align: center;
  font-size:  8pt;
}

.page{
  max-width: 800px;
  background-color: #fff;
  padding-bottom: 15px;
}

.header{
text-align: center;
background: #cb3a96;
color: #fff;
padding: 30px 30px  15px 30px;
}

.wrap{
padding: 30px 30px  0 30px;
}
.logo{
    width: 150px;
}

ul{
list-style-type: none}

label{
display: inline-block;
}

.row{
width: 300px;
margin: 10px auto;
}
.description{
margin: 0 0 0 100px;
color: gray;
font-size: 10pt;
font-style: italic;
}

input[type=text], input[type=email], input[type=date]  {
width: 177px;
}
input[type=submit]{
  background-color: #cb3a96;
  border: 2px solid #cb3a96;
  padding: 7px 20px;
  color: #fff;
  font-weight: 600;
  border-radius: 15px;
}
input[type=submit]:hover{
  background-color: #fff;
  color: #cb3a96;
}

#page ::selection {
    background-color: #cb3a96;
    color: #FFF;
}

a{
color: #cb3a96;
text-decoration: none;
}
a:hover{
color: #000;
text-decoration: underline;
}

ul{
list-style-type: disc;
}
li {
    padding-bottom: 5px;
    padding-top: 3px;
}

.lower-roman{
list-style-type: lower-roman;
}

.lower-alpha{
list-style-type: lower-alpha;
}

.upper-alpha{
list-style-type: upper-alpha;
}


.decimal { 
counter-reset: item 
}
.decimal .item{ 
display: block;
padding-bottom: 5px;
position: relative; 
font-size: .95em; 
}
.decimal .item:before { 
content: counters(item, ".") ". "; 
counter-increment: item; 
width: 1.5em;
display: inline-block;
position: absolute;
left: -1.5em;
}  
.decimal .decimal .item:before{
width: 2em;
left: -2em;
}
.decimal .decimal .decimal .item:before{
/*margin-left: -2.5em; */
width: 2.5em;
left: -2.5em;
}


@media screen and (min-width: 800px){
  .page{
    margin: 30px auto;
    border-radius: 20px;
  }
  .header{
   border-radius: 15px 15px 0 0;
  }

}