/*To fit the Nav Panel in with the content so the scrollbar has room, reduce the  <section class="pageStyling" style="width:70%">  accordingly */


/*  _____________________________________________________________________________

16. PULL OUT LEFT SIDE NAV PANEL
_____________________________________________________________________________

16.(a)  MENU CONTAINER


/*
Item Name : Pull Out Content Panel
Author URI : http://codecanyon.net/user/Pixelworkshop
Version : 1.12
*/

/*

TABLE OF CONTENTS

16.(a)  MENU CONTAINER
16.(b)  TOGGLE BUTTON
16.(c)  ICONS
16.(d)  PANEL CONTENT
1. Basic Typography
2. Default Lists
3. Icons Lists
4. Styled Lists
5. Styled Paragraphs
6. Videos & Images
16.(e)  FORM ELEMENTS
16.(f)  PANEL TOGGLES
16.(g)  SCROLLBARS

*/

.page_wrapper
{
position: relative;
max-width: 960px;
width: 90%;
margin: 0 auto;
font-size: 13px;
line-height: 21px;
}

.menu_description{
margin: 52px auto;color: #262626;text-shadow: 1px 1px 1px #ffffff;}

.menu_description h1{
margin-top: 24px;font-size: 24px;line-height: 38px;}

.menu_description h2{
font-size: 18px;line-height: 24px;}

.menu_description ul{
font-size: 13px;line-height: 20px;list-style: square;margin: 0 0 0 25px;padding: 0;}

.menu_description a{
color: #888;text-decoration: none;}

/*  _______________________________________________

16.(a)  MENU CONTAINER
_______________________________________________  */

.pocp_left,
.pocp_right
{
position: fixed;
top: 0;
height: 100%;
z-index: 9999;
font-family: ariana-pro, Arial, Verdana, Tahoma, sans-serif;
font-weight: 400;
color: hsla(0, 0%, 10%, 1);
font-size: 14px;
line-height: 21px;
-webkit-transition: all 0.4s 0.2s;
-moz-transition: all 0.4s 0.2s;
-o-transition: all 0.4s 0.2s;
transition: all 0.4s 0.2s;
}

.pocp_left
{
left:-300px;
}

.pocp_left.pocp_show
{
left: 0;
}

.pocp
{
position: relative;
width: 300px;
height: 100%;
background: hsla(65, 100%, 96%, 1);  /*  pulloutpanel background colouring  */
color: hsla(42, 9%, 61%, 1); /*  all pulloutpanel text colouring  */
text-shadow: 1px 1px 1px #000000;
padding: 0;
-webkit-transition: all 0.4s 0.2s;
-moz-transition: all 0.4s 0.2s;
-o-transition: all 0.4s 0.2s;
transition: all 0.4s 0.2s;
-webkit-box-shadow: inset rgba(0,0,0,.25) -6px 0 8px;
-moz-box-shadow: inset rgba(0,0,0,.25) -6px 0 8px;
box-shadow: inset rgba(0,0,0,.25) -6px 0 8px;
}

/* CSS3 3D Animations - Chrome & Safari only */

.pocp_left
{
-webkit-perspective: 500;
}

.pocp_left .pocp
{
-webkit-transform-origin: 0% 0%;
-webkit-transform: translateX(-50%) rotateY(90deg);
}

.pocp_left .pocp_active
{
-webkit-transform: rotateY(0deg) translateX(0);
}

.pocp_right
{
-webkit-perspective: 500;
}

.pocp_right .pocp
{
-webkit-transform-origin: 100% 0%;
-webkit-transform: translateX(50%) rotateY(-90deg);
}

.pocp_right .pocp_active
{
-webkit-transform: translateX(0) rotateY(0deg);
}

/* Optional overlay effect */

#pocp_overlay
{
/*background: rgba(0,0,0,0.5);*/
position: fixed;
display: none;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 9998;
}

/*  _______________________________________________

16.(b)  TOGGLE BUTTON
_______________________________________________  */

html.js.no-touch body a.pocp_button.pocp_button_left,
.pocp_button
{
position: fixed;
z-index: 9999;
top: 40px;
font-size: 18px;
color: black;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
padding: 0px 10px;
background: white;
outline: none;
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s 0.2s;
-moz-transition: all 0.3s 0.2s;
-o-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
}

.pocp_button i
{
margin: 0;
padding: 0;
font-size: 16px;
line-height: 24px;
padding-top: 2px;
float: left;
color: hsla(0, 0%, 40%, 1);
margin-left: -2px;
margin-right: -2px;
text-shadow: none;
}

.pocp_button_left
{
left: 20px;
}

.pocp_button_left.btn_active
{
left: 310px;
}

.pocp_button_right
{
right: 20px;
}

.pocp_button_right.btn_active
{
right: 260px;
}

/*  _______________________________________________

16.(c)  PANEL CAROUSEL and icon styling
_______________________________________________  */

ul.panel_list li a.navLink i.fa.fa-star-of-david,
.fa-star-of-david
{
font-size: 10px;
}

.icon-plus,
.icon-minus
{
font-size: 12px;
font-weight: 700;
font-style: normal;
color: white;
text-shadow: -1px -1px 0px hsla(0, 0%, 0%, 0.1), 1px 1px 0px hsla(0, 0%, 0%, 0.5), 1px -1px 0px hsla(0, 0%, 0%, 0.1), -1px 1px 0px hsla(0, 0%, 0%, 0.1), -2px -2px 0px hsla(0, 0%, 0%, 0.13), 2px 2px 0px hsla(0, 0%, 0%, 0.35), 3px 2px 0px hsla(0, 0%, 0%, 0.32);
}

.pocp .pocp_carousel
{
position: relative;
overflow: hidden;
}

.pocp .carousel_buttons
{
list-style: none;
margin: 0;
padding: 0;
}

.pocp #carousel_prev,
.pocp #carousel_next
{
position: absolute;
z-index: 2;
opacity: 0.2;
width: 24px;
height: 24px;
top: 6px;
display: block;
outline: none;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}

.pocp #carousel_prev
{
right: 36px;
background: url('../img/previous.png') center center no-repeat;
}

.pocp #carousel_next
{
right: 6px;
background: url('../img/next.png') center center no-repeat;
}

.pocp #carousel_prev: hover,
.pocp #carousel_next: hover
{
opacity: 0.7;
}

/*  _______________________________________________

16.(d)  PANEL CONTENT
_______________________________________________  */

.pocp .pocp_content
{
float: left;
width: 180px;
padding: 0 20px;
}

.pocp .pocp_content_list
{
width: 100%;
padding: 0;
}

/* 1. Basic Typography */

.pocp p,
.pocp h1,
.pocp h2,
.pocp h3,
.pocp h4,
.pocp h5,
.pocp h6,
.pocp ul
{
font-family: ariana-pro, Arial, Verdana, Tahoma, sans-serif;
font-weight: 100;
font-variant: normal;
font-style: normal;
font-size: 0.9rem;
}

.pocp p
{
margin: 0 0 21px 0;
line-height: 21px;
}

.pocp h1,
.pocp h2,
.pocp h3,
.pocp h4,
.pocp h5,
.pocp h6
{
text-align: left;
width: 80%;
display: inline-block;
margin: 0.3rem 0.3rem 0.3rem 1rem;
color: hsla(0, 0%, 10%, 1);
}

.pocp h1
{
font-size: 24px;
line-height: 28px;
margin-bottom: 21px;
}

.pocp h2
{
font-size: 20px;
line-height: 22px;
margin-bottom: 21px;
}

.pocp h3
{
margin-top: 4px;
font-size: 16px;
line-height: 18px;
margin-bottom: 4px;
font-style: normal;
}

.pocp h4
{
margin-top: 4px;
margin-bottom: 4px;
font-style: normal;
}

.pocp h5
{
line-height: 14px;
margin-bottom: 8px;
}

div.pocp_content.pocp_content_list ul.pocp_toggle li a.navLink span.j,
div.pocp_content.pocp_content_list ul.pocp_toggle li a.navLink span.i,
div.pocp_content.pocp_content_list ul.panel_list li a.noStyle h5 span.j,
div.pocp_content.pocp_content_list ul.panel_list li a.noStyle h5 span.i,
div.pocp_content.pocp_content_list ul.pocp_toggle li a.noStyle h5 span.j,
div.pocp_content.pocp_content_list ul.pocp_toggle li a.noStyle h5 span.i,
div.pocp_content.pocp_content_list ul.panel_list li a.noStyle h6 span.j,
div.pocp_content.pocp_content_list ul.panel_list li a.noStyle h6 span.i,
div.pocp_content.pocp_content_list ul.pocp_toggle li a.noStyle h6 span.j,
div.pocp_content.pocp_content_list ul.pocp_toggle li a.noStyle h6 span.i
{
font-size: inherit;
font-family: inherit;
font-weight: inherit;
}

.pocp h6
{
line-height: 16px;
margin-bottom: 8px;
text-transform: uppercase;
}

.pocp h6:first-child
{
margin-top: 15px;
margin-bottom: 15px;
}

.pocp a
{
text-decoration: none;
color: hsla(42, 9%, 43%, 1);
cursor: pointer;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s;
}

.pocp a: hover
{
color: #eeeeee;
}

/* 2. Default Lists */

.pocp ul
{
list-style: square;
padding-left: 16px;
margin-bottom: 21px;
margin-left: 0;
}

.pocp ol
{
padding-left: 16px;
margin-bottom: 21px;
margin-left: 0;
}

/* 3. Icons Lists */

.pocp .pocp_icons
{
list-style: none;
padding: 0;
margin: 0 0 21px -20px;
color: #eeeeee;
}

.pocp .pocp_icons li
{
padding: 0 20px;
text-align: left;
border-radius: 0 3px 3px 0;
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}

.pocp .pocp_icons li: hover
{
background: #0a0a0a;
background: white;
}

.pocp .pocp_icons a
{
color: #eeeeee;
}

.pocp .pocp_icons i
{
font-size: 14px;
width: 24px;
float: left;
}

.pocp .pocp_icons li,
.pocp .pocp_icons i
{
line-height: 28px;
}

/* 4. Styled Lists */

.pocp .panel_list
{
list-style: none;
padding: 0;
margin: 0 0 21px 0;
color: #eeeeee;
}

html.js.no-touch body div#pocp1.pocp_left.pocp_show div.pocp.mCustomScrollbar._mCS_1.pocp_active div#mCSB_1.mCustomScrollBox.mCS-light div.mCSB_container div.pocp_content.pocp_content_list ul.pocp_toggle li div.pocp_panel
{
width: 96.5%;
}

html.js.no-touch body div#pocp1.pocp_left.pocp_show div.pocp.mCustomScrollbar._mCS_1.pocp_active div#mCSB_1.mCustomScrollBox.mCS-light div.mCSB_container div.pocp_content.pocp_content_list ul.panel_list li a,
.pocp .panel_list li a
{
padding: 4px 0 0 20px;
width: 80%;
text-align: left;
display: block;
float: left;
font-size: 0.8rem;
border-top: 1px solid #222222;
border-bottom: 1px solid #0a0a0a;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

div.pocp_content.pocp_content_list ul.panel_list li a.navLink span.i
{
font-size: 0.8rem;
}

div.pocp_content.pocp_content_list ul.pocp_toggle li a
{
text-decoration: none;
cursor: default;
list-style-type: none;
}

div.pocp_content.pocp_content_list ul.pocp_toggle li a:hover,
div.pocp_content.pocp_content_list ul.panel_list li a.noStyle:hover,
ul.panel_list li a.noStyle:hover
{
text-decoration: none;
cursor: default;
}

div.pocp_content.pocp_content_list ul.pocp_toggle li a: active,
div.pocp_content.pocp_content_list ul.panel_list li a.noStyle: active,
ul.panel_list li a.noStyle: active
{
text-decoration: none;
cursor: default;
}

div.pocp_content.pocp_content_list ul.pocp_toggle li a.navLink
{
text-align: left;
width: 80%;
display: inline-block;
color: hsla(0, 0%, 10%, 1);
margin: 0.3rem 0.3rem 0.3rem 1rem;
}

div.pocp_content.pocp_content_list ul.pocp_toggle li a.navLink:hover,
div.pocp_content.pocp_content_list ul.pocp_toggle li a.navLink:active
{
text-decoration: underline;
cursor: pointer;
}

html.js.no-touch body div#pocp1.pocp_left.pocp_show div.pocp.mCustomScrollbar._mCS_1.pocp_active div#mCSB_1.mCustomScrollBox.mCS-light div.mCSB_container div.pocp_content.pocp_content_list ul.pocp_toggle li span.pocp_toggle_title a.plusIcon
{
display: inline-block;
margin-left: 0;
margin-left: 10px;
width: 70%;
}

.pocp .panel_list li i
{
margin-right: 12px;
font-size: 14px;
}

.pocp .panel_list li: first-child a
{
border-top: none;
}

.pocp .panel_list li: last-child a
{
border-bottom: none;
}

.pocp .panel_list li a: hover
{
cursor: pointer;
background: #0d0d0d;
}

.pocp .panel_list .new
{
color:#f22;
font-size: 65%;
vertical-align: super
}

/* 5. Styled Paragraphs */

.pocp .blackbox
{
padding: 12px;
background: hsla(220, 46%, 90%, 1);
border-radius: 3px;
}

.pocp .dark, 
.pocp .brown,
.pocp .yellow,
.pocp .red,
.pocp .blue,
.pocp .green
{
padding: 0 0 0 12px; 
}

.pocp .dark
{
border-left:#3B3B3B solid 7px;
}

.pocp .brown 
{
border-left:#8D8767 solid 7px;
}

.pocp .yellow
{
border-left:#DBA742 solid 7px;
}

.pocp .red
{
border-left:#C05D48 solid 7px;
}

.pocp .blue
{
border-left:#52878B solid 7px;
}

.pocp .green
{
border-left:#808f4d solid 7px;
}

/* 6. Videos & Images */

.pocp .video_container
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 18px;
}

.pocp .video_container iframe,  
.pocp .video_container object,  
.pocp .video_container embed
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
}

.pocp iframe
{
border: 0;
outline: none;
width: 100%;
font-size: 100%;
vertical-align: baseline;
background: transparent;
margin-bottom: 12px;
}

.pocp img
{
border: none;
}

.pocp .inline_img
{
max-width: 100%;
height: auto;
box-sizing: border-box;
-webkit-box-shadow: 0 2px 3px #000000;
-moz-box-shadow: 0 2px 3px #000000;
-o-box-shadow: 0 2px 3px #000000;
box-shadow: 0 2px 3px #000000;
margin-bottom: 18px;
margin-top: 6px;
}    

/*  _______________________________________________

16.(e)  FORM ELEMENTS
_______________________________________________  */

.pocp .pocp_form
{
display: block;
margin-bottom: 10px;
}

.pocp .pocp_form label
{
font-size: 12px;
font-family: Arial, Verdana, Tahoma, sans-serif;
}

.pocp .form_element
{
width: 92%;
padding: 6px 4%;
margin: 12px 0 18px 0;
color: #000000; 
background-color:#cccccc;
border: 1px solid #000000;
-webkit-box-shadow: 0 1px 1px #000000;
-moz-box-shadow: 0 1px 1px #000000;
-o-box-shadow: 0 1px 1px #000000;
box-shadow: 0 1px 1px #000000;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
-ms-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
}

.pocp .form_element: hover{
background-color:#F4F4F4;
-webkit-box-shadow: 0 2px 2px #000000;
-moz-box-shadow: 0 2px 2px #000000;
-o-box-shadow: 0 2px 2px #000000;
box-shadow: 0 2px 2px #000000;
}

.pocp .form_element: focus
{
background-color:#FFFFFF;
outline: none;
}

.pocp .pocp_form textarea
{
height: 130px;
resize: none;
}

.pocp .pocp_form .required
{
color:#C00;
}

.pocp .pocp_form .error, 
.pocp .pocp_form .success
{
width: 92%;
padding: 6px 4%;
margin: 12px 0 6px 0;
color:#ffffff;
text-shadow: none;
}

.pocp .pocp_form .error
{
background:#E45635; 
}

.pocp .pocp_form .success
{
background:#90AB76; 
margin-bottom: 12px;
}

.pocp .pocp_form .button
{
border: none;
margin: 0 12px 0 0;
vertical-align: middle;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
cursor: pointer;
text-decoration: none;
padding: 10px 12px;
background: #0e0e0e;
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
transition: background-color 0.3s;
}

.pocp .pocp_form .button: active
{
}

.pocp .pocp_form .button: hover, 
.pocp .pocp_form .button: focus
{
background-color: #000000;
}

.pocp .pocp_form .select_element
{
float: left;
height: 28px;
padding: 0 0 0 3%;
width: 100%;
overflow: hidden;
position: relative;
border: none;
margin: 12px 0 18px 0;
}

.pocp .pocp_form .select_element select
{
width: 100%;
height: 30px;
font-size: 12px;
color: #999;
padding: 6px 0 6px 10px;
border: 0;
background: none;
outline: none;
}

.pocp .pocp_form .select_element select option
{
background: #fdfdfd;
width: 100%;
color: #666;
}

@media screen and (-webkit-min-device-pixel-ratio: 0)
{

.pocp .pocp_form .select_element: after
{
content: '';
position: absolute;
top: 50%;
right: 10px;
margin-top: -3px;
border: 5px solid transparent;
border-top: 5px solid #333333;
pointer-events: none;
}

.pocp .pocp_form .select_element select,
.pocp .pocp_form .select_element select option
{
-webkit-appearance: none;
appearance: none;
}

}

/*  _______________________________________________

16.(f)  PANEL TOGGLES
_______________________________________________  */


.pocp .pocp_toggle
{
list-style: none;
list-style-type: none;
padding: 0;
margin: 0 0 21px -20px;
}

.pocp .pocp_toggle li
{
margin-bottom: 9px;
cursor: pointer;
}

.pocp .pocp_toggle .pocp_toggle_title
{
margin: 0;
background: transparent;
padding: 0;
display: block;
}

.pocp .pocp_toggle .pocp_toggle_title: hover,
.pocp .pocp_toggle .pocp_toggle_title.toggle_active
{
background: transparent;
}

.pocp .pocp_toggle .pocp_toggle_title.toggle_active
{
border-radius: 0 3px 0 0;
}

.pocp .pocp_toggle .pocp_toggle_title i
{
padding-top: 8px;
padding-right: 15px;
float: right;
}

.pocp .pocp_toggle .pocp_panel
{
margin: 0;
display: none;
background: hsla(54, 100%, 95%, 1);  /*  secondary topic link panel colouring  */
box-shadow: inset rgba(0,0,0,.25) -2px 0 4px;
padding: 0;
border-radius: 0;
border: 1px solid hsla(54, 100%, 95%, 1);  /*  border 1px line  */
}

.pocp .pocp_toggle .pocp_panel_parent
{
padding-right: 0;
}

.pocp .pocp_toggle .pocp_panel p
{
margin-bottom: 0;
}

.pocp .pocp_panel > .pocp_toggle
{
margin: -3px 0 0 -20px;
}

.pocp .pocp_panel > .pocp_toggle li
{
margin-bottom: 3px;
}

.pocp .pocp_panel > .pocp_toggle .pocp_toggle_title
{
display: block;
padding-left: 30px;
}

.pocp .pocp_panel > .pocp_toggle .pocp_panel
{
margin: 0;
padding: 9px 20px 9px 30px;
}