/*
Theme Name: Totum Software
Theme URI: http://www.squarerchilli.co.uk
Author: squarechilli
Author URI: http://www.squarerchilli.co.uk
Description: Totum Software is developed and maintained by squarechilli
Version: 1
*/



/*Global*/
:root {
  --main-font: 'Roboto Condensed';
  --title-font: 'Roboto Slab';
  --color-main: #313131;
  --color-green: #22bdb5;
  --color-lightgreen: #47fff5;
  --color-orange: #f26144;
  --color-copper: #711f00;
  --color-black: #000;
  --color-white: #fff;
  
}

/*essentials*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {position: relative; font: 16px var(--main-font), Arial, sans-serif; font-weight: 100; color: var(--color-main); background-color: var(--color-white); border-top: 2px solid var(--color-orange); -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; margin:0px; padding: 0 }
a {color: var(--color-main); text-decoration: underline; outline: none;-webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s;  transition: background-color 0.25s;}
a:hover {text-decoration: underline;}
h1 {font-size: 46px;margin: 35px 0px; color: var(--color-blue); font-family: var(--title-font), 'Helvetica Neue'; text-align: center; font-weight: 100}
h2 {position: relative;font-size: 22px;color: var(--color-blue); font-family: var(--title-font), 'Helvetica Neue'; padding-bottom: 7px;margin: 0;     font-weight: 100;}
h3 {margin: 10px 0;  color: var(--color-blue); font-family: var(--title-font), 'Helvetica Neue';     font-weight: 100;}
p {}
button:focus,input:focus,select:focus,textarea:focus {outline: none;}
img {max-width: 100%;border: 0px;height: auto;width: auto\9; /* ie8 */}
.alignleft {float: left; margin-right: 15px}
.alignright {float: right; margin-left: 15px}
.aligncenter {text-align: center;}
.text-right {text-align: right !important}
.center {margin: 0 auto; text-align: center}
.noborder {border: 0px}
.nomargin {margin: 0 !important}
.clear {clear: both}
.clear:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
section {position: relative; clear: both}
.wrapper {position: relative;max-width: 1400px;margin: 0px auto;padding: 0;}
.wrapper:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.narrow {max-width: 90%;margin: 20px auto;}
.narrower {max-width: 80%;margin: 20px auto;}
.narrowest {max-width: 70%;margin: 20px auto;}
.fullwidth {position: relative; width:auto;overflow:hidden; margin: 30px 0}
strong {}
input {font-family: var(--main-font); color: var(--color-main); }

.large {font-size: 1.2em}
.larger {font-size: 1.6em}
.largest {font-size: 2em}




