/* lato-regular - latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/lato-v22-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../fonts/lato-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/lato-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/lato-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/lato-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/lato-v22-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
  }
  /* lato-700 - latin */
  @font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/lato-v22-latin-700.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../fonts/lato-v22-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/lato-v22-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/lato-v22-latin-700.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/lato-v22-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/lato-v22-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
  }

  @font-face {
	font-family: 'Optima Cyr';
	src: url('../fonts/Optima.eot');
	src: local('../fonts/Optima Cyr'), local('Optima'),
		url('../fonts/Optima.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Optima.woff') format('woff'),
		url('../fonts/Optima.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* FONT OPTIMA */
@font-face {
	font-family: 'Optima';
	src: url('../fonts/AGOptimaBoldItalic.eot');
	src: local('Optima Bold Italic'), local('AGOptimaBoldItalic'),
		url('../fonts/AGOptimaBoldItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/AGOptimaBoldItalic.woff') format('woff'),
		url('../fonts/AGOptimaBoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Optima';
	src: url('../fonts/Optima-Italic.eot');
	src: local('../fonts/Optima Italic'), local('Optima-Italic'),
		url('../fonts/Optima-Italic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Optima-Italic.woff') format('woff'),
		url('../fonts/Optima-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Optima';
	src: url('../fonts/Optima-Bold.eot');
	src: local('../fonts/Optima Bold'), local('Optima-Bold'),
		url('../fonts/Optima-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Optima-Bold.woff') format('woff'),
		url('../fonts/Optima-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

  :root {
    --color-blue: #4464c1;
    --color-black: #202020;
    --ff-Lato: 'Lato', sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}

body {
	background-color: #eff3f6;
	color: #202020;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 5% 10px 5%;
	background-color: #4564c1;
}

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

a {
	color: #4564c1;
	text-decoration: none;
}

a.footer-link {
	color: #c4c9cd !important;
}

input:focus {
	outline: none;
}

ul {
	line-height: 24px;
}

.timer {
	font-weight: 700;
}


/* The container */
.container {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  cursor: pointer;	
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  width: 12px;
  background-color: white;
  box-shadow: 0 0 1px #747475;
}

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

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #fff;
}

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

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 3px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid #c8c6c6;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


@media only screen and (min-width: 1051px) {
	#header-m {
		display: none;
	}

	.feed-mobile {
		display: none;
	}

	.nav-size {
		background-color: #4564c1;
		margin: auto;
	}

	header {
		margin: auto;
		width: 1000px;
		padding-left: 0;
		padding-right: 0;
		padding-top: 2px;
		padding-bottom: 2px;
	}
	.nav-logo {
		cursor: pointer;
		color: #ffffff;
		font-weight: 400;
	}

	#brand {
		font-family: 'Optima';
		color: #ffffff; 
		float: right;
		padding-top: 0px; 
		padding-left: 10px; 
		font-size: 20px;
		font-weight: bold;
		line-height: 24px;
		color: #f83555;
	}

	#brand span {
		font-family: 'Optima';
		text-transform: uppercase;
		font-weight: 600;
		letter-spacing: 1px;
		color: #fff;
	}

	.branding {
		display: flex;
	}



	.nav-links {
		list-style: none;
		line-height: 0px;
		padding-top: 5px;
	}

	.nav-links li{
		display: inline-block;
		padding: 0px 3px;
	}

	.nav-links li img{
		width: 42px;
		height: 35px;
	}

	.nav-search {
		border: none;
		margin-left: 5px;
		color: #888a8c;
		font-size: 18px;
	}

	#searchbar {
		display: flex;
		padding: 5px;
		border-radius: 6px;
		border-style: none;
		background-color: #ffffff;
		margin: auto;
		margin-left: 50px;
		height: 30px;
	}

	#searchbar img {
		height: 22px;
		width: auto;
	}

	.feed-desktop {
		width: 1000px;
		margin: auto;
		background-color: #eff3f6;
	}

	.row {
		margin: auto;
		width: 100%;
		clear: both;
	}

	.col-left {
		margin-top: 10px;
		float: left;
		width: 39%;
	}

	.col-right {
		margin-top: 10px;
		float: right;
		width: 59%;
	}


	/*.col-right img{
		width: 100%;
		height: auto;
	}*/


	#profile-picture {
		object-fit: cover;
		border-radius: 50%;
	}

	.user-details {
		display: inline-flex;
		padding-top: 10px;
		padding-left: 15px; 
	}

	.content-title {
		padding: 5px 0 10px 15px;
		color: var(--color-black);
	}
	
	.content-title.nopadding {
		padding: 5px 0 10px 0 !important;
	}

	.user-name {
		font-size: 20px;
		padding-left: 10px;
		padding-top: 5px;
	}

	p.user {
		font-weight: bold;
		line-height: 20px;
		color: var(--color-blue);
	}

	#time {
		font-size: 14px;
		color: #747475;
	}

	.article {
		background-color: #ffffff;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgb(194, 193, 193);
		margin-bottom: 10px;
		padding-bottom: 10px;
		width: 600px;
		max-width: 100%;
	}

	#not-pic {
		width: 650px;
		max-width: 100%;
		height: 400px;
		object-fit: cover;

	}

	.post {
		display: flex;
		background-color: #ffffff;
		border-radius: 5px;
	}

	.post-left {
		display: block;
		background-color: #ffffff;
		margin-bottom: 10px;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgb(194, 193, 193);
		padding: 25px;
		width: 390px;
		max-width: 100%;
	}

	.post-left .banner {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.post-left .banner img {
		width: 240px;
		height: auto;
		object-fit: cover;
	}

	.post-left li a {
		text-decoration: none;
		color: var(--color-black);
	}

	.post-left li {
		list-style: none;
	}

	.post-left img {
		width: 340px;
		/*height: 300px;*/
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.flirtcheck {
		height: 300px;
	}

	.banner {
		/*width: 300px;
		height: 250px;*/
		object-fit: cover;
	}

	.like {
		padding-left: 30px;
	    padding-right: 20px;
	    margin-top: 10px;
	    margin-bottom: 5px;
	    color: rgb(88, 86, 86);
	    display: flex;
	    cursor: pointer;
	}

	.comment {
		padding-left: 30px;
	    padding-right: 20px;
	    margin-top: 10px;
	    margin-bottom: 5px;
	    color: rgb(88, 86, 86);
	    display: flex;
	    cursor: pointer;
	}

	.share {
		padding-left: 30px;
	    padding-right: 20px;
	    margin-top: 10px;
	    margin-bottom: 5px;
	    color: rgb(88, 86, 86);
	    display: flex;
	    cursor: pointer;
	}

	#like, #share {
	    width: auto;
	    height: 20px;
	    margin-right: 5px;
	}

	#comment {
		width: auto;
	    height:	24px;
	    margin-right: 5px;
	}

	#span {
		color: #4564c1;
	}



	.border {
	    border-bottom: 1px solid rgb(231, 229, 229);
	    display: flex;
	    width: 90%;
	    margin: auto;
	    justify-content: space-between;
	    align-items: center;
	}


	.comments {
		display: inline-flex;
		padding-top: 20px;
		padding-left: 15px;
		padding-bottom: 10px;
		width: 86%;
	}

	.chat-bubble {
		background-color: #eff3f6;
		margin-left: 10px;
		padding: 10px 10px 10px 15px;
		border-radius: 10px;
		width: 44%;

	}

	.user-name-bubble {
		font-size: 16px;
		font-weight: bold;
		padding-bottom: 3px;
	}

	.bubble-comment {
		font-size: 16px;
	}


	.comments-2{
		display: inline-flex;
		padding-top: 20px;
		padding-left: 135px;
		padding-bottom: 10px;
		width: 100%;
	}

	.more {
		text-align: center;
		margin: 20px 0 20px 0;
	}

	.more a {
		text-decoration: none;
	}

	.footer{
		background-color: #4564c1;
		width: 100%;
		height: 45px;
		float: right;
	}

	.footer-content {
		display: inline-flex;
		float: right;
		width: 20%;
		margin: auto;
		justify-content: space-between;
		padding-right: 5%; 
		padding-top: 15px;
		min-width: 350px;
	}

	.footer-content a {
		color: #ffffff;
	}


	.comment-text {
		background-color: #eff3f6;
		border: none;
		width: 70%;
		color: #888a8c;
		font-size: 17px;
	}

	.schreibekommentar {
		width: 80%;
		margin: auto;
		background-color: #eff3f6;
		padding: 10px 0px 10px 20px;
		border-radius: 10px;
	}

	.schreibekommentar a {
		color: #888a8c;
	}

	.schreibekommentar img {
		height: 20px;
		width: auto;
		float: right;
		padding-right: 15px;
	}

	.boxx {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#like-comment {
		width: 18px;
		height: 18px;
		margin-top: 2px;

	}

	.like-comment {
		position: relative;
		margin-top: 55px;
		margin-left: -12px;
		background-color: #ffffff;
		padding: 9px 11px 5px 10px;
		border-radius: 15px;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 5px rgb(194, 193, 193);
		height: 26px;
	}

	#like-count {
		padding-left: 2px;
		padding-top: 1px;
		float: right;
		font-size: 14px;
	}

	#seeall {
		float: right;
		margin-top: -10px;
	}

	#dating{
		margin-top: -10px;
	}

	#alignflex {
		display: flex;
	}
}