/******************** WELCOME SECTION *********************/                                                       

/********* 900px *********/
@media (max-width: 900px) {     
/* content */  
#WelcomeSection #WelcomeContent h1 {
    word-spacing: 5px;
    font-size: 25px;
}

#WelcomeSection #WelcomeContent h1 span.two {
    word-spacing: 2px; 
    font-size: 9px; 
}
}








/******************** LOCATIONS SECTION *********************/            

/********* 1200px *********/
@media (max-width: 1200px) {       
/* h1 */
#HowSection #HowOverlay .col h1 {  
     font-size: 18px;
}
}

/********* 900px *********/
@media (max-width: 900px) {       
#HowSection {
    height: 618px;
    width: calc(100% - 40px);
    margin-top: 20px;
}

/* col */
#HowSection #HowOverlay .col {
    display: block !important;
    width: 100% !important;
    height: 300px !important; 
    position: relative !important;
}

#HowSection #HowOverlay .col.one {
    border-bottom: 1px solid #CF8D34;
    border-right: 0px solid #CF8D34;
}

#HowSection #HowOverlay .col.two {
    margin-top: 18px;
    border-top: 1px solid #CF8D34;
    border-left: 0px solid #CF8D34;
}

/* cont */ 
#HowSection #HowOverlay .col .innerloccont { 
     top: calc(50% - 35px);   
}

/* h1 */
#HowSection #HowOverlay .col h1 {  
     font-size: 15px; 
}

/* p */
#HowSection #HowOverlay .col p {
     width: 150px;
     height: 35px;
     margin-top: 20px;
     padding-top: 13px;
     font-size: 8px;
}
}








/******************** LOCATIONS MODAL *********************/              

/********* 1000px *********/
@media (max-width: 1000px) {        
/* col */
#InfoModal .col {
	height: 300px; 
}

#InfoModal .col.active {
    width: calc(100% - 40px) !important;
}

#InfoModal .col.one { 
    top: 0px;
	left: 20px;   
}

#InfoModal .col.two {
    top: 300px;
	bottom: auto;
	right: 20px;
}

/****************/
/*** col one ***/
/****************/

/* btn */
#InfoModal .col.one .btn {
    width: 40px;
    height: 40px; 
}

/* close */
#InfoModal .col.one #Close {
	padding-top: 13px;
	font-size: 18px;
}

/* logo */
#InfoModal .col.one #Phone {
    top: 0px;
    bottom: auto;
    right: 0px !important;
    left: auto;
}

/****************/
/*** col two ***/
/****************/

/* content */
#InfoModal .col.two #Content {
	width: 100%;
	top: 20px;
	left: 0px;
}

/* first */
#InfoModal .col.two #Content h2.first { 
    font-size: 10px !important; 
}

/* divider bar */
#InfoModal .col.two #Content h2 span.bar {
    padding: 0px 3px;
    bottom: 0.5px;
}

/* hours */
#InfoModal .col.two #Content h2 { 
    font-size: 10px;
}

#InfoModal .col.two #Content h2 span.header {
    font-size: 20px;
}

/* divider */
#InfoModal .col.two #Content span.divider {
    margin: 45px auto 50px;
}

#InfoModal .col.two #Content span.divider.top {
    margin-bottom: 20px;
}

#InfoModal .col.two #Content span.divider.bottom {
    margin-top: 25px;
}

/* a */
#InfoModal .col.two #Content a {
    width: 130px;
    height: 33px;
    bottom: -30px; 
    padding-top: 12px;
    font-size: 7px;
}

#InfoModal .col.two #Content a.one {
   left: calc(50% + 10px);
}

#InfoModal .col.two #Content a.two {
   right: calc(50% + 10px);
}
}








/******************** ABOUT SECTION *********************/   
         
/********* 1000px *********/ 
@media (max-width: 1000px) {   
#AboutSection {         
    width: 750px;        
} 

/* col */
#AboutSection .col { 
	margin: 0px 50px;    
}   

/* connector */
#AboutSection .connector { 
	width: 50px;     
}

/* geom */  
#AboutSection .geom.three { 
	left: 50px;
}
 
#AboutSection .geom.four { 
	right: 50px; 
} 
} 
 
/********* 900px *********/ 
@media (max-width: 900px) {   
#AboutSection {         
    width: 300px;     
	margin: 50px auto;  
}  
  
/* col */
#AboutSection .col {
	display: block;
    margin: 0px auto;   	 
}   

/* img */ 
#AboutSection .col img {
	width: 80px;
	height: 80px;  
} 

/* header */
#AboutSection h1 { 
	margin-top: 30px;   
	font-size: 25px;   
}   

/* par */ 
#AboutSection p { 
	margin-top: 30px;  
	font-size: 12px; 
}

#AboutSection p span { 
	bottom: -6px;  
    left: 25px;     
	font-size: 60px;   
}
 
/* connector */
#AboutSection .connector {
	display: block;
	width: 0px;  
	height: 50px;      
	margin: 45px auto 35px !important; 
	top: 0px;   
	border-bottom: none; 
	border-right: 2px dashed rgb(225,225,225); 	
}  
 
#AboutSection .connector .tri {  
	left: calc(50% - 4px) !important; 
	border-width: 10px 5px 0 5px; 
	border-color: rgb(225,225,225) transparent transparent transparent; 
}  

#AboutSection .connector .tri.one {
	top: calc(50% - 5px); 
}

/* geom */  
#AboutSection .geom.three { 
	left: 0px;
}
 
#AboutSection .geom.four { 
	right: 0px; 
}
}








