html{
width: 100%;
height: 100%;
background-color: #f6f3ef;
color: #222;
font-size: 1em;
line-height: 1.4;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
body{
width: 100%;
height: 100%;
}
*,*:before,*:after{
box-sizing: inherit;
}
::-moz-selection{
background: #b3d4fc;
text-shadow: none;
}
::selection{
background: #b3d4fc;
text-shadow: none;
}
audio,
canvas,
iframe,
img,
svg,
video{
vertical-align: middle;
}
fieldset{
border: 0;
margin: 0;
padding: 0;
}
textarea{
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade{
padding:10px;
background: #fff;
color: #222;
font-size:0.85rem;
text-align: center;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
h1{
font-family: 'Playfair Display';
font-size: 2.25em; /* 36 / 16 */
line-height: 1.625em; /* 26 / 16 (1.4) */
margin-bottom: .22em; /* 8 / 36 */
}
h2{
font-family: 'Playfair Display';
font-size: 1.7em; /* xx / 16 */
line-height: 1.625em; /* 26 / 16 (1.4) */
margin-bottom: .2666em; /* 8 / xx */
}
h2.nu_site{
font-family: "Source Sans 3", "Alegreya Sans";
font-weight: 700;
text-transform: uppercase;
}
h3{
font-family: 'Playfair Display';
font-size: 1.4375em; /* 22 / 16 */
line-height: 1.375em; /* 26 / 16 */
margin-bottom: .3636em; /* 8 / 22 */
font-weight: 400;
}
h4{
font-family: 'Playfair Display';
font-size: 1.125em; /* 18 / 16 */
line-height: 1.625em; /* 26 / 16 */
margin-bottom: .4444em; /* 8 / 18 */
font-weight: 400;
}
h5{
font-family: 'Playfair Display';
font-size: 1em; /* 18 / 16 */
line-height: 1.625em; /* 26 / 16 */
margin-bottom: .5em; /* 8 / 18 */
font-weight: 400;
}
p{
font-size: 1em; /* 16 / 16 */
font-size: .95em;
line-height: 1.525em; /* 26 / 16 */
margin-bottom: .5em; /* 8 / 16 */
font-weight: 300;
}
p.nu_site{
font-family: "Source Sans 3";
font-weight: 500;
}
a.nu_site:hover {
background: linear-gradient(180deg, rgba(235, 235, 235, 1) 0%, rgba(180, 180, 180, 1) 100%);
}
a.nu_site{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1.8rem;
font-family: "Source Sans 3";
padding: 1rem 2.5rem;
background-color: #ffaf38;
background-color: #ddd;
width: 300px;
background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(200, 200, 200, 1) 100%);
font-size: 1.4rem;
font-weight: 700;
text-transform: uppercase;
border-radius: 5px;
color: #000;
box-shadow: 0px 1px 3px #000;
}
p + p{
margin-top: 10px;
}
a:hover{
color: #ff8a00;
}
a{
color: #ff8a00;
color: #000;
text-decoration: none;
}
hr{
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
hr._divider{
margin-top:30px;
}
hr._spaced{
margin: 40px 0;
}
hr._dark{
border-top: 1px solid #222;
}
hr._semidark{
border-top: 1px solid #999;
}
table{
width: 100%;
margin-bottom: 20px;
}
table td.off{
text-decoration: line-through;
}
table._limitedx{
max-width: 600px;
}
table._tri td{
width: 33%;
}
table._price-quad th + th{
width: 20%;
}
table._price-quad td + td{
width: 20%;
}
table._price-penta th + th{
width: 15%;
}
table._price-penta td + td{
width: 15%;
}
table._price-dual th + th{
width: 20%;
}
table._price-dual td + td{
width: 20%;
}
table._price-hepta th + th{
width: 11%;
}
table._price-hepta td + td{
width: 11%;
}
@media screen and (max-width: 650px){
table._tri td{
width:25%;
}
table._tri td:nth-child(2){
width:50%;
}
}
@media screen and (max-width: 550px){
table._tri td{
font-size: .75rem;
}
}
@media screen and (max-width: 460px){
table._tri td:nth-child(2){
display: none;
}
}
table._center td:first-child{
text-align: center;
}
tr:nth-child(even){
background-color: #fff;
}
table._none tr:nth-child(even){
background-color: transparent;
}
table._none tr:nth-child(odd){
background-color: #fff;
}
td, th{
padding: 10px;
vertical-align: middle;
}
th{
font-size: .8rem;
font-weight: bold;
}
td{
text-align: center;
font-size: .9rem;
}
td:first-child,th:first-child{
text-align: left;
}
table._center td, table._center th{
text-align: center;
}
td span{
display: block;
margin-top: 2px;
font-size: .8rem;
font-weight: 300;
}
td span._next{
display: inline;
margin-top: 2px;
padding-left:10px;
font-size: .7rem;
font-weight: 300;
}
td span._light{
display: inline;
margin-top: 0px;
font-size: .9rem;
font-weight: 300;
}
@media screen and (max-width: 800px){
td._td_adapt_hide, th._td_adapt_hide{
display: none;;
}
table._price-hepta th + th{
width: 20%;
}
table._price-hepta td + td{
width: 20%;
}
table._price-penta th + th{
width: 12%;
}
table._price-penta td + td{
width: 12%;
}
}
strong{
font-weight: 700;
}
em{
font-size: .85em;
padding-left: 20px;
font-style: italic;
}
img{
max-width: 100%;
}
header{
background: #f8f8f8;
background: #111;
background: rgba(136,0,0,1);
border-bottom: 1px solid #000;
}
header a:hover{
color: #000;
}
header nav{
max-width: 1200px;
margin: 0 auto;
padding: 15px 20px;
}
header nav li{
float: left;
margin-right: 30px;
}
header nav li + li{
float: right;
margin-top: 17px;
}
header nav li:nth-child(2), header nav li:first-child{
margin-right: 0px;
}
header .header-adapt-show{
display: none;
}
@media screen and (max-width: 720px){
header nav li + li{
margin-right: 20px;
}
}
@media screen and (max-width: 680px){
header nav a span{
display: none;
}
}
@media screen and (max-width: 480px){
header nav li + li{
margin-right: 10px;
}
}
@media screen and (max-width: 420px){
.link-header-menu._adapt-hide{
display: none;
}
header .header-adapt-show{
display: block;
}
header nav .header-adapt-show li{
float: left;
width: 25%;
margin-right: 0;
margin-top: 17px;
text-align: center;
}
}
footer{
background: #222;
color: #666;
border-top: 2px solid #000;
padding-bottom: 15px;
margin-top: 20px;
}
footer nav{
max-width: 1200px;
padding: 30px 20px;
margin: 0 auto;
text-align: center;
}
footer nav a:hover{
color: #ff8a00;
}
footer nav a{
color: #ccc;
font-size: .9rem;
margin: 0 15px;
}
footer a:hover{
color: #ff8a00;
}
footer a{
color: #ccc;
}
footer p span{
font-size: .85em;
}
footer hr{
border-top: 1px solid #000;
border-bottom: 1px solid #333;
margin: 0;
}
footer tr:nth-child(odd){
background-color: #2e2e2e;
}
footer tr:nth-child(even){
background-color: #222;
}
@media screen and (max-width: 750px){
footer nav a:last-child span{
display: none;
}
}
@media screen and (max-width: 700px){
footer nav a{
margin: 0 10px;
}
}
@media screen and (max-width: 620px){
footer nav a{
font-size: .75rem;
}
}
@media screen and (max-width: 650px){
footer td{
font-size: .75rem;
}
}
@media screen and (max-width: 580px){
footer .block-base{
display: none;
}
footer hr{
display: none;
}
}
@media screen and (max-width: 560px){
footer nav a:nth-child(2), footer nav a:nth-child(3){
display: none;
}
}
@media screen and (max-width: 380px){
footer nav a{
margin: 0 5px;
}
}
@media screen and (max-width: 360px){
footer nav a{
display: block;
margin: 20px 0px;
}
}
main ul{
margin-left: 20px;
padding-left: 20px;
}
main li{
text-indent: 10px;
list-style-type: disc;
}
main li._no-indent{
text-indent: 0px;
padding-left:10px;
}
ol{
margin-left: 20px;
}
ol li{
text-indent: 0px;
padding-left: 5px;
list-style-type: decimal;
}
ol li em{
padding-left: 0px;
}
/* ==========================================================================
Block
========================================================================== */
.wrapper{
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
.block-base{
max-width: 1200px;
margin: 0 auto;
padding: 40px;
}
.block-base._nearer{
padding: 40px 40px 0 40px;
}
.block-base._upclose{
padding: 0px 40px 40px 40px;
}
.block-base-limited{
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.block-base-dark{
background-color: #292929;
color: #e3e3e3;
border-top: 3px solid #000;
border-bottom: 3px solid #000;
}
.block-base-dark a:hover{
color: #ff8a00;
}
.block-base-dark a{
color: #fff;
text-decoration: none;
}
.block-base-dark hr{
border-top: 1px solid #111;
border-top: 1px solid #141414;
border-bottom: 1px solid #333;
}
.block-base-grey{
background-color: #d3cec8;
background-color: #fffcf7;
background-color: #f8f8f8;
border-top: 1px solid #333;
border-top: 1px solid #ccc;
}
.block-base-grey._double{
border-bottom: 1px solid #ccc;
}
.block-base-white{
background-color: #fff;
border-top: 1px solid #333;
border-top: 1px solid #ccc;
}
.block-content-limited{
max-width: 600px;
}
.block-content-large-small{
float: left;
width: calc(100% - 400px);
padding-right: 20px;
}
.block-content-large-small + .block-content-large-small{
width: 400px;
padding-right: 0px;
padding-left: 20px;
}
.block-content-dual{
float: left;
width: calc(100% - 600px);
padding-right: 20px;
}
.block-content-dual + .block-content-dual{
width: 600px;
padding-right: 0px;
padding-left: 20px;
}
.block-content-dual._reverse{
width: 600px;
}
.block-content-dual._reverse + .block-content-dual._reverse{
width: calc(100% - 600px);
}
.block-content-dual._reverse._adapt-show{
display: none;
}
@media screen and (max-width: 1000px){
.block-content-large-small{
width: 60%;
}
.block-content-large-small + .block-content-large-small{
width: 40%;
}
.block-content-dual, .block-content-dual + .block-content-dual, .block-content-dual._reverse, .block-content-dual._reverse + .block-content-dual._reverse{
width: 50%;
}
}
@media screen and (max-width: 800px){
.block-content-large-small{
float: none;
width: 100%;
padding-right: 0px;
}
.block-content-large-small + .block-content-large-small{
display: none;
}
.block-content-dual._adapt-hide{
display: none;
}
.block-content-dual._reverse._adapt-hide{
display: none;
}
.block-content-dual._reverse._adapt-show{
display: block;
}
.block-content-dual, .block-content-dual._reverse{
float: none;
width: 100%;
padding-right: 0px;
}
.block-content-dual + .block-content-dual{
width: 100%;
padding-left: 0px;
padding-top: 40px;
}
.block-content-dual._reverse + .block-content-dual._reverse{
width: 100%;
padding-left: 0px;
padding-top: 0px;
}
.block-content-dual._reverse + .block-content-dual._reverse + .block-content-dual._reverse{
padding-top: 40px;
}
}
.block-content-half{
width: 50%;
float: left;
}
.block-content-half._nextto{
padding-right: 20px;
}
.block-content-half._nextto + .block-content-half._nextto{
padding-left: 20px;
}
.block-content-half._thinner{
padding: 0 50px;
}
.block-content-half._spaced{
padding: 0 20px;
}
@media screen and (max-width: 900px){
.block-content-half{
width: 100%;
float: none;
}
.block-content-half._nextto{
padding: 0;
text-align: center;
}
.block-content-half._nextto + .block-content-half._nextto{
padding: 0;
text-align: center;
padding-top:20px;
}
.block-content-half._spaced{
width: 50%;
float: left;
}
.block-content-half + .block-content-half{
margin-top:20px;
}
.block-content-half._spaced + .block-content-half._spaced{
margin-top:0px;
}
.block-content-half._thinner{
padding: 0 0;
}
}
.block-content-quad{
width:25%;
float:left;
text-align: center;
font-size: .8rem;
}
.block-content-quad span{
display: block;
margin-top:5px;
font-size: .85rem;
font-weight: 700;
color:#000;
}
.block-content-quad._tri{
width:33%;
}
.block-content-quad-template{
width:25%;
float:left;
text-align: center;
padding-right: 20px;
padding-left: 20px;
}
.block-content-tri{
float: left;
width: 33%;
padding-right: 20px;
padding-left: 20px;
}
/*
.block-content-tri + .block-content-tri{}
.block-content-tri + .block-content-tri + .block-content-tri{}
*/
/*.products-adapt-hide{}*/
.products-adapt-show{
display: none;
}
/*.adapt-tri-hide{}*/
.adapt-tri-show{
display: none;
}
@media screen and (max-width: 930px){
.products-adapt-hide{
display: none;
}
.products-adapt-show{
display: block;
}
}
@media screen and (max-width: 700px){
.products-adapt-hide{
display: block;
}
.products-adapt-show{
display: none;
}
hr._products_adapt_hide{
display: none;
}
.block-content-tri{
float: none;
width: 100%;
padding-right: 0px;
padding-left: 0px;
margin: 0 auto;
}
.block-content-tri._adapt_spaced{
padding-top: 80px;
}
.adapt-tri-hide{
display: none;
}
.adapt-tri-show{
display: block;
}
}
@media screen and (max-width: 930px){
footer .block-content-tri:last-child{
display: none;
}
footer .block-content-tri{
width: 50%;
}
}
@media screen and (max-width: 700px){
footer .block-content-tri{
float: left;
width: 50%;
padding-right: 20px;
padding-left: 20px;
}
}
@media screen and (max-width: 580px){
footer .block-content-tri{
display: none;
}
}
.block-divider{
margin-top: 30px;
}
.block-divider-small{
margin-top: 20px;
}
.block-new-order{
display: flex;
}
/* ==========================================================================
Links
========================================================================== */
.link-color:hover{
color: #000;
}
.link-color{
color: #ff8a00;
}
.link-logo{
display: block;
width: 95px;
height: 47px;
background-position: center center;
background-repeat: no-repeat;
background-image: url('../gfx/item-logo-white.png');
/*font-family: "Afacad", sans-serif;*/
}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.link-logo {
background-size: 95px 47px;
background-image: url('../gfx/item-logo-white@2x.png');
}
}
.link-header-menu{
color: #260000;
color: #222;
color: #fff;
font-size: 1.0rem;
font-weight: 500;
/*
text-decoration: underline;
text-decoration-color: #fff;
*/
}
@media screen and (max-width: 460px){
.link-header-menu{
font-size: .9em;
}
}
.link-icon-arrows{
width: 11px;
height: 14px;
background-repeat: no-repeat;
background-position: left center;
padding-left:20px;
padding-bottom:1px;
}
.link-icon-arrows._light{
background-image: url('../gfx/icon-arrows-light.png');
}
.link-icon-arrows._dark{
background-image: url('../gfx/icon-arrows-dark.png');
}
/* ==========================================================================
Texts
========================================================================== */
.text-smaller{
font-size: .9em;
}
.text-tinier{
font-size: .7em;
}
.text-strong{
font-weight: 700;
}
.text-footer-bottom{
font-size: .8rem;
}
.text-divider{
margin-top:20px;
}
.text-icon{
background-repeat: no-repeat;
background-position: left center;
padding-left:25px;
padding-bottom:1px;
}
.text-icon._cloud{
background-image: url('../gfx/icon-cloud.png');
}
.text-icon._file{
background-image: url('../gfx/icon-file.png');
}
/* ==========================================================================
Images
========================================================================== */
.image-free-standard{
border: 2px solid #000;
}
.image-free-standard-thin{
border: 1px solid #000;
}
.image-free-shadow{
box-shadow: 0px 1px 2px rgba(0,0,0,.3);
}
.image-free-template{
border: 0px solid #aaa;
margin: 10px 10px;
box-shadow: 0px 1px 2px rgba(0,0,0,.3);
}
.image-banner{
display: block;
min-width: 100%;
border-radius: 0px;
border-bottom: 1px solid #000;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
overflow: hidden;
}
.image-banner h1{
color:#fff;
max-width: 1200px;
margin: 0 auto;
padding: 40px;
}
.image-banner h3{
color:#fff;
max-width: 1200px;
margin: 0 auto;
padding: 40px;
}
.image-banner-free{
margin-top:30px;
text-align: center;
}
.image-banner-start{
background-image: url('../gfx/image-banner-start.jpg');
/*background-image: url('../gfx/gallery-home.png');*/
/*background-image: url('../gfx/image-banner-start-jul.jpg');*/
background-position: 50% 35%;
/*background-position: 50% 70%;*/
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-start{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-start{
height: 200px;
}
}
.image-banner-shai{
background-image: url('../gfx/shai-banner.jpg');
background-position: 50% 40%;
height: 400px;
}
.image-banner-shai2{
background-image: url('../gfx/shai-banner2.jpg');
background-position: 50% 40%;
height: 400px;
}
.image-banner-fineart{
background-image: url('../gfx/image-banner-fineart.jpg');
background-position: 50% 15%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-fineart{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-fineart{
height: 200px;
}
}
.image-banner-monteringar{
background-image: url('../gfx/image-banner-monteringar.jpg');
background-position: 50% 30%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-monteringar{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-monteringar{
height: 200px;
}
}
.image-banner-ramar{
background-image: url('../gfx/image-banner-ramar.jpg');
background-position: 50% 50%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-ramar{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-ramar{
height: 200px;
}
}
.image-banner-foto{
background-image: url('../gfx/image-banner-foto.jpg');
background-position: 50% 30%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-foto{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-foto{
height: 200px;
}
}
.image-banner-canvastavlor{
background-image: url('../gfx/image-banner-canvastavlor.jpg');
background-position: 50% 30%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-canvastavlor{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-canvastavlor{
height: 200px;
}
}
.image-banner-skanning{
background-image: url('../gfx/image-banner-skanning.jpg');
background-position: 50% 30%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-skanning{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-skanning{
height: 200px;
}
}
.image-banner-framkallning{
background-image: url('../gfx/image-banner-framkallning.jpg');
background-position: 50% 60%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-framkallning{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-framkallning{
height: 200px;
}
}
.image-banner-tackkort{
background-image: url('../gfx/image-banner-tackkort.jpg');
background-position: 50% 15%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-tackkort{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-tackkort{
height: 200px;
}
}
.image-banner-tackkort-student{
background-image: url('../gfx/image-banner-tackkort-student.jpg');
background-position: 50% 10%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-tackkort-student{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-tackkort-student{
height: 200px;
}
}
.image-banner-book{
background-image: url('../gfx/image-banner-book.jpg');
background-position: 50% 40%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-book{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-book{
height: 200px;
}
}
.image-banner-julkort{
background-image: url('../gfx/image-banner-julkort.jpg');
background-position: 50% 25%;
height: 420px;
}
@media screen and (max-width: 700px){
.image-banner-julkort{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-julkort{
height: 200px;
}
}
.image-banner-calendar{
background-image: url('../gfx/image-banner-calendar.jpg');
background-position: 50% 80%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-calendar{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-calendar{
height: 200px;
}
}
.image-banner-fotolabb{
background-image: url('../gfx/image-banner-fotolabb.jpg');
background-position: 50% 40%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-fotolabb{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-fotolabb{
height: 200px;
}
}
.image-banner-studentplakat{
background-image: url('../gfx/banner.png');
background-position: 50% 50%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-studentplakat{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-studentplakat{
height: 200px;
}
}
.image-banner-kontakt{
background-image: url('../gfx/image-banner-kontakt.jpg');
background-position: 50% 50%;
height: 400px;
}
@media screen and (max-width: 700px){
.image-banner-kontakt{
height: 300px;
}
}
@media screen and (max-width: 580px){
.image-banner-kontakt{
height: 200px;
}
}
/* ==========================================================================
Buttons
========================================================================== */
a.button-order:hover{
background: linear-gradient(to bottom, rgba(88,88,88,1), rgba(61,61,61,1));
color: #ddd;
}
a.button-order{
display: block;
margin:0 auto;
width: 300px;
height: 80px;
padding-top:20px;
background: linear-gradient(to bottom, rgba(78,78,78,1), rgba(51,51,51,1));
box-shadow: 0px 1px 5px rgba(0,0,0,.25);
color: #ddd;
border-radius: 3px;
font-size: 1.3rem;
font-family: 'Playfair Display';
text-align: center;
}
.button-order span{
display: block;
font-family: 'Roboto';
font-size: .9rem;
font-weight: 300;
line-height: 2.2;
}
.button-order.white:hover {
background:#eee;
color: #444;
}
.button-order.white {
background: linear-gradient(to bottom, rgba(250,250,250,1), rgba(225,225,225,1));
font-family: 'Roboto';
font-weight: 700;
color: #444;
}
.button-order.white span {
font-weight: 500;
}
/* ==========================================================================
General
========================================================================== */
._align-center{
text-align: center;
}
#map{
height:400px;
display: block;
min-width: 100%;
border-radius: 0px;
border-bottom: 1px solid #000;
}
@media screen and (max-width: 700px){
#map{
height: 300px;
}
}
@media screen and (max-width: 580px){
#map{
height: 200px;
}
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
white-space: inherit;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster */
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}