/*

quark-dark-side-user.css
Userland CSS Classes:
Relevant for content, but not for the theme itself.
(c)2019-2020 Harald Schneider

*/

/* Full width container mixin */

.full-width {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Typography related */

.fw-100 {
    font-weight: 100;
}
.fw-700 {
    font-weight: 700;
}

/* Image related */

.lfloat {
    float: left;
    margin:10px;
    margin-top: 4px;
}
.rfloat {
    float: right;
    margin:10px;
    margin-top: 4px;
}

.round-5 {
    border-radius: 5px;
}
.round-25 {
    border-radius: 25px;
}
.-rotate-5 {
    -ms-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.rotate-5 {
    -ms-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}
.shadow-small {
    box-shadow: 5px 5px 10px #ccc;
    -webkit-box-shadow: 5px 5px 10px #ccc;
    -moz-box-shadow: 5px 5px 10px #ccc;
}
.shadow {
    box-shadow: 10px 10px 20px #666;
    -webkit-box-shadow: 10px 10px 20px #666;
    -moz-box-shadow: 10px 10px 20px #666;
    margin: 20px;
}
.img-circle {
    border-radius: 50%;
}
.img-border-1 {
    border:1px solid #021a40;
}
.img-hover:hover {
    -moz-box-shadow: 0 5px 10px #c7c7c7;
    -webkit-box-shadow: 0 5px 10px #c7c7c7;
    box-shadow: 0 5px 10px #c7c7c7;
    -moz-transform: translate(0, -3px);
    -ms-transform: translate(0, -3px);
    -webkit-transform: translate(0, -3px);
    transform: translate(0, -3px);
    transition: all 0.3s;
}
.img-rotate-nozoom {
    border: none !important;
    opacity: 1;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s, -webkit-transform 1s;
}
.img-rotate-nozoom:hover {
    border: none !important;
    -ms-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
}
.img-rotate-zoom {
    opacity: 1;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s, -webkit-transform 1s
}
.img-rotate-zoom:hover {
    -ms-transform: scale(1.3) rotate(5deg);
    -moz-transform: scale(1.3) rotate(5deg);
    -webkit-transform: scale(1.3) rotate(5deg);
    -o-transform: scale(1.3) rotate(5deg);
    transform: scale(1.3) rotate(5deg);
}

.img-zoom {
    opacity: 1;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s, -webkit-transform 1s
}
.img-zoom:hover {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

/* Margins */

.m-20 {
    margin: 20px;
}
.mt-20 {
    margin-top: 20px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mtb-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.ml-20 {
    margin-left: 20px;
}
.mr-20 {
    margin-right: 20px;
}

.m-40 {
    margin: 40px;
}
.mt-40 {
    margin-top: 40px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mtb-40 {
    margin-top: 40px;
    margin-bottom: 40px;
}
.ml-40 {
    margin-left: 40px;
}
.mr-40 {
    margin-right: 40px;
}