/**
	Molecule Formula Interactive v.02
**/

/*
  **Color Palette**
    black: #312D2E;
    gray: #CFD0CE;

    green: #1FB486;
    teal: #2496B1;
    blue: #2858DC;
    purple: #714CE4;
    violet: #C13ECB;

    green-dark: #277C5E;
    teal-dark: #2E787C;
    blue-dark: #30578D;
    purple-dark: #4B4988;
    violet-dark: #803D88;


    green-darker:#226D53;

  **Typoography**
    Amatica SC: title and major headings
    Open Sans: body text
    Londrina: atoms and diagrams

  **Atom color code**
     Carbon: purple
     Hydrogen: blue
     Oxygen: teal
     Nitrogen: violet

*/

/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #DFE0DE;
}
body {
  color: #312D2E;
  font-family: 'Open Sans', sans-serif;
}
canvas {
	display:block;
}

.no-gutter > [class*='col-'],
[class*='col-'].no-gutter { /* remove bootstrap gutters */
    padding-right:0;
    padding-left:0;
}

p a {
  text-decoration:underline;
}

a.sr-only {
  color:black;
}
.footer p a {
  color: #20496F;
  font-weight:bold;
}
/*animations*/
@keyframes fade-in {
    0%   {opacity:0;}
    25%  {opacity:.2;}
    50%  {opacity: .6;}
    100% {opacity: 1;}
}

@keyframes drag-guide {
  0%   {opacity:.2;  top:70%; left:70%;}
  50%  {opacity: .8;top:25%;left:48%;}
  100% {opacity: .2;top:70%;left:70%;}
}

/*override menu breakpoint*/
@media screen and (max-width: 3000px) {
  .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 0px solid transparent;
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #312D2E;
  text-shadow: none;
  background-color: transparent;
  border: 2px solid #312D2E;
}
.btn-lg,
.btn-xlg {
  border-radius: 2px;
}

.btn-xlg {
	padding: 8px 18px;
    font-size: 18px;
		font-weight:bold;
    line-height: 1.2;
}



a.btn-pink,
.btn-pink {
  color:#af31b8; /*made darker for contrast improvement */
}

a.btn-pink:hover ,
.btn-pink:hover,
a.btn-pink:focus,
.btn-pink:focus {
color: #803D88;
background-color:#f0f0f0;
}

/* navigation bar */

.navbar {
  min-height:50px;
  background-color:#277C5E;
  margin-bottom:0;
}

.navbar-static-top {
  border:0;
}

.navbar-default .navbar-toggle .glyphicon {
  font-size:1.6em;
   color:white;
 }

 .navbar-default .navbar-toggle .navbar-toggle-text {
   font-size:19px;
   font-weight: bold;
   color:white;
 }
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
  background-color:#277C5E;
}
.navbar-toggle {
  border:0;
  height:50px;
  padding:5px;
  margin:0 -15px 0 0;
  min-width:50px;
}
.navbar-default .navbar-collapse {
  border:0;
}

.navbar-default .navbar-nav {
  padding:10px;
}
.navbar-default .navbar-nav ul {
  padding:0px;
}

.navbar-default .navbar-nav li {
  font-size:16px;
  font-weight:bold;
  margin:0 0 2px 0;
  color: #fff;
}

.navbar-default .navbar-nav ul li {
  list-style:none;
}

.navbar-default .navbar-nav li a {
  color: #fff;
  padding:5px 10px;
  display:block;
}
.headersocmedia {
  padding-top:5px;
}
.headersocmedia .social-links {
  margin: 0 10px 0 0;
  opacity:.8;
}

.headersocmedia .social-links img {
  width:20px;
}

.headersocmedia .social-links:hover {
  opacity:1;
}

.navbar-default .navbar-nav>li {
    font-size:20px;
    margin-bottom:10px;
}

.navbar-default .navbar-nav>li>a {
    color: #312D2E;
    padding:5px 0;
}
.navbar-default .navbar-nav>li>a:hover {
  color:#011D1E;
}

.navbar-default .navbar-nav ol>li.active>a {
  color: #c0d0c0;
}

.navbar-default .navbar-nav ol>li.active>a:hover {
  /*background-color:#4DCDA2;*/
  color: #312D2E;
}

.navbar-default .navbar-nav ol>li>a:hover,
.navbar-default .navbar-nav ol>li>a:active  {
  color: #312D2E;
  background-color:#4DCDA2;
  text-decoration:none;
}

/* navbar-brand */

.navbar-brand {
  background: center url(../images/nitrogen-brand.png) no-repeat #803D88;
  background-image:url(../images/nitrogen-brand.svg);
  background-size:40px 40px;
  height:50px;
  width:50px;
}

a.site-brand:hover{
  text-decoration: none;
}

