/* ---------------------------------------------------------
   common styles
   ---------------------------------------------------------*/
body {
    min-width: 320px;
    background: #baccf3;
    color: #fff;

    font-weight: 400;
    font: 33px/35px Arial, Helvetica, sans-serif;
    text-align: center;
}
   html, body {
    height: 100%;
}


#wrapper {
	overflow: hidden;
	width: 100%;
	height: 100%;
	display: table;
    table-layout: fixed;
    background: url(../img/bgr-dassalo.jpg) center 0 no-repeat;
    background-size: 50%;
}



h1, h2, h3, h4, h5, h6 {font-family: 'Oswald', Helvetica, Arial, sans-serif;margin: 0px 0px 8px;color: #ecd1a1;text-transform: uppercase;}
a{transition: 0.5s;text-decoration: none;}
h1 {
}
.h1, h1 {
    font-weight: 500;

}
h2{font-size: 24px;font-weight: 500;}
h3{font-size: 21px;letter-spacing: .4px;}
h3,h4,h5,h6 {font-weight: 300;}
h4{font: 17px/21px 'Nunito', Helvetica, Arial, sans-serif; font-weight: 700; color: #ecd1a1;margin-top: 3px;margin-bottom: 7px;text-transform: none;}
a {color: #ecd1a1;}
a:hover{text-decoration: none;color: #ecd1a1;}
#intro {background: none;}
#intro p { font-weight: 400;
    font: 16px/22px 'Nunito', Helvetica, Arial, sans-serif;margin:0px 0px 16px;}
input {font-size:14px;padding:5px 8px;border-radius:3px;background: #e8ddd3;color:#24170c;border:0px solid;width: 77%;}
input[type="submit"] { letter-spacing:.6px; text-transform:uppercase;font-family: 'Nunito', Helvetica, Arial, sans-serif;background: #b46e2d;cursor: pointer;transition: 0.5s;width: auto; color: white;margin-top: 15px;}
input[type="submit"]:hover {color:#7e7368;background: #eaddd2;}
#footer_area textarea {font-size:14px;color:#7e7368;
    padding:4px 8px 5px;border-radius:3px;background: #e8ddd3;border:0px solid;width: 77%;resize: none;
}
input[type="submit"]{cursor: pointer;transition: 0.5s}



#header_area {padding: 13px 0px 54px;}
.social_area {
	width: 50%;
	float: left;
	/* padding: 30px 60px 18px; */
	padding-left: 8%;
	padding-top: 30px;
    padding-bottom: 18px;
    text-align: left;
}

.social_area ul{margin: 0;padding: 0;list-style: none;}
.social_area ul li{display:inline-block;margin-right: 18px;} 
.social_area ul li a{transition:0.2s;color: #ecd1a1; font-size: 24px; display: block;text-align: center;padding-top: 5px;} 
.social_area ul li a:hover{color: #78b8e5;transition: 0.5s;} 


a.readmore{display: inline-block; background: #3bafbe;padding: 6px 9px 5px;border-radius: 4px;color: white;text-decoration: none; text-transform: uppercase; margin: 0px 0px 18px;font-size: 14px;}

a.readmore:hover{background: #ecd1a1 none repeat scroll 0 0;color: #24170c;}

#music a.readmore{display: inline-block; background: none; border: 2px solid #ecd1a1;padding: 6px 9px 5px;border-radius: 4px;color: white;text-decoration: none; text-transform: uppercase; margin: 0px 12px 20px 0px;font-size: 14px;font-weight: 700;}
#music a.readmore:hover{display: inline-block; background: #ecd1a1; border: 2px solid #ecd1a1;padding: 6px 9px 5px;border-radius: 4px;color: #2f1e0f;text-decoration: none; text-transform: uppercase; margin: 0px 12px 20px 0px;font-size: 14px;font-weight: 700;}

.media-kit a.readmore{display: inline-block; background: none; border: 2px solid #ecd1a1;padding: 4px 7px 3px;border-radius: 4px;color: white;text-decoration: none; text-transform: uppercase; margin: 0px 0px 20px 13px;font-size: 12px;font-weight: 700;}
.media-kit a.readmore:hover{display: inline-block; background: #ecd1a1; border: 2px solid #ecd1a1;padding: 6px 9px 5px;border-radius: 4px;color: #2f1e0f;text-decoration: none; text-transform: uppercase; margin: 0px 0px 20px 10px;font-size: 14px;font-weight: 700;}

.breaker {width:100%;height: 2px;background: #ecd1a1;margin: 29px 0px 38px;}
.breaker-sml {
	position: relative;
	margin: 29px auto 27px;
	width: 60%;
	height: 1px;
	background: #ecd1a1;
}


/* ---------------------------------------------------------
   signup area style
   ---------------------------------------------------------*/
   .contact_area {
	text-align: right;
	width: 30%;
	float: right;
	/* padding: 30px 80px 18px; */
	color: #ecd1a1;
	font-weight: 300;
	padding-right: 8%;
	padding-top: 30px;
    padding-bottom: 18px;
    font: 'Nunito', Helvetica, Arial, sans-serif;
}
.contact_area i{font-size:27px;}


/* ---------------------------------------------------------
   slider/banner style
   ---------------------------------------------------------*/

#banner_area {
	width: 60%;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	border: 5px solid #ecd1a1;
	border-radius: 3px;
	box-shadow: 0px 0px 19px #5e3a17;
}
#banner_area img{width: 100%;height: auto;}




/* ---------------------------------------------------------
   intro / main callout area style
   ---------------------------------------------------------*/
 
   #intro{padding: 65px 0;}

#intro .col-md-4:nth-child(1) {
    padding-right: 61px; }
    #intro .col-md-4:nth-child(3) {
        padding-left: 61px; }
        #intro .col-md-4:nth-child(2) {
            padding-left: 0px; }
            #intro h6::before {content:"–";padding-right: 9px;}
            #intro h5 {  color:#fff;margin-top: 14px;}

            #intro h6 {font-size:18px; padding-left: 44px; color:#78b8e5;margin-bottom: 25px;}
            #imageThumb1 {
                background-color: #333;
                width: 100%;
                height:200px;
             
                overflow: hidden;
                margin-bottom: 20px;
            }
            

            #imageThumb2 img{
                width: 25%;
              height: 50%;
              
              -webkit-mask: url('../img/news-mask5r.svg') center center / cover;
              -webkit-mask-size: 100% 100%;
              -webkit-mask-repeat: no-repeat;    transition: all ease .9s;
            
            }
            #imageThumb2 img:hover{
                -webkit-mask-size: 200% 200%;
                transition: all ease 2s;
                border-radius: 6px;
            }



            #imageThumb3 img{
                width: 25%;
              height: 50%;
              
              -webkit-mask: url('../img/news-mask6br.svg') center center / cover;
              -webkit-mask-size: 150% 150%;
              -webkit-mask-repeat: no-repeat;    transition: all ease .9s;
              border-radius: 6px;
            
            }
            #imageThumb3 img:hover{
                -webkit-mask: url('../img/news-mask6br.svg') center center / cover;

                -webkit-mask-size: 100% 100%;
                transition: all ease 1s;
            }


            #intro img{display: block;width: 100%;height: auto;margin-bottom: 20px;}

        #intro .aliamos {
            background: none;
            -webkit-background-size: contain;
            -moz-background-size: contain;
            -o-background-size: contain;
            background-size: contain;
        }



/* ---------------------------------------------------------
   services / smaller snippet area style
   ---------------------------------------------------------*/
#service_area{border:none;}
#service_area .col-md-10 h4{            font-family:'Oswald', Helvetica, Arial, sans-serif;text-transform: uppercase;
    color:#b9997a;font-size:22px;line-height:28px;text-align: center;font-weight: 700;font-style: italic;margin-bottom: 48px;}
#service_area .col-md-4 img{float:left;margin-right:10px;margin-bottom: 10px;width: 25%;height: auto;}
#service_area .col-md-4 h4{font-size: 15px;font-weight: 700;margin-bottom: 10px;}
#service_area .col-md-4 h4 a{color: #3bafbe;}
#service_area .col-md-4 p{font-size: 12px;line-height: 1.3em;}
#service_area .col-md-4 {margin-bottom: 15px;}
.service-foot-bgr {background: none;
background-position: right 180px bottom;
background-size: 642px 424px;
}

#service_area img {margin-top: 0px;}
#service_area .embed-responsive-21by9 {margin-bottom: 14px;}
#service_area h6 {padding-left: 0px;}
#service_area h6:before {padding-left: 0px;content: none;}



/* ---------------------------------------------------------
   footer area style
   ---------------------------------------------------------*/
#footer_area{padding: 40px 0 120px; color: white;}
  
#footer_area h3{font-size: 20px;margin-bottom: 12px;}
#footer_area ul {margin:0;padding:0;list-style: none;}
#footer_area ul li {width:90%; display: block;margin-bottom: 7px;border-bottom: 1px solid #858585;padding: 13px 0 0;}
#footer_area ul li a{color: #3bafbe;display: block}
#footer_area input{margin-bottom: 12px;}
#footer_area .container {
    padding:0px 44px 0px;
    text-align: center;
}
.footer-logo {
background: none;
background-position: top 32px center;background-size: 34% ;
}
.footer-vert-mid {
    margin-top:12px;
}
#footer_area p { font-weight: 400; font: 15px/23px 'Nunito', Helvetica, Arial, sans-serif;margin-top:13px;}

/* ---------------------------------------------------------
   copyright area style
   ---------------------------------------------------------*/
#copyright{font:14px/18px 'Oswald', Helvetica, Arial, sans-serif;font-weight: 300; text-transform:uppercase;padding: 40px 0;color: white;}
#copyright p{margin:0 0 12;}
#copyright .col-md-6:last-child{text-align: right;}
#copyright .col-md-6:first-child{text-align: left;}
#copyright{background: none;   background-size:contain;    background-position: center bottom;
}

