/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents ––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Lists
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.64em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.8em;
  font-weight: 300;
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  letter-spacing: 0px;
  color: #3c4048 }
  
p { line-height: 1.8em; }

/* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 3.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 2.0rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 1.8rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 1.5rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.5rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2.0rem; }
  h3 { font-size: 1.8rem; }
  h4 { font-size: 1.5rem; }
  h5 { font-size: 1.5rem; }
  h6 { font-size: 1.5rem; }
}
h1,h2,h3,h7 {
	font-family: "Times New Roman", Times, serif; 
	text-transform: none;
	letter-spacing: 0px; 
	
}

h1 { color: #d4451b; }

h2 { color: #041d4f; 
	 letter-spacing: 0.04em;
	 text-transform: uppercase;
     padding-top: 20px;
}

h3 { color: #032d80; 
	 letter-spacing: 0.04em;
     text-transform: uppercase;
     padding-top: 25px;
}
h4 { 
	 color: #555a64;
	 font-family: Trebuchet MS, Arial, verdana, sans-serif;
	 letter-spacing: 0.2em;
	 text-transform: uppercase;
	 font-weight: 800;
     padding-top: 0;
}
h5 { color: #041d4f; 
	font-family: "Courier New", Courier, monospace; 
	letter-spacing: 0.15em;
	font-weight: 800;
	text-transform: none;
	padding-bottom: 20px;
	border-bottom: 1px dotted #c2c2c2;
}
h6 { color: #005394; 
	 text-transform: uppercase;
     
}

h7 { color: #041d4f; 
	 text-transform: uppercase;
     padding: 10px;
	 margin-bottom: 50px!important;
}

p {
  margin-top: 0; }
  
strong {
	color: #3c4048;
	font-weight:600;
}
 
strong.standout { 
    color: #000033;
	font-size: 120%;
    font-style: italic;
    font-weight: 500;
    font-family: "Times New Roman",Times, Serif;
	line-height: 1.3em;
 }  

/* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #d4451b; text-decoration: none; }

a:hover { color: #d4451b; text-decoration: underline; }


/* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: none; }
ol {
  list-style: none; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 0;
  font-size: 100%; }
li {
  margin-bottom: 2rem; }

/* Right Sidebar */

#sidebar { font-family: arial,verdana,sans-serif;  
  position:relative;
  overflow:hidden;
  line-height:1.4em;
  }


#sidebar ul li {
    color: #d4451b;
    font-size: 12px;
	padding-bottom: 0;
	margin-bottom: 0px; 
    letter-spacing: 1.5px;
    font-weight: 600;
	
}
#sidebar ul li a {
    color: #585858;
    font-size: 12px;
    letter-spacing: .4px;
    font-weight: 400;
    font-family: arial;
	margin-bottom: 0px; 
}
/*.sidebar ul li > a { font-size: inherit; line}*/
#sidebar ul li a:hover {color: #d4451b; text-decoration: none; }
#sidebar ul li ul li::before { margin-right: 10px;}
#sidebar ul li ul li { line-height: 1.5em; margin-bottom: 0px;  }



/* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */


th,
td {
  padding: 16px 25px;
  text-align: left;
 }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }
  
  

/* responsive table */


.limiter {
  width: 100%;
  margin: 0 auto;
}

