@charset "utf-8";
/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600);*/
/*@import url('https://fonts.googleapis.com/css?family=Lato:100,100i&display=swap');*/
.icon {
    /*font-family: "Open Sans", sans-serif;*/
    font-weight: 300;
    --size-coefficient: 1; /* produces a 32 x ~45 px icon*/
    display: inline-block;
    width: calc(2rem * var(--size-coefficient));
    height: calc(2rem * 1.4 * var(--size-coefficient));
    border-radius: calc(0.1rem * var(--size-coefficient));
    cursor: pointer;
    position: relative;
    margin: 0 0.25rem;
}

.icon.xsmall {
    --size-coefficient: 0.75;
}

.icon.small {
    --size-coefficient: 0.9;
}

.icon.medium {
    --size-coefficient: 1.1;
}

.icon.large {
    --size-coefficient: 1.25;
}

.icon.larger {
    --size-coefficient: 1.5;
}

.icon.xlarge {
    --size-coefficient: 1.75;
}

.icon.xxlarge {
    --size-coefficient: 2.25;
}

.icon.xxxlarge {
    --size-coefficient: 3;
}

.icon.giant {
    --size-coefficient: 5;
}

.icon.jumbo {
    --size-coefficient: 7.5;
}

.icon::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-radius: 0 calc(0.1rem * var(--size-coefficient));
    transition: all 200ms ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* .docs, .docx, .pages*/
.icon.doc,
.icon.docx,
.icon.dotx,
.icon.pages {
    background-image: linear-gradient(225deg, transparent 0, transparent calc(0.5rem * var(--size-coefficient)), #0127b1 calc(0.5rem * var(--size-coefficient)), #3050f0 75%);
    background-size: 150%;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.icon.doc:hover,
.icon.docx:hover,
.icon.dotx:hover,
.icon.pages:hover {
    background-size: 100%;
}

.icon.doc::after,
.icon.docx::after,
.icon.dotx::after,
.icon.pages::after {
    /*background: linear-gradient(45deg, #abb9ff 50%, transparent 50%);*/
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.67) 50%, transparent 50%);
}

.icon.doc i::before,
.icon.docx i::before,
.icon.dotx i::before,
.icon.pages i::before {
    content: "☰";
}

.icon.pdf {
    background-image: linear-gradient(225deg, transparent 0, transparent calc(0.5rem * var(--size-coefficient)), #761a23 calc(0.5rem * var(--size-coefficient)), #ad1c2c 75%);
    background-size: 150%;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.icon.pdf:hover {
    background-size: 100%;
}

.icon.pdf::after {
    /*background: linear-gradient(45deg, #ffabb5 50%, transparent 50%);*/
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.67) 50%, transparent 50%);
}

.icon.pdf i::before {
    content: "☵";
}

/* .zip, .rar */
.icon.compressed,
.icon.rar,
.icon.zip {
    background-image: linear-gradient(225deg, transparent 0, transparent calc(0.5rem * var(--size-coefficient)), #666 calc(0.5rem * var(--size-coefficient)), #acacac 75%);
    background-size: 150%;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.icon.compressed:hover,
.icon.rar:hover,
.icon.zip:hover {
    background-size: 100%;
}

.icon.compressed::after,
.icon.rar::after,
.icon.zip::after {
    /*background: linear-gradient(45deg, #f0f0f0 50%, transparent 50%);*/
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.67) 50%, transparent 50%);
}

.icon.compressed i::before,
.icon.rar i::before,
.icon.zip i::before {
    /*content: "🗜";*/
    content: "🝠"; /*alchemical symbol for distill*/
}

