/*! johnresearches.com /
/* ==========================================================================
   Base styles:
   ========================================================================== */
body {
 /**background-image: url("../img/paper.jpg");*/
 background-color: #333;
}

hr{
	border: 2px solid rgba(255,255,255,.125);
}



.navbar0{
	padding: 2rem 1rem 0 1rem;
	background-color: #fff;
	font-size: 1.5rem;
}

.navbar0 .navbar-brand{
	font-size: 1.5rem;
	font-family: "Segoe UI", sans;
	font-weight:900;
}




.section0{
	/*height:100vh;
	min-height:30rem;*/
	padding:  3rem 0 3rem 0;
	background-color: #fff;
	font-size: 1.5rem;
	text-align: center;
	
}

.section0 h1 {
	color: rgba(0,0,0,.9);
	text-transform: uppercase;
	font-family: 'Arial Black', Sans-Serif;
	/**font-family: 'Telefon Black', Sans-Serif;
    line-height: 1.5;*/
	font-size: 2.5rem;
	font-weight:800;
}

.section0 h4{
	color: rgba(0,0,0,.9);
	font-family: "Lucida Console", "Courier New", monospace;
	margin-bottom: 2rem;
	font-size: 2rem;
	font-weight:100;
}

.section0 p {
	color: rgba(0,0,0,.9);
	font-family: "Segoe UI Light", sans;
	
	
}

.section0 .btn {
	margin-top:2rem;
	padding: 1rem 3rem 1rem 3rem;
	font-size: 2.5rem;
	font-weight:900;
}

.section0 small {
	font-size: 1rem;
}


/**.section0 .introimg{
	margin-top: 2rem;
	width: 33rem;
	height: 20rem;
	background-image: url("../img/code.png");
}


.animation1 {
  width:3rem;
  height: 3rem;
  background-color: #333;
  position: relative;
  animation-name: johntechsEntry1;
  animation-duration: 5s;
}

@keyframes johntechsEntry1 {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:20rem; top:0px;}
  50%  {background-color:blue; left:10rem; top:20rem;}
  75%  {background-color:green; left:0px; top:5rem;}
  100% {background-color:#333; left:0px; top:0px;}
}


.animation2 {
  width:5rem;
  height: 5rem;
  background-color: #333;
  position: absolute;
  animation-name: johntechsEntry2;
  animation-duration: 5s;
}

@keyframes johntechsEntry2 {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:10rem; top:0px;}
  50%  {background-color:blue; left:5rem; top:5rem;}
  75%  {background-color:green; left:0px; top:5rem;}
  100% {background-color:#333; left:4rem ; top:5rem;}
}


.animation2 {
  width: 100px;
  height: 100px;
  background: #333;
  transition: width 6s, height 2s, transform 2s;
}

.animation2:hover {
  width: 4rem;
  height: 3rem;
  transform: rotate(360deg);
}

*/






.section1{
	margin-top: 4rem;
	margin-bottom: 4rem;
	/**background-color: #eee;*/
}

.section1 .card{
	color: #fff;
	background-color: #fff0;
	background-clip: border-box;
	border: 2px solid rgba(255,255,255,.125);
}


.section2{
	padding: 4rem 0 4rem 0;
	background-color: #fff;
}

.section2 .card{
	color: #333;
	background-color: #fff0;
	background-clip: border-box;
	border: 2px solid rgba(0,0,0,.125);
}

.section2 .card-text{
	font-size: 1.5rem;
	font-family: "Segoe UI", sans;
	font-weight:900;
}

.section2 .card-text-subtext{
	line-height: .1rem;
	font-family: "Segoe UI", sans;
}

.section2 hr{
	border: 0.1rem solid rgba(0,0,0,.125);
}

.section3{
	color: #fff;
	text-decoration:none;
	padding: 0 0 4rem 0;
	/**background-color: #eee;*/
}