/* Theme Name : Rangga Ye Author URI : http://www.ranggaye.com Description : Soon Author : Leonardo Beny Version : 1.0 License : Private */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;overflow:visible;} html{padding:0;margin:0;font-family: 'Nunito', sans-serif;line-height:1;} body {white-space: nowrap;height:100%;} a,a:hover,a:focus{text-decoration:none;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);outline : none;} p, h1 {white-space:normal;} /** HOMEPAGE SLIDER **/ .outer-slider {position:relative;} .slider { position: relative; box-sizing:border-box;float:left;} #slider {position: relative; width: 100% !important;overflow:hidden;} #slider ul {position: relative; margin: 0; padding: 0; height: 100vh; width: 99999px; overflow: hidden; list-style: none;} #slider ul li {position: relative; display: block; float: left; margin: 0; padding: 0; width: 100vw; height: 100vh; text-align: center;} #slider ul li .slide {-webkit-background-size: cover;background-repeat:no-repeat;background-position:center top; -moz-background-size: cover; -o-background-size: cover; background-size: cover;height: 100vh;filter: blur(10px);transition: all 0.5s ease-in;} .control_wrap {padding: 8px;border-radius: 5px;width: 28px;z-index: 10;position: fixed;right: 63px;bottom: 60px;opacity: 1;transition: all 0.8s ease-in;background:rgba(0,0,0,0.5);} .control_next {background:transparent url('https://api.iconify.design/ion-ios-arrow-thin-right.svg?color=%23fff') no-repeat center center / contain;display:block;border: none; height: 32px;font-size: 32px;color:#fff;width:100%; cursor: pointer;outline:none;} .control_prev {background:transparent url('https://api.iconify.design/ion-ios-arrow-thin-left.svg?color=%23fff') no-repeat center center / contain;display:block;border: none; height: 32px;font-size: 32px;color:#fff;width:100%; cursor: pointer;outline:none;} .control_next {z-index:992;} .control_prev:focus, .control_next:focus {outline: none;} .control_prev:hover, .control_next:hover {opacity: 1;-webkit-transition: all 0.2s ease;} .loading {position:absolute;top:0;left:0;height: 100vh;width:100vw;z-index:9;overflow:hidden;box-sizing:border-box; background:linear-gradient(to right, red 99.99%, transparent), linear-gradient(to bottom, red 99.99%, transparent), linear-gradient(to right, red 99.99%, transparent), linear-gradient(to bottom, red 99.99%, transparent); background-size: 100% 10px, 10px 100%, 100% 10px, 10px 100%;; background: linear-gradient(to right, black 99.99%, transparent), linear-gradient(to bottom, black 99.99%, transparent), linear-gradient(to right, black 99.99%, transparent), linear-gradient(to bottom, black 99.99%, transparent); background-size: 100% 8px, 8px 100%, 100% 8px, 8px 100%; background-repeat: no-repeat; animation: progress 7s linear forwards; background-position: -100vw 0px, 100%, 100vw 100%, 0px 100vh; } @keyframes progress { 0% {background-position: -100vw 0px, 100% -100vh, 100vw 100%, 0px 100vh; } 25% {background-position: 0px 0px, 100% -100vh, 100vw 100%, 0px 100vh; } 50% {background-position: 0px 0px, 100% 0px, 100vw 100%, 0px 100vh; } 75% {background-position: 0px 0px, 100% 0px, 0px 100%, 0px 100vh; } 100% {background-position: 0px 0px, 100% 0px, 0px 100%, 0px 0px;} } /** Basic **/ .normal {background:#222;width:100%;} .clear {clear:both;} .scrollable {overflow-y:visible;} .scrollable #logo {margin-left:8px !important;} .scrollable #navigation {margin-right:-33px !important;} .scrollable {white-space:normal !important;} .__scrollable #bwrap2 {margin-left:8px !important;} .ig {color:#888;} .ig i {font-size:14px;} /** Homepage **/ #homepage #header {background:rgba(0,0,0,0) !important;} #homepage { color:#fff; height: 100vh; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center; background-repeat:no-repeat; width: 100%; position: relative; z-index: 3;} #homepage .menu li a {color:#fff;} #homepage .menu li a:hover {color:#ccc;} #homepage #logo a {color:#fff;} #homepage #logo a:hover {color:#fff;} /** header **/ #header {width:100%;font-size:16px;line-height:21px;background:#fff;position:fixed;left:0;top:0;z-index:100;box-sizing:border-box;} #headercenter {width:1225px;margin:0 auto;padding:40px 0;} .transparent {background:transparent !important;} .transparent .menu li a {color:#fff;} .transparent #logo a {color:#fff;} #logo {float:left;font-weight:800;} #logo a {color:#000;letter-spacing:2.5px; font-size:12px;} #logo a:hover {color:#292929;} .menu {float:right;ont-weight:700;} .menu li {display:inline;list-style:none;margin-right:20px;letter-spacing:2.5px;margin-top:2px;font-size:12px;text-transform:uppercase;} .menu li:nth-last-child(1) {margin-right:0;} .menu li a {color:#000;} .menu li a:hover {color:#ccc ;} .stop {position:static !important;} .opacity0 {display:none;} .nomt0 {margin-top:22px !important;padding-top:0 !important;} .nofix {position:static !important;} .nomt {margin-top:0 !important;padding-top:0 !important;} .nemt {margin-top:-20px !important;} #backto {position:fixed;right:80px;bottom:40px;color:#aaa;z-index:12;font-size:20px;} #layer1 {position:absolute;width:100%;left:0;top:0;background:transparent;height:100%;z-index:2;} /** contact **/ #contact {width:688px;margin:180px auto 0;line-height:24px;font-size:14px;letter-spacing:1px;} #contact input {width:calc((100% - 40px) / 3);height:40px;line-height:40px;padding:0 10px;box-sizing:border-box;border:1px solid #ddd;margin-right:20px;margin-bottom:20px;line-height:24px;font-size:12px;color:#999;letter-spacing:1px;font-family:monospace;display:inline;} #contact input:nth-child(3) {margin-right:0;} #contact textarea {width:100%;line-height:40px;padding:0 10px;box-sizing:border-box;border:1px solid #ddd;margin-bottom:20px;line-height:24px;font-size:12px;color:#999;letter-spacing:1px;} #contact button {background:none;border:1px solid #ddd;padding:10px;width:100px;text-align:center;line-height:24px;font-size:14px;color:#999;letter-spacing:1px;-webkit-transition: all 500ms; transition: all 500ms;} #contact button:hover {background:#999;color:#fff;} .center {width:100%;white-space:normal;text-align:center;line-height:21px;font-size:14px;color:#666;letter-spacing:1px;padding:0 0 10px;box-sizing:border-box;} .center p {margin-bottom:20px;} #newco {text-align:center;padding:0 0 30px;margin-top:-30px;color:#666;} .isno {border:1px solid red !important;} /** Pages Contact and About **/ #about {width:915px;margin:0 auto 0;position:absolute;text-align: justify;text-justify: inter-word; left: 50%; top: 50%; transform: translate(-50%, -50%);} #aboutwrap {position:relative;min-height:100vh;} #about img {width:375px;height:250px;} #about strong {font-weight:700;color:#000;} #about h1 {font-weight:700;color:#000;font-size:18px;margin-bottom:20px;} #about p {margin-bottom:20px;line-height:21px;font-size:14px;color:#444;letter-spacing:1px;} #about aside {width:375px;float:left;margin-right:40px;} #about .content {min-height:300px;width:500px;padding:0;box-sizing:border-box;float:right;background:transparent;} #protectit {position:absolute;width:100%;left:0;top:0;background:transparent;height:250px;z-index:2;} /** Single Post for Gallery Children **/ #slide {width:auto;height:calc(100vh - 132px); white-space: nowrap;-webkit-overflow-scrolling: touch;cursor: e-resize; margin-top:102px; } #slide h1 {font-size:21px;text-align:right;margin-bottom:15px;color:#444;letter-spacing:3px; font-weight:700;} #slide aside {width:322px;float:left;white-space: normal;margin-right:45px;height:100%;} #slide #child {position: relative;top: 55%;transform: translateY(-55%); margin-top: -0.5em;left:0;padding-left:62px;} #slide p {margin-bottom:20px;text-align:right;line-height:21px;font-size:14px;color:#555;letter-spacing:1px;} .images{display:inline-block; margin:0 10px 0 0;position:relative;height:100%;} .images a {cursor: e-resize;} .images img {width:auto;height:100%;} /** gallery Subcategory **/ #wrap {width:1225px;margin:102px auto 0;background:#fff;} #wrap h1 {font-size:28px;text-align:right;margin-bottom:20px;color:#444;letter-spacing:2px;} #wrap p {margin-bottom:20px;text-align:right;line-height:24px;font-size:16px;color:#999;letter-spacing:1px;} .article {width:327px;padding:0 50px 0 0;box-sizing:border-box;float:left;} #wrap aside {float:right;width:900px;} #img {width:900px;display:block;height:auto;margin-bottom:14px;position:relative;clear:both;overflow:hidden;} .layer-image {position: absolute; top: 0; left: 0; background: transparent; display: block; width: 100%; z-index: 5; height:100% } #imgs iframe {width:100%;} #imgwrap {width:100%;} #imgv {width:443px;display:block;height:auto;margin-bottom:14px;position:relative;margin-right:14px;float:left;} #img img {width:900px;height:auto;float:left;} #img:nth-last-child(1) { margin-bottom:50px;} #imgv img {width:443px!important;height:auto;float:left;} #sticky {margin-top: 0 !important; position: fixed;top: 50%;transform: translateY(-50%);z-index: 3;} #sticky p, #child p {font-size:12px;color:#555;letter-spacing:1px;line-height:18px !important;} #sticky h1 {font-size:18px;color:#444;letter-spacing:2px; font-weight:600; white-space:normal;width:100%;word-wrap: break-word;line-height:1.4;} #shareit {margin-top:20px;text-align:right;} #shareit a{width:20px;height:20px;border:1px solid #555;border-radius:20px;display:inline-block;text-align:center;line-height:20px;color:#fff;font-size:9px;margin-left:10px; -webkit-transition: all 200ms; transition: all 200ms;background:#555;} #shareit a:hover{background:#999;color:#fff;border:1px solid #999;} /** Loop Projects **/ .project-post {width:calc((100% - 40px) / 3);height:auto;overflow:hidden;margin-right:20px;margin-bottom:20px;position:relative;float:left;} .project-post:nth-child(3n) {margin-right:0;} .project-post .featured-image {width:100%;margin-bottom:0 !important;} .project-post .featured-image img {width:100%;height:auto;} .project-post .popup2 {content: '';position: absolute;width:100%;height:100%;top:0;left: 0;z-index:3;} .project-post .titlechild{margin:10px 0 !important;border-box:box-sizing;line-height:16px;white-space:normal !important;font-size:14px;letter-spacing:1.5px;font-weight:500;color:#eee;background:#000;position:absolute;top:60%;padding:10px;} .project-post:hover .titlechild {color:#aaa;} /** Blog **/ #blog-area {width:1225px;margin:102px auto 0;} .blog-post {width:calc((100% - 40px) / 3);margin-right:20px;float:left;margin-bottom:17px;} .blog-post:nth-child(3n) {margin-right:0;} .blog-post .featured-image {position:relative;} .blog-post .featured-image img {width:100%;height:auto;margin-bottom:8px;} .blog-title { font-size: 12px; line-height:22px; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; text-align: center; font-weight: 600; font-style: normal; white-space:normal; } .blog-title a {color:#444;} .blog-title a:hover {color:#000;} .foverlay {z-index:5;top:0;left:0;height:100%;width:100%;position:absolute;} .blog-post:hover img {opacity:0.96;} .wp-block-gallery {width:100%;} #container {width:1225px; box-sizing:border-box;margin:102px auto 0; } #container ul, #container li {list-style:none;} .grid-sizer, .wp-block-image { width: 25%; } #container .wp-block-image { padding:0 2.5px 5px; float: left; box-sizing:border-box;} .wp-block-image img {width: 100%;height:auto;float:left;} .wp-block-image:hover img {opacity:0.96;} .horizontal-page .horizontal-content { height: calc(100vh - 132px); white-space: nowrap; width: 100%; padding-top:102px; } .horizontal-page .horizontal-content .horizontal-item { height: 100%; width: auto; position: relative; margin: 0 0 0 0; display: inline-block; white-space: normal; vertical-align: top !important; } .horizontal-page .horizontal-content .horizontal-item { margin: 0 5px 20px 0; display: inline-block; height: auto !important; } .horizontal-item img {height:calc(100vh - 132px);width:auto;} .horizontal-content aside {height:100%;padding:10px;width:400px;margin:0;box-sizing:border-box;display:inline-block;white-space: normal; margin-right: 45px;} .horizontal-content #child {position: relative; top: 55%; transform: translateY(-55%); left: 0; padding-left: 62px;} .horizontal-content #child h1 {font-size: 21px; text-align: right; margin-bottom: 15px; color: #444; letter-spacing: 3px; font-weight: 700;} /** Offscreen Menu **/ #offscreen, label[for="menu-toggle"], #menu-toggle {display:none;} #e404 {position: absolute; top: 40%; left: 50%; -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} #ewrap {text-align:left;display:table;margin:100px auto;letter-spacing:1px;padding:0 20px;} #ewrap h1 {font-size:40px;font-weight:400;color:#fff;margin-bottom:20px;} #ewrap strong {font-size:20px;line-height:1.5;color:#eee;display:block;margin-bottom:5px;} #ewrap p {font-size:14px;color:#fff;line-height:20px;letter-spacing:1px;} /** Social Media Pop Up **/ .popups {position: relative; display: inline; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index:1; } .popups .popupstext {visibility: hidden; width: 150px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 2px; position: absolute; z-index: 1; bottom: 180%; left: 45%; margin-left: -70px; font-size:14px; } .popups .popupstext::after {content: ""; position: absolute; top: 100%; left: 50%; margin-top:-1px; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .popups .show {visibility: visible; display:block; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } @-webkit-keyframes fadeIn {from {opacity:0;} to {opacity:1;}} @keyframes fadeIn {from {opacity:0;} to {opacity:1;}} #offscreen a {color:#fff;} #offscreen a:hover{color:#999;} #menu-toggle:not(:checked) ~ #offscreen {margin-left: -150px;-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear;} #menu-toggle:checked ~ nav {margin-left: 0;-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear;} #menu-toggle:checked ~ .outer-slider {margin-left: 120px;-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear;} #menu-toggle:checked ~ #normal {left: 120px;-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear;} #menu-toggle:checked ~ #header {margin-left: 120px;} #menu-toggle:checked ~ #normal #header {margin-left: 120px;} #menu-toggle:checked ~ #h404 {margin-left: 120px;-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear;} #menu-toggle:checked ~ #h404 #header {margin-left: 120px;} #offscreen,#header,#normal,.outer-slider {-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear;margin-left:0;left:0;} #homepage, #normal {position:relative;min-height:100vh;} .box-shadow-menu { position: relative; padding-left: 1.25em; } .box-shadow-menu:before { content: ""; position: absolute; left: 0; top: 0.25em; width: 1em; height: 0.15em; background: black; box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black; } @media only screen and (max-width: 667px) { html {overflow-x:hidden;} .normal {overflow:hidden;} body {width:100%;overflow:auto;overflow-x:hidden !important;} /** Offscreen **/ label[for="menu-toggle"] {display:block;} label[for="menu-toggle"] { font-size:16px !important;line-height:21px; z-index: 10000; float:left;padding-left:20px;position:absolute;top:42px;} .menuhome .box-shadow-menu:before { background: white; box-shadow: 0 0.25em 0 0 white, 0 0.5em 0 0 white; } #menu-toggle {left: -100%; position: absolute; top: -100%; -webkit-appearance: none; } #offscreen {background: #292929; height: 100%; width: 120px; display:block; position: fixed; padding-top:6px; top:0; padding-top:32px; } #offscreen .menu li{margin:0 0 10px;border-bottom:1px solid #222;margin-bottom:0;border-top:1px solid #333;padding:12px 15px 12px;font-size:12px;letter-spacing:2px;text-transform:uppercase;display:block;} #headercenter {width:100%;} #logo {float:none;display:table;margin:0 auto;} #headercenter .menu {display:none;} #contact {white-space: normal;width:100%;margin:100px 0 10px;padding:0 20px;box-sizing:border-box;} #contact input {width:100%;margin-right:0;} .contact {margin:20px 0;} .contact p{clear:both;text-align:center;width:100%;margin-bottom:10px!important;} #contact button {margin-bottom:60px;} #backto {right:30px;bottom:30px;} .hdn {display:none;} #container,#blog-area,#wrap,#about .content,#imgs {width:100%;} .grid-sizer, .wp-block-image { width: 100%;} #container .wp-block-image {padding:0;} .blog-post {width:100%;padding:0 10px 20px;margin:0;box-sizing: border-box;} .article {width:100%;position:static !important;} #wrap aside,#imgwrap {width:100%;} .featured-image img, .horizontal-item img {width:100%;height:auto;float:left;} #imgwrap .featured-image img{margin-bottom:10px;} #bwrap,#sticky, .horizontal-content #child ,#imgs,#container .wp-block-image,.horizontal-page .horizontal-content{padding-left:10px;padding-right:10px;box-sizing:border-box;} .blog-title {clear:both;} /** About **/ #aboutwrap { min-height: 0; margin-top: 102px;} #about article {width:100%;padding:10px 20px;text-align: left; box-sizing:border-box;} #about {width:100%;margin-top:0;position:static;transform:none;} #about aside {width:100%;margin:0;} #about img {width:100%;height:auto;margin:0;} #about .content {padding:10px;box-sizing:border-box;padding: 20px;} .project-post { width: 100%;margin:0 0 20px} .horizontal-page .horizontal-content {white-space:normal;height:auto;overflow-x: hidden;} .horizontal-content aside {width:100%;height:auto;} horizontal-page .horizontal-content .horizontal-item {margin: 0;} .horizontal-item img { width:100%;height:auto;} #container .wp-block-image {margin-bottom:10px;} #container .wp-block-image:nth-last-child(1) {margin-bottom:0;} #sticky,.horizontal-content #child {transform:none;margin-bottom:20px;} #sticky h1,#sticky p,#shareit,.horizontal-content #child h1 {text-align:center;} .horizontal-page .horizontal-content .horizontal-item {margin-bottom:10px;} .control_wrap {right: 20px;bottom: 20px;} .foverlay {min-height:600px;} .blog-post .featured-image {overflow:hidden;} } @media only screen and (min-width: 668px) and (max-width: 1023px) { html {overflow-x:hidden;} body {width:100%;overflow:auto;overflow-x:hidden !important;} /** Offscreen **/ label[for="menu-toggle"] {display:block;} label[for="menu-toggle"] { font-size:16px !important;line-height:21px; z-index: 10000; float:left;padding-left:20px;position:absolute;top:40px;} .menuhome .box-shadow-menu:before { background: white; box-shadow: 0 0.25em 0 0 white, 0 0.5em 0 0 white; } #menu-toggle {left: -100%; position: absolute; top: -100%; -webkit-appearance: none; } #offscreen {background: #292929; height: 100%; width: 120px; display:block; position: fixed; padding-top:6px; top:0; padding-top:24px; } #offscreen .menu li{margin:0 0 10px;border-bottom:1px solid #222;margin-bottom:0;border-top:1px solid #333;padding:12px 15px 12px;font-size:12px;letter-spacing:2px;text-transform:uppercase;display:block;} #headercenter {width:100%;} #logo {float:none;display:table;margin:0 auto;} #headercenter .menu {display:none;} #contact {white-space: normal;width:100%;margin:100px 0 10px;padding:0 20px;box-sizing:border-box;} #backto {right:30px;bottom:30px;} .hdn {display:none;} #container,#blog-area,#wrap,#about .content {width:100%;} #blog-area {padding-left:10px;padding-right:10px;box-sizing:border-box;} .article {width:100%;position:static !important;} #wrap aside,#imgwrap {width:100%;} .featured-image img {width:100%;height:auto;} /** About **/ #about article {width:100%;padding:10px 20px;text-align: left; box-sizing:border-box;} #about {width:100%;margin-top:90px;} #about aside {width:40%;margin:60px 0 15px;} #about .content {padding:10px;box-sizing:border-box;width:60%;float:none;margin:0 auto;display:table;} #about img { width: 100%; height: auto;} .project-post {height: auto;} #aboutwrap { min-height: 0; margin-top: 102px;} #about article {width:100%;padding:10px 20px;text-align: left; box-sizing:border-box;} #about {width:100%;margin-top:0;position:static;transform:none;} #about aside {width:100%;margin:0 0 15px;} #about img {width:100%;height:auto;margin:0;} #about .content {padding:10px;box-sizing:border-box;padding: 20px;} #bwrap,#sticky, .horizontal-content #child ,#imgs,.horizontal-page .horizontal-content{padding-left:10px;padding-right:10px;box-sizing:border-box;} #sticky h1,#sticky p,#shareit,.horizontal-content #child h1 {text-align:center;} #sticky,.horizontal-content #child {transform:none;margin-bottom:20px;} .blog-post .featured-image img {height:auto !important;} .horizontal-page .horizontal-content {white-space:normal;white-space:normal;height:auto;overflow-x: hidden;} .horizontal-content aside {width:100%;height:auto;} horizontal-page .horizontal-content .horizontal-item {margin: 0;} .horizontal-item img { width:100%;height:auto;} .control_wrap {right: 20px;bottom: 20px;} } @media only screen and (min-width: 1024px) and (max-width: 1225px) { #headercenter,#container,#wrap,#blog-area {width:100%;} .grid-sizer, .wp-block-image { width: 25%; } #headercenter,#wrap,#blog-area {padding-right:10px;padding-left:10px;box-sizing:border-box;} #wrap aside { width: calc(100% - 337px);} #imgwrap {width:100%;} #imgwrap img {width:100%;height:auto;} } @media only screen and (min-width: 1025px) and (max-width: 1440px) { #backto {right:40px;} } .box-shadow-menu { position: relative; padding-left: 1.25em; } .box-shadow-menu:before { content: ""; position: absolute; left: 0; top: 0.25em; width: 1em; height: 0.15em; background: black; box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black; } .showbutton {position:absolute;background:transparent;width:100%;height:100%;z-index:3;left:0;top:0;box-sizing:border-box;border:none;} .gallery-grid {white-space:normal;} .gallery-grid .featured-image {position:relative;width:calc((100% - 20px) / 3 );margin-right:10px;margin-bottom:10px;float:left;overflow:hidden;} .gallery-grid .featured-image:nth-child(3n) {margin-right:0;} .gallery-grid .featured-image img {width:100%;height:auto;} #imgwrap .featured-image {margin-bottom:20px;position:relative;}