/* ---------------------------------------------------------
   NAV 2  area style
   ---------------------------------------------------------*/
.bg-light {
	background-color: #fff !important;

	line-height: 1em;
	margin: 0px 0px 18px 0px;
	padding: 0px;
}



.carousel-caption {
	position: absolute;
    width: 100%;
    left: 0;right: 0;
	bottom: 0px;
	z-index: 10;
    padding:20px 36px 0px;
	color: #fff;
    background: rgba(33, 33, 33, .7)
}

.carousel-caption p {
   display: inline-block; font: 14px/18px  'Nunito', Helvetica, Arial, sans-serif;text-transform: uppercase;
}
.carousel-caption h5{
    display: inline-block; padding-right: 15px;
 }
.carousel-indicators {
    display: none;
}


.embed-responsive-16by9 {
    margin-bottom: 58px;
}

/* ---------------------------------------------------------
   INNER adjustments
   ---------------------------------------------------------*/
.col-md-9 {padding-left: 90px;
    text-align: left;
}


#intro .tour h4 {
    font-size: 21px;margin-top: 33px;
    color: #ecd1a1;
}

#intro .tour h5 {
    letter-spacing: .3px;
    color:#a0cded;
    margin:23px 0px 4px;
    font: 16px/20px 'Nunito', Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: none;
}
#intro .tour h3 {
  
    margin-bottom: 0px;
  
}
.tour .col-lg-6 {padding-left: 0;padding-right:0;margin-left:0;margin-right: 0; }





