/*------------------------------------------
--------------------------------------------
Custom Coding
--------------------------------------------
Designed by KaciElizabeth
--------------------------------------------
V1 - June 2019
--------------------------------------------
Image Credit: Google
--------------------------------------------
Contact for theme support/etc
--------------------------------------------
Contact Only Email: 
kacielizabethhawkins@gmail.com
--------------------------------------------
Colors used:
#17141b - BG color
#0e0d11 - top bar / content bg
#7c4a55 - purple-ish
#7b7473 - dark
#555555 - navigation
#1e1a23 - page navigation bg and li bg
#b67c8b - main links
#b67c8b - main link hover
#23202a - blockquote border color
------------------------------------------*/

/*------------------------------------------
1     Body
------------------------------------------*/

html, body {
  height: 100%;
}

body {
  background-color:#17141b;
  font-family: 'Lato', sans-serif;
  font-weight:400;
  text-align:center;
  font-size: 13px;
  color: #5e5e5e;
  padding:0px!important;
  margin:0!important;
}


/*------------------------------------------
2     Icon
------------------------------------------*/

.mimg {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 152px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 152px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 152px; 
  width:150px;
}

/*------------------------------------------
3     Image Border
------------------------------------------*/
img {
border:1px solid rgba(163, 163, 163, 0.2);
padding:3px;

}


/*------------------------------------------
4     Top Bar
------------------------------------------*/
.topbar {
    background-color:#0e0d11;
    height:10px;
}


/*------------------------------------------
5     Site Title
------------------------------------------*/
.site-title {
    font-family: 'Yellowtail', cursive;
    font-size:55px;
    font-weight:400;
    color:#7c4a55;
}

.site-title span {
    font-family: 'Amatic SC', cursive;
    color:#7b7473;
    font-size:32px;
    text-transform:uppercase;
    position:relative;
    top:-15px;
    left:0;
}


/*------------------------------------------
6     Tooltip
------------------------------------------*/
#s-m-t-tooltip{
  /* basic */
  max-width:300px;
  z-index:10;
  margin:24px 14px 7px 12px;
  /* style and design */
  padding:8px;
  background:#222; /* fallback if rgba not supported */
  background:rgba(0,0,0,0.8);
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  /* font */
  font-family:Verdana,Geneva,sans-serif;
  font-size:11px;
  line-height:16px;
  color:#fff;
}


/*------------------------------------------
7     Navigation
------------------------------------------*/

.menu main {
    border:0;
}

#menu ul {
    list-style:none;
    padding:0px;
    margin:0;
}

#menu ul ul {
    display:none;
}

#menu ul li:hover > ul {
    display:none;
}

#menu ul li li { 
    display:none;
}

#menu ul ul li:hover {
    display:none;
}

.navigation ul li {
    display:inline!important;
    padding:0px;
    margin:0;
}

.navigation ul li:not(:first-child):before {
  content: '-';
  color:#000000;
}

.navigation {
    width:100%;
    text-align:center;
    text-align:center;
    font-family: 'Lato', sans-serif;
    font-weight:900;
    font-size:11px;
    padding-top:15px;
    padding-bottom:15px;
    margin-top:-30px;
}


.navigation a:link {
    color:#555555;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition: opacity 0.4s linear;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    font-family: 'Lato', sans-serif;
    font-weight:900;
    font-size:11px;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
}

.navigation a:active {
    color:#555555;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition: opacity 0.4s linear;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    font-family: 'Lato', sans-serif;
    font-weight:900;
    font-size:11px;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
}

.navigation a:visited {
    color:#555555;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition: opacity 0.4s linear;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    font-family: 'Lato', sans-serif;
    font-weight:900;
    font-size:11px;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
}

.navigation a:hover {
    color:#7c4a55;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition: opacity 0.4s linear;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    font-family: 'Lato', sans-serif;
    font-weight:900;
    font-size:11px;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
}

/*------------------------------------------
8     Container and Wrapper
------------------------------------------*/

#container {
    width:1200px;
    margin:0 auto;
    margin-top:50px;
}

#wrapper {
    margin:0 auto;
    width:1200px;
}

/*------------------------------------------
9     Content Box
------------------------------------------*/