/*header*/
header {position: relative; background-color: #f16143;margin-bottom: 60px;}
header > .wrapper {display: grid; grid-template-columns: 300px 1fr; grid-template-rows: repeat(2, 1fr); padding: 20px 0}
header > .wrapper .logo { grid-area: 1 / 1 / 2 / 2; }
header > .wrapper .main-menu { grid-area: 1 / 2 / 2 / 3; }
header > .wrapper h1 { grid-area: 2 / 1 / 3 / 3; color: var(--color-white); margin: 20px 0; text-align: left}
.logo a {display: grid;grid-template-columns: 96px 1fr;grid-column-gap: 20px;align-items: center;text-decoration: none}
.logo h1, .logo div {font-size: 18px;color: var(--color-white);text-align: left;padding: 0;margin: 0; font-weight: bold}
.main-menu {text-align: right}
.main-menu ul {list-style-type: none; margin: 10px 0 0 0; padding: 0 }
.main-menu ul li {position: relative; display: inline-block; padding: 5px}
.main-menu ul li a {position: relative;text-decoration: none; color: var(--color-white); text-transform: uppercase; font-weight: bold}
.main-menu ul#menu-main-menu > li > a::before,
.main-menu ul#menu-main-menu > li > a::after {position: absolute;width: 100%;height: 1px;background: currentColor;top: 100%;left: 0;}
.main-menu ul#menu-main-menu > li > a::before {content: '';}
.main-menu ul#menu-main-menu > li > a::before {transform-origin: 100% 50%;transform: scale3d(0, 1, 1);transition: transform 0.3s;}
.main-menu ul#menu-main-menu > li > a:hover::before {transform-origin: 0% 50%;transform: scale3d(1, 1, 1);}

.main-menu ul ul {display:none;position:absolute;top: 15px;left:0;padding:0;min-width: 300px;padding: 5px 10px 5px 10px;z-index: 2; background-color: var(--color-green)}
/*last item (well, shop is techniclaly last) hover goes of screen, so align right instead of left*/nav ul li:nth-last-child(2) ul {right: 0; left: auto}
.main-menu ul ul li {float:none;width:100%;border: 0;position: relative;display: block; min-height: 30px; margin: 10px auto; text-align: left}
.main-menu ul ul a { position: relative; color: var(--color-white)}
.main-menu ul ul a:hover {text-decoration: underline}
.main-menu ul ul ul {top:0; left:100%}
.main-menu ul li:hover > ul {display:block}

.slider-search {position: absolute;width: 300px;right: 0;margin-left: -150px;bottom: -26px; z-index: 2}
.slider-search input {width: 300px; font-size: 14px; border: 2px solid var(--color-orange);border-radius: 0 20px 20px;padding: 12px 40px 11px 10px;background: #fff url('images/search-icon.png') no-repeat calc(100% - 10px) 50%}



/*Homepage*/
.home header {background-color: #e0dada; margin-bottom: 0;}
.home header > .wrapper {display: grid; grid-template-columns: 330px 1fr; grid-template-rows: unset; padding: 20px 0}
.home header > .wrapper .logo { grid-area: unset; }
.home header > .wrapper .main-menu { grid-area: unset; }
.home header > .wrapper h1 { grid-area: unset}
.home .logo h1 {color: var(--color-green)}
.home .logo h1 span {font-size: 14px}
.home .main-menu ul li a {color: var(--color-green)}
.home .main-menu ul ul li a {color: var(--color-white)}
.slider {position: relative; border-bottom: 2px solid var(--color-orange); background-color: #e0dada}
.home .slider-search {left: 50%;}

.home-blocks {position: relative;}
.home-blocks div:first-child {max-width: 695px;}
.home-blocks > div:not(:first-child) {margin-left: 10px !important;}
.home-blocks > div:last-of-type {display: block;background: var(--color-orange) url('images/copper-logo.png') no-repeat;}
.home-blocks div:last-of-type h2 {color: var(--color-white); font-size: 34px; padding-top: 50px}
.home-blocks .wp-block-button {display: block !important;}
.home-blocks .wp-block-button .wp-block-button__link {float: right; margin-right: 10px}

.home-blocks2 {position: relative;padding: 10px 0; display: grid !important; grid-template-columns: 1fr 1fr; }
.home-blocks2 div:not(:first-child) {margin-left: 10px !important;}
.home-blocks2 p {margin: 20px}
.home-blocks2 > div:last-of-type .wp-block-button {display: block !important;}
.home-blocks2 > div:last-of-type .wp-block-button .wp-block-button__link {float: right;}


/*General*/
.has-colour-main-background-color {background-color: var(--color-main)}
.has-colour-green-background-color {background-color: var(--color-green)}
.has-colour-lightgreen-background-color {background-color: var(--color-lightgreen)}
.has-colour-orange-background-color {background-color: var(--color-orange)}
.has-colour-copper-background-color {background-color: var(--color-copper)}
.has-colour-black-background-color {background-color: var(--color-black)}
.has-colour-white-background-color {background-color: var(--color-white)}

.has-colour-main-color {color: var(--color-main)}
.has-colour-green-color {color: var(--color-green)}
.has-colour-lightgreen-color {color: var(--color-lightgreen)}
.has-colour-orange-color {color: var(--color-orange)}
.has-colour-copper-color {color: var(--color-copper)}
.has-colour-black-color {color: var(--color-black)}
.has-colour-white-color {color: var(--color-white)}

::-webkit-input-placeholder {color: var(--color-black);}
::-moz-placeholder {color: var(--color-black);}
:-ms-input-placeholder {color: var(--color-black);}
:-moz-placeholder {color: var(--color-black);}

.split-colour {background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-white) 50%, var(--color-green) 50%, var(--color-green) 100%);}

.feature-list h2 {margin: 0;padding: 10px !important;font-size: 16px; font-weight: bold}
.feature-list h2 a {color: var(--color-white); text-decoration: none}
.feature-list p {margin: 0; padding: 2px 20px 20px 20px; min-height: 95px; font-size: 16px}
.feature-list figure {margin: 0}
.feature-list img, .feature-list a {width: 100% !important}
.feature-list li {background-color: var(--color-orange); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}

blockquote {margin: 0; padding: 40px; background: url('images/quote.png') no-repeat 20px 20px}
blockquote p {font-size: 27px}
blockquote p:after {position: relative; content: '"'; margin-left: 5px}
blockquote cite {text-transform: uppercase; font-style: normal !important}

.quote-row-wrapper {position: relative}
.quote-row {padding-bottom: 10px}
.quote-row:before {position:absolute; content: ''; top: 0; left: 0; right: 0; height: 10px; background-color: var(--color-white); }
.quote-row div {z-index: 2}
.quote-row.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child) {margin-left: 10px !important}
.quote-row-wrapper > div > .wp-block-columns:last-of-type {max-height: 308px}
.quote-row-wrapper > div > .wp-block-columns:last-of-type div:not(:first-child) {margin-left: 10px !important}

.content ul {margin: 0; padding: 0}
.content li {list-style-type: none; margin: 0 0 10px 0; padding: 0 0 0 20px}
.content li:not(.wp-block-post):before {content: ' '; display: inline-block; border: 2px solid var(--color-orange); width: 6px; height: 6px; border-radius: 5px; margin-right: 7px; margin-left: -20px}
.content ul li ul {margin: 8px 15px}
.content ul li ul li:before {border: 2px solid rgb(242 97 68 / 55%);}

.feature-grid {position: relative; }
.feature-grid.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column { padding: 10px 20px}
.feature-grid.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child) {margin-left: 10px !important;}
.feature-grid > div {padding-bottom: 80px !important}
.feature-grid .wp-block-buttons .wp-block-button .wp-block-button__link {position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px) !important}

