/* C.Yuan 2019 
 * style.css
 * 
 * styling for Cuseum Digital Membership Calculator */

/**************************************/
/*********** Header styling ***********/
/**************************************/



html {
	scroll-behavior: smooth;
}

body, html {
  height: 100%;
}

.parallax {
  /* The image used */
  background-image: url('pics/branding/header-background.jpg');

  /* Full height */
  height: 520px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

 .navbar-brand a {
	padding-left: 5%;
 }

 .navbar-nav img:hover {

	opacity: 0.5;
 }

.banner {
	/*background-image: url("pics/branding/header-background.jpg");*/
	position: relative;
	color: white;

}

.logo_mob {
	width: 80px;
}

.logo_reg {
	width: 100px;
}

.title {
	text-align: center;
	animation: fadeIn 3.5s;
}

.title h1 {
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
}

.title p {
	font-family: 'Roboto', sans-serif;
}

.head_reg h1 {
	font-size: 50px;
	padding: 0% 10%;
	padding-top: 5%;
}

.head_reg p {
	font-size: 20px;
	padding: 0% 20%;
	padding-bottom: 3%;
}

.head_mob h1 {
	font-size: 30px;
	padding-top: 12%;
	padding: 1% 15%;
}

.head_mob p {
	font-size: 14px;
	padding: 1% 15%;
	padding-bottom: 12%;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.header-blurb {
	margin-top: 8%;
	margin-left:10%;
	margin-right: 10%;
	text-align: center;
}

.btn_custom_head {
	background-color: #fd4c4c;
	color: white;
	font-size: 24px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

.btn_custom_head:hover {
	background-color: #f76f6f;

}



.center {
	text-align: center;
}


/************************************************/
/*********** Calculator Input Styling ***********/
/************************************************/

.calculator {
	padding: 8% 0%;
}

.calculator h1, h3, .header-blurb h3{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #4b8d94;
}

.calculator h6, h5, p, .header-blurb p{
	font-family: 'Roboto', sans-serif;
}

.home_icon {
	padding-bottom: 10px;
	width: 50px;
}

#mem_base_input, #card_prod_input, 
#card_ship_input, #labor_input, 
#mailing_input, #churn_input, 
#mem_price_input {
	text-align: right;
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: bold;
	color: grey;
	font-family: 'Roboto', sans-serif;
}

.inputs p {
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
}

.input_col {
	padding-left: 20%;
}

/***********************************************/
/*********** Results section styling ***********/
/***********************************************/

.results {
	background-color: #f5f5f5;
	color:black;
	text-align: center;
	padding: 10px 10px;

}

.results h1 {
	font-size: 26px;
	font-weight: bold;
}

.results h3 {
	padding-bottom: 1%;
	font-size: 22px;
	color: #4b8d94;
}

.blur h3{
	filter:blur(6px);
}

.results h5 {
	padding-top: 1%;
	font-size: 16px;
}

#rev_text {
	text-align: left;
	padding: 3% 4%;
	padding-bottom: 0px;
}

#rev_lost {

	font-size: 26px;
	font-weight: bold;
	color: #4c944b;
}



.btn_custom {
	width: 100%;
	height: 100%;
	background-color: #fd4c4c;
	color: white;
	font-size: 18px;

	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

.btn_custom:hover {
	background-color: #f76f6f;
}

/*************************************/
/*********** Modal Styling ***********/
/*************************************/



.modal-content {
	font-size: 20px;
	background-color: #4b8d94;
	color: white;
	padding: 0% 10%;
	border-color: white;
}

.modal-body p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;;
	font-size: 24px;
}
.modal-footer button {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	background-color: #fd4c4c; 
	color: white;
}

.modal-footer button:hover{
   background-color: #f76f6f;
   color: white; 
}

.modal-demo-content {
	font-size: 20px;
	background-color: #f5f5f5;
	color: #4b8d94;
	padding: 0% 10%;
}

.modal-demo-body p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;;
	font-size: 24px;
}
.modal-demo-footer button {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	background-color: #fd4c4c; 
	color: white;
}

.modal-footer-demo button:hover{
   background-color: #f76f6f;
   color: white; 
}

.form_custom {
	padding: 0% 15%;
}

.btn:hover {
	box-shadow: none;
	color: white;   
}

.check_box {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 14px;
	padding: 0% 0%;
	text-align: left;
}


/******************************************/
/*********** slider Styling ***************/
/******************************************/

.slidecontainer {
	margin-left: 30%;
	margin-right: 30%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height:  5px;
  border-radius: 5px;   
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .1s;
  transition: opacity .1s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%; 
  background: #4b8d94;
  cursor: pointer;
}

 /******************************************/
 /************ footer styling **************/
 /******************************************/

 .page-footer {
  padding: 4% 0;
  background-color: black;
  color: grey;
}

.foot a {
	color: grey;
}

.foot a:hover {
	color: white;
}

.btn_custom_foot {
	background-color: #4b8d94;
	color: white;
	font-size: 24px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	border-radius: 50px;
	padding: 20px 22px;
	margin-bottom: 60px;
	margin-top: 10px;
}

.btn_custom_foot:hover {
	background-color: #7cacb2;
	color: white
}

