/* Font should be placed at the top so that it will be downloaded immediately the page open*/
/* change body fpbt-size to 100% */
@font-face {font-family: "Lato-Black";src: url(../fonts/Lato-Black.ttf);font-weight: 400;}
@font-face {font-family: "Lato-BlackItalic";src: url(../fonts/Lato-BlackItalic.ttf);font-weight: 400;}
@font-face {font-family: "Lato-Bold";src: url(../fonts/Lato-Bold.ttf);font-weight: 400;}
@font-face {font-family: "Lato-BoldItalic";src: url(../fonts/Lato-BoldItalic.ttf);font-weight: 400;}
@font-face {font-family: "Lato-Italic";src: url(../fonts/Lato-Italic.ttf);font-weight: 400;}
@font-face {font-family: "Lato-Light";src: url(../fonts/Lato-Light.ttf);font-weight: 400;}
@font-face {font-family: "Lato-LightItalic";src: url(../fonts/Lato-LightItalic.ttf);font-weight: 400;}
@font-face {font-family: "Lato-Regular";src: url(../fonts/Lato-Regular.ttf);font-weight: 400;}
@font-face {font-family: "Lato-Thin";src: url(../fonts/Lato-Thin.ttf);font-weight: 400;}
@font-face {font-family: "Lato-ThinItalic";src: url(../fonts/Lato-ThinItalic.ttf);font-weight: 400;}

@font-face {font-family: "Poppins-Bold";src: url(../fonts/Poppins-Bold.ttf);font-weight: 400;}
@font-face {font-family: "Poppins-Light";src: url(../fonts/Poppins-Light.ttf);font-weight: 400;}
@font-face {font-family: "Poppins-Regular";src: url(../fonts/Poppins-Regular.ttf);font-weight: 400;}

