html,
body {height: 100%;margin: 0;padding: 0;box-sizing: border-box;}
.wrapper {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
  position: relative;
/*  height: 100%;
  min-height: 100%; */
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}
.header {
	display: flex;
/*	  height: 50px; */
	border: solid 1px #000;
	padding: 0px;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	align-items: center;
  background: black;
}
/*---------------------------------*/
.header2 {
  display: block;
  color: white;
/*  flex-shrink: 0; */
  font-size: 0.8em;
  font-weight: bold;
  font-weight: 700;
  line-height: 1.2;
  align-items: center;
  padding: 10px 0px;
  text-align: center;
}
.navigation {
	border: solid 1px #000;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  
  list-style: none;
  margin: 0; 
  background: blue;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}

.navigation a:hover {
  background: #1565C0;
}
/*---------------------------------*/

.main {
  text-align: left;
  background: deepskyblue;
}
.dopo-1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: solid 1px #000;
  background: lightgreen;
}

.dopo-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: solid 1px #000;
  background: azure;
}
.dopo-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: solid 1px #000;
  background: lightblue;
}
.illu {
  width: 100%;
}
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  background: lightgreen;
}
.user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.user__avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}
/* Circle Avatar Styles */

.circle {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	line-height: 0;		/* remove line-height */ 
	display: inline-block;	/* circle wraps image */
	margin: 5px;
	-webkit-border-radius: 50%;
	border-radius: 50%;	/* relative value */
	border: 3px solid white;/* border width   */
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);	
	transition: linear 0.25s;
}
.circle img {
	-webkit-border-radius: 50%;
	border-radius: 50%;	/* relative value for adjustable image size */
}
.circle:hover {
	transition: ease-out 0.5s;
	transform: scale(0.8) rotate(180deg);
}
a.circle { color: transparent; } /* IE fix: removes blue border */
/* -------------------------------------------- */
.columns {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
}

.column {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
/* flex-basis: auto; */
}

.main-column {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
  -webkit-box-flex: 3;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 3;         /* OLD - Firefox 19- */
  -webkit-flex: 3;          /* Chrome */
  -ms-flex: 3;              /* IE 10 */
  flex: 3;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.nested-column {
  flex: 2;
}
.article {
  background: white;
  color: #666;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  flex-basis: auto;
  margin: 10px;
}

.article-image {
  background: #eee;
  display: block;
  padding-top: 75%;
  position: relative;
  width: 100%;
}

.article-image img {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.article-image.is-3by2 {
  padding-top: 66.6666%;
}

.article-image.is-16by9 {
  padding-top: 56.25%;
}

.article-body {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  padding: 20px;
}

.article-title {
  color: #333;
  flex-shrink: 0;
  font-size: 1.4em;
  font-weight: bold;
  font-weight: 700;
  line-height: 1.2;
}

.article-content {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
 margin-top: 5px;
}

.article-info {
  display: flex;
  font-size: 0.85em;
  justify-content: space-between;
  margin-top: 10px;
}

.first-article {
  flex-direction: row;
}

.first-article .article-body {
  flex: 1;
}

.first-article .article-image {
  height: 300px;
  order: 2;
  padding-top: 0;
  width: 400px;
}

/* -------------------------------------------- */
/* Mobile Styles */
@media only screen and (max-width: 420px) and (orientation : portrait) {
  .navigation {
    flex-flow: column wrap;
    padding: 0;
  }
  .header2 { font-size: 0.5em; }
  .article-content { font-size: 0.8em; }
  .navigation a { 
    text-align: center; 
    padding: 5px;
    border-top: 1px solid rgba(255, 255, 255,0.3); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }
  .dopo-1 {font-size: 0.8em; }
  .dopo-2 { font-size: 0.8em; }
  .dopo-3 { font-size: 0.8em; }
  .columns,
  .column {
    display: flex;
    flex-flow: column;
  }
}
/* Tablet Styles */
@media only screen and (min-width: 421px) and (max-width: 960px) {
  .main    { flex: 2 0px; }
  .main    { order: 1; }
  .dopo-1 { order: 2; font-size: 0.8em; }
  .dopo-2 { order: 3; font-size: 0.8em; }
  .dopo-3 { order: 4; font-size: 0.8em; }
  .footer  { order: 5; }
  .navigation { justify-content: space-around; }
  .header2 { font-size: 0.5em; }
  .article-content { font-size: 0.8em; }
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
  .main    { flex: 2 0px; }
  .main    { order: 1; }
  .dopo-1 { order: 2; font-size: 0.8em; }
  .dopo-2 { order: 3; font-size: 0.8em; }
  .dopo-3 { order: 4; font-size: 0.8em; }
  .footer  { order: 5; }
  .navigation { justify-content: space-around; }
}