Scrolling to an anchor with pure CSS - html

Question

I've been trying to scroll from a bootstrap nav links to matching anchors on my page using only CSS (no jquery). This answer from #jesus-bejarano (CSS: pure CSS scroll animation) with matching jsfiddle (http://jsfiddle.net/YYPKM/3/) seems to be a great solution but I can't seem to get it working. Any help would be much appreciated.
Here is a link to a bootply with what I've got: http://www.bootply.com/15Ib1TGYeV
Appreciate the help.
My HTML:
<a id="suds"></a>
<a id="apoth"></a>
<a id="merch"></a>
<div class="container-fluid container-fullwidth" id="" style="">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- <div class="container-fluid"> -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars fa-lg"></span>
<!-- <span class="icon-bar"></span> <span class="icon-bar"></span> -->
</button> <a class="navbar-brand" href="#"><span class="fa fa-long-arrow-left"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Suds
</li>
<li>Apothecary and Men's Grooming
</li>
<li>Gifts and Merchandise
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- </div> -->
<!-- /.container-fluid -->
</nav>
<section class="row no-gutter main">
<article class="merch-cat" id="suds">
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
</article>
<article class="merch-cat" id="apoth">
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
</article>
<article class="merch-cat" id="merch">
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<img src="http://placehold.it/600X400" class="img-responsive">
</div>
</article>
</section>
</div>
My CSS:
/* add a little bottom space under the images */
body {
padding-top: 0px;
}
.thumbnail {
margin-bottom:0;
}
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
.container-fullwidth {
width: 100%;
}
/* make nav always collapsed */
#media (max-width: 2000px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
/* nav opacity */
nav {
opacity: 0.5
}
/* scrolling */
a[ id= "suds" ]:target ~ #main article.merch-cat {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[ id= "apoth" ]:target ~ #main article.merch-cat {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[ id= "merch" ]:target ~ #main article.merch-cat {
-webkit-transform: translateY( -1000px );
transform: translateY( -1000px );
}

Answer 1

don't know if this will help you any.. but i used this on a profile of mine to scroll certain items
#-webkit-keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0);
}
100% {
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0);
}
}
#keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform:translateX(1px) rotate(0);
-ms-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0);
}
100% {
-webkit-transform:translateX(-1px) rotate(0);
-ms-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0);
}
}

Answer 2

