/* Theme Name: Blocade Theme URI: https://wordpress.org/themes/blocade/ Author: Agraj Author URI: Description: This is a personal responsive blog theme with customization features. Version: 1.0 License: GNU General Public License version 2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: two-columns, left-sidebar, custom-background, custom-colors, custom-menu, featured-images, microformats, post-formats, threaded-comments Text Domain: blocade */ body { font-family: 'Merriweather', Helvetica, Arial, sans-serif; background-color: #f6f6f6; } a { text-decoration: none; color: #000000; } ul { margin: 0; padding: 0; } li { list-style: none; } h1,h2,h3,h4,h5,h6 { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-weight: 700; } .sticky{} .bypostauthor{} .screen-reader-text { position: absolute !important; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; } .screen-reader-text:focus { font-size: 14px; font-size: .875rem; font-weight: bold; line-height: normal; z-index: 100000000; /* Above WP toolbar. */ top: 5px; left: 5px; display: block; clip: auto !important; width: auto; height: auto; padding: 15px 23px 14px; text-decoration: none; color: #21759b; border-radius: 3px; background-color: #f1f1f1; box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6); } /*=====Main-container=====*/ .row { max-width: 72.5rem !important; } /*=====Header=====*/ .site-header { background: #ffffff; border-bottom: 1px solid #efefef; } .header-top { padding: 25px 0; border-top: 3px solid #84c797; } .site-title { margin: 0; } .site-title a { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-weight: bold; color: #000000; font-size: 35px; transition: color 0.4 ease-in-out; } .site-title a:hover { color: #84c797; } .site-description { font-size: 14px; color: #000000; } .site-logo img { max-width: inherit !important; } .headline-section { padding: 8% 10%; /*padding: 87px 60px 105px 60px;*/ text-align: center; color: #ffffff; } .menu-toggle { font-size: 25px; display: none; float: right; padding: 10px 20px; text-align: right; color: #000000; background-color: #ffffff; } .toggle { font-size: 25px; display: inline-block; margin-top: 40px; padding: 5px 15px; color: #666; background-color: #f7f7f7; border: 1px solid #eee; transition: all 0.2s ease-in-out; } .toggle:hover, .toggle:focus { background-color: #f1f1f1; color: #333; } .menu { text-align: center; } .primary-nav { float: none; } .primary-nav ul { display: none; margin-top: 10px; text-align: center; border-left: 1px solid #efefef; border-right: 1px solid #efefef; border-top: 1px solid #efefef; } .primary-nav ul li a { display: block; padding: 16px 0; transition: all .4s ease; color: #000000; font-family: 'Raleway', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 13px; border-bottom: 1px solid #efefef; text-transform: uppercase; } .primary-nav ul li a:hover { color: #cac8c8; background: none !important; } @media (min-width:769px) { .toggle { display: none; } .primary-nav { float: right; } .primary-nav ul { display: block !important; margin-top: 19px; border: none !important; } .primary-nav ul li { display: inline-block; } .primary-nav ul li a { margin: 15px 20px !important; padding: 0; border: none !important; line-height: 1.5; } } /*=====Site-content-container=====*/ .site-content { margin: 70px 0; } /*=====Post-content=====*/ .post { margin-bottom: 50px; border: 1px solid #f2f2f2; } .page-inner { margin: 70px 0; } .page-content { margin-bottom: 50px; border: 1px solid #f2f2f2; padding: 50px; background-color: #ffffff; } .quote-post { text-align: center; padding: 50px; } .quote-content { color: #ffffff !important; } .entry-header { text-align: center; padding: 50px 50px 0px 50px; } .inner-content { padding: 0px 50px 40px 50px; } .inner-content,.entry-header { border-radius: 2px; background-color: #ffffff; } .content-none { padding: 50px; border: 1px solid #f2f2f2; background-color: #ffffff; } .content-none h2 { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-size: 23px; } .content-none .goback a { font-size: 18px; } .edit-link { margin-bottom: 20px; display: inline-block; } .edit-link a { color: #000000; } .entry-content ul,.entry-content ol { margin: 8px 0; } .entry-content ul li,..entry-content ol li { line-height: 32px; font-size: 14px; } .entry-content ul li { list-style-type:disc; list-style-position: inside; } .entry-content ol li { list-style-type: decimal; list-style-position: inside; } .entry-content ul li a,.entry-content ol li a { font-weight: 700; color: #000000; } .entry-content ul li a:hover,.entry-content ol li a:hover { color: #bababa; text-decoration: underline; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-weight: 700; color: #000000; } .entry-content pre { background: #e6e6e6; border: 1px solid #cacaca; padding: 10px; margin: 12px 0; } .entry-content table { font-family: 'Merriweather', Helvetica, Arial, sans-serif; border-collapse: collapse; width: 100%; margin: 10px 0; } .entry-content td, .entry-content th { border: 1px solid #dddddd; text-align: left; padding: 8px; font-size: 14px; } .entry-image img { padding: 20px 0 34px 0; background-color: #ffffff; } .entry-meta { font-family: 'Merriweather',sans-serif; letter-spacing: 0.5px; font-size: 12px; font-weight: 500; padding-bottom: 15px; text-transform: uppercase; color: #bebebe; } .entry-tags a { color: #bebebe; } .entry-meta span, .entry-meta span a { display: inline-block; } .entry-date a, .entry-author a { color: #bebebe; } .entry-cat { padding-bottom: 15px; } .entry-cat a { font-family: 'Raleway',sans-serif; color: #84c797; text-transform: uppercase; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; } .entry-cat a:hover, .entry-date a:hover, .entry-author a:hover, .entry-tags a:hover { text-decoration: underline; } .entry-title { margin-bottom: 20px; } .entry-title, .entry-title a { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-weight: 600; font-size: 24px; color: #000000; } .entry-title a:hover { color: #888888; } .entry-content p { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 32px; color: #2f2f2f; } .post:last-child { margin-bottom: 0; } .entry-content blockquote { margin: 1.5em 0; border: 1px solid #efefef; background-color: #fafafa; text-align: center; } .entry-content blockquote p { font-family: 'Raleway' sans-serif; font-size: 14px; color: #4e5158; } .entry-content blockquote cite { font-size: 14px; } .sep { margin: 0 10px; } .sep::before { font-size: 13px; content: '\2022'; color: #b1b1b1; } .entry-read-more { text-align: center; } .entry-read-more a { font-family: 'Merriweather', Helvetica, Arial, sans-serif; transition: all .3s ease; font-size: 15px; font-weight: bold; margin: 8px 0; color: #2f2f2f; display: inline-block; } .entry-read-more a:hover { color: #84c797; } .more-link { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-weight: bold; color: #2f2f2f; font-size: 15px; transition: color 0.3s ease-in-out; } .more-link:hover { color: #84c797; } .entry-footer { margin-top: 25px; padding-top: 20px; border-top: 1px dashed #c7c7c7; } .social-share { text-align: right; } .sharing-link { padding: 13px; width: 40px; font-size: 13px; text-align: center; line-height: 13px; border-radius: 50%; border: 1px solid #f0f3f4; color: #c2c2c2; display: inline-block; margin-right: 12px; transition: all, 0.5s; -webkit-transition: all, 0.5s; } .sharing-link:hover { background-color: #efefef; color: inherit; } .post-comments { text-align: left; } .post-comments span a { font-size: 18px; transition: color .4s ease; color: #c2c2c2; display: inline-block; margin-top: 6px; } .post-comments span a:hover { color: #000000; } /*=======Comment-navigation========*/ #comment-navigation { display: inline-block; margin-bottom: 50px; } /*===Pagination====*/ .nav-previous { float: left; } .nav-next { float: right; } .nav-next a::after { font-family: FontAwesome; font-size: 14px; margin-left: 12px; content: '\f054'; } .nav-previous a::before { font-family: FontAwesome; font-size: 14px; margin-right: 12px; content: '\f053'; } .nav-next a, .nav-previous a { display: inline-block; padding: 13px 19px; transition: all .3s ease; color: #ffffff; background-color: #303133; font-family: 'Merriweather', Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 14px; } .nav-next a:hover, .nav-previous a:hover { background-color: #84c797; } /*=====404-page=====*/ .nocontent { padding: 50px; text-align: center; border: 1px solid #f2f2f2; background-color: #ffffff; } .notitle { font-family: 'Merriweather', Helvetica, Arial, sans-serif; } .goback a { font-family: 'Merriweather', Helvetica, Arial, sans-serif; color: #abb7c0; } .goback a:hover { text-decoration: underline; } /*=====Post-page-navigaiton====*/ .page-links { margin: 20px 0 0 0; } .page-links a { color: #000000; } .page-links a:hover { text-decoration: underline; } /*=====Search form====*/ .search-form { position: relative; margin: 0; padding: 0 30px; } #s { height: 50px; margin-top: 30px; padding: 0 0 0 15px; border: none; background-color: #efefef; /* box-sizing: content-box; */ box-shadow: none; } .submit-button { position: absolute; top: 0; right: 30px; padding: 17px 20px; color: #ffffff; background-color: #303133; } .submit-button:hover, .submit-button:focus { background-color: #84c797; } figure { margin: 0; } /*=====Floating image inside post and image captions====*/ img[class*='wp-image-'] { padding: 5px; border: 1px solid #dfdddd; background-color: #efefef; } .entry-content img, img[class*='align'], img[class*='wp-image-'], img[class*='attachment-'], { height: auto; } .alignleft, .alignright { margin-top: 15px; } .alignleft { float: left; margin-right: 20px; } .alignright { float: right; margin-left: 20px; } .aligncenter { margin: 1.5em 0; } .wp-caption-text { font-weight: lighter; margin-top: 15px; text-align: center; color: #dfdddd; } img.size-full, img.size-large, .wp-post-image, { max-width: 100%; height: auto; } .entry-content img, .wp-caption { max-width: 100%; } /*=====Table inside post====*/ .entry-content table, { font-size: 14px; line-height: 1.2857142857; margin-bottom: 24px; } .entry-content th, { font-weight: 700; padding: 8px; text-transform: uppercase; } .entry-content td, { padding: 8px; } iframe { width: 100%; } .clearfix { clear: both; } /*=====Sidebar ====*/ .sidebar { border-top: 3px solid #84c797; border-bottom: 3px solid #84c797; background-color: #ffffff; } .widget-title { position: relative; } .widget-title::before { position: absolute; top: 10px; left: 0; display: block; width: 100%; height: 1px; content: ''; background-color: #eaeaea; } .widget-title h3 { font-family: 'Raleway', Helvetica, Arial, sans-serif; font-size: 14px; position: relative; display: table; font-weight: 700; margin: 0 auto; padding: 0 10px; text-align: center; text-transform: uppercase; color: #2a2d33; background: #fefefe; } .main-widget { margin: 40px 0; } .main-widget span { font-size: 14px; } .main-widget .textwidget { padding: 30px 30px 0 30px; } .main-widget .textwidget p { font-size: 14px; line-height: 32px; margin-bottom: 0; } .main-widget .textwidget img { margin-bottom: 15px; border-radius: 3px; } .main-widget ul { padding: 0 30px; } .main-widget ul li { padding: 20px 0; border-bottom: 1px dashed #eaeaea; } .main-widget ul li a { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-size: 14px; color: #303133; } .main-widget ul li .post-date { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-size: 13px; display: block; margin: 10px 0 0 0; text-transform: uppercase; color: #aaa; } .main-widget ul li a:hover { color: #84c797; } .widget_nav_menu .menu> li { display: block; } .widget_nav_menu .menu> li> a { padding: 0; } .main-widget .wp-tag-cloud { margin-top: 30px; } .main-widget .wp-tag-cloud li { display: inline-block; padding: 0 !important; border: none; } .main-widget .wp-tag-cloud li a { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-size: 13px !important; display: inline-block; margin-right: 5px; margin-bottom: 10px; padding: 5px 10px; color: #4c4b4b; border-radius: 5px; background-color: #efefef; } .main-widget .wp-tag-cloud li a:hover { color: #ffffff; background-color: #84c797; } .calendar_wrap { padding: 30px 30px 0 30px; } #wp-calendar { font-family: 'Merriweather', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 300; width: 100%; margin-left: -2px; border-spacing: 8px; border-collapse: separate; } #wp-calendar caption { display: none; } #wp-calendar tbody td { margin-bottom: 10px; padding: 6px; text-align: center; border: 1px solid #efefef; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; } #wp-calendar tbody td:hover { border-color: #c3c1c1; } #wp-calendar tbody td.pad { border: 0; } #wp-calendar tbody td#today { color: #84c797; border-color: #84c797; } #wp-calendar tfoot td#prev a, #wp-calendar tfoot td#next a { font-size: 12px; font-weight: 400; position: relative; bottom: -9px; margin-bottom: 1px; text-transform: uppercase; color: #888; } #wp-calendar tfoot td#prev { text-align: left; } #wp-calendar tfoot td#next { text-align: right; } #wp-calendar thead th { font-size: 13px; font-weight: 400; padding-bottom: 10px; text-align: center; color: #888; } #wp-calendar tbody td a, #wp-calendar tfoot td#prev a:hover, #wp-calendar tfoot td#next a:hover { color: #84c597; } /*====Gallery-styling======*/ .gallery { margin-top: 1.5em; margin-bottom: 1em; } .gallery-item { position: relative; display: inline-block; overflow: hidden; margin: 0 10px 4px 0; } .gallery-caption { font-size: 12px; line-height: 1.5; position: absolute; bottom: 0; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; max-height: 50%; margin: 0; padding: 6px 8px; transition: opacity .4s ease-in-out; text-align: left; opacity: 0; color: #ffffff; background-color: rgba(0, 0, 0, .7); } .gallery-caption:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 49px; content: ''; } .gallery-item:hover .gallery-caption { opacity: 1; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-columns-5 .gallery-caption, .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /*====Footer=====*/ footer { padding: 50px 0; background: #2a2d33; } .site-info { margin-bottom: 40px; text-align: center; } .footer-social { margin-bottom: 40px; text-align: center; } .social-icon { display: inline-block; width: 40px; height: 40px; margin: 5px; padding: 8px 0; transition: all .4s ease-in-out; color: #ffffff; color: #abb7c0; border: 1px solid #abb7c0; } .social-icon:hover { color: #ffffff; border: 1px solid #ffffff; } .credits p { font-family: 'Merriweather', Helvetica, Arial, sans-serif; text-align: center; color: #788289; } /*=====Full post page======*/ .entry-author-bio { margin-bottom: 50px; padding: 50px; text-align: center; border: 1px solid #f2f2f2; background-color: #ffffff; } .entry-author-desc h4 a { font-family: 'Merriweather', Helvetica, Arial, sans-serif; text-transform: capitalize; color: #000000; margin-top: 15px; display: inline-block; font-weight: bold; font-size: 24px; } .entry-author-avatar img { border-radius: 100px; } .entry-author-desc p { font-size: 14px; font-weight: normal; line-height: 32px; color: #2f2f2f; } .entry-author-links i { /* border: 1px solid #000000; */ width: 40px; height: 40px; margin: 5px; padding: 12px 12px; transition: all .4s ease-in-out; color: #000000; border-radius: 100px; background-color: #efefef; } .link-twitter i:hover { color: #ffffff; background-color: #44ccf6; } .link-facebook i:hover { color: #ffffff; background-color: #3b5999; } .link-google i:hover { color: #ffffff; background-color: #d23f2f; } .link-pin i:hover { color: #ffffff; background-color: #cb2028; } .link-insta i:hover { color: #ffffff; background-color: #a9348f; } .link-linkdein i:hover { color: #ffffff; background-color: #0075b7; } .post-navigation { margin-bottom: 50px; padding: 50px; background: #ffffff; } .post-nav .prev-reader, .post-nav .next-reader { font-family: 'Merriweather', Helvetica, Arial, sans-serif; display: block; /* letter-spacing: 1px; */ /* text-transform: uppercase; */ font-size: 15px; font-weight: 700; letter-spacing: 0.5px; } .post-nav .prev-reader::before { font-family: FontAwesome; font-size: 10px; margin-right: 5px; content: '\f053'; } .post-nav .next-reader::after { font-family: FontAwesome; font-size: 10px; margin-left: 5px; content: '\f054'; } .prev { text-align: left; } .next { text-align: right; } .post-nav .nav-link { display: inline-block; margin-top: 10px; color: #a4a7aa; font-family: Raleway; } .post-nav .nav-link:hover { color: #84c797; } /*===Comment-list=====*/ .comments { padding: 50px; background: #ffffff; } .comment-col1 { width: 15%; } .comment-col2 { width: 85%; padding-left: 20px; } .comment-col1, .comment-col2 { float: left; } .comment-list { margin-bottom: 50px; padding: 50px; border: 1px solid #f2f2f2; background-color: #ffffff; } /*===Comment-form====*/ #respond h3 { font-family: 'Merriweather', Helvetica, Arial, sans-serif; margin-bottom: 15px; padding-bottom: 15px; font-weight: bold; border-bottom: 1px solid #efefef; } #respond input[type='text'], #respond textarea { margin-bottom: 40px; padding: 25px 20px; border: 2px solid #efefef; box-shadow: none; } #respond input[type='text']:focus, #respond textarea:focus { border: 2px solid #84c797; } #respond input[type='submit'] { font-size: 14px; display: inline-block; /* border-radius: 100px; */ margin-right: 5px; padding: 15px 40px; transition: all .4s ease; text-transform: uppercase; color: #ffffff; border: none; background-color: #2a2d33; /* font-weight: 700; */ } #respond input[type='submit']:hover { background-color: #84c797; } .logged-in-as a { color: #000000; font-size: 14px; } .comment-form-author,.comment-form-email,.comment-form-url { width: 32.9%; display: inline-block; } .comment-body-inner { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #efefef; } .fn { font-weight: bold; } .comment-avatar img { border-radius: 100px; } .comment-meta { font-size: 14px; margin: 10px 0; color: #a5a5a5; } .reply { float: right; } .reply a { font-size: 14px; color: #84c797; } .comment-text p { font-size: 14px; font-weight: 300; line-height: 32px; color: #aaa; } /*===Archive-pages===*/ .archive-header { width: 100%; margin-bottom: 50px; padding: 60px; text-align: center; background: url('images/bg_archive.png') repeat; } .archive-title { font-family: 'Raleway'; font-weight: bold; color: #000000; } .taxonomy-description p { font-family: 'Merriweather'; line-height: 32px; } .author-profile { width: 100%; padding: 5%; text-align: center; background-color: #2a2d33; background-image: url('images/header_bg.png'); background-attachment: fixed; background-size: cover; } .author-profile-avatar { margin-bottom: 10px; } .author-profile-avatar img { border-radius: 100px; } .author-profile h4 { font-family: 'Merriweather'; display: inline-block; margin-top: 10px; color: #ffffff; } .author-profile p { line-height: 38px; color: #ffffff; } /*=======Media quries===============*/ @media screen and (max-width:1024px) { .entry-meta span { margin-bottom: 5px; } } @media screen and (max-width:768px) { .site-logo { text-align: center; } .headline-section { padding: 4% 8%; } .sidebar { margin-top: 50px; } } @media screen and (max-width:640px) { .entry-title { font-size: 40px; } .post-nav { text-align: center; } .next { margin-top: 20px; } } @media screen and (max-width:480px) { .comment-form-author,.comment-form-email,.comment-form-url { width: 100%; display: block; } .comment-col1 { width: 20%; } .comment-col2 { width: 80%; } .entry-title { font-size: 25px; } .entry-author-bio { text-align: center; } .archive-header { padding: 30px 20px; } .post-comments { margin-bottom: 15px; } .taxonomy-description { font-size: 14px; } .headline-section h1 { font-size: 50px; } .entry-header { padding: 30px 30px 0 30px; } .inner-content,.entry-author-bio,.comments,.post-navigation,.comment-list { padding: 30px; } .entry-footer .columns { padding: 5px; } .post-comments, .social-share { text-align: center; } .author-profile { padding: 8% 5%; } } /*========Custom-widgets=========*/ .widget-social-icons { text-align: center; margin-top: 30px; } .widget-social-icons a { color: #4c4b4b; display: inline-block; width: 45px; height: 45px; font-size: 17px; margin-bottom: 5px; padding-top: 10px; background-color: #efefef; transition: all 0.4s ease-in-out; } .widget-social-icons .widget-facebook:hover { background-color: #3b5998; color: #ffffff; } .widget-social-icons .widget-twitter:hover { background-color: #00aced; color: #ffffff; } .widget-social-icons .widget-google:hover { background-color: #d34836; color: #ffffff; } .widget-social-icons .widget-linkedin:hover { background-color: #0077B5; color: #ffffff; } .widget-social-icons .widget-youtube:hover { background-color: #bb0000; color: #ffffff; } .widget-social-icons .widget-pinterest:hover { background-color: #cb2027; color: #ffffff; } .widget-social-icons .widget-dribble:hover { background-color: #ea4c89; color: #ffffff; } .widget-social-icons .widget-flickr:hover { background-color: #ff0084; color: #ffffff; } .widget-social-icons .widget-digg:hover { background-color: #000000; color: #ffffff; } .widget-social-icons .widget-vimeo:hover { background-color: #aad450; color: #ffffff; } .widget-social-icons .widget-rss:hover { background-color: #fe9900; color: #ffffff; } .widget-social-icons .widget-skype:hover { background-color: #01aef2; color: #ffffff; } .brpw-thumbnail { max-width: 35%; } .brpw-content { width: 63%; padding-left: 13px; } .brpw-content p { font-size: 13px; line-height: 24px; margin-bottom: 0; } .brpw-title { display: inline-block; } .brpw-thumbnail { margin-top: 3px; position: relative; overflow: hidden; } .brpw-thumbnail img { border-radius: 3px; transition: all 0.4s ease-in-out; } .mask { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 3px; background-color: rgba(0, 0, 0, 0.5); right: 0; opacity: 0; text-align: center; transition: all 0.4s ease-in-out; } .mask a { color: #ffffff !important; padding: 23% 42%; display: inline-block; } .mask:hover { opacity: 1; } .brpw-content,.brpw-thumbnail { float:left; } .brpw-date { font-size: 13px !important; color: #bebebe; display: block; } .brpw-comments { font-size: 13px !important; color: #bebebe !important; display: block; } .brpw-read-more { font-weight: bold; } .back-to-top { display: none; position: fixed; z-index: 999; right: 30px; bottom: 20px; background: #303133 center 43%; border-radius: 3px; padding: 10px 15px; color: #fff; } .back-to-top:hover,.back-to-top:focus { background-color: #84c797; color: #ffffff; }