* {box-sizing:border-box; user-select:none;}

html {height:100%; font-family:sans-serif;}
body {height:100%; margin:0;}




div#container {background-color:#FAFAFA; color:#000; height:100%; display:flex; flex-direction:column; font-size:.75rem; /*padding:1.5rem 0;*/}
div#container.night {background-color:#131313; color:#F9F9F9;}
div#container header {flex:0 1 auto;}
div#container main {flex:1 1 auto;}
div#container footer {flex:0 1 auto;}



div#container header.ios {display:flex; flex-direction:row; font-size:1.125rem; font-weight:500; padding:1rem 2rem .5rem;}
div#container header.ios div {flex:0 1 auto; padding:.125rem;}
div#container header.ios div {display:inline-flex; flex-direction:column;}
div#container header.ios div.time {flex:1 1 auto;}
div#container header.ios div.wifi {justify-content:center;}
div#container header.ios div.cell {justify-content:center;}
div#container header.ios div.lte {font-size:.85rem; font-weight:500; justify-content:center;}
div#container header.ios div.battery {font-size:1.75rem;}


div#container header {padding:0 1rem;}
div#container header div.inner {display:flex; flex-direction:row;}
div#container header div.inner div.btn {flex:0 1 auto; padding:.5rem 0; cursor:pointer;}
div#container header div.inner div.btn.back {font-size:1.5rem;}
div#container header div.inner div.btn.back svg {position:relative; left:-.25rem;}
div#container header div.inner div.btn.bars {font-size:1.25rem; display:none;}
div#container header div.inner div.btn.dots {font-size:1.375rem;}
div#container header div.inner div.title {flex:1 1 auto; padding:.5rem; font-weight:600; text-align:center;}
div#container header div.inner div.title span.name {font-size:1.125rem;}
div#container header div.inner div.title span.icon {position:relative;}
div#container header div.inner div.title span.icon svg.blue {font-size:1.2rem; position:relative; top:.375rem; color:dodgerblue;}
div#container header div.inner div.title span.icon svg.check {font-size:1.22rem; position:absolute; top:40%; left:44%; transform:translate(-50%,-50%); color:#FFF;}


div#container main {display:flex; flex-direction:column; overflow-y:auto;}
div#container main {scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;}
div#container main section {margin-top:.7rem; /*border:solid;*/}
div#container main section#profile {flex:0 1 auto;}
div#container main section#stories {flex:0 1 auto;}
div#container main section#gallery {flex:1 1 auto; margin-top:0;}

div#container main section#profile {display:flex; flex-direction:row; align-items:center; padding:0 1rem .5rem;}
div#container main section#profile div.col {flex:1 1 25%; text-align:center;}
div#container main section#profile div.col div#avatar {border-radius:50%; height:7rem; width:7rem; background:#EFEFEF url('avatar.jpg'); background-size:cover;}
div#container main section#profile div.col div.num {font-size:1.25rem; font-weight:400; letter-spacing:.5px;}
div#container main section#profile div.col div.label {font-size:.85rem; font-weight:300; letter-spacing:.5px; margin-top:.125rem;}

div#container main section#copy {/*flex:1 0 100%;*/ font-size:.75rem; padding:0 1rem;}
div#container main section#copy div {margin:.5rem 0;}
div#container main section#copy div#name {font-weight:bold;}
div#container main section#copy div#desc {font-weight:100; color:#838383;}
div#container main section#copy div#bio {}
div#container main section#copy div#website a {text-decoration:none; color:#DBEEFD;}

div#container main section#actions {display:flex; flex-direction:row; justify-content:space-between; align-items:center; padding:0 1rem;}
div#container main section#actions div.box {flex:1 1 auto; margin-right:.45rem;}
div#container main section#actions div.box.expander {flex:0 1 auto;}
div#container main section#actions div.box:last-of-type {margin-right:0;}
div#container main section#actions div.box div.btn {background-color:#FFF; color:#000; border:1px solid #CCC; font-size:.9rem; font-weight:600; text-align:center; padding:.625em .5em .45em; border-radius:.3rem; cursor:pointer;}
div#container main section#actions div.box div.btn.active {}
div#container main section#actions div.box.follow div.btn.off {background-color:dodgerblue; color:#FFF; border-color:dodgerblue;}
div#container main section#actions div.box.follow div.btn span.a {display:none;}
div#container main section#actions div.box.follow div.btn span.b {display:inline-block;}
div#container main section#actions div.box.follow div.btn.off span.a {display:inline-block;}
div#container main section#actions div.box.follow div.btn.off span.b {display:none;}
div#container main section#actions div.box.expander div.btn span svg {height:.5rem; font-weight:bold;}

