/*
 * Author: Klaus Birk
 * URL: http://www.klausbirk.com
 * Based on: Bolt Bootstrap by Carlos Alvarez
 * URL: http://blacktie.co
 */
 
/* FONTS */
@import url(http://fonts.googleapis.com/css?family=PT+Mono);
@import url(https://fonts.googleapis.com/css?family=Rubik:400,400italic,700italic,700,300italic,300);

/*Animation Prefs*/
@-webkit-keyframes pulse {
      0% {background-color: #D4E7F0;}
     15% {background-color: #EEE5F6;}
     30% {background-color: #F8E2C7;}
     45% {background-color: #F4DCDC;}
     60% {background-color: #EAEAE8;}
     80% {background-color: #E3DAEB;}
     100% {background-color: #FAF2CB;}
}

/* OVERALL ASPECT */
html, body {
  overflow-x: hidden; }

body {
  background-color: #fff;
        font-family: "GT-Haptik-Regular", sans-serif;

    font-size: 16px;
    color: #000000;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    
    margin-top: 0px;
    height:100%;

}
body ::-moz-selection { color: #fff;}
body ::selection { color: #fff;}

/* Titles */
h1, h2, h3, h4, h5, h6 {

    font-family: "GT-Haptik-Regular", sans-serif;
    font-weight: 400;
    letter-spacing: +0.00em;
    color: #000000;
    line-height: 1.3em;
}

h1 {
  font-size: 3.5em;
}
h2 {
  font-size: 3.5em;
}
h3 {
  font-size: 2.5em;
  margin-top: 1em;
}
h4 {
  font-size: 2.5em;
}
h5 {
  font-size: 1em;
  margin-top: 2em;
}
h6 {
  font-size: 1em;
}

/* paper js*/

@media only screen and (min-width : 992px) {
  canvas {
    position: fixed;
    width:100%;
    height:100%;

}
}


/* Paragraph & Typographic */
p {
    line-height: 1.7em;
    margin-bottom: 1.7em;
}

.centered {
    text-align: center;
}

.left {
    text-align: left;
}

.leftcenter {
    text-align: left;
}

.mt {
  margin-top: 20px;
}

/* Links */
a {
  /*color: black;*/
    color: #000000;
    word-wrap: break-word;
    text-decoration: none;
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}
p a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a.btn-theme.btn:link, a.btn-theme.btn:active, a.btn-theme.btn:visited {
  /*color: black;*/
    color: #000000;
    word-wrap: break-word;
    text-decoration: none;
    border-bottom:1px solid #000000;

    -webkit-transition: color 0.1s ease-in, border 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, border 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, border 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, border 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, border 0.1s ease-in, background 0.1s ease-in;
/*
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
*/

}

a:hover,
a:focus {
  color: #ffffff;
  /*color: #7b7b7b;*/
    text-decoration: none;
    outline: 0;
}

p a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
p a:focus, h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {
  color: #ffffff;
  border-bottom:1px solid #ffffff;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

/* Bootstrap Modifications */
 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


.navbar {
  font-weight: normal;
  font-size: 14px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #000;
  border: 0px solid #000;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #000;
  background-color: #fff;
}

.navbar-brand {
  font-size: 60px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
border: 0px solid transparent;
border-radius: 0px;
}

.btn-theme {
  color: #000000;
  background-color: transparent;
  border-color: #000000;
}
.btn {
  padding: 10px 30px;
  margin-bottom: 0;
  font-family: "GT-Haptik-Regular", sans-serif;
  font-weight: 400;
  font-size: 2.5em;
  border: 1px solid #000000;
  border-radius: 0px;

}
a.btn-theme.btn:link, a.btn-theme.btn:active, a.btn-theme.btn:visited {
  color:#000000;
  border-bottom: 1px solid #000000;
  box-shadow: none;
  /*

  -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
  */

  }

a.btn-theme.btn:hover {
  color:#fff;
  border: 1px solid #ffffff;
  background-color: transparent;
  }


.lead {
  letter-spacing: 0px;
  font-family: "GT-Haptik-Regular", sans-serif;
    color: #000000;
    line-height: 1.2em;
}

/* WRAP SECTIONS */

/* hello */
#hello {
  width: 100%;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #04b561;
}

#hello h1 {
  letter-spacing: 0px;
  color: #000000;
  /*color: #74cfae;*/
}

#hello h2 {
  color: #c0c0c0;
  font-weight: 400;
}

/* hello */
#black {
  width: 100%;
  padding-top: 0px;
  padding-bottom: 0px;
  opacity: 1.0;
}


#black h1 {
  letter-spacing: 0px;
  color: #fff;
  /*color: #74cfae;*/
}

#black h2 {
  color: #f3f3f3;
}

.my-container {
  width: 100%;
  padding: 12em 2em 6em 2em;

    position: relative;
    background: #000;
    /*background: rgb(220, 170, 160);*/

    overflow: hidden;
}

/* You could use :after - it doesn't really matter */
.my-container:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.30;
    background-image: url('../img/LTT_ListenToArch_1.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}



/* White */
#white {
  background-color: #f2f2f2;
  padding-top: 50px;
  margin-bottom: 0px;
}

#white h3 {
  color: black;
  font-weight: 400;
  margin-bottom: 35px;
}

#white p {
  color: black;
}

/* Green */
#green {
  background-color: rgb(111, 216, 253);
  background: rgb(90, 0, 254);
  padding-top: 50px;
  padding-bottom: 2em;
  margin-bottom: 0px;
}

#green h2, #green h3 {
  color: #00bb00;
  font-weight: 400;
  margin-bottom: 35px;
}

#green p {
  color: #00bb00;
  padding-top: 30px;
}

#green a {
  color: #00bb00;
  border-bottom:1px solid #00bb00;
}

