@charset "utf-8"; 
/* CSS Document */
@import url(//fonts.googleapis.com/css?family=Lato&subset=latin, latin-ext); 
@import url(//fonts.googleapis.com/css?family=Pacifico); /*Homepage */
@import url(//fonts.googleapis.com/css?family=Marcellus); /*H1 &button links */
body{font-family:'Lato',sans-serif}
.navbar-fixed{ top:0;  z-index:100;  position:fixed;  width:100%}
#nav_bar, #hope-footer-wrap{border:0; /*background-color:#0c5389; */background-color:rgba(12,83,137,1); border-radius:0px; margin-bottom:0;  height:auto; clear:both}
*{margin:0; padding:0}
body{font-family:'Lato',sans-serif; font-size:16px; color:#333; background-color:#fff}
p{line-height:24px}
a:link, a:visited, a:active{ color:#0c5389;  -webkit-transition:all 500ms;  -moz-transition:all 500ms;  -o-transition:all 500ms;  transition:all 500ms}
a:hover{ color:#9d7a46}
.wrap{max-width:1200px; /*width:100%; */margin:0 auto 0 auto; clear:both}
#hopehead #logo{padding:30px 30px 15px 15px}
#hopehead #hope-right{float:right; padding:50px 10px 10px 10px; font-size:16px; text-align:center; width:250px; color:#0c5389;}
#hopehead #hope-right span, #hopehead #hope-right span a:link{font-weight:bold; color:#a4390d !important; font-size:28px; text-decoration:none}
#navbar{height:30px; background-color:#111; color:#996; border:1px solid #996; padding:5px; text-align:center}
video#bgvid{position:absolute; max-width:100%; width:100%; /*min-height:100%; */height:auto; z-index:-100; /*background:url(../images/home-back.jpg) no-repeat; background-position:center; background-size:cover; */}
#home-banner{background-image:url(../images/transparency.png); background-repeat:repeat; /*background-image:url(../images/home-back.jpg); background-repeat:no-repeat; background-position:center -150px; background-attachment:fixed; position:relative*/ padding:100px;  min-height:380px; text-align:center}
#home-banner h1{text-align:center; color:#fff; text-shadow:2px 2px 2px #333; padding:30px; font-family:'Pacifico',cursive; font-weight:normal; font-size:47px}
.home-banner-buttons{display:inline-block; margin:10px 0px}
#internal-banner{z-index:1; text-align:left; background-image:url(../images/inside-header.jpg); background-repeat:repeat-x; background-position:top center; margin-bottom:20px}
#internal-banner .wrap{height:400px}
#internal-banner img{width:100%}
#internal-banner h2{color:#fff; font-size:34px; padding:60px 0px 30px; font-family:'Marcellus',serif; text-transform:uppercase}
#internal-banner p{font-size:16px; margin-bottom:40px}
/* Buttons */
.button{font-family:'Marcellus',serif; text-transform:uppercase; border-radius:2px; text-decoration:none; -webkit-transition:all 500ms; -moz-transition:all 500ms; -o-transition:all 500ms; transition:all 500ms}
a.button-home1{background-color:#c7ecff; margin:0px 20px; color:#0c5389; border:3px double #fff; padding:10px 50px}
a.button-home1:hover{background-color:#fff}
a.button-home2{background-color:#f0d5bc; margin:0px 10px; color:#444; border:3px double #fff; padding:10px 63px}
a.button-home2:hover{background-color:#fff}
a.button1{margin:80px 0px; padding:15px 90px; background-color:#fff; border:1px solid #e6d2a0; border-radius:2px; clear:both}
a.button1:hover{background-color:#F4ECD5}
a.button2{background-color:none; border:1px solid #afaa73; padding:15px 35px}
a.button2:hover{background-color:#e5c28c}
a.button3{background-color:#e5c28c; border:3px double #fff; padding:15px 35px}
a.button3:hover{background-color:#0c5389; color:#fff}
.callbox {background-color: rgba(12,83,137,1);padding: 16px !important;margin: 20px auto;width: 310px;text-align: center; color:#fff;}
.callbox .phone {width: 190px;margin: 0px auto;font-size: 20px;font-weight: bold;line-height: 36px !important;padding-top: 8px;}
.callbox p {padding-bottom:0px !important;}
.callbox p img {float:left;}
.phone, .phone a:link{font-size:26px; color:#ecd6a8; font-weight:bold}
.center-container{ display: -webkit-flex; /* Safari */ display: flex;  -webkit-flex-wrap: wrap;  /* Safari 6.1+*/ flex-wrap: wrap;  -webkit-justify-content:center;  /* Safari 6.1+*/  justify-content:        center}
#insurancebar{background-color:#6e6e6e; padding:75px 10px; clear:both}
#insurancebar img, #insurancebar a.more{  position:relative; top:50%;     -webkit-transform:translateY(-50%);     -ms-transform:translateY(-50%);     transform:translateY(-50%)}
#insurancebar img, #insurancebar a.more{float:left; margin:0px 25px}
#insurancebar a.more{padding:5px 15px; text-align:center; background-color:#fff; border:1px solid #e6d2a0; border-radius:2px; text-transform:uppercase; text-decoration:none; color:#444; font-size:13px}
#insurancebar a.more:hover{background-color:#ddd}
#admissionsfooter{background-image:url(../images/admissions-back.jpg); margin-top:2px; height:450px}
#admissionsfooter h3{color:#fff; font-size:30px; margin:10px}
#admissionsfooter .column{width:255px; color:#555; text-align:center; padding:70px 10px 0px 10px; font-size:18px; font-weight:bold; margin:55px 30px; display:inline-block}
#admissionsfooter #program{background-image:url(../images/admissions1.png); background-repeat:no-repeat; background-position:bottom; height:77px}
#admissionsfooter #tour{background-image:url(../images/admissions2.png); background-repeat:no-repeat; background-position:bottom; height:77px}
#admissionsfooter #staff{background-image:url(../images/admissions3.png); background-repeat:no-repeat; background-position:bottom; height:77px}
#contactfooter .wrap, #admissionsfooter .wrap{padding:50px; text-align:center}
#admissionsfooter .wrap .phone span {color:#ecaa5b;font-size:30px; }
#contactfooter{background-image:url(../images/contact-back.jpg); clear:both}
#contactfooter h3{size:20px; color:#000}
#footerform{padding:20px; clear:both}
#contactfooter label{float:left; margin:22px 10px; width:150px; clear:both; text-align:left}
#InsuranceForm label{float:left; margin:22px 10px; width:300px; clear:both; text-align:left}
#contactfooter input, #contactfooter textarea{width:80%; min-height:35px; border:1px solid #e8e8e8; margin:10px; padding:5px; background-color:#fff}
#InsuranceForm input, #InsuranceForm textarea{width:50%; min-height:35px; border:1px solid #ddd; margin:10px; padding:5px; background-color:#F1EAE0}
#contactfooter textarea, #InsuranceForm textarea{height:200px}
#contactfooter input:hover, #contactfooter textarea:hover, #contactfooter input:focus, #contactfooter textarea:focus, #InsuranceForm input:hover, #InsuranceForm textarea:hover, #InsuranceForm input:focus, #InsuranceForm textarea:focus{border:1px solid #ccc; background-color:#fff}
#contactfooter input#submit, #InsuranceForm input#submit2{width:auto; padding:15px 65px; background-color:#e99400; border-radius:5px; text-align:center; clear:both; color:#fff; font-weight:bold; cursor:pointer}
#formsubject{display:none}
.error {color:red; font-size:90%;}
h1{font-size:34px; padding-bottom:5px}
h2{font-size:28px; color:#444; padding-bottom:10px}
h3{color:#777}
h3.title{text-align:center; padding:30px 5px; color:#444; font-size:25px}
h3.title::before{    content:url("../images/h3left.jpg");     position:relative;     top:-7px;     left:-15px}
h3.title::after{    content:url("../images/h3right.jpg"); position:relative;  left:auto; top:-7px;  right:-15px}
#content{float:left; width:850px; padding:10px}
#content-full{width:100%; padding:10px}
#content ul, #content-full ul, #content ol, #content-full ol, #sidebar ul, #sidebar ol, blockquote{margin-left:30px}
#content ul li, #content-full ul li, #sidebar ul li{list-style:square}
#content ul li, #content-full ul li, #content ol li, #content-full ol li, #sidebar ul li, #sidebar ol li{padding-bottom:10px}
#content p{padding-bottom:15px; line-height:24px}
.image, .image-left, .image-right{padding:5px; margin-bottom:10px; margin-top:5px; color:#fff; font-size:90%; -moz-box-shadow:0px 1px 5px #888; -webkit-box-shadow:0px 1px 5px #888; box-shadow:0px 1px 5px #888}
.image-left{float:left; margin-right:15px}
.image-right{float:right; margin-left:15px}
#hope-sidebar{float:right; width:300px; padding:10px; margin-top:20px; text-align:center}
#staff div{clear:both; padding:20px 0px; border-bottom:1px solid #ccc; min-height:210px}
#staff div img{float:left; width:175px; height:200px}
.center-content{padding:30px 0px; background-color:#fff; text-align:center}
#our-centers{padding:25px 0px; background-color:#f7f4f0}
#our-programs{margin:25px 0px; background-color:#f7f4f0}
.hope-squares .item1{background-color:#afaa73}
.hope-squares .item2{background-color:#e5c28c}
.hope-squares .item3{background-color:#b4c5e5}
.hope-squares img{width:100%; height:auto}
ul.hope-squares{list-style-type:none; margin:0; padding:0; text-align:center; font-variant:small-caps; font-size:0px; clear:both}
ul.hope-squares li{display:inline-block; height:100%; margin:0; position:relative; width:33%}
div.hope-squares-text-content div{text-align:center; font-variant:normal; font-size:16px; padding:20px; position:relative; top:40%; transform:translateY(-40%)}
div.hope-squares-text-content div h4{padding-bottom:20px; text-transform:uppercase}
div.hope-squares-text-content{background:rgba(11,83,136,0.8); color:white; cursor:pointer; display:inline-block; left:0; vertical-align:middle; position:absolute; top:0; height:100%; width:100%; opacity:0; -webkit-transition:opacity 500ms; -moz-transition:opacity 500ms; -o-transition:opacity 500ms; transition:opacity 500ms}
ul.hope-squares li:hover div.hope-squares-text-content{opacity:1}
/*Centers internal page consistent css */
#celebrate-content h1, #hopeacademy-content h1, #completeharmony-content h1{padding:20px 0px; font-family:'Marcellus',serif; text-transform:uppercase}
#celebrate-bullets ul, #hopeacademy-bullets ul, #completeharmony-bullets ul{float:left; padding:0px 10%}
#celebrate-bullets, #hopeacademy-bullets, #completeharmony-bullets{background-color:#e7e3df; padding:20px}
#celebrate-bullets ul li, #hopeacademy-bullets ul li, #completeharmony-bullets ul li{list-style:outside none none; background-repeat:no-repeat; background-position:left center; padding:20px 0px 20px 40px}
#celebrate-learnmore, #hopeacademy-learnmore, #completeharmony-learnmore{background-position:center; background-repeat:repeat-x; padding:50px; margin:35px 0px; height:285px; text-align:center}
#celebrate-learnmore h3, #hopeacademy-learnmore h3, #completeharmony-learnmore h3{color:#fff; font-size:34px; line-height:50px; margin:5px; text-shadow:1px 1px 1px #333}
#celebrate-content h1 span{color:#9bb92e; font-weight:bold}
#hopeacademy-content h1 span{color:#e06927; font-weight:bold}
#completeharmony-content h1 span{color:#9e2a01; font-weight:bold}
#celebrate-bullets ul li{background-image:url("../images/arrow-green.png")}
#hopeacademy-bullets ul li{background-image:url("../images/arrow-orange.png")}
#completeharmony-bullets ul li{background-image:url("../images/arrow-maroon.png")}
#celebrate-learnmore{background-image:url(../images/center-celebrate-back.jpg)}
#hopeacademy-learnmore{background-image:url(../images/center-hopeacademy-back.jpg)}
#completeharmony-learnmore{background-image:url(../images/center-completeharmony-back.jpg)}
div.highlight{padding:15px 15px 0px 15px; clear:both; border-bottom:2px solid #E4D5C0; background-color:#F1EAE0; margin-bottom:20px;  -webkit-transition:all 0.2s linear;  -moz-transition:all 0.2s linear;  -o-transition:all 0.2s linear;  transition:all 0.2s linear}
div.highlight:hover{background-color:#E4D5C0}
/*Pulled from old website */
a.toplink:link, a.toplink:active, a.toplink:visited{background-color:#7EA0C3; background-image:url(https://www.hopebythesea.com/images/arrow-top.png); background-position:5px 8px; background-repeat:no-repeat; padding:3px 7px 3px 22px; color:#fff; border:1px solid #999}
a.backlink:link, a.backlink:active, a.backlink:visited{background-color:#7EA0C3; background-image:url(https://www.hopebythesea.com/images/arrow-left.png); background-position:5px 6px; background-repeat:no-repeat; padding:3px 7px 3px 20px; color:#fff; border:1px solid #999}
a.toplink:hover, a.backlink:hover{background-color:#1e5c97}
#ScheduleTable, .ScheduleTable{font-size:8pt; border:1px solid #1a5895; font-family:Arial,Helvetica,sans-serif; background-color:#F1EAE0; border-collapse:collapse; width:575px; line-height:13px}
#ScheduleTable td, .ScheduleTable td{padding:5px}
#ScheduleTable td:hover,{background-color:#FFF; color:#000}
.ScheduleTable-time{background-color:#DBC8AE}
.ScheduleTable-break{background-color:#C9D4DE}
.ScheduleTable-days{background-color:#1a5895; color:#fff; text-align:center}
.videoslibrary div{width:48%; padding:10px; margin-bottom:20px; font-size:90%; text-align:center; background-color:#F1EAE0; display:inline-table; height:400px}
.column-2{float:left; width:35%; padding:2% 5%}
/*not used yet */
.column-3{float:left; width:25%; padding:2% 5%}
#content table{margin:20px 82px 0}
#content td{line-height:28px}
#wcMessage, #Form, #pageurl{display:none}
#hope-footer{border-top:2px solid #d1d1d1; font-size:13px; background-color:#fff; padding:20px 0px}
#hope-footer #copyright{}
#hope-footer-1{text-align:right; background-image:url(../images/webconsuls.png); background-repeat:no-repeat; background-position:right}
#hope-footer-1 p{padding:30px 70px 10px 0px}
#hope-footer a:link, #hope-footer a:visited, #hope-footer a:active{text-decoration:none}
#hope-footer #hope-footer-1, #hope-footer .SMO{width:49%; display:inline-table; vertical-align:middle}
.SMO img{opacity:.7; -webkit-transition:all 0.2s linear; padding:5px; border-radius:8px;   -moz-transition:all 0.2s linear;   -o-transition:all 0.2s linear;   transition:all 0.2s linear}
.SMO img:hover{opacity:1}
.responsive_menu_icon{  text-align:center;   font-size:24px;   text-transform:uppercase;   color:#fff;   padding:7px;   display:none;   cursor:pointer}
@media screen and (max-width:1360px){#hope-menu >ul >li >a{  padding:10px 25px !important}
#content-full{width:96%; padding:2%}
#insurancebar{padding:50px 10px 20px}
#insurancebar a.more{float:none; display:block; top:inherit; transform:none; clear:both}
}
@media screen and (max-width:1200px){.wrap{max-width:1000px}
#admissionsfooter .wrap{padding:20px}
#admissionsfooter .column{margin:5px 30px}
}
@media screen and (max-width:1000px){.wrap{max-width:900px}
.responsive_menu_icon{display:block}
#hope-menu{display:none}
#hope-menu >ul >li{  width:100%;   text-align:left;   border-top:0px solid #595316;   border-bottom:1px solid #0c5389;   display:block}
#hope-menu >ul li:hover ul, #hope-menu >ul li.hover ul{visibility:hidden; height:0px; overflow:hidden}
li.toproot.hover ul{visibility:visible !important;   height:auto !important;   position:static !important; background-color:rgba(56,113,157,.8) !important}
li.toproot.hover ul li a{  width:84% !important;   padding:10px 8% !important}
li.toproot, li.toproot:hover >a{  background:url(../images/downArrow.png) no-repeat;   background-position:96% 23px}
div.hope-squares-text-content div{font-size:14px; padding:10px; position:relative}
.tabLink, .tabLinkActive{padding:20px !important}
.tabContentActive p{width:100% !important}
#content{  float:left;   width:65%;   padding:0 2.5%; text-align:justify}
.image-left{  float:left;   margin-right:5px;   width:25%}
.image-left img{  width:100%;   height:100%}
#hope-sidebar{float:left;   margin-right:5px;   width:25%; padding:0px}
#hope-sidebar img{  width:100%;   height:auto}
#hope-footer{width:90%;   margin:0 auto;   text-align:left;   height:auto;   padding:3px 5%}
#hope-footer-2{background-image:none}
}
@media screen and (max-width:800px){#hope-wrapper{  width:100%}
.wrap{max-width:760px}
#hope-header img{float:none; margin:0 auto}
#internal-banner .wrap{padding:0px 20px}
.column-2{width:90%}
video#bgvid, div.hope-squares-text-content div{display:none}
iframe{width:100%}
.videoslibrary div{width:98%}
#home-banner{background-image:url(../images/home-back.jpg); background-repeat:repeat; /*background-image:url(../images/home-back.jpg); background-repeat:no-repeat; background-attachment:fixed; position:relative; */background-position:center; padding:40px 20px;  min-height:380px; text-align:center}
#home-banner h1{padding:15px; font-size:30px}
.home-banner-buttons{clear:both; display:block; margin:50px 0px}
#insurancebar{padding:25px}
#insurancebar img, #insurancebar a.more{float:none; margin:20px auto; display:block; top:inherit; transform:none}
.tabContentActive{padding:20px !important}
.tabLink, .tabLinkActive{padding:10px !important; font-size:80%}
#content{ float:left;  width:66%;  padding:0 2.5%; text-align:justify}
.image-left{ float:left;  margin-right:5px;  width:30%}
.image-left img{ width:100%;  height:100%}
#hope-sidebar{ width:26%}
#hope-sidebar h3 img{ height:auto;  text-align:center;  width:90%}
#slides img{ height:auto;  width:100%}
.gallerylayer{ height:auto !important;  position:relative !important}
#slides{ float:left !important;  left:0;  position:static !important; height:auto !important;  text-align:center;  top:0;  z-index:1}
#hope-footer #hope-footer-1, #hope-footer #hope-footer-2, #hope-footer .SMO{ display:inline-table;  margin:0;  padding:0 2.5%;  text-align:center;  vertical-align:top;  width:95%; background-image:none}
#hope-footer-1 p{padding:0px}
.image-right{ width:40%;  height:auto}
#contactfooter .wrap{padding:20px}
#footerform{padding:0px}
}
@media screen and (max-width:700px){#content,#content-full{width:95%; text-align:justify}
#hope-sidebar{width:95%; padding:5px 2.5%}
#hope-sidebar h3 img{ width:50%}
.callbox {padding: 5%; max-width: 80%;}
form#InsuranceForm table, #ContactForm table{ width:100%;  margin:0px}
#hope-sidebar img{width:50%; height:auto}
.slider{ padding:2px 0px}
#admissionsfooter{height:auto}
#hope-footer-2{background-image:none}
}
@media screen and (max-width:460px){header#hopehead div:first-child{ width:100%;  text-align:center}
#hopehead #hope-right{ float:none;  margin:0 auto;  padding:16px 2%;  font-size:18px;  text-align:center;  width:90%}
#hopehead #hope-right span, #hopehead #hope-right span a:link{ font-weight:bold;  font-size:24px;  text-decoration:none;  float:right;  width:97%;  text-align:center}
#celebrate-content h1, #hopeacademy-content h1, #completeharmony-content h1{clear:both; text-align:center}
#celebrate-content img, #hopeacademy-content img, #completeharmony-content img{display:block; float:none !important; margin:0 auto}
a.button1{padding:15px 50px}
a.button3{padding:15px 10px}
.hiddenview{display:none}
h3.title{text-align:center; padding:30px 5px; color:#444; font-size:25px}
h3.title::before, h3.title::after, .tabStrip li .tabLinkActive::after{ display:none !important}
.tabContentActive p{font-size:90%; line-height:20px}
.tabStrip li{width:100% !important}
.image-left{ width:100%;  margin:0px;  padding:0px}
.image-left p{ width:50%;  float:left;  font-size:12px}
.image-left p img{ width:100%;  height:145px}
.column-3{ width:75%;  padding:0% 5%}
h1{font-size:28px; text-align:left}
h2{ font-size:18px; text-align:left}
.imagegallery img{ margin:1.5% !important;  padding:1% !important;  width:45% !important}
#slides-sm img{ height:130px}
ul.hope-squares li{ margin:0px 0px 60px 0px}
.callbox {max-width:80%; padding:5% 10%;}
}
@media screen and (max-width:321px){a.button-home1,a.button-home2{ padding:10px 35px}
}