/******************** MISSION SECTION *********************/                      
  
/********* 1200px *********/ 
@media (max-width: 1200px) {    
#WhySection {
     height: 500px; 
}        

/****************/
/*** stats ***/
/****************/

/* row */
#WhySection .col.stats .statrow {
    width: 360px;
    top: calc(50% - 185px); 
    left: calc(50% - 180px);
}

/* opening h2 */
#WhySection h2 {
    font-size: 12px;
}

#WhySection h2.two {
    margin-top: 20px;
}

/* inner col */
#WhySection .col.stats .innercol {
	width: 178px; 
}    

/* header */
#WhySection .col.stats .innercol h1 { 
	font-size: 20px;  
}   

/* par */ 
#WhySection .col.stats .innercol p {
	margin-top: 15px;  
	word-spacing: 2px;
	font-size: 9px; 
}

/* divider */
#WhySection .col.stats .statdivider {
    margin: 50px auto; 
}
}

/********* 900px *********/  
@media (max-width: 900px) {      
#WhySection {
     width: calc(100% - 40px);
     height: 770px;
     position: relative;      
}        

#WhySection .col {
     display: block;
     width: 100%;
     position: absolute;
     float: none;
}
  
#WhySection .col.clients {
     height: 300px; 
     bottom: 0px;
}

#WhySection .col.stats {
     height: auto;
     top: 0px;
     text-align: center;
}

/****************/
/*** stats ***/
/****************/

/* row */
#WhySection .col.stats .statrow {
    width: 320px;
    position: relative;
    top: 0px;
    left: 0px;
}

/* opening h2 */
#WhySection h2 {
    font-size: 11px;
}

/* inner col */
#WhySection .col.stats .innercol {
	width: 158px; 
}    

/* par */ 
#WhySection .col.stats .innercol p { 
	word-spacing: 1px;
	font-size: 8px;  
}
}








/******************** FORM SECTION *********************/                   

/********* 900px *********/   
@media (max-width: 900px) {       
#CateringSection {
    padding-bottom: 150px;
}

/* h1 */
#CateringSection h1 {
    font-size: 20px;
    word-spacing: 5px; 
}

/* p */
#CateringSection p {  
    word-spacing: 1px;
    font-size: 9px;
}

/* divider */
#CateringSection #CaterDivide {
    width: 318px;
    margin: 60px auto 20px;
}

/* btn */
#CateringSection #CateringButtons {
    width: 330px;
    height: 40px;
}

#CateringSection #CateringButtons a {
    width: 150px;
    height: 40px;
    margin: 0px 6px;
    padding-top: 14px;
    word-spacing: 1px;
    font-size: 10px;   
}
}







 
/******************** FILLER SECTION *********************/               

/********* 900px *********/   
@media (max-width: 900px) {         
#FillerSection {                         
    width: calc(100% - 40px); 
	height: 300px;  
}  
}






         

/******************** REVIEW SECTION *********************/            

/********* 1100px *********/   
@media (max-width: 1100px) {                 

/**************** CONTENT *******************/

/* cont inner */
#ReviewSection .col.cont #ContInner { 
	width: 350px; 
	height: 360px; 
    top: calc(50% - 180px); 
}

/* header */
#ReviewSection .col.cont #Head {
	font-size: 25px; 
	word-spacing: 5px; 
}

/* subhead */  
#ReviewSection .col.cont .headp {
    word-spacing: 1px;
    font-size: 10px;
}

#ReviewSection .col.cont .headp.one span {
    padding: 0px 3px; 
}

#ReviewSection .col.cont .headp.two {
    font-size: 9px;
}

/* carousel */
/* content */
#ReviewSection .carcol .content {
    width: 250px; 
    left: calc(50% - 125px); 
}

#ReviewSection .carcol .content p {
    font-size: 11px;
}

#ReviewSection .carcol .content h2 { 
    font-size: 10px;
}

#ReviewSection .carcol .content h2 span {
    padding-left: 10px;
}
 
/* controls */
#ReviewSection #Overlay .control {
	height: 18px; 
	top: calc(50% - 9px); 
}
}
 
/********* 900px *********/ 
@media (max-width: 900px) {
#ReviewSection {                         
    width: calc(100% - 40px); 
	height: 750px;  
	border: none;     
}  
  
/* col */ 
#ReviewSection .col {
	width: 100%;
	height: 50%; 
	top: 0px; 
}

/**************** MAP *******************/

#ReviewSection .col.img {
    top: auto;
    bottom: 0px;
}

/* overlay */
#ReviewSection .col .overlay.one {
	height: 200px;
}

/**************** CONTENT *******************/

/* cont */
#ReviewSection .col.cont {
	border-left: 0px solid rgb(235,235,235);    
}

/* cont inner */
#ReviewSection .col.cont #ContInner { 
	width: 100%;
	height: 246px; 
    top: calc(50% - 123px);    
}

/* header */
#ReviewSection .col.cont #Head {
	font-size: 20px; 
	letter-spacing: 0px;   
}

/* subhead */  
#ReviewSection .col.cont .headp {
    font-size: 9px;
}

#ReviewSection .col.cont .headp.one span {
    padding: 0px 2px; 
}

#ReviewSection .col.cont .headp.two {
    font-size: 8px;
}

/* carousel */
#ReviewSection #Carousel {  
    height: 115px;
    margin: 40px auto 45px;
} 

#ReviewSection #Overlay #Left { 
	left: 20px;
}

#ReviewSection #Overlay #Right { 
	right: 20px;
}  
}