/* ---------------------------------------------------------
   Bootstrap 4 Media Breakpoints
   ---------------------------------------------------------*/

   /*- // Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap -*/

#banner_area {width: 80%;border: 2px solid #ecd1a1;}
#intro {
	padding: 0px 0px 65px;
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
    #intro {
        padding: 65px 0;
    }
    .carousel-inner {height: 35vh;}
    .carousel-item {height: 35vh;}
    .carousel-item img {  
        position: absolute;  
        top: 0;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        margin: auto;}
        #banner_area {width: 80%;border: 2px solid #ecd1a1;}

        

 }



/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
    .carousel-inner {height: 37vh;}
    .carousel-item {height: 37vh;}
    .carousel-item img {  
        position: absolute;  
        top: 0;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        margin: auto;}
        #banner_area {width: 80%;border: 2px solid #ecd1a1;}
        

.tour .col-lg-6:first-child{padding-left:0; padding-right: 0;}
.tour .col-lg-6:nth-child(2) {padding-left: 0;padding-right:0;}

    }





/* INBETWEENER JOEL FOR INTRO BGR */
@media (max-width: 991px) { 
    #intro{
        background: none;
        background-size: 612px 405px;
        background-position: right 0px bottom;
      }
      #intro .col-md-4:nth-child(1) {
        padding: 0px 0px;
        float: left;
        flex: 0 0 44%;
        max-width: 44%;
        margin: 0 auto;

    }
     #intro .col-md-4:nth-child(3) {
        padding: 0px 0px;
        float: right;
        flex: 0 0 44%;
        max-width: 44%;
     margin: 0 auto;
    }
   

    #intro .col-md-4:nth-child(2) {
        display:none;
        position: relative;
        float: left;
    }
    .container {
        max-width: 88%;
    }
   #intro .col-md-3  {
       width: 47%;
       flex: 0 0 47%;
       max-width: 47%;
       padding: 0px 20px 0px 0px;
       margin: 0 auto;
   }
   #intro .main  {
    width: 47%;
    flex: 0 0 47%;
    max-width: 47%;
    padding: 0px 0px 0px 20px;
    margin: 0 auto;
}


 }



