body  {
    margin:0;
    padding:0;
    font-family: 'Helvetica';
    background-color: rgb(0, 0 , 0);
    overflow: hidden;
}

.vjs-poster {     background-size: cover!important;     object-fit: cover!important; }  
video[poster] {     object-fit: cover;     background-color:transparent; }


.content {
    margin: 0 !important;
    max-width: unset !important;
    overflow: hidden;
}

#main-splash {
    position: absolute;
    right: 0px;
    width: 75%;
    top: 10%;
}

.tag-line {
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    position: absolute;
    left: 50%;
    width: 60%;
    text-align: center;
    transform: translateX(-50%);
    top: 56%;
    opacity: 0.6;
}

.desc {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 55%;
    color: #fff;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0.5;
}

.page-bg {
    background-image: url(/pixelpi.pe/static/imgs/pagebj.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    background-position: center center;
    opacity: 0.4;
    background-size: cover;
}

#main-logo {
    position: absolute;
    width: 50%;
    max-width: 500px;
    left: 50%;
    transform: translateX(-50%);
    top: 41%;
}

iframe {
    border: 0px;
    width: 100%;
    height: 720px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.home-text h1.main-home-title {
    font-size: 7vw;
    font-weight: bold;
    line-height: 6.4vw;
    margin-top: -9vw;
}

.capitalize {
    text-transform: capitalize;
}

.right-navigation {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 2;
}

.input-show, .span-to-input input, input {
    font-family: 'Rubik', sans-serif;
    letter-spacing: 0.03em;
    font-weight: bold;
}

.notice {
    border: 1px solid rgb(216 216 216);
    padding: 12px 10px;
    margin: 10px 0px 0px 0px;
    border-radius: 2px;
    box-shadow: 3px 3px 6px #4c4c4c1a;
    font-size: 12px;
    margin-bottom:-5px
}

.notice.status-400 {
    background-color: #ff0023;
    border-color: #af0018;
    color: white;
}

.notice.status-200 {
    background-color: #00ffad;
    border-color: #00da94;
    color: #003817;
}

.notice:before {
    width: 16px;
    height: 17px;
    display: inline-block;
    position: relative;
    z-index: 1;
    background-size: 17px;
    background-repeat: no-repeat;
    margin-right: 9px;
    margin-bottom: -4px;
    opacity: 1;
    margin-top: -2px;
}

.notice.status-400:before {
    content: ' ';
    background-image: url(/lockpic.io/static/imgs/warning.png);
}

.notice.status-200:before {
    content: ' ';
    background-image: url(/lockpic.io/static/imgs/confirm-green.png);
}

p.text {
    font-size: 0.9vw;
    font-weight: normal;   
}

.icon {

}



.page-content img.page-image,
.page-image {
     margin: 4vw 0px;
    max-width: 129%;
    width: 126%;
    margin-left: -13%;
}

.icon.x-small {
    width: 26px;
}

.icon.small {
    width: 50px;
}

.btn {
    display: inline-block;
    color: #000;
    padding: 8px 10px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    background-color: white;
    border: 3px solid #000;
    box-shadow: 2px 3px 5px #38383829;
    font-weight: bolder;
}

.btn.small {
    padding: 5px 10px;
}

.btn.small {

}


.btn img {
    position: relative;
    width: 15px;
    vertical-align: middle;
    margin-right: 7px;
    display: inline-block;
    margin-top: -2px;
    margin-left: -2px;
    border-right: 1px solid #b7b7b7;
    padding-right: 5px;
}

.btn.small img {
    
}

.btn.grey {
    border: 1px solid #c7c7c7;
    background-color: #eaeaea;
    color: #545454;
    text-shadow: 1px 1px 1px white;
}

.btn:hover {
    background-color: rgb(226, 226, 226);
}

.btn.hover-dim {
    opacity: 0.5;
}

.btn.hover-dim:hover {
    opacity: 1;
}

.btn.transparent {
    background-color: transparent;
}

.btn.color-white {
    color:white
}

.btn.underline {
    border: 0px;
    border-bottom: 2px solid #191919;
    padding: 2px 0px;
    border-radius:0px;
    box-shadow: none;
}

.btn.underline.small {
    border-bottom-width: 1px;
}


.btn.underline.color-white {
    border-bottom: 2px solid white;
}

.cus-select {
    display: inline-block;
    border: 1px solid #8a8a8a;
    position: relative;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 1px;
    opacity: 0.75;
    cursor: pointer;
    box-shadow: 1px 2px 4px #cccccc;
    background-color: #ffffffd4;
    border-radius: 2px;
}

.line:hover .cus-select {
    opacity: 1;
}

.cus-select.no-select {
    cursor:default;
}

.cus-select:after {
    content: " ";
    background-image: url(/lockpic.io/static/imgs/select-arrow.png);
    display: inline-block;
    height: 15px;
    width: 15px;
    position: absolute;
    right: 3px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#current-options.cus-select:after {
    transform: translateY(-50%) rotate(180deg);
    position: absolute;
    top: 4px;
    z-index: 1;
    display: block;
    left: 20px;
    display: none;
}

.cus-select.no-select:after {
    display: none;
}

.cus-select.col-res {
    width: auto;
}

.options.cus-select.col-res {
    width: 160px;
}

.options.big.cus-select.col-res {
    width: 300px;
}


.cus-select.col-res input {
    width: 40%;
}

.cus-select.no-select.col-res input {
    width: 48%;
    text-align: right;
}

.cus-select .icon {
    display: inline-block;
    width: 20px;
    vertical-align: middle;
    border-right: 1px solid #8a8a8a;
    text-align: center;
    padding: 4px;
    background-color: whitesmoke;
}

.cus-select .icon img {
    width: 69%;
}

.cus-select .icon.no-border {
    border-right-width: 0px;
}

#current-options {

}