a span.site-name {
  color: #fff;
  text-decoration: none;
  line-height:50px;
  font-size:18px;
  text-transform:uppercase;
  font-weight:bolder;
  letter-spacing: .03em;
  margin-left:10px;
}
a:hover span.site-name {
  color: #312D2E;
}

.navbar-default .navbar-brand:hover {
  background-color: #803D88;
}

/* pagination */

.page-navigation {
  background-color:#2a8666;
  margin:0;
  padding:0;
  text-align:center;
}

.page-navigation ul.pagination {
  margin:5px auto 0px auto;
  padding:0;
  height:auto;
  width:auto;
  display:inline-block;
}

.page-navigation ul.pagination li>a {
  border:0;
  border-radius:10px;
  margin:2px 6px;
  width:20px;
  height:20px;
  padding:0;
  line-height:20px;
  background-color:rgba(255,255,255, 1);
  color: #267255;
  font-weight:bolder;
  font-size:.9em;
}
.page-navigation ul.pagination li.active>a {
  background-color:rgba(0,0,0, .1);
  color: #eee;
}


 /* definitions modal */
 a.definitions-link {
 font-weight:bold;
  cursor:pointer;
 }

 a.canvas-link {
   position:absolute;
   font-size:1em;
   z-index:1;
   display:none;
   width:3.7%;
   height:4%;
   line-height:100%;
   text-align:center;
   background-color:transparent;
   color:#4B4988;
 }
  a.canvas-link:hover {

  }
/* illustration */
.illustration {
 background-color: #DFE0DE;
 -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.2);
box-shadow: inset 0 0 100px rgba(0,0,0,.2);
}
.illustration img {width:100%; margin:0 auto; max-width:1024px;}

.illustration {
  cursor:pointer;
  position: relative;
}
 .illustration .replay {
   top:3%;
   right:3%;
  position: absolute;
  font-size:1.4rem;
  color: rgba(10,10,10, .7);
  z-index:100;
  transition: all .3s ease-in;
 }

  .illustration:hover .replay{
      color: rgba(10,10,10, .4);
      top:4%;
      right:4%;  font-size:1.8rem;
}
.illustration:active .replay{
    color: rgba(10,10,10, .4);
    font-size:1rem;
}

#feeder-illustration {
  background-image: url('../images/protein-feeding-bg.png');
  background-repeat: no-repeat;
  background-position: 2px 0;
  background
}
/* text-column */

.text-column  {
  background-color:white;
  padding:5px 30px 10px 30px;
  position:relative;
}

.text-column h1 {
  color:#803D88;
  font-family:Amatica SC, cursive;
  font-weight:bold;
  font-size:2.8em;
  margin-bottom:16px;
  letter-spacing: -.05em;
  animation-name: fade-in;
  animation-duration: .5s;
}

.text-column p {
  color:#5A5B5E;
  font-size:1.05em;
  line-height:1.5;
  margin-bottom:9px;
  opacity:0;
  animation-name: fade-in;
  animation-fill-mode:forwards;
  animation-duration: .8s;
  animation-delay: .5s;
}

.text-column .btn-group {
margin:10px auto;
width:94%;
margin:20px 3% 10px 3%;
opacity:0;
animation-name: fade-in;
animation-fill-mode:forwards;
animation-duration: .8s;
animation-delay:1s;
}
.text-column .btn-group .btn{
width:40%;
}
.text-column .btn-group .btn-next{
width:60%;
}


.text-column .list-group .list-group-item {
  border:0;
  font-size:1.1em;
  color: #CFD0CE;
  opacity:0;
  animation-name: fade-in;
  animation-fill-mode:forwards;
  animation-duration: .8s;
  animation-delay: .7s;
  cursor:pointer;
}

.text-column .list-group .list-group-item.active {
  color: #312D2E;
  background-color:transparent;
}

.text-column .list-group .list-group-item:hover,
.text-column .list-group .list-group-item.active:hover {
background-color:#f0f0f0;
}

.text-column .list-group .list-group-item li{

  margin-left:20px;
}

/** molecule info  **/
.molecular-info-box {
  margin-top:16px;
}

.molecular-info h2 {
	text-transform:uppercase;
	font-size:.9em;
	font-weight:bold;
	margin:5px 0;
}

.molecular-info h3 {
  color:#277C5E;
}


.molecular-info.text-column  .btn-group {
  width:100%;
  margin:4px 0;
}

.molecular-info.text-column  .btn-group .btn {
  margin: 0 5%;
  width:90%;
}



.molecular-info.text-column p {
  animation-delay:0s;
}

 h3.molecule-name {
	margin:0;
	font-weight:bold;
  font-size:2em;
}

#molecular-formula h3 {
	margin:0;
	font-weight:bold;
	font-size:1.7em;
}

/* molecular table */

