@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);


html {
  font-family: sans-serif;
  line-height: 1.15;
}

/* Main Website Layout */

  * {
    box-sizing: border-box; 
  }
  
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	min-height: 800px;
  }
  
  #main {
    display: flex;
    flex: 1;
  }
  
  #main > article {
    flex: 1;
    order: 1;
  }
  
  header {
	background-color: #BFDBAE;
    height: 105px;
  }
  
  footer {
	background-color: #BFDBAE;
    height: 180px;
	padding: 9px;
    color: #000;
  }
  
  header, footer, article, {
	position: relative;
	width: 100%;
	visibility: inherit;
  }
  
  .navbar-brand {
  	display: inline-block;
  	margin-right: 1rem;
  	font-size: 1.25rem;
  	white-space: nowrap;
  }
  
  .text-header {
  	font-size: 3rem;
  	font-weight: 600;
    color: #F00;
  }

  a {
	color: #333;
	text-decoration: none;
  }

  a:hover {
	color: #fff;
  }

  
  
 /* Page Title */ 
  

.col-full {
  position: relative;
  width: 100%;
  padding-right: 0.5rem;
  visibility: inherit;
}



.page-title {
  margin-bottom: 15px;
  padding: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #C70000;
  border-left: 5px solid #C70000;
}






/* Layout Styles */


/* Cards Editions Pages */

  * {
   box-sizing: border-box;
  }

/* General Cards Pages */

.cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: #ccc;
  margin: 9px;
  }
  
.card {
  flex: 0 0 200px;
  margin: 6px;
  padding: 3px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  background-color: #BFDBAE;
  } 
  
.card img {
  max-width: 100%;
  padding: 6px;
  }
  
.card .text {
  padding: 9px;
  color: black;
  }
  
.card .text > button {
  background-color: #C70000;
  border: 0;
  color: black;
  padding: 6px;
  width: 100%;
  }

.card:nth-child(1) {
  width: 420px;
  }
	
  
/* Cards Main Page Red */


.cardsmainred {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: #BFDBAE;
  margin: 9px;
  }
  
.cardmainred {
  flex: 0 0 280px;
  margin: 6px;
  padding: 3px;
  border: 1px solid #000;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  background-color: #F33;
  } 
  
.cardmainred img {
  max-width: 280px;
  padding: 6px;
  }
  
.cardmainred .text {
  padding: 9px;
  color: black;
  }
  
.cardmainred .text > button {
  background-color: #f33;
  border: 0;
  color: #000;
  padding: 6px;
  width: 100%;
  }

  
/* Cards Main Page Green */


.cardsmaingreen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: #f70000;
  margin: 9px;
  }
  
.cardmaingreen {
  width: 280px;
  margin: 6px;
  padding: 3px;
  border: 1px solid #000;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  background-color: #BFDBAE;
  } 
  
.cardmaingreen img {
  max-width: 100%;
  padding: 6px;
  }
  
.cardmaingreen .text {
  padding: 9px;
  color: black;
  }
  
.cardmaingreen .text > button {
  background-color: #BFDBAE;
  border: 0;
  color: black;
  padding: 6px;
  width: 100%;
  }
  
  
.cardmaingreen:nth-child(2) {
  width: 572px;
  }  


/* Collecting Cards Pages */

.cardscollecting {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: #ccc;
  margin: 9px;
  }
  
.cardcollecting {
  width: 280px;
  margin: 6px;
  padding: 3px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  background-color: #BFDBAE;
  } 
  
.cardcollecting img {
  max-width: 100%;
  padding: 6px;
  }
  
.cardcollecting .text {
  padding: 9px;
  color: black;
  }

.cardcollecting:nth-child(1) {
  width: 572px;
  }

.cardcollecting:nth-child(10) {
  width: 572px;
  }	

.cardcollecting:nth-child(17) {
  width: 572px;
  }	
	
	
	
  
/*  */