@media screen and (min-width: 2020px) {
.site-wrapper { 
	max-width: 2020px; 
	margin: 0 auto !important; 
	float: none !important; 
    background: white;
	position: relative!important
}
	
.home .site-wrapper { 
    background: rgba(0,0,0,0)!important;
}
	
body, body.home {
    background: rgba(0,0,0,0.10)!important;
}
}


h1 {
    font-size: 2.8em;
    margin: 0 0 25px 0
}

h2 {
    font-size: 2.2em;
    margin: 0 0 20px 0
}

h3 {
    font-size: 1.8em;
    margin: 0 0 20px 0
}

h4 {
    font-size: 1.6em;
    margin: 0 0 20px 0
}

h5 {
    font-size: 1.2em;
    margin: 0 0 20px 0
}

h6 {
    font-size: 1em;
    margin: 0 0 20px 0
}

h1, h2, h3, h4, h5, h6 {
    line-height: normal
}

@media screen and (max-width: 800px) {
h1 {
    font-size: 2.2em;
    margin: 0 0 25px 0
}

h2 {
    font-size: 1.8em;
    margin: 0 0 20px 0
}

h3 {
    font-size: 1.4em;
    margin: 0 0 20px 0
}

h4 {
    font-size: 1.2em;
    margin: 0 0 20px 0
}

h5 {
    font-size: 1em;
    margin: 0 0 20px 0
}

h6 {
    font-size: 0.8em;
    margin: 0 0 20px 0
}	
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

blockquote {
    margin: 1em 40px
}

dfn {
    font-style: italic
}

hr {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

mark {
    background: #ff0;
    color: #000
}

p,
pre {
    margin: 1em 0
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

q {
    quotes: none
}

q:after,
q:before {
    content: '';
    content: none
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

dl,
menu,
ol,
ul {
    margin: 1em 0
}

dd {
    margin: 0 0 0 40px
}

menu,
ol,
ul {
    padding: 0 0 0 40px
}

nav ol,
nav ul {
    list-style: none;
    list-style-image: none
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 0
}

form {
    margin: 0
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0;
    white-space: normal;
    *margin-left: -7px
}

button,
input,
select,
textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle
}

button,
input {
    line-height: normal
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
    *overflow: visible
}

button[disabled],
html input[disabled] {
    cursor: default
}

input[type=checkbox],
input[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    *height: 13px;
    *width: 13px
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

body {
    font-size: 100%
}

/*body,
html {
    width: 100%;
    height: 100%
}*/

body {
    background: #FFFFFF;
	color: #3a3a3a;
    font-family: 'Lato', sans-serif;
}

button,
input,
select,
textarea {
    font-family: 'Lato', sans-serif;
}

.video {
    max-width: 100%;
    position: relative;
    background: #000
}

.video iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 0
}

.btn {
    height: auto;
    margin-top: -1px;
    display: inline-block;
    padding: 0 1em;
    color: #0822aa;
    line-height: 2.8em;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #0822aa;
    background: transparent;
    -webkit-transition: background .4s, color .4s;
    -o-transition: background .4s, color .4s;
    transition: background .4s, color .4s
}

.btn:focus,
.btn:hover {
    color: #FFF;
    background: #0822aa
}

/* BUTTON LINK */

.arrow-link {
    display: inline-block;
}
.arrow-link a,
.arrow-link span {
    display: block;
    position: relative;
    color: #043664;
    padding: 7px 35px 9px 15px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none !important;
    -webkit-transition: color 350ms ease;
    -o-transition: color 350ms ease;
    transition: color 350ms ease;
		
	transition: background-color 0.3s ease-in-out;
	
	background-color: #98c8ed;
	border-radius: 20px
}

.arrow-link a:after,
.arrow-link span:after {
    position: absolute;
    right: 18px;
    top: 6px;
    bottom: 0;
    margin: auto;
    font-family: FontAwesome;
    content: '\f105';
    opacity: 1;
    -webkit-transition: opacity 350ms ease;
    -o-transition: opacity 350ms ease;
    transition: opacity 350ms ease;
}

.arrow-link a:hover,
.arrow-link span:hover {
    color: #fff;
	background-color: #043664;
}
.arrow-link a:hover:after,
.arrow-link span:hover:after {
    opacity: 1;
}


html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

*,
:after,
:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

p {
    color: #3a3a3a
}

p.lead {
    font-size: 120%;
}

.content-wrapper p {
	text-align: justify
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #a81815;
	font-family: "Solway", serif;
    font-weight: 500;
	letter-spacing: -1.4px
}

.main-header {
    padding: 20px 30px;
    position: relative;
	background-color: #a81815;
}

.home .main-header {
	background-color: transparent;
	    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

@media (max-width:1200px) {
.main-header {
	padding: 12px 30px;
}
}

@media (max-width:767px) {
.main-header {
	padding: 10px 20px;
}
}

@media (max-width:550px) {
.main-header {
    top: 0px;
	padding: 0 15px;
	height: 50px;
	background-color: #a81815
}
	
.home .main-header {
	background-color: #a81815
}
}

.header-wrapper {
    position: relative;
	margin: 0 auto 0;
}

.header-wrapper:after,
.header-wrapper:before {
    content: "";
    display: table
}

.header-wrapper:after {
    clear: both
}

.header-main_title {
    display: inline-block;
    text-decoration: none;
	float: left
}

.header-main_title img {
    display: block;
    width: 366px;
}

@media (max-width:1400px) {
.header-main_title img {
    width: 300px;
}	
}

@media (max-width:1150px) {
.header-main_title img {
    width: 240px;
	margin-top: 6px;
}	
}

@media (max-width:1100px) {
.header-main_title img {
    width: 200px;
	margin-top: 7px;
}	
}

@media (max-width:991px) {
.header-main_title img {
	margin-top: 0px;
}	
}

@media (max-width:550px) {
.header-main_title img {
    width: 150px;
	margin-top: 5px;
}	
}

@media (min-width:991px) {
    .header {
        top: 45px
    }
    .header-main_title {
        float: left
    }
}

.hero-header {
    overflow: hidden;
    position: relative;
    max-height: 600px;
    min-height: 330px;
	background-color: #fff;
}

@media (max-width:1530px) {
.hero-header {
    max-height: 400px;
    min-height: 290px;
}	
}

@media (max-width:750px) {
.hero-header {
    min-height: 200px;
	overflow: visible;
}	
}

@media (max-width:550px) {
.hero-header {
	margin-top: 50px
}
}

.hero-header:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 44.3037974684%
}

@media (max-width:991px) {
.hero-header:before {
    padding-top: 0
}	
}

.hero-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.hero-header_noimg {
    overflow: hidden;
    position: relative;
    max-height: 135px;
    min-height: 135px;
	background-color: #a81815;
}

@media (max-width:1400px) {
.hero-header_noimg {
 
    max-height: 115px;
    min-height: 115px;
}	
}

@media (max-width:1200px) {
.hero-header_noimg {
    max-height: 99px;
    min-height: 99px;
}	
}

@media (max-width:991px) {
.hero-header_noimg {
    max-height: 87px;
    min-height: 87px;
}	
}

@media (max-width:767px) {
.hero-header_noimg {
    max-height: 80px;
    min-height: 80px;
}	
}

@media (max-width:550px) {
.hero-header_noimg {
    max-height: 50px;
    min-height: 50px;
}	
}

@media screen and (min-width: 2000px) {
.outer-wrapper {
    max-width: 1950px;
}
	
.main-header .outer-wrapper {
    max-width: 1900px;
}
}

.main {
    position: relative;
    z-index: 2
}

@media (min-width:991px) {
    .main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
  margin: 0 auto 0;
    }
}

.page-content {
    background-color: #fff;
    padding: 25px 5%
}

@media (max-width:991px) {
.page-content {
	padding: 25px 30px;
}
}

@media (max-width:767px) {
.page-content {
	padding: 20px 20px 30px;
}
}

.content-page_title {
    font-size: 2em;
    margin: 0
}

.page-content img {
    max-width: 100%;
	height: auto;
}

.content-wrapper {
    line-height: 1.8;
    margin-bottom: 20px;
	font-size: 18px;
	font-weight: 300;
}

@media (max-width:991px) {
.content-wrapper {
    line-height: 1.8;
	font-size: 16px;
}
}

.content-wrapper a {
    color: #0822aa;
    font-weight: 700;
    text-decoration: none
}

.content-wrapper a:hover {
    color: #98c8ed
}

.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4,
.content-wrapper h5 {
    color: #0822aa
}

.breadcrumb {
    color: #98c8ed;
    text-transform: uppercase;
       font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 0.775em;
    
    line-height: 30px;
    display: inline-block;
    vertical-align: middle;	
	margin-bottom: 5px;
}

.breadcrumb a {
    text-decoration: none;
    color: #aaa;
	-webkit-transition: color 350ms ease;
    -o-transition: color 350ms ease;
    transition: color 350ms ease;
	padding: 0 4px;
}

.breadcrumb a:hover {
    color: #0822aa;
}

.breadcrumb a.bc-home {
	padding: 0;
	margin-right: 6px;
    color: #0822aa;	
}

@media (min-width:991px) {
    .page-content {
        width: calc(100% - 280px);
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
       /* margin-top: -120px;*/
        padding: 40px 40px 60px
    }
    .no-flexbox .page-content {
        float: right
    }
    .content-page_title {
        font-size: 3.375em
    }
}

@media (min-width:1301px) {
    .page-content {
        padding: 40px 50px 70px 50px
    }
}

.subnav {
    background-color: #a81815;
    padding: 25px 0 25px 5%;
    position: relative
}

.subnav-title {
    display: none;
    position: absolute;
    right: 65px;
    top: -90px;
	color: #fff;
	font-family: "Solway", serif;
	font-size: 32px;
	text-decoration: none;
}

@media (min-width:991px) {
    .subnav {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
        width: 380px;
        text-align: left;
        padding: 30px 0 30px 0;
		margin: 40px 0 30px 30px
    }
    .no-flexbox .subnav {
        float: left
    }
    .subnav-title {
        display: block
    }
}

@media (max-width:1024px) {
.subnav {
    padding: 25px 0 25px 0;
}
}

/* SINGLE NEWS / POSTS */

.single .nav-links {
	margin-top: 30px;
	display:block;
	border-top: solid 1px rgba(0,0,0,0.1);
	padding-top: 25px;
	font-size: 0.8em;
	line-height: 1em;
}

.single .nav-links:after, .single .nav-links:before {
    content: "";
    display: table;
}

.single .nav-links:after {
    clear: both;
}

.nav-previous, .nav-next {
	width: 50%;
	float: left;
}

.nav-next {
	float: right;
	text-align: right;
}

@media (max-width:1024px) {
.nav-previous, .nav-next {
	width: 100%;
	float: left;
	text-align: left;
	padding-bottom: 15px
}
}

.single h1.entry-title, .single h2.entry-title {
	font-weight: 600;
	color: #3a3a3a;
	line-height: 1.2;
	margin-top: 25px
}

/* EVENTS / CALENDAR */

.tribe-events-page-title {
font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: #3a3a3a;
    line-height: 1.2;
}

.single-event .event-link {display:none!important}

.single-event .sub-details {margin-top: 20px}

.single-event .mc-description {margin-bottom: 20px}

.single-event .details {
    padding: 0 0 24px 0!important;
}

.single-event .event-title {
    padding: 8px 0;
    font-size: 34px;
}

@media (max-width:1200px) {
.single-event .event-title {
    padding: 8px 0 0;
    font-size: 26px;
}
}

@media (max-width:550px) {
.single-event .event-title {
    font-size: 22px;
}
}

.mc-main .time-block {
    padding: 0 8px;
}

.mc_edit_links {display: none}

/* INNER HEADER IMAGES */

.hero-wrapper .post-thumbnail {
	background-color: black
}

.hero-wrapper .post-thumbnail img {
	opacity: 0.8
}

@media (max-width:990px) {
.hero-wrapper .post-thumbnail {
	background-color: white
}
	
.hero-wrapper .post-thumbnail img {
	opacity: 1
}	
}

/*.hero-wrapper .post-thumbnail:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(2,0,36,0.58783263305322133) 0%, rgba(0,0,0,0.3) 63%);
    z-index: 101;
}*/

/* FOOTER */

footer {
    clear: both;
    color: rgb(255, 255, 255);
    text-align: center;
    background: #043664;
    padding: 42.5px 0 0 0;
	position: relative;
	margin-top: 70px;
	z-index: 3;
}

.home footer {
	margin-top: 0px!important;
}

footer:after,
footer:before {
    content: "";
    display: table
}

footer:after {
    clear: both
}


footer a {
    color: #f8d609;
}

footer a:hover {
    color: #f8d609;
}

footer a:visited {
    color: #f8d609;
}

footer .footer__badge {
	width: 120px;
	height: 120px;
    background: transparent url(../images/footer-badge.svg) no-repeat center top;
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	margin: auto
}

.footer__contact {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 1.25em;
    padding: 25px 5%;
    line-height: 25px;
    text-decoration: none;
    -webkit-transition: background-color 350ms ease;
    -o-transition: background-color 350ms ease;
    transition: background-color 350ms ease;
    position: relative
}

.footer-wrapper {
    padding: 25px 5%;
    text-align: left;
}

.footer-wrapper:after,
.footer-wrapper:before {
    content: "";
    display: table
}

.footer-wrapper:after {
    clear: both
}

.footer-content {
    margin: 0;
    color: #fff;
    line-height: 30px;
    font-size: 1em
}

.footer__info p {
    margin: 0 0 10px;
	color: white
}

.footer-content a {
    text-decoration: none;
    color: #fff;
    -webkit-transition: color 350ms ease;
    -o-transition: color 350ms ease;
    transition: color 350ms ease
}

.footer-content a:hover {
    color: #fff
}

.footer-content i {
    color: white
}
.legal {
    font-size: 0.8em;	
}

    .footer-line {
        visibility: hidden;
        height: 0;
        display: block;
        margin: 0 10px;
		color: rgba(255,255,255,0.50)
    }

@media (max-width:1080px) {
.home footer {
	margin-top: 70px;
}
}

@media (max-width:950px) {
.home footer {
	margin-top: 20px;
}
}

@media (min-width:1080px) {

    .footer-wrapper {
        text-align: left;
        float: right;
        width: 100%;
        padding: 40px 40px 40px 40px
    }
    .footer-content {
        display: block;
        vertical-align: top
    }
    .footer-line {
        visibility: visible;
        height: auto;
        display: inline-block;
        margin: 0 10px
    }
}

@media (max-width:990px) {
footer .footer__badge {
	width: 90px;
	height: 90px;
	top: -30px;
}
}

@media (min-width:1301px) {

    .footer-wrapper {
        width: calc(100%);
        padding: 40px 40px
    }
}


@media screen and (max-width:767px) {
.footer__content p {
    font-size: 0.8em!important;	
}
}

.footer__info {
    padding: 25px 5%;
    text-align: left;
}

.footer__info:after,
.footer__info:before {
    content: "";
    display: table
}

.footer__info:after {
    clear: both
}

.footer__info img {
	width: 80px;
	height: auto;
	margin-right: 20px;
	margin-top: 5px;
}

@media (max-width:1200px) {
.footer__info img {
	width: 60px;
}	
}

@media (max-width:1025px) {
.footer__info img {
	width: 40px;
	margin-right: 0
}	
}

.school-title {
    font-weight: 700;
	color: #98c8ed;
    display: block;
    font-size: 150%;
	margin-bottom: 12px;
}

@media (max-width:550px) {
.school-title {
    font-size: 120%;
}	
	
.footer-content, .footer__info p, .footer-wrapper {
    line-height: 26px;
    font-size: 14px
}
	
footer {
    padding: 12.5px 0 0 0;
}
	
footer .footer__badge {
    width: 70px;
    height: 70px;
    top: -30px;
}
	
.footer-wrapper {
    padding: 20px 20px 10px 20px;
    text-align: left;
}
}

.footer__info hr {
	border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin: 25px 0 20px;
}

.footer__text {
    margin: 0;
    color: #fff;
    line-height: 30px;
    font-size: 1em
}

.footer__text a {
    text-decoration: none;
    color: #fff;
    -webkit-transition: color 350ms ease;
    -o-transition: color 350ms ease;
    transition: color 350ms ease
}

.footer__text a:hover {
    color: #fff
}

.footer__text i {
    color: yellow;
}

.footer__info .fa.sm {
	font-size: 26px!important;
	margin-top: 10px;
	margin-right: 5px
}

.legal {
    font-size: 0.8em;	
	margin-top: 35px;
}

.footer__seperator {
    display: block;
    height: 0;
    visibility: hidden;
    color: rgba(255,255,255,0.42)
}

.footer__social {
    list-style: none;
    margin: 10px 0 0;
    padding: 0
}

.footer__social li {
    display: inline-block;
    vertical-align: top;
    margin-right: 30px
}

.footer__social li:last-child {
    margin-right: 0
}

.footer__social a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 1.25em;
    -webkit-transition: color 350ms ease;
    -o-transition: color 350ms ease;
    transition: color 350ms ease
}

.footer__social a:hover {
    color: #fff
}

	.footer__social2 {
		display:block;
		margin-top: 20px;
	}
	.footer__social2 i {
    color: #fff;
    margin-right: 7px;
    display: inline-block;
    line-height: 36px;
    height: 34px;
    width: 34px;
    text-align: center;
    background-color: #fdcb54;
    color: #800000;
    border-radius: 50%;
    font-size: 1.2em;
		-webkit-transition: color 350ms ease;
    -o-transition: color 350ms ease;
    transition: color 350ms ease;
	}

.footer__social2 i:hover {
    background-color: #fff
}


@media (min-width:1025px) {

    .footer__info {
        text-align: left;
        float: left;
        /*width: 100%;*/
        padding: 40px 0px 40px 0px
    }
    .footer__text {
        display: inline-block;
        vertical-align: top
    }
    .footer__seperator {
        visibility: visible;
        height: auto;
        display: inline-block;
        margin: 0 10px
    }
    .footer__social {
        margin: 0;
        float: right
    }
    .footer__social a {
        line-height: 60px
    }
}

@media (min-width:1301px) {

    .footer__contact:after {
        right: 60px
    }
    .footer__info {
        width: calc(50%);
        padding: 40px 30px 40px 0px
    }
	
.footer__dates {
   width: calc(50%);
   padding: 40px 0px 40px 40px;
	float: right
}	
}

.footer__dates {
   padding: 40px 0px 40px 20px;
	float: left;
	width: 100%;
	line-height: 30px;
	color: white
}

.footer__dates p {
	color: white;
    margin: 0 0 0 0;
}

.footer__dates table {
    margin: 0 0 8px 0!important;
    width: 100%;
}

.footer__dates table th, .footer__dates table td {
    padding: 0 3px 0 0;
}

.footer__dates:after,
.footer__dates:before {
    content: "";
    display: table
}

.footer__dates:after {
    clear: both
}

.footer__dates .widget-area {
    float: left;
    margin-right: 2.7%;
    /* margin-top: 2.7%; */
    width: 46.85%;
    line-height: 130%;
}

.footer__dates .widget-area + .widget-area {
    margin-right: 0;
    margin-top: 0;
    width: 46.85%;
}

@media (max-width:800px) {
.footer__dates .widget-area, .footer__dates .widget-area + .widget-area {
    float: left;
    margin-right: 0;
    /* margin-top: 2.7%; */
    width: 100%;
    line-height: 130%;
}	
}

@media (max-width:600px) {
.footer__dates p, .footer__dates table {
    font-size: 0.8em;
	line-height: 1.4em
}
}

.footer__dates .widget-area td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 0 12px 0;
    line-height: 95%;
    font-size: 85%;
    color: #FFFFFF;
}

