.single-tip{
border: 1px solid #ccc;
cursor: pointer;
border-radius: 8px;
display: inline-block;
line-height: 1.0em;
background-image: url(//mediaiq.info/wp-content/themes/mediaIQ/img/single-tip-info.svg);
background-repeat: no-repeat;
background-color: #f5f5f5;
}
.single-tip:hover{
border: 1px solid #F5900E;
transition: 0.3s;
}
.single-tip-open{
display: block;
}
.single-tip-close{
display: none;
}
.single-tip-active{
background-color: #fff6ea;
}
.single-tip-content{
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);
padding: 20px;
background-color: #fff;
color: #000;
font-family: 'Source Serif Pro', serif;
}
.single-tip-content a{
color: #000;
text-decoration: underline;
text-underline-offset: 0.25em;
text-decoration-color: #F5900E;
}
.single-tip-content a:hover{
transition: 0.3s;
color: #F5900E;
}
.single-tip-content p:last-child{
margin-bottom: 0;
}
.single-tip-content-header{
display: flex;
justify-content: space-between;
align-items: top;
}
.single-tip-content-title{
font-weight: 600;
line-height: 1.3em;
font-size: 1.125rem;
}
.single-tip-content-close{
width: 20px;
height: 20px;
background: url(//mediaiq.info/wp-content/themes/mediaIQ/img/single-tip-close.svg) center center no-repeat;
background-size: cover;
cursor: pointer;
margin-left: 10px;
}
.single-tip-content-close:hover{
background: url(//mediaiq.info/wp-content/themes/mediaIQ/img/single-tip-close-hover.svg) center center no-repeat;
}
.single-tip-content-text, .single-tip-content p{
font-weight: 400;
line-height: 1.5em;
font-size: 1.0rem;
}
.single-tip-bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media(min-width: 1200px){
.single-tip-content{
width: 445px;
}
}
@media(max-width: 1200px) and (min-width: 992px){
.single-tip-content{
width: 370px;
}
}
@media(min-width: 992px){
.single-tip{
padding: 0.2em 30px 0.2em 8px;
background-position: right 8px center;
}
.single-tip-content{
border-radius: 8px;
position: absolute;
right: 0;
}
.single-tip-bg{
background: none;
}
}
@media(max-width: 992px){
.single-tip{
padding: 0.2em 26px 0.2em 6px;
background-position: right 6px center;
}
.single-tip-content{
width: 100%;
border-radius: 8px 8px 0 0;
bottom: 0;
left: 0;
position: fixed;
}
.single-tip-bg{
background-color: rgba(0, 0, 0, 0.5);
}
}