html,body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

@font-face {
  font-family: "Bariol Big";
  src: url("/type/bariol_bold-webfont.eot");
  src: local("☺"),
    url("/assets/type/bariol_bold-webfont.woff") format("woff"),
    url("/assets/type/bariol_bold-webfont.otf") format("opentype"),
    url("/assets/type/bariol_bold-webfont.svg#bariol_boldbold") format("svg");
  }
@font-face {
  font-family: "Bariol Light";
  src: url("/assets/type/bariol_light-webfont.eot");
  src: local("☺"),
    url("/assets/type/bariol_light-webfont.woff") format("woff"),
    url("/assets/type/bariol_light-webfont.otf") format("opentype"),
    url("/assets/type/bariol_light-webfont.svg#bariol_lightlight") format("svg");
  }

.h1 {
	font-family: "Bariol Light";
  font-size: 3em;
}

.h2 {
  font-family: "Bariol Light";
  font-size: 2em;
}


.bold {
	font-family: "Bariol Big";
	font-size: 300%;
	color: #af4e6a;
}

.bold-header {
  font-family: "Bariol Big";
  font-size: 300%;
  color: #FFF;
}

.info {
	color: #db7752;
}

/* Float */

.float {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.float:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}



.textfield {
	width: 100%;
	height:50px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	outline:0px;
	border: none;
	font-size: 200%;
	font-weight: 500;
	color: #f1f1f1;
	background-color: #5b4a89;
	border-color: #FFF;
	margin-right:25px;
	padding-left: 15px;
}


.subscribe {
	width: 100%;
	height: 50px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	outline:0px;
	border: none;
	font-size: 200%;
	font-weight: 500;
	color: #ffffff;
	background-color: #a1dbbd;
	border-color: #FFF;
	margin-right:25px;
	padding-left: 15px;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #31284b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #31284b;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #31284b;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #31284b;
}

/* full height 


html,body{height:100%;}

.container {
    height:100%;
}


/* full height */


#logo {
	
	height: 100%;
	background-size: cover;
	background-image: url('/images/mtgbackground.png');

}


.monsters {
	background-color: #FFF;
	color: #44724c;
}

/*
.col-xs-6 {
	padding-left: 0px;
	padding-right: 0px;
}
*/

.gameplay {
	background-color: #fff;
}

.blueprint {
	color: #FFF;
}


#monsters img {
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);

  -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

}
#monsters img:hover {
  -webkit-transform: translate3d(0, -20px, 0);
  -moz-transform: translate3d(0, -20px, 0);
  -ms-transform: translate3d(0, -20px, 0);
}

#one {
	z-index: 1;
}

#two {
	z-index: -1;
}

/*

#underline {
text-decoration: none; 
background: url(/images/underline.svg) ;
background-repeat: no-repeat;
}

*/

#twitch {
  font-size: .5em;
}


.blueprintbig {
	background-color: #141813;
  font-family: "Bariol Light";
  font-size: 3em;
  color: #F1EEDD;
}

.blueprintbig a {
  color: #F1EEDD;
  font-family: "Bariol Big";
}

.blueprintsmall {
  background-color: #141813;
  font-family: "Bariol Light";
  font-size: 3em;
  color: #F1EEDD;

}

.blueprintsmall a {
  color: #F1EEDD;
  font-family: "Bariol Big";
}

.blueprintxsmall a {
  color: #F1EEDD;
  font-family: "Bariol Big";
}

.blueprintxsmall {
  background-color: #141813;
  font-family: "Bariol Light";
  font-size: 2em;
  color: #F1EEDD;
}

#blueprints {

height: 370px;

}

#blueprints1 {

height: 370px;

}

#blueprints2 {

height: 370px;

}

.media-flex {
    position: relative;
    height: 0px;
}

.media-flex .gfyitem > div,
.media-flex .gfyitem .gfyPreLoadCanvas,
.media-flex .gfyitem .gfyVid,
.media-flex .gfyitem  .gfyGif {
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
}


.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
 
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
 
.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}

#woodrow {
	background-image: url(/images/woodrowBackground-1.svg);
	background-position: 50% 00%;
	background-repeat: no-repeat;
/*	background-attachment: fixed;*/
	

}

#woodrowmobile {
  background-image: url(/images/woodrowBackground-1.svg);
  background-position: 50% 00%;
  background-repeat: no-repeat;
}


.footer {
  background-color: #141813;
  color: #F1EEDD;
  font-family: "Bariol Big";
  font-size: 1.5em;
}

#rotate {
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name: rotate;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;

}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(360deg);}
  to {  -webkit-transform:rotate(0deg);}
}

@-moz-keyframes rotate {
  from {-moz-transform:rotate(360deg);}
  to {  -moz-transform:rotate(0deg);}
}