.molecular-info .table td {
  font-size:1.1em;
  line-height:28px;
  padding-top:2px;
  padding-bottom:2px;
}

.molecular-info .table tbody tr {
	background:#CFD0CE;
  border-bottom:2px white solid;
}
.molecular-info .table tbody tr:nth-child(odd) {
	background:#DFE0DE;
}

.molecular-info .table tfoot td.amount,
.molecular-info .table tfoot td.amount-center  {
  color:#277C5E;
}

.molecular-info .table tfoot tr {
	background:transparent;
}

.molecular-info .table thead th {
	font-size:.9em;
	text-align: center;
  padding-bottom:2px;
}

/*	Table footer label	*/
.molecular-info .table tfoot td:nth-child( 1 ){
	text-align: right;
	font-size:110%;
}

.molecular-info .table td.amount-center,
.molecular-info .table td.math-symbol {
	text-align: center;
	font-weight: bold;
	padding-left:4px;
	padding-right:4px;
}

/*	Mass numbers (should replace with cell classes )*/
.molecular-info .table td.amount {
	text-align: right;
	padding-right:0;
	padding-left:6px;
	font-weight: bold;
}

/*	Mass unit (should replace with cell classes)*/
.molecular-info .table td.unit {
	text-align: left;
	font-weight: normal;
	padding-left:0;
	padding-right:6px;
	font-size:1.1em !important;
}

.molecular-info .table td sup,
.molecular-info .table td sub {
  font-family: Helvetica, Arial, sans-serif;
}
/*	Atom	*/
.molecular-info .table td.atom {
	text-align: center;
	font-weight: bold;
}

.nitrogen-percentage-box {
display:none;
}

.intro-guide {
  position:absolute;
  opacity:0;
  animation-name:drag-guide;
  animation-duration:2.5s;
  animation-iteration-count: 2;
  animation-timing-function: ease-in-out;
}

.intro-guide span.glyphicon {
  font-size:2em;
}

/*	Table footer readout */
#molecular-mass-table tfoot td.amount,
#nitrogen-percentage-table tfoot td.amount-center {
	font-weight: bold;
	font-size: 200%;
}


.circle {
	border-radius: 50%;
	width: 30px;
	height: 30px;
  content:'';
  opacity:.0;
	/* width and height can be anything, as long as they're equal */
}

#molecular-mass-table td {
  position:relative;
}

#molecular-mass-table td .circle {
  position:absolute;
  left:600px;
  top:-100px;
  z-index:1000;
}

.element {
	 -webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}



.atom-symbol {
	display:block;
	border-radius:15px;
	color:#fff;
	width:30px;
	height:30px;
	line-height:30px;
	background-color: #1a1a1a;
}

.atom-H {
  background-color: #2858DC;
}
.atom-N {
  background-color: #C036C9;
}
.atom-C {
  background-color: #714CE4;
}
.atom-O {
  background-color: #1E7F94;
}





.media-body {
padding: 15px 30px;
}

.media-right {
padding: 10px 30px;
}


/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.2);
          box-shadow: inset 0 0 100px rgba(0,0,0,.2);
}

.cover-page .site-wrapper {
  display: table;
}

.site-wrapper-inner {
  vertical-align: top;
}
.cover-page .site-wrapper-inner {
  display: table-cell;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner {
  padding: 30px;
}

.app-row {
  background:#fff;
}

.app-row, .app-row>div {
  min-height:320px;
}


/*
 * Header
 */



.masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px;
	font-size:1.3em;
	font-weight:bold;
	text-transform:uppercase;

}
a.masthead-brand  {
	color: #312D2E;
}

@media (min-width: 768px) {
  .masthead-brand {
    float: left;
  }
  .masthead-nav {
    float: right;
  }
}

/* modal */
.nitrogen-modal .modal-header {
  border:0;
  padding:15px 15px 0 15px;
}

.nitrogen-modal .modal-footer {
  border:0;
  text-align: center;
  padding-bottom:20px;
}

.nitrogen-modal .modal-body {
  text-align: center;
  padding:0px 30px 0 30px;
}

.nitrogen-modal h2 {
  color:#277C5E;
	font-family:"Amatica SC";
	font-size:3em;
  margin:0 0 10px 0;
}


.nitrogen-modal p {
  font-size:1.2em;
  line-height:1.6em;
}
.nitrogen-modal table.percentage-comparison  {
  margin:10px 0;
}
.nitrogen-modal table.percentage-comparison tr td,
.nitrogen-modal table.percentage-comparison tr th {
  border:0;
  text-align:center;
  font-weight:bold;
  padding:4px;
}

.nitrogen-modal table.percentage-comparison tr td {
  width:33.3%

}