.wp-block-buttons .wp-block-button:first-of-type .wp-block-button__link {background: transparent url('images/fancylink.png') no-repeat calc(100% - 10px) 50% !important; border: 2px solid var(--color-lightgreen); border-radius: 0 20px 20px !important; padding: 6px 50px 6px 15px !important; text-transform: uppercase}
.wp-block-buttons .wp-block-button:last-of-type .wp-block-button__link {background: var(--color-orange) url('images/fancylink-alt.png') no-repeat calc(100% - 10px) 50% !important; border: 2px solid var(--color-orange); border-radius: 0 20px 20px !important; padding: 6px 50px 6px 15px !important; text-transform: uppercase; color: var(--color-copper)}
.wp-block-button__link:hover {text-decoration: none; padding-right: 65px !important}

.wp-block-buttons .fancylink-blackgreen .wp-block-button__link {background: var(--color-main) url('images/fancylink-alt.png') !important; border: 2px solid  var(--color-main);}

.gform_button {background: var(--color-orange) url('images/fancylink-alt.png') no-repeat calc(100% - 10px) 50% !important; border: 2px solid var(--color-orange); border-radius: 0 20px 20px !important; padding: 6px 50px 6px 15px !important; text-transform: uppercase; color: var(--color-copper)}

.blog-archive {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 10px; grid-row-gap: 10px; margin: 10px 0 40px}
.blog-archive > div {position: relative; height: 270px}
.blog-archive > div:nth-child(even) {background-color: var(--color-green); border: 2px solid var(--color-green)}
.blog-archive > div:nth-child(odd) {background-color: var(--color-lightgreen); border: 2px solid var(--color-lightgreen)}
.blog-archive > div a {position: absolute; top: 20px; bottom: 20px; left: 20px; right: 20px; text-decoration: none; color: var(--color-main)}
.blog-archive > div:nth-child(even) a { color: var(--color-white)}
.blog-archive > div:hover {border: 2px solid var(--color-main)}

.wp-pagenavi {position: relative; text-align: center; font-size: 18px}
.wp-pagenavi .pages, .wp-pagenavi .extend {display: none}
.wp-pagenavi .larger {font-size: 1em}
.wp-pagenavi span, .wp-pagenavi a {display: inline-block; text-decoration: none; padding: 5px 10px; border: 1px solid transparent; margin: 0 2px}
.wp-pagenavi .current {background-color: var(--color-main); color: var(--color-white); border: 1px solid var(--color-main)}
.wp-pagenavi a:hover {border: 1px solid var(--color-main)}

.single-wrapper {position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-column-gap: 40px;}
.single h1 {text-align: left}
.single-right h2 {margin: 10px}
.single-right a {text-decoration: none}
.single-right a:hover {text-decoration: underline}
.single-right .has-colour-green-background-color a {color: var(--color-white)}

.services-grid {min-height: 260px}
.services-grid > div.wp-block-column {border: 5px solid var(--color-white);}
.wp-block-columns.services-grid:not(.home-blocks) > div:not(:first-child) {margin-left: 0 !important}
.services-grid h2, .services-grid p {margin: 10px}