@media (min-width:1601px) {
.footer__dates {
   width: calc(45%);
}
	
    .footer__info {
        width: calc(50%);
    }		
}

@media (max-width:1600px) {
.footer__dates {
   width: calc(45%);
}
	
    .footer__info {
        width: calc(50%);
    }		
}

@media (max-width: 1300px) {
.footer__info {
    width: calc(100%);
}
}

@media (max-width:1300px) {
.footer__dates {
   width: calc(100%);
display: block;
	padding: 20px 0 20px 0;
}
	
    .footer__info {
        width: calc(100%);
		padding: 20px 0 0 0;
    }		
}


@media screen and (max-width: 1640px) and (min-width: 1301px) {
  .email-br {
    visibility: hidden;
    height: 0;
    display: block;
    margin: 0 10px;
    color: rgba(255,255,255,0);
  }
}

/* NEWS TICKER */

.ticker-container {
  position: relative;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 2rem;
  background-color: #98c8ed;
  padding-left: 100%;
  box-sizing: content-box;
}

#ticker-div {
  height: 2.6rem;
  line-height: 2.2rem;
  padding: 0;
  width: 100%;
  display: block;
  z-index: 999;
  font-size: 1em;
  color: #fff;
  font-weight: 400;
  background-color: #98c8ed;
}