.options {
    display: none;
    vertical-align: middle;
    position: absolute;
    width: 160px;
    border: 1px solid black;
    box-shadow: 1px 2px 4px #cccccc;
    transform: translate(-20px, 20px);
    background-color: #ffffffed;
    max-height: 190px;
    overflow-y: auto;
    border-radius: 3px;
    z-index: 1;
}

.options .option {
    padding: 8px 0px;
    text-indent: 5px;
    border-bottom: 1px solid #9e9e9e;
    box-shadow: 1px 2px 4px rgb(56 56 56 / 8%);
    font-size: 11px;
    cursor: pointer;
}

#current-options.options.big .option {
    max-width: 300px;
    overflow-x: auto
}

.options .option span {
    text-transform:capitalize;
}

.options .option:hover {
    background-color: rgb(243, 243, 243);
}

.options .option:last-child {
    border-bottom: 0px solid #e2e2e2;
    box-shadow: 1px 2px 4px transparent;
}

.options .option img {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    margin-right: 5px;
    padding: 0px 4px;
}

.cus-select input {
    display: inline-block;
    width: 80%;
    vertical-align: middle;
    background: transparent;
    outline: none;
    border: none;
    margin: -2px 0px;
    font-size: 12px;
    text-indent: 5px;
    cursor: pointer;
    color:black;
    text-transform: capitalize;
}

.cus-select.no-select input {
    cursor: default;
}

.header {
    margin: 0 auto;
    max-width: 1500px;
    position: relative;
}

#olins_logo {
    position: fixed;
    top: 30px;
    right: 30px;
    width: unset;
    z-index: 2;
    text-align: right;
}

#cie_logo {
    width: 12vw;
    position: fixed;
    margin-left: 0px;
    top: 30px;
    z-index: 10;
    left: 30px;
}


.extra-menu {
    position: absolute;
    right: 50%;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
    top: 38px;
    z-index: 2;
    transform: translate(50%, 0%);
}

.lockpic-tool {
    border: 2px solid black;
    font-weight: bold;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    cursor:pointer;
}

.lockpic-tool.lockpic-add {

}


