.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 2;
}

@media ( max-width : 499px ){
.navbar-nav {
	width: 100%;
	text-align: right;
	font-size: .8rem;

	}
}


/* biblio */

.leftside {
  background: #C1BABA;
}
.rightside {
  background: #C1BABA;
	
}

.rightside p {
	text-align:left; 
	margin-top: .5rem;
	
}
.rightside a {
	color: #000;
	text-align:left; 
}

.rightside a:hover {
	color: #0517DC;
}

.leftside, .rightside {
  color: rgba(255,255,255,.4);
  padding: 2%;
	line-height: 1.5rem;
  text-align: left;
	color: #222121;
}

@media ( min-width : 600px ){

	.flexbox {
    width: 100%;
		max-width: 79rem;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
		color: #000;
	}
  .leftside,
  .rightside {
    -webkit-flex: 1;
    flex: 1;
    background: #C1BABA;
  }
}


/*new*/
@media ( max-width : 600px ){

	.new {
    width: 50%;
		max-width: 1rem;
		font-size: 10px;
		margin-left: 9rem;
		color: #000;
	}
 
}


/*mla*/


h7 {
  font-family: Staatliches, sans-serif;
  font-weight: normal;
  line-height: 1.2;
  color: #b06;
}

h7 {
  margin: 3.65rem 0 2rem;
  font-size: 1.2rem;
}

.telo {
  margin: 0 auto;
  padding: .1rem;
  max-width: 81%;
}

.telo p{
 font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	line-height: 1.5rem;
	font-weight: 400;
	color: #1A1919;
}

@media (min-width: 800px) {
  h7 {
    --margin-outside: -0.7em;
    --margin-inside: 0.6em;
    margin-left: var(--margin-outside);
    margin-right: var(--margin-inside);
    max-width: 6em;
    float: left;
    text-align: right;
  }
  
/* Remove or comment out nth-of-type rule to stop alternation */
  h7:nth-of-type(even) {
    margin-left: var(--margin-inside); 
    margin-right: var(--margin-outside);
    /* Left and right margins swap variables so the right-floated headings (even) mirror the left-floated ones (odd). By changing these variables in media queries below, both left- and right-floated headings will change at the same time */
    float: right;
    text-align: left;
  }
/* ================ */
  
  h7  {
    margin-top: 4.5rem;
  }
  
  
}

@media (min-width: 1000px) {
  h7 {
    --margin-outside: -2em;
    margin-top: 3.55rem;
    font-size: 1.5rem;
  }
}

@media (min-width: 1250px) {
  h7 {
    --margin-outside: 0;
    font-size: 1.5rem;
  }
}


/*proba*/


.container2 {
	width: 100%;
	max-width: 69rem;
	margin-left: auto;
	margin-right: auto;
  display: grid;
  grid-gap: 2% 1.5%;
  grid-template-rows: 18% 60% 8%;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    'm m m m m m m m m m m m'
    'a a a a c c c c c c c c'
    'f f f f f f f f f f f f';
	background-color: #dee5e1;
	
}

.aside {
  grid-area: a;
  background: #dee5e1;
	 display: flex;
    align-items: center;
    justify-content: center;
}

.content5 {
  grid-area: c;
  background: #dee5e1;
	 display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px) {
  .container2 {
    grid-template-rows: auto;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      'm m m m m m m m m m m m'
      'c c c c c c c c c c c c'
      'a a a a a a a a a a a a'
      'f f f f f f f f f f f f';
  }
}