* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.header { padding:    5px;
          color:      white;
          text-align: center;
          background: #800000; }

.header h1 {
  font-size: 4.225em;
    color: #FFFF00;
    text-shadow:      5px 5px 10px black;
    font-family: Georgia, Garamond, 'Times New Roman', times, serif;
}

.header p {
  font-size: 22px;
    color: #FFFFEE;
    text-shadow:      2px 2px 5px maroon;
    font-family: Garamond, Georgia, 'Times New Roman', times, serif;
}

.navbar {
  overflow: hidden;
  background-color: #390706;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
    font-family: Garamond, Georgia, 'Times New Roman', times, serif;
}

.navbar a {
  float: left;
  display: block;
  color: yellow;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


.navbar a.right {
  float: right;
}

.navbar a:hover {
  color:            black;
  background-color: #C98946;
}

.navbar a.active {
  background-color: #666;
  color: white;
}

.carding {
    padding:          20px;
    margin-top:       10px;
    text-align:       left;
    background-color: #FFFFFF;
    border:           1px solid #85929E;
    box-shadow:       0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.carding h2 {
    text-align:    center;
    border-bottom: 1px dash silver;
    font-family:   Georgia, Garamond, 'Times New Roman', serif;
}

.carding h5 {
    font-size:   1.225em;
    font-family: Garamond, Georgia, 'Times New Roman', serif;
}
.carding p {
    font-family: Garamond, Georgia, 'Times New Roman', serif;
}

.section-common {
    width:            100%;
    padding:          20px;
    border:           1px solid #000;
}

.section-01 {
    background-image: url('../Images/Section01.png');
}

.section-02 {
    background-image: url('../Images/Section01.png');
}

.section-03 {
    background-image: url('../Images/Section01.png');
}

.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

.side h2 {
    font-weight:      600;
    border-bottom: 1px dash silver;
    font-family: Georgia, Garamond, 'Times New Roman', serif;
}

.side h3 {
    font-weight:      600;
    border-bottom: 1px dash silver;
    font-family: Georgia, Garamond, 'Times New Roman', serif;
}

.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}

.rowing {
    margin: 0 -10px; }

.rowing:after {
    content: "";
    display: table;
    clear: both;
}
.carding {
    padding:          20px;
    margin-top:       20px;
    text-align:       left;
    background-color: #ffffff;
    border:           1px solid #273746;
    box-shadow:       0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.para-title {
    border-bottom:    1px solid #273746; }
.coling {
    width:          33%;
    float:          left;
    padding:        0 10px;
}

.lessons {
    font-weight:     600;
    text-decoration: none;
    color:           blue;
    font-size:       1.215em; }

a.lessons:visited {
  text-decoration:   none;
    color:           blue;
}

a.lessons:hover {
    color:           red;
}

a.lessons:active {
    color:            orange;
}

.topics {
    font-weight:     600;
    text-decoration: none;
    color:           blue;
    font-size:       1.015em; }

a.topics:visited {
  text-decoration:   none;
    color:           maroon;
}

a.topics:hover {
    color:           red;
}

a.topics:active {
    color:            orange;
}







.pcenter { text-align: center; }

.lnq-lnk {
    font-weight:      600;
    margin:           4px;
    height:           60px;
    width:            100%;
    padding:          20px;
    color:            beige;
    text-align:       center;
    border-radius:    0.35em;
    background-color: #800000;
    display:          inline-block;
    font-family: Georgia, Garamond, 'Times New Roman', serif;
}

.lnq-lnk:hover {
    color:           antiquewhite;
    background-color: #943126;
    font-family: Georgia, Garamond, 'Times New Roman', serif;
}

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

.cs12 {
    width: 100%;
    padding: 20px;
    background-image: url('../images/CS12.png'); }


a.Lessons:link, a.Lessons:visited {
  background-color: #800000;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-family: Georgia, Garamond, 'Times New Roman', serif;
}

a.Lessons:hover, Lessons.a:active {
  background-color: white;
    border: 1px solid #800000;
    color: maroon;
    font-family: Georgia, Garamond, 'Times New Roman', serif;
}
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

@media screen and (max-width: 800px) {
    .coling {
        width: 100%;
        padding: 0;
        display: block;
        margin-bottom: 20px;
    }
}