.banner_foot {
	background-image: linear-gradient(to bottom right, #4b8d94, #0a1621);
	position: relative;
	color: white;

}

.title_foot h1{
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	text-align: center;
	padding-top: 50px;
	padding-left: 20px;
	padding-right: 20px;
}


#toast {
	visibility: hidden;
    display: none;
    max-width: 50%;
    margin: auto;
    background-color: #4b8d94;;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    position: fixed;
    z-index: 1;
    left: 0;right:0;
    top: 60px;
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
	font-weight: 800;
}

#toast #desc{
    color: #fff;
    padding: 15px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;

}

#desc p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
}

#toast.show_toast {
    visibility: visible;
    display: inline-block;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 3.5s;
    animation: fadein 0.5s, fadeout 0.5s 3.5s;
}

@-webkit-keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 60px; opacity: 1;}
}


@keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 60px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {opacity: 1;} 
    to {opacity: 0;}
}

@keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}


#toast_demo {
    visibility: hidden;
    display: none;
    max-width: 50%;
/*    height: 60px;*/
    /*margin-left: -125px;*/
    margin: auto;
    background-color: #4b8d94;;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    position: fixed;
    z-index: 1;
    left: 0;right:0;
    top: 60px;
    font-size: 17px;
/*    white-space: nowrap;*/
    font-family: 'Montserrat', sans-serif;
	font-weight: 800;

}

#toast_demo #desc_demo{
    color: #fff;
    padding: 15px;
/*    overflow: hidden;*/
/*	white-space: nowrap;*/
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;

}

#desc_demo p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
}

#toast_demo.show_toast_demo {
    visibility: visible;
    display: inline-block;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 60px; opacity: 1;}
}


@keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 60px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {opacity: 1;} 
    to {opacity: 0;}
}

@keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}


#toast_spam {
	visibility: hidden;
    display: none;
    max-width: 50%;
    margin: auto;
    background-color: #fd4c4c; 
    color: #fff;
    text-align: center;
    border-radius: 6px;
    position: fixed;
    z-index: 1;
    left: 0;right:0;
    top: 60px;
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
	font-weight: 800;
}

#toast_spam #desc_spam{
    color: #fff;
    padding: 15px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;

}

#desc_spam p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
}

#toast_spam.show_toast_spam {
    visibility: visible;
    display: inline-block;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 5.5s;
    animation: fadein 0.5s, fadeout 0.5s 5.5s;
}

@-webkit-keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 60px; opacity: 1;}
}


@keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 60px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {opacity: 1;} 
    to {opacity: 0;}
}

@keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}


 /************************************************/
 /************ screen size handling **************/
 /************************************************/

@media screen and (max-width: 700px) {

	.title h1, .title_foot h1{
		font-size: 34px;
	}

	.title p {
		font-size: 16px;
		padding-bottom: 5px;
	}

	.parallax {
		height: 400px;
	}

}

@media screen and (max-width: 800px)  {

	.input_col {
		
	}

	.btn_custom_head, .btn_custom_foot {
		font-size: 20px;
	}
}


@media screen and (max-width: 1000px) {

	/***********/
	/* Results */
	/***********/

	.results h1 {
		font-size: 24px;
	}

	#rev_text {
		font-size: 14px;
	}

	.results h3 {
		font-size: 18px;
	}

	.results h5 {
		font-size: 14px;

	}

	.btn_custom {
		font-size: 18px;
	}

	/**********/
	/* Inputs */
	/**********/

	.inputs h3 {
		font-size: 22px;
	
	}

	.inputs h6 {
		font-size: 18px;
	}

	.inputs p {
		font-size: 14px;
	}

	#mem_base_input, #card_prod_input, 
	#card_ship_input, #labor_input, 
	#mailing_input, #churn_input, 
	#mem_price_input {
		padding-top: 8px;
		padding-bottom: 8px;
		font-weight: bold;
		font-size: 14px;
	}
}

@media screen and (max-height: 600px) {

   /***********/
	/* Results */
	/***********/

	.results h1 {
		font-size: 24px;
	}

	#rev_text {
		font-size: 14px;
	}

	.results h3 {
		font-size: 18px;
	}

	.results h5 {
		font-size: 14px;

	}

	.btn_custom {
		font-size: 18px;
	}

	/**********/
	/* Inputs */
	/**********/

	.inputs h3 {
		font-size: 22px;
	
	}

	.inputs h6 {
		font-size: 18px;
	}

	.inputs p {
		font-size: 14px;
	}

	#mem_base_input, #card_prod_input, 
	#card_ship_input, #labor_input, 
	#mailing_input, #churn_input, 
	#mem_price_input {
		padding-top: 8px;
		padding-bottom: 8px;
		font-weight: bold;
		font-size: 14px;
	}
}

	.show {

		padding-top: 4%;
		padding-bottom: 2%;

		text-align: center;
		font-size: 26px;
		font-weight: bold;
		background: rgba(255,255,255,0.95);
		color: #4c944b;


		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.hide {

	}

	#mobile_results hr {
		width: 60%;
	}

	.fixed_pos {

		position: -webkit-sticky;
		position: sticky;
		bottom: 0;
		animation: fadeIn 1s;
	}