/**
*** ZACH COLE
*** (C) 2016
**/

/*
 * light grey	#A8A7A7
 * rose			#38C57A
 * green		#38C57A
 * orange		#c84d17
 * hidsigorange #e65a17
 * red			#E8175D
 * medium grey	#474747
 * dark grey	#363636
 * grey			#636366
 */


/* SIMPLE GRID LANDING PAGE CUSTOM STYLES */

* {
  color: #636366;
  transition: all 0.8s ease; /* General transition for everything */
}

.ua * {
  color: #e65a17;
}

.ua h5 {
  margin: 0px;	
}

.ua .webcredit{
  color: #363636;	
}

.contrast {
  color: #fff;	
}

html {
  /*overflow: hidden;*/
  scroll-behavior: smooth;
}

body {
  background: #000;
  /*background: #F38BD3;*/
}

a {
  text-decoration: none;
  /*color: #fff;*/
  color: #636366;
  /*transition: all 0.3s ease;*/
}

.ua a {
  color: #e65a17;
}

a:hover {
  /*text-decoration: line-through;*/
  font-weight: 700;
}

.webcredit a {
  color: #363636;
}


.m-bottom {
  margin-bottom: 48px;
}

.container {
  /*padding-top: 100px;*/
}

.body-content {
  /*background: #000;*/
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  /*padding: 100px 0 120px 0;*/
  position: relative;
  z-index: 0 !important;
}

.body-content > .container {
  position: relative;
  top: 100px;
  padding-bottom: 100px;
}

.body-content.ua > .container {
  position: relative;
  top: 0px;
  padding-bottom: 0px;
}

