html {color: #777777; font-family: 'Catamaran', sans-serif; font-weight: 400; letter-spacing: .07em; line-height:2; max-width:100%; overflow-x:hidden;     -webkit-font-smoothing: antialiased;}
body { overflow-x: hidden;background:#f5f5f5 !important; color: #666; font-family: 'Catamaran', sans-serif; font-weight: 400; max-width: 100%; overflow-x:hidden;}
p, ul, li { font-size: 17px; line-height: 1.7;}
li {margin-bottom: 1vh;}
ul { padding-left: 2vh;}
h2 {font-family: "capitolium-2",serif; color: #245D38; margin: 0; padding:0; font-size: 25px;}
h1 {font-family: "capitolium-2",serif; color: #245D38; margin: 0; padding:0; font-size: calc(12px + 2vw); letter-spacing: .2em;}
h4 {font-family: "capitolium-2",serif; color: #245D38; margin: 0; padding:0; font-size: 18px; text-transform: uppercase;}
a {color: #777; box-shadow: none !important; text-decoration: none !important;}
a:hover {text-decoration: none !important;}
hr {width: 100%; max-width: 400px; background:#d8a684; margin: 2.5vh 0;}
div { box-sizing: border-box; max-width: 100%;}
.row {margin: 0; }
.background-frame-left {background:#e5e5e5; width: 7vh; position:fixed; height:100%; left:0; top:0; z-index: -999;}
.background-frame-right {background:#e5e5e5; width: 7vh; position:fixed; height:100%; right:0; top:0;  z-index: -999;}

.content-padding{padding:3vh;}

.logo {text-align:center; padding: 5vh 5vh 3vh; margin-top: 7vh;}
.intro {margin: 0 auto 0 ; padding:0;}
.green-bar { position:absolute; bottom: 0; width:80%; right:0; height: 5vh; margin: 0; padding: 0;}
.intro .col-lg-5 {padding: 0; min-height:15vw;}
.intro .col-lg-7 {padding: 1vw 4vw;}
.intro h2 {text-align:center; margin-left:-40px; max-width: 400px; font-size: 25px; margin: 1vw auto;}
.intro p {max-width: 800px; line-height: 1.7;  margin: 1vw auto;}
.intro img {width: 23vw; bottom: 0; margin: 0 auto; padding: 0;}
.drop-cap {font-weight: 200; font-size: 60px; float:left; line-height:.9; margin-right:5px; font-family:'capitolium-2';}
p.min {font-size: 12px;}
svg#detach-button {display:none !important; opacity: 0 !important;}
video {transition: all ease 1s; cursor: pointer;}
hr {
    margin: 2.5vh auto;
}




.grey-bars {background:url(img/bars.png); padding:0; border-top:1px solid #ccc; border-bottom: 1px solid #ccc; margin: 7vh 0;}
.quote {padding: 8vh 8vw; text-align:left; background: whitesmoke; width: 80%; max-width: 1700px; margin: 0 auto;}
.quote p {margin: 15px 0 0 0;}

.testimonial {padding: 8vh 2vw; text-align:left; width: 80%; max-width: 1700px;}



#services {}
.services-header {min-height:20vh; right: 0; vertical-align:middle; height: 100%; padding: 0;}
.services-header h1 {color:whitesmoke; background:#245D38; text-align:left; width:80%; float:right; padding: 2vh 4vh; vertical-align:middle; margin: 5vw 0 0;}
.col-sm-5.ghost-logo {
    text-align: center;
}

.services-row {max-width:1200px; margin: 100px auto; padding: 0 50px;}
.services-row h2 {margin-bottom: 20px;}
.services-row img{width:100%; padding: 0 2vh 0 0; margin: 0 0 2vh;}
.services-row .col-sm-3 {text-align:center;}
.services-row hr {margin: 0 0 2vh;}


.blog-row { width: 100%; margin-bottom: 5vh;}
.blog-row .col-lg-3 { background: #245D38; color: whitesmoke !important; padding: 2vh 4vh; text-align:right; height: 100%;}
.blog-row .col-lg-3 h1 {color:whitesmoke;  vertical-align:middle;}
.blog-row .col-lg-9 {padding: calc(20px + 2vw) calc(20px + 5vw) calc(20px + 2vw) calc(20px + 2vw); border-left: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.blog-row .col-lg-9 p {font-size: calc(10px + .3vw); max-width: 90%;}
.blog-row .col-lg-9 h2 a {font-size: calc(12px + 1vw); color: #245D38;}
.blog-row .col-lg-9 a {font-weight: 700; color: #245D38; transition: all ease .3s;}
.blog-row .col-lg-9 a:hover {color: #d8a684;}
#comments {display:none;}
.entry-title {font-size: calc(15px + 1.5vw) !important; letter-spacing: .05em !important; text-align:center;}
.entry-title a { color: #245D38;}
article a, .home-btn {color: #245D38 !important; transition: all ease .3s;}
article a:hover, .home-btn:hover {color: #d8a684 !important;}
time {font-size: calc(12px + .5vw);}
.home-btn {font-size: calc(12px + 1vw);}
.home-btn:hover:before {content:"RETURN HOME"; padding-right: 10px; font-size: 12px; opacity: .5;}


.success-header {min-height:20vh; left: 0; vertical-align:middle; height: 100%; padding: 0;}
.success-header h1 {color:whitesmoke; background:#245D38; text-align:right; width:80%; float:left; padding: 2vh 4vh; vertical-align:middle; margin: 5vw 0 0;}
/* #success .ghost-logo {float:right;} */


.success-left {text-align:left; clear:both; padding: 2vh 13vw;}
.success-right {text-align:right; float:right; padding: 2vh 13vw;}
.success h2 {font-size: 25px; line-height: 1; margin: 8px 0;}
.success-left h2{padding-left:2.3vw;}
.success-right h2 {margin-right:-2.3vw;}
.success {margin: 1vw auto 5vh; max-width: 2000px;}
.success p{margin-bottom: 0; max-width: 700px;}
.success h4 {margin-bottom: 0; max-width: 900px;}


.photos .overlay {background: rgba(216,162,132,.8); padding:1.5vh; text-align:center; height: 32.65vw; opacity: 0; transition: all ease .5s; width: 98%; margin: .35vw auto 0;}
.overlay h1 {vertical-align:middle; padding-top:13.5vw;}
.photos .overlay:hover {opacity:1;}
.photos {padding: 5vh 0;}
.photos .englishChannel {height: 33.3vw; background: url(img/EnglishChannel.jpg) no-repeat; background-size:98%; padding: 0; background-position:center center;}

.photos .vexatious {height: 33.3vw; background: url(img/Vexatious.jpg) no-repeat; background-size:98%; padding: 0; background-position:center center; margin-top:3vh;}

/*.photos .guildedGold {height: 33.3vw; background: url(https://chb.studio34productions.com/wp-content/uploads/2017/03/GildedGold.jpg) no-repeat; background-size:98%; padding: 0; background-position:center center; margin-top: -3vh;} */

.photos .maraud {height: 33.3vw; background: url(img/Maraud.jpg) no-repeat; background-size:98%; padding: 0; background-position:center center; margin-top: -3vh;}


#media {text-align:center;}
.media {max-width: 1200px; margin: 0 auto;}
.media a {opacity:.6; transition: all ease .5s; border:none;}
.media a:hover {opacity:1;}
.media img {max-width:80%;}
#media hr {margin: 5vh auto 2.5vh;}




footer {background: #245D38; width: 100%; padding: 8vh 0; color: white;}
footer p { letter-spacing: .1em; margin: 0;}
footer h2 {color:whitesmoke;  letter-spacing: .06em;
    margin-bottom: 2.3vh;}
footer a, footer a:visited, footer a:active, footer a:focus {color:#d8a684; transition: all ease .5s;  letter-spacing: .1em;}
footer a:hover {color:#d8b29e; text-decoration:none !important;}
footer hr {margin: 1.5vh auto;}
footer a.email-link {color:whitesmoke;}
footer a.email-link:hover {color:#d8b29e; box-shadow:5,5,5,#fff;}
footer p.min {padding-top: 3vw;}
.social-navigation ul {

    min-width: 200px;
}





@media screen and ( max-width: 1700px ) {
    .intro p {max-width: 600px;}
    .intro .col-lg-5 {padding: 0; min-height:23vw;}
    .intro img {width: 27vw; }
}

@media screen and ( max-width: 1200px ) {
    .intro .col-lg-5 img {padding-right: 20px;}
    .intro .col-lg-5 {min-height:150px;}
    .intro h2 {margin: 0 auto;}
    hr {margin: 2.5vh auto;}
    .success hr {margin: 2.5vh 0;}
    .intro .col-lg-7 {padding: 20px 50px;}
    .intro p {max-width: 100%; padding: 0 5vw; }
    h1 {font-size: 35px;}
    .intro img { min-width:400px}
    .services-row img{max-width: 200px; margin: 0 auto;}
    .background-frame-right, .background-frame-left {display:none;}
    .mobile-only {display:block;}
    .no-mobile {display:none;}
    .photos .overlay {padding:1.5vh; height: auto; opacity: 1; bottom: .35vw; position: absolute; width: 98%; left:.35vw;}
    .overlay h1 {padding-top:0; font-size: 18px;}
}

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

    .mobile-only {display:none;}
    .no-mobile {display:block;}


}


@media screen and ( max-width: 1023px ) {
    .intro img { min-width:350px; margin: 0 auto; position:relative; left: 25%;}
    .intro .col-lg-5 {min-height:200px; margin-top: -40px;}
    #media h2 {font-size: 24px; line-height: 1.5; max-width: 70%; margin: 0 auto;}
    #media hr {max-width: 70%;}



}

@media screen and ( max-width: 767px ) {
    .services-row {margin: 50px auto;}
    .intro img { min-width:400px}
    h2 {font-size: 18px;}
    h1 {font-size: 25px;}
    .intro .col-lg-5 {min-height:22U0px;}
    p, ul, li { font-size: 14px;}
    p.min { font-size: 10px;}
    .intro h2 {font-size: 18px; margin: 0 auto;}
    .drop-cap {font-weight: 200; font-size: 50px; line-height: .8;}
    #success .ghost-logo {float:none;}
    .photos .englishChannel {height: 100vw;}
    .photos .vexatious {height: 100vw; margin-top: 0;}
    .photos .maraud {height: 100vw; margin-top: 0;}

    .success-left {text-align:left; clear:both; padding: 4vh 13vw;}
    .success-right {text-align:right; float:right; padding: 4vh 13vw;}


}














/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0px; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #17492a;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    z-index: 9999;
}

/* The navigation menu links */
.sidenav .main-links a {
    padding: 20px;
    text-decoration: none;
    font-size: 18px;
    text-align:center;
    font-weight:200;

    color: #f5f5f5;
    display: block;
    transition: 0.3s ease all;
    transform: 0.3s ease all;
    border-bottom: 1px solid #245D38;
}

.sidenav .main-links a:nth-child(1) {border-top:1px solid #245D38;display:block; margin-top:12vw;}


.hamburger

{position:fixed; top: 2vh; right:2.2vh; z-index:1099;}


#hamburger {padding: 10px; transition: all ease .5s; border: 1px solid #e5e5e5;}

#hamburger:hover
{border: 1px solid #fff;}



/* When you mouse over the navigation links, change their color */
.sidenav  .main-links a:hover, .offcanvas a:focus{
    color: #e1e1e1; letter-spacing: .05em; background-color: #245D38;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 5px;
    padding: 20px;
    right: 0;
    font-size: 36px;
    margin-left: 50px;
    color: #d8a684;
    background: transparent !important;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;

}

@media screen and (max-height: 1023px) {

    .sidenav .main-links a:nth-child(1) {margin-top:7vw;}

}




/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 600px) {
    .sidenav {padding-top: 15px;}
    .sidenav  .main-links a {font-size: 14px; font-weight: 600; padding : 15px;  }
    .sidenav  .main-links a:nth-child(1) {margin-top:11vw;}

    .hamburger

    {position:fixed; top: 3.2vh; right:3.5vh; z-index:1099;}
}









div#testimonial_rotator_wrap_16 {
    padding: 0 !important;
    margin: 0 !important;
}


.testimonial_rotator.template-default .has-image .img, .testimonial_rotator_single.has-image.template-default .img { text-align:right !important; max-height: 200px; max-width: 275px;}


.testimonial_rotator.template-default .has-image .img img, .testimonial_rotator_single.has-image.template-default .img img {
    width: 100%;
    max-width: 170px;
    height: auto;
    float: right !important;
}

.testimonial_rotator.template-default .has-image .text, .testimonial_rotator_single.has-image.template-default .text {
    width: 72% !important; }




.outer {
    position: relative;
    width: 25px;
    top: 0px;
    right: 10px;
    cursor: pointer;
    height: 25px;
}

.inner {
    width: inherit;
    text-align: center;
}


.inner:before, .inner:after {
    position: absolute;
    content: '';
    height: 4px;
    width: inherit;
    background: #d8a684;
    left: 0;
    transition: all .3s ease-in;
    top:10px;
}

.inner:before {

    transform: rotate(45deg);
}

.inner:after {

    transform: rotate(-45deg);
}




.outer:hover .inner:after {
    transform: rotate(45deg);
    background: #f1f1f1;
}

.outer:hover .inner:before {
    transform: rotate(-45deg);
    background: #f1f1f1;
}

.hamburger:hover path.copper {fill: #245D38;}


#facebook:hover path, #twitter:hover path {fill:#d8a684}

path {transition: all ease 1s;}




a.blog-link {
    font-size: calc(10px + .3vw);
    padding-top: 10px;
    border-top: 3px solid #e0e0e0;
    padding-right: calc(10px + 1vh);
}

/* //OG style */


.ticker {
    margin: 0 auto;
     text-align:center;
     max-width: 70vw;
     font-size: calc(12px + .23vw);
      border: 1px solid #d0d0d0;
     padding: 1.5vh 2vh;
     color: #245D38 !important;
     background: #e5e5e5;
     display: flex; /* Flexbox for vertical alignment */
     align-items: center; /* Center text vertically */
     justify-content: center; /* Center text horizontally */
 }
.ticker a {color: #245D38 !important; transition: all ease .5s;}
.ticker a:hover {color: #222 !important; text-decoration: none; }


.ticker-cont {
    width: 100%;
}
  
.ticker-cont div {
    display: none;
    animation: fadeInOut 15s linear infinite;
}

.ticker-cont div.active {
display: block;
}

.ticker-cont-2 {
    width: 100%;
}

.ticker-cont-2 .slide {
    display: none;
    animation: fadeInOut 12s linear infinite;
}

.ticker-cont-2 .slide.active {
    display: block;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { opacity: 0; }
}

.slide img {
    max-width: 200px;
    width: 40%;
    margin: 0px auto 20px;
    display: block;
}

.quote {padding: 8vh 8vw; text-align:left; background: transparent; width: 80%; max-width: 1700px; margin: 0 auto;}
.quote p {margin: 15px 0 0 0;}

.blank-white-background-box {
    height: 100%;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: whitesmoke;
    max-width: 1700px;
    padding: 8vh 8vw;
}

.bg-whitesmoke {background-color: whitesmoke;}

@media screen and (max-width: 767px) {
    .slide img {
        width: 70%;
    }
    .testimonial {
        padding: 20px 15px;
    }
}

#testimonials {
    min-height: 700px;
}

.top-ticker {
    min-height: 250px;
}