.home .ticker-container, .home #ticker-div {
	background-color: #a81815;
	color: black
}

@media (max-width:1200px) {
.ticker-container {
  height: 2rem;
}

#ticker-div {
  height: 2.3rem;
  line-height: 2rem;
  font-size: 14px;
}	
}

@media (max-width:750px) {
#ticker-div {
  position: relative;
}	
}

@media (max-width:600px) {
.ticker-container {
  height: 2rem;
}

#ticker-div {
  height: 2.1rem;
  line-height: 1.8rem;
  font-size: 13px;
}	
}

/* REMOTE LEARNING TEMPLATE */

.fourboxes-wrapper {
	margin-bottom: 0px;
	margin-top: 0px;
	background: white
}

@media (min-width:1025px) {
.fourboxes-wrapper {
	margin-bottom: 15px;
	margin-top: 70px;
}
}

@media (max-width:950px) {
.fourboxes-wrapper {
	margin-bottom: 0px;
	margin-top: 20px;
}
}

@media (min-width: 769px) {
.fourboxes-wrapper {
	display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden; 	
	flex-wrap: wrap;
}
}

@media (max-width: 768px) {
.fourboxes-wrapper {
    margin-top: 0px;
}
}
 
.fourboxes-wrapper::after {
    display: block;
    clear: both;
    content: "";
}

