CSS Main_page
.-profile-btn:hover .menu-profile{ display:flex !important; }
body{ height:unset;}
.-main-content{
margin-top:7em;
background-color:#fff;
width:100%;
display:flex;
flex-direction:column;
align-items: center;
}
.-menu-header{
align-self:center;
}
.-main-header { box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; display: flex; justify-content: center; z-index:2; position:fixed; top:0; background-color:#fff; height:7em;}
.-main-header .header-content{
font-size:unset;
max-width:1200px;
padding:1em 2em;
}
.-menu-header .desktopMenu > .-item{
padding:0.25em;
text-align: center;
display:inline-block;
}
.-menu-header .desktopMenu a{
padding:0.5em;
}
.-menu-header .desktopMenu a:hover{
color:#17599C;
//background-color:#d3e6f8;
//border-radius:6px;
border-bottom:solid;
}
.-menu-header .desktopMenu .menu-profile a:hover{
border:none;
background-color:#d3e6f8;
border-radius:4px;
}
.-menu-header .desktopMenu .-active{
border-bottom:solid;
}
.-sub-menu-panel, .sub-menu-panel {
width:300px;
}
.-sub-content-panel, .sub-content-panel {
width:calc(100% - 300px);
}
.sub-content { margin:4em 0; }
.sub-content > .-item{
max-width:1200px;
margin:auto;
padding:1em 2em;
}
.sub-menu{
padding:1em;
margin:1em;
background-color:#0784b5;
border-radius:6px;
width:calc(300px - 4em);
//position:fixed;
}
.sub-menu .-item a{
color:#fff;
border-radius:6px;
padding:8px;
display:flex;
}
.sub-menu .-item a:hover, .sub-menu .-item .-active{
background-color:#08a1dd;
}
//.sub-content h1, .sub-content h2, .sub-content p, .sub-content li{color:#222;}
.sub-content p , .sub-content li{font-size:24px; font-family: "Prompt",sans-serif; line-height: 1.2em;}
.sub-content h1 { font-size:32px;}
.sub-content h2 { font-size:28px;}
.-hide{
display:none;
}
/=============================== container style ======================================/
.paper-stack {
background: #fff;
box-shadow:
/* The top layer shadow /
0 1px 1px rgba(0,0,0,0.4),
/ The second layer /
0 10px 0 -5px #eee,
/ The second layer shadow /
0 10px 1px -4px rgba(0,0,0,0.15),
/ The third layer /
0 20px 0 -10px #eee,
/ The third layer shadow /
0 20px 1px -9px rgba(0,0,0,0.15);
/ Padding for demo purposes /
padding: 1em;
}
.paper-stack-2 {
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
//margin: 26px auto 0;
//max-width: 550px;
//min-height: 300px;
padding: 1em;
position: relative;
width: 80%;
}
.paper-stack-2:before, .paper-stack-2:after {
content: "";
height: 98%;
position: absolute;
width: 100%;
z-index: -1;
}
.paper-stack-2:before {
background: #fafafa;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
left: -5px;
top: 4px;
transform: rotate(-2.5deg);
}
.paper-stack-2:hover::before {
transform: rotate(-6.5deg);
transition-duration:0.2s;
}
.paper-stack-2:after {
background: #f6f6f6;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
right: -3px;
top: 1px;
transform: rotate(1.4deg);
}
.paper-stack-2:hover::after {
transform: rotate(5.4deg);
transition-duration:0.2s;
}
/===================================== end container style==================================== /
///////////////////////////////////////////// end E-book /////////////////////////////////
////////////////////////////////////// VDO ///////////////////////////////////////
li iframe {
height:144px;
max-width:256px;
}
.bet-ul-grid-c li{ width:33%; display:flex;flex-direction:column;align-items: center;}
@media only screen and (max-width: 50em) {
.bet-ul-grid-c li {width:100% !important; align-items: center; }
}
li iframe {
height:181px;
max-width:320px;
}
///////////////////////////////////// End VDO ////////////////////////////////*/
@media only screen and (max-width: 50em) {
p {font-size:18px; font-family: "Prompt",sans-serif;}
h1 { font-size:24px;}
h2 { font-size:22px;}
.sub-content { margin:1em 0; }
.sub-content > .-item {padding:0.5em; }
}
@media only screen and (max-width: 60em) {
.-sub-menu-panel, .-sub-content-panel {width:100%;}
.-main-header{
height:6em;
}
.-main-header .header-content{
padding:1em;
}
.-main-content{
margin-top:6em;
}
.sub-menu{
position:relative;
width:calc(100% - 4em);
}
.-m-hide , .m-hide {
display: none !important;
}
.-m-show , .m-show{
display: show !important;
}
}
@media only screen and (min-width: 60em) {
.-m-hide ,m-hide {
display: show !important;
}
.-m-show , .m-show{
display: none !important;
}
}
@keyframes leftToRight {
from { right:100%; }
to {
right:0;
}
}
@keyframes botToTop{
from { top:100%; }
to { top:0; }
}