@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
{
body
{
    background:url('../Images/background.jpg');
    width:100%;
    height:auto;
    padding-top:40px;
    margin-top:-40px;
    overflow-x:hidden;
    
    
}


#header
{
     position:absolute;
    top:0px;
    
    width:100%;
   
  margin:0px auto;
    background-color:#fff;
    height:80px;
   
    background:url('../Images/background.jpg');
}

#ShalomLogo 
{
    position:fixed;
    top:0px;
    left:0px;
    
    
}


.ShalomNav
{
    position:absolute;
    top:20px;
    left:0px;    
    font-family: Tahoma, Geneva, sans-serif;    
    text-align: center;
    text-shadow: 3px 2px 3px #333333;  
    color:#fff;
    border-bottom:#000;  
    display:inline;  
    width:100%;   
}

.ShalomNav ul#menu {
    
    
    margin: 0px;
    
      
}
.ShalomNav li.Nav {

padding:4px;
display:inline;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;

background-color: #5bc0de;
  border-color: #46b8da;
 
  
}

.ShalomNav li.Nav a {
    
    
     color:White;
     font-size:12px;
    
}
.ShalomNav .Nav a:hover {
    color: #000;
    text-decoration:none;
   
}
.ShalomNav ul li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
.ShalomNav ul.SocialNav
{
    position:relative;
    left:28%;
    top:-35px;
}

.ShalomNav ul.SocialNav li
{
    display:inline;
    background:none;
    margin-left:3px;
    position:relative;
    left:13%;
    
}
.ShalomNav ul.SocialNav li img
{
    width:20px;
    height:20px;
}
   /************************************* Gallery holder *************************************/ 
  #gallery-holder
{
    
    width:100%;
    height:650px;
    margin-top:0px;
    
}
#gallery-holder img
{
    width:100%;
    height:650px;
}
#ShalomIntro 
{
    position:absolute;
    top:35%;
    width:80%;
    margin-left:10%;
}
#ShalomIntro p
{
    font-size:15px;
    color:#fff;
    font-family: clara, sans-serif;
}
  
   /**************************************About Shalom******************************************/
   
   h1
  {
      color:#8a7b85;
      font-size:35px;
      text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
 text-transform:capitalize;
 font-family: clara, sans-serif;
 position:relative;
 left:5%;
  }
  
  #Aboutbody
  {
      height:650px;
      position:relative;
      top:10%;
      width:100%;
      padding-top:40px;
margin-top:-40px;
      
  }
#Aboutbody  #ShalomAboutpage
  {
      
      height:auto;
      width:100%;
      position:relative;
      left:10%;
      
  }
  .main
  {
      position:relative;
      left:5%;
      top:0%;
      width:50%;
      float:left;
      
      
  }
  .main #intro
  {
    position:relative;
    top:10px;  
  }
  #aboutsidebar
  {
     
      width:25%;
      float:left;
      margin-left:16%;
      
  }
  .main #intro
  {
      position:relative;
      top:50px;
  }
  .main #intro p
  {
      color:#fff;
      font-family: clara, sans-serif;
      font-size:17px;
  }

