@import url("style-clr.css");
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 0; outline: 0; padding: 0; margin: 0; border: 0; }
html { background: var(--color-back); font-family: Arial, Helvetica, Sans-Serif; color:var(--color-text); }
body { background-repeat: no-repeat; background-attachment:fixed; background-size: cover; }
A:link { text-decoration: none; color: var(--color-desc); }
A:visited { text-decoration: none; color: var(--color-desc); }
A:active { text-decoration: none; color: var(--color-desc); }
A:hover { text-decoration: underline; color:var(--color-desc-hvr); }
a img { border: 0.px solid var(--color-desc); }
a:hover img { border: 0.px solid var(--color-desc-hvr); }
h1 { color: var(--color-h1); font-weight: bold; text-align: center; font-size: x-large; margin-bottom: 5px; text-shadow: 1px 1px 2px #706e6c; }
h1 a { font-size: x-large; }
h2 { color: var(--color-h2); font-weight: bold; text-align: left; font-size: medium; padding: 5px 20px; background-color: #D1E2EC; padding-top: 10px; }
a:hover h2 { color: var(--color-desc-hvr);}
.header-top { max-width: 1440px; margin: auto; background: var(--color-back-top); }
.header-top>img { width: 100%; }
.nav-top { background: var(--color-menu-back); text-align: center; }
.nav-top>li { display: inline-block; padding: 2px 2px; }
.nav-top>li a { font-size: small; color: #E2F3FD; font-weight: bold; }
main { max-width: 1440px; margin: auto; background: var(--color-main-back) }
.sec-welc { padding: 10px; }
.sec-welc>p { width: 90%; margin: auto; font-size: small; padding-bottom: 5px; }
.sec-posts { text-align: center; }
/* Top Menu Button */
.top-menu { background: var(--color-back-top); }
.menu-main { list-style: none; margin: 0; padding: 0; }
.menu-main:after { content: ""; display: table; clear: both; }
.menu-main li { display: inline-block ; z-index: 1; }
.menu-main a { text-decoration: none; display: block; font-size: small; color: #E2F3FD; font-weight: bold; }
.menu1 { z-index: 99; display: none; position: absolute; margin-left: -75px; }
ul li:hover > .menu1 { display:inherit; }
ul.menu-sub { background: #9e9e9e; }
ul.menu-sub li { display: block; }
.menu-pass { width: 100%; }
.menu-act { display: inline; }
.menu-pass1 { display: none; }
.menu-act1 { display: block; }
@media screen and (max-width: 740px) {
span { font-size: medium; font-weight: bold; color: #fff; display: block; padding: 8px; }
.menu-pass { display: none; }
.menu-act { display: block; width: 100%; }
.menu-pass1 { display: none; }
.menu-act1 { display: block; }
.menu1 { display: none; }
.menu-main li { display: block ; }
ul li:hover > .menu1 { display:none }
ul.menu-line { display: block; width: 100%; }
ul.menu-line li { display: block; }
h1, h2 { margin-top: 10px; }
}
/* Menu Button */
.atuin-btn { display: inline-flex; text-decoration: none; position: relative; line-height: 10px; padding: 10px 15px; color: #FFF; text-transform: uppercase;
font-family: 'Roboto', Š¢ahoma, sans-serif; cursor: pointer; overflow: hidden; z-index: 1; }
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus { color: #FFF; }
.atuin-btn:before,
.atuin-btn:after { content: ''; position: absolute; top: 50%; width: 20px; height: 100%; background-color: #000; z-index: -1; }
.atuin-btn:before { left: -20px; transform: translate(-50%, -50%); }
.atuin-btn:after { right: -20px; transform: translate(50%, -50%); }
.atuin-btn:hover:before,
.atuin-btn:active:before,
.atuin-btn:focus:before { animation: from-left 0.7s both; }
.atuin-btn:hover:after,
.atuin-btn:active:after,
.atuin-btn:focus:after { animation: from-right 0.7s both; }
@keyframes from-right {
0% { right: -20px; }
50% { right: 50%; width: 20px; }
100% { right: 50%; width: 100%; }
}
@keyframes from-left {
0% { left: -20px; }
50% { left: 50%; width: 20px; }
100% { left: 50%; width: 100%; }
}
/* POST */
.pst-img { height: 250px; }
.pst-img-p { max-height: 300px; }
.pst-img-v { max-height: 220px; }
.post-box { width: 350px; height: 250px; overflow: hidden; }
.post-box-p { width: 220px; height: 300px; overflow: hidden; }
.post-box-v { width: 350px; height: 220px; overflow: hidden; }
article.card { position: relative; max-width: 100%; display: inline-block; border: 2px solid #BFE2FF; background: #BFE2FF;
box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 8px 10px rgba(0,0,0,0.2); overflow: hidden; margin: 4px 2px; }
article.card img { transition: all 300ms; }
article.card:hover img { transition: all 700ms; transform: scale(1.1); }
article.card .no-figa { position: absolute; top: 225px; text-align: left; background-color: rgba(0, 0, 0, 0.4); width: 100%; padding-left: 10px; }
article.card .no-figa-p { position: absolute; top: 275px; text-align: center; background-color: rgba(0, 0, 0, 0.4); width: 100%; }
article.card .no-figa-v { position: absolute; top: 195px; text-align: center; background-color: rgba(0, 0, 0, 0.4); width: 100%; }
article.card .no-figa:hover { display: none; }
article.card .no-figa h3,
article.card .no-figa-p h3,
article.card .no-figa-v h3 { color: #FFF; text-shadow: 2px 1px 2px #302f2e, 0px 7px 7px rgba(0,0,0,0.15), 0px 10px 2px rgba(0,0,0,0.1), 0px 18px 24px rgba(0,0,0,0.1); padding: 2px 0; white-space: nowrap; overflow: hidden; }
article.card .figa { position: absolute; background: #d9dee2; transition: transform 300ms; padding: 4px; }
article.card:hover .figa { transform: translateY(0); }
article.info-bottom .figa { bottom: 0; transform: translateY(100%); border-top: 4px solid #d9dee2; }
article.info-bottom .figa { width: 100%; }
article.card .figa .info span { font-size: x-small; display: block; }
article.card .figa .info span a { font-size: x-small; font-family: Arial, Helvetica, sans-serif; color: #2d9cf7; font-weight: bold; }
article.card .figa .info span a:hover { color: #ff0000; }
h3 { font-size: medium; font-weight: bold; display: inline-block; font-family: 'Roboto', sans-serif;
margin-bottom: 1px; padding-bottom: 1px; border-bottom: 0px solid #337AB7; }
/* FOOTER */
footer { max-width: 1440px; margin: auto; background: var(--color-main-back); padding: 50px 0; }
.footer-cnt { width: 50%; display: inline-block; text-align: center; }
.footer-cnt a { font-size: small; }
.footer-cpr { width: 50%; display: inline-block; text-align: center; font-size: x-small; }
/* Breadcrumb */
ul.breadcrumb { display: flex; flex-wrap: wrap; list-style: none; text-transform: capitalize; }
ul.breadcrumb * { box-sizing: border-box; }
ul.breadcrumb li { position: relative; border: 1px solid #BFE2FF; border-right: 0; }
ul.breadcrumb li:last-child { border: 1px solid #BFE2FF; border-right: 0; }
ul.breadcrumb li:first-child:after,
ul.breadcrumb li:first-child a:after { display: none; }
ul.breadcrumb li:after,
ul.breadcrumb li a:after,
ul.breadcrumb li span:after { content: ''; position: absolute; border: 0; top: 50%; }
ul.breadcrumb li:after { z-index: 1; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 13px solid #BFE2FF;
margin-top: -13px; right: -13px; }
ul.breadcrumb li:last-child:after { border-left: 15px solid #BFE2FF; }
ul.breadcrumb li a,
ul.breadcrumb li span { position: relative; transition: all 0.3s ease-in; text-decoration: none; height: 23px; color: #000; text-align: center;
display: block; line-height: 22px; padding: 0 15px 0 20px; font-size: 13px; font-family: Verdana, sans-serif; background-color: #E2F3FD; }
ul.breadcrumb li span { color: #000; background-color: #FFF; }
ul.breadcrumb li a:after,
ul.breadcrumb li span:after { transition: all 0.3s ease-in; z-index: 2; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 13px solid #BFE2FF;
margin-top: -13px; right: -13px; }
ul.breadcrumb li a:hover { background-color: #BFE2FF; color: #ff0000; }
ul.breadcrumb li a:hover:after,
ul.breadcrumb li span:after { border-left: 15px solid #FFF; }
/* HR Line */
hr { border: none; height: 3px; margin-top: 5px; background-image: linear-gradient(to right, #e9f1f8, #add9fd, #e9f1f8); }
hr:before,
hr:after { content: ''; display: inline-block; border-radius: 100%; width: 30px; height: 30px; border: 2px solid #BFE2FF; position: absolute;
left: 50%; transform: translate(-50%, -50%); background: #FFF; }
hr:after { animation: anim-hr 1s linear infinite; }
@keyframes anim-hr { 0% { width: 30px; height: 30px; } 100% { width: 0; height: 0; } }
/* INDEX PAGES */
.pages { text-align: center; font-size: small; font-weight: bold; margin-top: 20px; background: #BFE2FF; }
.page-p a { font-size: small; color: #FF5E62; margin: 2px; padding: 4px; text-align: center; display: inline-block; border: 1px solid #f1f1f1; }
.page-p a:hover { background: #337AB7; color: #ffffff; }
.page-a { font-size: small; color:#000000; margin: 2px; padding: 4px; text-align: center; background: #FFffff; display: inline-block; }