@charset "utf-8";
/* CSS Document */

:root {
    --grid-width:       1024px; /* Base Width is Set Here */
    --grid-gutter:        15px; /* Gutter Width is set here.  Just put half the gutter width here. */
    --header-height:       0px;
    --footer-height:     100px;
    
    --sidebar-width:     280px;
    
    --primary-color:        #F05025;
    --secondary-color:      #4A4A4A;
    --tertiary-color:       #FFFFFF;
    --quadranary-color:     #0f0f0f;
    --primary-font:         proxima-nova, sans-serif;
    --secondary-font:       proxima-nova, sans-serif;
    --standard-font-size:   20px;
    --line-height:          1.5;
}

/* Base Template Settings */

body											{ font-family: var(--primary-font); }
#page-head container, #page-foot container, div container, 
section container					            { max-width: var(--grid-width); } 
.halves > .half > container                       { max-width: calc( var(--grid-width) / 2 ); } 
.halves > .half > container, .listed li,
[class^="box-"], [class*=" box-"]               { padding: var(--grid-gutter); } 
[class^="dashicons-"], [class*=" dashicons-"]   {  font-family: "Dashicons"; font-size: 30px; padding: 20px; height: 70px; } 
.cta, input[type=submit], .frm_button_submit, 
button                                          {  }

article p, .p                                   { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); }
article h1, .h1                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); color: var(--secondary-color); font-size: 150px; letter-spacing: 0.1ex; }
article h2, .h2                                 { font-size: 36px; text-transform: uppercase; font-weight: 700; letter-spacing: .2ex; color: var(--primary-color); margin-bottom: 7px; margin-top: 14px; }
article h3, .h3                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); }
article h4, .h4                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); }
article h5, .h5                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); }
article h6, .h6                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); }
article blockquote, .blockquote                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); }
article blockquote cite, .blockquote cite       { font-family: var(--primary-font); line-height: var(--line-height) }
article ul, article ol                          { padding-left: var(--standard-font-size); padding-bottom: 10px; }
article ul                                      { list-style-type: disc; }
article ol                                      { list-style-type: decimal; }
ul li,
ol li 											{ font-family: var(--primary-font); font-size: var(--standard-font-size); line-height: var(--line-height); }
details                                         { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); }
details summary                                 { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); }
 
/* Header Settings */

#page-head										{ background: var(--primary-color); height: var(--header-height); position: relative; left: 0px; top: 0px; z-index: 1; width: 100%; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75); }
#page-head container                            { height: var(--header-height); }
#page-head container .logo 	                    { width: 80px; display: block; }
#page-head container .logo svg *                { fill: var(--secondary-color); }
#page-head container #nav                       {  }
#page-head container #nav #main					{  }
#page-head container #nav #main li,
#page-head container #nav #main a			    { color: var(--tertiary-color); text-decoration: none; margin: 0px 5px; font-family: var(--primary-font); font-size: var(--standard-font-size); color: #FFF; }
#page-head container #nav #main > li:last-child a { margin-right: 0px; }
#page-head container #nav #main .current-menu-item a, #page-head container #nav #main .active a,
#page-head container #nav #main a:hover           { color: var(--secondary-color); opacity: 1; } /* This is the Hover/Active state for the menu item */
#page-head.toggle-menu container > .toggle:before, #page-head.toggle-menu container > .toggle:after, #page-head.toggle-menu container > .toggle i:before, #page-head.toggle-menu container > .toggle i:after    { background: #FFF; }
#nav.addtoggle #main .menu-item-has-children span.toggler { position: absolute; top: 0%; right: 0px; transform: translateY(50%); }

/* Header Image Settings */

.header-image, .header-image container          { height: 400px; }

/* Content Settings */

#entry-form                                     { text-align: center; }

