/* Use the SG-Example.png located in the /Mockup folder
as a guide for what you will be building */

/*
====================================
Sets up styles for sidebar / navigation containers
====================================
*/

.sidebar-logo {
  width: 100%;
}

.sidebar-logo-mobile {
  width: 50%;
  display: none;
}

.sidebar-container {
  /* float:left; */
  background-color: #0071BC;
  height:100%;
  width: 20%;
  min-width: 200px;
  padding:2.5%;
  color: white;
  position: fixed;
  /* margin-top: -20px; */
  /* align-items: center; */

}

.section-container {
  display: block;
  width: 70%;
  padding: 2.5%;
  margin-left: auto;
}

.side-content {
  margin-top:0px;
}
nav a {
  top: 0;
  color: white;
  text-decoration: none;
  padding-top: 20px;
  display: flex;
  flex-direction: column;

  /* font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  padding: 0.5em 0.5em 0.5em 0.5em; */
}

a {
  /* color: blue;
  transition: color .25s; */
}

a:hover {
  text-decoration: underline;
  font-weight:bold;
}

.center p {
  /* text-align: center; */
}

/*
===========================
Sets up styles for logos
============================
*/
.logo-flex {
  display: flex;
}
.blue-logo {
  background-color: #ffffff;
  width: 100%;
  padding: 2.5%;
  padding-bottom: 15px;


}

.white-logo {
background-color: #0071BC;
width: 100%;
padding: 2.5%;
padding-bottom: 15px;

}

/*
===========================
Sets up styles for typography
============================
*/

/* Sets up font-face for body copy */
body {font-family: Raleway;
  margin:0;
  margin-left: auto;
  color: #171717

  /* font-family: Arial, Helvetica, sans-serif;
  color: black;
  line-height: 1.4em; */
}

/* Sets up font-face for headers */
h1 {font-size: 29px;font-family: Roboto;}
h2 {font-size: 20px;font-family: Roboto;}
h3,{font-size: 16px; font-family: Roboto;}

/* Sets up font-weights for headers */
h1 {font-size: 29px; font-weight: 700;
}

.type-styles {
  margin-top:auto;

}

.sample-paragraph {
  font-family: Raleway; font-size: 18px; color: #333333;

}

.type-faces-01 {
  /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
}

.type-faces-02 {
  /* font-family: "Open Sans", sans-serif; */
}

/*
==========================
Sets up styles for colors
===========================
*/

/* Makes a circle shape to serve a color box */
.color-flex-primary {
  display: flex;
  text-align: center;
  font-family: roboto;
}


.color-shape {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  width: 6em;
  height: 6em;
  border-radius: 15%;
  margin: 0.5em;
  border: 1px solid white;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.4); */

}

/* Makes colors */
.color-blue {
background: #0071bc;
}

.color-green {
  background: #c1ff66;
}

.color-lightgray {
  background: #b2b2b2;
}

.color-darkgray {
  background: #4c4c4c;
}

.color-mediumgray {
  background: #9B9B9B;
}

.Imagery {

}
/*
===========================
Sets up styles for button
============================
*/

.button-white button {
  height: 45px;
  width: 150px;
  border-radius: 10px;
  padding: 5px;
  margin: 20px;
  font-family: 'Helvetica';
  font-weight:400;
  font-size: 18px;

}

.button-white-normal {
  background: rgb(255,255,255);
  color: #7E7C7F;
  font-weight: 500;
}

.button-white-hover {
  background: rgb(255,255,255);
  color: #4A4A4A;
  border-width: 2px;
  border-color: #9B9B9B;
}

.button-white-pressed{
  background: rgb(255,255,255);
  color: #4A4A4A;
  border-width: 2px;
  border-color: #9b9b9b;
  box-shadow: inset -1px 2px 4px 0px rgba(0,0,0,0.30);
}

.button-green button {
  height: 45px;
  width: 150px;
  border-radius: 10px;
  padding: 5px;
  margin: 20px;
  font-family: 'Helvetica';
  font-weight:400;
  font-size: 18px;
}

.button-green-normal {
  background: #7ED321;
  color: #ffffff;
  font-weight: 500;
}

.button-green-hover {
  background: #65A81B;
  color: #ffffff;
  hover: #65A81B;
}

.button-green-pressed{
  background: #65A81B;
  color: #ffffff;
  box-shadow: inset -1px 2px 4px 0px rgba(0,0,0,0.30);
}

.button-blue button {
  height: 45px;
  width: 150px;
  border-radius: 10px;
  padding: 5px;
  margin: 20px;
  font-family: 'Helvetica';
  font-weight:400;
  font-size: 18px;
}

.button-blue-normal {
  background: #0071BC;
  color: #ffffff;
  font-weight: 500;
}

.button-blue-hover {
  background: #0386DC;
  color: #ffffff;
  hover: #65A81B;
}

.button-blue-pressed{
  background: #0386DC;
  color: #ffffff;
  box-shadow: inset -1px 2px 4px 0px rgba(0,0,0,0.30);
}

/*
==========================
Sets up styles for icons
===========================
*/

/* TO ADD FONT AWESOME ICONS GO TO THIS LINK AND COPY THE CSS LINK
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
*/

/* USPS iconography */
.usps-icons i {
  /* margin-top: 40px;
  font-size: 30px;
  color:rgb(51, 51, 102); */
}
.icons{
  display: flex;
  text-align: center;
}
.icons img {
  margin: 20px;
  width: 100px;
  height: 100px;
}

/* footer iconography */
.social-icons i {
  /* font-size: 44px;
  color:tomato; */
}

.social-icons i:hover {
  /* color: magenta; */
}
#Logo img {
  width: 100%;
}
/*
===========================
Sets up styles for images
============================ */

.imagery {
display: flex;
}

.Imagery img {
  width: 50%;
  height: 50%;
  padding: 5px;


}


@media only screen and (max-width: 950px) {

  .sidebar-logo{
    display: none;
  }
  .sidebar-logo-mobile{
    display: block;
  }
.sidebar-container {
  min-width: 100px;
  font-size: 14px;
}
.color-flex-primary{
  flex-direction: column;
  text-align: -webkit-center;
}
.button-white button{
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}
.button-green button{
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}
.button-blue button{
  display: block;
  margin: 0 auto;
  margin-top: 20px;

}
.icons {
  display: block;
  margin: 0 auto;
  margin
}
.imagery {
  display: block;
  margin-left: 0 auto;
}
  }

  @media only screen and (max-width: 450px) {

  .sidebar-logo{
      display: none;
    }
  .sidebar-logo-mobile{
      display: none;
    }
  .sidebar-container {
    height: 30px;
    width: 100%;
    margin:0;
  }
.links {
display: none;
}

.sidebar-logo-mobile {
  display: block;
  width:20%;
  margin:0;
}

.content-continer {
  margin: 20px auto;
}
/* body {
  background-color: red;
} */

.section-container {
  margin: 0 auto;
  padding-top: 40px;

  }
.Imagery {
  width: 100%;
  text-align: center;
}

.color-flex-primary{
  flex-direction: column;
  text-align: -webkit-center;
}


}
/* Copyright Trilogy Education Services © 2018. All Rights Reserved */