body {
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   background-color: #eee;
}
body a {
   color: #6577ef;
   /* font-size: 14px; */
}
body a:hover {
   text-decoration: none;
}
.border-bottom {
   border-bottom: 1px solid #dddddd !important;
}
.border-top {
   border-top: 1px solid #dddddd !important;
}
.border-bottom-nav {
   border-bottom: 2px solid #6577ef !important;
}
.top-bar {
   background-color: #262e38;
   border-bottom: 5px solid #6577ef;
   color: #ffffff;
   font-size: 14px;
   padding: 16px 0 0;
}
.top-bar a {
   color: #ffffff;
}
.top-bar a:hover {
   color: #848f9a;
}
.logo img {
   width: 95%;
   display: block;
   float: left;
}
.school-name {
   font-weight: bold;
   text-transform: uppercase;
}
/* Nav Menu */
.sticky.is-sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.navbar {
   background: #fff;
}
.sm-clean {
   background: #fff;
}
.main-nav {
   background: #fff;
   border-bottom: 3px solid #6577ef;
}
.sm-clean ul {
   background: #262e38;
}
.sm-clean ul a {
   color: #fff;
}
/* Dropdown hover background Menu */
.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted {
   background: #6577ef;
   color: #fff;
}

.carousel-caption {
   border-top: 5px solid yellow;
   background: #6577ef;
   opacity: 0.8;
   right: 0;
   left: 0;
   bottom: 0;
   text-align: left;
   padding: 30px;
}

.page-title {
   font-weight: bold;
   font-size: 14pt;
   text-transform: uppercase;
   border-bottom: 4px solid #dddddd;
   margin-bottom: 15px;
   padding-bottom: 10px;
   margin-top: 0px;
}
.page-title:after {
   border-bottom: 4px solid #6577ef;
   width: 30%;
   display: block;
   position: absolute;
   content: '';
   padding-bottom: 10px;
}

.border-gray {
   border: 2px solid #dddddd;
}
.form-border {
   border: 2px solid #dddddd;
}

.list-inline-item i {
   margin-right: 7px;
}
/* News Ticker */
.newsticker {
   overflow: hidden;
   background-color: yellow;
}
.newsticker-title {
   font-size: 14px;
   font-weight: bold;
   text-transform: uppercase;
   display: inline-block;
   padding: 15px 15px;
   color: #FFF;
   float: left;
   background-color: #262e38;
   left: 0px;
   top: 0px;
   height: 50px;
}
ul.newsticker {
   display: block;
   padding: 0;
   margin: 0;
   list-style: none;
   line-height: 1;
   position: relative;
   overflow: hidden;
   height: 50px;
   background-color: transparent;
}
ul.newsticker li {
   color: #000;
   text-transform: uppercase;
   position: absolute;
   top: -950em;
   left: 0;
   display: block;
   white-space: nowrap;
   font: 14px Helvetica, Arial, sans-serif;
   padding: 19px 15px 15px 15px;
}
ul.newsticker li span {
   color: red;
   font-weight: bold;
   font-style: italic;
}
/* News Box */
figure.news-box {
   font-family: 'Raleway', Arial, sans-serif;
   color: #fff;
   position: relative;
   float: left;
   overflow: hidden;
   margin: 10px 0;
   width: 100%;
   background-color: #ffffff;
   color: #000000;
   text-align: left;
   font-size: 16px;
   border: 2px solid #dddddd;
}
figure.news-box * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;
}
figure.news-box img {
   width: 100%;
   max-width: 100%;
   vertical-align: top;
   -webkit-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}
