/* SCSS Mix Extendable for equal playfield amongst Full Screen Templates.  */

@import 'mixins';

.mib {
	font-size: 10px; // reset
	line-height: 1;
	padding: 0;
	margin: 0;

	.hidden {
		display: none;
	}

	.background { //background  (if any)
		width: inherit;
		height: inherit;

		background-image: url('../bg.jpg');
		//display: absolute;
		/*left: 0;
		bottom: 0;
		right: 0;
		top: 0; */
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;


	}

	.subscription, // box-sizing FTW
	.subscription *{
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		line-height: 1;
	}

	.subscription { // The main canvas
		padding: 0 15px;
		//display: table;
		width: 100%;
		position: absolute;

		z-index: 10;

		left: 50%;
		top: 50%;
		right: 0;
		bottom: 0;
		transform: translate(-50%, -50%);
	}
	.field-wrap {
  	  margin-bottom: 14px;
	}

	.after-submit {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		font-size: 75px;


	}
	.thank-you { color: #fff; }

	.subscription-inner{
		//display: table-cell;
		vertical-align: middle;
	}

	button {
	  border: 0;
	  padding: 0;
	  margin: 0;
	  width: 48%;
	  height: 3em;
	  line-height: 56px;
	  margin-right: 3%;
	  font-size: 21px;

	  display: inline-block;
	  vertical-align: middle;
	  text-decoration: none;
	  text-align: center;
	  @include transition(all, 250ms, true);

	  cursor: pointer;
	  &:last-child{
    		margin-right: 0;
		}
	}

	input {
	  @include box-shadow(0,0,0,0);
	  border-style: solid;
	  border-width: 1px;
	 // border-color: #aaaaaa;
	 // background-color: rgb(255, 255, 255);
	  width: 100%;
 	  height: 2.6em;
 	  //font-size: 21px;
 	  margin-bottom: 1em;
	  outline: none;
	  padding: 0 5%;

	  color: #000;

	}

	.input {
		text-align: left;
		font-size: 21px;
		border-color: #aaaaaa;
		background-color: #ffffff;

	}

	.input{ @at-root {
		@include placeholder{ color: #696969; }
		}
	}

	label.mib-error {  // the error box
		margin: 0 0 1em 0;
		font-size: 2em;
		color: #ff0000;
		display: block;
	}
	input.mib-error {  // the email input
		border: 1px solid #ff0000;
	}

	a{
		text-decoration: none;
	}
	.center {
		text-align: center;
	}
	.subscription-arrow{
		width: 45px;
		height: 45px;
		position: absolute;
		bottom: 20px;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: center;
		//font-size: 0;
		cursor: pointer;
		z-index: 10;

	}

	.arrow_icon {
		border-radius: 50%;
		border: 4px solid;
		width: 100%;
		height: 100%;
		display: inline-block;
		color: #000;
		border-color: #000;
	}

	.arrow_icon:before {

		padding: 0;
		margin: 0;
		line-height: 0;
		font-size: 35px;
		width: 100%;
		height: 100%;
		margin-top: 50%;
		display: inline-block;

	}

}
@media (max-width:1024px)
{
	.mib {
		.subscription
		{
			font-size: 8px;
		}

	}
}

@media (max-height:580px)
{
	.mib {
		.subscription-arrow {

		}
	}
}

//@media (