$sans: 'Abril Fatface', serif;
$serif: 'Source Sans Pro';
$sidebar: 27%;
$gutter: 3%;
$links: #496071;
$highlight: #BDE5F1;

$small: 35em;
$medium: 40em;
$large: 50em;
$xl: 55em;
$xxl: 60em;

body {
  font-family: $serif;
  color: black;
  font-size: 16px;
  line-height: 1.4;
  padding: 2em 1em;
  max-width: 55em;
  margin: auto;
  
  @media screen and (min-width: 30em) {
    padding: 2em;
  }
  @media screen and (min-width: $medium) {
    line-height: 1.5;
  }
  @media screen and (min-width: $large) {
    font-size: 18px;
  }
  
}

.gutters { 
     
     padding: 10px; 
  	 border: 20px;
     border-top: 20px;
				
}

.row {
  
  @extend .group;
  margin: 0 -.5em;
}
.column { float: left; }
@media screen and (min-width: $small) {
	.half { width: 50%; }
  .third, .thirds { width: 50%; }
  .fourth, .fourths { width: 50%; }
  .fifth, .fifths { width: 50%; }
  .sixth, .sixths { width: 50%; }
}
@media screen and (min-width: $medium) {
  .one.third, .one.thirds { width: 33.33333%; }
  .two.third, .two.thirds { width: 66.66667%; }
  .one.fourth, .one.fourths { width: 25%; }
  .three.fourth, .three.fourths { width: 75%; }
  .fifth, .fifths { width: 33.33333%; }
  .three.fifths, .four.fifths { width: 66.66667%; }
  .sixth, .sixths { width: 33.33333%; }
  .five.sixths, { width: 66.66667%; }
}
@media screen and (min-width: $xl) {
}
@media screen and (min-width: $xxl) {
  .one.fifth, .one.fifths { width: 20%; }
  .two.fifth, .two.fifths { width: 40%; }
  .three.fifth, .three.fifths { width: 60%; }
  .four.fifth, .four.fifths { width: 80%; }
  .sixth, .sixths { width: 16.66667%; }
}


a {
  color: #F58E84;
}

img {
  max-width: 100%;
}

em, cite, i {
  font-style: italic;
}


/*h1 {

  font-size: 1.75em;
  line-height: 1.2;
  
}
h2 {
  

  font-size: 1.25em;
}
h3 {
  
  font-size: 1.2em;
}
p, ul, ol {
  margin: 1.5em 0;
}
main > header {
  margin: .75em 0 1.5em;
  padding: 1.5em 0;
  text-align: center;
  h1 {
    font-family: $sans;
    color: #496071;
  }
  h2 {
    color: #B0B3B6;
    i {
      font-family: $serif;
    }
  }
  @media screen and (min-width: $medium) {
    font-size: 1.2em;
    }
}
article {
  h2 {
    color: #496071;
    margin: 1em 0 -1em;
    font-weight: bold;
  }
  p, ul, ol {
    @media screen and (min-width: $medium) {
      margin-right: $sidebar + $gutter;
      color: rgba(0,0,0,.7);
      font: $sans;
      font-size: 14pt;
      
    }
  }
  ul, ol {
    margin-left: 1.5em;
  }
  ul {
    li {
      font-family: $serif;
      list-style: square;
    }
  }
  dl {
    margin: 1.5em 0;
    dt {
      font-family: $sans;
      color: rgba(73,96,113,1); 
      font-weight: bold;
      font-size: 18pt;
    }
    dd {
      color: rgba(0,0,0,.7);
      font: $sans;
      font-size: 14pt;
      margin-bottom: .75em;
    }
  }
}

.page-header {
  border-bottom: 1px dotted #F58E84;
  text-align: center;
  .logo {
    h1 {
      font-family: $sans;
      line-height: 1;
      font-weight: regular;
      
    }
    h2 {
      color: rgba(0,0,0,.25);
      font-size: 1em;
      text-transform: uppercase;
      letter-spacing: .1em;
      word-spacing: .25em;
      text-align: center;
     
     }
    
  }
  .main-nav {
    font-family: $sans;
    font-size: 1.25em;
    margin: .5em 0;
    word-spacing: .5em;
    ul {
      margin: 0;
    }
    li {
      font-family: $serif;
      display: inline-block;
    }
    a {
      display: inline-block;
      color: rgba(0,0,0,.5);
      text-decoration: none;
      border-bottom: 2px solid rgba(0,0,0,.1);
      margin: .25em 0;
      line-height: 1.1;
    }
    .active a {
      color: inherit;
      border-bottom-color: rgba(0,0,0,.2);
    }
  }
  @media screen and (min-width: $medium) {
    text-align: left;
    padding-bottom: 1em;
    border-bottom-width: 2px;
    .logo {
      float: left;
    }
    .main-nav {
      float: right;
    }
  }
}

aside, .aside {
  @media screen and (min-width: $medium) {
    float: right;
    width: $sidebar;
  }
  font-family: $sans;
  font-size: .9em;
  margin-bottom: 1.5em;
  background: $highlight;
  header {
    background: darken($highlight, 15%);
    font-weight: bold;
  }
  ul {
    margin: 0 .75em 0 1.5em;
  }
}

/* Default styles for larger screens */
.design.card-title, .list-group-item {
  font-size: 14px; /* Adjust the font size as needed */
}