div#container main section#suggested {border-top:1px solid #2f2f2f44; border-bottom:1px solid #2f2f2f44; padding-bottom:1rem; display:none;}
div#container main section#suggested.active {}
div#container main section#suggested div.head {padding:0 1rem;}
div#container main section#suggested div.head h3 {display:flex; flex-direction:row; /*margin-bottom:0;*/}
div#container main section#suggested div.head h3 div.title {flex:1 1 auto;}
div#container main section#suggested div.head h3 div.link {flex:0 1 auto; color:dodgerblue; cursor:pointer;}
div#container main section#suggested div.inner {display:flex; flex-direction:row; overflow-x:auto; white-space:nowrap; padding:0 1rem;}
div#container main section#suggested div.inner {scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;}
div#container main section#suggested div.inner div.card {display:inline-block; background-color:#010101; font-size:.75rem; border:1px solid #2f2f2f44; border-radius:.2rem; padding:.4rem .75rem 1em; text-align:center; margin-right:.4rem;}
div#container main section#suggested div.inner div.card div.cardrow {margin-bottom:.5rem;}
div#container main section#suggested div.inner div.card div.cardrow:last-of-type {margin-bottom:0}
div#container main section#suggested div.inner div.card div.cardrow.a {display:flex; flex-direction:row;}
div#container main section#suggested div.inner div.card div.cardrow div.edge {flex:0 1 auto;}
div#container main section#suggested div.inner div.card div.cardrow div.edge div.closeBtn {color:#838383; font-size:1.25rem; cursor:pointer;}
div#container main section#suggested div.inner div.card div.cardrow div.edge div.closeBtn.x {visibility:hidden;}
div#container main section#suggested div.inner div.card div.cardrow div.middle {flex:1 1 auto; padding:.5rem .5rem;}
div#container main section#suggested div.inner div.card div.cardrow div.middle div.avatar {width:7rem; height:7rem; background:#FFF url('avatar.jpg'); background-size:cover; border-radius:50%;}
div#container main section#suggested div.inner div.card div.cardrow div.name {color:#FFF; font-weight:600; font-size:.9rem; margin-bottom:.25rem;}
div#container main section#suggested div.inner div.card div.cardrow div.name:before {content:'Name';}
div#container main section#suggested div.inner div.card div.cardrow div.name span.icon {position:relative;}
div#container main section#suggested div.inner div.card div.cardrow div.name span.icon svg.blue {font-size:1.2rem; position:relative; top:.375rem; color:dodgerblue;}
div#container main section#suggested div.inner div.card div.cardrow div.name span.icon svg.check {font-size:1.22rem; position:absolute; top:40%; left:44%; transform:translate(-50%,-50%); color:#FFF;}
div#container main section#suggested div.inner div.card div.cardrow div.username {color:#838383; font-size:.75rem;}
div#container main section#suggested div.inner div.card div.cardrow div.username:before {content:'username';}
div#container main section#suggested div.inner div.card div.cardrow div.btn {font-size:.9rem; font-weight:600; text-align:center; padding:.625em .5em .45em; border-radius:.3rem; cursor:pointer;}
div#container main section#suggested div.inner div.card div.cardrow div.btn {background-color:dodgerblue; color:#FFF; border:1px solid #CCC; border-color:dodgerblue;}

div#container main section#stories {}
div#container main section#stories div.head {padding:0 1rem; /*display:none;*/}
div#container main section#stories div.head h3 {display:flex; flex-direction:row; margin-bottom:0;}
div#container main section#stories div.head h3 div.title {flex:1 1 auto;}
div#container main section#stories div.head h3 div.icon {flex:0 1 auto; cursor:pointer;}
div#container main section#stories div.head h3 div.icon svg {display:block;}
div#container main section#stories div.head p {margin-top:0;}
div#container main section#stories div.inner {display:flex; flex-direction:row; overflow-x:auto; white-space:nowrap; padding:.5rem 1rem;}
div#container main section#stories div.inner {scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;}
div#container main section#stories div.inner div.story {display:inline-block; margin-right:1.25rem; cursor:pointer;}
div#container main section#stories div.inner div.story.new {display:none;}
div#container main section#stories div.inner div.story div.preview {border-radius:50%; height:4.75rem; width:4.75rem; padding:.25rem; border:1px solid #EFEFEF;}
div#container main section#stories div.inner div.story.placeholder div.preview {background-color:#EFEFEF;}
div#container main section#stories div.inner div.story div.preview:before {content:''; display:block; width:100%; height:100%; background:#EFEFEF url(''); background-size:cover; border-radius:inherit;}
div#container main section#stories div.inner div.story div.caption {text-align:center; margin-top:.5rem; font-size:.875rem; font-weight:100;}
div#container main section#stories div.inner div.story div.caption:before {content:'Caption'; color:#0008;}
div#container main section#stories div.inner div.story.new div.preview {background-color:#FAFAFA88; position:relative;}
div#container main section#stories div.inner div.story.new div.preview:before {content:'+'; background-color:inherit; font-weight:100; font-size:1.75rem; width:auto; height:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
div#container main section#stories div.inner div.story.new div.caption:before {content:'New'; color:inherit;}

