@import url("partner-button.css");

html * {
	line-height: normal;
	font-family: "Grubhub Sans", Arial, sans-serif;
	color: #212322;
}

.master-container {
	padding-top: 100px;
	min-height: calc(100vh - 91px);
}

.logo-header {
	padding-bottom: 25px;
}

.grubhub-logo {
	width: 220px;
	height: 100%;
}

.load-cards-row {
	padding-bottom: 50px;
}

a {
  color: #888b8d !important;
}

.reorder-paragraph {
	padding-top: 10px;
	font-size: 18px;
}

/*image divs*/
.img-text-align {
	position: relative;
	text-align: center;
	cursor: pointer;
}

/*image divs*/
.img-text-align {
	position: relative;
	text-align: center;
	cursor: pointer;
}

/*card background border*/
.qc-border {
	display: inline-block;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
}

.qc-fill {
	border: 3px solid white;
	border-radius: 10px;
	width: 198px;
	height: 130px;
}

.card-label {
    letter-spacing: 1px;
    font-size: 14px;
    padding-top: 2px;
}

/*cards for design*/
.card-front, .card-back {
	margin: auto;
	width: 402px;
}

.front-frame, .back-frame {
	border: 1px solid black;
	border-radius: 10px;
	background-position: center;
    background-size: 100% auto;
}

.card-back {
	background-image: url("../img/GrubhubBack_2A.jpg");
    position: relative;
    background-position: center;
    background-size: 100% auto;
}

/*change background*/
.change-background-go-back {
	text-align: center;
	padding-top: 10px;
	font-weight: 200;
	margin-bottom: 0;
}

#change-background-text{
	font-size: 18px;
	color: #72A0FF;
	cursor: pointer;
}

.front-input, .back-input {
	margin-top: 20px;
	margin-bottom: 4px;
}

/*Partner Design Button*/
.btn-partner-design {
  color: #fff;
  background-color: #4B4F54;
  border-color: #4B4F54;
}
.btn-partner-design:focus {
  color: #fff;
  background-color: #282a2c;
  border-color: #282a2c;
}
.btn-partner-design:hover {
  color: #fff;
  background-color: #3b4043;
  border-color: #3b4043;
}
.btn-partner-design:active {
  color: #fff;
  background-color: #282a2c;
  border-color: #282a2c;
}
.btn-partner-design:active:hover,
.btn-partner-design:active:focus {
  color: #fff;
  background-color: #282a2c;
  border-color: #282a2c;
}

#text_4{
	margin-top: 50px;
}

#text_7{
	margin-bottom: 4px;
}

.text-area-row{
	margin-top: 30px;
}

.card-design-titles {
	font-weight: 500;
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.font-choice {
	padding-top: 5px;
	font-size: 20px;
}

hr {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    border-color: black;
}

textarea {
	resize:	none;
}

.production-title-row, .design-title-row {
	margin-top: 10px;
}

.company-input {
	margin-top: 5px;
	margin-bottom: 5px;
}

#billing-address-state, #shipping-address-state {
  color: #A9AEBE;
}

.different-shipping-span {
	font-size: 14px;
}

.card-back-review-row {
	padding-top: 15px;
	padding-bottom: 35px;
}

/*validation*/
input.error, select.error {
	border: 2px solid #FF0000;
}

/*Change Autofill Background To White*/
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #545454 inset !important;
    -webkit-text-fill-color: #CFD8D8 !important;
}

/*XS SCREEN*/
@media screen and (max-width: 479px){

	.back-nav-div{
		text-align:	center;
	}

	.continue-nav-div{
		text-align: center;
	}

	#display-card-front, #display-card-back{
		margin: 10px;
		width: 110px;
		height: 4em;
		font-size: 11px;
	}

}

/*MS SCREEN*/
@media screen and (min-width: 480px) and (max-width: 767px) {

	.home-header, .custom-card-header {
		padding-top: 35px;
	}

	.left-ms-card-background {
		float: right;
	}

	.right-ms-card-background {
		float: left;
	}

	.back-nav-div{
		text-align:	right;
	}

	.continue-nav-div{
		text-align: left;
	}

}

/*SM SCREEN*/
@media screen and (min-width: 768px) and (max-width: 991px) {

	.home-header, .custom-card-header {
		padding-top: 35px;
	}

	.left-sm-card-background-col {
		padding-right: 0;
	}

	.right-sm-card-background-col {
		padding-left: 0;
	}

	.back-nav-div{
		text-align:	right;
	}

	.continue-nav-div{
		text-align: left;
	}
}

/*MD SCREEN*/
@media screen and (min-width: 992px) and (max-width: 1199px) {

	.home-header, .custom-card-header {
		padding-top: 35px;
	}

	.back-nav-div{
		text-align:	right;
	}

	.continue-nav-div{
		text-align: left;
	}

	.text-color-row{
		padding-right: 2%;
	}

	.text-color-label>span{
		padding-left: 18%;
	}

}

/*LG SCREEN*/
@media screen and (min-width: 1200px){

	.home-header, .custom-card-header {
		padding-top: 35px;
	}

	.back-nav-div{
		text-align:	right;
	}

	.continue-nav-div{
		text-align: left;
	}

	.left-sm-card-background-col {
		padding-right: 0;
	}

	.right-sm-card-background-col {
		padding-left: 0;
	}

	.left-tri-card-background {
		float: right;
	}

	.right-tri-card-background {
		float: left;
	}
}