/* Media query for screens up to 800px */
@media (max-width:1200px) {
  .card-title, .list-group-item {
    font-size: 8px;
   
  }
  .card{width: 100% !important;
}
  }
@media screen (max-width: 800px);
  {
    .card-title, .list-group-item {
      font-size: 10px;
    }
.card{width: 100% !important;}
  }
}

}

.module {
  padding: .5em;
  header {
    padding: .25em .5em .5em;
    margin: -.5em -.5em .5em;
  }
}

 .two {
  padding: .5em;
  header {
    padding: .25em .5em .5em;
    margin: -.5em -.5em .5em;
  }
}
figcaption{
  background-color: #000000 !important;
  color: white !important;
}
figure {
  clear: both;
  img {
    @media screen and (min-width: $medium) {
      float: left;
      width: 100% - $sidebar - $gutter / 2;
      margin-bottom: 1.5em;
    }
  }
  figcaption {
    @media screen and (min-width: $medium) {
      float: right;
      width: $sidebar;
    }
    font-family: $serif;
    font-size: .9em;
    color: purple;
    line-height: 1.3;
  }
  &.full {
    img {
      float: none;
      width: auto;
      margin: 0;
    }
    figcaption {
      margin-top: .75em;
    }
  }
  .column & {
    margin: .5em;
    img {
      float: none;
      width: auto;
      margin: 0;
    }
    figcaption {
      float: none;
      width: auto;
      margin: 0;
    }
  }
}

.group:before,
.group:after {
    content: " ";
    display: table;
}
.group:after {
    clear: both;
}

.patelco {
  
  
  text-align: center;
  border-bottom: 2pt dotted #F58E84;
  
  img {
  padding-bottom: 5px;
  width: 25%;
  height: auto;
  }
}

.simple {
  text-align: center;
 
  padding: 10px;
  font-size: 14pt;
  background: #B0B3B6;
  
}

.simple img{ 
  
  //margin-left: 148px;
  padding-bottom: 10px;
  margin-top: 10px;
  
}

.simple figcaption {
  padding: 10px;
  border-top: 1px solid black;
  margin-bottom: -10px;
  
}

.under {
  padding-top: 20px;
  
  figure {
    margin-top: 30px;
  }
}

.wireframe {
  padding-top: 20px;
  
  figure {
    margin-top: 30px;
  }
}

.con {
  text-align: center;
  padding: 5pt;
  border: 1pt solid #B0B3B6;
  background: #B0B3B6;
  font-type: $sans;
}

.pictures {
  text-align: center;
  margin-bottom: 20px;
  font: 8pt;
}

.secondheader {
  font-size: 20pt;
  color: rgba(96,101,119,.8);
  
}

.aside1 {
  @media screen and (min-width: $medium) {
    float: right;
    width: $sidebar;
  }
  $highlight: #F58E84;
  font-family: $sans;
  font-size: .9em;
  margin-bottom: 1.5em;
  background: lighten($highlight, 10%);
  header {
    background: $highlight;
    font-weight: bold;
  }
  ul {
    
    margin: 0 .75em 0 1.5em;
  }
  
  li {
    font-famil: $serif;
  }
}



  
  


h4 {
  color: #606577;
  font-size: 14pt;
}

li {
  color: #606577;
  font-size: 12pt;
}
  
.spaceme{
 
    
  p { color: rgba(255, 255, 255, 0);
  }
  margin: 20px;
  
}

.spaceme1{
  margin:20px;
  border-top: 2pt dotted;
  border-color: #F58E84; 
    
  p { color: rgba(255, 255, 255, 0);
  }
  margin: 20px;
  
}

.quotes{
  max-width: 100%;
  font-family: $sans;
  float:right;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
  p {
    margin-right: 0;
  }
}

.button {
  text-align: center;
  margin: 0;
  margin-top: 30px;
  margin-left: 400px;
  margin-right: 400px;
  border-radius: 10px;
  background: #BDE5F1;
  font: 'Abril+Fatface';
  a {
    text-decoration: none;
    color: rgba(0,0,0,.5);
    font: 'Abril Fatface';
  }
}

.con2 {
  img {
    //border-radius: 20px;
    border: 1pt solid black;
  }
}

.final { 
  border: 5pt solid #b891f1;
  //margin-left: 148px;
  padding-bottom: 10px;
  background: #B0B3B6;
  text-align: center;
  
  figcaption {
    text-align: center;
    font-size: 12pt;
  }
  
  img {
    border: none;
    border-radius: 0px;
  }
}

.wirefr {
  text-align: center;
  padding: 10px;
  font-size: 12pt;
  background: #B0B3B6;
  background-size: cover;
	border: none;
  border-radius: 0px;

  img{ 
  background: rgba(176,179,182,.3);
  border: none;
  
  border-radius: 0px;
  //margin-left: 148px;
  padding-bottom: 10px;
  }
  


  figcaption {
  padding-bottom: 10px;
  margin-top: -10px;
  margin-bottom: -10px;
  background: rgba(176,179,182,.1);
  font-size: 12pt;
}
  }

.li {
  font-family: $serif;
}

.active {
  font-size: 18pt;
}