/* .mp3, .wma, .flac, .m4a */
.icon.sound,
.icon.mp3,
.icon.wma,
.icon.flac,
.icon.m4a {
    background-image: linear-gradient(225deg, transparent 0, transparent calc(0.5rem * var(--size-coefficient)), #5d2e73 calc(0.5rem * var(--size-coefficient)), #8e44ad 75%);
    background-size: 150%;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.icon.sound:hover,
.icon.mp3:hover,
.icon.wma:hover,
.icon.flac:hover,
.icon.m4a:hover {
    background-size: 100%;
}

.icon.sound::after,
.icon.mp3::after,
.icon.wma::after,
.icon.flac::after,
.icon.m4a::after {
    /*background: linear-gradient(45deg, #e6abff 50%, transparent 50%);*/
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.67) 50%, transparent 50%);
}

.icon.sound i::before,
.icon.mp3 i::before,
.icon.wma i::before,
.icon.flac i::before,
.icon.m4a i::before {
    content: "♫";
}

/* .mp4, .wmv, .mov, .avi, .mkv */
.icon.video,
.icon.mp4,
.icon.wmv,
.icon.mov,
.icon.avi,
.icon.mkv {
    background-image: linear-gradient(225deg, transparent 0, transparent calc(0.5rem * var(--size-coefficient)), #532ca5 calc(0.5rem * var(--size-coefficient)), #7a3ce7 75%);
    background-size: 150%;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.icon.video:hover,
.icon.mp4:hover,
.icon.wmv:hover,
.icon.mov:hover,
.icon.avi:hover,
.icon.mkv:hover {
    background-size: 100%;
}

.icon.video::after,
.icon.mp4::after,
.icon.wmv::after,
.icon.mov::after,
.icon.avi::after,
.icon.mkv::after {
    /*background: linear-gradient(45deg, #c8abff 50%, transparent 50%);*/
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.67) 50%, transparent 50%);
}

.icon.video i::before,
.icon.mp4 i::before,
.icon.wmv i::before,
.icon.mov i::before,
.icon.avi i::before,
.icon.mkv i::before {
    content: "▶";
}

/* .bmp, .jpg, .jpeg, .gif, .png */
.icon.image,
.icon.bmp,
.icon.jpg,
.icon.jpeg,
.icon.gif,
.icon.png,
.icon.svg,
.icon.tif,
.icon.tiff {
    background-image: linear-gradient(225deg, transparent 0, transparent calc(0.5rem * var(--size-coefficient)), #bd8c00 calc(0.5rem * var(--size-coefficient)), #f4b400 75%);
    background-size: 150%;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.icon.image:hover,
.icon.bmp:hover,
.icon.jpg:hover,
.icon.jpeg:hover,
.icon.gif:hover,
.icon.png:hover,
.icon.svg:hover,
.icon.tif:hover,
.icon.tiff:hover {
    background-size: 100%;
}

.icon.image::after,
.icon.bmp::after,
.icon.jpg::after,
.icon.jpeg::after,
.icon.gif::after,
.icon.png::after,
.icon.svg::after,
.icon.tif::after,
.icon.tiff::after {
    /*background: linear-gradient(45deg, #ffdd80 50%, transparent 50%);*/
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.67) 50%, transparent 50%);
}

.icon.image i::before,
.icon.bmp i::before,
.icon.jpg i::before,
.icon.jpeg i::before,
.icon.gif i::before,
.icon.png i::before,
.icon.svg i::before,
.icon.tif i::before,
.icon.tiff i::before {
    content: "🖼";
}

/* .xls, .xlsx, .numbers*/
.icon.sheets,
.icon.xls,
.icon.xlsx,
.icon.numbers {
    background-image: linear-gradient(225deg, transparent 0, transparent calc(0.5rem * var(--size-coefficient)), #0b7a46 calc(0.5rem * var(--size-coefficient)), #0f9d58 75%);
    background-size: 150%;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.icon.sheets:hover,
.icon.xls:hover,
.icon.xlsx:hover,
.icon.numbers:hover {
    background-size: 100%;
}

.icon.sheets::after,
.icon.xls::after,
.icon.xlsx::after,
.icon.numbers::after {
    /*background: linear-gradient(45deg, #a5e6bc 50%, transparent 50%);*/
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.67) 50%, transparent 50%);
}