/* INBETWEENER JOEL FOR INTRO SML */
@media (max-width: 680px) { 
   
    #intro .col-md-4:nth-child(1) {
      padding: 0px 0px;
      width: 90%;
      flex: 0 0 90%;
      max-width: 90%;
      margin: 0 auto;
display: block;
float: left;
  }
   #intro .col-md-4:nth-child(3) {
      padding: 0px 0px;
      width: 90%;
      flex: 0 0 90%;
      max-width: 90%;
   margin: 0 auto;
   display: block;
   float: left;
  }
 

  #intro .col-md-4:nth-child(2) {
      display:none;
      position: relative;
      float: left;
  }

}



/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    #intro {
        background-size: 816px 540px;
        background-position: left 0px bottom;

    }
    .carousel-inner {height: 38vh;}
.carousel-item {height: 38vh;}
.carousel-item img {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;}
    #banner_area {width: 60%;border: 5px solid #ecd1a1;}

    .tour .col-lg-6:first-child{padding-left:0; padding-right: 30px;}
    .tour .col-lg-6:nth-child(2) {padding-left: 30px;padding-right:0;}
    
 }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 


    .carousel-inner {height: 45vh;}
    .carousel-item {height: 45vh;}
    .carousel-item img {  
        position: absolute;  
        top: 0;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        margin: auto;}

        #banner_area {width: 60%;border: 5px solid #ecd1a1;}

        #footer_area p { padding: 0px 59px;}

}



/* JOEL ADDED Extra EXTRA large devices (large desktops, 1400px and up)*/
@media (min-width: 1400px) { 
    
    .carousel-inner {height: 52vh;}
    .carousel-item {height: 52vh;}
    .carousel-item img {  
        position: absolute;  
        top: 0;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        margin: auto;}
        #banner_area {width: 60%;border: 5px solid #ecd1a1;}

        #service_area .col-md-10 h4 {
         
            padding-left: 58px;
            padding-right: 58px;
        }

        #service_area .embed-responsive-21by9 {margin-bottom: 47px;}

        
 }





/* ---------------------------------------------------------
   screens and handheld styles
   ---------------------------------------------------------*/
