/*the Modal(background) */
		.modal-2{
			display: none;
			position: fixed; /*stay in place */
			z-index: 1; /*stay ontop of content */
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			margin: auto;
			overflow: auto; /*enabling scroll if need be */
			background-color: rgb(0,0,0); /*fallback color */
			background-color: rgba(0,0,0,0.4); /*black w/opacity */
		}

		/*the modal content */
		.modal-content-2{
			position: relative;
			background-color: #fefefe;
			margin: auto;
			margin-top: 10%;
			padding: 0;
			border: 1px solid #888;
			width: 50%; /*could be more or less, depending on the screen size */
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			animation-name: animatebottom;
			animation-duration: 0.4s;
			border-radius: 10px;
		}

		/*add Animation */
		@keyframes animatebottom{
			from{bottom: -300px; opacity: 0}
			to{bottom: 0; opacity: 1}
		}
		/*modal header */
		.modal-header{
			padding: 2px 16px;
			color: white;
			border-radius: 10px;
		}
		.modal-header .close img{
			float: right;
			background-color: hsl(0, 0%, 0%);
		}
		.modal-heading{
			color: hsl(0, 0%, 0%);
			font-size: 24px;
			font-weight: 700;
			padding-left: 20px;
			padding-top: 20px;
		}
		.modal-para{
			color: hsl(0, 0%, 48%);
			padding-left: 20px;
			margin-top: -10px;
		}
		.modal-body-2{
			margin: 20px 50px 20px 50px;
		}
		.modal-body-first{
			padding: 20px;
			border: 2px solid hsl(0, 0%, 80%);
			border-radius: 10px;
		}

		/* the close button */
		.close-2{
			color: #aaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
		}

		.close-2:hover, .close-2:focus{
			color: black;
			text-decoration: none;
			cursor: pointer;
		}
		.col-3{
			float: left;
			width: 10%;
		}
  .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: hsl(176, 50%, 47%);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
		.col-3 input:checked{
			border-radius: 50%;
			background-color: red;
		}
		
		.col-4{
			float: left;
			width: 90%;
		}
		.col-4 p{
			margin-top: 0;
			font-weight: 700;

		}
		.col-4 p:hover{
			cursor: pointer;
			color: hsl(176, 50%, 47%);
		}
		.para-1{
			margin-left: 50px;
			margin-top: -10px;
			color: hsl(0, 0%, 70%);
		}

		.row-2:after{
			clear: both;
			display: table;
			content: "";
		}
		.modal-body-second{
			margin-top: 20px;
			padding: 20px;
			border: 2px solid hsl(0, 0%, 80%);
			border-radius: 10px;
		}
		.col-6{
			float: left;
			width: 20%;
		}
		.col-6 p{
			font-weight: 700;
			margin-top: 0;
		}
		.col-6 p:hover{
			cursor: pointer;
			color: hsl(176, 50%, 47%);
		}
		.col-7{
			float: left;
			width: 30%;
		}
		.col-7 p{
			margin-left: 20px;
			margin-top: 0;
			color: hsl(176, 50%, 47%);
			font-weight: 700;
		}
		.col-8{
			float: left;
			width: 40%;
		}
		.col-8 p{
			margin-left: 70%;
			margin-top: 0;
		}
		.ex_me{
			display: none;
		}
		.effect-1{
			font-weight: 700;
			color: hsl(0, 0%, 0%);
		}
		.effect-2{
			color: hsl(0, 0%, 60%);
			font-weight: 500;
		}
		.pledge-cont{
			border-top: 1px solid hsl(0, 0%, 80%);
			display: none;
		}
		.col-9{
			float: left;
			width: 40%;
		}
		.col-9 p{
			color: hsl(0, 0%, 70%);
			padding-top: 30px;
		}
		.col-01{
			float: left;
			width: 40%;
			padding-right: 20px;
		}
		.col-01 input{
			margin-top: 25px;
			border-radius: 50px;
			padding: 15px;
			font-size: 16px;
			outline: none;
			border: 2px solid hsl(0, 0%, 80%);
			padding-left: 30px;
			width: 30%;
			font-weight: 500;
			margin-left: 30%;
		}
		.col-02{
			float: left;
			width: 10%;
		}
		.col-02 p{
			background-color: hsl(176, 50%, 47%);
			padding: 15px;
			padding-left: 30px;
			padding-right: 30px;
			margin-left: -40px;
			margin-top: 30px;
			border-radius: 30px;
			width: 100%;
			color: white;
			font-weight: 600;
			cursor: pointer;

		}
		.col-02 p:hover{
			background-color: hsl(176, 72%, 28%);
		}
		.col-6-shift{
			width: 30%;
		}
		.col-7-shift{
			margin-left: -5%;
		}
		.col-8-shift{
			margin-left: -5%;
		}
		.col-6-shift-1{
			width: 40%;
		}
		.col-6-shift-1 p{
			color: hsl(0, 0%, 78%);
		}
		.col-6-shift-1 p:hover{
			cursor: none;
			color: none;
		}
		.col-8-shift-1{
			width: 20%;
			margin-left: -5%;
		}
		.col-8-shift-1 p{
			color: hsl(0, 0%, 78%);
		}
		.mano{
			width: 40%;
		}
		.mano p{
			color: hsl(176, 50%, 77%);
		}
		.effect-11{
			color: hsl(0, 0%, 78%);
		}
		.alert{
			display: none;
			position: fixed; /*stay in place */
			z-index: 1; /*stay ontop of content */
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			margin: auto;
			overflow: auto; /*enabling scroll if need be */
			background-color: rgb(0,0,0); /*fallback color */
			background-color: rgba(0,0,0,0.4); /*black w/opacity */
		}
		.alert-content{
			background-color: #fefefe;
			margin: 15% auto; /*15% from the top and centered */
			padding: 40px;
			width: 30%; /*could be more or less, depending on the screen size */
			text-align: center;
			border-radius: 10px;

		} 
		.thank-ya{
			font-weight: 700;
			font-size: 16px;
		}
		.alert-p{
			font-size: 16px;
			color: hsl(0, 0%, 70%);
			font-weight: 500;
		}
		.alert-btn{
			width: 20%;
			background-color: hsl(176, 50%, 47%);
			color: #fefefe;
			padding: 10px;
			outline: none;
			border: none;
			border-radius: 50px;
			margin-top: 10px;
			cursor: pointer;
		}
		.alert-btn:hover{
			background-color: hsl(176, 72%, 28%);

		}
	@media screen and (max-width: 600px){
		.modal-content-2{
			width: 90%;
			margin-top: 30%;
		}
	.modal-heading{
			font-size: 18px;
			padding-left: 10px;
			padding-top: 0;
		}
	.modal-para{
			padding-left: 10px;
			margin-top: -10px;
		}
	.modal-body-2{
			margin: 20px 10px 20px 10px;
		}
	.modal-body-first{
			padding: 15px;
		}
	.col-4 p{
			margin-left: 10px;
		}
	.para-1{
			margin-left: 10px;
		}
		.col-6{
			width: 90%;
		}
		.col-6 p{
			margin-left: 10px;
		}
		.col-7{
			width: 100%;
		}
		.col-7 p{
			margin-left: 40px;
			margin-top: -10px;
		}
		.col-7-shift{
			margin-left: 10px;
		}
		.col-8{
			display: none;
		}
		.ex_me{
			display: block;
		}
	.col-9{
		width: 100%;
		}
	.col-9 p{
			text-align: center;
			padding-top: 30px;
		}
	.col-01{
			width: 50%;
			margin-left: -20px;
		}
	.col-01 input{
			width: 50%;
			margin-left: 10%;
		}
	.col-02{
			width: 30%;
		}
	.col-02 p{
			padding-left: 20px;
			padding-right: 30px;
			margin-left: 0;
			margin-top: 30px;
			border-radius: 30px;
			width: 80%;

		}
	.alert-content{
			margin: 15% auto; /*15% from the top and centered */
			padding: 20px;
			width: 80%;

		} 
	.alert-btn{
			width: 50%;
		}
	}
	

}