/* IMPORT FONT FAMILY
--------------------------------------------------------------- */
/*
@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,300);
*/

/* CSS Document */

/*
Website Name: Tekken Orbital
Author: Jason Banks
Description: Personal Notes & Reference Guide for Tekken 7
Version: 1.0
*/

/*----------------------------------------------------------------------------------------------------
>>> TABLE OF CONTENTS: SHINOBI HIPSTER
------------------------------------------------------------------------------------------------------
1.0 CSS RESET
2.0 BASIC STYLES
3.0 HOME/INDEX
4.0 HEADER
5.0 PAGE - CHARACTER
   5.1 Left Column
   5.2 Right Column
6.0 FOOTER
---------------------------	
JASON BANKS
---------------------------	
*/

/*----------------------------------------------------------------------------------------------------
1.0 MY CSS Reset
----------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, 
iframe, blockquote, pre, 
abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, 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;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}

body {line-height: 1;}

ol, ul {list-style: inside;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;

  line-height: normal;
}

p, a, b, strong, u, i, em {
  margin: 0;
  padding: 0;
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*----------------------------------------------------------------------------------------------------
2.0 BASICS STYLES
----------------------------------------------------------------------------------------------------*/
* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

body {color:#888; font-family:'Open Sans', sans-serif;}

.clear {clear:both;}

.section {margin:0 0 80px 0; padding:20px 0 0;}

.margin {margin:40px 0 10px;}

/*----------------------------------------------------------------------------------------------------
0.0 Universal Classes & Unique Javascripts
----------------------------------------------------------------------------------------------------*/
.img-responsive {max-width: 100%;}

/*--------------------------------------------------
0.01 Highlighter Methods
--------------------------------------------------*/
/* Method 01 - Standard Mark Tag Element*/
mark {background:#FFF173; color:;}

/* Method 02 */
.highlighter {font-style:normal; border-radius:1em 0 1em 0; color:black; transition:0.4s;
  background-image: 
    linear-gradient(-100deg, 
      rgba(249,237,50,0.15),
      rgba(249,237,50,0.8) 100%, 
      rgba(249,237,50,0.25)
    );
}

/*--------------------------------------------------
0.02 Modal
--------------------------------------------------*/
/*
.modal {display:none; position:fixed; z-index:10; /* padding-top:20px; */ /* right:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.6); transition:0.4s;}

.modal-content {background-color:#fefefe; margin:auto; padding:20px; /* border:1px solid #888; */  /* width:300px; float:right; box-shadow:-4px -4px 2px rgba(0, 0, 0, 0.3);}

.close {color:#aaaaaa; float:right; font-size:28px; font-weight:bold;}

.close:hover, .close:focus {color:#000; text-decoration:none; cursor:pointer;}

#myModal ul li {list-style:none; border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#efefef; color:#333;}

#myModal ul li:nth-of-type(odd) {font-weight:bold; border-bottom-style:none; /* color:#1C75BC; */ /*}

#myModal ul li:nth-of-type(even) {margin-bottom:10px;}

.modal-li-default {margin-bottom:0 !important; border-bottom:none !important;} */

/* Multiple Modals */
.myBtn {cursor:pointer; color:; transition:0.4s;}

.modal {display:none; position:fixed; z-index:10; /* padding-top:20px; */ right:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.6); transition:0.4s;}

.modal-content-base {background-color:#fefefe; margin:auto; padding:20px; /* border:1px solid #888; */ width:300px; float:right; box-shadow:-4px -4px 2px rgba(0, 0, 0, 0.3);}

.close {color:#aaaaaa; float:right; font-size:28px; font-weight:bold;}

.close:hover, .close:focus {color:#000; text-decoration:none; cursor:pointer;}

#myModal ul li {list-style:none; border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#efefef; color:#333;}

#myModal ul li:nth-of-type(odd) {font-weight:bold; border-bottom-style:none; /* color:#1C75BC; */}

#myModal ul li:nth-of-type(even) {margin-bottom:10px;}

.modal-li-default {margin-bottom:0 !important; border-bottom:none !important;}

/*
@media (orientation:landscape) {
  .modal {padding-top:20px;}
}

/*
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {  
  .modal {padding-top:20px;}
}
*/

/*
.modal-content-base { margin:auto; width:480px;}
.modal-content-base {background:white; margin:auto; padding:20px; border:1px solid #888; width:480px;}
*/

/*
.close {color:#aaaaaa; float:right; font-size:28px; font-weight:bold;}

.close:hover, .close:focus {color:#000; text-decoration:none; cursor:pointer;} */

/*----------------------------------------------------------------------------------------------------
2.0 Body/Main Wrapper
----------------------------------------------------------------------------------------------------*/
html {scroll-behavior:smooth;}

* {box-sizing: border-box}
body {font-family:"Lato", sans-serif; line-height:24px; scroll-padding-top: ;}

@media only screen and (max-width: 600px)
{
  body {font-family:"Lato", sans-serif; line-height:24px; scroll-padding-top: ;}
}

#main-wrapper {width:80%; margin:0 10%; background:white; color:#333;}

#main-wrapper article a {cursor:pointer;}

/*----------------------------------------------------------------------------------------------------
3.0 Home/Index
----------------------------------------------------------------------------------------------------*/
#home {padding:20px 0;}

#home article {display:flex; flex-direction:row; flex-wrap:wrap;}

#home article a {width:20%; padding:2% 1%; box-shadow:inset 0 0 0 5px white; -webkit-box-shadow:inset 0 0 0 5px white; -moz-box-shadow:inset 0 0 0 5px white; text-align:center; text-decoration:none; color:#333; background:#f1f1f1; transition:0.2s;}

#home article a:hover {color:white; background:#1C75BC;}

@media only screen and (max-width: 1200px) {
  #home article a {width:25%; padding:2% 2%;}
}

@media only screen and (max-width: 800px) {
  #home article a {width:50%; padding:5% 0;}
}

@media only screen and (max-width: 600px) {
  #main-wrapper {width:100%; margin:0 0;}
  #home article a h2 {font-size:18px;}
}

.ul-no-bullets  {list-style:none;}

#tekken-things {margin-top:20px;}

#tekken-things ul li {margin-top:10px;}

@media only screen and (max-width:600px)
{
  #tekken-things {padding:0 5%;}
}

/*----------------------------------------------------------------------------------------------------
5.0 PAGE - CHARACTER PAGE
----------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------
5.01 Left Column
--------------------------------------------------*/
#left {position:fixed; z-index:5; float:; width:300px; height:100vh; background:black; overflow:scroll;}

#header-left-column {padding:20px 20px 20px 20px;}

#header-left-column h1 {color:#1C75BC;}

/*--------------------------------------------------
5.02 Left Menu
--------------------------------------------------*/
#menu ul li {list-style:none;}

#menu li a {color:#ccc; text-decoration:none; display:block; padding:6px 20px; transition:all 300ms linear;}

#menu li a:hover {background:rgba(28,117,188, 1); color:white;}

@media only screen and (max-width:800px)
{
  #left {display:none;}
  #menu li a {color:#ccc; text-decoration:none; display:block; padding:6px 20px; transition:all 300ms linear; font-size:;}
}

#up-arrow {position:fixed; z-index:1; top:50%; left:240px; width:40px; padding:20px; background:;}

#up-arrow a {color:#1C75BC; font-size:34px; text-transform:uppercase; text-decoration:none; display:block; transition:all 300ms linear}

#up-arrow a:hover {color:#1C75BC;}

#up-arrow-two {position:fixed; display:block; z-index:1; bottom:0; right:0; padding:20px; color:#1C75BC; font-size:34px;}

#up-arrow-two a {text-transform:uppercase; text-decoration:none; transition:all 300ms linear}

#up-arrow-two a:hover {color:#1C75BC;}

/*--------------------------------------------------
5.03 Top Container
--------------------------------------------------*/
#top-container {position:fixed; display:none; z-index:10; width:100vw; height:80px; padding:20px; background:rgba(0,0,0,1);}

#top-container h1 {color:#1C75BC;}

#top-container p {font-size:14px;}

#top-container-right {float:right;}

.icon-svg {width:36px; background:#ccc; cursor:pointer;}

.icon-svg:hover {background:#1C75BC; transition:0.4s;}

@media only screen and (max-width:800px)

{
  #top-container {display:block;}
  /* .icon-svg {margin-right:10px;} */
}

#sortIconMobile {transition:opacity 0.4s;}

.sort-icon-mobile {opacity:0; height:0; overflow:hidden; transition:opacity 0.4s;}

/*
.icon-svg-two {display:inline-block; vertical-align:top; width:36px; fill:#ccc;}

.icon-svg-two:hover {fill:#1C75BC; transition:0.4s;}

.icon-right {float:right;}

#sortIconMobile {transition:opacity 0.4s;}

.sort-icon-mobile {opacity:0; height:0; overflow:hidden; transition:opacity 0.4s;}
*/

/*--------------------------------------------------
5.04 Function - Transformative Burger Menu Button
--------------------------------------------------*/
.container {float:right; cursor:pointer; margin-left:4px;}

.container:hover .bar1, .container:hover .bar2, .container:hover .bar3 {background:#1C75BC;}

.bar1, .bar2, .bar3 {width:35px; height:5px; background:#ccc; margin:6px 0; transition:0.4s;}

.change .bar1 {-webkit-transform:rotate(-45deg) translate(-9px, 6px); transform:rotate(-45deg) translate(-9px, 6px);}

.change .bar2 {opacity:0;}

.change .bar3 {-webkit-transform:rotate(45deg) translate(-8px, -8px); transform:rotate(45deg) translate(-8px, -8px);}

/*--------------------------------------------------
5.05 Function - Sidenav Overlay
--------------------------------------------------*/
.sidenav {height:100%; width:0; position:fixed; z-index:20; top:0; left:0; background-color:rgba(0,0,0,0.9); overflow-x:hidden; transition:0.5s; padding:0 0 0 0;}

.sidenav a {color:#CCC; text-decoration:none; display:block; padding:6px 20px; transition:0.5s;}

.sidenav a:hover, .offcanvas a:focus {background:rgba(28,117,188, 1); color:white;}

.closebtn {position:absolute; z-index:10; top:0; right:0; width:; padding:; font-size:36px;}

#main {transition:margin-left .5s;}

#top-space {display:none;}

/*--------------------------------------------------
5.06 Right Column
--------------------------------------------------*/
#right {float:; width:100%; padding:0px 0px 0 300px; z-index:10;}

@media only screen and (max-width:800px)
{
  #right {padding:80px 5% 20px 5%;}
}

/*--------------------------------------------------
5.07 Note Container
--------------------------------------------------*/
.small-italic {font-size:12px; font-style:italic; color:#666;}
.six-margin-bottom {margin-bottom:6px}

#note-container {color:#333;}

#note-container h3 {padding:5px; color:white; background:black;}

#note-container ul {margin-bottom:20px;}

#note-container article {display:flex; flex-direction:row; flex-wrap:wrap; width:100%;}

#note-container article aside {width:33.33333333%; padding:2%;}

#note-container article aside p {font-weight:bold;}

#note-container article aside:nth-of-type(odd) {background:#efefef;}

#note-container article aside:nth-of-type(4) {width:100%;}

@media only screen and (max-width:1200px)
{
  #note-container article aside {width:100%;}
  #note-container article aside:nth-of-type(odd) {background:white;}
}

:target {
  background:#1C75BC !important;
  scroll-margin-top:100px;
  padding-top:;
  margin-top:;
  border:;
}

/*----------------------------------------------------------------------------------------------------
6.0 Footer
----------------------------------------------------------------------------------------------------*/
footer {padding:20px 12px 60px 12px; text-align:center;}

footer a {color:#333; margin:0 10px 0 10px;}

@media only screen and (max-width:600px)
{
  footer a {margin:0; display:block;}
}

footer a:hover {text-decoration:none; color:#1C75BC;}