@charset "utf-8";
/* CSS Document */

body {background-color: #E1ECD1; 
	margin: 0; 
	font-family:"Raleway ExtraBold";}

@font-face {font-family: 'Raleway ExtraBold';
	src: url(Raleway-ExtraBold.ttf) format('embedded-opentype');
		font-family: 'Lato Light';
		src: url(Lato-Light.ttf;)format('embedded-opentype')}

.footer {background-color: #f1f1f1; 
	height: : 25px; 
	bottom: auto; 
	margin-top: 20px; 
	margin-bottom: 0px; 
	padding: 2em; 
	overflow: hidden;}

.link {text-decoration: none; 
	padding-left: 15%;
	bottom: auto;
	color: #D75368;}
		
.topnav {overflow: hidden; 
	position:fixed; width: 100%; 
	background-color: #f1f1f1; 
	padding: 20px 10px;}

.topnav a {float: left; 
	color: #D75368; 
	text-align: center; 
	padding: 12px; 
	text-decoration: none; 
	font-size: 18px; 
	line-height: 25px; 
	border-radius: 4px;}

.topnav a.logo {font-size: 25px; 
	font-weight: bold;
	float: left;}
			
.topnav a:hover {background-color: #ddd; 
	color: black;}

.topnav a.active {background-color: #D75368; 
	color: white;}

div.topnav-right {float: right;}
		
div.desc {padding: 15px; 
	text-align: center;}

.clearfix:after {content: ""; 
	display: table; clear: both;}
		
.profile {border-radius: 100px; 
	padding: 10px;
	float: left;
	margin-right: 10px;}

.border {border-radius: 1px; 
	width: 90%; 
	margin-top: 120px; 
	margin-right: auto; 
	margin-left: auto;}

.story {padding: 10px;  
	vertical-align: text-top;
	margin: 15px;
	font-size: 18px;
	font-family: "Lato Light";}

.after-profile {clear: left; 
	float: left;}

* {box-sizing: border-box;}
			
.topnav-right .icon {display: none;}
		
.main {max-width: 90%;
    margin: auto;}
		
hr {margin-top: 120px;}
		
h2 {font-size: 40px;
	color: #D75368; 
    word-break: break-all;}

.row {display: -ms-flexbox; /* IE 10 */
     display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0 4px;}

/* Add padding BETWEEN each column */
.row,
.row > .column {
    padding: 5px;}

.column {float: left;
    width: 25%;
	padding:10px;}
			
.show {max-width: 90%;}

.row:after {content: "";
    display: table;
    clear: both;}

.content {background-color: white;
    padding: 10px;
	font-family: "Lato Light";
	text-align: center;}

.show {display: block;}

.btn {border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;}

.btn:hover {background-color: #f1f1f1;}

.btn.active {background-color: #D75368;
  color: white;}
		
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;}

input[type=submit] {
    background-color: #D75368;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;}

input[type=submit]:hover {
    background-color: #ddd;}

.container {border-radius: 5px;
    background-color: #f2f2f2;
	padding: 20px;
	margin-top: 75px;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;}

@media only screen and (max-width: 768px) {
    .column {-ms-flex: 50%;
        flex: 50%;
		max-width: 50%;
		width: 50%}
	.link {padding-left: 2%;}}	

@media only screen and (max-width: 600px) {
	.column {-ms-flex: 100%;
        flex: 100%;
        max-width: 100%;}
	.topnav-right.active a: {display: none;}}

@media screen and (max-width: 600px) {
  .topnav-right.responsive a:not(:first-child) {display: none;}
  a:not(:first-child) {display: none;} 
  .topnav a.icon {
    float: right;
    display: block}}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;}}

@media only screen and (max-width: 768px){
 .responsive {width: 100%; 
	padding: 5px; 
	margin top: 5px;}
 .column {width: 100%;}}

@media only screen and (max-width: 500px){
 .profile {width: 100%; 
	display: none;}}	

@media only screen and (max-width: 400px){
 .responsive {width: 100%;}
 .column {width: 100%;}
 .btn {display: none;}}