<?php
	$meta_title = $page['name'];
	$meta_keywords = $page['meta_keywords'];
	$meta_description = $page['meta_description'];
	include('views/_header.tpl.php');
?>
<link rel="stylesheet" href="/3rdparty/ckeditoradv/plugins/layoutmanager/css/bootstrap.css"/>
<link rel="stylesheet" href="/3rdparty/ckeditoradv/plugins/layoutmanager/css/style.css"/>

<style type="text/css">
	div.spacer { padding-top:0px; } 
	#mmen { display:none; }
    h1 { 
        text-transform:uppercase; 
        font-size:24px; 
		font-family: 'Open Sans', Montserrat, 'Montserrat-Light', 'Proxima-Nova-Thin', GillSans, DINOT-Medium, acherusgrotesque-regular, 'acherusgrotesque-regular', sans-serif;
        color:#19a9f4;
        margin-bottom:5px;
    }
    h3 span {
        font-size: 28px;
        text-transform:uppercase; 
		font-family: 'Open Sans', Montserrat, 'Montserrat-Light', 'Proxima-Nova-Thin', GillSans, DINOT-Medium, acherusgrotesque-regular, 'acherusgrotesque-regular', sans-serif;
        color:#19a9f4;   
        font-weight:normal;
        padding-bottom:20px;
    }
    h2, h3, h4, h5 {
        /*text-transform:uppercase; */
		font-family: 'Open Sans', Montserrat, 'Montserrat-Light', 'Proxima-Nova-Thin', GillSans, DINOT-Medium, acherusgrotesque-regular, 'acherusgrotesque-regular', sans-serif;		
		margin-bottom:15px !important;
        color:#000;       
    }    
	h1 { font-size:48px; line-height:55px; }
	h2 { }
	h3 { font-size:28px; font-weight:600; line-height:32px; padding:0px; margin:0; }
	h4 { font-size:20px; line-height:1.6em; font-weight:600; }
	h5 { font-size:18px; line-height:1.6em; font-weight:500; }
	p { font-weight:200; font-family:'Open Sans', 'Montserrat-Light', Arial, Verdana, "Trebuchet MS",sans-serif; }
	p strong { color:#000; font-weight:600; }
    
	#main-menu.nav.nav-horizontal {
		/*background:red;*/
		/*height:28px;*/
	}

	.nav-horizontal > li {
		padding: 0px 8px;
		line-height:20px;
	}
    
	ul li {
		font-size: 17px;
		font-weight:300;
		line-height:29px;
		height:30px;
	}

    /* ############################################### */
    /* ##############    CHALKBOARD     ############## */
    /* ############################################### */
    
    .chalkboard { background: #000 url(/static/images/client/chalkboard.jpg) no-repeat; min-height: 879px; background-size:cover; 
    padding: 40px 60px 40px; color:#fff; text-shadow: 2px 2px 2px rgba(0,0,0,.5); }
    .chalkboard p { font-size: 20px !important; line-height: 30px; text-shadow: 2px 2px 2px rgba(0,0,0,.5);  }
    .chalkboard h2 { color:#fff; margin-bottom:15px; padding-bottom:10px; border-bottom:1px solid #ccc; text-shadow: 2px 2px 2px rgba(0,0,0,.5); }
    
    .whitesection, p, span { 
        font-size: 17px;
        line-height: 25px;
		font-family: 'Open Sans', Montserrat, 'Montserrat-Light', 'Proxima-Nova-Thin', GillSans, DINOT-Medium, acherusgrotesque-regular, 'acherusgrotesque-regular', sans-serif;
     }
     .whitesection strong { font-size: 18px; color:#000; }

.form-search { margin-top:3px !important; }
div.account-panel { margin-top:7px !important; }

input[type=search], search.form-search.header-search { background:red !important; width:250px !important; }

.form-search .txt-keyword {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    padding: 7px 32px 9px 43px !important;
    width: 143px !important;
    display: inline-block;
    outline: none;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
}

.layoutmanager .layout-column {
    border: 0px dashed black;
    word-wrap: break-word;
    padding-top: 0px;
    display: inline-block; 
    /*width: 25%; */
    float:left; 
}

hr
{
	/*border: 0px;
	border-top: 1px solid #ccc;*/
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));	
}
.tophdrimg { }
/*img.topbgimg { width:100%; height:auto; margin-top:-119px; }*/
.home-feature-category {
    padding-top: 5px;
}
.addonlist li { line-height:35px; border-bottom:0px solid #eee; }
#footer { padding:0; }
.main-footer { display:none; }

/* CMS PAGE CONTENT */
.cmsp { font-size:15px; line-height:23px;  }
.cmsp strong { color:#000; font-size:15px; line-height:19px;  font-weight:800; }
.col-xs-6 { display: inline-block; width:100%; float:left; }
.teampics { border-radius: 50%; border:2px solid #eee; }
img.teampics { margin-bottom:25px !important; }
.col-xs-6 img { display: inline-block; width:100%; float:left; border-radius: 50%; }
.teamdescrip { display: inline-block; width:100%; float:left; font-weight:200; font-size:15px; line-height:23px;  }
.teamdescrip strong { font-weight:600;  color:#000; font-size:15px; line-height:23px; 
text-transform:uppercase; margin-bottom: 20px;
font-family: acherusgrotesque-regular, 'acherusgrotesque-regular', 'Proxima-Nova-Thin','Montserrat-Light','Open Sans', sans-serif; }

ul.flavors { 
    columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2; 
  }
  
  ul.flavors li, ul.sorbet li { font-size: 17px; font-weight: 300; padding:5px; }
  
  .container-fluid {
  	padding-right: 0px;
  	padding-left: 0px;
  	margin-right: auto;
  	margin-left: auto;
  }

/* col-sm-6 col-md-6 col-lg-6 layout-column */

#footer .site-copyright {
	font-size: 13px;
	color:#bbb; 
}
#footer .term-privacy a, #footer .term-privacy a:active, #footer .term-privacy a:link, #footer .term-privacy a:visited {
	font-size:13px;
}

#footer .term-privacy .sep {
	color: #aeaeae;
	margin: 0 3px 3px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}
#footer{ border-top: 0px solid #eee; }

/******************************************************************************/ 
/*********************     MOBILE STYLES START HERE      **********************/ 
/******************************************************************************/ 
@media screen and (max-device-width:  1024px), screen and (max-width:  1024px) {
	.customcta { top:410px; } 
}

@media screen and (max-device-width:  925px), screen and (max-width:  925px) {
    #main-menu { overflow:hidden; height: 30px; } 
    .col-xs-3.col-sm-3.col-md-3.col-lg-3.layout-column { background:none; overflow:hidden; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }      
    .col-xs-9.col-sm-9.col-md-9.col-lg-9.layout-column { background:none; overflow:hidden; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; width:75%; }      
}

/******************************************************************************/ 
@media screen and (max-device-width:  799px), screen and (max-width:  799px) {
	.col-xs-8 col-sm-8 col-md-8 col-lg-8 layout-column {}
	.col-xs-4 col-sm-4 col-md-4 col-lg-4 layout-column {}
	.col-xs-8, .col-xs-4, .col-lg-5, .col-lg-7, .col-lg-9 { display:block; width:100%; }
	#collapse_column { display:block; width:100%; }
	.customcta { top:365px; } 
}

/******************************************************************************/ 
@media screen and (max-device-width:  667px), screen and (max-width:  667px) {
	.customcta { top:320px; } 
    .col-xs-3 { display: inline-block; float:left; width:50%; max-width:500px; }
    .col-xs-3 img { width: 100%; }
    .teamdescrip, .col-lg-5, .col-lg-7, .col-lg-9 { display: block; width: 100%; }    
    .col-xs-3.col-sm-3.col-md-3.col-lg-3.layout-column { display: inline-block; float:left; width:50%; }    	
}

/******************************************************************************/ 
@media (max-width: 665px) {
    .col-xs-3.col-sm-3.col-md-3.col-lg-3.layout-column { overflow:hidden; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; width:25%; }      
    .col-xs-9.col-sm-9.col-md-9.col-lg-9.layout-column { overflow:hidden; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; width:75%; }         
    .customcta { top:320px; } 
    .col-xs-3 { display: inline-block; float:left; width:50%; max-width:500px; }
    .col-xs-3 img { width: 100%; }
    .teamdescrip, .col-lg-5, .col-lg-7, .col-lg-9 { display: block; width: 100%; }    
    /*.col-xs-3.col-sm-3.col-md-3.col-lg-3.layout-column { display: inline-block; float:left; width:50%; }*/          
}

/******************************************************************************/ 
@media (max-width: 587px) {
	div.spacer {
		padding-top: 0px;
	} 
	.applogo {
	    padding-top: 0px;
	    margin-top:6px !important;
	}	
	.tophdrimg {
		padding-top: 54px;
	}
	.blkhdr { height: 82px; background:#000; width:100%; position:absolute; top:0; right:0; 
	bottom:0; left:0; }
	/*.tophdrimg { margin-top:100px;}*/
	.customcta { top:285px; } 
	/*.spacer { padding-top: 117px; }*/
	.col-xs-3 { display: inline-block; float:left; width:50%; max-width:500px; }
	.col-xs-3 img { width: 100%; }
	.teamdescrip, .col-lg-5, .col-lg-7, .col-lg-9 { display: block; width: 100%; }    
	.col-xs-3.col-sm-3.col-md-3.col-lg-3.layout-column { display: inline-block; float:left; width:25%; }	
	.col-xs-9.col-sm-9.col-md-9.col-lg-9.layout-column { display: block; width:75%; }       
    
    ul.flavors { 
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1; 
     }
}

/******************************************************************************/ 
@media screen and (max-device-width:  480px), screen and (max-width:  480px) {
    div.spacer { padding-top:0; }
	p {
		font-size: 20px;
		line-height:30px;
		margin-bottom:25px;
	}
	h4 {
		font-size: 24px;
		line-height:34px;
		color:#f11303;
	}
    .blkhdr { height: 82px; background:#000; width:100%; position:absolute; top:0; right:0; bottom:0; left:0; }
    .tophdrimg { padding-top:52px; }
    /* .tophdrimg { padding-top: 53px; } 0px fixes the Web App */
    /*.topbgimg { margin-top: 70px; }*/
    .chalkboard { background:#000 url(/static/images/client/mobilechalkboard.jpg) repeat-y; padding: 3px 20px 20px; }
	img.cateringbgimg { height:400px; width:auto; margin-top:0px; }
	.centerifmobile { text-align:center; }
	.customcta { top:265px; }
    .col-xs-3 { display: block; width:100%; max-width:500px; }
    .col-xs-3 img { min-width: 346px; }
    .teamdescrip, .col-lg-5, .col-lg-7, .col-lg-9 { display: block; width:100%; }	
    .col-xs-3.col-sm-3.col-md-3.col-lg-3.layout-column { display: block; width:100%; }
    .col-xs-9.col-sm-9.col-md-9.col-lg-9.layout-column { display: block; width:100%; }     
}		
</style>

<!-- CUSTOM HEADER IMAGE SECTION BEGINS -->
<?php if($page['styleone'] !=0) { ?>	
<div class="" style="z-index:99; position:absolute; top:100px; text-align:center; width:100%;">
	<center><img src="/static/images/topbgimgpages.jpg" alt="" 
	style="max-width:360px; width:40%; height:auto;" /></center>
</div>	

<div class="customcta" style="z-index:99; position:absolute; text-align:center; width:100%; color:#fff;">
	<div style="background:rgba(0,0,0,.7); width:280px; margin:0 auto; padding:0; text-transform:uppercase;
	font-family:Arvo; text-align:center; margin-bottom:0px;">	
		<h5 style="color:#fff; text-transform:uppercase; margin:0px; margin-bottom:0px; 
		padding:4px 0 0px; line-height:15px;">Call Us At</h5>
		<h3 style="font-size:26px; font-weight:bold; margin-top:-5px; 
		padding-top:0px;"><a href="tel:708-361-0000" style="color:#fff;">XXX-XXX-XXXX</a></h3>
	</div>
	<div style="background:rgba(0,0,0,.7); width:280px; margin:0 auto; padding:0; text-transform:uppercase;
	font-family:Arvo; text-align:center; margin-top:0px;">	
		<h3 style="font-size:16px; font-weight:bold; margin-top:5px; 
		padding-top:0px;"><a href="#" 
		style="color:#fff;">Custom Link Here &raquo;</a></h3>
	</div>	
</div>	
<?php } ?>

<?php if($page['image'] !='') { ?>		
<div class="tophdrimg" style="position:relative; background:none !important; 
	background-color:#fff !important; width:100%; height:auto;">				
	<img class="topbgimg" src='/<?= $page['image'] ?>'
	onerror="this.src='/static/system/superskinnybanner.jpg'"
	style="width:100%; object-fit:cover; background-size:cover; background-position: top top; max-height:500px;" />
</div>
<?php } else { ?>
	<img src='/static/system/pages/superskinnybanner.jpg' style='width:auto; height:auto; min-height:350px; margin-top:-37px;' />
<?php } ?>

<!-- CUSTOM HEADER IMAGE SECTION ENDS -->
<?php if ($page['sidebar_content']) : ?>
    <div class="layout-2cols" style="background:#fff; padding-bottom:10px; overflow:hidden;">
        <div class="content grid_8" style="overflow:hidden;">
<?php else : ?>
    <div class="home-feature-category" style="background:#fff; border:none; overflow:hidden;
		padding-top:30px;">
        <div class="container_12 clearfix" style="overflow:hidden;">
			<div class="grid_12 marked-category" style="overflow:hidden; background:#fff; 
			min-height:500px; padding:0px">
<?php endif; ?>

				<div style="padding:0 10px">
				<?php if (!$page['hide_title']) : ?>
				    		<h1><?= $page['name'] ?></h1>
				<?php endif; ?>	

    			<?= $page['content'] ?>
    		
		    	<!--<hr class="custom" /> 
		    	<br />-->
		    		
		        <div id="collapse_column" class="content grid_8" style="display:none; overflow:hidden;">
		                <h2>
		                    Flavors
		                </h2>
		                
		                <ul class="flavors"  style="background:none;">
		                    <?php foreach($flavors as $flavor): ?>
		                        <li>
		                        <?= $flavor['title'] ?>
		                        </li>
		                    <?php endforeach; ?>
		                </ul>
		                
		         </div>
				<div id="collapse_column" class="content grid_4" style="display:none; overflow:hidden;">
				    <h2>
				        Sorbet Flavors
				    </h2>
				    
				    <ul class="sorbet"  style="background:none;">
				        <?php foreach($flavours as $flavour): ?>
				            <li>
				            <?= $flavour['title'] ?>
				            </li>
				        <?php endforeach; ?>
				    </ul>                
				    
				</div>
				<div class="clear"></div>


	            <?php if ($_SESSION['user']['is_admin']) { ?>
	            <br />
	            <!--<hr class="custom" /> -->
	                    <center>	
	                    <a href="/admin/page/<?= $page['id'] ?>?edit" title="Edit Page" target="_blank" 
	                    style="color:#cd0000; font-size:15px; font-weight:300;"><i class="fa fa-pencil-square-o"></i> Edit Page</a>
	                    </center>
	            <?php } ?>   		
            
				</div><!-- END OF INNER PADDING DIV -->
<?php if ($page['sidebar_content']) : ?>
        </div> <!-- .content.grid_8 -->
<?php else : ?>
            </div>
    	</div>
    </div> <!-- .home-feature-category -->
<?php endif; ?>

<?php if ($page['sidebar_content']) : ?>

        <div class="sidebar grid_4">
            <?= $website_options['cms_sidebar_content'] ?>
            
            <?php if (!empty($page['sidebar_content'])):?>
            	<?=$page['sidebar_content']?>
            <?php endif; ?>
            
            <?php if (!empty($recent_posts)):?>
            	Recent Posts:
            	<ul class='recent_posts'>
            	<?php foreach($recent_posts as $post): ?>
            		<?php if($post['id'] == $page['id']) continue;?>
            		
            		<li>
            		
            		<?php
                    if ($post['main_img']) {
                        if ($post['main_img'][0] != "/")
                            $post['main_img'] = "/" . $post["main_img"];
                    ?>
                    <a href="/project/<?= $post['id'] ?>" class="thumb-img">
                        <img src="<?= $post['main_img'] ?>" alt="<?= $project['title'] ?>" style="max-height:200px;">
                    </a>
                    <?php
                    }
                    ?>
            		
            		<a href="/project/<?= $post['id'] ?>" class="be-fc-orange" style="font-weight:bold;">
	            		<?=$post['title']?></a>
	            	</li>
            	<?php endforeach; ?>
            	</ul>
            <?php endif; ?>
        </div>
		<div class="clear"></div>		
    </div> <!-- .layout-2cols -->
    <div class="clear:both;"></div>
<?php endif; ?>

<style>
.recent_posts img {
	width: 60px;
	margin-bottom:8px;
}

.recent_posts{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
</style>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<?php include('views/_footer.tpl.php'); ?>