@font-face {
    font-family: helveticaBold;
    src: url(../fonts/HelvNeueBoldforIBM.otf);
}
@font-face {
    font-family: helveticaLight;
    src: url(../fonts/HelvNeueLightforIBM.otf);
}
@font-face {
    font-family: helveticaMedium;
    src: url(../fonts/HelvNeueMediumforIBM.otf);
}
/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
  font-family: helveticaLight;
}

.navbar {
  background-color:#FFFFFF;
  background-image: none;
  padding: 0 30px;
  border: 0;
}

.navbar-nav{
}
.navbar .navbar-header{
  min-width: 300px;
}
/*navbar underline color*/
.navbar ul li a.active{
  border-bottom: 5px solid #F59B0A;
  height: 100%;
}
.navbar ul li{
  padding: 0px;
  height: 100%;
}
.navbar ul li a{
  height: 100%;
  -webkit-transition: background-color 0.7s ease;
  -moz-transition: background-color 0.7s ease;
  -o-transition: background-color 0.7s ease;
  transition: background-color 0.7s ease;
  border-bottom: 5px solid #D3D3D3;
  padding-left: 10px;
  padding-right: 10px;
  shadow: 10px 10px 5px grey;
}
/*navbar colors*/
.navbar ul li a:hover{
  background-color: #D3D3D3;
  color: #fff;
  border-bottom: 5px solid #F59B0A;
}

.navbar ul li.active{
  padding: 0px;
}

/*navbar text color*/
.navbar-nav a{
  color: #41455C ;
}

.navbar-toggle .icon-bar {
  background-color: #98777b;

}

@media screen and (max-width: 390px) {
  .navbar-right {
    font-size: 11px;
  }
  .navbar ul li a {
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media screen and (max-width: 450px) {
  .navbar-right {
    font-size: 12px;
  }
}

@media screen and (max-width: 768px) {
  .navbar-right {
    margin-right: 0 !important;
    float: right !important;
  }
  .navbar-nav>li {
    float: left;
  }

  .nametj {
    margin-top: 130px !important;
  }
}

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

  .aboutimg > img {
    max-width: 200px;
  }

  .jumbo> img {
    max-width: 400px;
  }
  
  .thumbnail {
    max-width: 350px;
  } 
}

@media (min-width: 768px) {
  .navbar-right {
    margin-right: 0 !important;
  }
}


/*fade TJBot image*/
#fade img {

  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

@keyframes fadeFadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#fade img.top {
animation-name: fadeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 3s;
animation-direction: reverse;
}


.tjheaderbox{
  padding: 8px 0px 0px 0px;
  height: 100%;
}

.watson{
  font-family: helveticaBold;
}
.tjheader{
  padding: 7px 10px 10px 10px;
  font-size: 18px ;
  color: #000;
  font-family: helveticaLight;
  display: inline-block;
  white-space: nowrap;
}

/*header color*/
.nametj {
  color: #98777b;
  font-size: 35px ;
  font-weight: bold;
  margin-top: 80px ;
  padding: 5px 0;
  display: inline-block;
}

.gettj{
  background: #ffffff;
  color: #41455C;
  font-size: 25px ;
}
.tjrow{
  margin-top: 15px;
  margin-bottom: 60px;
}

.opensource {
  font-size: 24px ;
  display: block;
  margin-top: 10px ;
}
.byibm{
  padding: 5px 10px 5px 10px;
  font-size: 16px ;
  font-weight: bold;
  color: #41455C;
}

.jumbo {
  position: relative;
  height: 500px;
}

.jumbo > img {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  width: 100%;

}

.thumbnail h3 {
  min-height: 52px;

}

.aboutimg{
  padding-top: 100px;
}

.aboutimg > img {
  width:80%;
}

/*hiMyNameIsTjbot*/
#overview{
  background-color: #FFFFFF;
}
/*buildtjbackground*/
#gettj, #contribute{
  background-color: #eee;
}

/*bring tjbot to life*/
#recipes{
  background-color:  #FFD61E;
}

/*swiftplayground*/
#swift{
  background-color:#fff;
  background-opacity: ;
}

/*about TJBot*/
#about{
  background-color: #FFFFFF;
}

/*background color*/
.gettjrowback{

  background-color:#CEDF21;
}


/*assemble video button*/
.buildTJ{

  background-color: none;
  border: none;
  color: #deb887 ;
  padding:5px 10px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}

.buildTJ:hover{
  color: #fff;

}

#IBMfooter{
background-color:#FFFFFF;
}

.reciperowback{
  background-image: url("../../images/recipebg.jpg");
  background-repeat: no-repeat;
  background-size: auto;
  height: 100%;
  padding: 30px;
  display: block;
}

/*main text color*/
.darktitle{
  color: #606060;
  background: transparent ;
  padding-left: 0px;
  margin-bottom: 10px;
}

.toppadding15{
  padding-top: 15px;
  padding-bottom: 15px;
}

.footerback{
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 0;
}


ul li {
  padding-left: 0.5em;
}

ul.alt {
  list-style: none;
  padding-left: 0;
}

ul.alt li {
  border-top: solid 1px rgba(212, 212, 255, 0.1);
  padding: 0.5em 0;
}

ul.alt li:first-child {
  border-top: 0;
  padding-top: 0;
}

ul.icons {
  cursor: default;
  list-style: none;
  padding-left: 0;
}

ul.icons li {
  display: inline-block;
  padding: 0 1em 0 0;
}

ul.icons li:last-child {
  padding-right: 0;
}

/* lists */

/* Animation */
.animate4s{
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
    opacity:0;
  }
  to {
    opacity: 1;
  }
}