.fourbox {
    overflow: hidden;
	color: #fff;
    font-size: 1.3em;
	line-height: 1.2em;
	text-align: center;
	text-decoration: none;
    font-family: "Solway", serif;
}

@media (max-width: 1140px) {
.fourbox {
    font-size: 1em;
	line-height: 1em;
}
}

.fourbox:nth-child(1), .fourbox:nth-child(3), .fourbox:nth-child(6), .fourbox:nth-child(8), .fourbox:nth-child(9), .fourbox:nth-child(11) {
    background-color: #a81815;
}
.fourbox:nth-child(2), .fourbox:nth-child(4), .fourbox:nth-child(5), .fourbox:nth-child(7), .fourbox:nth-child(10), .fourbox:nth-child(12) {
    background-color: #98c8ed;
}

@media (max-width: 768px) {
.fourbox:nth-child(1), .fourbox:nth-child(3), .fourbox:nth-child(5), .fourbox:nth-child(7), .fourbox:nth-child(9), .fourbox:nth-child(11) {
    background-color: #a81815;
}
.fourbox:nth-child(2), .fourbox:nth-child(4), .fourbox:nth-child(6), .fourbox:nth-child(8), .fourbox:nth-child(10), .fourbox:nth-child(12) {
    background-color: #98c8ed;
}

}

