/* sidebar */

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
   font-family: "entypo", sans-serif;
}
a { 
   text-decoration: none;
}
ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

#code-experiments {
   display: none;
   color: red;
}

/*
.container {
   margin: 0 auto;
   padding: 20px 50px;
   background: white;
}
*/

#sticky-social {
   left: 0;
   position: fixed;
   top: 150px;
}
#sticky-social a {
   background: #333;
   color: #fff;
   display: block;
   height: 35px;
   font: 16px "Open Sans", sans-serif;
   line-height: 35px;
   position: relative;
   text-align: center;
   width: 35px;
}
#sticky-social a span {
   line-height: 35px;
   left: -120px;
   position: absolute;
   text-align:center;
   width:120px;
}
#sticky-social a:hover span {
   left: 100%;
}

#sticky-social a[class*="github"],
#sticky-social a[class*="github"]:hover,
#sticky-social a[class*="github"] span { background: #3b5998; }  

#sticky-social a[class*="facebook"],
#sticky-social a[class*="facebook"]:hover,
#sticky-social a[class*="facebook"] span { background: #3b5998; }

#sticky-social a[class*="twitter"],
#sticky-social a[class*="twitter"]:hover,
#sticky-social a[class*="twitter"] span { background: #00aced; }

#sticky-social a[class*="linkedin"],
#sticky-social a[class*="linkedin"]:hover,
#sticky-social a[class*="linkedin"] span { background: #007bb6; }  

#sticky-social a[class*="instagrem"],
#sticky-social a[class*="instagrem"]:hover,
#sticky-social a[class*="instagrem"] span { background: #517fa4; }  

html {

   background: white;

}

/* body */

body {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}

div {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    text-align: center;	
}

.menu-item {
	font-size: 14px;
	padding: 10px;
}

#about {
    text-align: justify;

}

#accordion p {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: auto;
    text-align: center;
    outline: black solid thin;
    padding: 20px;
    font-size: 24px;

}

#accordion h1 {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: auto;
    text-align: center;
    outline: black solid thick;

}

li {

}

/*
.banner {
     position: fixed;
     margin-left: auto;
     margin-right: auto;

}
*/

.menu {
    list-style: none;
    font-family: 'Raleway', sans-serif;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    padding: 0;
} 

.menu li {
     display: inline;
 }
 
.menu2 {
    list-style: none;
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    padding: 0;
} 

.menu2 li {
     display: inline;
 }

a {
    color: black;
}

a:hover {
    /* background-color: yellow; */
    text-decoration: none;
    color: red;
} 

h1:hover {
    background-color: yellow;
    text-decoration: none;
} 

.latest {
	font-family: 'Raleway', sans-serif;
}

.latest ul
{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}

.latest ul li { 

}

.latest ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

.latest ul li a:hover
{
color: #fff;
background-color: #369;
}

.about {
    text-align: left;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
 .prev, .next {
  cursor: pointer;
  position: relative;
  top: 50%;
  width: auto;
/* margin-top: -22px;
   padding: 16px;
   color: white;  */
  font-weight: bold;
  font-size: 32px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

 .active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* multiplication table formatting */
#mult_table * {
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    width:100px;
    border: 2px solid red;

}

#rainier {

    border: 2px solid black;

}

/* contact form */

form {
    color: white;
    background-image: url("images/willwithguitars.jpg");
    border: 2px solid black;
    padding: 100px;
    margin-left:auto;
    margin-right: auto;

}

.warning {

    color: red;

}

legend {
    color: white;
}