div#container main section#gallery {display:flex; flex-direction:column; border-top:1px solid #0001;}
div#container main section#gallery nav {flex:0 1 auto; padding-bottom:1px; position:sticky; top:0; background-color:#FAFAFA;}
div#container main section#gallery nav ul {display:flex; flex-direction:row; margin:0; padding:0; list-style:none;}
div#container main section#gallery nav ul li.btn {flex:1 1 auto; padding:.75rem 0 .25rem; text-align:center; font-size:1.75rem; color:#0008; border-bottom:1.5px solid transparent; position:relative; transition:.2s; cursor:pointer;}
div#container main section#gallery nav ul li.btn.active {color:#010101; border-bottom-color:#010101;}
div#container main section#gallery nav ul li.btn svg {display:inline-block;}
div#container main section#gallery div#content {flex:1 1 auto; background-color:#DDD;}
div#container main section#gallery div#content {display:flex; flex-direction:row; overflow-x:auto; scroll-snap-type:x proximity;}
div#container main section#gallery div#content {scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;}
div#container main section#gallery div#content div.content {flex:0 0 auto; display:inline-block; min-height:800px; width:100%; color:#0004;}
div#container main section#gallery div#content div.content {scroll-snap-align:center;}
div#container main section#gallery div#content div.content#grid {background-color:red;}
div#container main section#gallery div#content div.content#reels {background-color:limegreen;}
div#container main section#gallery div#content div.content#igtv {background-color:blue;}
div#container main section#gallery div#content div.content#tags {background-color:orange;}
div#container main section#gallery div#content div.content:empty::before {content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. ';}


div#container footer {border-top:1px solid #0001;}
div#container footer nav {}
div#container footer nav ul {display:flex; flex-direction:row; margin:0; padding:0; list-style:none;}
div#container footer nav ul li.btn {flex:1 1 auto; padding:.75rem 0 .25rem; font-size:2rem; position:relative; text-align:center; cursor:pointer;}
div#container footer nav ul li.btn svg.active {display:none;}
div#container footer nav ul li.btn svg.default {display:inline-block;}
div#container footer nav ul li.btn.active svg.default {display:none;}
div#container footer nav ul li.btn.active svg.active {display:inline-block;}
div#container footer nav ul li.btn span.plus {position:absolute; top:47.5%; left:50%; transform:translate(-50%,-50%); font-weight:100;}


div#container footer.ios {display:flex; flex-direction:row; justify-content:center; padding:.25rem 0 .5rem; margin-top:1rem;}
div#container footer.ios div.bar {height:.375rem; width:35%; background-color:#000C; border-radius:1rem;}



/* Night Mode */

div#container.night header div.inner div.name span.icon svg.check {color:#131313;}

div#container.night main section#actions div.box div.btn {background-color:#010101; color:#F9F9F9; border-color:#2f2f2f;}
div#container.night main section#actions div.box div.btn.active {background-color:#2f2f2f; border-color:#4B4B4B;}

div#container.night main section#stories div.inner div.story div.preview {border-color:#2f2f2f;}
div#container.night main section#stories div.inner div.story.placeholder div.preview {background-color:#222222;}
div#container.night main section#stories div.inner div.story div.preview:before {background-color:#222222;}
div#container.night main section#stories div.inner div.story div.caption:before {color:#F9F9F9;}

div#container.night main section#gallery nav {background-color:#131313;}
div#container.night main section#gallery nav ul li.btn {color:#838383;}
div#container.night main section#gallery nav ul li.btn.active {color:#F9F9F9; border-bottom-color:#F9F9F9;}

div#container.night footer.ios div.bar {background-color:#FFF;}