* {
  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/Section02.png'); }
.section-03 { background-image: url('../Images/Section03.png'); }
.section-04 { background-image: url('../Images/Section04.png'); }
.section-05 { background-image: url('../Images/Section05.png'); }
.section-06 { background-image: url('../Images/Section06.png'); }
.section-07 { background-image: url('../Images/Section07.png'); }
.section-08 { background-image: url('../Images/Section08.png'); }
.section-09 { background-image: url('../Images/Section09.png'); }
.section-10 { background-image: url('../Images/Section10.png'); }
.section-11 { background-image: url('../Images/Section11.png'); }
.section-12 { background-image: url('../Images/Section12.png'); }
.section-13 { background-image: url('../Images/Section13.png'); }
.section-14 { background-image: url('../Images/Section14.png'); }
.section-15 { background-image: url('../Images/Section15.png'); }
.section-16 { background-image: url('../Images/Section16.png'); }
.section-17 { background-image: url('../Images/Section17.png'); }
.section-18 { background-image: url('../Images/Section18.png'); }
.section-19 { background-image: url('../Images/Section19.png'); }
.section-20 { background-image: url('../Images/Section20.png'); }
.section-21 { background-image: url('../Images/Section21.png'); }
.section-22 { background-image: url('../Images/Section22.png'); }
.section-23 { background-image: url('../Images/Section23.png'); }
.section-24 { background-image: url('../Images/Section24.png'); }
.section-25 { background-image: url('../Images/Section25.png'); }
.section-26 { background-image: url('../Images/Section26.png'); }
.section-27 { background-image: url('../Images/Section27.png'); }
.section-28 { background-image: url('../Images/Section28.png'); }
.section-29 { background-image: url('../Images/Section29.png'); }
.section-30 { background-image: url('../Images/Section30.png'); }
.section-31 { background-image: url('../Images/Section31.png'); }
.section-32 { background-image: url('../Images/Section32.png'); }
.section-33 { background-image: url('../Images/Section33.png'); }
.section-34 { background-image: url('../Images/Section34.png'); }
.section-35 { background-image: url('../Images/Section35.png'); }
.section-36 { background-image: url('../Images/Section36.png'); }
.section-37 { background-image: url('../Images/Section37.png'); }
.section-38 { background-image: url('../Images/Section38.png'); }
.section-39 { background-image: url('../Images/Section39.png'); }
.section-40 { background-image: url('../Images/Section40.png'); }
.section-41 { background-image: url('../Images/Section41.png'); }
.section-42 { background-image: url('../Images/Section42.png'); }
.section-43 { background-image: url('../Images/Section43.png'); }
.section-44 { background-image: url('../Images/Section44.png'); }
.section-45 { background-image: url('../Images/Section45.png'); }
.section-46 { background-image: url('../Images/Section46.png'); }
.section-47 { background-image: url('../Images/Section47.png'); }
.section-48 { background-image: url('../Images/Section48.png'); }
.section-49 { background-image: url('../Images/Section49.png'); }
.section-50 { background-image: url('../Images/Section50.png'); }
.section-51 { background-image: url('../Images/Section51.png'); }
.section-52 { background-image: url('../Images/Section52.png'); }
.section-53 { background-image: url('../Images/Section53.png'); }
.section-54 { background-image: url('../Images/Section54.png'); }
.section-55 { background-image: url('../Images/Section55.png'); }
.section-56 { background-image: url('../Images/Section56.png'); }
.section-57 { background-image: url('../Images/Section57.png'); }
.section-58 { background-image: url('../Images/Section58.png'); }
.section-59 { background-image: url('../Images/Section59.png'); }
.section-60 { background-image: url('../Images/Section60.png'); }
.section-61 { background-image: url('../Images/Section61.png'); }
.section-62 { background-image: url('../Images/Section62.png'); }
.section-63 { background-image: url('../Images/Section63.png'); }
.section-64 { background-image: url('../Images/Section64.png'); }
.section-65 { background-image: url('../Images/Section65.png'); }
.section-66 { background-image: url('../Images/Section66.png'); }
.section-67 { background-image: url('../Images/Section67.png'); }
.section-68 { background-image: url('../Images/Section68.png'); }
.section-69 { background-image: url('../Images/Section69.png'); }
.section-70 { background-image: url('../Images/Section70.png'); }
.section-71 { background-image: url('../Images/Section71.png'); }
.section-72 { background-image: url('../Images/Section72.png'); }
.section-73 { background-image: url('../Images/Section73.png'); }
.section-74 { background-image: url('../Images/Section74.png'); }
.section-75 { background-image: url('../Images/Section75.png'); }
.section-76 { background-image: url('../Images/Section76.png'); }
.section-77 { background-image: url('../Images/Section77.png'); }
.section-78 { background-image: url('../Images/Section78.png'); }
.section-79 { background-image: url('../Images/Section79.png'); }
.section-80 { background-image: url('../Images/Section80.png'); }
.section-81 { background-image: url('../Images/Section81.png'); }
.section-82 { background-image: url('../Images/Section82.png'); }
.section-83 { background-image: url('../Images/Section83.png'); }
.section-84 { background-image: url('../Images/Section84.png'); }
.section-85 { background-image: url('../Images/Section85.png'); }
.section-86 { background-image: url('../Images/Section86.png'); }
.section-87 { background-image: url('../Images/Section87.png'); }
.section-88 { background-image: url('../Images/Section88.png'); }
.section-89 { background-image: url('../Images/Section89.png'); }
.section-90 { background-image: url('../Images/Section90.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 #0000FF; }
.coling {
    width:          33%;
    float:          left;
    padding:        0 10px;
}

.pcenter { text-align: center; }

.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;
}

.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;
}
    
    .section-common {
        height: 150px;
    }

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

.header { padding:    0; }
  .row {   
    flex-direction: column;
  }
    
    .section-common {
        height: 75px;
    }
}

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

.header { padding:    0; }
}

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

.header { padding:    0; }

.header h1 { font-size: 2.225em; }

.header p  { font-size: 14px; }
}