.container-table100 {
  width: 100%;
  min-height: 100vh;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.wrap-table100 {
  width: 100%;
  box-sizing: border-box; }

table.resp {
  border: 1px solid #e55e04;
  border-spacing: 1;
  border-collapse: collapse;
  background: white;
  border-radius: 0px;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  position: relative;
  
}
table.resp * {
  position: relative;
  
}
table.resp td, table.resp th {
  padding-left: 15px;
  padding-right: 15px;

}
table.resp thead tr {
  height: 60px;
  background: #e55e04;
}
table.resp tbody tr {
  height: 50px;
}
table.resp tbody tr:last-child {
  border: 0;
  
}
table.resp td, table.resp th {
  text-align: left;
  
}
table.resp td.l, table.resp th.l {
  text-align: right;
}
table.resp td.c, table.resp th.c {
  text-align: center;
}
table.resp td.r, table.resp th.r {
  text-align: center;
}


.table100-head th{
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset;
  padding-left:15px;

}

tbody.resp tr:nth-child(even) {
  background-color: #f5f5f5;
  
}

tbody.resp tr {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  font-weight: unset;
  padding-left:15px;

}


.column1 {
  vertical-align: top;
  font-size:100%;
  width: 35%;
  padding-left: 30px;
}

.column2 {
  vertical-align: top;
  width: 65%;
  
}



@media screen and (max-width: 992px) {
  table.resp {
    display: block;
  }
  table.resp > *, table.resp tr, table.resp td, table.resp th {
    display: block;
	
  }
  table.resp thead {
    display: none;
  }
  table.resp tbody tr {
    height: auto;
    padding: 15px 0;
  }
  table.resp tbody tr td {
    padding-left: 40% !important;
    margin-bottom: 24px;
  }
  table.resp tbody tr td:last-child {
    margin-bottom: 0;
  }
  table.resp tbody tr td:before {
    font-size: 14px;
    color: #777;
    line-height: 1.2;
    font-weight: unset;
    position: absolute;
    width: 40%;
    left: 30px;
    
  }
  table.resp tbody tr td:nth-child(1):before {
    content: "Notes:";
	color:  #444;
    font-size: 13px;
	font-weight: 600;
	letter-spacing: .5px;
	font-style: oblique;
  }
  table.resp tbody tr td:nth-child(2):before {
    content: "Example:";
	color: #e55e04;
    font-size: 13px;
	font-weight: 600;
	letter-spacing: .5px;
	font-style: oblique;
  }
  /* reverse order for mobile*/
    table.resp tbody tr.rev td:nth-child(1):before {
    content: "How:";
	color:  #032d80;					
    font-size: 13px;
	font-weight: 600;
	letter-spacing: .5px;
	font-style: oblique;
  }				  
  table.resp tbody tr.rev td:nth-child(2):before {
    content: "When & Why:";
	color: #032d80;						
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .5px;
	font-style: oblique;
  }
  .column1,
  .column2 {
    width: 100%;
	
  }

  tbody tr {
    font-size: 14px;
  padding-left:15px;
  }
}

@media (max-width: 576px) {
  .container-table100 {
  }
}

/* tab for tables */

input { display: none; }                /* hide radio buttons */
input + label { display: inline-block } /* show labels in line */
input ~ .tab { display: none }          /* hide contents */
/* show contents only for selected tab */
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2,
#tab3:checked ~ .tab.content3,
#tab4:checked ~ .tab.content4,
#tab5:checked ~ .tab.content5 { display: block; }
input + label {             /* box with rounded corner */
  border: 1px solid #e55e04;
  background: #fff;
  padding: 4px 50px;
  border-radius: 4px 4px 0 0;
  position: relative;
  top: 1px;
}
input:checked + label {     /* white background for selected tab */
  background: #e55e04;
  border-bottom: 1px solid transparent;
}
input ~ .tab {          /* grey line between tab and contents */
  border-top: 1px solid #e55e04;
  padding-top: 0px;
}

/* Utilities–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  background-color: #fff;
  border: 1px dotted #B0C6C6;
  border-style: none none dotted;
  margin-top: 3rem;
  margin-bottom: 3rem;
  clear: both;
  }
hr.footer {
  background-color: #fff;
  border: 1px dotted #B0C6C6;
  border-style: none none dotted;
  margin-bottom: 3.5rem;
  clear: both;
  }
 
 /*video */
.youtube-responsive-container {
position:relative;
margin-top: 50px;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
border: 0;
}

.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border: 0;
}

  
  
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}
* {
  transition: 0.3s all ease-in-out;
}
.fluid-container {
  max-width: 1000px;
  margin: auto;
}
header {
  background-image: url("../images/gradient4.jpg");
}