.icon.sheets i::before,
.icon.xls i::before,
.icon.xlsx i::before,
.icon.numbers i::before {
    content: "⊟";
}

/* .ppt, .pptx, ,potx, .key [keynote] */
.icon.slides,
.icon.ppt,
.icon.pptx,
.icon.potx,
.icon.key {
    background-image: linear-gradient(225deg, transparent 0, transparent calc(0.5rem * var(--size-coefficient)), #aa5200 calc(0.5rem * var(--size-coefficient)), #de5a00 75%);
    background-size: 150%;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.icon.slides:hover,
.icon.ppt:hover,
.icon.pptx:hover,
.icon.potx:hover,
.icon.key:hover {
    background-size: 100%;
}

.icon.slides::after,
.icon.ppt::after,
.icon.pptx::after,
.icon.potx::after,
.icon.key::after {
    /*background: linear-gradient(45deg, #e6a173 50%, transparent 50%);*/
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.67) 50%, transparent 50%);
}

.icon.slides i::before,
.icon.ppt i::before,
.icon.pptx i::before,
.icon.potx i::before,
.icon.key i::before {
    content: "⧉";
}

/* .csv, .xml, .json */
.icon.code,
.icon.xml,
.icon.csv,
.icon.json {
    background-image: linear-gradient(225deg, transparent 0, transparent calc(0.5rem * var(--size-coefficient)), #3f7f25 calc(0.5rem * var(--size-coefficient)), #5eb533 75%);
    background-size: 150%;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.icon.code:hover,
.icon.xml:hover,
.icon.csv:hover,
.icon.json:hover {
    background-size: 100%;
}

.icon.code::after,
.icon.xml::after,
.icon.csv::after,
.icon.json::after {
    /*background: linear-gradient(45deg, #c7ffab 50%, transparent 50%);*/
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.67) 50%, transparent 50%);
}

.icon.code i::before,
.icon.xml i::before {
    content: "</>";
}

.icon.csv i::before {
    content: "\201C, \201D";
}

.icon.json i::before {
    content: "{ ; }";
}

.icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    /*-webkit-transform: translate(-50%, -50%);*/
    transform: translate(-50%, -50%);
    display: block;
    font-size: calc(0.75rem * var(--size-coefficient));
    color: #fff;
    /*font-style: normal;*/
}

.icon i::before, .icon i::after {
    display: block;
    transition: all 200ms ease-in-out;
}

.icon i::before {
    font-style: normal;
    font-weight: 600;
    text-align: center;
    font-size: calc(0.75rem * var(--size-coefficient));
    opacity: 0;
    /*-webkit-transform: translateY(calc(0.25rem * var(--size-coefficient))) !*translateX(calc(0.5rem * var(--size-coefficient)))*!;*/
    transform: translateY(calc(0.25rem * var(--size-coefficient))) /*translateX(calc(0.5rem * var(--size-coefficient)))*/;
}

.icon i::after {
    content: attr(title);
    /*-webkit-transform: translateY(calc(-0.25rem * var(--size-coefficient)));*/
    transform: translateY(calc(-0.25rem * var(--size-coefficient)));
}

.icon:hover {
    border-radius: calc(0.1rem * var(--size-coefficient)) /*0.15rem 0.1rem 0.1rem*/;
}

.icon:hover::after {
    width: calc(0.7rem * var(--size-coefficient));
    height: calc(0.7rem * var(--size-coefficient));
}

.icon:hover i::before {
    /*-webkit-transform: translateY(0) !*translateX(0)*!;*/
    transform: translateY(0) /*translateX(0)*/;
    opacity: 1;
}

.icon:hover i::after {
    /*-webkit-transform: translateY(0);*/
    transform: translateY(0);
}