/****for essence goldman****/

@font-face {
    font-family: droidSerifBold;
    src: url(../fonts/DroidSerif-Bold.ttf);
}

@font-face {
    font-family: droidSerifRegular;
    src: url(../fonts/DroidSerif-Regular.ttf);
}

body {
    color: #737373;
    font-family: "Raleway", sans-serif;
}

h1 {
    font-size: 2.6rem;
    color: #737373;
    //font-family: Raleway, sans-serif;
    font-family: droidSerifRegular, Raleway, serif;
    font-weight: 700;
}

h2 {
    //font-family: Raleway, sans-serif;
    font-family: droidSerifRegular, Raleway, serif;
    font-size: 1.7rem; 
    font-weight: 700;
    color: #737373;
}

h3 {
    font-size: 1.3rem;
    font-family: Raleway, sans-serif;
}

.row.spacer {
    height: 70px;
}

.row.sub h1 {
    text-align: center;
    margin-bottom: 20px;
}

.row.sub1 h1 {
    text-align: center;
    margin-bottom: 20px;
}

.row-top-override {
    padding: 0;
}

.sub-page-header {
    //margin-bottom: 25px;
}

.center {
    text-align: center;
}

/*********************Menu*********/

.header-menu {
    height: 100px;
    width: 100%;
    padding: 10px;
    text-align: center;

}

.menu-left, .menu-right {
    height: 100%;
    font-weight: bold;
}

.header-menu li {
    list-style-type: none;
    display: inline;
}

.header-menu ul {
    height: 100%;
}

.menu-right ul, .menu-left ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    margin: 0;    
}

.logo {
    height: 80px;
  max-width: 80px;
}

.menu-book-btn {
    display: inline-block;
}

.slicknav_menu {
    display: none;
}

li#home-link {
    display: none;
}


/***********************Hero Banner************************/