/* Transparent */
#transparent {
  background: transparent;
  padding-top: 50px;
  padding-bottom: 2em;
  margin-bottom: 0px;
}
/* Rainbow */
#rainbow, #wave {
  -webkit-animation: pulse 50s infinite alternate;
  background: #D4E7F0;
  padding-top: 50px;
  padding-bottom: 2em;
  margin-bottom: 0px;

}

/* Red */
#red {
  background: rgba(220, 170, 160,0.8);
  padding-top: 50px;
  padding-bottom: 2em;
  margin-bottom: 0px;
}

#red h2, #rainbow h2, #green h3 {
  color: #000;
  margin-bottom: 35px;
}

#red p, #rainbow p {
  font-size: 1em;
  color: #000;
  padding-top: 30px;

}


/* Violet */
#violet {
  background-color: #8787ff;
  /*background-color: #6366db;*/
  padding-top: 50px;
  padding-bottom: 50px;
  margin-bottom: 0px;
}

#violet h3 {
  color: #000;
  font-weight: 400;
  margin-bottom: 35px;
}

#violet p {
  color: #000;
}


/* Skills */
#skills {
  background-color: #000;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 50px;
}

#skills h3 {
  color: white;
}

#skills p {
  color: white;
  font-weight: 400;
}

/* Social Links */


#social {
  width: 100%;
  padding-top: 6em;
  padding-bottom: 6em;
}

#social i {
  font-size: 2em;
  color: #000000;
}
#social i:hover {
  font-size: 2em;
  color: #ffffff;
}

#social .col-md-4:hover {
  background-color: transparent;
  color: #fff;
  border: 1px solid #ffffff;
}

#social i, #social .col-md-4 {
  padding:20px;
  border: 1px solid transparent;


    -webkit-transition: color 0.1s ease-in, border 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, border 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, border 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, border 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, border 0.1s ease-in, background 0.1s ease-in;

}

/* Footer */
#f {
  padding-top: 20px;
  background-color: #000;
}

#f p {
  color: white;
  text-align: right;
  font-size: 12px;
  font-weight: 400;
}

/* Image Opacity */
.grid img {
    border: 10px solid white;
    opacity: .7;
}
.grid img:hover {
  border: 10px solid black;
    opacity: 1;
}

/*Twitter Style */

.twit i {
  padding-bottom: 20px;
  font-size: 1em;
  color: #000000;
}

.twit h3 a{
  color: #000000;
  border-bottom: none;
}

#tw-widget2:after {
  content: "";
  display: table;
  clear: both; }
#tw-widget2 ul {
  padding: 0 0 0 0;

}
#tw-widget2 li {
  width: 100%;
  margin: 0 auto;
  list-style: none;
  float: none; }
  @media (min-width: 48em) {
    #tw-widget2 li {
      width: calc(100% / 3);
      float: left; } }
#tw-widget2 a { }
#tw-widget2 .user {
  padding: 20px 20px 16px;
  position: relative; }
  #tw-widget2 .user a span {
    display: block;
    text-align: left;
    color: #000000;
    font-weight: 400; }
  #tw-widget2 .user a img[data-scribe="element:avatar"] {
    display: none; }
  #tw-widget2 .user a span[data-scribe="element:name"] {
    font-family: "GT-Haptik-Regular", sans-serif; font-size: 1em; text-decoration: none; }
  #tw-widget2 .user a span[data-scribe="element:screen_name"] {
    font-size: 1em;
    color: #000000; }
  #tw-widget2 .user a span[data-scribe="element:verified_badge"] {
    display: none; }

  #tw-widget2 .user a span[data-scribe="element:screen_name"]:hover {
    color: #ffffff; }

#tw-widget2 .tweet {
  margin: 0;
  padding: 10px 20px;
  font-size: 1em;
  color: #000000; }
  #tw-widget2 .tweet a {
    color: #000000; }
  #tw-widget2 .tweet a:hover {
    color: #ffffff; }
  #tw-widget2 .tweet a[data-scribe="element:url"] {
    text-decoration: none; }
  #tw-widget2 .tweet a[data-scribe="element:hashtag"] {
    color: #000000; }
  #tw-widget2 .tweet img[aria-label^="Emoji"] {
    max-height: 1em; }
#tw-widget2 .timePosted {
  margin: 0;
  padding: 0 20px;
  font-size: 1em;
  color:#000000;
  text-align: left; }
#tw-widget2 .timePosted:before {
  display:none;
    font-family: "Fontawesome";
    -webkit-font-smoothing: antialiased;
    content: "";
    padding-right: 4px; }
#tw-widget2 .interact {
  display:none;
}

/*mobile -----------------------------------------------------*/

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

    h1 {
      font-size: 2.5em;
    }
    h2 {
     font-size: 2.5em;
    }
    h1, h2, h3, h4, h5, h6 {

    font-family: "GT-Haptik-Regular", sans-serif;
    font-weight: 400;
    letter-spacing: +0.00em;
    color: #000000;
    line-height: 1.3em;
    }

    canvas {
      display: none;
    }
    .leftcenter {
        text-align: center;
    }
    #skills {
      background-color: transparent !important;
    }
    #tw-widget2, #tw-widget2 .user a span, #tw-widget2 .timePosted  {text-align: center;}
    #tw-widget2 .user {padding-top: 3em !important;;}
    #tw-widget2 .user a span[data-scribe="element:name"] {
      font-size: 1.5em !important; }
    #tw-widget2 .user a span[data-scribe="element:screen_name"] {
      font-size: 1.5em !important; }

  }