/*
Theme Name: Cellice
Version: 1.0
Description: WordPress theme for Cellice
Author: INSPIRE
Author URI: http://www.inspiredc.co.uk
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cellice

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*** General ***/
* { padding: 0px; margin: 0px; }
html { scroll-behavior: smooth }
p { margin: 10px 0px }
body { font-family: 'Montserrat', sans-serif; font-size: 1em; color:#000; margin:0; font-weight:400; background: #06205c; overflow-x: hidden}
.inwrap { width: 100%; margin: 0 auto; }
.contentwrap { width: 100%; display:flex; background: #fff }
.content { width: 90%; margin: 0 auto; }
.contenthome { width: 100%; margin: 0 auto; }
.clear { clear: both; display: block; }
a, a:link, a:active, div a { text-decoration:none; }
a img {border:none }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype') tech('variations'), url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 1000; font-stretch: 25% 151%; }

/*** Header ***/
.header { margin: 0 auto; width:100%; float:left; position:relative; display: flex; align-items: center; justify-content: space-between }
.header .logonavwrapper { display: flex; align-items: center; justify-content: space-between; padding: 0 2.5% }
.header .logonavwrapper .logo { position: relative; z-index: 1000; background: url("images/cellice.svg") no-repeat left; width:280px; height: 120px; margin: 2em 0; background-size: contain; transition: height 0.5s ease-in-out, margin ease-in-out; }
.header .logonavwrapper .logo img { display:block; margin: 0 auto; text-align:center; width:100%; height:auto}
.stick { position: fixed; top: 0; width:100%; z-index: 1000; box-shadow: 0 5px 10px rgba(0,0,0,0.1)}
.stick .logo { width: 200px !important; transition: height 0.5s ease-in-out, margin ease-in-out; margin: 1em 0 !important; height: 60px !important }
.header .contact { display: flex; flex-direction: column; padding: 0 2.5%; text-align: right; width: 280px }
.header .contact .phone, .header .contact .email { margin: 0.75em 0 }
.header .contact .phone a{ color: #199ba8; font-size: 1.5em; }
.header .contact .email a { color: #fff; }
.stick .contact .phone, .stick .contact .email { margin: 0.25em 0 }

/*** Navigation ***/
.navigation ul { padding: 0; list-style:none; display:flex; margin: 0 auto; justify-content: center; font-size: 1em; text-transform: uppercase }
.navigation ul li a:hover { text-decoration:none; }
.navigation li { height:40px; line-height:40px; position: relative }
.navigation li a, .navigation li li a { display: inline-block; padding: 0 0.5em ; text-decoration: none; border: 0; position: relative; margin: 0 1em }
.navigation li ul { z-index: 9999; position: absolute; left: -999em; height: auto; margin: 0 0.5em; color:#000; flex-direction: column; background: #06205c; } 
.navigation li ul ul { margin: -35px 0 0 166px; }
.navigation li:hover ul ul, #subnav li:hover ul ul ul { left: -999em; }
.navigation li:hover ul, .navigation li li:hover ul, .navigation li li li:hover ul { left: auto; }
.navigation li:hover { position: static; }
.menu li.menu-item-has-children > a:after { content: ' ▼'; margin-left: 5px; font-size: 15px; vertical-align: top }
.navigation li:hover { position: static; }
.navigation ul li.current_page_item a:before, .navigation ul li.current-menu-item a:before { content: ""; position: absolute; width: calc(100% - 1em); height: 2px; bottom: 0; left: 0.5em; background-color: #199ba8; visibility: visible; transform: scaleX(1); }
.navigation ul li a:before, .navigation ul li a:active:before { content: ""; position: absolute; width: calc(100% - 1em); height: 2px; bottom: 0; left: 0.5em; background-color: #199ba8; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out; }
.navigation ul li a:hover:before { visibility: visible; transform: scaleX(1); }
.navigation ul li.current-menu-item:not(.anchor) > a::before { height: 2px; }
.navigation ul li.current-menu-item.anchor > a::before { height: 0px; }

/*** Content ***/
.post { background:#fff}
.page { float:left; width:100%; }
.page .postHead { background: none; }
.postContent { padding: 1% 0 0; background:#fff; margin: 0 auto }
.contenthome .postContent { padding: 0 2.5%;  }
.postContent a { color: #3d3938; text-decoration:underline }
.postContent .half { width:48%; float:left}
.postContent h1 { font-size: 2.5em; font-weight: 400; margin:0 0 1%; }
.postContent h2 { font-size: 2em; font-weight: 400; margin:2% 0; }
.postContent h3 { font-size: 1.75em; font-weight: 400; margin: 2% 0; }
.postContent h4 { font-size: 1.5em; font-weight: 600; margin: 2% 0; }
.postContent h5 { font-size: 1.25em; font-weight: 600; margin: 2% 0; line-height:135%; }
.postContent h6 { font-size: 1.15em; font-weight: 600; margin: 2% 0; line-height:130%; }
.postContent p { font-size: 1.1em; margin: 1.25em 0 ; line-height:1.75; }
.postContent p.intro { font-size: 1.4em; margin: 1% 0 ; line-height:150%; }
.postContent ul { margin: 5px 0px; }
.postContent ul li { font-size: 1.1em; margin: 1% 0 1% 1%; line-height: 140%; }
.postContent ol li { padding:5px 0; font-size: 1.1em}
.postContent ol { margin: 5px 0px 5px 22px; }
.postContent blockquote { font-weight:normal; margin: 2em 0; padding: 0.5em 0.5em 1em ; border-left: 10px solid rgba(6, 32, 92,1); background: rgba(25, 155, 168,0.2) }
.postContent blockquote p { margin: 1%; font-size: 1.25em; line-height: 140%; font-weight: 300; }
.postContent blockquote cite { margin: 1%; font-size: 1em; font-weight: 600; font-style: normal }
.postContent hr { margin: 5% 0 }
.postContent img { max-width: 100%; height:auto }
.postContent blockquote.half { float:left; width: 48%; margin: 0 2% 0 0 }
.postContent table { width: 100%; border-collapse:collapse; margin: 0 0 1% }
.postContent table th { border: 1px solid #000; padding: 0.5%; text-align:left }
.postContent table td { vertical-align:top; padding: 0.75em; border: 1px solid #75B0B5 }
.postContent a.post-edit-link {float:left; margin: 2% 0; clear:both}
.alignfull { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.full { padding: 2.5%; background:#fff; width: 90%; margin: 0 auto }
.full h1 { font-size: 2.5em; font-weight: 400; margin:0 0 1%; }

/*** Specials ***/
.postContent .wp-caption { background: #f8f7eb; border: solid 1px #EBE9D7; text-align: center; padding-bottom: 4px; }
.postContent .wp-caption img { border: solid 5px #f8f7eb; }
.postContent .alignleft { float: left; margin: 0px 15px 5px 0px; display: block; max-width: 50% }
.postContent .alignright { float: right; margin: 0px 0px 5px 15px; display: inline; }
.postContent .aligncenter { margin: 0 auto 0 auto; display:block }
.postContent .wp-caption p { margin: 0px; }

/*** FAQ ***/
.faq h2 { margin: 0 }
.faq hr { margin: 0 }
.faq details { padding: 1em 0}
.faq details summary { font-size: 1.1em }
.faq details p { margin: 1em }

/*** Anchors offset ***/
#faq, #products { scroll-margin-top: 200px; }

/*** Contact form ***/
textarea.kb-textarea-field { width: calc(100% - 16px) !important}

/*** Sidebar home ***/
.sidebarhome { width: 96%; margin: 0 0; height:auto; padding: 1% 2%; float:left; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; background: #199ba8 }
.sidebarhome .sidebarItem { margin: 1.5% 2.5%; flex: 1}
.sidebarhome .sidebarItem h3 { font-size: 1.35em; font-weight: 400; margin:0;  width:98%; padding:1% 0; text-align: center }
.sidebarhome .sidebarItem p { font-weight: 400; margin:2% 0 ; }
.sidebarhome .sidebarItem .textwidget { float:left; padding: 0 2% 0 0; width: 98% }
.sidebarhome .sidebarItem img.alignleft, .sidebar .sidebarItem img.alignleft { float: left; margin: 0 1% 0 0 }
.sidebarhome .sidebarItem ul { list-style: none; margin: 2% 0}
.sidebarhome .sidebarItem ul li { margin: 1% 0}
.sidebarhome .sidebarItem img { max-width: 300px}

/*** Footer ***/
.footer { height:auto; font-size:0.75em; clear:both; line-height:140%; display: flex; width: 90%; margin: 0 auto }
.footer a { text-decoration: underline }
.footer .fleft { width: 50%; float: left; margin: 1% 0; }
.footer .fright { width: 50%; float: left; text-align:right; margin: 1% 0; }
.menu-footer-container { height:auto; font-size:0.75em; clear:both; line-height:140%; display: flex; width: 90%; margin: 1% 5% 0; justify-content: flex-start; float: left }
.menu-footer-container ul li { list-style: none; margin: 0 2em 0 0; display: inline-block}
.menu-footer-container ul li a { color: #fff }

/*** Footer Navigation ***/
.footer ul#menu-footer-menu, .footer ul#footer-menu { float:left; margin: 1% auto 0; width: 100% }
.footer ul#menu-footer-menu li, .footer ul#footer-menu li { display:inline-block; padding: 0 0.5% }

/*** Responsive Menu ***/
#responsive-menu-pro-container #responsive-menu-pro-wrapper { margin: 3em 0 0 }

/***Smart Slider ***/
.blueback { background: #199ba8 }
.redback { background: red }

/* -- Media Queries -- */

@media only screen and (min-width : 601px) and (max-width : 900px) {
.contentwrap { flex-direction: column }
.content { width: 100%;  }
.sidebar {width: 100%; margin: 1% 0; display: flex}
.header .logonavwrapper button.portal { margin: 0 3em 0 0 }
}

@media only screen and (max-width : 600px) {
.header .logonavwrapper { padding: 0 2%; width: 50% }
.header .logonavwrapper .logo { margin: 0.5em 0; height: 90px }
    .header .contact .phone, .header .contact .email { margin: 1em 0.5em }
    .header .contact .phone a { font-size: 1.2em }
    .header .contact { margin-top: auto }
    .header .contact .email { display: none }
.contentwrap { flex-direction: column}
.contenthome .postContent { max-width: 100% }
.sidebar { width: 100%; margin: 0; }
.sidebarhome { flex-direction: column; }
.sidebarhome .sidebarItem { width: 80%; margin: 1.5% 10% }
.footer { width: 96%; margin: 2%; flex-direction: column }
.footer .fleft, .footer .fright { width: 100%; }
.menu-footer-container { width: 96%; margin: 1% 2% 2%; justify-content: flex-start; float: left }
.header .logo { width:150px !important; }
.postContent { max-width: 100% }
.postContent h1, .postContent h2 { font-size: 2em; }
.header .logonavwrapper button.portal { display: none }
.mobileonly {display: block; padding: 0.5em; border: 2px solid #1c1515; border-radius: 2px; transform: translate(50%); max-width: 50%}
.mobileonly:hover {color: #fff; background: #1c1515; }
}

@media only screen and (max-width : 320px) {
.header .logo { width:150px !important; }
.sidebarhome .sidebarItem { width: 100% }
}