@import url('https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600,700,800');

:root {
	--main-color:#001940;
	--greenish:#53ad4f;
}

html, body {
	font-family: 'Raleway', sans-serif;
	height: 100%;
}

#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -115px; /* the bottom margin is the negative value of the footer's height */
}

iframe {
	width: 100%;
	height: 800px;
}

h1 {
	font-weight: 700;
	font-size: 60px;
	margin-bottom: 20px;
}

h2 {
	font-weight: 500;
	font-size: 20px;
}

p {
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 20px;
}

a, a.visited {
	color: #C850C0;
}

.clear {
	clear: both;
}

.section {
	margin: 4% 4% 50px 4%;
	text-align: center;
	/* border: solid red 1px; */
}

.box {
	float: left;
	width: 33%;
	margin-bottom: 50px;
	/* border: 10px solid #FF0 ; */
}

.box img {
	width: 90%;
	margin-bottom: 10px;
}

.box span {
	font-size: 16px;
}

#header, #footer {
	width: 92%;
	/* background-color: color(display-p3 0.115 0.259 0.396); */
	background-color: #FF3CAC;
	background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
	padding: 0px 4% 0px 4%;
	text-align: center;
	color: #FFF;
	/* border: solid red 1px; */
}

#header {
	position: top;
	bottom: 0px;
}

#footer, #push {
	height: 115px; /* .push must be the same height as .footer */
}

		 
 .btn-grad {
	background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
	margin: 10px auto;
	padding: 15px 45px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: 0 0 20px #eee;
	border-radius: 10px;
	display: block;
	width: 180px;
	text-decoration: none;
  }

  .btn-grad:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
  }