/*.pricing-table .wp-block-buttons .wp-block-button .wp-block-button__link {position: relative; background: black !important; border: 0; border-radius: 0 !important}*/
.pricing-table .wp-block-buttons .wp-block-button .wp-block-button__link {position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px) !important}

/*integration checklist form*/
.gform_wrapper .gf_step span.gf_step_number {display: none!important}
.gform_wrapper .gf_step {border: 1px solid var(--color-green);border-radius:10px !important; padding: 5px 10px !important;height:30px !important}
.gf_step_active {background-color:var(--color-green);color: #fff}
/*.gform_wrapper input[type=text] {border: 1px solid var(--color-main);border-radius:10px !important;padding:5px 10px !important; height:30px !important}
.gform_wrapper textarea.medium{border:1px solid var(--color-main);border-radius: 10px !important}
.gform_wrapper #gform_fields_2_2 .top_label .gfield_label {display: none}
body .gform_legacy_markup_wrapper ul li.field_description_below div.ginput_container_checkbox, body .gform_legacy_markup_wrapper ul li.field_description_below div.ginput_container_radio {margin-top: 0 !important}
*/
.gform_wrapper .top_label li.gfield.gf_left_half:before {display: none !important}


/*Gutenberg fixes*/
.alignwide {margin-left  : -80px;margin-right : -80px;}
.alignfull {margin-left  : calc( -100vw / 2 + 100% / 2 ) !important; margin-right : calc( -100vw / 2 + 100% / 2 ) !important;max-width    : 100vw !important;display: block; width: 100vw !important}

.wp-block-column {position: relative}
.wp-block-columns {margin-bottom: 0 !important; /*gap: 30px*/}
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child) {/*margin-left: 70px !important;*/}
.wp-block-columns:not(.home-blocks) > div:not(:first-child) {margin-left: 10px !important;}

.wp-block-media-text__media { margin: 40px !important}

.home-blocks .wp-block-buttons .wp-block-button .wp-block-button__link {background: var(--color-main) url('images/fancylink.png') no-repeat calc(100% - 10px) 50% !important; border: 2px solid  var(--color-main); color: var(--color-white) }
.home-blocks >div:last-of-type .wp-block-buttons .wp-block-button .wp-block-button__link {background: var(--color-main) url('images/fancylink-orange.png') no-repeat calc(100% - 10px) 50% !important; border: 2px solid  var(--color-main); color: var(--color-white) }

.home-blocks2 .wp-block-columns > div:first-of-type .wp-block-buttons .wp-block-button .wp-block-button__link {background: var(--color-black) url('images/fancylink-orange.png') no-repeat calc(100% - 10px) 50% !important; border: 2px solid  var(--color-main); color: var(--color-white) }

.wp-block-media-text__media img {width: auto !important; max-width: 100% !important}
.wp-block-image {margin: 0 !important}

.wp-block-cover.alignfull {border-top: 2px solid var(--color-orange); border-bottom: 2px solid var(--color-orange);}
.wp-block-cover.alignfull.cover-bottom {border: 0; top: 40px}

.wp-block-group {padding: 30px}