.lockpic-tool .icon {
    width: 13px;
    padding: 5px 7px;
    display: inline-block;
    vertical-align: middle;
    border-right: 2px solid black;
    background-color: #efefef;   
}

.icon.no-border {
    border-right-width: 0px;
}


.lockpic-tool.lockpic-add .icon {
    padding: 4px;
    width: 15px;
    top: -1px;
    position: relative;
    background-color: transparent;
}

.lockpic-tool:hover {
    background-color: rgb(128, 128, 128);
}


.lockpic-tool.lockpic-add .icon img {
    
}

.lockpic-tool .label {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
}

.lockpic-tool span {
    padding: 0px 7px;
}


.section .section-content {
    border: 1px solid rgb(216 216 216);
    padding: 0px;
    margin:20px 0px;
    border-radius: 2px;
    box-shadow: 3px 3px 6px #4c4c4c1a;
    position: relative;
}

.section.tiles .section-content {
    border-color:transparent;
    box-shadow: none;
}

.section .section-content.header {

}

.section.tiles .section-content.header .label {
    display: none;
}

.section.tiles .section-content.header {
    display: none;
}

.section .section-content.header .col {
    padding: 0px 10px;
}

.section .section-content.requesting {

}

.section .line.requesting:before,
.section .section-content.requesting:before {
    content: "working ...";
    display: inline-block;
    position: absolute;
    z-index: 2;
    font-size: 10px;
    text-align: center;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.section .line.requesting:after,
.section .section-content.requesting:after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: #efefefc4;
    display: block;
    z-index: 1;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
}

.section .section-content .label {
    background-color: #fbfbfb;
    border-bottom: 1px solid #dedede;
    padding: 5px 0px;
    text-indent:10px;
    margin-bottom:0px;
}

.section .section-content .input-show {
    display: inline-block;
    border: 0px solid #ccc;
    padding: 14px 10px;
    font-size: 17px;
}

.layout-select {

}

.layout-select .layout-icon {
    width: 15px;
    opacity: 0.4;
    cursor: pointer;
    border: 0px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center center;
}

.layout-select:hover .layout-icon {
    opacity: 0.6;
}

.layout-select:hover .layout-icon:hover {
    opacity: 1;
}

.section.tiles .layout-select .layout-icon.tiles {
    opacity: 0.8;
}

.section.full.tiles .layout-select .layout-icon.tiles {
    opacity: 0.4;
}

.section.full.tiles .layout-select .layout-icon.full {
    opacity: 0.9;
}

.section.table .layout-select .layout-icon.table {
    opacity: 0.8;
}

.line {
    padding: 15px 10px;
    border-bottom: 1px solid #e6e6e6;
    box-shadow: 0px 3px 6px #3838380d;
    font-size: 13px;
    position: relative;
}

.line:hover {
    background-color: rgb(248, 248, 248)
}

.section.tiles .line {
    width: 18%;
    height: 300px;
    display: inline-block;
    padding: 0px;
    margin: 1%;
    border-color: transparent;
    box-shadow: none;
    margin-bottom: 80px;
}

.section.full .line {
    width: 100%;
    height: 700px;
    display: inline-block;
    padding:0px;
    margin:10px;
    border-color: transparent;
    box-shadow: none;
    margin-bottom:80px;
}

.line-section {
    padding: 0px 10px;
    display:inline-block;
    vertical-align:middle;
}

.line-section .line-select {
    position: relative;
    width: 10px;
    height: 10px;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid #d6d6d6;
}

.line-section .line-icon {
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    margin: -6px;;
}

.line.small .line-section .line-icon {
    width: 40px;
    height: 40px;
}

.section.tiles .line-section .line-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}


.line-section .line-icon .view-url {
    width: 17px;
    border: 1px solid #292929;
    background-color: whitesmoke;
    border-radius: 2px;
    box-shadow: 1px 2px 0px rgb(84 84 84 / 46%);
    bottom: 5px;
    position: absolute;
    right: 0px;
    text-align: center;
    padding: 0px 1px;
    cursor: pointer;
}