.ribbon {
 font-size: 12px !important;
 
 width: 60%;
    
 position: relative;
 top:10px;
 left:-50px;
 
 background: #5bc0de;
 color: #fff;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #ccc;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #fff transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}
 .curvedarrow 
   {
        position: relative; 
        width: 0; 
        height: 0; 
        border-top: 9px solid transparent; 
        border-right: 9px solid #ccc; 
        -webkit-transform: rotate(10deg); 
        -moz-transform: rotate(10deg); 
        -ms-transform: rotate(10deg); 
        -o-transform: rotate(10deg); 
        } 
        .curvedarrow:after 
        { 
            content: ""; 
            position: absolute; 
            border: 0 solid transparent; 
            border-top: 3px solid #ccc; 
            border-radius: 20px 0 0 0; 
            top: -12px; 
            left: -9px; 
            width: 12px; 
            height: 12px; 
            -webkit-transform: rotate(45deg); 
            -moz-transform: rotate(45deg); 
            -ms-transform: rotate(45deg); 
            -o-transform: rotate(45deg); 
            }
.button
{
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   position:relative;
   left:0px;
   background-color:#5bc0de;
   width:150px;
}
.modal .modal-dialog
{
    width:70%;
    
}
#shalomevent img
{
    width:100%;
    height:30%;
    position:relative;
    left:-40px;
    
} 
/**********************************************ShalomMedia*****************************************/
#shalomMedia
{
   padding-top:40px;
margin-top:-40px; 
    
}
#ShalomMediapage
{
    position:relative;
    top:40px;
    height:700px;
    
}
.shallomGallery
    {
         position:relative;
      left:17%;
      top:15%;
      width:45%;
      float:left;
        height:300px;       
        -webkit-box-shadow: 0 18px 16px -6px black;
	   -moz-box-shadow: 0 18px 16px -6px black;
	        box-shadow: 0 18px 16px -6px black;

        
    }

     .nivoSlider 
    {
        height:300px;
        
    }
    .nivoSlider img 
    {
        width:100%;
        height:100%;
    }
    .Mediasidebar
  {
      position:relative;
      left:15%;
  }
 
  #mediasidebar
  { 
      width:25%;
      float:left;
     margin-left:27%;
      
     
  }
  .viewmedia 
 {
     position:relative;
     left:-20px;
  
  }
  .viewmedia a
  {
      font-family: clara, sans-serif;
      font-size:15px;
      color:#5bc0de;
      
  }
  .Mediasidebar ul
  {
      position:relative;
      left:-50px;
  }
  .headline a
  {
      font-family: clara, sans-serif;
      color:#fff;
      font-size:12px;
  }
  .headline a:hover
  {
      color:#cdab2d;
      text-decoration:none;
  }
  .date
  {
     color: #5bc0de;
     font-size:10px;
  
  }
  .feed a
  {
   
   color:#5bc0de; 
   font-size:15px;  
  }
  .feed img
  {
      height:25px;
      width:25px;
  }
  /******************************************Calendar Shalom****************************************/
  
  
   #calendarShalom
    {
     position:relative;
    top:10px;
    height:650px;
    padding-top:40px;
margin-top:-40px;
        
    }
    #shallomCalendar
    {
        position:relative;
        top:12%;
    }
 
 #calendar
    {
        width:45%;
        height:20%;
        position:relative;
        top:40px;
        left:17%;
       float:left;
    }
     #calendarEvents
  {
      width:20%;
      float:left;
      margin-left:30%;
      
  }
  #calendarEvents h4.ribbon
     {
         width:80%;
         position:relative;
         left:-30px;
         
     }
  

.fc-grid th {

    
font-size:15px;
}


  
  /*********************************************Shalom Kids*******************************************/
  #kidsCorner
{
    position:relative;
    top:1%;
 
    height:550px;
   padding-top:40px;
margin-top:-40px;
   
}
#ShalomKids
{
 
    
    
}
#kids
{
  position:relative;
    top:100px;
    float:left;
    width:45%;
    left:17%;  
}
#kids p
{
    margin-top:5%;
    font-size:15px;
    font-family: clara, sans-serif;
    color:#fff;
}
#kids h2
{
  color:#8a7b85;
      font-size:35px;
      text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
 text-transform:capitalize;
 font-family: clara, sans-serif;  
 position:relative;
 left:30%;
}
#kidsSidebar
{
   
      float:left;
      width:25%;
      
      margin-left:28%;
      position:relative;
      top:100px;
}
#kidsSidebar .ribbon
{
    width:150px;
}
/**************************************Shalom Contact*******************************************/

#ShalomMaps
    {
     
    height:800px;
    padding-top:40px;
margin-top:-40px;
        
    }
    #maps
  {
      float:left;
     position:relative;
    top:100px;
      left:18%;
      width:43%;
   
     
  }
  #map_canvas
  {
   
   position:relative;
   top:50px;
   
   height:400px; 
    border:10px solid #5bc0de;  
    border-radius:15px;
       -webkit-box-shadow: 0 18px 16px -6px black;
	   -moz-box-shadow: 0 18px 16px -6px black;
	        box-shadow: 0 18px 16px -6px black;
        
  }
 
  #addressLocator
  {
   position:relative;
   top:80px;
   left:1%;   
  }
  #startingAddress
  {
      color:#fff;
      font-size:13px;
      
      font-family: clara, sans-serif;
  }
  #mapsSidebar
  {
      float:left;
      width:25%;
      margin-left:29%;
      position:relative;
      top:120px;
  }
  
   #mapsSidebar #contact-area
   {
       position:relative;
       left:-60px;
   }
  #mapsSidebar #contact-area .contact
  {
      color:#fff;
      font-size:15px;      
      font-family: clara, sans-serif;
  }
  #mapsSidebar #contact-area .contactData
  {
      padding:10px;
      width:60%;
      margin-top:10px;
      margin-bottom:10px;
      border-radius:10px;
      position:relative;
      left:5%;
  }
  #mapsSidebar #contact-area textarea
  {
      width:61%;
      border-radius:10px;
     
      
  }
  #mapsSidebar #contact-area .btn-info
  {
      position:relative;
      left:120px;
      top:20px;
  }
    
  
    
}