@media (min-width: 1025px) {
.fourbox {
    margin-right: 0;
    margin-top: 0;
}
}

@media (min-width: 769px) {
.fourbox {
    float: left;
    width: calc(24.3333% - 10px);
    margin-right: 15px;
    margin-bottom: 15px;
	padding: 50px 35px;
	
}
	
.fourbox:nth-child(4), .fourbox:nth-child(8) {
    margin-right: 0px;
}

.fourbox:nth-child(4) {
    clear: left!Important;
} 
}

@media (max-width: 768px) {
.fourbox {
	padding: 20px 20px;
    margin-top: 15px;
    font-size: 1.2em;
}

.fourbox:first-of-type {
    margin-top: 0px;
}
}

@media (max-width: 1050px) {
.fourbox {
	padding: 15px 15px;
}
}

@media (max-width: 991px) {
.fourbox {
	padding: 25px 15px;
}
}

.fourbox a {
	color: #fff;
	text-decoration: none;
}

.fourbox a:hover {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

/** CLASSIE.JS **/

@media (min-width:992px) {

.main-header.smaller, .header-main_title img {	
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
	
.main-header.smaller  {
    padding: 0px 20px;
	background-color: #a81815;
	border: 1px solid transparent; 
            box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
	
	    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}
	
.main-header.smaller .menu-primary-navigation-container {
		margin-top: 3px
	}
	
.main-header.smaller .header-main_title img {
    display: block;
    width: 190px;
    height: 47px;
    margin-top: 8px;
	margin-bottom: 12px;
}
	
.main-header.smaller #primarymenu a {
    display: block;
    line-height: 55px;
}
	
.main-header.smaller #primarymenu ul ul a {
    line-height: normal;
}
.main-header.smaller .contact-nav {
	display: none
}
	
.main-header.smaller #primarymenu {
    margin-top: 4px;
}
}	

@media only screen and (max-width: 1070px) and (min-width: 1101px) {
.main-header .header-main_title img {
    width: 155px;
    height: 50px;
}
}	

@media (max-width:1200px) {
.main-header.smaller {
	padding: 0 30px;
}
}

@media (max-width:991px) {
.main-header {
    position: relative;
}
	
.home .main-header {
    position: absolute;
}
}

@media (max-width:550px) {
    .home .main-header {
        position: relative;
    }
}
/** NEW - INNER PAGE HEADER **/

.top_site_main, .top_site_main-nobg {
    color: #fff;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-color: rgba(26,70,113,1);
    min-height: 400px;
}

.top_site_main-nobg {
    background-color: #0260b2;
    min-height: 120px;
}


@media (min-width: 1200px) {
.top_site_main {
    min-height: 500px;
}

.top_site_main-nobg {
    min-height: 290px;
}
}

@media (max-width: 767px) {
.top_site_main {
    min-height: 300px;
}

.top_site_main-nobg {
    min-height: 110px;
}
}

