html,
body {
	padding: 0;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
}

#main-header {
	padding:1vh;
}

#main-header section {
	color: white;
	padding: 20px 0px;
	text-align: center;
	
}

#main-header h1 {
	padding: 0;
	margin: 5px 0px;
	font-size: 2.5em;
}

#main-header h2 {
	margin: 0;
	padding: 0;
	font-size: 1.6em;
}

.shortener-form-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height:50vh;
}
.shortener-form{
	min-width: 350px;
	width:60vw;
}
.shortener-form input,
.shortener-form button {
	padding: 20px 15px;
	border: none;
	outline: none;
}
.input-wrap{
	display:flex;
	width:100%;
}
.shortener-form input {
	background: #2f2f2f;
	color:#eee;
	font-size: 1.2em;
	flex-grow: 7;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.shortener-form button {
	font-weight: bold;
	cursor: pointer;
	font-size: 1.2em;
	flex-grow:1;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background: #f5663e;
	color:white;
}
.shortener-form button:hover{
	background: #d45353;
	color:white;
}
#resp-area.active{
	font-size: 1.2em;
	text-align: center;
	background:pink;
	margin: 25px 0px;
	border-radius: 5px;
	padding:10px;
	box-sizing: border-box;
	cursor: pointer;
}
#resp-area.inactive{
	display:none;
}
.shortener-form h2{
	text-align: center;
	font-size: 1.8em;
}

.main-nav {
	display: flex;
	font-size: 1.3em;
	justify-content: end;
}

.main-nav a {
	margin: 0px 10px;
	text-decoration: none;
	color:#fff;
	text-transform: capitalize;
	font-weight: bold;
}

.view-btn-post-to-group {
    text-align: center;
    margin-top: 30px;
    display: none
}

.view-template-deal-post-to-group {
    margin-bottom: 50px;
    display: none;
    margin-top: 15px
}

.btn.btn-primary {
    border-radius: 5px;
}

.content-template {
    display: none
}