@media only screen and (min-width:200px) and (max-width: 768px)
{
.social_area ul{text-align: center;}
.logo{float: none; margin:0 auto 20px; text-align: center; }
.banner_textarea{width: 90%;}
.main_banner{text-align:center; width: 50%;}

    .main_banner h3{text-align:center;font-size: 16px;}
    .main_banner .readmore {font-size:14px; padding:5px 10px;}
    .main_banner p{display: none;}
#intro .col-md-4 h3{font-size: 24px;margin-bottom:8px;}
#intro .col-md-4 p{line-height: 1.4em;margin-bottom: 13px;}
#intro .col-md-4 .readmore{font-size:14px; padding:5px 10px;}
#intro .col-md-4 img{margin-bottom: 15px;margin-top: 40px;}

#intro .col-md-4 {margin-bottom: 18px;}
#intro {padding-left: 12px;padding-right: 12px;}


#footer_area .col-md-3{margin-bottom: 20px;}
#service_area .col-md-10 h4{font-size:23px;margin-top: 0px;margin-bottom: 55px;padding:0px 16px;}
#service_area {padding:50px 0px 0px;}
#copyright p{text-align: center;margin-top: 15px;padding:0px 54px;}
#footer_area {padding: 20px 22px;}



.nav-link a {padding:0px 0px;padding-right:0px; padding-left: 0px;}



.contact_area {
	text-align: center;
	width: 100%;
	float: left;
	padding: 30px 10px 18px;
}


.social_area {
    display:none;
}

.footer-logo {
    background: url(../img/jeremiah-footer-logo.png)no-repeat;
    background-position:  center;background-size: 24% ;
    height: 111px;display: block;margin: 29px 0px 46px;
    background-size: contain;
}

#service_area .col-md-10 h4 {margin-bottom: 40px;}
#service_area {
	padding: 0px 0px 0px;margin-top: 0px;
}

/* ---------------------------------------------------------
   NAV 2  RESPONSIVE area style
   ---------------------------------------------------------*/
.container {
    max-width: 96%;
}
.navbar-toggler { 
margin: 0 auto;	
}


}




/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 


    #intro {
        padding: 22px 0 45px;
    }

    #imageThumb3 img{
      -webkit-mask: url('../img/news-mask5r.svg') center center / cover;
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;    transition: all ease .9s;
    
    }
    #imageThumb3 img:hover{
        -webkit-mask-size: 200% 200%;
        transition: all ease 2s;
        border-radius: 6px;
    }

    .gallery-block.compact-gallery .item {
        overflow: hidden;
        margin-bottom: 0;
        background: none;
        opacity: 1;
        /* padding: 11px; */
        width: 40%;
        padding: 0px;
        margin: 0 auto;
    }

    .gallery-block.compact-gallery .item .description {
        display: none;
      
    }

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 


    #service_area .col-md-4 img {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        width: 100%;
        height: auto;
    }
    

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 



}




/* ----------- iPad  ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {

    
    .navbar { 
           float:right;
        }
        #intro .col-md-4 img {
            margin-top: 0;
        }
        .tour .col-lg-6 {
            width: 40%;
            margin: 0 auto;
            padding: 0px 44px;
        }

        #intro {
            padding: 25px 0 45px;
        }
      
}




/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
 {

  
    
    
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
{

}



/* ----------- Desktop sized as iPad  ----------- */
@media only screen and (min-width:768px) and (max-width: 1024px)
{

    .navbar { 
float: right;        
}

}

@media (min-width:0px) and (max-width:768px) {
    #intro .main {
        width: 88%;
        flex: 0 0 88%;
        max-width: 88%;
        padding: 0px 0px 0px 0px;
        margin: 0 auto;
    }
    .col-md-9 {text-align: center;
    padding:0px;
    }
    #intro h6 {padding-left: 0px;}

}



h1 {
    font-size: 22px;
  }
  @media screen and (min-width: 320px) {
    h1 {
      font-size: calc(22px + 16 * ((100vw - 320px) / 680));
    }
  }
  @media screen and (min-width: 1000px) {
    h1 {
      font-size: 38px;
    }
  }


  h2 {
    font-size: 18px;
  }
  @media screen and (min-width: 320px) {
    h2 {
      font-size: calc(18px + 6 * ((100vw - 320px) / 680));
    }
  }
  @media screen and (min-width: 1000px) {
    h2 {
      font-size: 24px;
    }
  }



  h3 {
    font-size: 15px;
  }
  @media screen and (min-width: 320px) {
    h3 {
      font-size: calc(15px + 6 * ((100vw - 320px) / 680));
    }
  }
  @media screen and (min-width: 1000px) {
    h3 {
      font-size: 21px;
    }
  }

  .donate {
      background: url(../img/purse.png) no-repeat;
      background-size: contain;
  }