/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, tt, var, b, u, i, center, dl, dt, dd, 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; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, aside, main, article, figure {display: block; } body { line-height: 1; } ol { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a {text-decoration: none; } /*remove if needed*/ /* HTML5 BASICS SCROLLBAR & FONT & COLOR */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-button { width: 0px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track-piece { background: transparent; } ::-webkit-scrollbar-thumb { background: #ccc; width: 30px; } ::-webkit-scrollbar-thumb:hover { background: #aaa; width: 30px; } ::-webkit-scrollbar-corner { background: transparent;} ::-webkit-resizer { background: transparent; } .nimbus { font-family: nimbus; } .roman-swash { font-family: roman-swash; } .akazan { font-family: akazan; } .ballantines { font-family: ballantines; } .ballantines p { font-size: 1em;} .canossa { font-family: canossa; } .casa { font-family: casa; } .dragon { font-family: dragon; } .fleeting { font-family: fleeting; } .florence { font-family: florence; } .florida { font-family: florida; } .function-book { font-family: function-book; } .gareth { font-family: gareth; } .horsham { font-family: horsham; } .nesobrite { font-family: nesobrite; } .ohitashi { font-family: ohitashi; } .quebec { font-family: quebec; } .ravenna { font-family: ravenna; } .someroman { font-family: someroman; } .wichita { font-family: wichita; } .zephyr { font-family: zephyr; } /*colors*/ .bcred { background-color: #d24d57; color: #fff; } .bcflat-green { background-color: #16a085; color: #fff; } .bcgreen { background-color: #27ae60; color: #fff; } .bcsea-blue { background-color: #007a96; color: #fff; } .bccharcoal { background-color: #31353d; color: #fff; } .bcpeach { background-color: #e5aa2a; color: #fff; } .bcwhite { background-color: rgba(250,250,250,0.95); color: #444; } .cwhite { color: #fff; } /*alignment*/ .dt { display: table; } .dtc { display: table-cell; } .db { display: block; } .di { display: inline-block; } .dn { display: none; } .drtl { direction: rtl; } .dltr { direction: ltr; } .drtlo { unicode-bidi: bidi-override; } .fwb { font-weight: bold;} .fwbr { font-weight: bolder; } .fwl { font-weight: lighter; } .fvs { font-variant: small-caps; } .lsn { list-style: none; } .lstc { list-style-type: circle; } .lsts { list-style-type: square; } .lstur { list-style-type: upper-roman; } .lstlr { list-style-type: lower-roman; } .lstua { list-style-type: upper-alpha; } .lstla { list-style-type: lower-alpha; } .f { flex: 1; -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ } /*Let all the flexible items be the same length, regardles of its content:*/ .fr { float: right;} .fl { float: left;} .cl { clear: left; } /*follows after float*/ .cr { clear: right; } /*follows after float*/ .fsi { font-style: italic; } .fso { font-style: oblique; } .tdu { text-decoration: underline; } .tdo { text-decoration: overline; } .tdl { text-decoration: line-through; } .tdn { text-decoration: none; } .oh { overflow: hidden; } .oa { overflow: auto; } /*allows for full wrapping*/ .os { overflow: scroll; } .oxs { overflow-x: scroll; } .oxh { overflow-x: hidden; } .oxa { overflow-x: auto; } .oys { overflow-y: scroll; } .oyh { overflow-y: hidden; } .oya { overflow-y: auto; } .clip { position clip: rect(50px,50px,50px,50px); } .acc { display: flex; flex-wrap: wrap; align-content: center; } /*places content in the middle verticaly and otherwise*/ .acsb { display: flex; flex-wrap: wrap; align-content: space-between; } .acs { display: flex; flex-wrap: wrap; align-content: stretch; } .acfs { display: flex; flex-wrap: wrap; align-content: flex-start; } .acfe { display: flex; flex-wrap: wrap; align-content: flex-end; } .acsa { display: flex; flex-wrap: wrap; align-content: space-around; } .lo { display: inline-block; overflow: hidden; } .pr { position: relative; } .tar { text-align: right; } .tal { text-align: left; } .tac { text-align: center; } .taj { text-align: justify; } .bl { border-left: 1px solid #888; } .b0 { border: 0px; } .fsi { font-style: italic; } .vv { visibility: visible; } .vh { visibility: hidden; } .tu { text-transform: uppercase; } .tc { text-transform: capitalize; } .tl { text-transform: lowercase; } .tdn { text-decoration: none; } .tdu { text-decoration: underline; } .center { width: 100px; margin: 50px; padding-top: 50px; height: 120px; font-size: 30px; display: inline-block; overflow: hidden;} .righty { width: 300px; margin: 50px; padding-top: 50px; height: 120px; font-size: 35px; display: inline-block; overflow: hidden; line-height: 120px; } .lefty { width: 600px; margin: 50px auto; padding-top: 50px; font-size: 30px; display: block; overflow: hidden; text-align: center; } .w { position: relative; float: left; margin: 0px; display: inline-block; height: 0px; overflow: hidden; } /*wrap*/ .nf { position: fixed; left: 0px; top: 0px; right: 0px; } .lo { display: inline-block; overflow: hidden; } /*SIZING*/ .fs1 { font-size: 0.7em; } .fs2 { font-size: 14px; } .fs3 { font-size: 1em; } .fs4 { font-size: 20px; } .fs5 { font-size: 30px; } .fs6 { font-size: 50px; } .m { margin: auto;} .m0 { margin:0px;} .m1 { margin: 5px; } .m2 { margin: 10px; } .m3 { margin: 15px; } .m4 { margin: 20px; } .m5 { margin: 50px; } .mn0 { margin: 0px auto 0px;} .mn1 { margin: 5px auto 0px; } .mn2 { margin: 10px auto 0px; } .mn3 { margin: 15px auto 0px; } .mn4 { margin: 20px auto 0px; } .mn5 { margin: 50px auto; } .p0 { padding: 0px; } .p1 { padding: 5px; } .p2 { padding: 10px; } .p3 { padding: 15px; } .p4 { padding: 20px; } .p5 { padding: 50px; } .pn1 { padding: 5px 0px 0px 0px; } .pn2 { padding: 10px 0px 0px 0px; } .pn3 { padding: 15px 0px 0px 0px; } .pn4 { padding: 20px 0px 0px 0px; } .pn5 { padding: 50px 0px 0px 0px; } .pat { position: absolute; top: 0px; } .pan { position: absolute; top: 0px; left: 0px; right: 0px; } .pao { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } .pau { position: absolute; right: 0px; left: 0px; bottom: 0px; } .pac { position: absolute; top: 0px; left: 0px; bottom: 0px; } .pab { position: absolute; top: 0px; right: 0px; bottom: 0px; } .pft { position: fixed; top: 0px; } .pfn { position: fixed; top: 0px; left: 0px; right: 0px; } .pf0 { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; } .pfc { position: fixed; top: 0px; left: 0px; bottom: 0px; } .pfu { position: fixed; right: 0px; left: 0px; bottom: 0px; } .pfb { position: fixed; top: 0px; right: 0px; bottom: 0px; } .wspnw { white-space:nowrap; } .wspw { white-space:pre-wrap; } .wsp { white-space:pre; } .wspl { white-space:pre-line; } .ti1 { text-indent: 5px; } .ti2 { text-indent: 10px; } .ti3 { text-indent: 15px; } .ti4 { text-indent: 20px; } .ti5 { text-indent: 30px; } .ls1 { letter-spacing: 2px; } .ls2 { letter-spacing: 4px; } .ls3 { letter-spacing: 8px; } .ls4 { letter-spacing: 10px; } .ls5 { letter-spacing: 20px; } .ws1 { word-spacing: 5px; } .ws2 { word-spacing: 10px; } .ws3 { word-spacing: 15px; } .ws4 { word-spacing: 20px; } .ws5 { word-spacing: 30px; } .zi1 { z-index: -2; } .zi2 { z-index: -1; } .zi3 { z-index: 1; } .zi4 { z-index: 2; } .zi5 { z-index: 100; } .tsy1 { transform: skewY(2deg);} .tsy2 { transform: skewY(5deg);} .tsy3 { transform: skewY(15deg);} .tsy4 { transform: skewY(30deg);} .tsy5 { transform: skewY(45deg);} .tsy1o { transform: skewY(-2deg);} .tsy2o { transform: skewY(-5deg);} .tsy3o { transform: skewY(-15deg);} .tsy4o { transform: skewY(-30deg);} .tsy5o { transform: skewY(-45deg);} .tsx1 { transform: skewX(2deg);} .tsx2 { transform: skewX(5deg);} .tsx3 { transform: skewX(15deg);} .tsx4 { transform: skewX(30deg);} .tsx5 { transform: skewX(45deg);} .tsx1o { transform: skewX(-2deg);} .tsx2o { transform: skewX(-5deg);} .tsx3o { transform: skewX(-15deg);} .tsx4o { transform: skewX(-30deg);} .tsx5o { transform: skewX(-45deg);} .hidden { display: none; -webkit-appearance: none;} .hidden:checked ~ #menu{ display: block; } /* MAJOR SECTION -- HEADER -- MAIN -- FOOTER */ #wrap_top { height: 100px; width: 100%; margin: 0px; line-height: 100px; position: fixed; top: 0px; left: 0px; right: 0px; background: #fff; z-index: 300; box-shadow: 0px 0px 15px #000; } #header_top { text-align: center; width: 960px; height: 100px; margin: auto; line-height: 100px; background: #fff; z-index: 300; } #header_top nav { display: inline-block; width: 300px; height: 100px; overflow: hidden;} #header_top a { color: #555; margin: 100px 10px 0px; text-decoration: none; font-weight: bold; font-size: 20px; } /* ICONS + BUTTONS */ .i_person { background-image: url('api/icons/black_user.png'); background-repeat: no-repeat; } .i_lock { background-image: url('api/icons/white_lock.png'); background-repeat: no-repeat; } .i_bulb { background-image: url('api/icons/white_bulb.png'); background-repeat: no-repeat; } .i_bulb_black { background-image: url('api/icons/black_bulb.png'); background-repeat: no-repeat; } .i_delete { background-image: url('api/icons/white_delete.png'); background-repeat: no-repeat; } .i_tick { background-image: url('api/icons/white_accept.png'); background-repeat: no-repeat; } .i_edit { background-image: url('api/icons/white_edit.png'); background-repeat: no-repeat; } .i_notepad { background-image: url('api/icons/white_draft.png'); background-repeat: no-repeat; } .i_notepad_black { background-image: url('api/icons/black_draft.png'); background-repeat: no-repeat; } .i_refresh { background-image: url('api/icons/white_update.png'); background-repeat: no-repeat; } .i_switch-on { background-image: url('api/icons/switch_on.png'); background-repeat: no-repeat; } .i_switch-off { background-image: url('api/icons/switch_off.png'); background-repeat: no-repeat; } .i_basket { background-image: url('api/icons/black_basket.png'); background-repeat: no-repeat; } .i_bell { background-image: url('api/icons/black_bell.png'); background-repeat: no-repeat; } .i_bin { background-image: url('api/icons/black_bin.png'); background-repeat: no-repeat; } .i_trash { background-image: url('api/icons/black_trash.png'); background-repeat: no-repeat; } .i_cart { background-image: url('api/icons/black_cart.png'); background-repeat: no-repeat; } .i_delivery { background-image: url('api/icons/black_delivery.png'); background-repeat: no-repeat; } .i_email { background-image: url('api/icons/black_email.png'); background-repeat: no-repeat; } .i_gift { background-image: url('api/icons/black_gift.png'); background-repeat: no-repeat; } .i_heart { background-image: url('api/icons/black_heart.png'); background-repeat: no-repeat; } .i_heart_outline { background-image: url('api/icons/black_heart_outline.png'); background-repeat: no-repeat; } .i_home { background-image: url('api/icons/black_home.png'); background-repeat: no-repeat; } .i_key { background-image: url('api/icons/black_key.png'); background-repeat: no-repeat; } .i_location { background-image: url('api/icons/black_location.png'); background-repeat: no-repeat; } .i_logout { background-image: url('api/icons/black_logout.png'); background-repeat: no-repeat; } .i_mail { background-image: url('api/icons/black_mail.png'); background-repeat: no-repeat; } .i_pc { background-image: url('api/icons/black_pc.png'); background-repeat: no-repeat; } .i_tablet { background-image: url('api/icons/black_tablet.png'); background-repeat: no-repeat; } .i_cellphone { background-image: url('api/icons/black_cellphone.png'); background-repeat: no-repeat; } .i_phone { background-image: url('api/icons/black_phone.png'); background-repeat: no-repeat; } .i_power { background-image: url('api/icons/black_power.png'); background-repeat: no-repeat; } .i_search { background-image: url('api/icons/black_search.png'); background-repeat: no-repeat; } .i_settings { background-image: url('api/icons/black_settings.png'); background-repeat: no-repeat; } .i_star { background-image: url('api/icons/black_star.png'); background-repeat: no-repeat; } .i_star_half { background-image: url('api/icons/black_star_half.png'); background-repeat: no-repeat; } .i_star_half_outline { background-image: url('api/icons/black_star_half_outline.png'); background-repeat: no-repeat; } .i_star_outline { background-image: url('api/icons/black_star_outline.png'); background-repeat: no-repeat; } .i_view { background-image: url('api/icons/black_view.png'); background-repeat: no-repeat; } .i_warning { background-image: url('api/icons/black_warning.png'); background-repeat: no-repeat; } .i_expand { background-image: url('api/icons/black_resize_expand.png'); background-repeat: no-repeat; } .i_minimize { background-image: url('api/icons/black_resize_minimize.png'); background-repeat: no-repeat; } .i_menu { background-image: url('api/icons/black_menu.png'); background-repeat: no-repeat; } .i_landscape { background-image: url('api/icons/black_landscape.png'); background-repeat: no-repeat; } .i_bucket { background-image: url('api/icons/black_bucket.png'); background-repeat: no-repeat; } .i_brush { background-image: url('api/icons/black_brush.png'); background-repeat: no-repeat; } .i_paintbrush { background-image: url('api/icons/black_paintbrush.png'); background-repeat: no-repeat; } .i_font { background-image: url('api/icons/black_font.png'); background-repeat: no-repeat; } .i_text { background-image: url('api/icons/black_text.png'); background-repeat: no-repeat; } .i_web { background-image: url('api/icons/black_web.png'); background-repeat: no-repeat; } .i_L_XXS { padding: 0px 0px 0px 30px; background-size: 26px; background-position: 2px; text-align: left; } .i_L_XS { padding: 0px 0px 0px 30px; background-size: 20px; background-position: 5px; text-align: left; } .i_L_S { padding: 0px 0px 0px 30px; background-size: 16px; background-position: 7px; text-align: left; } .i_L_M { padding: 0px 0px 0px 50px; background-size: 16px; background-position: 7px; text-align: left; } .i_L_L { padding: 0px 0px 0px 50px; background-size: 26px; background-position: 7px; text-align: left; } .i_R_S { padding: 0px 30px 0px 0px; background-size: 16px; background-position: 98%; text-align: left; } .i_R_M { padding: 0px 50px 0px 0px; background-size: 16px; background-position: 7px; text-align: left; } .i_R_L { padding: 0px 50px 0px 0px; background-size: 26px; background-position: 7px; text-align: left; } .button_hero { display: inline-block; border:0px; height: 50px; width: 200px; font-size: 1em; font-weight: bold; } .button_huge { display: inline-block; border:0px; height: 50px; width: 200px; font-size: 14px; } .button_XL { display: inline-block; border:0px; height: 30px; width: 260px; } .button_big { display: inline-block; border:0px; height: 30px; width: 150px; } .button_long { display: inline-block; border:0px; height: 30px; width: 100px; } .button_medium { display: inline-block; border:0px; height: 30px; width: 50px; } .button_short { display: inline-block; border:0px; height: 30px; width: 30px; } .button_round { display: inline-block; border:0px; height: 30px; width: 30px; border-radius: 15px; box-shadow: 2px 2px 3px #888; } .button_wide { display: inline-block; border:0px; height: 30px; width: 100px; padding-left: 50px; } .button_free { display: inline-block; border:0px; height: 30px; min-width: 50px; padding-left: 50px; } .button_clean { display: inline-block; border:0px; height: 30px; width: 100px; padding: 0px; margin: 0px; } .button_small { display: inline-block; border:0px; height: 20px; width: 20px; padding: 0px; font-size: 20px;} .jsendor { width: 210px; border:0px; height: 30px; } .border_black { border: 2px #444 solid; background-color: transparent; color: #444; } .border_white { border: 2px #fff solid; background-color: transparent; color: #fff; } .border_contrast { border: 2px #fff solid; background-color: #555; color: #fff; } .button_blank { } .button_full { display: inline-block; border:0px; height: 30px; width: 100%; line-height: 30px; } .full_button, .full_cover { border:0px; height: 100%; width: 100%; text-align: center;} .full_delete { background-color: #d24d57; color: #fff; background-image: url('api/icons/white_delete.png'); background-repeat: no-repeat; background-size: 20%; background-position: 50% 50%; opacity: 0.7; display: none; } .picture_article:hover .full_delete {display: block;} .big_custom { padding: 0px 0px 0px 50px; text-align: left; background-image: url('api/icons/white_bulb.png'); background-repeat: no-repeat; background-size: 26px; background-position: 7px; } .long_delete, .short_delete { padding: 0px 0px 0px 30px; text-align: left; background-color: #d24d57; color: #fff; background-image: url('api/icons/white_delete.png'); background-repeat: no-repeat; background-size: 16px; background-position: 7px; } .long_accept, .short_accept { padding: 0px 0px 0px 30px; text-align: left; background-color: #16a085; color: #fff; background-image: url('api/icons/white_accept.png'); background-repeat: no-repeat; background-size: 16px; background-position: 7px; } .long_edit, .short_edit { padding: 0px 0px 0px 30px; text-align: left; background-color: #007a96; color: #fff; background-image: url('api/icons/white_edit.png'); background-repeat: no-repeat; background-size: 16px; background-position: 7px; } .long_draft, .short_draft { padding: 0px 0px 0px 30px; text-align: left; background-color: #31353d; color: #fff; background-image: url('api/icons/white_draft.png'); background-repeat: no-repeat; background-size: 16px; background-position: 7px; } .long_update, .short_update { padding: 0px 0px 0px 30px; text-align: left; background-color: #27ae60; color: #fff; background-image: url('api/icons/white_update.png'); background-repeat: no-repeat; background-size: 16px; background-position: 7px; } .long_on, .short_on { padding: 0px 0px 0px 50px; text-align: left; background-color: transparent; background-image: url('api/icons/switch_on.png'); background-repeat: no-repeat; background-size: 30px; background-position: 7px;} .long_off, .short_off { padding: 0px 0px 0px 50px; text-align: left; background-color: transparent; background-image: url('api/icons/switch_off.png'); background-repeat: no-repeat; background-size: 30px; background-position: 7px;} .long_dead, .short_dead { padding: 0px 0px 0px 50px; text-align: left; background-color: transparent; background-image: url('api/icons/switch_dead.png'); background-repeat: no-repeat; background-size: 30px; background-position: 7px;} .long_delete { } /* WIDTH & HEIGHT === SECTIONS BY PERCENTAGE % --- first number is number second is division*/ .w11 { width: 10%; } .w19 { width: 11.111111111111%; } .w18 { width: 12.5%; } .w17 { width: 14.285714285714%; } .w16 { width: 16.666666666666%; } .w15 { width: 20%; } .w29 { width: 22.222222222222%; } .w14 { width: 25%; } .w27 { width: 28.571428571428%; } .w31 { width: 30%; } .w13 { width: 33.333333333333%; } .w38 { width: 37.5%; } .w25 { width: 40%; } .w37 { width: 42.857142857142%; } .w49 { width: 44.444444444444%; } .w12 { width: 50%; } .w59 { width: 55.555555555555%; } .w47 { width: 57.142857142857%; } .w35 { width: 60%; } .w58 { width: 62.5%; } .w23 { width: 66.666666666666%; } .w71 { width: 70%; } .w57 { width: 71.428571428571%; } .w34 { width: 75%; } .w79 { width: 77.777777777777%; } .w45 { width: 80%; } .w56 { width: 83.333333333333%; } .w67 { width: 85.714285714857%; } .w78 { width: 87.5%; } .w89 { width: 88.888888888888%; } .w91 { width: 90%; } .w1 { width: 100%; } .h11 { height: 0px; padding-bottom: 10%; } .h19 { height: 0px; padding-bottom: 11.111111111111%; } .h18 { height: 0px; padding-bottom: 12.5%; } .h17 { height: 0px; padding-bottom: 14.285714285714%; } .h16 { height: 0px; padding-bottom: 16.666666666666%; } .h15 { height: 0px; padding-bottom: 20%; } .h29 { height: 0px; padding-bottom: 22.222222222222%; } .h14 { height: 0px; padding-bottom: 25%; } .h27 { height: 0px; padding-bottom: 28.571428571428%; } .h31 { height: 0px; padding-bottom: 30%; } .h13 { height: 0px; padding-bottom: 33.333333333333%; } .h38 { height: 0px; padding-bottom: 37.5%; } .h25 { height: 0px; padding-bottom: 40%; } .h37 { height: 0px; padding-bottom: 42.857142857142%; } .h49 { height: 0px; padding-bottom: 44.444444444444%; } .h12 { height: 0px; padding-bottom: 50%; } .h59 { height: 0px; padding-bottom: 55.555555555555%; } .h47 { height: 0px; padding-bottom: 57.142857142857%; } .h35 { height: 0px; padding-bottom: 60%; } .h58 { height: 0px; padding-bottom: 62.5%; } .h23 { height: 0px; padding-bottom: 66.666666666666%; } .h71 { height: 0px; padding-bottom: 70%; } .h57 { height: 0px; padding-bottom: 71.428571428571%; } .h34 { height: 0px; padding-bottom: 75%; } .h79 { height: 0px; padding-bottom: 77.777777777777%; } .h45 { height: 0px; padding-bottom: 80%; } .h56 { height: 0px; padding-bottom: 83.333333333333%; } .h67 { height: 0px; padding-bottom: 85.714285714857%; } .h78 { height: 0px; padding-bottom: 87.5%; } .h89 { height: 0px; padding-bottom: 88.888888888888%; } .h91 { height: 0px; padding-bottom: 90%; } .h1 { height: 0px; padding-bottom: 100%; } .x1 { width: 15px; } .x2 { width: 16px; } .x3 { width: 20px; } .x4 { width: 24px; } .x5 { width: 25px; } .x6 { width: 28px; } .x7 { width: 30px; } .x8 { width: 32px; } .x9 { width: 35px; } .x10 { width: 36px; } .x11 { width: 40px; } .x12 { width: 44px; } .x13 { width: 48px; } .x14 { width: 50px; } .x15 { width: 55px; } .x16 { width: 60px; } .x17 { width: 64px; } .x18 { width: 80px; } .x19 { width: 90px; } .x20 { width: 100px; } .x21 { width: 120px; } .x22 { width: 150px; } .x23 { width: 160px; } .x24 { width: 180px; } .x25 { width: 200px; } .x26 { width: 240px; } .x27 { width: 250px; } .x28 { width: 280px; } .x29 { width: 300px; } .x30 { width: 320px; } .x31 { width: 350px; } .x32 { width: 360px; } .x33 { width: 400px; } .x34 { width: 420px; } .x35 { width: 440px; } .x36 { width: 460px; } .x37 { width: 480px; } .x38 { width: 500px; } .x39 { width: 520px; } .x40 { width: 540px; } .x41 { width: 550px; } .x42 { width: 560px; } .x43 { width: 600px; } .x44 { width: 640px; } .x45 { width: 650px; } .x46 { width: 660px; } .x47 { width: 680px; } .x48 { width: 700px; } .x49 { width: 720px; } .x50 { width: 750px; } .x51 { width: 760px; } .x52 { width: 780px; } .x53 { width: 800px; } .x54 { width: 840px; } .x55 { width: 850px; } .x56 { width: 880px; } .x57 { width: 900px; } .x58 { width: 920px; } .x59 { width: 950px; } .x60 { width: 960px; } .x61 { width: 1000px; } .x62 { width: 1020px; } .x63 { width: 1040px; } .x64 { width: 1050px; } .x65 { width: 1080px; } .x66 { width: 1100px; } .x67 { width: 1120px; } .x68 { width: 1140px; } .x69 { width: 1150px; } .x70 { width: 1160px; } .x71 { width: 1200px; } .y1 { height: 15px; } .y2 { height: 16px; } .y3 { height: 20px; } .y4 { height: 24px; } .y5 { height: 25px; } .y6 { height: 28px; } .y7 { height: 30px; } .y8 { height: 32px; } .y9 { height: 35px; } .y10 { height: 36px; } .y11 { height: 40px; } .y12 { height: 44px; } .y13 { height: 48px; } .y14 { height: 50px; } .y15 { height: 55px; } .y16 { height: 60px; } .y17 { height: 64px; } .y18 { height: 80px; } .y19 { height: 90px; } .y20 { height: 100px; } .y21 { height: 120px; } .y22 { height: 150px; } .y23 { height: 160px; } .y24 { height: 180px; } .y25 { height: 200px; } .y26 { height: 240px; } .y27 { height: 250px; } .y28 { height: 280px; } .y29 { height: 300px; } .y30 { height: 320px; } .y31 { height: 350px; } .y32 { height: 360px; } .y33 { height: 400px; } .y34 { height: 420px; } .y35 { height: 440px; } .y36 { height: 460px; } .y37 { height: 480px; } .y38 { height: 500px; } .y39 { height: 520px; } .y40 { height: 540px; } .y41 { height: 550px; } .y42 { height: 560px; } .y43 { height: 600px; } .y44 { height: 640px; } .y45 { height: 650px; } .y46 { height: 660px; } .y47 { height: 680px; } .y48 { height: 700px; } .y49 { height: 720px; } .y50 { height: 750px; } .y51 { height: 760px; } .y52 { height: 780px; } .y53 { height: 800px; } .y54 { height: 840px; } .y55 { height: 850px; } .y56 { height: 880px; } .y57 { height: 900px; } .y58 { height: 920px; } .y59 { height: 950px; } .y60 { height: 960px; } .y61 { height: 1000px; } .y62 { height: 1020px; } .y63 { height: 1040px; } .y64 { height: 1050px; } .y65 { height: 1080px; } .y66 { height: 1100px; } .y67 { height: 1120px; } .y68 { height: 1140px; } .y69 { height: 1150px; } .y70 { height: 1160px; } .y71 { height: 1200px; } /*tightness*/ .t { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; } .t1 { position: absolute; left: 1px; top: 1px; right: 1px; bottom: 1px; } .t2 { position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; } .t3 { position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; } .t4 { position: absolute; left: 4px; top: 4px; right: 4px; bottom: 4px; } .t5 { position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; } .t10 { position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; } .t20 { position: absolute; left: 20px; top: 20px; right: 20px; bottom: 20px; } .t50 { position: absolute; left: 50px; top: 50px; right: 50px; bottom: 50px; } .n { position: absolute; left: 0px; top: 0px; right: 0px; } .n1 { position: absolute; left: 1px; top: 1px; right: 1px; } .n2 { position: absolute; left: 2px; top: 2px; right: 2px; } .n3 { position: absolute; left: 3px; top: 3px; right: 3px; } .n4 { position: absolute; left: 4px; top: 4px; right: 4px; } .n5 { position: absolute; left: 5px; top: 5px; right: 5px; } .n10 { position: absolute; left: 10px; top: 10px; right: 10px; } .n20 { position: absolute; left: 20px; top: 20px; right: 20px; } .n50 { position: absolute; left: 50px; top: 50px; right: 50px; } .u { position: absolute; left: 0px; right: 0px; bottom: 0px; } .u1 { position: absolute; left: 1px; right: 1px; bottom: 1px; } .u2 { position: absolute; left: 2px; right: 2px; bottom: 2px; } .u3 { position: absolute; left: 3px; right: 3px; bottom: 3px; } .u4 { position: absolute; left: 4px; right: 4px; bottom: 4px; } .u5 { position: absolute; left: 5px; right: 5px; bottom: 5px; } .u10 { position: absolute; left: 10px; right: 10px; bottom: 10px; } .u20 { position: absolute; left: 20px; right: 20px; bottom: 20px; } .u50 { position: absolute; left: 50px; right: 50px; bottom: 50px; } .o { position: relative; left: 0px; right: 0px; } .o1 { position: relative; left: 1px; right: 1px; } .o2 { position: relative; left: 2px; right: 2px; padding: 2px; } .o3 { position: relative; left: 3px; right: 3px; padding: 3px; } .o4 { position: relative; left: 4px; right: 4px; padding: 4px; } .o5 { position: relative; left: 5px; right: 5px; padding: 5px; } .o10 { position: relative; left: 10px; right: 10px; padding: 10px; } .o20 { position: relative; left: 20px; right: 20px; padding: 20px; } .o50 { position: relative; left: 50px; right: 50px; padding: 50px; } /*radius*/ .rd2 { border-radius: 2px; } .rd3 { border-radius: 3px; } .rd4 { border-radius: 4px; } .rd5 { border-radius: 5px; } .rd6 { border-radius: 10px; } .r1 { border-radius: 15px; } .r2 { border-radius: 16px; } .r3 { border-radius: 20px; } .r4 { border-radius: 24px; } .r5 { border-radius: 25px; } .r6 { border-radius: 28px; } .r7 { border-radius: 30px; } .r8 { border-radius: 32px; } .r9 { border-radius: 35px; } .r10 { border-radius: 36px; } .r11 { border-radius: 40px; } .r12 { border-radius: 44px; } .r13 { border-radius: 48px; } .r14 { border-radius: 50px; } .r15 { border-radius: 55px; } .r16 { border-radius: 60px; } .r17 { border-radius: 64px; } .r18 { border-radius: 80px; } .r19 { border-radius: 90px; } .r20 { border-radius: 100px; } .r21 { border-radius: 120px; } .r22 { border-radius: 150px; } .r23 { border-radius: 160px; } .r24 { border-radius: 180px; } .r25 { border-radius: 200px; } .r26 { border-radius: 240px; } .r27 { border-radius: 250px; } .r28 { border-radius: 280px; } .r29 { border-radius: 300px; } .r30 { border-radius: 320px; } .r31 { border-radius: 350px; } .r32 { border-radius: 360px; } .r33 { border-radius: 400px; } .r34 { border-radius: 420px; } .r35 { border-radius: 440px; } .r36 { border-radius: 460px; } .r37 { border-radius: 480px; } .r38 { border-radius: 500px; } .r39 { border-radius: 520px; } .r40 { border-radius: 540px; } .r41 { border-radius: 550px; } .r42 { border-radius: 560px; } .r43 { border-radius: 600px; } .r44 { border-radius: 640px; } .r45 { border-radius: 650px; } .r46 { border-radius: 660px; } .r47 { border-radius: 680px; } .r48 { border-radius: 700px; } .r49 { border-radius: 720px; } .r50 { border-radius: 750px; } .r51 { border-radius: 760px; } .r52 { border-radius: 780px; } .r53 { border-radius: 800px; } .r54 { border-radius: 840px; } .r55 { border-radius: 850px; } .r56 { border-radius: 880px; } .r57 { border-radius: 900px; } .r58 { border-radius: 920px; } .r59 { border-radius: 950px; } .r60 { border-radius: 960px; } .r61 { border-radius: 1000px; } .r62 { border-radius: 1020px; } .r63 { border-radius: 1040px; } .r64 { border-radius: 1050px; } .r65 { border-radius: 1080px; } .r66 { border-radius: 1100px; } .r67 { border-radius: 1120px; } .r68 { border-radius: 1140px; } .r69 { border-radius: 1150px; } .r70 { border-radius: 1160px; } .r71 { border-radius: 1200px; } /*line height*/ .lh1 { line-height: 15px; } .lh2 { line-height: 16px; } .lh3 { line-height: 20px; } .lh4 { line-height: 24px; } .lh5 { line-height: 25px; } .lh6 { line-height: 28px; } .lh7 { line-height: 30px; } .lh8 { line-height: 32px; } .lh9 { line-height: 35px; } .lh10 { line-height: 36px; } .lh11 { line-height: 40px; } .lh12 { line-height: 44px; } .lh13 { line-height: 48px; } .lh14 { line-height: 50px; } .lh15 { line-height: 55px; } .lh16 { line-height: 60px; } .lh17 { line-height: 64px; } .lh18 { line-height: 80px; } .lh19 { line-height: 90px; } .lh20 { line-height: 100px; } .by_dark, .by_light { font-size: 12px; width: 100px; height: 30px; line-height: 30px; padding: 10px 20px; margin: auto; } .by_dark { color: #fff; } .by_light { color: #333; } .by_words, .small_logo { display: inline-block; height: 30px; overflow: hidden; } .by_words { width: 70px; font-family: casa; font-size: 12px; } /* =============================================== ************** DIV/SECTION SETTER ************* =============================================== */ .prpa { position: relative; } .prpa>article, .prpa>div, .prpa>section { position: absolute; } .papa { position: absolute; } .papa>article, .papa>div, .papa>section { position: absolute; } .prpr { position: relative; } .papa>article, .papa>div, .papa>section { position: absolute; } .dbdi { display: block; } .dbdi>article, .dbdi>div, .dbdi>section, .dbdi>li { display: inline-block; } .didi { display: inline-block; } .didi>article, .didi>div, .didi>section, .didi>li { display: inline-block; } .dfdf { display: flex; display: -webkit-flex; /* Safari */ } .dfdf>article, .dfdf>div, .dfdf>section, .dfdf>li { -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: 1; } .fp { width: 100vw; height: 100vh; } .fp56-16 { width: 100vw; height: 100vh; } .fp56-16>div:nth-of-type(1) { width: 80vw; height: 100vh; float: left; } .fp56-16>div:nth-of-type(2) { width: 20vw; height: 50vh; float: left; } .fp56-16>div:nth-of-type(3) { width: 20vw; height: 50vh; float: left; } .fp15 { width: 100vw; height: 100vh; } .fp15>div:nth-of-type(1) { width: 20vw; height: 100vh; float: left; } .fp15>div:nth-of-type(2) { width: 20vw; height: 50vh; float: right; } .fp15>div:nth-of-type(3) { width: 20vw; height: 50vh; float: right; } .fp15>div:nth-of-type(4) { width: 20vw; height: 50vh; float: right; } .fp15>div:nth-of-type(5) { width: 20vw; height: 50vh; float: right; } .fp15>div:nth-of-type(6) { width: 20vw; height: 100vh; float: right; } .fp15>div:nth-of-type(7) { width: 20vw; height: 50vh; float: right; } .fp15>div:nth-of-type(8) { width: 20vw; height: 50vh; float: right; } /* =============================================== *************** BSOLUTE POSITION ************** =============================================== */ .ah1 { top: 0px; bottom: 0px; } .ah12-1 { top: 0px; bottom: 50%; } .ah12-2 { top: 25%; bottom: 25%; } .ah12-3 { top: 50%; bottom: 0px; } .ah13-1 { top: 0px; bottom: 66.666666666666%; } .ah13-2 { top: 33.33333333333333%; bottom: 33.3333333333333%; } .ah13-3 { top: 66.66666666666666%; bottom: 0px; } .ah23-1 { top: 0px; bottom: 33.333333333333333%; } .ah23-2 { top: 33.33333333333333%; bottom: 0px; } .ah14-1 { top: 0px; bottom: 75%; } .ah14-2 { top: 25%; bottom: 50%; } .ah14-3 { top: 50%; bottom: 25%; } .ah14-4 { top: 75%; bottom: 0px; } .ah34-1 { top: 0px; bottom: 25%; } .ah34-2 { top: 25%; bottom: 0px; } .ah15-1 { top: 0px; bottom: 80%; } .ah15-2 { top: 20%; bottom: 60%; } .ah15-3 { top: 40%; bottom: 40%; } .ah15-4 { top: 60%; bottom: 20%; } .ah15-5 { top: 80%; bottom: 0px; } .ah25-1 { top: 0px; bottom: 60%; } .ah25-2 { top: 20%; bottom: 40%; } .ah25-3 { top: 40%; bottom: 20%; } .ah25-4 { top: 60%; bottom: 0px; } .ah35-1 { top: 0px; bottom: 40%; } .ah35-2 { top: 20%; bottom: 20%; } .ah35-3 { top: 40%; bottom: 0px; } .ah45-1 { top: 0px; bottom: 80%; } .ah45-2 { top: 80%; bottom: 0px; } .aw1 { left: 0px; right: 0px; } .aw12-1 { left: 0px; right: 50%; } .aw12-2 { left: 25%; right: 25%; } .aw12-3 { left: 50%; right: 0px; } .aw13-1 { left: 0px; right: 66.666666666666%; } .aw13-2 { left: 33.33333333333333%; right: 33.3333333333333%; } .aw13-3 { left: 66.66666666666666%; right: 0px; } .aw23-1 { left: 0px; right: 33.333333333333333%; } .aw23-2 { left: 33.33333333333333%; right: 0px; } .aw14-1 { left: 0px; right: 75%; } .aw14-2 { left: 25%; right: 50%; } .aw14-3 { left: 50%; right: 25%; } .aw14-4 { left: 75%; right: 0px; } .aw34-1 { left: 0px; right: 25%; } .aw34-2 { left: 25%; right: 0px; } .aw15-1 { left: 0px; right: 80%; } .aw15-2 { left: 20%; right: 60%; } .aw15-3 { left: 40%; right: 40%; } .aw15-4 { left: 60%; right: 20%; } .aw15-5 { left: 80%; right: 0px; } .aw25-1 { left: 0px; right: 60%; } .aw25-2 { left: 20%; right: 40%; } .aw25-3 { left: 40%; right: 20%; } .aw25-4 { left: 60%; right: 0px; } .aw35-1 { left: 0px; right: 40%; } .aw35-2 { left: 20%; right: 20%; } .aw35-3 { left: 40%; right: 0px; } .aw45-1 { left: 0px; right: 80%; } .aw45-2 { left: 80%; right: 0px; } .lo2-1 { position: relative; } .lo2-1>div { position: absolute; } .lo2-1>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 75%; } .lo2-1>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 25%; right: 0px; } .lo2-2 { position: relative; } .lo2-2>div { position: absolute; } .lo2-2>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 50%; } .lo2-2>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 50%; right: 0px; } .lo2-3 { position: relative; } .lo2-3>div { position: absolute; } .lo2-3>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 25%; } .lo2-3>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 75%; right: 0px; } .lo2-4 { position: relative; } .lo2-4>div { position: absolute; } .lo2-4>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 90%; } .lo2-4>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 10%; right: 0px; } .lo2-5 { position: relative; } .lo2-5>div { position: absolute; } .lo2-5>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 10%; } .lo2-5>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 90%; right: 0px; } .lo2-6 { position: relative; } .lo2-6>div { position: absolute; } .lo2-6>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 15%; } .lo2-6>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 85%; right: 0px; } .lo2-7 { position: relative; } .lo2-7>div { position: absolute; } .lo2-7>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 15%; right: 0px; } .lo2-7>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 0px; right: 85%; } .lo2-8 { position: relative; } .lo2-8>div { position: absolute; } .lo2-8>div:nth-of-type(1) { top: 0px; bottom: 10%; left: 0px; right: 50%; } .lo2-8>div:nth-of-type(2) { top: 10%; bottom: 0px; left: 50%; right: 0px; } .lo2-9 { position: relative; } .lo2-9>div { position: absolute; } .lo2-9>div:nth-of-type(1) { top: 10%; bottom: 0px; left: 0px; right: 50%; } .lo2-9>div:nth-of-type(2) { top: 0px; bottom: 10%; left: 50%; right: 0px; } .lo2-9 { position: relative; } .lo2-9>div { position: absolute; } .lo2-9>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 66.67%; } .lo2-9>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 33.33%; right: 0px; } .lo2-10 { position: relative; } .lo2-10>div { position: absolute; } .lo2-10>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 33.33%; } .lo2-10>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 66.67%; right: 0px; } .lo2-11 { position: relative; } .lo2-11>div { position: absolute; } .lo2-11>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 80%; } .lo2-11>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 20%; right: 0px; } .lo2-12 { position: relative; } .lo2-12>div { position: absolute; } .lo2-12>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 20%; } .lo2-12>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 80%; right: 0px; } .lo3-1 { position: relative; } .lo3-1>div { position: absolute; } .lo3-1>div:nth-of-type(1) { top: 10%; bottom: 10%; left: 10%; right: 40%; } .lo3-1>div:nth-of-type(2) { top: 10%; bottom: 50%; left: 63%; right: 10%; } .lo3-1>div:nth-of-type(3) { top: 50%; bottom: 10%; left: 63%; right: 10%; } .lo3-2 { position: relative; } .lo3-2>div { position: absolute; } .lo3-2>div:nth-of-type(1) { top: 0px; bottom: 20%; left: 10%; right: 30%; } .lo3-2>div:nth-of-type(2) { top: 80%; bottom: 0px; left: 10%; right: 60%; } .lo3-2>div:nth-of-type(3) { top: 20%; bottom: 50%; left: 60%; right: 20%; } .lo3-3 { position: relative; } .lo3-3>div { position: absolute; } .lo3-3>div:nth-of-type(1) { top: 0px; bottom: 15%; left: 50%; right: 10%; } .lo3-3>div:nth-of-type(2) { top: 85%; bottom: 0px; left: 70%; right: 10%; } .lo3-3>div:nth-of-type(3) { top: 20%; bottom: 40%; left: 40%; right: 40%; } .lo3-4 { position: relative; } .lo3-4>div { position: absolute; } .lo3-4>div:nth-of-type(1) { top: 0px; bottom: 17%; left: 20%; right: 20%; } .lo3-4>div:nth-of-type(2) { top: 85%; bottom: 0px; left: 10%; right: 60%; } .lo3-4>div:nth-of-type(3) { top: 20%; bottom: 40%; left: 10%; right: 70%; } .lo3-5 { position: relative; } .lo3-5>div { position: absolute; } .lo3-5>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 10%; right: 50%; } .lo3-5>div:nth-of-type(2) { top: 85%; bottom: 0px; left: 60%; right: 10%; } .lo3-5>div:nth-of-type(3) { top: 30%; bottom: 30%; left: 40%; right: 40%; } .lo3-6 { position: relative; } .lo3-6>div { position: absolute; } .lo3-6>div:nth-of-type(1) { top: 0px; bottom: 17%; left: 20%; right: 20%; } .lo3-6>div:nth-of-type(2) { top: 85%; bottom: 0px; left: 20%; right: 50%; } .lo3-6>div:nth-of-type(3) { top: 5%; bottom: 50%; left: 10%; right: 70%; } .lo3-7 15 { position: relative; } .lo3-7>div { position: absolute; } .lo3-7>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 60%; } .lo3-7>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 40%; right: 0px; } .lo3-7>div:nth-of-type(3) { top: 15%; bottom: 15%; left: 5%; right: 65%; } .lo3-8 { position: relative; } .lo3-8>div { position: absolute; } .lo3-8>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 75%; } .lo3-8>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 25%; right: 25%; } .lo3-8>div:nth-of-type(3) { top: 0px; bottom: 0px; left: 75%; right: 0px; } .lo3-9 { position: relative; } .lo3-9>div { position: absolute; } .lo3-9>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 25%; } .lo3-9>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 25%; right: 50%; } .lo3-9>div:nth-of-type(3) { top: 0px; bottom: 0px; left: 75%; right: 0px; } .lo3-10 { position: relative; } .lo3-10>div { position: absolute; } .lo3-10>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 50%; } .lo3-10>div:nth-of-type(2) { top: 0px; bottom: 0px; left: 50%; right: 25%; } .lo3-10>div:nth-of-type(3) { top: 0px; bottom: 0px; left: 75%; right: 0px; } .lo3-11 { position: relative; } .lo3-11>div { position: absolute; } .lo3-11>div:nth-of-type(1) { top: 0px; bottom: 75%; left: 0px; right: 75%; } .lo3-11>div:nth-of-type(2) { top: 25%; bottom: 0px; left: 0px; right: 75%; } .lo3-11>div:nth-of-type(3) { top: 0px; bottom: 0px; left: 25%; right: 0px; } .lo3-12 { position: relative; } .lo3-12>div { position: absolute; } .lo3-12>div:nth-of-type(1) { top: 0px; bottom: 50%; left: 0px; right: 50%; } .lo3-12>div:nth-of-type(2) { top: 0px; bottom: 50%; left: 50%; right: 0px; } .lo3-12>div:nth-of-type(3) { top: 50%; bottom: 0px; left: 0px; right: 0px; } .lo4-1 { position: relative; } .lo4-1>div { position: absolute; } .lo4-1>div:nth-of-type(1) { top: 25%; bottom: 50%; left: 10%; right: 67.67%; } .lo4-1>div:nth-of-type(2) { top: 0px; bottom: 51%; left: 33.33%; right: 20%; } .lo4-1>div:nth-of-type(3) { top: 51%; bottom: 0px; left: 33.33%; right: 33.33%; } .lo4-1>div:nth-of-type(4) { top: 51%; bottom: 25%; left: 67.67%; right: 20%; } .lo5-1 { position: relative; } .lo5-1>div { position: absolute; } .lo5-1>div:nth-of-type(1) { top: 0px; bottom: 10%; left: 0px; right: 80%; } .lo5-1>div:nth-of-type(2) { top: 10%; bottom: 0px; left: 20%; right: 60%; } .lo5-1>div:nth-of-type(3) { top: 0px; bottom: 10%; left: 40%; right: 40%; } .lo5-1>div:nth-of-type(4) { top: 10%; bottom: 0px; left: 60%; right: 20%; } .lo5-1>div:nth-of-type(5) { top: 0px; bottom: 10%; left: 80%; right: 0px; } .lo6-1 { position: relative; } .lo6-1>div { position: absolute; } .lo6-1>div:nth-of-type(1) { top: 0px; bottom: 34.33%; left: 0px; right: 67.67%; } .lo6-1>div:nth-of-type(2) { top: 67.67%; bottom: 0px; left: 0px; right: 67.67%; } .lo6-1>div:nth-of-type(3) { top: 0px; bottom: 67.67%; left: 33.33%; right: 34.33%; } .lo6-1>div:nth-of-type(4) { top: 34.33%; bottom: 0px; left: 33.33%; right: 34.33%; } .lo6-1>div:nth-of-type(5) { top: 0px; bottom: 34.33%; left: 66.67%; right: 0px; } .lo6-1>div:nth-of-type(6) { top: 67.67%; bottom: 0px; left: 66.67%; right: 0px; } .lo7-1 { position: relative; } .lo7-1>div { position: absolute; } .lo7-1>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 95%; } .lo7-1>div:nth-of-type(2) { top: 0px; bottom: 20%; left: 5%; right: 71.25%; } .lo7-1>div:nth-of-type(3) { top: 50%; bottom: 0px; left: 5%; right: 71.25%; } .lo7-1>div:nth-of-type(4) { top: 0px; bottom: 50%; left: 28.75%; right: 47.5%; } .lo7-1>div:nth-of-type(5) { top: 50%; bottom: 0px; left: 28.75%; right: 47.5%; } .lo7-1>div:nth-of-type(6) { top: 0px; bottom: 0px; left: 52.5%; right: 23.75%; } .lo7-1>div:nth-of-type(7) { top: 0px; bottom: 0px; left: 76.25%; right: 0px; } .lo7-2 { position: relative; } .lo7-2>div { position: absolute; } .lo7-2>div:nth-of-type(1) { top: 0px; bottom: 68.67%; left: 0px; right: 51%; } .lo7-2>div:nth-of-type(2) { top: 0px; bottom: 68.67%; left: 51%; right: 0px; } .lo7-2>div:nth-of-type(3) { top: 34.33%; bottom: 34.33%; left: 0px; right: 76%; } .lo7-2>div:nth-of-type(4) { top: 34.33%; bottom: 34.33%; left: 25%; right: 51%; } .lo7-2>div:nth-of-type(5) { top: 34.33%; bottom: 34.33%; left: 51%; right: 26%; } .lo7-2>div:nth-of-type(6) { top: 34.33%; bottom: 34.33%; left: 75%; right: 0px; } .lo7-2>div:nth-of-type(7) { top: 67.67%; bottom: 0px; left: 0px; right: 0px; } .lo8-1 { position: relative; } .lo8-1>div { position: absolute; } .lo8-1>div:nth-of-type(1) { top: 0px; bottom: 0px; left: 0px; right: 80%; } .lo8-1>div:nth-of-type(2) { top: 0px; bottom: 50%; left: 20%; right: 60%; } .lo8-1>div:nth-of-type(3) { top: 50%; bottom: 0px; left: 20%; right: 60%; } .lo8-1>div:nth-of-type(4) { top: 0px; bottom: 50%; left: 40%; right: 40%; } .lo8-1>div:nth-of-type(5) { top: 50%; bottom: 0px; left: 40%; right: 40%; } .lo8-1>div:nth-of-type(6) { top: 0px; bottom: 0px; left: 60%; right: 20%; } .lo8-1>div:nth-of-type(7) { top: 0px; bottom: 50%; left: 80%; right: 0px; } .lo8-1>div:nth-of-type(8) { top: 50%; bottom: 0px; left: 80%; right: 0px; } .lo10-1 { position: relative; } .lo10-1>div { position: absolute; } .lo10-1>div:nth-of-type(1) { top: 0px; bottom: 80%; left: 0px; right: 66.67%; } .lo10-1>div:nth-of-type(2) { top: 0px; bottom: 80%; left: 34.33%; right: 33.33%; } .lo10-1>div:nth-of-type(3) { top: 0px; bottom: 80%; left: 67.67%; right: 0px; } .lo10-1>div:nth-of-type(4) { top: 25%; bottom: 55%; left: 0px; right: 66.67%; } .lo10-1>div:nth-of-type(5) { top: 50%; bottom: 30%; left: 0px; right: 66.67%; } .lo10-1>div:nth-of-type(6) { top: 75%; bottom: 5%; left: 0px; right: 66.67%; } .lo10-1>div:nth-of-type(7) { top: 22.5%; bottom: 40.5%; left: 34.33%; right: 33.33%; } .lo10-1>div:nth-of-type(8) { top: 62.5%; bottom: 0px; left: 34.33%; right: 33.33%; } .lo10-1>div:nth-of-type(9) { top: 25%; bottom: 35%; left: 67.67%; right: 0px; } .lo10-1>div:nth-of-type(10) { top: 70%; bottom: 10%; left: 67.67%; right: 0px; }