@import url('https://fonts.googleapis.com/css?family=Poppins:300,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Great+Vibes: 400&display=swap');
body {margin: 0 auto; color: #413333; font-size: 1.2em; background: fixed; font-family:  "Open Sans", "Arial", sans-serif;  }
body {
background-color: #F4E7D3/* FFE4B2 */; 
background-position: center center;
background-size:  900px auto; 
background-repeat: no-repeat; 
background-image: url(../0-image-files/cristina-pop-6bJoklRw4kE-unsplash.jpg);}
h1, h2, h3 {font-family: "Poppins", serif; font-weight: 300; }
h1 {margin: 10px auto 0; padding: 80px 20px 0; line-height: 1em; font-size: 2.8em;text-align: center;}
h1 .smaller {font-size: .6em; font-weight: 300;}
h2 {margin: 0px auto 18px;padding: 40px 20px 0;font-weight: 600;}
h2 .smaller {font-size: .8em; font-weight: 300;}
h3 {margin: 0px .9em 10px; padding: 20px 20px 0; font-weight: 600;}
p {margin: 10px auto; line-height: 1.6; padding: 10px 20px; background: white; }
ul {width: 80%;margin: 10px 0; padding-top: 10px;}
a:link {color: #005571; text-decoration: none; font-weight: 200;}
a:visited {color: #008EBD; text-decoration: none;font-weight:200;}
a:hover, a:focus {color: #008EBD; text-decoration: underline;}
a:active {color: #005571; text-decoration: underline;font-weight: 200;}
a:link[href^="#toc"] {border-bottom: 1px red solid;text-decoration: none; font-size: 20px;}
a:hover[href^="#toc"], a:focus[href^="#toc"]{border-bottom: 0px red solid;text-decoration: none;background: #dddddd;border-radius: 20px;}
a:active[href^="#toc"]{border-bottom: 0px red solid;text-decoration: none;background: #bbbbbb;border: 0px red solid;}

#Header{height: 270px; width: 520px; margin: 160px auto 0;  padding: 0; background-color: #F4E7D3;  border: 0px red solid;}
#Header{
background-position: 10px;
background-size:  500px auto; 
background-repeat: no-repeat; 
background-image: url(../0-image-files/captain-dad.jpg); }
#Header h1{width: 200px; height: 50px; margin: 0; padding: 0; position: relative; top: 210px; left: 290px; background: #F4E7D3; font-size: 28px; }
#Header .homelink {display:block; width:180px; height:100px; position: relative; left: 100px; top: 20px; border: 0px white solid;}

#Header a:link {color: #c1c1c1; text-decoration: none;}
#Header a:visited {color: #c1c1c1;}
#Header a:hover, #Header a:focus {color: white; text-decoration: underline ;font-weight: 200; border: 0px white solid;}
#Header a:active, {color: white; text-decoration: none ;font-weight: 200; border: 1 gray solid;}
#Categories{margin-bottom: 20px; padding-top: 60px;}
#Introduction{line-height: 1.2;max-width: 520px;margin: 10px auto 40px;padding: 40px 20px 30px;background-color: white; border-radius: 20px;}

.callOut {margin: 40px 40px 20px; padding: 40px 40px 30px; background-color: white; border: .5px gray solid; border-radius: 18px;}
.callOut p {padding: 0;}
.signed p  {text-align: center; margin: 40px 0 20px; font-style: italic;}
.callOut h3 {margin: 10px 0;}

.note {margin: 40px 40px 20px; padding: 40px 40px 30px; background: gray; color: white; border: .5px gray solid; border-radius: 18px;}
.note p{background: none;}
.note .signed p{margin: 0; font-style: normal;}
.squareOuter{float: left; padding: 6px; margin: 5px 5px 20px; background: #F4E7D3/* DAA615 */;}

.square{height: 180px; width: 180px;  margin: 0; overflow: hidden; }
.square:hover{transform: scale(2); transform-origin: center 150px; transition-duration: 1s;}
.squareOuter:nth-child(3n) .square:hover{transform: scale(2); transform-origin: right 150px; transition-duration: 1s;}
.squareOuter:nth-child(3n+1) .square:hover{transform: scale(2); transform-origin: left 150px; transition-duration: 1s;}

#Footer {clear: both;max-width: 400px;margin: 40px auto;padding: 40px 0 120px;text-align: center;border-top: 1px red solid;}
#Categories a:link[href^="#toc"]{font-size: 1em;border-bottom: 0px red solid;background: transparent;}
.info a:link[href^="#toc"]{font-size: 1em;border-bottom: 0px red solid; background: transparent;}
.main{width: 640px; margin: 40px auto; padding: 20px 5px; background: #F7F1E8;}
.info{font-size: .8em;margin: 0 auto;padding: 0 4em;}




.subtitle{font-size: .9em;margin: 20px auto;padding: 0 2em;}
.ReturnToNavBox {margin: 40px auto 20px; padding: 20px; background-color: #F7F1E8; border: 1px black solid; }
.ReturnToNavBox, .borderRounded{border-radius: 20px;}
.ReturnToNavBox h3 {padding: 20px 0 0; margin-bottom: 0;}


.widthIconContainer{float: none; width: 600px; margin: 10px auto; }
.widthicon {width: 130px; margin: 4px 4px 0 4px; float: left; font-size: .8em;}
.widthicon p {margin: 0; padding: 0; height: 40px; line-height: 1em;}


.centerfloat{float:none; margin: 30px auto;}
.centerfloatPair{width: 400px; margin: 20px auto;}
.centerfloatPair p{padding: 0 4px;margin: 0 1px;}
.centerfloatPaired{width: 599px; margin: 20px auto 20px;}
.centerfloatPaired p{padding: 0 8px; margin: 0 2px;}
.halfwidth{width: 298px; font-size: 0.8em;}
.halfwidthplus{width: 450px;font-size: 0.8em;}
.halfwidthpaired{width: 290px; margin: 0 8px 0 0;}
.halfwidthpaired:last-child{margin: 0;}
.halfwidthminus{width: 198px;font-size: 0.8em;}
.halfwidthminusLeft{width: 198px;float: left;font-size: 0.8em;}
.floatstop{clear: both; float: none; /* margin-bottom: 18px; */}
.left, .leftC{float: left; }
.right{float: right;}
.righT{text-align: right;}


.topBar{width: 600px;height: 40px;padding: 4px 0 4px 0; background-color: white; margin: 0px auto 40px; position: -webkit-sticky; position: sticky; top: 0;}
.topBarInner {width: 90px; height: 40px; float: right; margin: 0;z-index: 100;}
.topBar a:link {display: block; height: 40px; width: 40px; border-bottom: 0px; border-radius: 10px; z-index: 100;}
.topBar a:hover, .topBar a:focus {text-decoration: none ;background-color: silver;}
.topBar a:active  {text-decoration: none ;background-color: gray; padding: 0; margin: 0;width: 40px;border: 0;}
.w3{width: 135px;}
.w4{width: 180px;}
.item{padding: 0 25px 0 0;margin: 0 10px 0 0; }
.topBar .item {padding: 0; margin: 0 5px 0 0;}


.centered h3{margin-bottom:0;}
.centered p{width: 300px; padding-top: 0;}


@media only screen and (max-width: 940px), only screen and (max-device-width: 940px) {
body {background-size:  760px auto; }
/* .main{width: 720px; margin: 40px auto; padding: 20px 5px; background: #F7F1E8;} */
}

@media only screen and (max-width: 760px), only screen and (max-device-width: 760px) {
/* .main{width: 580px; margin: 40px auto; padding: 20px 5px; background: #F7F1E8; border: .5px blue solid;} */
/* 
#Header{width: 400px; padding: 0; background-position: 60px;background-size:  140px auto; }
#Header .homelink {left: 60px;}
#Header .headerMenu {margin-left: 220px;font-size: 1em;}
.topBar{width: 100%; padding: 4px 0px 4px 0px; float:none; margin: 0 auto; }
 */

}


@media only screen and (max-width: 620px), only screen and (max-device-width: 620px) {


#Header{height: 220px; width: 420px; margin: 80px auto 0;  padding: 0; background-color: #F4E7D3;  border: .5px black solid;}
#Header{
background-position: 10px;
background-size:  400px auto; 
background-repeat: no-repeat; 
background-image: url(../0-image-files/captain-dad.jpg); }
#Header h1{width: 180px; height: 50px; margin: 0; padding: 0; position: relative; top: 160px; left: 220px; background: #F4E7D3; font-size: 28px; }
#Header .homelink {display:block;width:180px;height:100px;position: relative;left: 100px; top: 20px;border: 0px white solid;}




/* 
.main{width: 450px; margin: 40px auto; padding: 20px 5px; background: #F7F1E8;}
#Introduction{line-height: 1.2;max-width: 520px;margin: 10px auto 40px;padding: 40px 20px 30px;background-color: white; border-radius: 20px;}
.squareOuter{float: left; padding: 3px; margin: 2px; border: .5px solid black;}
.square{height: 138px; width: 138px;  margin: 0; overflow: hidden; }
 */
.main{width: auto; margin: 40px 10px; padding: 20px 10px; background: #F7F1E8;}

#Introduction{line-height: 1.2;max-width: 520px;margin: 10px auto 40px;padding: 40px 20px 30px;background-color: white; border-radius: 20px;}


.squareOuter{float: left; padding: 0; margin: 2px 1% 20px; width: 30%; height: 30%; }
.square{height: auto; width: auto;  margin: 0; overflow: hidden; }
.square:hover{transform: scale(2.4); transform-origin: center 100px; transition-duration: 1s;}
.squareOuter:nth-child(3n) .square:hover{transform: scale(2.4); transform-origin: right 100px; transition-duration: 1s;}
.squareOuter:nth-child(3n+1) .square:hover{transform: scale(2.4); transform-origin: left 100px; transition-duration: 1s;}


.callOut {margin: 20px 5px; padding: 20px 10px 10px; }
.signed p  {text-align: center; margin: 20px 0 20px;}
.note {margin: 20px 5px; padding: 20px 10px 10px; }


#Footer{max-width: 90%;}
h1 {margin: 10px auto 0; padding: 10px 10px 0; line-height: 1em; font-size: 1.5em; text-align: center;}
p, h2, h3 {max-width: 90%;}



.halfwidth, .halfwidthminus, .halfwidthminusLeft{width: 48%;}
.halfwidthminusLeft:last-child{float: none; margin: 0 auto; }
.centerfloatPaired{width: 98%;}

.widthIconContainer{width: 420px; float: none; margin: 0 auto; }
.widthicon p {margin: 0; height: 40px; max-width: 100%; }
}

@media only screen and (max-width: 460px), only screen and (max-device-width: 460px) {
body {
background-size:  100% auto; 
background-position: top center; 
background-image: url(../0-image-files/cristina-pop-6bJoklRw4kE-unsplash-tall.jpg);}

#Header{height: 150px; width: 340px; margin: 60px auto 0;  padding: 0; background-color: #F4E7D3;  border: .5px red solid;}
#Header{
background-position: 0;
background-size:  340px auto; 
 }
#Header h1{width: 300px; height: 60px; margin: 0 auto; padding: 10px 0 0; position: relative; top: -70px; left: 0; background: #F4E7D3; font-size: 28px; }
#Header .homelink {display:block;width:180px;height:100px;position: relative;left: 100px; top: 20px;border: 0px white solid;}
.main{width: auto; margin: 40px 2px; padding: 20px 2px; background: #F7F1E8;}

#Introduction{line-height: 1.2;max-width: 520px;margin: 10px auto 40px;padding: 40px 20px 30px;background-color: white; border-radius: 20px;}


/* 
.squareOuter{float: left; padding: 0; margin: 1%; width: 30%; height: 30%; border: .5px solid black;}
.square{height: auto; width: auto;  margin: 0; overflow: hidden; }
 */



.callOut {margin: 20px 5px; padding: 20px 10px 10px; }
.signed p  {text-align: center; margin: 20px 0 20px;}
.note {margin: 20px 5px; padding: 20px 10px 10px; }

.ReturnToNavBox {margin: 20px 0; padding: 10px 5px 10px; }


}

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
#Header {border: 1px blue solid;}
 }