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

@import url('https://fonts.googleapis.com/css?family=Montserrat:500,800&subset=latin-ext');


@font-face {
	font-family: Montserrat_ExtraBold;
	src: url(Montserrat_ExtraBold.otf);
}

@font-face {
	font-family: Montserrat_Medium;
	src: url(Montserrat_Medium.otf);
}

body.other {
	display: block;
	/*width: 100vw;*/
	/*height: 100vh;*/
	margin: 0px;
	background-color: #FFFFFF;
	background-image: url();
}

header {
	display: block;
	background-color: #F9F1E5;

	position: fixed;

	width: 100%;
	height: 10vh;
}

main.header {
	display: block;
	/*background-color: lightgreen;*/
	
	position: relative;
	
	width: 84%;
	max-width: 400px;
	height: 10vh;
	margin: 0 auto;
}

figure.search {
	display: block;
	/*background-color: lightblue;*/

	position: absolute;
	top: 37%;

	width: 7%;
	height: auto;
	margin: 0px;
}

a.search {
	position: relative;
	width: 100%;
	height: auto;
}

img#search {
	position: relative;
	width: 100%;
	height: auto;
}

figure.logotype {
	display: block;
	/*background-color: lightcoral;*/

	position: absolute;
	left: 23%;
	top: 35%;
	
	width: 50%;
	height: auto;
	margin: 0px;
	margin: 0 auto;
}

img#logotype {
	width: 100%;
	height: auto;
}

figure.new {
	display: block;
	/*background-color: lightblue;*/

	position: relative;
	top: 37%;
	right: 0px;
	
	width: 7%;
	height: auto;
	margin: 0px;
	left: 90%;
}

img#new {
	width: 100%;
	height: auto;
}

main.feed {
	display: block;
	/*background-color: lightgreen;*/
	
	position: relative;
	top: 15vh;
	
	width: 80%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
}

main.feed2 {
	display: block;
	/*background-color: lightgreen;*/
	
	position: relative;
	top: 20vh;
	margin-top: 20px;
	width: 80%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
}


a.post {
	display: block;
	/*background-color: lightblue;*/

	position: relative;
	
	width: 100%;
	height: 100px;
	margin-bottom: 20px;
}

section.post {
	display: block;
	/*background-color: lightblue;*/

	position: relative;
	
	width: 100%;
	height: 100%;
}

figure.profile_pic {
	display: block;
	/*background-color: lightcoral;*/
	
	position: absolute;

	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin: 0px;
}

article.post {
	display: block;
	/*background-color: lightcoral;*/
	
	position: absolute;
	right: 0px;

	width: 40%;
	min-width: 130px;
	height: 100%;
}

img#user {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0px;
	border-radius: 50%;
}

p.name {
	display: block;
	margin: 0px;
	font-family: 'Montserrat', ExtraBold;
	font-size: 10pt;
	margin-bottom: 7px;
	color: black;
}

p.text {
	display: block;
	margin: 0px;
	font-family: 'Montserrat', medium;
	font-size: 8pt;
	color: black;
}

a.location {
	display: block;
	background-color: #FE7B96;

	position: relative;
	
	width: 100%;
	height: 80px;
	margin-bottom: 20px;
	border-radius: 10px;

	text-decoration: none;
}

article.location {
	display: block;
	/*background-color: lightgreen;*/

	position: absolute;
	top: 10px;
	left: 5%;

	width: 90%;
	height: 30px;
}

p.location {
	display: block;
	width: 100%;
	font-family: 'Montserrat', medium;
	color: white;
	font-size: 8pt;
	margin: 0px;
}

figure.location {
	display: block;
	/*background-color: lightcoral;*/

	position: absolute;
	bottom: 10px;
	left: 5%;

	width: 90%;
	height: 30px;
	margin: 0px;
	border-radius: 5px;
}

img#map {
	display: block;
	height: 100%;
	width: 100%;
	margin: 0px;
	border-radius: 5px;
}

footer {
	display: block;
	background-color: #F9F1E5;

	position: fixed;
	bottom: 0vh;

	width: 100%;
	height: 10vh;
	font-size: 0pt;
}

div.divider {
	display: block;
	background-color: #7A6B5D;

	position: absolute;
	left: calc(100vw / 3);

	width: 3px;
	height: 100%;
}

div.divider2 {
	display: block;
	background-color: #7A6B5D;

	position: absolute;
	left: calc((100vw / 3) * 2);

	width: 3px;
	height: 100%;
}

section.button {
	display: inline-block;
	/*background-color: lightgreen;*/

	width: calc(100vw / 3);
	height: 100%;
}

a.button {
	display: block;
	/*background-color: lightblue;*/

	width: 100%;
	height: 100%;
}

img#messages {
	display: block;

	position: relative;
	left: 35%;
	top: 30%;
	
	width: 30%;
	height: auto;
}

img#feed {
	display: block;

	position: relative;
	left: 35%;
	top: 28%;
	
	width: 27%;
	height: auto;
}

img#profile {
	display: block;

	position: relative;
	left: 35%;
	top: 28%;
	
	width: 27%;
	height: auto;
}







section.friend {
	display: block;
	/*background-color: lightgreen;*/

	position: relative;
	
	width: 100%;
	height: 50px;
	margin-bottom: 10px;
}

figure.friend_image {
	display: inline-block;
	/*background-color: lightblue;*/

	position: absolute;
	
	width: 50px;
	height: 50px;
	margin: 0px;
}

img#friend_image {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

article.friend {
	display: inline-block;
	/*background-color: lightcoral;*/

	position: absolute;
	right: 0px;
	
	width: 75%;
	height: 50px;
}

p.friend {
	margin: 0px;
	font-family: 'Montserrat', ExtraBold;
	font-size: 9pt;
	margin-bottom: 3px;
}

p.friend_message {
	margin: 0px;
	font-family: 'Montserrat', medium;
	font-size: 9pt;
}







section.info {
	display: block;
	/*background-color: lightcoral;*/

	position: relative;

	width: 100%;
	height: 125px;
}

div.profile_photo_border {
	display: block;
	background-color: white;
	border-style: solid;
  	border-width: thin;
	position: absolute;

	width: 100px;
	height: 100%;
}

img#profile_photo {
	display: block;
	width: 100%;
	height: 100%;
}

figure.profile_photo {
	display: block;
	/*background-color: lightgreen;*/

	position: relative;

	width: 90px;
	height: 90px;
	margin: 0 auto;
	margin-top: 5px;
}

p.profile_name {
	margin: 0px;
	font-family: 'Montserrat', ExtraBold;
	font-size: 9pt;
	margin-top: 6px;
}

aside.other {
	display: block;
	background-color: lightgreen;

	position: absolute;
	right: 0px;
	
	width: 60%;
	height: 100%;
}

div.profile_set {
	position: relative;
	background-color: white;
	width: 70%;
	height: 50%;
	left: 15%

}

a.button_ {
	position: relative;
	top: 50%;
	padding: 6px;
	margin-top: 10%;
	margin: 25%;
	width: 100%;
	height: 100%;
	text-decoration: none;
	font-family: 'Montserrat', ExtraBold;
	color: white;
	background-color: lightcoral;
	border-radius: 10px;
  	align: center;
}

p.fcounter {
	margin: 0px;
	font-family: 'Montserrat', ExtraBold;
	font-size: 3vh;
  	text-align: center;
}


@media only screen and (min-width: 950px) {

}