aside                                           { position: fixed; left: calc( var(--sidebar-width) * -1 ); top: 0px; width: var(--sidebar-width); height: 100vh; background: var(--quadranary-color); color: #FFF; transition: all .5s ease-in; z-index: 9; }
aside container                                 { width: 100%; padding: 60px 25px; height: 100vh; overflow: scroll; }
aside label[for="sidebox"]                      { position: absolute; left: 100%; top: 25px; background: var(--quadranary-color); color: #FFF; cursor: pointer; }
aside label[for="sidebox"] span                 { writing-mode: vertical-rl; text-orientation: mixed; font-size: 14px; padding: 15px 5px; }
#sidebox:checked ~ aside                        { left: 0px; }
#sidebox                                        { display: none; }
aside container h5                              { text-transform: uppercase; font-size: 20px; margin-bottom: 15px; }
aside container ul li                           { margin-bottom: 10px; }
aside container ul li a                         { font-size: 14px; color: #FFF;text-transform: uppercase; }
aside container ul li a:hover                   { opacity: 0.5; }

.post-password-form                             { max-width: 450px; margin: auto; display: block; background: var(--primary-color); margin: 35px auto; padding: 25px; }
.post-password-form:after                       { clear: both; display: block; content: ''; }
.post-password-form label                       { display: block; color: #FFF; font-size: 18px; font-weight: 300; margin-bottom: 10px; text-align: center; }
.post-password-form input[type=password]        { width: calc( 100% - 85px ); height: 50px; border: none; padding-left: 15px; font-size: 18px; float: left;}
.post-password-form input[type=submit]          { width: 75px; height: 50px; border: none; background: var(--secondary-color); float: right; font-family: var(--icon-font); font-weight: 900; font-size: 28px; color: #FFF; }

aside #search                                   { margin: 40px 0px; }
aside #search:after                             { clear: both; display: block; content: ''; }
aside #search input[type=search]                { width: calc( 100% - 40px ); height: 30px; border: none; padding-left: 15px; font-size: 18px; float: left;}
aside #search button                            { width: 30px; height: 30px; border: none; background: var(--primary-color); float: right; font-family: var(--icon-font); font-weight: 900; font-size: 18px; color: #FFF; }

#notfound                                       { display: none; }
#notfound.show                                  { display: block; }

.page-title                                     { padding-top: 80px; font-size: 50px; }

main                                            { min-height: calc( 100vh - var(--header-height) - var(--footer-height) ) }
.admin-bar main                                 { min-height: calc( 100vh - var(--header-height) - var(--footer-height) - 32px ) }
main a                                          { color: var(--primary-color); text-decoration: none; } /* Main Link Style */
main .content .boxcontainer div div             { background: var(--secondary-color); color: #FFF; padding: 10px; min-height: 40px; font-size: 10px; }
#content container                              { transition: all .5s ease-in; }


#sidebox:checked ~ #content container           { transform: translateX( calc( var(--sidebar-width) / 2 ) )  }

/* block settings */
figure.full-width,
div.full-width { width: 100%; display: flex; }
.image-first-paragraph img { width: 100%; }
.image-first-paragraph figure.left { margin-right: 20px; }
.image-first-paragraph figure.right { margin-left: 20px; }
figure.left { padding-right: 20px; }
figure.right { padding-left: 20px; }
.blockicon-width { width: 110px; min-width: 110px; }
.blockicon-width-1-2 { width: 50%; min-width: 50%; }
.blockicon-width-1-3 { width: calc(100% / 3); min-width: calc(100% / 3); }
.blockicon-width-1-4 { width: 25%; min-width: 25%; }
.blockicon-width-1-5 { width: calc(100% / 5); min-width: calc(100% / 5); }
.blockicon-width-1-6 { width: calc(100% / 6); min-width: calc(100% / 6); }
.image-first-paragraph { display: flex; width: 100%; }
.first-paragraph { width: auto; }
.center-align { text-align: center; }
.alignright {float: right; padding: 0 0 10px 10px; }
.alignleft {float: left; padding: 0 10px 10px 0;}

/* Form Settings */

.frm_form_field input:focus::-webkit-input-placeholder  { color: transparent; }
.frm_form_field input:focus:-moz-placeholder            { color: transparent; } 
.frm_form_field input:focus::-moz-placeholder           { color: transparent; } 
.frm_form_field input:focus:-ms-input-placeholder       { color: transparent; } 
.frm_form_field input[type=checkbox]            {  }
.frm_form_field input[type=checkbox]:checked:before {  }
.frm_form_field input[type=radio]               {  }
.frm_form_field input[type=radio]:checked:before     {  }
.frm_form_field input[type=text], .frm_form_field input[type=email], 
.frm_form_field input[type=tel]                {   }  
.frm_form_field textarea                        {  }    
.frm_form_field select                          {  }

/* Footer Settings */
#page-foot										{  }
#page-foot container                            { height: var(--footer-height);  }
#page-foot svg                                  { width: 45px; height: 45px; margin: auto; }
#page-foot small                                { display: block; text-align: center; font-size: 14px; }

@media handheld, only screen and (max-width: 1359px) and (min-width: 1024px) { /* Under the grid width to iPad Landscape */
        
    :root {
    --grid-width:       740px; /* Base Width is Set Here */
    }
    article h1, .h1                                 { font-size: 100px; }
    #sidebox:checked ~ #content container           { transform: translateX( calc( var(--sidebar-width) / 2 ) )  }
}

@media handheld, only screen and (max-width: 1023px) and (min-width: 767px) { /* Smaller tablets to iPad portrait */
    :root {
        --grid-width:       calc( 100vw - 50px );
    }
    article h1, .h1                                 { font-size: 75px; }
    #sidebox:checked ~ #content container           { transform: translateX( 0 )  }
}

@media handheld, only screen and (max-width: 766px) { /* Mobile - All Mobile */
    
    :root {
        --grid-width:       calc( 100vw - 50px );
    }
	
	/* Mobile Menu styles */
	
    #page-head container .logo > *                { max-height: var(--header-height); }
    #page-head container #nav					  { background: var(--secondary-color);}
    #page-head container #nav #main               {  }
	#page-head container #nav #main li a		  { padding: 20px; }	
	#page-head container #nav #main li ul	      {  }
    #page-head container #nav #main li ul li a    {  }
    
    
    article h1, .h1                                 { font-size: 60px; }
    article h2, .h2                                 { font-size: 30px; }

     #sidebox:checked ~ #content container           { transform: translateX( 0 )  }

}

/* on print hide */
@media print{
    aside { display: none; }
}