@media (max-width: 500px) {
.top_site_main {
    min-height: 220px;
}

.top_site_main-nobg {
    min-height: 70px;
}
}

@media (max-width: 380px) {
.top_site_main {
    min-height: 180px;
}
}

.top_site_main>.overlay-top-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);
}

.top_site_main .page-title-wrapper, 
.top_site_main-nobg .page-title-wrapper {
    bottom: 40px;
	left: 40px;
    position: absolute;
    z-index: 1;
}

@media (max-width: 991px) {
.top_site_main .page-title-wrapper, 
.top_site_main-nobg .page-title-wrapper {
    bottom: 30px;
	left: 30px;
}
}

@media (max-width: 767px) {
.top_site_main .page-title-wrapper, 
.top_site_main-nobg .page-title-wrapper {
    bottom: 20px;
	left: 20px;
}
}

.top_site_main .page-title-wrapper .banner-wrapper, 
.top_site_main-nobg .page-title-wrapper .banner-wrapper {
    overflow: hidden;
}

.top_site_main .page-title-wrapper h1,
.top_site_main-nobg .page-title-wrapper h1 {
    margin: 0;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.46);
    font-size: 48px;
    line-height: 1.5;
    font-weight: 700;
    position: relative;
    color: #ffffff;
}

@media (min-width: 1200px) {
.top_site_main .page-title-wrapper h1,
.top_site_main-nobg .page-title-wrapper h1 {
    font-size: 58px;
}
}

@media (max-width: 991px) {
.top_site_main .page-title-wrapper h1,
.top_site_main-nobg .page-title-wrapper h1 {
    font-size: 46px;
}
}

@media (max-width: 767px) {
.top_site_main .page-title-wrapper h1,
.top_site_main-nobg .page-title-wrapper h1 {
    font-size: 38px;
}
}

@media (max-width: 650px) {
.top_site_main .page-title-wrapper h1,
.top_site_main-nobg .page-title-wrapper h1 {
    font-size: 28px;
}
}

@media (min-width: 1200px) {
.top_site_main .page-title-wrapper h1:before,
.top_site_main-nobg .page-title-wrapper h1:before {
	height: 52px;
	width: 6px;
}
}

@media (max-width: 991px) {
.top_site_main .page-title-wrapper h1:before,
.top_site_main-nobg .page-title-wrapper h1:before {
	height: 32px;
	top:3px;
}
}

@media (max-width: 650px) {
.top_site_main .page-title-wrapper h1:before,
.top_site_main-nobg .page-title-wrapper h1:before {
	height: 28px;
	top:3px;
	width: 3px
}
}

/** NINJA FORMS **/

.ninja-forms-form-wrap {width: 100%}

.nf-form-fields-required {display:none}

.label-above .nf-field-label {margin-bottom: 2px!important;}

#ninja_forms_required_items, .nf-field-container {margin-bottom: 10px!Important;}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
    border-radius: 0px;
    padding: 8px;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
    border: 0px solid;
    border-radius: 0px;
    background: #98c8ed;
    color: white;
    line-height: 1;
    padding: 0.9em 1.2em 0.9em;
	font-weight: bold;
	text-transform: uppercase
}

/** VIDEO HERo **/

video {
  min-width: 100%;
  width: auto;
  height: auto;
  z-index: -1;
margin-top: -100px!important;
	
    width: 100%;
	position: absolute;
	top:0;

}

.hero-mob {visibility: hidden!important}

@media screen and (min-width: 2000px) {
video {

margin-top: -120px!important;
}	
}

@media screen and (max-width: 1800px) {
video {
margin-top: -100px!important;
}	
}

@media screen and (max-width: 1600px) {
video {
margin-top: -80px!important;
}	
}

@media screen and (max-width: 1270px) {
video {
margin-top: -70px!important;
}	
}

@media screen and (min-width: 1180px) {

.slideshow {
    margin-top: 0px!important;
}
.cycle-slide:after {
    background: linear-gradient(90deg, rgba(2,0,36,0.48783263305322133) 0%, rgba(0,0,0,0.2) 63%);
}
}

@media screen and (max-width: 1179px) {
video {
    margin-top: 0px!important;
}
.slideshow {
    margin-top: 0px!important;
}	
}

@media screen and (max-width: 550px) {
video {
margin-top: 25px!important;
}	
}

@media screen and (max-width: 400px) {
video {
margin-top: 30px!important;
}	
}

/* HOME PAGE MAP */

/* MAP */

.map-container {
    position: relative;
    padding-top: 400px;
}

@media screen and (max-width: 991px) {
.map-container {
    padding-top: 300px;
}
}
.map-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/** ATTENDANCE FEATURE **/

.work-process {
    max-width: 100%;
    margin: 30px 0;
	padding: 30px;
	background-color: #a81815;
}

.work-process h2 {
    font-size: 2.2em;
    margin-top: 0;
    margin-bottom: 20px;
    font-family: "Solway", serif;
    font-weight: 500;
	color: white
}

.work-process h3 {
    margin: 0 0 4px;
	color: white
}
.project-bar {
    height: 24px;
    background: #e0e0e0;
    border-radius: 0px;
	padding: 4px;
    background-color: rgba(255,255,255,0.20);
}
.project-bar.whole-school {
    background-color: rgba(255,255,255,0.20);
	margin-bottom: 15px
}
.project-percent {
    height: 16px;
    background-color: #98c8ed;
    border-radius: 0px;
    position: relative;
    width: 0;
    transition: 2s linear;
}
.whole-school .project-percent {
    background-color: #98c8ed;
}
.project-percent::before {
    content: attr(percent);
    position: absolute;
    right: 0px;
    padding: 2px 14px 1px 0;
    color: #000;
    font-size: 14px;
	line-height: 14px;
    border-radius: 0px;
    font-weight: bold;
    margin: 0px auto;
	width: auto;
}
	