.contentwrap {
    text-align:justify;
    width:50%;
    background-color:#0e0d11;
    padding:25px;
    line-height:25px;
}


.contentwrap ul {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 30%;
    -moz-column-gap: 30%;
    column-gap: 30%;
    margin:0;
    padding:0;
    width: 100%;
}

.contentwrap li {
    display: inline-block;
    width: 49.50%; /* (parent 100% - parent gap 30%) / columns */
    background-color:#1e1a23;
    padding-top:5px;
    padding-bottom:5px;
    margin-right:1px;
    margin-top:1px;
}

.contentwrap li a:link {
    color:#7c4a55;
    font-family: 'Lato', sans-serif;
    font-weight:900;
    font-size:14px;
    padding:5px;
}

.contentwrap li a:active {
    color:#7c4a55;
    font-family: 'Lato', sans-serif;
    font-weight:900;
    font-size:14px;
    padding:5px;
}

.contentwrap li a:visited {
    color:#7c4a55;
    font-family: 'Lato', sans-serif;
    font-weight:900;
    font-size:14px;
    padding:5px;
}

.contentwrap li a:hover {
    color:#7b7473;
    font-family: 'Lato', sans-serif;
    font-weight:900;
    font-size:14px;
    padding:5px;
}


/*------------------------------------------
10     Page Menu
------------------------------------------*/
.pagemenu {
    display:inline-block;
    background-color:#1e1a23;
    padding:5px;
    font-size:12px;
    text-transform:uppercase;
}

.pagemenu a:link {
    padding:5px;
}

/*------------------------------------------
11     Link Classes
------------------------------------------*/

a:link {
  text-decoration:none; 
  color: #b67c8b;
  font-size: 11px;
  font-family: 'Lato', sans-serif;
  font-weight:900;
  letter-spacing:0px;
  padding:0px;
  line-height:11px;
  -webkit-transition: opacity 0.3s linear;
  -webkit-transition: all 0.3s ease-out; 
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

a:visited {
  text-decoration:none; 
  color: #b67c8b;
  font-size: 11px;
  font-family: 'Lato', sans-serif;
  font-weight:900;
  letter-spacing:0px;
  padding:0px;
  line-height:11px;
  -webkit-transition: opacity 0.3s linear;
  -webkit-transition: all 0.3s ease-out; 
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

a:active {
  text-decoration:none; 
  color: #b67c8b;
  font-size: 11px;
  font-family: 'Lato', sans-serif;
  font-weight:900;
  letter-spacing:0px;
  padding:0px;
  line-height:11px;
  -webkit-transition: opacity 0.3s linear;
  -webkit-transition: all 0.3s ease-out; 
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

a:hover {
  text-decoration:none;
  color: #b67c8b;
  font-size: 11px;
  font-family: 'Lato', sans-serif;
  font-weight:900;
  letter-spacing:0px;
  padding:0px;
  line-height:11px;
  -webkit-transition: opacity 0.3s linear;
  -webkit-transition: all 0.3s ease-out; 
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

/*------------------------------------------
12     Blockquote
------------------------------------------*/

blockquote {
  font: 14px/20px italic Times, serif;
  padding: 8px;
  border-top:1px dotted #23202a;
  margin: 5px;
  }
  blockquote span {
     display: block;
   }

/*------------------------------------------
      DO NOT REMOVE OR EDIT
------------------------------------------*/
#credit {
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-family: 'Amatic SC', cursive;
    font-size:25px;
    font-weight:400;
}


.clearfooter {
  height:100px;
  clear:both;
}

.clear{
  clear:both;
}

/*------------------------------------------
      RESPONSIVE
------------------------------------------*/

@media only screen and (max-width:1024px), only screen and (max-device-width:1024px) {

#wrapper {
    width:95%;
}
    
#container {
    width:90%;
} 

.contentwrap ul {
    -webkit-column-count: 0;
    -moz-column-count: 0;
    column-count: 0;
    margin:0;
    padding:0;
    width: 100%;
}

.contentwrap li {
    display: block;
    width: 100%; /* (parent 100% - parent gap 30%) / columns */
    padding-top:5px;
    padding-bottom:5px;
    margin-right:1px;
    margin-top:1px;
}

}