.line-section .line-icon .view-url img {
    width: 80%;
    vertical-align: middle;
    display: inline-block;
}

.line-section .input {
    width: 100%;
    font-size: 12px;
    padding: 10px 10px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    box-shadow: inset -3px -2px 5px #d4d4d475;
}

.line-section .line-icon .inner {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    border-radius: 150px;
    box-shadow: inset -3px -2px 7px rgb(8 8 8 / 58%);
    border: 1px solid #797979;
    cursor: pointer;
}

.section.tiles .line-section .line-icon .inner {
    border-radius: 0px;
    box-shadow: none;
    border:0px
}

.line-section .line-key {
    font-size: 10px;
}

.line-section .line-path {
    font-weight: 400;
    word-break: break-word;
}

.section.tiles .line-section .line-path {
    position: absolute;
    bottom: -60px;
    left: 0px;
    width: 100%;
    font-size: 10px;
}

.line.small .line-section .line-path {
    font-size: 11px
}

.line-section .line-metrics {
    display: inline-block;
    vertical-align: middle;
}

.section.tiles .line-section .line-metrics {
    opacity: 0;
    z-index: -1;
}

.line-section .line-metrics .metric {
    width: 20%;
    display:inline-block;
    margin-right: 5px;
}

.cus-select.col-res:after, 
.cus-select.col-res:before {
    content: "";
    display:none
}


.side-page {
    border-left: 1px solid #dedede;
    box-shadow: -4px 0px 6px #00000012;
}

.side-page .limit-height {
    overflow-y: auto;
    max-height: 290px;
}

.side-page .pad {
    padding: 60px;
}

.side-page-left-part {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 650px;
    height: 100%;
    background-color: rgb(226 226 226 / 60%);
    z-index: -1;
    box-shadow: inset -8px 0px 13px rgb(82 82 82 / 32%);
}

.side-page-left-part .inner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: .95;
    background-color: rgb(27 27 27 / 45%);
    box-shadow: inset -8px 0px 17px #67676787;
    border-right: 1px solid #a7a7a7;
}

.side-page-left-part .inner:hover {
    opacity: 1;
}

.image-viewer {
    border: 1px solid #e0e0e0;
    position: absolute;
    left: 30px;
    top: 210px;
    right: 30px;
    bottom: 60px;
}

.image-viewer.in-content {
    right:650px
}

.image-viewer .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.image-viewer .inner .image-name {
    position: absolute;
    left: 0px;
    top: -40px;
    font-size: 10px;
    opacity: 0.4;
}

.lockpic-image {
    position: absolute;
    width: 230px;
    padding: 10px 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2f2f2f;
    z-index: 1;
    border-radius: 3px;
    color: #eaeaea;
    font-size: 11px;
    text-shadow: -1px -1px 1px #0000004d;
    box-shadow: 3px 3px 5px #1f1f1f4a;
    top: -100px
}

.lockpic-image .icon {
    margin-right: 8px
}

.image-tool {
    position: absolute;
    bottom: -50px;
    font-size: 12px;
    width: 100%;
    padding: 13px 0px;
    font-weight: normal;
}

.toolbar {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 68px;
    padding: 0px 30px;
}

.toolbar.top {
    top: 11px;
    height: 68px;
    padding: 0px 30px;
}

.toolbar.bottom {
    bottom: 0px;
    height: 68px;
    padding: 0px 30px;
}

.toolbar {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 68px;
    padding: 0px 30px;
}

.toolbar .toolbar-pad {
    padding:10px 0px;
}

.toolbar .toolbar-pad .col {
    vertical-align:middle
}

.toolbar .toolbar-pad img,
.toolbar .toolbar-pad span {
    display:inline-block;
    vertical-align: middle;
}