.jumbotron {
  background: #FE7880;
  background-image: linear-gradient(#FE7880, #000, #000);
  height: 760px;
  width: 100%;
  z-index: 100 !important;
}

.jumbotron h1,
.jumbotron h2 {
  color: #fff;
}

.ua .headertron h1,
.ua .headertron h2 {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  }



.headertron {
  background: #FE7880;
  /*background-image: linear-gradient(#FE7880, #0ff, #FE7880);*/
  background: url('img/header.png') top center no-repeat;
  /*background-image: url('img/header.png');*/
  height: 300px;
  width: 100%;
  /*z-index: 100 !important;*/
  /*background:url(your-image.jpg) top right no-repeat;*/
  /*background-attachment:fixed;*/
}

.middletron {
  background: #FE7880;
  /*background-image: linear-gradient(#FE7880, #0ff, #FE7880);*/
  /*background-image: url('img/mission02.png') top center no-repeat;*/
  /*background-repeat: no-repeat;
  background-position: top center;*/
  background:
    url('gif/200128Trailerv06Boss_04.gif') top center no-repeat,
    /*url('img/Battle01-large.gif') top center no-repeat,*/
    url('img/mission02.png') top center no-repeat,
    #000;
  /*background: url('img/Battle01-large.gif');*/
  height: 600px;
  width: 100%;
  z-index: 100 !important;
  /*background:url(your-image.jpg) top right no-repeat;*/
  background-attachment:fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bottomtron {
  background: #FE7880;
  background:
    url('gif/200201TrailerForGif_QuadA_02.gif') top center no-repeat,
    url('img/mission02.png') top center no-repeat,
    #000;
  height: 400px;
  width: 100%;
  z-index: 100 !important;
  background-attachment:fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

button {
  height: 48px;
  width: 180px;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 200;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 4px;
  margin: 20px 0;
  cursor: pointer;
  /*transition: all 0.3s ease;*/
  outline: none;
}

button:hover {
  background: #fff;
  color: #1b2735;
}

button:active {
  outline: none;
}

.ua button {
  height:48px;
  width: 180px;
  text-align: center;
  color: #e65a17;
  font-size: 1rem;
  font-weight: 200;
  background: transparent;
  border: 1px solid #e65a17;
  border-radius: 4px;
  margin: 20px 0;
  cursor: pointer;
  /*transition: all 0.3s ease;*/
  outline: none;
}

.ua .social button {
  height:180px;
}

.ua .back button {
  height:100px;
  width: 120px;
}

.ua .back .img svg{
  height: 50px;
  width: 50px;
}

.ua button:hover {
  background: #e65a17;
  color: #1b2735;
}

.ua button:hover p{
  color: #1b2735;
}

.ua button:hover svg{
  fill: #1b2735;
}

.ua .img img{
  height: 100%;
  width: 100%;
  /*fill: #000;
  color: #1b2735;*/
}


.ua .img svg {
  height: 96px;
  width: 96px;
  fill: #e65a17;
}

/*.ua .img svg:hover {
  height: 96px;
  width: 96px;
  transition: all 0.8s ease;
  fill: #e65a17;
}*/



.crd {
  /*margin: 1rem;*/
  position: relative;
  /*width: 20rem;
  height: 20rem;*/
  overflow: hidden;
}

/*.crd-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}*/

.crd-info {
  color: hsl(0, 0%, 90%);
  position: absolute;
  line-height: 1;
}

.crd-heading {
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  /*opacity: .8;*/
  font-weight: 900;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.crd-text {
  /*font-size: 1.6rem;*/
  opacity: .6;
  padding-left: 1rem;
  font-weight: 900;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
  transform: translate(-20px, -20px);
}


/* effect-2 */
.crd--effect-2 .crd-info {
  top: 50%;
  left: 50%;
  bottom: unset;
  text-align: center;
  transform: translate(-50%, -50%);
}

.crd--effect-2 .crd-heading {
  /*transform: scale(2);*/
  /*opacity: 0;*/
  transition: .5s;
  line-height: 1;
}

.crd--effect-2 .crd-text {
  padding-left: 0;
  transform: scale(1.2);
  opacity: 0;
  /*transition: .4s;*/
}

.crd--effect-2:hover .crd-heading {
  opacity: 1;
  transform: scale(1.5);
  /*transform: translate(0px, 30px);*/

}

.crd--effect-2:hover .crd-text {
  opacity: 1;
  transform: scale(1);
  /*transform: translate(0px, 30px)*/
}

.crd--effect-2:hover .crd-img {
  transform: scale(1.2);
}

.btn-secondary {
  border: 1px solid #FE7880;
  color: #FE7880;
}

.btn-secondary:hover {
  background: #FE7880;
  color: #fff;
}

.line {
  height: 1px;
  width: 100%;
  background: #D6D6D8;
  margin: 80px 0;
}

.ua .line {
  height: 1px;
  width: 100%;
  background: #e65a17;
  margin: 80px 0;
}


.grid-display {
  /*margin: 20px 0;*/
}

.grid-display [class^="col"] {
  background: #FBCED1;
  border: 1px solid #FE7880;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
}

.grid-display [class^="col"] p {
  color: #FE7880;
  font-size: 0.8rem;
}

pre {
  margin-top: 30px;
  overflow: auto;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #D8DCE6;
  padding: 24px 0;
}

code,
.tag,
.el,
.name,
.content,
.comment {
  font-family: monospace;
  font-size: 1.1rem;
  line-height: 1.2rem;
  color: #e65a17;
}

.el {
  color: #FE7880;
}

.name {
  color: #F9B42D;
}

.content {
  color: #75C050;
}

.comment {
  color: #B6CAD2;
}

header {
	position: relative;
	/*padding-top: 50px;*/
	padding-bottom: 100px;
	

}
.ua footer {
/*  background: #FE7880;
  background: #F38BD3;*/
  /*background-image: linear-gradient(transparent, transparent, #FE7880);*/
  /*background-image: linear-gradient(transparent 62%, #0f4682, #4385ce, #fcfab8, #e65a17, #e65a17, #c84d17);
  padding-bottom: 100px;
  height: 400px;*/
}

footer p {
  color: #fff;
}

/* IMAGES */

.img {
  background-size: contain;
  background-repeat: no-repeat;
}

.img-logo {
  background-image: url('img/logo-grey.svg');
  background-size: contain;
  height: 40px;
  width: 40px;
  padding-top: 50px;
  padding-bottom: 8px;
}

.img-website-mock {
  position: relative;
  background-image: url('img/web-mock.png');
  height: 0;
  padding-top: 71.8%;
  margin-top: 80px;
  z-index: 200 !important;
}

.img-classic {
  background-image: url('img/game-console-grey.svg');
  height: 96px;
  width: 96px;
}

.img-exploration {
  background-image: url('img/exploration-tree-grey.svg');
  height: 96px;
  width: 96px;
}

.img-ai {
  background-image: url('img/galaxy-view-grey.svg');
  height: 96px;
  width: 96px;
}

.ua .img-ai {
  background-image: url('img/artificial-intelligence-orange-multi.svg');
  height: 96px;
  width: 96px;
}

.img-couch {
  background-image: url('img/couch-orange.svg');
  height: 96px;
  width: 96px;
}

.img-twin {
  background-image: url('img/game-controller-orange.svg');
  height: 96px;
  width: 96px;
}

.img-hands {
  background-image: url('img/praying-hands-orange.svg');
  height: 96px;
  width: 96px;
}




.img-press {
  background-image: url('img/french-press-grey.svg');
  height: 96px;
  width: 96px;
}

.ua .img-press {
  background-image: url('img/french-press-orange.svg');
  height: 96px;
  width: 96px;
}


.img-universe-apart {
  background-image: url('img/solar-system-grey.svg');
  height: 96px;
  width: 96px;
}

@media (max-width:961px and min-width:601px )  {

.middletron,
.bottomtron {
	max-height: 350px;
	background-size: cover;
	background-attachment: unset;
	}
}

@media (max-width:600px) {
.middletron,
.bottomtron {
	max-height: 250px;
  	background-size: cover;
	background-attachment: unset;
	}
}

/*@media only screen and (min-width: 720px) {
  .jumbotron {
    height: 600px;
  }
}*/