/* sub pages 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;}
.home ul.main li#home a,
.layouts ul.main li#layouts a,
.demos ul.main li#demos a,
.menus ul.main li#menus a,
.boxes ul.main li#boxes a,
.mozilla ul.main li#mozilla a,
.opacity ul.main li#opacity a,
.explorer ul.main li#explorer 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;}
ul.sub li a.current {color:#6cf; cursor:default;}


.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;}
#tutorial #info {width:100%; padding:40px 0 50px 0;}

#tutorial #info .top-banner h1 {padding:0; margin:0; font:300 24px/30px 'Roboto', arial, sans-serif; color: #864;}
#tutorial #info .top-banner img {display:block; width:100%; max-width:1000px; 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 p a {color:#853; text-decoration:underline; font-weight:400;}
#tutorial #info p a:hover {color:#000; text-decoration:none;}
#tutorial #info h4 {padding: 0; margin: 10px 0 0 0; font: 400 20px/25px 'Roboto', arial, sans-serif; color: #5f80ad;}

#tutorial #info .adBox {text-align:center;}

dl.index {width:100%; margin-bottom:50px; display:flex; flex-wrap:wrap; justify-content: space-between;}
dl.index dd {width:24.5%; margin:5px 0; padding: 10px; color:#a07f52;  text-align:left; background:#a07f5233; box-sizing:border-box;}
dl.index dd span {font: 400 16px/20px 'Roboto', arial, sans-serif; padding:0; margin:0;}
dl.index dd a,
dl.index dd i {display:block; font: 400 16px/20px 'Roboto', arial, sans-serif; color: #000; text-decoration: none; padding: 0; margin:0; transition:0.25s;}
dl.index dd a:hover {text-decoration:underline;}


#tutorial #info .content-text { columns:2; column-gap:40px; margin:20px 0;}
#tutorial #info .content-text p {padding: 0; margin: 0 0 10px 0;}

div.flexBox {display:flex; flex-wrap:wrap; justify-content: center; width:100%; max-width:1000px; margin:0 auto;}
div.flexBox div {width:300px; margin:10px;}
#tutorial #info div.flexBox div#paypal {background:#5f80ad50; width:300px;}
#tutorial #info div.flexBox div#paypal h4 {padding:10px 0 10px 20px; margin:0; font:300 18px/30px 'Roboto', arial, sans-serif; color:#fff; background:#5f80ad;}
#tutorial #info div.flexBox div#paypal h4 span {display:inline-block; background:#ffffff66; color:#fff; width:20px; text-align:center; margin:0 2px; font:400 18px/40px 'Roboto', arial, sans-serif;}
#tutorial #info div.flexBox div#paypal p#boxtext {padding:10px 20px !important; margin:0; font: 300 14px/18px 'Roboto', arial, sans-serif; color:#000; text-align:justify;}
#tutorial #info div.flexBox div#paypal form {text-align:center; margin-bottom:10px;}

#info h2 {padding:0; margin:0; font:300 30px/40px 'Roboto', arial, sans-serif; color:#a07f52;}
#info h2 a {padding:0; margin:0; font:700 30px/40px 'Roboto', arial, sans-serif; color:#5f80ad; text-decoration:none;}
#info h2 a:hover {text-decoration:underline;}
#info h5 {padding:0; margin:0; font:400 16px/25px 'Roboto', arial, sans-serif; color:#321;}
#info h4 {padding:0; margin:0; font:400 16px/25px 'Roboto', arial, sans-serif; color:#321;}
#info .demoNav {text-align:center; margin-top:30px;}
#info .demoNav a {padding:0; margin:0 10px; font:700 20px/30px 'Roboto', arial, sans-serif; color:#5f80ad; text-decoration:none;}
#info .demoNav a:hover {text-decoration:underline;}
#info .demoNav .prevDemo::before {
    content: "";
    display: inline-block;
    margin: 0 3px 0 0;
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    border-color: transparent transparent #5f80ad #5f80ad;
    transform: rotate(45deg);
}#info .demoNav .nextDemo::after {
    content: "";
    display: inline-block;
    margin: 0 0 0 3px;
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    border-color: transparent transparent #5f80ad #5f80ad;
    transform: rotate(-135deg);
}

@media only screen and (max-width: 1000px) {
#tutorial #info .content-text {columns:1;}
dl.index dd {width:32.5%;}
}
@media only screen and (max-width: 800px) {
dl.index dd {width:49%;}
}
@media only screen and (max-width: 630px) {
header p {display:none;}
}
@media only screen and (max-width: 500px) {
dl.index dd {width:300px; margin:5px auto;}
}