.header-img {
  margin-top: 0rem;
  margin-left: 15rem;
  width: 173px;
  height: 150px;
}
.breadcrumb-row {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.breadcrumb-link {
  color: #666;
  font-size: 1.1rem;
}
.breadcrumbs {
background-color: #FFFFFF;
width: 100%;
margin: 0px auto 0px auto;
padding: 0px;
font-size: 70%;
font-weight:normal;
color: #728599;
}
.breadcrumbs li a    {
    color: #B8B8B8; text-decoration: none;
}

section.middle {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}

.middle main {
  flex: 1 0 650px;
}

.middle nav {
  flex: 1 0 320px;
  margin-left: 20px;
}
.navbar-container {
  box-sizing: border-box;
  border-width: 1px;
  border-color: #e1e1e1;
  border-style: solid;
  margin-bottom: 20px;
  transition: 0.3s all ease-in-out;
}
nav a {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: normal;
  padding-left: 15px;

}
nav ul li div:hover { background-color: #f2f2f2;}
nav ul li {
  color: #e55e04;
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 600;
}

p.navmatch {
  color: #e55e04;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  line-height:1;
  padding-left: 15px;
  margin-top: 2.2em;
}
	
#nav-toggler {
  display: none;
  appearance: none;
  width: 5rem; /*was 3rem*/
  height: 3rem;
  background: url("https://www.perfectapology.com/images/list2.png");
  background-size: cover;
  background-position: center;
}

footer {
  background-color: #36383D; 
  border-top: 25px #999 solid;
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
}
.footer-row-last {

  text-align: left;
  font-size: 12px;
  color:#fff;
}
footer a {

  color: #fff;
}
.footer-row-last{
    display: flex;
}
.footer-row-last div{
    flex:  1 0 0;
}

#copyright {
	padding-right:25px;
	margin-left: 20px;
	line-height:2.5em;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing: 0.06em;
}
#copyright, #legal { color: #dededf;}
#copyright a, #legal a { color: #a6a7af; }
#copyright a:hover, #legal a:hover { color: #fff; text-decoration:none; }
/*to make nav column stay until 900px*/
@media screen and (max-width: 1033px){
  .middle {
    padding: 1rem;
  }
  .middle main {
    flex: 1 0 50vw;
  }
}
@media screen and (max-width: 899px) /*1024*/ {

  .fluid-container {
    max-width: 90%;
  }
  .middle main,
  .middle nav {
    margin-left: 0;
    flex: 1 0 100%;
  }
  #nav-toggler {
    display: block;
    outline: none;
  }
 /* section.middle nav{
    position: relative;
  }
    the section.middle nav above along with the four lines below are for mobile menu to sit on top of content as opposed to pushing it down */
  .navbar-container {
    /*position: absolute;
    width: 100%;
    min-height: 100%;
    z-index: 999;*/
    background: #f5f5f5;
    width: 0;
    display: none;
    height: 0;
    opacity: 0;
    padding: 0;
    display: block;
    padding-left: 8px;
  }
  .navbar-container *{
      display: none;
  }
  #nav-toggler:checked ~ .navbar-container * {
      display: block;
  }
  #nav-toggler:checked ~ .navbar-container .social-box {
      display: flex;
  }
  #nav-toggler:checked ~ .navbar-container {
    padding-top: 1rem;
    height: auto;
    opacity: 1;
    width: 100%;
    margin-bottom: 4rem;
  }
}

/* Masonry Grid */

.rowh {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 3px;
}

/* Create three equal columns that sits next to each other */
.columnh {
  -ms-flex: 33.333333%; /* IE10 */
  flex: 33.333333%;
  max-width: 33.333333%;
  padding: 0 3px;
}


.columnh img {
  margin-top: 6px;
  vertical-align: middle;
  width: 100%;
  
}