/*Font & Text Adjustments*/
.btn-default:hover{
	background-color: white;
	border-color: #ccc;
}

.btn-default:focus{
	outline:none;
	background-color: white;
	border-color: #ccc;
}

/*Button Styling*/
.reset-text{
    background: green; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(green, darkgreen); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(green, darkgreen); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(green, darkgreen); /* For Firefox 3.6 to 15 */
    background: linear-gradient(green, darkgreen); /* Standard syntax */
    color: white;
}

.move-text{
    background: orange; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#f7b733, #fc4a1a); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#f7b733, #fc4a1a); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#f7b733, #fc4a1a); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f7b733, #fc4a1a); /* Standard syntax */
    color: white;
}

.left-justify-text, .center-text, .right-justify-text{
    background: gray; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(lightgray, gray); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(lightgray, gray); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(lightgray, gray); /* For Firefox 3.6 to 15 */
    background: linear-gradient(lightgray, gray); /* Standard syntax */
    color: white;
}

.delete-text{
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C00000, #800000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#C00000, #800000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C00000, #800000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C00000, #800000); /* Standard syntax */
    color: white;
}

.font-adjustment{
    background: blue; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#3a7bd5, #3a6073); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#3a7bd5, #3a6073); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#3a7bd5, #3a6073); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#3a7bd5, #3a6073); /* Standard syntax */
    color: white;
}

.reset-text, .move-text, .left-justify-text, .center-text, .right-justify-text, .delete-text, .font-adjustment:active{
	background-color: black !important;
	opacity: 0.8;
	border-color: #ccc;
}

.fa-undo, .fa-arrows, .fa-arrow-left, .fa-arrows-h, .fa-arrow-right, .fa-times, .glyphicon-plus, .glyphicon-minus {
	color: white;
}

/*Fonts*/
/* Anton */
#anton-font {
	font-family: 'Anton' !important;
}

/* Bentham */
#bentham-font {
	font-family: 'Bentham' !important;
}

/* EB Garamond */
#eb-garamond-font {
	font-family: 'EB Garamond' !important;
}

/* Faculty Glyphic */
#faculty-glyphic-font {
	font-family: 'Faculty Glyphic' !important;
}

/* Great Vibes */
#great-vibes-font {
	font-family: 'Great Vibes' !important;
}

/* Gupter */
#gupter-font {
	font-family: 'Gupter' !important;
}

/* Inter Bold */
#inter-bold-font {
	font-family: 'Inter Bold' !important;
}

/* Meow Script */
#meow-script-font {
	font-family: 'Meow Script' !important;
}

/* Norican */
#norican-font {
	font-family: 'Norican' !important;
}

/* Noto Serif */
#noto-serif-font {
	font-family: 'Noto Serif' !important;
}

/* Platypi */
#platypi-font {
	font-family: 'Platypi' !important;
}

/* Red Rose Bold */
#red-rose-bold-font {
	font-family: 'Red Rose Bold' !important;
}

/* Sansita */
#sansita-font {
	font-family: 'Sansita' !important;
}

/* Shadows Into Light Two */
#shadows-into-light-two-font {
	font-family: 'Shadows Into Light Two' !important;
}

/* Slabo */
#slabo-font {
	font-family: 'Slabo' !important;
}

/* Vujahday Script */
#vujahday-script-font {
	font-family: 'Vujahday Script' !important;
}

/*Colors*/
/*color boxes*/
.color-box {
	display: inline-block;
	width: 83px;
	height: 58px;
}

/*color choice border*/
.text-color-border{
	padding:3px;
	display: inline-block;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
}

/*color box divs*/
.color-box-div {
	text-align: center;
}

.text-color-border {
	cursor: pointer;
}

.text-color-label span {
	font-size: 14px;
	cursor: default;
}

/*white color box*/
#white-color-box {
	background-color: #FFFFFF;
}

/*black color box*/
#black-color-box {
	background-color: #000000;
}

/*gray color box*/
#gray-color-box {
	background-color: #989594;
}

/*red color box*/
#red-color-box {
	background-color: #DA202C;
}

/*blue color box*/
#blue-color-box {
	background-color: #314396;
}

/*green color box*/
#green-color-box {
	background-color: #3D773F;
}

/*gold color box*/
#gold-color-box {
	background-color: #D4A65B;
}

/*Nav Buttons*/
.btn-nav, .btn-display {
	margin: 10px;
}

.btn-display {
	width: 200px;
	height: 5em;
}

.display-front-div{
	text-align: right;
}

.display-back-div{
	text-align: left;
}

.design-nav-button-row {
	margin-top: 25px;
	margin-bottom: 25px;
}

.accessories-nav-row {
	margin-bottom: 25px;
}

#continue-to-checkout{
	white-space: normal;
}

#display-card-front:active{
	outline: none;
	box-shadow: none;
}

#display-card-back:active{
	outline: none;
	box-shadow: none;
}

.moveActive{
	border-color: limegreen;
	-webkit-box-shadow: inset 0 1px 1px limegreen, 0 0 8px limegreen;
	box-shadow: inset 0 1px 1px limegreen, 0 0 8px limegreen;
}

.loader-background{
    position: fixed;
    background: #ffffffb3;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center;
    display: none;
}
.loader-background div{
    margin-top: 30vh;
    margin-left: auto;
    margin-right: auto;
}

.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}