.class-container {
    display: flex;
    flex-direction: row;
		margin-top: 7px;
	position: relative
}
.class-left {
    width: 92px;
}

.class-right {
    width: calc(100% - 93px);
}
	
.class-left p {
   font-weight: bold;
	padding: 0;
	margin: 0;
	font-size: 16px;
	color: white;
}
	.class-container .fa {
		color: gold;
		position: absolute;
		right:-18px;
		font-size: 38px;
		z-index: 1;
		margin-top: -8px
	}

	.class-container .fa.silver {
		color: silver;
	}

	.class-container .fa.bronze {
		color: #CD7F32;
	}
	
	.class-high {
		margin-top: 15px;
		color: white;
		font-size: 16px;
		font-weight: bold;
		text-align: center
	}
	
	.class-high .fa  {
		color: gold;
	}
	.class-high .fa.silver  {
		color: silver;
	}
	.class-high .fa.bronze  {
		color: #CD7F32;
	}

@media screen and (max-width: 800px) {
.project-percent::before {
    padding: 2px 2px 1px 0;
    font-size: 14px;
	line-height: 14px;
}
	
	.class-container .fa {
		right:-20px;
		font-size: 28px;
		margin-top: -2px
	}
	
.work-process {
    padding: 20px;
}
}

@media screen and (max-width: 600px) {
.class-left {
    width: 80px;
}

.class-right {
    width: calc(100% - 81px);
}
}

@media screen and (max-width: 800px) {
.work-process h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
}
}

/** img hack **/

.aligncenter {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* CHATTER */

.chatter-wrp {
    background-color: rgba(248,238,250,1.00);
    min-height: 120px;
	padding-top: 20px
}
.class-twitter {
    padding: 0 20px 20px 20px;
	overflow-y: scroll;
	height: 580px
}

	
@media (max-width: 900px) {
.class-twitter {
    padding: 0 15px 15px 15px;
}
}
	
/** **/
	
.title-card {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    min-height: 70px;
    padding: 15px 20px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 14px 14px 40px 0 rgba(118, 126, 173, 0.08);
	font-family: 'Raleway', sans-serif;
}
	
.title-icon {
    width: 50px;
    margin-right: 15px;
    display: inline-block;
    max-width: 100%;
}
	
.title-card-titles {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
	
.title-card-titles h4 {
    margin-top: 0px;
    margin-bottom: 0px;
    color: #0a1f44;
    font-size: 26px;
    line-height: 28px;
	font-weight: 700
}
	
/** **/
	
.chat-post {
    overflow: hidden;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 14px 14px 40px 0 rgba(118, 126, 173, 0.08);
	margin-top: 1.5rem;
	background-color: white;
	padding: 0 25px 25px;
	position: relative;
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

.chat-post:hover {
  -webkit-transform: translate(0px, -5px);
  -ms-transform: translate(0px, -5px);
  transform: translate(0px, -5px);
	box-shadow: 14px 14px 40px 0 rgba(118, 126, 173, 0.48);
}

@media (max-width: 900px) {
.chat-post {
    box-shadow: 8px 8px 20px 0 rgba(118, 126, 173, 0.08);
}
	
.chat-post:hover {
	box-shadow: 8px 8px 20px 0 rgba(118, 126, 173, 0.48);
}
}
	
@media (max-width: 600px) {
.chat-post {
	margin-top: 1rem;
	padding: 0 20px 20px;
}
}
	
.chat-post-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    min-height: 60px;
    padding: 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: flex-start;
    background-color: #fff;
}
	
@media (max-width: 767px) {
.chat-post-content {
    margin-top: 15px
}
}
	
.chat-post-icon {
    width: 60px;
    height: 60px;
    margin-right: 15px;
	margin-top: 24px;
    display: inline-block;
	border-radius: 50%
	
}
	
@media (max-width: 767px) {
.chat-post-icon {
    width: 40px;
    height: 40px;
	margin-top: 14px;
}
}
	
.chat-post-wrp {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	width: 100%
}
	
.chat-post-wrp a, .chat-post-wrp a:visited {
    color: #4169e1;
}
	
.chat-post-wrp a:hover {
    color: rgba(1,57,116,1.00);
}
	
.chat-post-wrp .entry-content {
	position: relative;
	width:100%
}

@media (max-width: 767px) {
.chat-post-wrp .entry-content span {
	display: block
}
.chat-post-wrp .entry-content .sl-wrapper span {
	display: inline-block
}
}

.chat-post .subtitle {
    min-height: 15px;
    min-width: 45px;
    padding: 0px 12px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50px;
    background-color:#EBECF0;
    color: #4E5D78;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0px;
    text-decoration: none;
	max-width: 100px;
	position: absolute;
	z-index: 9999;
	
}
	
@media (min-width: 768px) {
.chat-post .subtitle {
    display: inline-block;
	right: 22px;
	top: 22px;
}
}
	
@media (max-width: 767px) {
.chat-post .subtitle {
	top: 0px;
	left: 20px;
	background-color:#fff;
	padding: 3px 12px 0 0;
}
}
	
@media (max-width: 767px) {
.chat-post h3 {
    font-size: 20px;
    line-height: 23px;
}
}
	
.chat-post p {
    margin: 0 0 0.6em 0!important;
	font-size: 14px;
	line-height: 1.2
}
	
.chat-post h3 {
    margin-top: 26px;
    margin-bottom: 10px;
    color: #0a1f44;
    font-size: 28px;
    line-height: 30px;
	font-weight: 700;
	padding-right: 120px;
}
	
@media (max-width: 1450px) {
.chat-post h3 {
    font-size: 24px;
    line-height: 26px;
}
}
	
@media (max-width: 1200px) {
.chat-post h3 {
    margin-top: 25px;
}
}
	
@media (max-width: 767px) {
.chat-post h3 {
    font-size: 20px;
    line-height: 23px;
	padding-right: 0px;
	margin-bottom: 5px
}
}
	
@media (max-width: 767px) {
.chat-post h3 {
    margin-top: 16px
}
}
	
.tags {
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
	border-radius: 20px;
    background-color: rgba(248,238,250,1.00);
    box-shadow: 14px 14px 40px 0 rgba(118, 126, 173, 0.08);
	padding: 6px 8px
}
	
.tags a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 25px;
    min-width: 45px;
    margin-right: 5px;
    padding: 6px 15px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50px;
    background-color: #e3d9fc;
    color: #7540ee;
    font-size: 12px;
	line-height: 11px;
    font-weight: 700;
    letter-spacing: 1px;
	text-decoration: none;
	transition: all 200ms ease-in;
	text-align: center
}
	
.tags a:hover {
    background-color: #7540ee;
    color: #e3d9fc;
}
	
.seperator {
    width: 100%;
    height: 1px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #ebecf0;
}
	
/** **/
	
.acf-video {
	margin-top: 15px;	
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow:hidden;
}

.acf-video iframe, .acf-video embed, .acf-video object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
	
.acf-gallery {
	display:grid;
	grid-gap:1rem;
	grid-template-columns:repeat(auto-fill, minmax(14ch, 1fr));
	margin:var(--wp--preset--spacing--lg) auto;
	max-width:var(--wp--style--global--content-size);
	margin-top: 15px;
}
	
@media (max-width: 600px) {
.acf-gallery {
	grid-gap:0.6rem;
}
}
	
.acf-gallery a {
	position: relative
}
	
.acf-gallery a img {
	display: block;
	filter: grayscale(0%);
	height: 100%;
	transition: filter 0.7s ease;
	width: 100%;
}
	
.acf-gallery a:hover img {
	filter: grayscale(100%);
}

.acf-gallery a:after {
	content: '';
  background:url('../images/magnifying-glass.svg');
  width: 16px;
  height: 16px;
  display: block;
	position: absolute;
	bottom: 4px;
    right: 5px;
}
	
#TB_overlay {
    background: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    z-index: 999999999999;
}
	
