/*
 * DESKTOP STYLES
 * --------------------------------------------------
 */
 
 html, body {
  -webkit-tap-highlight-color: transparent;
  /* disable webkit tap highlight */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  font-family: "Martel Sans", sans-serif;
  /* padding-top: 35px; */
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  height: 100%;
  }

/* Container */
#container {
  position: relative;
  }

#wrapper {
  max-width: 1280px;
  }

/* Lists */
ol {
	padding-left: 50px;
	font-weight: 300;
	}
	
ul {
	margin: 0;
    padding: 0;
	padding-left: 20px;
	font-weight: 300;
	list-style-type: bullet;
	}

/* Menu Button */
.menu-btn {
  float: left;
  padding-top:18px;
  font-family: 'Martel Sans', 'sans serif';
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  }
  
.menu-btn:hover {
  opacity: 0.9;
  }
  
/* Header */
.site-header {
  position: fixed;
  /* margin-top: -70px; */
  padding-left:25px;
  height:60px;
  background-color: rgba(58, 244, 172, .9);
  width: 100%;
  text-align: left;
  z-index: 1000; 
  }

.site-header-title {
	font-family: 'Inconsolata';
	letter-spacing: 2px;
	font-weight: 400;
	margin-top: -14px;
	margin-left:10px;
	padding-left: 50px;
	width: 100%;
	color:black;
  }
  
.bar1 {
    width: 30px;
    height: 1px;
    background-color: black;
    margin-top:5px;
    margin-left: 15px;
    z-index: 1;
    transition: 0.2s;
    -webkit-transform: rotate(-45deg) translate(0px, 5px) ;
    transform: rotate(-45deg)translate(0px, 5px);
    }

.bar3 {
	width: 30px;
    height: 1px;
    background-color: black;
    margin-top: 5px;
        margin-left: 15px;

    z-index: 1;
    transition: 0.2s;
    -webkit-transform: rotate(45deg) translate(1px, -5px);
    transform: rotate(45deg)translate(1px, -5px);
    }
    
.change .bar1 {
   -webkit-transform: rotate(0deg) translate(0px, 10px) ;
    transform: rotate(0deg) translate(0px, 10px) ;
  }



.change .bar3 {
    -webkit-transform: rotate(0deg) translate(0px, -7px) ;
    transform: rotate(0deg) translate(0px, -7px) ;
  }
 
/* Global styles */

p {
	margin-top:20px;
  }

.jumbotron h1{
    font-family: 'Inconsolata', 'Lucida Console', monospace;
	color: rgba(59, 238, 170, 1);
	font-size: 60px;
	line-height: 60px;
	padding-bottom: 10px;
  }

.byline a{
	font-family: 'Inconsolata', 'Lucida Console', monospace;
	font-size: 14px;
	letter-spacing: 1px;
 	line-height: 32px;
 	border-bottom:none ;
  }

h2 {
    font-family: 'Inconsolata', 'Lucida Console', monospace;
    font-size: 26px;
 	line-height: 32px;
 	border-bottom: 2px solid rgba(59, 238, 170, 0.9) ;
 	padding-bottom: 10px;
  }
 	
 	
h3 {	
	font-family: 'Inconsolata', 'Lucida Console', monospace;
	font-size: 20px;
	line-height: 24px;
  }
  
h4 {
  color: gray;
  font-size: 14px;
  line-height: 20px;
  margin-top: 2px;
  }
  
h5 {
	font-family: 'Inconsolata', 'Lucida Console', monospace;
	font-size: 14px;
	letter-spacing: 1px;
	color:gray;
  }

a {
	font-family: 'Inconsolata', 'Lucida Console', monospace;
	font-size: 16px;
	line-height:18px;
	font-weight: 400;
	color:  #8282c3;
	letter-spacing: .5px;
  }

a:hover{
	text-decoration: none;
    color: black;
}

.jumbotron h6{
	float: left;
	color: gray;
	font-size: 16px;
	margin-top:15px;
  }
  
  
.jumbotron h6 a{
	float: left;
	color: gray;
	font-size: 16px;
	margin-top:15px;
  }
  
footer {
  font-family: 'Inconsolata', 'Lucida Console', monospace;
  position:relative;
  left:0;
  font-size: 12px;
  line-height: 13px;
  color: grey;
  height: 100px;
  margin-top: 370px;
  padding-top: 20px;
  bottom: 0;
  border-top: 1px solid rgba(217, 217, 217, 0.9) ;
  }

footer a {
	font-size: 12px;
	line-height: 13px;
	letter-spacing: 0px;
	color: gray;
	border-bottom: none;
  }

footer img{
	width:auto;
  }


table, th, td {
	text-align: center;
    border-collapse: collapse;
    padding: 5px;
  }

th  {
    padding: 0px;
    border-bottom: 2px solid black;
  }

code {
	color:grey;
	background-color: #fff;
  }

.glyphicon {
	color: #9b9bd9;
	opacity:.7;
  }


.carousel {
	outline-color: #9b9bd9;
  }



/*
 * MOBILE STYLES
 * --------------------------------------------------
 */
 
@media (max-width: 1024px){
	
#container {
  position: relative;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  }
  
  
.bar1 {
    width: 20px;
    height: 1px;
    background-color: black;
    margin-top:5px;
    margin-left:0px;
    z-index: 1;
    transition: 0.2s;
    -webkit-transform: rotate(0deg) translate (0px, 5px) ;
    transform: rotate(0deg)translate(0px, 5px);
    }

.bar3 {
	width: 20px;
    height: 1px;
    background-color: black;
    margin-top: 0px;
    margin-left:0px;
    z-index: 1;
    transition: 0.2s;
    -webkit-transform: rotate(0deg) translate(0px, -5px);
    transform: rotate(0deg)translate(0px, -5px);
    }    
    
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(0px, 1px) ;
    transform: rotate(-45deg) translate(0px, 1px) ;
    }

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

  .site-header {
    height:72px;
    margin-left: 0px;
    padding-left:0px;
    }

  .site-header-title {
	margin-top: -13px;
  	font-size: 16px;
  	padding-left: 30px;
    }

  .jumbotron h1{
  	font-size: 36px;
  	line-height: 40px;
    }
  
  h2{
	  font-size: 21px;
	  line-height: 28px;
    }
  
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left{
	left: 50%;
	margin-left:0px;
    }
    
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
	right: 50%;
	margin-right: 0;
    }