.home-hero {
    
    background: url(../images/green_overlay_1301bg_straight.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    //min-height: 500px;
    //max-height: 440px;
    //padding-top: 40px;
    max-height: 400px;
    background-color: #7ac4b3;
    display: flex;
    align-items: center;
    
}
.home-hero_2 {
    background: url(../images/banner_essence_3.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    /*background-color: #7ac4b3;*/
    display: flex;
    align-items: center;
    height:0;
    padding-top: 40.64%; /* (img-height / img-width * container-width) */
                /* (1298 / 3196 * 100) */
}

.workshop-content li { font-weight:bold; line-height:3;}
.main-cont {
    text-align: center;
    padding: 50px 0;
}

.main-cont .button {
    background-color: #89dbc7;
}

.main-cont a:hover {
    background-color: #98ad98;
}

.home-tag {
    line-height: 65px;
    color: #FFF;
    /*font-size: 3.5em;*/
    font-size: 3.5rem;
    //font-size: 4rem;
    font-weight: 700;
    //font-family: "Libre Baskerville", serif;
    font-family: droidSerifBold, Raleway, serif;
    margin-bottom: 30px;
}

.main-cont h2.head-claim  {
    text-transform: uppercase;
    line-height: 55px;
    color: #FFF;
    font-size: 2.3rem;
    font-weight: 700;
    //font-family: "Libre Baskerville", serif;
    font-family: droidSerifRegular, Raleway, serif;
    margin-bottom: 23px;/*40px*/
}

.hero-header {
    /*font-size: 1.8em;*/
    //font-size: 1.8rem;
    font-size: 2.2rem;
    margin-bottom: 0px;
    color: #FFF;
    font-family: Cinzel, serif;
    font-weight: 700;
}



.hero-header {
    //margin-bottom: 30px;
}

.hero-header span {
    font-size: .7em;
}


/*********************sub-page-header**************/

section.sub-hero {
    background-color: #7ac4b3;
    text-align: center;
}

.sub-hero h1 {
    color: #FFFFFF;
    padding: 40px;
}

/*********************clients******************/

.sub {
    padding: 20px 20px;
}

.sub1 {
    padding: 10px 20px;
}

.past-clients {
    //background-color: #FFCD7C;
    //background-color: #FFDB9F;
    background-color: #C4F8EB;
    padding-top: 10px;
    color: #737373;
}

.client-head {
    font-size: 1.3rem;
    color: #737373;
    font-family: Raleway, sans-serif;
    font-weight: 700;
    margin-bottom: 0;
    float: left;
    position: relative;
    top: 18px;
}

.client-list {
    list-style-type: none;
    font-size: 2.3em;
    font-weight: 500;
    display: flex;
    -webkit-flex: row;
    -moz-flex: row;
    -ms-flex: row;
    -o-flex: row;
    flex: row;
   
}

.client-list li {
    flex: 1;
}

/********************video*********************/

.fyv-vid {
    padding-top: 40px;
}


/********************courses*****************/

.workshop-name {
    font-weight: 900;
    font-style: italic;
}

.work-img {
    display: block;
    margin-bottom: 20px;
}

.create, .perform {
    padding: 0 40px;
}

.service-description {
    font-size: 1.2em;
    font-weight: 600;
    padding-right: .4em;
    padding-left: .4em;
    color: #737373;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 30px !important;
    text-align: center;
}

.service-description_1 {
    font-size: 1.2em;
    font-weight: 600;
    color: #737373;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px !important;
    text-align: justify;
}

.book-btn {
    text-align: center;
}
.book-btn_1 {
    text-align: left;
}
.about-text p { text-align:justify; }
/********************about******************/

.about-essence {
    margin: 40px 0;
}

.roles {
    font-size: .9em;
    font-weight: 700;
    margin-top: 20px;
    color: #737373;
    text-align: center;
}

.about-image {
    margin-bottom: 30px;
}


/******************testimonials - contact**************/



.button {
    margin-top: 21px;
    /*background-color: #9bdbdd;*/
    //background-color: #89dbc7;
    background-color: #2ba6cb;
    font-size: 1.2em;
}

.promise-wrap {
    background-color: #B6AF91;
    color: #FFF;
}

.phonenum {
    font-size: 1.4em;
}

.phonenum a {
    color: #976868;
}

.testimonials {
    background-image: url(../images/couch_bg_seafoam.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: 450px;
    position: relative;
    margin: 40px 0;
}

.contact {
    padding-bottom: 20px;
}

.test-text {
    color: #FFF;
    margin-top: 18%;
    text-align: center;
}

.test-text h3 {
    font-weight: 700;
    text-align:justify;
}

.contact-text {
    text-align: center;
}

p.callto {
    font-size: 2em;
}


/********************gallery*****************/

.gallery .column-block {
    text-align: center;
}


/*****************lessons*******************/

.lessons {
    margin-bottom: 30px;
}


/*********************blog********************/

section.blogs {
    margin-top: 25px;
}

.article + [data-readmore-toggle] {
    margin-top: 20px;
    display: inline-block !important;
    padding-left: 0.9375rem;
}

.blog-image {
    margin-bottom: 30px;
}

.blog-title {
    margin-bottom: 10px;
}

/**********************impact**************************/

section.challenges-sectors {
    color: #FFF;
    padding: 60px;
    background-image: url('../images/impact-header-image@2x.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 50px;
}

section.challenges-sectors h3 {
    font-size: 1.9em;
    font-weight: bold;
}

.impact-content {
    text-align: center;
}

.impact-content ul {
    margin-left: 0;
}

.impact-content li {
    list-style-type: none;
}

/*********************impact testimonials**************/

section.social-work-club h2 {
margin-bottom: 20px !important;
    text-align: center;
}

span.officer-title {
display: block;
}

.club-officers {
background-color: #FFF;
margin-bottom: 30px;
}

.club-text {
padding: 1.5em 3% 1em !important;
}

.club-text h3 {
font-size: 1.9em;
    font-weight: bold;
}

.club-image {
padding: 1.5em 0 1.5em 1.5em !important;
    text-align: center;
}

.club-image img {
    max-width: 300px;
}

@media only screen and (max-width: 640px) {
.club-image {
padding-bottom: 0 !important;
}
}

@media only screen and (max-width: 400px) {
.club-image {
padding: 1.5em 0 0 0 !important;
text-align: center;
}
.club-text {
padding: 1.5em 1em 1em !important;
}
}

@media only screen and (max-width: 370px) {
.club-image {
padding: 1em 0 0 0 !important;
}
}

@media only screen and (max-width: 340px) {
.club-image {
padding: 0 !important;
}
}

/***************** summer camp*****************/
.camp-course {
    box-shadow: 0 0 8px 0 #a8a8a8;
    padding-top: 15px;
    z-index: 50;
}

.camp-course-img {
    box-shadow: 0 0 8px 0 #a8a8a8;
    width: 100%;
}

.callto ul {
    margin-left: 0;
}
.callto ul li {
    list-style-type: none;
}

.bios-image {
    margin: 20px;
}

.more-links {
    text-align: center;
}

/******************************summer camp form******************/
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}



/*********************footer******************/

.footer {
    height: auto;
    /*background-color: #9bdbdd;*/
    background-color: #89dbc7;
    text-align: center;
    padding: 60px 0 30px;
}

.footer h2, .footer h3, .footer h4 {
    color: #FFF;
}

.socials {
    padding-top: 0;
}

.socials a {
    width: 24%;
    display: inline-block;
    color: #FFF;
}

.footer a:hover {
    color: #258dad;
}

.footer i {
    font-size: 2.5em;   
}

.others {
    padding-top: 0;
}

.others a {
    width: 38%;
    display: inline-block;
    color: #FFF;
    padding: 10px;
    border: 2px solid #FFF;
    font-weight: bold;
    margin-bottom: 20px;
}

.credits {
    padding-bottom: 40px;
}

.credits a {
    color: #000;
}

.credits p {
    font-size: .85em;
}


/**************MEDIA QUERIES******************/

/****************phone*****************/

@media only screen and (max-width: 640px) {
    
    h1 {
        font-size: 2.1em;
    }
    
    .home-tag {
        font-size: 2.8em;
        margin-bottom: 10px;
        line-height: 57px;
    }
    
    .hero-header {
        font-size: 1.5em;
    }
    
    .main-cont .head-claim {
        font-size: 2.5em;
        margin-bottom: 20px;
        line-height: 57px;
    }
    
    .main-cont h2.head-claim {
        font-size: 2.3em;
        margin-bottom: 20px;
        line-height: 50px;
    }
    
    .service-description {
        font-size: 1em;
    }
    
    .main-cont {
        position: inherit;
        top: auto;
    }
    
    .home-hero {
        background-position: 46% top;
    }
    
    .client-head {
        float: none;
        position: inherit;
    }
    
    .client-list {
        flex-direction: column;
        margin-left: 0;
    }
    
    .about {
        padding: 0;
        margin-bottom: 30px;
    }
    
    .roles {
        font-size: 1rem;
    }
}

/************small phone*****************/

@media only screen and (max-width: 400px) {
    .home-hero {
        padding-top: 0;
    }
    .head-claim {
        font-size: 2.1em;
        padding: 0 10px;
    }
}


/***************tablet*****************/

@media screen and (max-width: 1024px) {
    .workshop-content {
        padding: 0;
    }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
    .home-tag {
        font-size: 3rem;
        margin-bottom: 15px;
    }
    
    .main-cont {
        top: 13%;
        font-size: 90%;
    }
    
    .main-cont .head-claim {
        font-size: 2.5rem;
        line-height: 55px;
    }
    
    .home-hero {
        background-position: 74% top;
    }
    
    .service-description {
        font-size: 1rem;
        max-width: 400px;
    }
    
    .club-image {
        text-align: left;
    }
}

@media screen and (max-width: 640px) {
    .js #menu {
        display: none;
    }
    
    .js .logo  {
        display: none;
    }
    
    .header-menu {
        display: none;
    }
    
    li#home-link {
        display: block;
    }
    
    .js .slicknav_menu {
        display: block;
        //height: 100px;
        background-color: #FFF;
        background-image: url('../logo_blue_2.svg');
        background-size: 50px;
        background-position: 15px 5px;
        background-repeat: no-repeat;
        padding: 10px 0;
    }
    
    .slicknav_nav {
        margin-top: 50px;
    }
    
    .slicknav_nav li:last-child {
        display: none;
    }
    
    .slicknav_nav li.home-icon {
        display: none !important;
    }
    
    .slicknav_nav li a {
        color: #2ba6cb;
        border-bottom: 1px solid rgba(115,115,115,0.3);
    }
    
    .slicknav_menu .slicknav_icon-bar {
        background-color: #2ba6cb;
    }
    
    .slicknav_btn {
        background-color: #FFF;
    }
    
    section.challenges-sectors {
        padding: 35px;
    }
    
}


/********************desktop*******************/

@media only screen and (min-width: 1024px) {
    
    .head-claim {
        margin-bottom: 15px;
    }
    
    .roles {
        font-size: 1.2em;
        margin-bottom: 40px;
    }
    
    .promise-wrap {
        display: none;
    }
    
    .test-text {
        margin-top: 6%;
    }
}

@media only screen and (min-width: 1500px) {
    
    p.service-description-head {
        //max-width: 618.391px;
    }
    
    .hero-header {
        //font-size: 3rem;
    } 
    .home-hero {
        //min-height: 560px;
        background-size: contain;
        background-position: right top;
    }
    .home-tag {
        //font-size: 5rem;
    }
    .main-cont h2.head-claim  {
        //margin-bottom: 60px;
    }
    
    .main-cont {
        width: 100%;
    }
}