.toolbar .access-reserved {
    background-color: rgb(239 239 239);
    border: 1px solid #dadada;
    border-radius: 3px;
    box-shadow: 3px 3px 7px #2929299e;
    height: 100px;
    position: absolute;
    padding: 10px 22px;
    bottom: -26px;
    z-index: 1;
    font-size: 13px;
    left: 10%;
}

.toolbar .access-reserved img {

}

.box-bg {
    height: 350px;
    position: relative;
    background-color: #f1f1f1;
}

.box-bg .inner {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-size: 200px;
}

#rez {
    min-height:unset;
    padding:5px;
}

.search-icon {
    background-image: url(/static/imgs/search.png?v=ca59eee…);
    width: 15px;
    height: 15px;
    display: inline-block;
    background-size: cover;
    position: relative;
    top: 11px;
    right: 130px;
    z-index: 9999;
}

#main-search-bar {
    position: absolute;
    width: 380px;
    right: 30px;
    top: 30px;
    z-index: -1;
    opacity: 0;
}

.rez-img a {
    width: 207px;
    height: 200px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f2f5;
}

.rez-line .rez-txt {display:none}

.search-icon {
    position: absolute;
}

body.cie-site .page-content.cie-projects.project-page {
    top: 10vw;
    padding: 90px 0;
    right: unset;
    overflow: hidden;
    left: 50%;
    transform: translate(-50%, 0%);
    margin-bottom: 5vw;
}

.full-content {
    position: absolute;
    left: 4vw;
    right: 4vw;
    top:0vw;
}

.full-content h1  {
    font-size: 4vw;
    margin-top: 15px;
}

.index-frame {
    position: relative;
    width: 96%;
    max-width: 2000px;
    margin: 0 auto;
    top: 100px;
    background-color: #efefef;
}


.pad.home-text {
    padding: 20px;
    position: relative;
}

.btn.home {
    padding: 0px;
    letter-spacing: 0.09em;
    font-size: 13px;
    margin-top:40px
}

.btn.home a {
    padding: 10px 15px;
    color:#000;
    display: inline-block;
}

.in-category .home-posts {

}

.home-posts {
    top:105%;
}

.home-projects-btn {
}

#olins_logo span {
    font-size: 12px;
    opacity: 0.6;
    position: relative;
    right: 46px;
    top: 10px;
    color: black;
    padding: 5px;
}

.home-posts.on-home {
    position: absolute;
    top: 95%;
}

body.projects .page-content.centered,
body.quote .page-content.centered,
.page-content.centered {
    width: 71vw;
    max-width: 900px;
}

.page-content.centered .pad {
    padding: 0px 100px;
}

.page-content h1 {
    font-size: 5.3vw;
    margin: 0 0 20px 0;
    text-transform: capitalize;
}

.page-content .lind {
    height: 10px;
}

.page-content.project-page h1 {
    margin-bottom: 200px;
}

.projects-items {
    display: inline-block;
    text-align: center;
    line-height: 2vw;
    text-align: left;
    margin-bottom: 2vw;
    padding: 10px;
    border-radius: 3px;
    width: 22%;
    position: relative;
    vertical-align: top;
}

.projects-items:hover {
    background-color:#f9f9f9
}

.tags .service-page-category-list, 
.projects-items .tags {
    position: absolute;
    bottom: 55px;
    right: 20px;
    width: 86%;
    text-align: right;
}

.projects-items .tags .tag {
    font-size: 9px;
    padding: 2px 5px;
}

.projects-items h3 {
    font-weight: bolder;
    font-size: 15px;
    opacity: 1;
    line-height: 15px;
    text-transform: capitalize;
    margin: 1.2vw 0px;
}

.projects-items h3:hover {
    opacity: 0.7;
}

.projects-items .item-img {
    width: 100%;
    height: 215px;
    background-size: cover;
    margin: 0px 0px 0px 0px;
    background-position: center;
}

#category_cnc .item {
    font-weight: normal;
}

#form-msg-user {
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    margin-top: 9px;
    padding: 2%;
    font-size: 14px;
    font-family: 'IBM Plex Mono';
}