#TB_window {
    z-index: 9999999999999;
  display:flex;
  flex-direction: column; 
}
	
#TB_window img#TB_Image {
    max-width: 100%;
	height: auto;
    margin: 15px 0 0 15px;
    border-right: 0px solid #ccc;
    border-bottom: 0px solid #ccc;
    border-top: 0px solid #666;
    border-left: 0px solid #666;
}
	
#TB_caption {
    display: none
}
	
.tb-close-icon {
    top: -15px;
}
	
div#shShutter {
    z-index: 999999999999;
}
	
div#shDisplay {
    z-index: 9999999999999;
}
	
#swipebox-overlay {
    z-index: 9999999999999!important;
	background: rgba(0,0,0,0.88)!important;
}
	
/* LIKE POST STYLING */
.sl-wrapper {
	margin-top: 10px;
	display: inline-block!important
}
	
.sl-wrapper a {
	border-bottom: 0 !important;
	text-decoration: none !important;
}
.sl-button {
	padding: 0.375em 0.625em 0.375em 0;
	font-size: 1em;
	line-height: 1;
	font-weight: normal;
}

/* Colors */
a.liked {
	color: #da1b1b;
}
a.liked:hover,
a.liked:active,
a.liked:focus {
	color: #666666;
}
a.liked span.sl-count,
.sl-count {
	color: #666666;
}

/* Icon */
.sl-icon {
	margin-right: 0.3125em;
	font-family: 'Arial Unicode MS', Arial, sans-serif;
	vertical-align: middle; display: inline-block!important
}
.sl-icon svg {
	fill: currentColor; display: inline-block!important;
	width: 1em;
	height: 1em;
}
.sl-icon svg:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left:0;
}

/* Count */
.sl-count {
	font-size: 0.625em;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	text-transform: uppercase;
	vertical-align: middle; display: inline-block!important
}

/* Loader */
.loader,
.loader:before,
.loader:after {
  background: rgba(0, 0, 0, 0.2);
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: .2em;
  height: .6em;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -.375em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader {
  text-indent: -9999em;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  font-size: 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:after {
  left: .375em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 rgba(0, 0, 0, 0.2);
    height: .6em;
  }
  40% {
    box-shadow: 0 -.3em rgba(0, 0, 0, 0.2);
    height: 1em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 rgba(0, 0, 0, 0.2);
    height: .6em;
  }
  40% {
    box-shadow: 0 -.3em rgba(0, 0, 0, 0.2);
    height: 1em;
  }
}