figure.news-box figcaption {
   padding: 25px;
   position: relative;
}
figure.news-box .date,
figure.news-box i {
   background-color: #6577ef;
   top: 25px;
   color: #fff;
   left: 25px;
   min-height: 60px;
   min-width: 60px;
   position: absolute;
   text-align: center;
}
figure.news-box .date {
   -webkit-transition-delay: 0.2s;
   transition-delay: 0.2s;
   font-size: 22px;
   font-weight: 700;
   text-transform: uppercase;
}
figure.news-box .date span {
   display: block;
   line-height: 30px;
}
figure.news-box .date .month {
   font-size: 16px;
   background-color: rgba(0, 0, 0, 0.1);
}
figure.news-box i {
   line-height: 60px;
   font-size: 30px;
   -webkit-transform: rotateY(-90deg);
   transform: rotateY(-90deg);
   -webkit-transition-delay: 0s;
   transition-delay: 0s;
}
figure.news-box h3,
figure.news-box p {
   margin: 0;
   padding: 0;
}
figure.news-box h3 {
   font-size: 16px;
   margin-bottom: 10px;
   display: inline-block;
   font-weight: 600;
   color: #333333;
   text-transform: uppercase;
}
figure.news-box p {
   text-align: justify;
   font-size: 0.8em;
   margin-bottom: 20px;
   line-height: 1.6em;
}
figure.news-box:hover img,
figure.news-box.hover img {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}
figure.news-box:hover .date,
figure.news-box.hover .date {
   -webkit-transform: rotateY(90deg);
   transform: rotateY(90deg);
   -webkit-transition-delay: 0s;
   transition-delay: 0s;
}
figure.news-box:hover i,
figure.news-box.hover i {
   -webkit-transform: rotateY(0);
   transform: rotateY(0);
   -webkit-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
figure.news-box .read-more {
   display: inline-block;
   width: auto;
   border: 2px solid #6577ef;
   padding: 0.6em 0.6em 0.4em;
   color: #000000;
   text-decoration: none;
   font-weight: 800;
   font-size: 0.8em;
   text-transform: uppercase;
}
figure.news-box .read-more:hover {
   background-color: #6577ef;
   color: #ffffff;
}

/* Kepsek */
.headmaster {
   font-family: 'Open Sans', Arial, sans-serif;
   position: relative;
   float: left;
   margin: 0 0 10px;
   width: 100%;
   color: #000000;
   text-align: center;
   line-height: 1.4em;
   font-size: 14px;
   box-shadow: none !important;
}
.headmaster * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
.headmaster .profile-image {
   display: inline-block;
   width: 80%;
   z-index: 1;
   position: relative;
   padding: 10px;
   border: 4px solid yellow;
}
.headmaster .profile-image img {
   max-width: 100%;
   vertical-align: top;
   border: 4px solid #262e38;
}
.headmaster figcaption {
   width: 100%;
   background-color: #6577ef;
   color: #ffffff;
   padding: 125px 25px 25px;
   margin-top: -100px;
   display: inline-block;
   border-bottom: 3px solid #29292b;
}
.headmaster h3,
.headmaster h4,
.headmaster p {
   margin: 0 0 5px;
}
.headmaster h3 {
   font-weight: 600;
   font-size: 1.3em;
   font-family: 'Playfair Display', Arial, sans-serif;
}
.headmaster h4 {
   color: #ffffff;
   font-weight: 400;
   letter-spacing: 2px;
}
.headmaster p {
   text-align: justify;
   font-size: 0.9em;
   letter-spacing: 1px;
}

/* News Letter */

/* Footer */
footer {
   color: #848f9a;
   font-size: 14px;
}
footer .primary-footer {
   border-top: 5px solid #6577ef;
   background-color: #262e38;
   padding: 30px 0;
}
footer .secondary-footer {
   background-color: #262e38;
   padding: 10px 0;
}
footer .copyright {
   border-top: 1px solid #111;
}
footer a {
   color: #ffffff;
}
footer a:hover {
   color: #848f9a;
}
footer .page-title {
   color: #ffffff;
}
span.fa {
   color: #ffffff;
   width: 10px;
   padding-right: 20px;
   margin-top: 6px;
   margin-bottom: 6px;
}
.social-icon {
   width: 40px;
   height: 40px;
   font-size: 15px;
   background-color: blue;
   color: #fff;
   text-align: center;
   margin-right: 10px;
   padding-top: 12px;
   border-radius: 50%;
}
.footer-social li{
   float:left;
}
.linked-in{
   background-color:#007bb6;
}
.facebook{
   background-color:#3b5998;
}
.twitter{
   background-color:#1da1f2;
}
.google{
   background-color:#f63e28;
}
.instagram {
   background-color:#f7ad0d;
}
.primary-footer nav ol.breadcrumb {
   background-color: transparent;
}
/* Tags */
.tags-content-block {
   display:block;
}
.tags a {
   border: 1px solid #848f9a;
   padding:12px 10px 8px 10px;
   color:#848f9a;
   display:inline-block;
   font-size:12px;
   text-transform:uppercase;
   line-height:11px;
   margin-bottom:5px;
   margin-right:2px;
   text-decoration:none;
}
.tags a:hover {
   border: 1px solid #6577ef;
   color: #ffffff;
}

/* Most Commented */
figure.most-commented {
   font-family: 'Raleway', Arial, sans-serif;
   position: relative;
   float: left;
   overflow: hidden;
   margin: 10px 0;
   width: 100%;
   background: #1a1a1a;
   color: #ffffff;
   text-align: left;
   border: 2px solid #dddddd;
}
figure.most-commented * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.35s ease-in-out;
   transition: all 0.35s ease-in-out;
}
figure.most-commented .image {
   position: relative;
}
figure.most-commented img {
   max-width: 100%;
   vertical-align: top;
}
figure.most-commented i {
   position: absolute;
   top: 7px;
   left: 12px;
   font-size: 32px;
   opacity: 0;
   z-index: 2;
   -webkit-transition-delay: 0;
   transition-delay: 0;
}
figure.most-commented h3 {
   font-size: 16px;
   text-transform: uppercase;
   margin: 0 0 10px;
   font-weight: 600;
}
figure.most-commented p {
   margin: 0;
}
figure.most-commented:before,
figure.most-commented:after {
   width: 120px;
   height: 120px;
   position: absolute;
   top: 0;
   left: 0;
   content: '';
   -webkit-transition: all 0.35s ease;
   transition: all 0.35s ease;
   z-index: 1;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
   background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
   -webkit-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
figure.most-commented:before {
   background-color: #20638f;
   -webkit-transform: skew(-45deg) translateX(-150%);
   transform: skew(-45deg) translateX(-150%);
   border-right: 1px solid #20638f;
}
figure.most-commented:after {
   background-color: #962d22;
   -webkit-transform: skew(-45deg) translateX(-175%);
   transform: skew(-45deg) translateX(-175%);
   border-right: 1px solid #962d22;
}
figure.most-commented figcaption {
   padding: 25px;
   background-color: #ffffff;
   color: #000000;
   position: relative;
   font-size: 0.9em;
}
figure.most-commented figcaption p {
   margin-bottom: 15px;
}
figure.most-commented figcaption:before {
   width: 100px;
   height: 100px;
   position: absolute;
   bottom: 100%;
   right: 0;
   content: '';
   background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
   background-color: #20638f;
   -webkit-transform: skew(-45deg) translateX(50%);
   transform: skew(-45deg) translateX(50%);
   border-right: 1px solid #20638f;
}
figure.most-commented .read-more {
   display: inline-block;
   width: auto;
   border: 2px solid #6577ef;
   padding: 0.6em 0.6em 0.4em;
   color: #000000;
   text-decoration: none;
   font-weight: 800;
   font-size: 0.9em;
   text-transform: uppercase;
}
figure.most-commented .read-more:hover {
   background-color: #6577ef;
   color: #ffffff;
}
figure.most-commented .date {
   position: absolute;
   right: 10px;
   bottom: 10px;
   color: #fff;
   max-height: 48px;
   max-width: 48px;
   text-align: center;
   font-size: 20px;
   font-weight: 700;
   text-transform: uppercase;
   z-index: 1;
}
figure.most-commented .date span {
   display: block;
   line-height: 24px;
}
figure.most-commented .date .month {
   font-size: 14px;
}
figure.most-commented:hover i,
figure.most-commented.hover i {
   opacity: 0.7;
   -webkit-transition-delay: 0.3s;
   transition-delay: 0.3s;
}
figure.most-commented:hover:before,
figure.most-commented.hover:before {
   -webkit-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-transform: skew(-45deg) translateX(-50%);
   transform: skew(-45deg) translateX(-50%);
}
figure.most-commented:hover:after,
figure.most-commented.hover:after {
   -webkit-transition-delay: 0.1s;
   transition-delay: 0.1s;
   -webkit-transform: skew(-45deg) translateX(-75%);
   transform: skew(-45deg) translateX(-75%);
}

/* Button Gray */
.btn-outline-purple {
   color: #343a40;
   background-color: #fff;
   background-image: none;
   border:2px solid #6577ef;
}

.btn-outline-purple:hover {
   color: #fff;
   background-color: #6577ef;
   border-color: #6577ef;
}

.btn-outline-purple:focus, .btn-outline-purple.focus {
   box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.btn-outline-purple.disabled, .btn-outline-purple:disabled {
   color: #343a40;
   background-color: transparent;
}

.btn-outline-purple:not(:disabled):not(.disabled):active, .btn-outline-purple:not(:disabled):not(.disabled).active,
.show > .btn-outline-purple.dropdown-toggle {
   color: #fff;
   background-color: #343a40;
   border-color: #343a40;
}

.btn-outline-purple:not(:disabled):not(.disabled):active:focus, .btn-outline-purple:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-purple.dropdown-toggle:focus {
   box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

/* Table */
table.table {
   background-color: #fff;
}

/* Fullscreen Search */
#search_form {
   z-index: 20;
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);

   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;

   -webkit-transform: translate(0px, -100%) scale(0, 0);
   -moz-transform: translate(0px, -100%) scale(0, 0);
   -o-transform: translate(0px, -100%) scale(0, 0);
   -ms-transform: translate(0px, -100%) scale(0, 0);
   transform: translate(0px, -100%) scale(0, 0);

   opacity: 0;
}

#search_form.open {
   -webkit-transform: translate(0px, 0px) scale(1, 1);
   -moz-transform: translate(0px, 0px) scale(1, 1);
   -o-transform: translate(0px, 0px) scale(1, 1);
   -ms-transform: translate(0px, 0px) scale(1, 1);
   transform: translate(0px, 0px) scale(1, 1);
   opacity: 1;
}

#search_form input[type="search_form"] {
   position: absolute;
   top: 50%;
   width: 100%;
   color: rgb(255, 255, 255);
   background: rgba(0, 0, 0, 0);
   font-size: 60px;
   font-weight: 300;
   text-align: center;
   border: 0px;
   margin: 0px auto;
   margin-top: -51px;
   padding-left: 30px;
   padding-right: 30px;
   outline: none;
}
#search_form .btn {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: 61px;
   margin-left: -45px;
}

/* Responsive */
/*  Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
   .top-left {
      text-align: center !important;
   }
   .top-right {
      display: none;
   }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
   .top-left {
      text-align: center !important;
   }
   .top-right {
      display: none;
   }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
   .top-left {
      text-align: center !important;
   }
   .top-right {
      display: none;
   }
}