.nouserfield {
    font-size: 12px;
    padding-bottom: 16px;
}

#helper-page #seo_page_title {
    width: 60%;
    margin: 0 auto;
    display: block;
    text-align: center;
    border: none;
    outline: none;
    font-size: 19px;
    font-family: 'IBM Plex Mono', monospace;
    margin-top: 16px;
}



/* Home page */
#custom-simple-home {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#custom-simple-home .frame-background {
    position: absolute;
    width: 100%;
    height: 100%;
}

#custom-simple-home .frame-background .home-img-frame {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 200%;
    background-position: 50% 50%;
    opacity: 0.45;
}

#custom-simple-home .container {
    width: 550px;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    z-index:1;
}

#custom-simple-home .container .col-full-content-pad.content {
    margin-top: 130px;
    min-height: 250px;
    padding: 6px;
    overflow: hidden;
    width: 100%;
    box-shadow: unset;
    border: none;
    border-radius: 0px;
    background-color:transparent;
}

#custom-simple-home .container h1 {
    margin-left: 0px;
    font-size: 110px;
}

#custom-simple-home .container h2 {
    font-size: 21px;
    margin-top: 2px;
}

#custom-simple-home .container h3 {
    font-size: 14px;
    opacity: 0.8;
}

#custom-simple-home .content .btn {
    margin-top: 20px;
    color: rgb(224, 206, 193);
}

.featured-image-holder {
    position: relative;
}

.featured-image-holder .append-js img {
    opacity:0.7;
}

#custom-simple-home .container .col-full-content-pad.content {
    margin-top:10px;
    text-align:center;
}

#custom-simple-home .container h1 {
    margin-left: 0px;
    font-size: 80px;
    margin: 0;
    text-align:center;
}

#custom-simple-home .container p {
    font-weight: bold;
    color: #000;
    line-height: 18px;
    border-top: 2px solid #000;
    padding: 10px;
    font-size: 13px;
    border-bottom: 2px solid #000;
}

.link {
    background-color: #f3f3f3;
    padding: 18px;
}

.right-small-menu {
    position: fixed;
    top: 30px;
    right: 30px;
}


body  {
    margin:0;
    padding:0;
    font-family: 'Helvetica';
    background-color: rgb(0, 0 , 0);
}

h1 {
    color: #000;
    font-weight: 900;
    font-size: 2.7vw;
    /* word-spacing: normal; */
    letter-spacing: -0.1vw;
}

h2 {
    font-size: 4vw;
}

p {
    display: block
}

.row-content {
    padding:20px;
    width: 400px;
    margin:0 auto;
    display: inline-block;
    margin-right:10px;
    border:1px solid #000;
    padding:20px;
    vertical-align: top;
}
.row {
    padding: 16px 0px;
    border-bottom: 2px solid;
}

.row:last-child {
    border-bottom:0px
}

label {
    display: block;
    font-size: 1.5vw;
    font-weight: bold;
}

input {
    border: 0px;
    outline: none;
    padding: 11px;
    font-size: 2vw;
    font-weight: bolder;
    box-shadow: 4px 4px 8px rgb(33 8 137);
    opacity: 0.9;
    margin: 11px 0px;
    border-radius: 4px;
}

.block-row {
    height: 10px;
    background-color: black;
}

.ruler {
    border-bottom: 14px solid black;
    position: relative;
    height: 17px;
    margin-bottom:30px
}

.ruler div {
    height: 31px;
    min-width: 14px;
    display: inline-block;
    position: absolute;
}

.ruler .start {
    background-color: #d1cc25;
}

.ruler .move_to {
    left:60%;
    background-color: grey;
}

.ruler .calc_move {
    background-color: rgb(255 21 75);
    right: 0px;
    left: 61%;
}

.tag {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius:10px;
    margin-right:10px
}

.tag.traveled {
    background-color: rgb(255 21 75);
    
}

.tag.dist {
    background-color: grey;
}

.tag.ppu {
    background-color: #d1cc25;
}

.info {
    display: block;
}