.columnh a:hover img {
  margin-top: 6px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .columnh {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnh {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

/**/

/*jsfiddle.net/Venugopal/e0u4sow1/1/  */

.media {
    display: inline-block;
    position: relative;
    vertical-align: top;
}

.media__image { display: block;
  margin-top: 6px;
  vertical-align: middle;
  width: 100%;

}

.media__body {
  background: rgba(229, 94, 4, 1);
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 6px;
  padding: 1em 1em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  
}
.media__body p {
  color: white;
  font-family: Arial, Helvetica, Trebuchet MS, sans-serif;
  text-transform: uppercase;
  font-size: .8em;
  font-weight: 600;
  line-height: 1.2em; 
  border: 1px #fb9e5f solid;
  padding: 10px;
  }
  
.media__body:hover { opacity: 1; }

/* Gift Gallery - Float 3 columns side by side */
.columng {
  float: left;
  width: 32%;
  padding: 0;
  margin: .5%;
}

/* Remove extra left and right margins, due to padding */
.rowg {margin: 0;}

/* Clear floats after the columns */
.rowg:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .columng {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.cardg {
  text-align: left;
  background-color: #fafafa;
  border: 1px #e1e1e1 solid;
}

.cardginside {
  padding: 0 10px;
}


/*Responsive blocks of 2 column text*/

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.columnblurb {
  float: left;
  width: 50%;
  padding-right: 20px;
  margin-bottom: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnblurb {
    width: 80%;
  }
}



/* Image Responsive */

.skeleton-img{
box-sizing: border-box;
display: block;
max-width: 100%;
width: 100%;
height: auto;
border:1px solid #e1e1e1;
}

.skeleton-imgnoborder{
display: block;
margin-bottom:30px;
width: 100%;
height: auto;

}
.img-center {
  box-sizing: content-box;
  display: block;
  margin: 40px auto;
  max-width: 100%;
  height: auto;

}

.ApologyIcons {
display: block;
margin: 60px auto;
}

img.FiveEightyBox
{
box-sizing: content-box;
display: block;
max-width: 580px;
width: 100%;
height: auto;
padding: 1%;
border:1px solid #cccccc;
margin: 40px auto 40px auto;
Float: none;
clear: both;
}

@media screen and (max-width: 830px) {
  .header-img {
    display: none;
  }
  .footer-row-last{
      display: block;
  }

}


 img.containgift
{object-fit: contain;

	}
	
 a:hover img.containgift {
	opacity:0.4; 
	filter: alpha(opacity=40);
   
 }


/* -- floats -- */
.ItemRight {
float: right;
margin: 2px 0 10px 10px;
text-align: center;
}

.ItemLeft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}
.ItemCenter {
margin: 10px 20px 0 20px;
text-align: center;
}

/* Boxes */
.accent{
    margin-bottom: 0.85em;
    margin-right: 0;
    margin-top: 2em;
    padding-bottom: 0.25em;
    padding-left: 20px;
    padding-top: 0.25em;
    position: relative;
    width: 100%;
    border-left: 1px #e55e04 dotted;
}	

.indent {
    margin: 1em 2em;
}
/* romantic boxes codepen.io/ssady/pen/JYGEBm */
.box2 *:last-child {
    margin-bottom: 0;
}

.box2-4 {
	border-top: 5px dashed #d9d9d9;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    position: relative;
    width: 100%;
    margin: 0 0 70px 0;
}

.box2-content {
    background: none repeat scroll 0 0 #FFFFFF;
    background-image: linear-gradient(#d9d9d9, white, white);
    padding: 35px 35px 100px 35px;
    position: relative;
    z-index: 1;
}
.box2-4:after {
    border-radius: 0 0 50% 50% / 0 0 20px 20px;
    bottom: 0;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
    content: "";
    height: 20px;
    left: 10px;
    position: absolute;
    right: 10px;
}


.note {
 
    position:relative;
    width:100%;
    padding:1em 1.5em 4em 1.5em;
    margin:3em auto 3em auto;
    font-size: 100%;
	background: rgb(194,194,194);
	background: -moz-linear-gradient(222deg, rgba(194,194,194,1) 0%, rgba(225,225,225,1) 24%, rgba(247,247,247,1) 48%, rgba(255,255,255,1) 89%);
	background: -webkit-linear-gradient(222deg, rgba(194,194,194,1) 0%, rgba(225,225,225,1) 24%, rgba(247,247,247,1) 48%, rgba(255,255,255,1) 89%);
	background: linear-gradient(222deg, rgba(194,194,194,1) 0%, rgba(225,225,225,1) 24%, rgba(247,247,247,1) 48%, rgba(255,255,255,1) 89%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c2c2c2",endColorstr="#ffffff",GradientType=1);
	box-shadow: -11px -3px 12px -11px rgba(197,197,197,0.56);
	-webkit-box-shadow: -11px -3px 12px -11px rgba(197,197,197,0.56);
	-moz-box-shadow: -11px -3px 12px -11px rgba(197,197,197,0.56);
	 overflow:hidden;
	
}

.note:before {
    content:url("https://www.perfectapology.com/images/tack.png");
    position:absolute;
    top: 6px;
    right:9px;
	z-index:1;
}
.note:after {
    border-radius: 0 0 0 80% / 0 0 0 80px ;
    bottom: 0;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    content: "";
    height: 30px;
    left: 0;
    position: absolute;
    right: 0; 
}

/* mobile or desktop only code */
@media screen and (min-width: 1200px) {
.content-desktop {display: block; line-height: 1;}
.content-mobile {display: none;}
   }
@media screen and (max-width: 1199px) {
.content-desktop {display: none!important;}
.content-mobile {display: block; text-align: center;}

    }
	
/* Misc */
.smaller {font-size:90%; margin-left: 50px;}
.blueaccent {color:#032d80;}
.paleblue {color:#4e76a2;}
.pb2 {color:#01569c;}
.orange { color:#e55e04; font-size: 150%;}
.orange2 { color:#e55e04; font-size: 250%;}
.red {color:#cb0e0e; font-size: 115%;}
.green {color:#009900; font-size: 150%;}
.orangebar { background-color: #e55e04; border: 1px solid #e55e04; }
.orangebar h2 {
	 font-family: 'Times New Roman', Trebuchet MS, Arial, sans-serif;
	 color: #fff; 
	 letter-spacing: .5px;
	 text-transform: uppercase;
     padding: 5px;
	 margin-bottom: 0;
	 }

.orangebox { border-width:3px; border-color:#ec7f09; border-style:double; padding: 2% 3%;}

.Dwnload { border: 0; }


/* Pagination */
ul.pagination { margin-bottom: 20px; }
ul.pagination li { display: inline-block; margin: 3px; }
ul.pagination li a.pagination:link, a.pagination:visited {
    display: block;
	font-size: 1.4rem;
    font-weight: 500;
    color: #ffffff;
    background-color: #e55e04;
    width: 30px;
	border-radius: 15px;
    text-align: center;
    padding: 1px;
    text-decoration: none;
}

ul.pagination li a.pagination:hover, a.pagination:active {
    background-color: #c2c2c2;
}
	 

/* Site Map */

#sitemap { font-family:  Trebuchet MS, arial, verdana, sans-serif; }
#sitemap ul li {
    color: #d4451b;
    font-size: 16px;
    margin-bottom: 2em;
    letter-spacing: 0px;
    font-weight: 800;
	

	
}
#sitemap ul li a {
    color: #d4451b;
    font-size: 16px;
    letter-spacing: .5px;
    font-weight: 500;
    font-family: arial;
	line-height:2.2em;
}

#sitemap ul li a:hover { color: #666666; text-decoration: underline; }
#sitemap ul li ul li::before { margin-right: 10px;}
#sitemap ul li ul li { line-height: 1.6em; margin-bottom: 0px;  }

/* Blockquotes */
blockquote {
    color: #505050;
    font-family: "Times New Roman", Georgia, serif;
    font-size: 110%;
    font-style: italic;
    line-height: 1.45;
    margin-bottom: 0.85em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.5em;
    padding-bottom: 0.25em;
    padding-left: 60px;
    padding-right: 40px;
    padding-top: 0.25em;
    position: relative;
    width: 95%;
    border-left: none !important;
}
blockquote:before {
    color: #e55e04;
	font-family: Georgia,serif;
    content: "“";
    display: block;
    font-size: 500%;
    left: 5px;
    position: absolute;
    top: -30px;
    
}
blockquote cite {
    color: #728599;
	font-family: Arial, Verdana, Sans-serif;
	font-style: normal;
    display: block;
    font-size: 70%;
    margin-top: 10px;
	margin-bottom: 10px
   
    
}
blockquote cite:before {
    content: "~ ";
}

.Footnote {
font-family: Arial, Verdana, sans-serif;
font-size: 70%;
border-top: 1px dotted;
color: #999999;
}


/* Sticky To Top Button */

#btnTop{
display:none;
position:fixed;
bottom:150px; /*how far from the bottom*/
right:20px; /*how far from right edge of the page*/
z-index:99999;
border:none;
outline:none;
background-color:#e55e04; /*the color of the button*/
opacity: 1.0; /*transparency, 0 is none, .9 is almost invisible */
color:#fff; /*The color of the font*/
cursor:pointer;
padding:1px 8px; /*padding inside the button */
border-radius:50%; /*rounded corners */
font-size:15px;
}
#btnTop:hover{
background-color:#CCCCCC; /*button color on hover */
}

/* Search Duck */

#widdget input {display:block;height:26px;margin: 20px 10px;padding:4px;outline:none;border:1px solid #e1e1e1;border-right:0;box-sizing:border-box;border-radius:3px 0 0 3px;width:calc(100% - 41px);font-size:13px;} 
#widdget button {float:left;cursor:pointer;margin-right:10px;width:43px;height:26px;background-color:#fff;border:1px solid #e1e1e1;border-radius:0 3px 3px 0;} 
#widdget button:active {background-image:linear-gradient(#909090,#585858);} 
#widdget button:focus {outline:none;}

@media(max-width:767px)
{
  body #nav-toggler{background: url(https://www.perfectapology.com/images/menu-icon.png) !important;width: 5rem!important;
    height: 5rem!important;
    background-size: 100% !important;}
.middle > nav > p{display: none;}
body #nav-toggler:checked ~ .navbar-container {margin-top: 10px;}
  main{width: 500px;overflow: hidden !important;}
}
@media(max-width:500px)
{
  main{width: 400px;overflow: hidden !important;}

}
@media(max-width:400px)
{
  main{width: 300px;overflow: hidden !important;}

}