.wp-block-query li {padding: 0}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {position:relative !important; margin-top: 0px; background: var(--color-orange) !important; color: black !important; line-height: 20px !important; padding: 5px !important; color: var(--color-white) !important; font-size: 16px !important; font-weight: bold;}
.wp-block-gallery figure {padding: 10px 10px 30px 10px !important}
.client-gallery {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr}
.wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {width: auto !important}
.customers-gallery {display: grid; grid-template-columns: 1fr 1fr 1fr}
.customers-gallery figure.wp-block-image:not(#individual-image) {width: auto !important}


/*Masterslider feature slider show all layers when nearby*/
.ms-parent-id-2 .ms-anim-layers div.ms-layer {visibility:visible !important;display: block !important; width: 393px; height: 135px; bottom: 0px; left: -1.5px; margin: 0px; padding: 0px; font-size: 13px; display: none;}
.ms-parent-id-2 .ms-anim-layers img {visibility:visible !important;display: block !important; top: 0px; left: 0px; width: 393px; height: 350px; margin: 0px; padding: 0px;}
.ms-anim-layers {display: block !important}

/*footer*/
.instagram-feed {margin-top: 60px !important}
footer {position: relative;background-color: var(--color-main);color: var(--color-white);padding: 80px 0 20px 0;margin-top: 60px}
footer h2 {max-width: 800px; margin: 0 auto; text-align: center; font-size: 20px}
footer h3 {max-width: 800px; margin: 0 auto; text-align: center; font-size: 24px; color: var(--color-green)}
footer .contact {display: grid; grid-template-columns: 1fr 1fr; max-width: 900px; margin: 30px auto; text-align: center; font-size: 24px;}
footer .contact a {color: var(--color-white); text-decoration: none}
footer .contact > div {margin: 20px 0}
.footer-logo {margin: 0 auto 40px auto; text-align: center; max-width: 200px;}
.footer-signoff {display: grid; grid-template-columns: 1fr 3fr; }
.footer-signoff a {color: var(--color-white); text-decoration: none}
.footer-signoff p:first-child {color: #736f70}
.footer-signoff p:last-child {text-align: right}

.footer-signoff p {position: relative; display: inline-block; margin: 20px}
.footer-signoff p:last-of-type {float: right}
.footer-signoff p:last-of-type img {vertical-align: middle; margin-left: 10px}


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 1100px) {
		 	
		}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 813px) and (max-width: 1099px) {
			.wrapper {width: 100%;padding: 0 1%;}
			

		}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (min-width: 481px) and (max-width: 812px)  {
       
			
			
			
		}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 480px) {
            .wrapper {padding: 0}
			.wrapper > p, .wrapper > h2 {padding: 0 2%}
            header {margin-bottom: 10px}
            header > .wrapper{display: block; padding: 20px 3%}
            header h1 {font-size: 26px}
            .split-colour h2 {margin-bottom: 20px}
            .wp-block-buttons .wp-block-button:first-of-type .wp-block-button__link {padding: 6px 30px 6px 10px !important}
			.wp-block-buttons .wp-block-button:last-of-type .wp-block-button__link {padding: 6px 30px 6px 10px !important}
			.home-blocks > div:not(:first-child) {margin-left: 0 !important; padding-bottom: 20px}
			.home-blocks > div:last-of-type {height: 300px}
			.home-blocks div:last-of-type h2 {margin-bottom: 20px}
			.home-blocks2 {display: block !important;}
            .home-blocks2 .wp-block-media-text.is-stacked-on-mobile {grid-template-columns: 1fr !important;}
			.home-blocks2 figure {display: none}
		    .home-blocks2 div:not(:first-child) {margin-left: 0 !important; margin-top: 10px}
			.home-blocks2 .wp-block-media-text .wp-block-media-text__content {padding-bottom: 10px !important}
            .wp-block-media-text__media {margin: 0 !important;}
            .quote-row.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child) {margin-left: 0 !important;}
        
            .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child) {margin-left: 0px !important; margin-top: 30px}
			.wp-block-button__link {font-size: 1em !important}

			.wp-block-media-text .wp-block-media-text__content {padding: 0 2% !important}
			.wp-block-group {padding: 10px} /*was 0, made 10 for features page*/

			.wp-block-query li {padding: 0}

			.wp-block-image {margin: 20px !important}

			.wp-block-column h2, .wp-block-column p, .wp-block-column form {padding: 0 20px !important}

			.final-row {display: block !important;}
            .final-row .wp-block-media-text.is-stacked-on-mobile {grid-template-columns: 1fr !important;}
			.final-row figure {display: none}
		    .final-row div:not(:first-child) {margin-left: 0 !important; margin-top: 10px}
			.final-row .wp-block-media-text .wp-block-media-text__content {padding-bottom: 10px !important}
        
            .content li {margin: 0 0 10px 10px}
        
            .feature-grid.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child) {margin: 10px 0 !important}
        
            .pricing-table > div {padding-bottom: 50px !important}
        
            .wp-block-gallery figure {padding: 0 !important; margin: 10px 2px !important;}
        
            .blog-archive {grid-template-columns: 1fr}
			.blog-archive h2 {font-size: 20px}
			.blog-archive .posted {font-size: 14px}
        
            .single h1 {font-size: 26px; padding: 0 20px}
			.single-wrapper {grid-template-columns: 1fr}
			.single-left {margin: 0 20px}
			.single-right {margin: 0 20px}
			.single-right:before {display: block; content:'Search and Discover other Plugin News'; font-weight: bold; margin-bottom: 20px}
        
            #sb_instagram {height: 200px !important}
        
            footer {padding: 20px}
            footer h3 {font-size: 18px; margin-top: 30px}
            footer .contact {font-size: 16px}
        


            
        }