.nitrogen-modal table.percentage-comparison tr td.percentages {
  color:#2496B1;
  font-size:2em;
}
.nitrogen-modal table.percentage-comparison tr td.molecule-name {
color: #5A5B5E;
text-transform:uppercase;
}


.feed-img {
  max-width:94px;
  max-height:94px;
  position:relative; right:0; bottom:30px
}
/*
 * Cover
 */

.masthead .inner {
  padding:10px 20px;
}
.cover {
  padding: 0 20px;
}

.cover h1 {
	color:#226D53;
	font-family:"Amatica SC";
	font-size:5.5em;
	line-height: .9em;
	letter-spacing: -.04em;
	margin-bottom:20px;
  margin-top:10px;
}

.main-buttons {
text-align: center;
margin:10px 0;
}
.main-buttons .btn-xlg {
display:block;
margin:10px;
}



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

ul.credits-list li {
margin:10px 0;
}

ul.credits-list li span.title-credit {
font-weight:bold;
text-transform:uppercase;
font-size:90%;
}
/*
 * Footer
 */



.footer {
  padding:10px;
  border-top:2px #aaa solid;
  background:#DFE0DE;
}

.mastfoot {
  color: #999; /* IE8 proofing */
  color: rgba(0,0,0,.5);
  border-top:none;
}

.footer p {
 color:#444;
 font-size:.9em;
}
.footer .logo  {
  padding:10px 20px;
}
.footer .logo img {
  height:auto;
  width:100%;
  max-width: 320px;
}
/*
 * Affix and center
 */

@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0;
    transition: 0.1s ease-in-out;
      z-index:500;
  }
  .masthead.nav-up {
    top: -80px;

  }
.headersocmedia {
      float: right!important;
}

.headersocmedia .social-links {
margin: 0 0 0 6px;
}

.headersocmedia .social-links img {
width:  24px;
}

  .mastfoot {
    background-color:transparent;
    bottom: 0;
  }
  .cover {
    padding: 50px 20px 20px 20px;
  }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }

  .cover p {
    width:90%;
  }
  .cover img {
    max-width:700px;
  }

  .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse {
    padding: 0 60px;
    margin:0 -15px;
    -webkit-box-shadow: inset 0 0 500px rgba(10,50,10,.3);
   box-shadow: inset 0 0 500px rgba(10,50,10,.3);
  }

  .app-container {
    /*height:100%;*/
  }
  #feeder-illustration {
    background-size: 600px, auto;
  }
  a.canvas-link {
    font-size:1.8em;}
}

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    max-width: 1080px;
		padding:0 20px
  }
  .masthead .inner {
    padding:20px;
  }
  .cover {
    padding: 40px 20px;
  }
	.cover h1 {
		font-size:6.5em;
		line-height: .9em;
    margin-top: 50px;
	}
  .cover p {
    width:100%;
  }
	.cover p.lead {
		font-size:18px;
	}
  .cover img {
    max-width:auto;
  }

	.main-buttons .btn-xlg {
    display:inline-block;
  	margin-right:3%;
  	margin-left:3%;
  	padding-right:2%;
  	padding-left:2%;
	}

  .illustration img {
    /* max-width: 600px;*/
  }

  a.canvas-link {
    font-size:1.4em;}

    .credit-column ul {margin-top:79px;}
}
@media (min-width: 1173px) {
  .text-column h1 {
    font-size:3.3em;
    margin-bottom:18px;
  }

  .text-column p {
    font-size:1.2em;
    line-height:1.6;
    margin-bottom:10px;
  }

  .text-column .btn-group {
  margin:20px auto 0 auto;
  }

  .text-column .list-group .list-group-item {
    font-size:1.3em;
  }
  .btn-xlg {
  	padding: 14px 24px;
      font-size: 20px;
  		font-weight:bold;
      line-height: 1.3333333;
  }
  .molecular-info-box {
    margin-top:24px;
  }

  h3.molecule-name {
    font-size:2.3em;
  }

  #molecular-formula h3 {
  	font-size:1.9em;
  }

  .page-navigation ul.pagination li>a {
    border-radius:12px;
    width:24px;
    height:24px;
    line-height:24px;
    font-size:1em;
  }

  .navbar-toggle {
    height:60px;
    padding:5px;
  }

  .navbar-brand {
    background-size:50px 50px;
    height:60px;
    width:60px;
  }

  a span.site-name {
    line-height:60px;
    font-size:20px;
  }

  .molecular-info .table td {
    font-size:1.2em;
    line-height:30px;
    padding-top:4px;
    padding-bottom:4px;
  }

  a.canvas-link {
    font-size:1.8em;}
}


@media (min-width: 1480px) {
  .illustration img {
       /*max-width: 830px;*/
  }

  #feeder-illustration {
    background-size: 830px, auto;
  }

  .feed-img {
    max-width:150px;
    max-height:150px;
  }
}