/* home page stylesheet */

html {scroll-behavior: smooth;}		

html, body {padding:0; margin:0; background:#fff;}
header {height:auto; min-height:80px; width:100%; background:#a07f52; position:relative;}
header h1 {display:inline-block; padding:0; margin:10px 0 10px 20px; font:300 30px/60px 'Roboto', arial, sans-serif; color:#fff;}
header h1 span {display:inline-block; background:rgba(255,255,255,0.5); color:#000; width:28px; text-align:center; margin:0 2px;}
header p {padding:0; margin:0; font:200 40px/80px 'Great Vibes', arial, sans-serif; color:#fff; position:absolute; left:50%; top:0; transform:translateX(-50%);}
header .search-icon {position:absolute; right:10px; top:10px; width:65px;}


ul.main {padding:0; margin:0; list-style:none; width:100%; min-height:30px; background:#000; z-index:100002; box-shadow:0 3px 6px rgba(0,0,0,0.3); display:flex; justify-content:center; flex-flow: row wrap;}
ul.main li a {display:block; font:400 15px/26px 'Roboto', arial, sans-serif; color:#fff; text-decoration:none; padding:0 6px; border-bottom:4px solid #000;}
ul.main li#home a {border-color:#a07f52;}
ul.main li a:hover {border-color:#a07f52;}


ul.sub {padding:0; margin:0; list-style:none; width:100%; background:#000; display:flex; justify-content:center; flex-flow: row wrap;}
ul.sub li a {font:400 14px/30px 'Roboto', arial, sans-serif; color:#fff; text-decoration:none; padding:0 6px;}
ul.sub li a:hover {color:#6cf;}

.footer {text-align:center;}
.footer p {padding:10px 0 20px 0; margin:0; font:300 13px/18px 'Roboto', arial, sans-serif; color:#333;}


#wrapper {width:100%;}

#tutorial {width:96%; max-width:1400px; margin:0 auto; padding:0; display:flex; justify-content:space-between; flex-wrap: wrap;}
#tutorial #info {width:calc(100% - 350px); padding:40px 0 50px 0;}
#tutorial #rightCol {width:330px; border-left:1px solid #a07f5266; padding:40px 0 50px 0;}


#tutorial #info .top-banner {position:relative; border:1px solid #a07f5233; box-sizing:border-box; margin-top:10px;}
#tutorial #info .top-banner h1 {padding:0; margin:0; font:300 24px/30px 'Roboto', arial, sans-serif; color: #fff; position:absolute; top:80px; left:10px; mix-blend-mode: exclusion;}
#tutorial #info .top-banner .object-fit_cover {object-fit: cover; width:100%; height:60vh; min-height:400px; display:block; object-position:80% 50%;}


#tutorial #info .top-banner img {display:block; width:100%; margin:0 auto;}
#tutorial #info h3 {padding: 0; margin: 20px 0 0 0; font: 700 28px/35px 'Roboto', arial, sans-serif; color: #a07f52; text-align:center;}
#tutorial #info p {padding: 0; margin: 20px 0 0 0; font: 300 17px/22px 'Roboto', arial, sans-serif; color: #000;}
#tutorial #info blockquote p.cite {padding: 0; margin: 0; font: 400 20px/30px 'Lato', arial, sans-serif; color: #5f80ad;}
#tutorial #info p a {color:#853; text-decoration:underline; font-weight:400;}
#tutorial #info p a:hover {color:#000; text-decoration:none;}

#tutorial #info .letterbox {width:100%; margin-top:30px; border:1px solid #a07f5233; box-sizing:border-box;}
#tutorial #info .letter-cover {display:block; object-fit: cover; width:100%; height:30vh; min-height:200px; max-height:300px;}


dl.latest {width:100%; margin-bottom:50px;}
dl.latest dt {font: 400 22px/35px 'Roboto', arial, sans-serif; margin: 0; padding: 0; margin-top:10px; color:#a07f52; text-align:center; border-bottom:1px solid #a07f5266;}
dl.latest dd {padding:0; margin:0; background: rgba(255,255,255,1); columns:4; column-gap:40px; column-rule: 1px solid #fff;}
dl.latest dd a,
dl.latest dd i {display:block; font: 400 15px/25px 'Roboto', arial, sans-serif; color: #000; text-decoration: none; padding: 0; margin:0; box-sizing:border-box; transition:0.25s;}
dl.latest dd a:hover {text-decoration:underline;}

.rColFlex {width:100%; display:flex; justify-content:space-between; flex-wrap: wrap;}
.rColFlex div.flexBox {width:100%; padding:0; margin:3px 15px; box-sizing:border-box;}

.rColFlex div.xtra {background: #a07f5233;}

.rColFlex div div {padding:0; margin:0 auto; background:none;}
.rColFlex div p {padding:10px 20px; margin:0; font: 300 14px/18px 'Roboto', arial, sans-serif; color:#333; text-align:justify;}
.rColFlex div p a {font-weight:400; color:#000; text-decoration:none;}
.rColFlex div p a:hover {text-decoration:underline;}

.rColFlex div h3 {padding:10px 0 10px 20px; margin:0; font:300 18px/30px 'Roboto', arial, sans-serif !important; color:#fff; background:rgba(0,0,0,0.6);}
.rColFlex div h3 span {display:inline-block; background:#ffffff66; color:#fff; width:20px; text-align:center; margin:0 2px; font:400 18px/40px 'Roboto', arial, sans-serif;}
.rColFlex div.paypal {background:#5f80ad50;}
.rColFlex div.paypal h3 {background:#5f80ad;}
.rColFlex div.paypal form {text-align:center; margin-bottom:10px;}

#google-search {padding-top:50px;}
div.search {text-align:center; width:90%; max-width:600px; margin:0 auto; padding:20px; height:130px; border:1px solid #a07f5266}
div.search input.search {padding: 10px; height: 39px; border: 0; width: calc(100% - 90px); float: left; font: 400 16px/37px 'Roboto', arial, sans-serif; margin-bottom:20px; margin-left:20px;  border:1px solid #a07f52;}
div.search .cse-search {width: 50px; height: 39px; border: 0; background: #a07f52 url(../new-images/search-icon.png) no-repeat center center; float: left; cursor: pointer;}

.rColFlex div.follow {background:#5f80ad50;}
.rColFlex div.follow h3 {background:#5f80ad;}
.rColFlex div.follow p {background:transparent;}
.rColFlex div.pages {background:#a07f5266;}
.rColFlex div.pages h3 {background:#a07f52;}
.rColFlex div.pages ul {padding:10px 15px; margin:0; list-style:none;}
.rColFlex div.pages ul li a {font: 400 14px/25px 'Roboto', arial, sans-serif; color: #000; text-decoration: none;}
.rColFlex div.pages ul li a:hover {text-decoration:underline;}

.columns {columns:2; column-gap:40px; column-rule: 1px solid #fff; text-align:justify; margin:0 0 40px 0;}

#tutorial #info p {padding:0; margin:0 0 10px 0;}
#tutorial #info h3 {margin-bottom:15px;}

#tutorial #info .selfie {
    display: block;
    float: left;
    padding: 0 10px 10px 0;
    margin-top: 0;
}


@media only screen and (max-width: 1300px) {
dl.latest dd {columns:3}
}
@media only screen and (max-width: 1200px) {
dl.latest dd {columns:2}
}
@media only screen and (max-width: 1000px) {
#tutorial #info {width:100%;}
dl.latest dd {columns:3}

#tutorial #rightCol {width:100%; border:none;}
.rColFlex div.flexBox {width:32%; padding:0; margin:3px 5px;}
.rColFlex div.search input.search {width: 60%;}
}
@media only screen and (max-width: 800px) {
dl.latest dd {columns:2}
.rColFlex div.flexBox {width:48%; padding:0; margin:3px 5px;}
.columns {columns:1;}

}
@media only screen and (max-width: 630px) {
.rColFlex div.flexBox {width:98%; max-width:300px; padding:0; margin:3px auto;}
header p {display:none;}
}
@media only screen and (max-width: 540px) {
dl.latest dd {columns:1}

}