body {
font-size:16px;
font-family: 'Roboto', sans-serif;
} h1, h2, h3{
font-weight:600;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; } img {
max-width: 100%;
height: auto;
width: auto\9; } a{
outline: 0;
} #top{
background: radial-gradient(478.47% 478.47% at 50% -100.69%, #036292 0%, #15153F 100%);
height:65px;
color:#fff;
font-weight:400;
padding:0;
}
#top .social{
float:right;
padding-top:8px;
}
#top .contact{
padding: 21px 0;
}
#top .contact img{
margin: 0 6px 0 12px;
vertical-align: middle;
}
#top a{
color:#fff;
text-decoration: none;
}
#top .gt_switcher a {
color: #666;
}
#top .links a {
display: inline-block;
padding: 21px 24px;
float: right;
}
#top .links a:hover {
background: #3CB265;
}
header{
background: #fff;
border-bottom:1px solid #ccc;
padding: 15px 0;
}
#top .switcher{
margin-top: 20px;}
#top .switcher a {
color: #666;
} .logo-nav{ }
#logo {
height: 93px;
width: auto;
} nav {
float: right;
margin-right: -15px;
padding-top: 36px;
position:relative;
}
nav ul{
margin:0;
padding:0;
list-style:none;
}
nav > ul > li{
position:relative;
float:left;
}
nav > ul > li > a {
color:#4c4c4c;
text-transform: uppercase;
padding:10px 15px;
text-decoration: none;
}
nav > ul > li > a:hover, nav li a:active {
text-decoration: none;
}
nav ul > li a {
display:block;
letter-spacing:1px;
padding:5px 10px;
color:#084977;
text-transform:capitalize;
}
nav ul.sub-menu {
position:absolute;
padding:4px;
left:0px;
width:230px;
background: radial-gradient(478.47% 478.47% at 50% -100.69%, #036292 0%, #15153F 100%);
display:none;
z-index:300;
}
nav ul.sub-menu > li  {
text-align:left;
vertical-align:top;
}
nav ul.sub-menu > li a  {
padding:6px 12px;
color:#fff;
text-decoration:none;
}
nav ul.sub-menu > li a:hover  {
background: radial-gradient(478.47% 478.47% at 50% -100.69%, #036292 0%, #15153F 300%);
}
nav > ul > li:hover > ul.sub-menu {
display:inline-block;
}
nav > ul > li:hover > ul.sub-menu > li{
position: relative;
}
nav > ul > li:hover > ul.sub-menu > li:hover > ul.sub-menu {
top:0;
left:230px;
display:inline-block;
}
nav ul > li a:hover {
} #content{
padding: 20px 0px 40px;
}
main{
padding:40px 0 50px;
background-color:#f5f5f5;
} main .feature{
background-color:#fff;
}
main .feature.threes{
text-align:center;
padding:20px 0;
}
.feature h3{
border-bottom: 2px solid #eee;
display: inline-block;
padding-bottom: 8px;
font-size: 20px;
}
main .feature.twos{
padding:20px;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
main .feature.twos img{
float:left;
margin-right:30px;
} .posts article{
padding:20px;
background-color:#f9f9f9;
margin-bottom:20px;
border:1px solid #ededed;
}
.posts article h2{
margin-top:5px;
}
article.gallery{
padding: 15px 0 30px 20px !important;
}
article.gallery h2{
margin-top: 12px;
}
article.gallery img{
width:80px;
height:auto;
} .button, a:hover.button, #maillist #mc-embedded-subscribe .button{
padding:8px 16px;
text-decoration:none;
display: inline-block;
margin-top: 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-weight:normal;
font-size:15px;
background-color:#eee;
}
.flexslider .button{
background-color:#eee;
}
.flexslider .gradient{
background: radial-gradient(73.76% 73.76% at 50% 26.24%, #036292 0%, rgba(12, 60, 105, 0.4) 50%, #15153F 100%);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.flexslider .news-stories{
clear:both;
}
.flexslider .news-stories img{
max-width:90px;
height:auto;
}
.feature .button{
background-color:#eee;
}
#maillist #mc-embedded-subscribe .button{
background-color:#eee;
color:#666;
} .flexslider{
border:none;
margin:0;
}
.flexslider .intro{
position: relative;
color:#fff;
padding:60px 0;
}
.flexslider  .intro h2{
font-size:32px;
}
.flexslider  .intro h3{
font-size:27px;
font-weight: normal;
}
.flexslider  .intro a{
background: linear-gradient(180deg, #3CB265 0%, #3BA760 100%);
border-radius: 70px;
font-weight: bold;
font-size: 23px;
line-height: 27px;
color:#fff;
text-decoration: none;
margin-top: 30px;
display: inline-block;
padding: 16px 48px;
}
.flexslider aside{
display:inline-block;
position: absolute;
bottom:40px;
right:0;
background: rgba(0,0,0, 0.5);
color:#fff;
padding:10px 20px;
border-top: 1px solid #f3f3f3;
border-bottom:1px solid #f3f3f3;
}
.flex-direction-nav a {
height:50px;
}
.flex-control-nav {
bottom: 10px;
z-index: 10;
}
.flexslider .flex-next {opacity: 0.2; right: 5px;} .flexslider .flex-prev {opacity: 0.2; left: 5px;}
.flexslider .slides img.slide_logo{
height:120px;
width:auto;
}
.flexslider .slides li{
height:590px;
}
.flexslider .slides li img{
height:590px;
width:100%;
object-fit: cover;
}
.flexslider .slides .gradient .intro p{
text-align:center;
}
.flexslider .slides .gradient .button {
display: inline-block;
border-radius: 0;
width: 230px;
text-align: center;
padding: 30px 50px;
font-weight: 500;
font-size: 17px;
margin: 10px 15px;
box-shadow: 4px 4px 18px rgba(255, 255, 255, 0.25);
}
.flexslider .slides .gradient .button strong {
display: block;
font-size: 24px;
}
.flexslider .slides .gradient .button.first {
background: radial-gradient(478.47% 478.47% at 50% -100.69%, #03924A 0%, #0C5445 99.99%, #15153F 100%);
}
.flexslider .slides .gradient .button.second {
background: radial-gradient(478.47% 478.47% at 50% -100.69%, #923303 0%, #4A2226 99.99%, #15153F 100%);
}
.flexslider .slides .gradient .button.third {
background: radial-gradient(478.47% 478.47% at 50% -100.69%, #036292 0%, #15153F 100%);
}
.flexslider .slides .gradient .button.fourth {
background: radial-gradient(478.47% 478.47% at 50% -100.69%, #920354 0%, #4B0D48 99.99%, #15153F 100%);
}
.whats-happening{
margin-top: -106px;
z-index: 2;
position: relative;
}
.social-heading{
background: rgba(5, 41, 71, 0.92);
padding:8px 12px;
color:#fff;
position:relative;
}
.social-heading h2{
margin: 12px 24px;
}
.social-heading a {
position: absolute;
right: 14px;
top: 14px;
background: linear-gradient(180deg, #3CB265 0%, #3BA760 100%);
padding: 8px 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
main .social{
background-color: #fff;
padding-bottom: 30px;
}
main .social iframe, .social .insta-gallery-feed, main .news{
-webkit-box-shadow: 3px 2px 20px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 3px 2px 20px 0px rgba(0,0,0,0.1);
box-shadow: 3px 2px 20px 0px rgba(0,0,0,0.1);
}
main .news{
padding:15px 15px 0;
height:320px;
}
.social .insta-gallery-feed{
padding-bottom:20px;
}
.news-stories {
clear: both;
}
.timeline-Body {
height: 300px !important;
overflow-y: scroll !important;
}
.principals-welcome{
clear:both;
background: radial-gradient(73.76% 73.76% at 50% 26.24%, #036292 0%, #15153F 100%);
color:#fff;
}
.principals-welcome .parent{
display: flex;
}
.principals-welcome .welcome{
padding: 15px 30px 30px;
}
.principals-pic{
padding:0;
display:flex;
}
.principals-pic img{
object-fit: cover;
}
#content .wp-block-file {
background-color: #f7f8f9;
padding: 13px;
}
#content .wp-block-file .wp-block-file__button, main .wp-block-file .wp-block-file__button {
background: #084d7c;
} #news {
padding: 60px 0;
}
#news h2{
font-size:30px;
}
#news h2, #news h3, #news h4 {
color: #224677;
}
#news h4 {
border-bottom: 1px solid #224677;
margin-bottom: 30px;
display: inline-block;
clear: both;
padding-bottom: 6px;
}
#news .news-img {
width: 100%;
height: 200px;
object-fit: cover;
}
#news article {
padding: 6px;
background-color: white;
text-align: center;
}
#news h3 {
font-size: 18px;
padding: 0 30px;
min-height:40px;
}
#news p{
padding: 0 30px;
}
#news .news-date{
display: inline-block;
margin-top:15px;
font-size:12px;
}
#news a.news-link{
color: #3BA760;
display: inline-block;
margin-top:4px;
}
a.button.green, a.button.green:hover{
background: linear-gradient(180deg, #3CB265 0%, #3BA760 100%);
padding: 8px 24px;
color: #fff !important;
text-decoration: none;
text-transform: uppercase;
border-radius: 0;
} .alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
} .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; }
.nf-form-content button, .nf-form-content input[type="button"], .nf-form-content input[type="submit"] {
background: #0a4370 !important;
} footer{
background: radial-gradient(73.76% 73.76% at 50% 26.24%, #036292 0%, #15153F 100%);
padding:30px 0;
color:#fff;
}
footer address{
display:inline-block;
}
footer .logo{
max-height:80px;
width:auto;
}
footer .contact img {
margin-right: 10px;
vertical-align: middle;
width:auto;
}
.location {
vertical-align: top;
margin-right: 10px;
width:24px;
height: auto;
margin-top:5px;
}
footer .social{
padding-top: 20px;
}
footer #mc_embed_signup{clear:left; font-size:14px; }
footer h3{
border-bottom:2px solid #0d5e93;
padding-bottom:8px;
font-size: 20px;
color: #eee;
}
footer ul{
margin:0;
padding:0;
}
footer li{
padding: 7px 2px;
border-bottom: 1px solid #747474;
list-style: url(//www.mercywaterford.com/wp-content/themes/Vanilla/images/list-arrow.png) inside;
}
footer a{
color:#eee;
text-decoration: none;
}
footer a:hover{
color:#fff;
text-decoration: none;
}
footer .news-stories img{
border: 1px solid #fff;
}
footer .news-date{
font-size: 13px;
}
footer iframe{
margin-top: 7px;
}
.footer{
padding:30px 0;
}
.credits{
border-top:1px solid #0D5E93;
padding:30px 0;
}
.credits .links {
text-align: right;
}
iframe {
max-width: 100%;
}
.popup-button{
position: fixed;
bottom:30px;
right:30px;
z-index:3;
width:44px; 
height:44px;
}
.popup-button img{
cursor:pointer;
} #mobile-menu{
display:none;
}  @media screen and (min-width:1281px){
} @media screen and (max-width:1280px){
.flexslider .intro {
padding: 20px 0;
}
.whats-happening {
margin-top: -40px;
}
.flexslider h2, .flexslider h3{
padding:0 20px;
}
.flexslider .slides img {
height: 368px;
object-fit: cover;
}
} @media screen and (max-width:1024px){
#top .links a {
padding: 21px 18px;
}
nav{
padding-top: 20px;
}
.flexslider .intro a {
font-size: 21px;
margin-top: 16px;
display: inline-block;
padding: 13px 36px;
}
.news-stories {
font-size: 15px;
}
.principals-pic {
display: block;
padding:30px 15px;
}
.principals-pic {
object-fit: contain;
}
} @media screen and (max-width:980px){
} @media screen and (max-width:800px){
.slicknav_menu, .slicknav_btn{
background-color: #083a60;
}
#top .left, #top .right, .logo-nav {
text-align: center;
}
#top .links a {
float:none;
}
nav{
display:none;
}
#mobile-menu{
display: block;
position: fixed;
z-index: 10;
width: 100%;
}
#top{
height: auto;
position: relative;
padding-top: 3.375em;
}
} @media screen and (max-width:768px){
.principals-welcome .parent {
display: block;
}
footer{
padding: 30px;
}
.credits .links {
text-align: center;
}
} @media screen and  (max-width:640px){
.flexslider .slides img.slide_logo {
height: 100px;
}
.flexslider .intro h2 {
font-size: 24px;
}
.flexslider .intro h3 {
font-size: 21px;
}
#top .switcher {
width: 150px;
margin: 0 auto;
}
} @media screen and  (max-width:523px){
.flexslider .slides .gradient .button {
width: 170px;
text-align: center;
padding: 15px 10px;
font-weight: 500;
font-size: 15px;
margin: 10px 10px;
box-shadow: 4px 4px 18px rgba(255, 255, 255, 0.25);
}
.flexslider .slides .gradient .button strong{
font-size:21px;
}
} @media screen and  (max-width:480px) {
.flexslider .slides img.slide_logo {
height: 70px;
}
.flexslider .slides img {
height: 368px;
}
.social-heading h2 {
font-size:21px;
}
} @media screen and  (max-width:390px){
.flexslider .slides .gradient .button {
width: 150px;
text-align: center;
padding: 15px 0px;
font-weight: 500;
font-size: 15px;
margin: 4px 4px;
box-shadow: 4px 4px 18px rgba(255, 255, 255, 0.25);
}
.flexslider .slides .gradient .button strong{
font-size:21px;
}
} @media screen and  (max-width:360px) {
} @media screen and  (max-width:320px) {
}