#misterManSam
#charset "UTF-8";
html {
background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/back.png) no-repeat center 0,#000 url(https://googledrive.com/host/t0B6ETuSl1xvFHZVY1TGlFb0dlLVE/back.gif) left top;
}
img {
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
.mnmembers {
margin:50px -20px;
}
body {
font-family:Trebuchet MS,Arial,Helvetica;
text-align:center;
}
body,td {
color:#fff;
font-size:12px;
}
.friends_value img {
border:0;
}
td .clock {
font-size:23px;
}
.container_padding {
height:100%;
}
.gallery_image img {
margin:5px;
}
.gallery_image {
border:0;
}
.container_transparency {
height:100%;
width:100%;
}
.container {
height:100%;
background-color:transparent;
}
.container .heading {
color:#FF00CC;
text-shadow:2px 2px 2px rgba(255,255,255,0.2);
font-weight:bold;
font-family:Cabin Sketch,sans-serif;
font-size:20px;
}
.about_me .value {
color:#FF00CC;
font-size:15px;
}
.container table {
margin:15px;
}
.container table table {
border:0;
background:none;
}
#framepo {
text-align:center;
margin:0 150px;
}
#myvid {
margin:1000px 10px 0;
}
#stuff {
width:1194px;
overflow:hidden;
position:relative;
margin:1000px 0 0;
text-align:center;
}
.container table tr td.key {
background:#4a4057;
border-bottom:1px solid #443b50;
border-right:1px solid #383143;
}
.container table tr td.key,.container table tr td.friends_key {
padding:8px 8px 8px 20px;
}
.container table tr td.status_key,.container table tr td.blurb_key {
padding:3px 3px 3px 50px;
}
.wall_options textarea {
border:1px solid #0061aa;
background:rgba(0,0,0,0.25);
margin-top:20px 0 -20px 0;
}
a,a:link,a:active,a:visited,a:hover {
color:#fff;
}
.bottom_footer_wrapper {
bordet-top:#352f40 5px solid;
position:fixed;
bottom:0;
left:0;
width:100%;
z-index:9999;
}
#videocontainer {
z-index:1;
}
.bottom_footer_wrapper .bottom_footer {
background-color:#fff;
border-top:3px solid #fb15d3;
height:80px;
text-align:center;
}
.container a.desc-img img {
-moz-transform:rotate(-2deg);
-webkit-transform:rotate(-2deg);
}
div.gallery_content:hover {
bottom:0;
}
div.gallery_content .gallery_image {
font-size:12px;
width:175px;
text-align:center;
margin:0!important;
}
input[name='strip_links'] {
margin-bottom:170px;
}
input[type='submit'] {
background:none;
display:block;
margin-top:25px;
letter-spacing:-1px;
border-width:1px;
border-style:solid;
border-color:#ccc #444 #111;
border-color:rgba(255,255,255,0.7) rgba(0,0,0,0.5) rgba(0,0,0,0.7);
font:bold 21px1em Arial;
color:white;
padding:.48em 2em;
cursor:pointer;
text-shadow:rgba(0,0,0,0.45) 0 -1px 0;
-webkit-box-shadow:rgba(0,0,0,0.75) 0 0 3px;
-moz-box-shadow:rgba(0,0,0,0.75) 0 0 3px;
box-shadow:rgba(0,0,0,0.75) 0 0 3px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
background:transparent -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.6)),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.5,rgba(255,255,255,0.01)),to(transparent));
background:transparent -moz-linear-gradient(top,rgba(255,255,255,0.6),rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.01) 50%,transparent);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorstr='#80FFFFFF',EndColorstr='#00FFFFFF');
-webkit-background-clip:padding-box;
}
input[type='submit']:hover {
border-top-color:rgba(255,255,255,0.65);
background:-webkit-gradient(linear,left top,left bottom,from(rgba(220,220,220,0.6)),color-stop(0.5,rgba(100,100,100,0.2)),color-stop(0.5,rgba(0,0,0,0.21)),to(rgba(0,0,0,0.20)));
background:-moz-linear-gradient(top,rgba(220,220,220,0.6),rgba(100,100,100,0.2) 50%,rgba(0,0,0,0.21) 50%,rgba(0,0,0,0.20));
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#99dcdcdc',EndColorStr='#33000000');
-webkit-background-clip:padding-box;
}
textarea {
color:#666;
font-size:14px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
padding:0 10px;
margin:15px 0;
border:#999 1px solid;
font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif;
transition:all .25s ease-in-out;
-webkit-transition:all .25s ease-in-out;
-moz-transition:all .25s ease-in-out;
box-shadow:0 0 5px rgba(81,203,238,0);
-webkit-box-shadow:0 0 5px rgba(81,203,238,0);
-moz-box-shadow:0 0 5px rgba(81,203,238,0);
}
textarea#styleid:focus {
color:#000;
outline:none;
border:#35a5e5 1px solid;
font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif;
box-shadow:0 0 5px rgba(81,203,238,1);
-webkit-box-shadow:0 0 5px rgba(81,203,238,1);
-moz-box-shadow:0 0 5px rgba(81,203,238,1);
}
.container .interests_body a img,.container img.thumbnail {
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
#schedule table {
margin-top:10px;
text-align:center;
border:1px solid #81729a;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border-top-left-radius:5px;
-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,.05);
-moz-box-shadow:0 1px 3px 1px rgba(0,0,0,.05);
box-shadow:0 1px 3px 1px rgba(0,0,0,.05);
}
#schedule tr:last-child td {
border-bottom:none!important;
}
#schedule tr:first-child td {
border-top:none!important;
}
#schedule td:last-child {
border-right:none!important;
}
#schedule td {
border-top:2px solid #81729a;
border-bottom:1px solid #81729a;
border-right:1px solid #81729a;
padding:13px 8px;
}
#profile {
width:1202px;
left:50%;
position:absolute;
text-align:left;
margin-left:-601px;
}
#profile_schedule {
position:absolute;
top:2060px;
left:220px;
color:#000;
text-transform:uppercase;
z-index:0;
width:auto;
}
#profile_friends {
position:absolute;
left:0;
top:0;
color:#fff;
}
#profile_password_photo_galleries {
position:absolute;
top:2600px;
width:100%;
}
#profile_password_photo_galleries .heading {
font-size:20px;
}
#profile_schedule .heading {
color:#ff0084;
font-size:25px;
margin:0;
}
#profile_schedule > .profile_section_content .container {
padding:2px 0;
display:block;
}
#profile_schedule > .profile_section_content .container .label {
width:150px;
color:#d25581;
display:inline-block;
float:left;
}
#profile_main_photo,.flagCounter,#username_container,#gender_container,#body_type_container,#ethnicity_container,#cam_score_container,#hair_container,#eyes_container,#weight_container,#age_container,#country_container,#sexual_preference_container,#smoke_container,#drink_container,#occupation_container,#school_container,#favorite_food_container,#pets_container,#automobile_container,#tags_container,#profile_about_me .label,#profile_about_me > .heading {
display:none;
}
#profile_main_about_holder {
display:block;
}
#profile_photo_galleries {
position:absolute;
top:2900px;
width:100%;
}
#profile_friends {
position:absolute;
left:220px;
top:2300px;
color:#fff;
width:1000px;
font-size:12px;
}
#profile .profile_row:first-child {
display:none;
position:absolute;
left:412px;
top:420px;
color:#000!important;
width:400px;
}
#profile .profile_row:first-child a:link,#profile .profile_row:first-child a:active,#profile .profile_row:first-child a:visited,#profile .profile_row:first-child a:hover {
color:#f99dde;
}
#profile_interests_content {
display:none;
}
#profile_comments {
position:absolute;
top:2950px;
width:auto;
width:100%;
}
.wall_post {
background:RGBa(0,0,0,0.8);
padding:10px;
margin:0 0 20px;
}
#photo_gallery_previews {
}
#header_bar {
display:none;
}
#footer_bar {
display:none;
}
a.button {
position:absolute;
display:block;
}
a.button.amazon-link {
width:250px;
height:87px;
background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/amazon.png);
top:750px;
left:620px;
}
a.button.twitter-link {
width:250px;
height:87px;
background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/twitter.png);
top:750px;
left:50px;
}
a.button.offtip-link {
width:250px;
height:89px;
background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/offtip.png);
top:750px;
left:340px;
}
/* Gallery */
.photo_gallery_preview {
color:#fff;
width:160px;
}
.photo_gallery_preview > a {
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}
.photo_gallery_preview > a:hover {
opacity:.7;
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
.photo_gallery_preview .photo_gallery_count {
font-size:14px;
}
.photo_gallery_preview a,.photo_gallery_preview a:link,.photo_gallery_preview a:active,.photo_gallery_preview a:hover,.photo_gallery_preview a:visited {
color:#fff;
text-decoration:none;
white-space:nowrap;
}
#buttons.resize {
width:10%;
/* you can use % */
height:auto;
}
/* Nav and target */
#about_me_target {
position:absolute;
top:1000px;
}
ul.nav-profile {
background:#000000;
padding:20px;
-webkit-border-radius:30px;
-moz-webkit-border-radius:20px;
-ms-webkit-border-radius:20px;
-o-webkit-border-radius:20px;
webkit-border-radius:20px;
position:absolute;
top:630px;
left:480px;
width:660px;
opacity:.8;
filter:alpha(opacity=80);
}
ul.nav-profile li {
float:left;
margin-right:35px;
list-style:none;
}
ul.nav-profile li a,ul.nav-profile li a:link,ul.nav-profile li a:visited,ul.nav-profile li a:active,ul.nav-profile li a:hover {
color:#fff;
font-weight:bold;
font-size:22px;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
text-decoration:none;
}
ul.nav-profile li a:hover {
color:#8B008B;
}
.frame {
width:920px;
height:540px;
overflow:auto;
background:#e5e5e5;
position:relative;
}
.frame-border {
width:920px;
height:540px;
background:#e5e5e5;
padding:10px;
border-radius:20px;
-moz-border-radius:12px;
-webkit-border-radius:20px;
-o-border-radius:12px;
margin:0 125px;
}
.firstvid {
margin-right:20px;
}
div.hover_icon_container {
width:430px;
height:107px;
position:relative;
float:left;
margin-bottom:10px;
}
div.hover_icon_container a.hover_icon {
display:none;
width:430px;
height:107px;
position:absolute;
top:0;
left:0;
}
div.hover_icon_container:hover a.hover_icon {
display:block;
}
.frame::-webkit-scrollbar {
-webkit-appearance:none;
width:12px;
height:12px;
}
.frame::-webkit-scrollbar-thumb {
border-radius:8px;
border:2px solid white;
background-color:#C71585;
}
div.gif1 {
position:absolute;
left:140px;
top:472px;
}
div.gif2 {
position:absolute;
left:310px;
top:472px;
}
div.gif3 {
position:absolute;
left:480px;
top:472px;
}
div.gif4 {
position:absolute;
left:650px;
top:472px;
}
#blackBar {
position:fixed;
top:0;
left:0;
width:100%;
height:60px;
background-color:black;
}
#-webkit-keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0);
}
100% {
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0);
}
}
#keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform:translateX(1px) rotate(0);
-ms-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0);
}
100% {
-webkit-transform:translateX(-1px) rotate(0);
-ms-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0);
}
}
.button {
display:inline-block;
-webkit-transform:translateZ(0);
-ms-transform:translateZ(0);
transform:translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0);
}
.button:hover {
-webkit-animation-name:buzz-out;
animation-name:buzz-out;
-webkit-animation-duration:.75s;
animation-duration:.75s;
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-iteration-count:1;
animation-iteration-count:1;
}
.framen {
width:600px;
height:200px;
overflow:auto;
background:#000;
border-radius:20px;
position:relative;
margin:70px 20px 0;
padding:10px;
}
.frame-bordern {
width:920px;
height:300px;
background:url(https://googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/about.png);
padding:10px;
border-radius:20px;
-moz-border-radius:12px;
-webkit-border-radius:20px;
-o-border-radius:12px;
margin:0 125px;
}
.framen::-webkit-scrollbar {
-webkit-appearance:none;
width:12px;
height:12px;
}
.framen::-webkit-scrollbar-thumb {
border-radius:8px;
background-color:#C71585;
}
#profile_schedule {
display:none;
}
#new_comment {
display:none;
}
a.button.insta-link {
width:250px;
height:85px;
background:url(https://5a2e1bf9a2ce6e1087dbd9512e595cd127bfe686.googledrive.com/host/0B6ETuSl1xvFHZVY1TGlFb0dlLVE/instagram.png);
top:750px;
left:900px;
}
.design a {
text-decoration:none;
}
.design h1 {
font-size:14px;
font-family:"Franklin Gothic Medium","Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif;
}