@media screen and (min-width:768px),print{
h3{
font-size:1.5rem;
line-height:1.4;
padding:1.5rem 1.25rem 1.25rem;
}
h4{
font-size:1.25rem;
padding:1rem 1rem .75rem;
border-bottom:4px solid #003f7d
}
}
.side-menu{
width:100%;
padding-bottom:3.75rem;
}
.side-menu li{
border-bottom:1px solid #ccc;
}
.side-menu li:first-child{
text-align:center;
background:#fff;
}
.side-menu li:nth-child(2){
font-size:1.125rem;
font-weight:700;
padding:1rem;
border:3px solid rgba(0,63,125,0.8);
background:#fff;
}
@media screen and (min-width:768px),print{
.wrapper{
display: flex;
display: -webkit-flex;
flex-direction:row-reverse;
}
.side-menu{
width:20rem;
}
.side-menu li:nth-child(2){
border-bottom:1px solid transparent;
border:3px solid rgba(0,63,125,0.8);
}
.side-menu ul{
position:-webkit-sticky;
position:sticky;
top:167px;
max-height:calc(74vh - 11rem);
overflow-y:auto;
}
.side-menu li:first-child{
position:-webkit-sticky;
position:sticky;
top:0;
z-index:1;
}
.side-menu li:nth-child(2){
position:-webkit-sticky;
position:sticky;
top:135px;
z-index:1;
}
.main{
width:38.75rem;
padding:0 1.25rem 0 0;
}
}
.side-menu a{
display:block;
padding:1rem;
text-decoration: none;
}
.side-menu a:hover{
background:#f0f8ff;
}
.main h4:first-child{
margin-top:0;
}
@-webkit-keyframes modify{
0% {padding-top:90px; margin-top: -90px;}
100% {padding-top:0; margin-top:0;}
}
@keyframes  modify{
0% {padding-top:90px; margin-top: -90px;}
100% {padding-top:0;margin-top:0;}
}
h4:target{
-webkit-animation: modify 0.1s;
animation: modify 0.1s;
}
@media screen and (min-width:768px),print{
@-webkit-keyframes modify{
0% {padding-top:180px; margin-top: -180px;}
100% {padding-top:0; margin-top:0;}
}
@keyframes  modify{
0% {padding-top:180px; margin-top: -180px;}
100% {padding-top:0;margin-top:0;}
}
h4:target{
-webkit-animation: modify 0.1s;
animation: modify 0.1s;
}
}
.side-menu li img{
margin-bottom:2rem;
border:1px solid rgba(0,63,125,.2);
}
ul.list-group-item{
list-style-type: none;
padding-left: 0;
}
ul.list-group-item li a{
position: relative;
padding-left:2em;
}
ul.list-group-item li a:before {
position: absolute;
top:1.6rem;
left:.25rem;
content: '';
display: inline-block;
width:.4rem;
height:.4rem;
border-style: solid;
border-width:2px 2px 0 0;
border-color:#90b3f2 #90b3f2 transparent transparent;
transition:0.3s;
transform:rotate(45deg);
}
hr{
height:0;
height:1px;
margin:5.625em 0;
padding:0;
border:0;
background:#bbb;
background-image:-webkit-linear-gradient(left, #eee, #777, #eee);
background-image:-moz-linear-gradient(left, #eee, #777, #eee);
background-image:-ms-linear-gradient(left, #eee, #777, #eee);
background-image:-o-linear-gradient(left, #eee, #777, #eee)
}
em{
font-size:1.125rem;
font-weight:900;
font-style:normal;
display:block;
margin-top:3.75rem;
background:#e2f4f9;
}
em{
position:relative;
display:block;
height:32px;
margin-right:15px;
padding:.25rem 1.5rem .25rem 1rem;
line-height:1.5rem;
background:#e2f4f9;
}
em:before{
position:absolute;
top:0;
right:-15px;
content:'';
border-width:16px 0 16px 15px;
border-style:solid;
border-color:transparent transparent transparent #e2f4f9;
}
em.faq{
background:#eef9e2;
}
em.faq:before{
border-color:transparent transparent transparent #eef9e2;
}
strong:before{
font-size:1.125rem;
font-weight:700;
padding:0 .25em;
content:'◆';
color:#a3c97a;
}
.gotop{
position:relative;
display:block;
width:60px;
height:60px;
opacity:0.7;
border:1px solid #666;
border-radius:10%;
}
.gotop::before{
position:absolute;
top:40%;
right:0;
left:0;
display:block;
width:25%;
height:25%;
margin:auto;
content:"";
transform:rotate(-45deg);
border-top:4px solid #333;
border-right:4px solid #333;
}
.gotop:hover{
opacity:1;
background:rgba(0,63,125,0.2);;
}
.clear-text{
overflow:hidden;
white-space:nowrap;
text-indent:100%;
}
.sticky:before,
.sticky:after {
content:'';
display:table;
}