@font-face {font-family: "Merriweather-Black"; src: url(../fonts/Merriweather-Black.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-Light"; src: url(../fonts/Merriweather-Light.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-BlackItalic"; src: url(../fonts/Merriweather-BlackItalic.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-Bold"; src: url(../fonts/Merriweather-Bold.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-BoldItalic"; src: url(../fonts/Merriweather-BoldItalic.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-Italic"; src: url(../fonts/Merriweather-Italic.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-LightItalic"; src: url(../fonts/Merriweather-LightItalic.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-LightItalic"; src: url(../fonts/Merriweather-LightItalic.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-Regular"; src: url(../fonts/Merriweather-Regular.ttf); font-weight: 400;}

@font-face {font-family: "Arvo-Regular"; src: url(../fonts/Arvo-Regular.ttf); font-weight: 400;}
@font-face {font-family: "Arvo-Bold"; src: url(../fonts/Arvo-Bold.ttf); font-weight: 400;}


@font-face {font-family: "Roboto-Regular"; src: url(../fonts/Roboto-Regular.ttf); font-weight: 400;}
@font-face {font-family: "Roboto-Bold"; src: url(../fonts/Roboto-Bold.ttf); font-weight: 400;}
@font-face {font-family: "Roboto-Light"; src: url(../fonts/Roboto-Light.ttf); font-weight: 400;}
@font-face {font-family: "Roboto-Medium"; src: url(../fonts/Roboto-Medium.ttf); font-weight: 400;}
@font-face {font-family: "Roboto-Medium"; src: url(../fonts/Roboto-Medium.ttf); font-weight: 400;}

@font-face {font-family: "OpenSans-Bold";src: url(../fonts/OpenSans-Bold.ttf);font-weight: 400;}
@font-face {font-family: "OpenSans-Bold";src: url(../fonts/OpenSans-Bold.ttf);font-weight: 400;}
@font-face {font-family: "OpenSans-ExtraBold";src: url(../fonts/OpenSans-ExtraBold.ttf);font-weight: 400;}
@font-face {font-family: "OpenSans-ExtraBoldItalic";src: url(../fonts/OpenSans-ExtraBoldItalic.ttf);font-weight: 400;}
@font-face {font-family: "OpenSans-Italic";src: url(../fonts/OpenSans-Italic.ttf);font-weight: 400;}
@font-face {font-family: "OpenSans-Medium";src: url(../fonts/OpenSans-Medium.ttf);font-weight: 400;}
@font-face {font-family: "OpenSans-MediumItalic";src: url(../fonts/OpenSans-MediumItalic.ttf);font-weight: 400;}
@font-face {font-family: "OpenSans-Regular";src: url(../fonts/OpenSans-Regular.ttf);font-weight: 400;}
@font-face {font-family: "OpenSans-SemiBold";src: url(../fonts/OpenSans-SemiBold.ttf);font-weight: 400;}
@font-face {font-family: "OpenSans-SemiBold";src: url(../fonts/OpenSans-SemiBold.ttf);font-weight: 400;}

html{
 overflow-x: hidden;
 font-size: 100%;
 line-height: 1.5;
 box-sizing:border-box
}
   
*,*:before,*:after{box-sizing:inherit}

body{
 background-color: white;
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 font-size: 100%;
 line-height: 1.5;
}

#container{
  max-width: 1240px;
  margin-left: auto; margin-right: auto;
}
main{
 font-family: OpenSans-Medium;
 margin-left: auto; margin-right: auto;
 background-color: white;
 /* background-image: url('../images/amabolearn_background.jpg'); */
 background-position: center;
 background-attachment: fixed;
 background-size: 100%;
}
h1, h2, h3{
    font-family: Lato-Bold;
}
.banner{
 color: white;
 background-color: blue;

 background-size:cover;
 background-repeat: no-repeat;
 padding: 1% 3%;
 margin-bottom: 2em;
 text-align: center;
}

.banner ul{
 list-style-type: none;
 padding: 0;
}

.banner a{
 display: block;
 width: 30%;
 padding: .8em .2em;
 margin: 0 auto;
 text-align: center;
 border: .05em solid white;
 text-transform: uppercase;
 text-decoration: none;
 color: white;
 margin-bottom: .4em;
}

.banner a:hover, .banner a:active{
 background-color: orange;
 color: white;
 transition: all 250ms ease-out;
}
.banner-intro{
 /* color: #5E2E04; */
  color: white;
  background-image: url('../images/student_blue_bg.jpg');
}
.banner-subj{
 background-color: inherit;
 background-image: none;
 text-align: left;
}

.banner-subj h2{
 color: black;
}

.banner-subj li a{
 border: none;
 margin: 0;
 background-color: blue;
 margin-bottom: 1em;
 width: 60%;
 max-width: 210px;
}

.banner-discussion{
 display: flex;
 flex-direction: column;
 justify-content: center;
 color: brown;
 background-color: yellow !important;
 /* background-image: url('../images/amabo_logo_outline_bg.jpg'); */
}

.banner-discussion a{
 color: brown;
 border-color: brown;
}
.topics-list-section ul{
 list-style-type: none;
 text-align: center;
 padding: 0;
}

.topics-list-section p{
 margin-top: .1em; 
}
.topics-list-section a{
 color: darkorange;
}
.topics-list-section a:hover{
 color: blue;
}
/* .topics-list-section{
 text-align: center;
}

.topics-list-section ul{
 list-style-type: none;
 padding: 0 10%;
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 justify-content: center;
}

.topics-list-section li{
 display: flex;
 flex-direction: column;
 align-items: center;
 padding-left: 5%; padding-right: 5%;
 margin-bottom: 1.8em;
 margin-right: 2em;
}

.topics-list-section img{
 max-width: 500px;
 margin: auto 3%;
 display: block;
} 
.topics-list-section a{
 color: orange;
 text-align: center;
 display: block;
 width: 100%;
}
.topic-list-section a:active{
 color: blue;
} */

.banner-notice-section{
 background-color: inherit;
 background-image: none;
 color: black;
}
 @media screen and (min-width: 500px){
 .topics-list-section ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
 }
 .topics-list-section li{
  padding:0.01em 16px;
  margin-top:16px;
  margin-bottom:16px;
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  max-width: 300px;
  /* width: 250px; */
 }
 .topics-list-section ul{
  padding: 0;
 }
} 
@media screen and (min-width: 700px){
  .banner-intro div{
   width: 60%;
   max-width: 750px;
   margin-left: auto;
   margin-right: -2%;
  }
}
@media screen and (min-width: 900px){
  body{
   font-size: 120%;
  }
 .banner-subj{
  text-align: center;
 }
 .banner-subj ul{
  display: flex;
  justify-content: space-between;
 }
 
 .banner-subj li{
  width: 100%; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

 }

 .banner-subj li a{
    border: none;
    margin: 0;
    color: black;
    background: none;
    margin-bottom: 1em;
    width: 60%;
    /* width: 23%; */
    background-color: ghostwhite;
   }
   .banner-subj li img{
     width: 12%;
   }
   
 .banner-discussion{
  flex-direction: row;
  align-items: center;
 }
 .topics-list-section li{
  width: 25%;
 }
 .topics-list-section img{
  width: 85%;
 }
}
/**************************************Styles For Discussion Group Site**************************************/
main.join-our-discussion-groups{
 background-image: url('../images/student_collaboration_cartoon.jpg');
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: scroll;
 height: 100vh;
 display: flex;
 align-items: center;
}
.social-banner{
 /* width: 90%; */
 height: auto;
 max-width: 400px;
 margin: auto;
 padding: .5em;
 border-radius: 1em;
 background-color: rgba(255, 127, 0, 0.8);
 color: white;
}
.social-banner ul{
 padding: 0;
}
.social-media-link{
 box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}
.social-media-link ul{
 display: flex;
 padding: 0;
 list-style-type: none;
 flex-wrap: wrap;
 justify-content: center;
}
.social-media-link a{
 display: block;
 color: white;
 width: 10em;
 text-align: center;
}