/* Theme Name: Twenty Twenty One Child Theme description: This is my go A child theme of the Twenty Twenty One default WordPress theme Author: Francis Barbero Template: twentytwentyone Version: 3.0.0 */ /*this is missing from live and was only in min version of starfish_one - */ .has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; } .has-text-align-left { text-align: left; } /*---------------------------------------------------- */ /* this is at the top since its a very common class */ /* and so it can be overwritten easily by other classes */ .standardized_outer_flex_wrapper { display : flex; margin-top: 0px; margin-bottom: 0px; /*padding-left: 20px; padding-right: 20px;*/ margin-left: 20px; margin-right: 20px; } /* default widths */ .sofw_item_1 {flex: 1 3 50px; } .sofw_item_2 {flex: 1 1 1000px;} .sofw_item_3 {flex: 1 3 50px; } .quote { font-size: var(--font-size-medium); line-height: var(--line-height_medium_plus_plus) !important; padding: 60px; margin-top: 90px; background-color: #F9F9F9; background-image: url("/wp-content/themes/twentytwentyone-child/assets/about/images/quotes-png-13.png"); background-repeat: no-repeat; background-position: center; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } /* eventually this will be done by the browser, so a temp workaround - but needed right now (feb 2021) */ /* it makes the images responsive if you put in the height and width in the image */ /* https://developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping */ /* https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ */ img { width: 100%; height: auto; aspect-ratio: attr(width) / attr(height); /*max-width: 1200px;*/ } /* --------------------------------------------------------------------------------------------------- */ /* fonts */ @font-face { font-family: 'GE-Inspira'; src: url('/wp-content/themes/twentytwentyone-child/assets/fonts/GEInspiraRegular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GE-Inspira Bold'; src: url('/wp-content/themes/twentytwentyone-child/assets/fonts/GEInspira-Bold.woff') format('woff'); font-weight: normal; font-style: normal; } :root { --font-headings: 'Playfair Display'; --font-base : 'GE-Inspira' ; --font-base-bold : 'GE-Inspira Bold'; --global--font-size-base: var(--font-size-normal); /* to override the parent css */ --global--font-align: left; } /* --------------------------------------------------------------------------------------------------- */ /* forms */ :root { --form--border-color: var(--global--color-secondary); --form--border-width: 2px; --form--spacing-unit: 5px; } input[type=checkbox], input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], select, textarea { border: solid 1px grey !important; border-radius: 5px !important; color: var(--form--color-text) !important; line-height: 1.3 !important; margin: 0 0px !important; padding: 10 10px !important; max-width: 100%; background-color: #F5F5F5 !important; } /* Formidable Forms */ .frm_primary_label{ font-family: var(--font-base) !important; font-weight: 600 !important; } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #000000 !important; opacity: 1; /* Firefox */ font-size: var(--font-size-small) !important; } input, textarea { font-family: var(--font-base); } /* ---------------------------------------------------------------grid-column-start: ------------------------------------ */ /* Alignments */ :root { --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal)); --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal)); --responsive--alignfull-width: 100%; --responsive--alignright-margin: var(--global--spacing-horizontal); --responsive--alignleft-margin: var(--global--spacing-horizontal); } @media only screen and (min-width: 482px) { :root { --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 810px); /* this one affects prod service CPT*/ --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal)); --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); } } @media only screen and (min-width: 822px) { :root { --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 810px); --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px); } } /* ------------------------------------------------------------------------------------------------- */ /* Font Size */ :root { /* We do it this way because we want responsive text that grows and shrinks and there will be different heading styles that require different sizes, so that why we don't associate sizes directly to headings. I also changes the naming convention from the underlying main template to be easier to read and see that they are my own. We are also using calc - to make it responsive. formula : font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));; */ /* for small print like labels */ --font-size-extra_small: calc(10px + (12 - 10) * ((100vw - 500px) / (1900 - 500))); /* for generally small p and button text*/ --font-size-small: calc(12px + (15 - 12) * ((100vw - 500px) / (1900 - 500))); --font-size-small_plus: calc(13px + (17 - 13) * ((100vw - 500px) / (1900 - 500))); /*normal means for p and general reading */ --font-size-normal: calc(12px + (18 - 12) * ((100vw - 400px) / (1900 - 400))); /*slighly larger than normal for smallersub heading headings */ --font-size-normal_plus: calc(14px + (20 - 14) * ((100vw - 400px) / (1900 - 400))); /*medium slightly larger than normal p and general reading */ --font-size-medium: calc(15px + (22 - 15) * ((100vw - 400px) / (1900 - 400))); /*medium slightly larger than normal p and general reading */ --font-size-medium_plus: calc(18px + (33 - 18) * ((100vw - 400px) / (1900 - 400))); --font-size-medium_plus_plus: calc(24px + (38 - 24) * ((100vw - 500px) / (1900 - 500))); /* for not-so-large h1 or default h2 titles */ --font-size-large: calc(24px + (45 - 24) * ((100vw - 400px) / (1900 - 400))); /* for default large main page (h1) titles */ --font-size-extra_large: calc(30px + (55 - 30) * ((100vw - 400px) / (1900 - 400))); /* for extra large (h1) titles - web_expertise*/ --font-size-extra_extra_large: calc(35px + (75 - 35) * ((100vw - 500px) / (1900 - 500))); } /* ------------------------------------------------------------------------------------------------- */ /* Line height */ /* needs to be converted to responsive line heeights */ /* these should work with the font sizes */ :root { --line-height_extra_small: calc(3px + var(--font-size-extra_small)); --line-height_small: calc(4px + var(--font-size-small)); --line-height_small_plus: calc(6px + var(--font-size-small_plus)); --line-height_normal: calc(0.8vw + var(--font-size-normal)); --line-height_normal_plus: calc(0.9vw + var(--font-size-normal_plus)); --line-height_medium: calc(28px + (33 - 28) * (100vw - 600px) / (1200 - 600)); --line-height_medium_plus: calc(28px + (35 - 28) * (100vw - 400px) / (1200 - 400)); --line-height_medium_plus_plus: calc(30px + (42 - 30) * (100vw - 400px) / (1200 - 400)); --line-height_large: calc(34px + (46 - 34) * (100vw - 600px) / (1200 - 600)); --line-height_extra_large: calc(40px + (50 - 40) * (100vw - 600px) / (1200 - 600)); --line-height_extra_extra_large: calc(46px + (57 - 46) * (100vw - 600px) / (1200 - 600)); } /* -----------------------------global colors ---------------------- */ :root { --global--color-white: #FFFFFF; --global--color-black: #000000; --global--color-orange: #F05A28; --global--color-red: #B61014; /*--global--color-blue: #4A5C89;*/ --global--color-beige: #F7F4EF; --global--color-green: #32B34A; --global--color-light-grey: #F5F5F5; --global--color-dark-grey: #14191D; --global--color-dirty-pastel-blue: #DCEFF5; --global--color-bright-pastel-blue: #7FABEF; } .extra-small-line-height { line-height: var(--line-height_extra_small); } .small-line-height { line-height: var(--line-height_small); } .normal-line-height { line-height: var(--line-height_normal) !important; } .large-line-height { line-height: var(--line-height_extra_large); } /* all text is now black or white .orange { color: var(--global--color-orange); } .blue { color: var(--global--color-blue); } */ .white { color: var(--global--color-white); } .grey { color: var(--global--color-light-grey); } /* used for vertical lines */ .green_background {background-color: var(--global--color-green); } .red_background {background-color: var(--global--color-red); } .orange_background {background-color: var(--global--color-orange); } .blue_background {background-color: var(--global--color-blue); } /*used for segment background */ .bright_pastel_blue_background {background-color: var(--global--color-bright-pastel-blue);} .dirty_pastel_blue_background {background-color: var(--global--color-dirty-pastel-blue);} .light_beige_background {background-color: #FCFAF7;} .beige_background {background-color: var(--global--color-beige);} .grey_background {background-color: var(--global--color-light-grey);} .dark_grey_background {background-color: var(--global--color-dark-grey);} .white_background {background-color: white;} /*------------------------------------------------------------------------*/ /*----------- FONT SIZES ---------------------------------*/ /* We allow you to put any size or font to any text so that you can use the correct semantics for SEO without messing up styling and vice versa. */ .extraextralarge { font-size:var(--font-size-extra_extra_large) !important; } .extralarge { font-size: var(--font-size-extra_large); } .large { font-size: var(--font-size-large); } .medium-plus-plus { font-size: var(--font-size-medium_plus_plus); line-height: var(--line-height_medium_plus_plus); } .medium-plus { font-size: var(--font-size-medium_plus); line-height: var(--line-height_medium_plus); } .medium { font-size: var(--font-size-medium); line-height: var(--line-height_medium); } .normal-plus { font-size: var(--font-size-normal_plus); line-height: var(--line-height_normal_plus); } .normal { font-size: var(--font-size-normal); line-height: var(--line-height_normal); } .small { font-size: var(--font-size-small); } .extra_small { font-size: var(--font-size-extra_small); } .serif { font-family: var(--font-headings); } /* playfair */ .sans-serif { font-family: var(--font-base); } /* ge font */ .sans-serif-bold { font-family: var(--font-base-bold);} .serif-bold { font-weight: 600;} /* these are the standard fallback for undefined font without classes */ h1, h2{ font-family: var(--font-headings); font-weight: 600; } /* -----------------------------------------------------------------------------------*/ /* for web_expertise articles */ .web_expertise h1 { font-size: var(--font-size-extra_extra_large); line-height: var(--line-height-extra_extra_large); } .web_expertise h2 { font-size: var(--font-size-medium_plus); line-height: var(--line-height_medium_plus); font-family: var(--font-base); /*color: red;*/ padding-top: var(--line-height_medium_plus); padding-bottom: calc(2px + 1vw); } .web_expertise h3 { font-size: var(--font-size-medium); padding-top: var(--line-height_medium); color: #252D3A; } .web_expertise h4 { font-size: var(--font-size-normal_plus); color: #252D3A; } .web_expertise h5 { font-size: var(--font-size-normal); color: #252D3A; } .web_expertise a { text-decoration:underline !important; } .web_expertise ul { padding-bottom: calc(2px + 2vw); } /* -----------------------------------------------------------------------------------*/ p { font-family: var(--font-base); } h3, h4, h5, h6 { font-family: var(--font-base-bold); } b, strong { font-family: var(--font-base-bold); } .h1_heading_top_spacer { padding-top: calc(10px + 1.8vw); } .h2_heading_top_spacer { padding-top: calc(7px + 1.8vw); } .h2_heading_bottom_spacer { padding-bottom: calc(7px + 1.8vw); } .h2_heading_bottom_half_spacer { padding-bottom: calc(2px + 1vw); } .h2_medium_plus h2{ font-size: var(--font-size-medium_plus); } /* not used anymore .h2_heading_bottom_spacer_remover { padding-bottom: 0px; }*/ .h3_heading_top_spacer { padding-top: calc(6px + 1.8vw); } .h3_heading_bottom_spacer { padding-bottom: calc(4px + 1.8vw); } .h4_heading_bottom_spacer { padding-top: calc(2px + 1.8vw); } h1 { font-size: var(--font-size-extra_large); line-height: var(--line-height_extra_large); padding-bottom: calc(1vw); } /*the default changed to make it easier for Gutenburg products and services to work without changing things around*/ h2 { font-size: var(--font-size-large); line-height: var(--line-height_large); /*padding-bottom: calc(1vw); */ padding-top: calc(1vw); } h3 { /*margin-top: 13px;*/ font-size: var(--font-size-normal_plus); line-height: var(--line-height_normal_plus); } h4 { margin-top: 12px; font-size: var(--font-size-normal); line-height: var(--line-height_normal); } h5 { font-size: var(--font-size-small); line-height: var(--line-height_small); } h6 { font-size: var(--font-size-extra_small); line-height: var(--line-height_extra_small); } /* *********************************************************** */ /*paragraph spacing and spacing*/ p { font-size: var(--font-size-normal); line-height: var(--line-height_normal); text-align: var(--global--font-align); margin-bottom: 15px; } p.justify{ text-align: justify; } /* classes to selectively help with spacing between paragraphs */ /* Note NOT not put in the P tag */ .p_all p{ /*background-color: green;*/ margin-bottom: 1.5vw; } p.bottom_small{ margin-bottom: 10px; } /* get those hard to reach single paragraphs */ /*.p_first_of_type p:first-of-type { background-color: blue; margin-bottom: 1.5vw; }*/ .features_paragraphs p { line-height: var(--line-height_small_plus); } .features_paragraphs p:last-of-type { margin-bottom: 0px; } .features_paragraphs p:not(:last-of-type) { margin-bottom: 1.5vw; } /* gives larger spacing between paragraphs but doesn't cause big gap after last paragraph, which ruins vertical alignment (in some cases) p_not_last_of_type */ .p_not_last_of_type p:not(:last-of-type) { /*background-color: yellow;*/ margin-bottom: 2.5vw; } /*used on about us and careers for larger paragraph gaps */ .p_not_last_of_type_medium p:not(:last-of-type) { /*background-color: yellow;*/ margin-bottom: 1.2vw; } .p_not_last_of_type_small p:not(:last-of-type) { /*background-color: yellow;*/ margin-bottom: 0px; } /*makes the last p align with the vertical runner*/ .p_last_of_type p:last-of-type { margin-bottom: 0px; } .section_big_gap{ margin-top: 7vh !important; } .section_intro { /*margin-top: 7vw;*/ margin-top: calc(45px + (70 - 45) * ((100vw - 400px) / (1900 - 400))); /*margin-top: 50px;*/ /*margin-bottom: 10px;*/ } .section_demi_spacer { margin-top: 1.5vw; /*margin-bottom: 10px;*/ } .demi_demi_spacer { margin-top: 0.75vw; /*margin-bottom: 10px;*/ } .section_spacer { /* margin-top: 3.5vw;*/ margin-top: 30px; /*margin-bottom: 10px;*/ } .padding_30 { padding: 30px; } .padding_50 { padding: 50px; } .padding_bottom_10 { padding-bottom: 10px; } .margin_top_10 { margin-top: 10px; } .section_padding_bottom { padding-bottom: 3.5vw; } /*------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------ Component Styling ------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ a:link { text-decoration: none; } .orangeticks ul{ list-style:none; padding-left: 0px; } .orangeticks li:before { content:''; display:inline-block; height:10px; width:10px; background-image:url(/wp-content/themes/twentytwentyone-child/assets/images/orange_tick.svg) ; background-size:contain; background-repeat:no-repeat; padding-left: 2em; } .orangeticks li { font-size: var(--font-size-normal); } .wdp_p2_inner_item_1 .orangeticks { padding-left: 25px; } table th, .wp-block-table th { font-family: var(--font-base-bold); } table { margin-bottom: 20px; } /*------------------------------------------------------------------------*/ /* -------- A HREF --------------------------------------*/ /*-------------------------------------------------------------- */ a.underline { text-decoration:underline; } a.green_underline { text-decoration:underline; text-decoration-color: var(--global--color-green); } /*------------------------------------------------------------------------*/ /* -------- B U T T O N S --------------------------------------*/ /*------------------------------------------------------------------------*/ /* used for a random button right now */ .silly_flex_centering_wrapper { display: flex; justify-content: center; align-items: center; } /* Buttons */ :root { --button--color-text: black; --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: white; --button--color-background-active: var(--global--color-background); --button--font-family: var(--font-base-bold); --button--font-size: var(--global--font-size-base); --button--font-weight: 500; --button--line-height: 1.5; --button--border-width: 3px; --button--border-radius: 0; --button--padding-vertical: 15px; --button--padding-horizontal: calc(2 * var(--button--padding-vertical)); } textarea{ width: 100%; } input[type=submit]:not(:hover):not(:active):not(.has-background), button:not(:hover):not(:active):not(.has-background){ background-color: white; color: black; } input[type=submit]:hover,input[type=submit]:active, button:active,button:hover{ background-color: white; border-color: var(--global--color-red); } input[type=submit]:not(:hover):not(:active):not(.has-background), button{ border: 3px solid; border-color: var(--global--color-green); background-color: white; } .small_button{ border: 2px solid; border-color: var(--global--color-green); background-color: white; font-size: 10px; padding: 7px 10px; } .medium_button{ border: 2px solid; border-color: var(--global--color-green); background-color: white; font-size: 14px; padding: 9px 15px; } /* variable_button - same as normal */ .variable_button{ border: 3px solid; border-color: var(--global--color-green); background-color: white; font-size: 15px; padding: 15px 32px; } /* variable_button - same as medium */ @media only screen and (max-width: 1200px) { .variable_button{ border: 2px solid; border-color: var(--global--color-green); background-color: white; font-size: 14px; padding: 9px 15px; } } @media only screen and (max-width: 700px) { .variable_button{ border: 2px solid; border-color: var(--global--color-green); background-color: white; font-size: 10px; padding: 7px 10px; } } /*---------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*-------------- COMMON LAYOUTS -----------------*/ /*------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------*/ /*----------------------- Intro with Table of content = ITOC -----------*/ /*----------------------------------------------------------------------------------*/ .itoc_flex_wrapper { display : flex; flex-direction: row; margin-top: 70px; } .itoc_item_1 {flex: 1 1 20px;} .itoc_item_2 {flex: 1 1 600px;} .itoc_item_3 {flex: 1 1 20px;} /*--------- ITOC inner ----------------*/ .itoc_inner_container { display: flex; flex-direction: row; justify-content: center; } .itoc_inner_item_1 { flex: 1 1 600px; margin-right: 20px} .itoc_inner_item_2 { flex: 1 2 100px;} .itoc_inner_item_3 { flex: 1 1 400px;} .itoc_inner_item_1 h2 { margin-bottom: 20px; } .itoc_inner_item_1 li { font-size: var(--font-size-normal); } .itoc_inner_item_3 { background-color: var(--global--color-beige); font-size: var(--font-size-small); padding: 20px; } .itoc_inner_item_3 ol{ padding-left: 20px; } @media only screen and (max-width: 900px) { .itoc_inner_item_3 { font-size: var(--font-size-small); padding: 0px 5px 0px 5px; } } @media only screen and (max-width: 600px) { .itoc_flex_wrapper { margin-top: 20px; margin-bottom: 40px; } } /*-------------------------------------------------------------------------------------------*/ /* Flex wrapper standardization This is used to keep the general width of the page the same */ /*------------------------ Standardized Outer Flex Box (sofw) -------------------*/ /*-------------------------------------------------------------------------------------------*/ .wide_width_outer_wrapper { display : flex; margin-top: 0px; margin-bottom: 0px; } /* default widths */ .wwow_item_1 {flex: 1 2 50px;} .wwow_item_2 {flex: 1 1 1800px;} .wwow_item_3 {flex: 1 2 50px;} /*-------------------- Small width outer wrapper ---------------------------*/ /* the white borders shrink and grow at a faster rate than the middle content column */ .small_width_outer_wrapper { display : flex; /*margin-top: 10px; */ margin-bottom: 0px; } /* default widths */ .swow_item_1 {flex: 2 4 300px;} .swow_item_2 {flex: 1 1 600px;} .swow_item_3 {flex: 2 4 300px;} /*--------------------------------------*/ /* classes to overide defaults widths of flex items*/ /* flex_box_item (fbi) */ /* the div selector is to help the specificity order and override defaults - without it - it doesnt override */ div .fbi_0 {flex: 1 1 0px;} /* to zero out a flexbox item eg. the green line piping columns */ div .fbi_10 {flex: 1 1 10px;} div .fbi_20 {flex: 1 1 20px;} div .fbi_50 {flex: 1 1 50px;} div .fbi_100 {flex: 1 1 100px;} div .fbi_150 {flex: 1 1 150px } div .fbi_200 {flex: 1 1 200px } div .fbi_300 {flex: 1 1 300px;} div .fbi_400 {flex: 1 1 400px;} div .fbi_500 {flex: 1 1 500px;} div .fbi_600 {flex: 1 1 600px;} div .fbi_700 {flex: 1 1 700px;} div .fbi_800 {flex: 1 1 800px;} div .fbi_900 {flex: 1 1 900px;} div .fbi_1000 {flex: 1 1 1000px;} /*-------------------------------------------------------*/ /*this is used in the home page and prices page to show prices of services */ .five_column_in_a_row_flex_wrapper { margin-top: 10px; display: flex; } .fciarfw_item_1{ flex: 1 1 200px; background-color: var(--global--color-bright-pastel-blue); min-width: 120px; } .fciarfw_item_2{flex: 0 1 10px;} .fciarfw_item_3{ flex: 1 1 200px; } .fciarfw_item_4{ flex: 0 1 10px; } .fciarfw_item_5{ flex: 1 1 200px; } .fciarfw_item_6{ flex: 0 1 10px; } .fciarfw_item_7{ flex: 1 1 200px; } .fciarfw_item_8{ flex: 0 1 10px; } .fciarfw_item_9{ flex: 1 1 200px; } .fciarfw_item_3,.fciarfw_item_5,.fciarfw_item_7,.fciarfw_item_9 { background-color: var(--global--color-light-grey); } .fciarfw_item_1{ display: flex; justify-content: left; align-items: center; padding: 10px 25px 10px 25px; } .fciarfw_item_3,.fciarfw_item_5, .fciarfw_item_7,.fciarfw_item_9 { display: flex; justify-content: center; align-items: center; padding: 10px 25px 10px 25px; } @media only screen and (max-width: 1200px) { .fciarfw_item_9 { display: none; } } @media only screen and (max-width: 800px) { .fciarfw_item_6, .fciarfw_item_7, .fciarfw_item_8 { display: none; } .fciarfw_item_1,.fciarfw_item_3,.fciarfw_item_5{ padding: 10px 15px 10px 15px; } } /*--------------------------------------------------------------------------------------------------*/ /*--------------------- Three Column Configurable Inner Flexbox (tccif) -----------*/ /*--------------------------------------------------------------------------------------------------*/ /*not to be confused with three boxes in a row*/ /* used for larger boxes */ .three_column_configurable_inner_flexbox { display: flex; } @media only screen and (max-width: 800px) { .three_column_configurable_inner_flexbox { flex-wrap: wrap; } .tccif_item_1{ margin-left: 20px; margin-right: 20px } .tccif_item_2{ display: none; } .tccif_item_3{ margin: 20px; } } .tccif_item_1 {flex: 1 1 500px; } /* content */ .tccif_item_2 { flex: 1 3 100px; } /*gap */ .tccif_item_3 { flex: 1 1 500px; } /* content */ /*--------------------------------------------------------------------------------------------------*/ /*--------------------- Seven Column Configurable Inner Flexbox (sccif) -----------*/ /*--------------------------------------------------------------------------------------------------*/ .seven_column_configurable_inner_flexbox, .seven_column_configurable_inner_flexbox_reverse { margin-top: 0px; display: flex; justify-content: center; align-items: center; min-height: 200px; } .sccif_item_1 {flex: 0 1 10px; align-self: stretch; margin-top: 5px;} /* left piping */ .sccif_item_2 { flex: 1 1 50px; } /* gap */ .sccif_item_3 { flex: 1 1 400px; } /* content */ .sccif_item_4 { flex: 1 1 100px; } /*gap */ .sccif_item_5 { flex: 1 1 400px; } /* content */ .sccif_item_6 { flex: 1 1 50px; } /* gap */ .sccif_item_7 { flex: 0 1 10px; align-self: stretch;} /*right piping */ /*this padding reverses from top to bottom - to left to right */ .sccif_padding_20_magic { padding: 20px 0px; } /*--------------------------------------*/ @media only screen and (max-width: 600px) { .seven_column_configurable_inner_flexbox { flex-direction: column; } /*used in home page and packages page */ .seven_column_configurable_inner_flexbox_reverse { flex-direction: column-reverse; } .seven_column_configurable_inner_flexbox ul, .seven_column_configurable_inner_flexbox_reverse ul { column-count: 2; } .sccif_item_1 {flex: 0 1 00px; align-self: stretch; margin-top: 5px;} /* left piping */ .sccif_item_2 { flex: 1 1 0px; } /* gap */ .sccif_item_3 { flex: 1 1 100px; } /* content */ .sccif_item_4 { flex: 1 1 10px; } /*gap */ .sccif_item_5 { flex: 1 1 100px; } /* content */ .sccif_item_6 { flex: 1 1 0px; } /* gap */ .sccif_item_7 { flex: 0 1 0px; align-self: stretch;} /*right piping */ /* this hace */ .seven_column_configurable_inner_flexbox .has-text-align-right, .seven_column_configurable_inner_flexbox_reverse .has-text-align-right { text-align: left; } /* .sccif_padding_left { text-align: left; }*/ .sccif_padding_20_magic { padding: 0px 20px; } /* used for side buffering on small screens */ .sccif_padding_20 { padding: 0px 20px; } .sccif_padding_50 { padding: 0px 50px; } } /*------- seven_column_configurable_inner_flexbox media query -----*/ /*@media only screen and (max-width: 800px) { .dmseo_p3_flex_wrapper { margin: 50px 0px 0px 5px; } .dmseo_p3_item_1{ flex: 0 0 20px;} .dmseo_p3_item_4{ flex: 1 1 350px;. align-self: center; } .dmseo_p3_item_5 {flex: 1 1 20px;} .dmseo_p3_flex_wrapper h3{ margin-right: 0px; } }*/ /*--------------------------------------------------------------------------------------*/ /*---------------------- Why Starfish With Line Art (wswla) ------------*/ /*--------------------------------------------------------------------------------------*/ /* This section is used in 4 pages */ .why_starfish_with_line_art_flex_wrapper { display : flex; margin-bottom: 0px; margin-top : 20px; } .wswla_item_1 {flex: 1 1 50px;} .wswla_item_2 {flex: 1 1 1000px;} .wswla_item_3 {flex: 1 1 50px;} /* ------------------------------------------------- */ .wswla_item_2 { width: 100%; /*background-color: var(--global--color-beige); */ background-repeat:no-repeat; background-size: contain; background-position: top right; margin: 1vw; } .wswla_grid_container { /*background-color: green;*/ background-color: var(--global--color-beige); padding: 1vw 2vw 0vw 1vw; display: grid; grid-template-columns: 3fr 1fr; /*grid-row-gap: 1vw;*/ grid-column-gap: 1vw; } /* this splits the 4 divs into 2 columns which then creates 2 rows */ .wswla_grid_container_outer { /*background-color: green;*/ display: grid; grid-template-columns: 1fr 1fr 1fr; } .wswla_grid_container_item2 { justify-content: center; align-self: center; vertical-align: middle; /*background-color: red;*/ /*padding:10px 10px 20px 10px;*/ margin:10px 10px 20px 10px; } .wswla_grid_container_inner { margin:1vw; padding: 20px 10px; display: grid; /*OLD WITH CIRCLE grid-template-columns: calc(17px + (44 - 17) * ((100vw - 500px) / (1900 - 500))) 10fr;*/ grid-template-columns: 1 fr; justify-content: flex-start; align-items: flex-start; align-content: flex-start; } .wswla_grid_item_1 { /*background-color: red;*/ /* margin-top: calc(2px + (5 - 2) * ((100vw - 500px) / (1900 - 500)));*/ margin-right: 1vw; margin-top: : 0px; align-self: flex-start; justify-content: flex-start; align-content: flex-start; } .wswla_grid_item_1 img{ width: auto; height: auto; } .wswla_item_2 { padding :2vw; } .wswla_item_2 h3{ margin-top: 0px; } @media only screen and (max-width: 1000px) { .wswla_grid_container { padding: 2vw 0px 2vw 0px; display: grid; grid-template-columns: 1fr ; grid-row-gap: 1vw; grid-column-gap: 4.5vw; } .wswla_grid_container_item2{ display: none; } .wswla_grid_container_inner { margin: 0vw; padding: 0px 10px 0px 10px; } } @media only screen and (max-width: 700px) { .wswla_grid_container_outer { grid-template-columns: 1fr ; } } @media only screen and (max-width: 600px) { .why_starfish_with_line_art_flex_wrapper { margin-top : 20px; } } /*--------------------------------------------------------------------------------------*/ /*---------------------- Three Boxes In A Row (TBIAR) ------------*/ /*--------------------------------------------------------------------------------------*/ /* This section is used in 2 pages for price info*/ /*.two_boxes_in_a_row_grid_wrapper { display: grid; grid-template-columns: 10fr 30fr 8fr 30fr 10fr; }*/ /* this is only used on the home page */ /* so maybe placed there - since its quite specific?*/ /*.three_boxes_in_a_row_grid_wrapper { display: grid; background-color: red; grid-template-columns: 5fr 40fr 8fr 40fr 8fr 40fr 5fr; }*/ /*.two_boxes_in_a_row_grid_wrapper { display: grid; grid-template-columns: 10fr 30fr 8fr 30fr 10fr; }*/ /* Based on this to make the content square https://css-tricks.com/a-grid-of-logos-in-squares/ */ /*.single_box::before { content: ""; padding-bottom: 100%; display: block; } .single_box_little_padding { padding: 10px 25px 10px 25px; min-width: 100px; } .single_box_little_padding > div{ margin: auto; } .single_box_more_padding { padding: 10px 7% 0px 7%; } */ /*helper class ??*/ /*.three-quarter-width { width: 75% ; }*/ /*.single_box { display: grid; } .single_box::before, .single_box > div { grid-area: 1 / 1 / 2 / 2; } */ /*Used to spread things out evenly horizontally*/ /*.single_box_inner_grid{ height: 100%; display: grid; grid-template-rows: auto; align-content: space-evenly; align-items: start; justify-content : space-evenly; } */ .currency_prices_grid_container { display: grid; grid-template-columns: minmax(50px,120px) minmax(50px, 120px) ; grid-auto-rows: min-content; grid-row-gap: 0px; grid-column-gap: 5px; text-align: center; justify-content: center; align-content: left; align-self: center; /*background-color: red;*/ line-height: var(--line-height_small_plus); font-size: var(--font-size-small); } /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*--------------- NAVIGATION ------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /* this nav bar uses custom media queries and GRID css. */ .site-header { padding-top: 0px; padding-bottom: 2.5vw; /*padding-left: 20px; padding-right:20px;*/ margin-top: 0px; row-gap: 0px; } .logo_grid{ min-width: 20px; } .wrapper_grid_nav { display: grid; grid-gap: 60px; background-color: #fff; max-width: 1800px; grid-template-columns: 1fr 9.5fr; } .navigation_grid{ padding-top: 15px; display: grid; grid-gap: 0px; grid-template-columns: 12fr 12fr; } .nav-grid-component-main{ grid-column-end: span 2; } .nav-grid-component-upper-left .nav-grid-component-upper-right, .nav-grid-component-main { display: grid; grid-template-columns: 1fr; } .nav-flex-container-upper-right, .nav-flex-container-upper-left, .nav-flex-container-main { display: flex; flex-wrap: wrap; } .nav-flex-container-upper-right { justify-content: flex-start; } .nav-flex-container-upper-right > div { padding-right: calc(10px + 1.8vw); } .nav-flex-container-upper-right > div:last-of-type { padding-right: 0px; } .nav-flex-container-upper-left { justify-content: flex-end; flex-grow: 3; flex-shrink: 6; } .nav-flex-container-upper-left > div { padding-left: calc(10px + .8vw); } .nav-flex-container-upper-right , .nav-flex-container-upper-left { font-size: calc(7px + .5vw); letter-spacing: 1.5px; } .wrapper_grid_nav { grid-gap: 10px; } .nav-flex-container-main { /*background-color: red;*/ padding: 20px 0; font-size: calc(8px + .5vw); font-size: calc(10px + (18 - 10) * ((100vw - 500px) / (1800 - 500))); font-family: var(--font-base-bold); justify-content: space-between; flex-grow: 3; letter-spacing: 2px; } /*------------------------------------------------------------------------*/ /*--------------- MEDIA QUERIES FOR NAV AND HERO IMAGE ----------------*/ /*------------------------------------------------------------------------*/ /*changes the "padding" by controlling the width of the nav */ /*used for nav and heading */ #more{ display: none; } @media only screen and (min-width: 1600px) { .site-header { max-width: 1800px; padding-right: 20px; } .wrapper_grid_nav { grid-gap: 60px; } } @media only screen and (max-width: 1600px) { .site-header { padding-right: 20px; max-width: 100%; } .wrapper_grid_nav { grid-gap: 20px; } } @media only screen and (max-width: 1200px) { .site-header { padding-right: 15px; padding-left: 15px; max-width: 100%; } .nav-flex-container-main { letter-spacing: 0px; } .nav-flex-container-upper-right, .nav-flex-container-upper-left { font-size: calc(8px + .7vw); letter-spacing: 1px; } #careers{ display: none; } .navigation_grid{ padding-top: 5px; } .nav-flex-container-main { padding: 10px 0; } } @media only screen and (max-width: 900px) { #more{ display: block; } #enquire, #our-clients, #wordpress-development { display: none; } } @media only screen and (max-width: 800px) { .wrapper_grid_nav { grid-gap: 10px; } .nav-flex-container-main { letter-spacing: 0px; } #graphic-design, #products-and-services{ display: none; } } /*@media only screen and (max-width: 600px) { .site-header, .wp-block-image { max-width: 100%; } .nav-flex-container-upper-right, .nav-flex-container-upper-left { font-size: calc(8px + .6vw); letter-spacing: 1px; } .nav-flex-container-upper-right > div { padding-right: calc(3px + 1.8vw); } .nav-flex-container-upper-right > div:last-of-type { padding-right: 0px; } .nav-flex-container-upper-left { justify-content: flex-end; flex-grow: 3; flex-shrink: 6; } .nav-flex-container-upper-left > div { padding-left: calc(3px + .5vw); } .site-header { padding-top: 2px; padding-bottom: 2.5vw; padding-left: 2px; padding-right:2px; margin-top: 0px; row-gap: 0px; } }*/ /*-----------------------------------------------*/ /* ALL NEW DIFFERENT MOBILE NAV */ #mobile_nav { display: none; } @media only screen and (max-width: 600px) { .navigation_grid{ } #mobile_nav { text-align: center; display: grid; grid-gap: 10px; background-color: #fff; grid-template-columns: 1fr; width: 100%; } .custom-logo{ max-width: 50px; } .nav-grid-component-upper-right { grid-column-end: span 2; } .nav-flex-container-upper-right{ justify-content: space-between; } #desktop_navigation_grid{ display: none; } } /*-----------------------------------------------*/ /*https://www.w3schools.com/css/css_dropdowns.asp*/ /* The container
- needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; right: 0px; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-right { right: 0px; } .dropdown-left { left: 0px; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn { background-color: var(--global--color-dark-grey); color: white; } /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /* START OF HOME PAGE CSS */ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*----------- HOME PAGE PART 1 (p1) --------------------------------*/ /*------------------------------------------------------------------------*/ .home-p1-inner-flex-wrapper-left { display: flex; align-items: center; justify-content: flex-end; } .home-p1-inner-flex-wrapper-left button{ float: right; } /*------------------------------------------------------------------------*/ /*----------- HOME PAGE PART 1-5 p1 --------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------- HOME PAGE PART 2 (p2) -------------------*/ /*------------------------------------------------------------------------*/ /*not sure if this should be put with fonts or here with layouts. seems like a layount this*/ .home-p2-item_2-intro p { text-align: left; } /*----------------------------------------------------- */ /*----------------------------------------------------- */ /*main layout*/ .home-p2-flex_wrapper { margin: 20px 0px 0px 0px; display: flex; } /*the left and right white gaps */ .home_p2_item_1, .home_p2_item_5 {flex: 1 3 300px;} /*the left content block which is bigger than the right*/ .home_p2_item_3 {flex: 1 1 250px;} /*the middle gap */ .home_p2_item_2 {flex: 1 1 200px;} /*the right content block*/ .home_p2_item_4 {flex: 1 1 200px;} /* main inner layout and styling*/ /* ----- we use grid for the four boxes --- so its 2 grids inside flex -----*/ .home_p2_grid_wrapper{ display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr); font-size: 150%; color: #fff; border-radius: 0px; align-items: center; } .home_p2_icon_box { display: flex; justify-content: center; color: #444; align-items:center; } .home_p2_icon_box img { max-width: 5vw; max-height: 5vw; display: block; margin-left: auto; margin-right: auto; } .home_p2_grid_wrapper figcaption, .home_p2_services_middle { font-family : var(--font-base-bold); } .home_p2_services_middle { display: flex; align-items: center; justify-content: center; } .home_p2_services_middle img{ max-width: calc(200px + (300 - 200) * ((100vw - 500px) / (1900 - 500))); max-height: : calc(200px + (300 - 200) * ((100vw - 500px) / (1900 - 500))); min-width: 200px; /*min-height: 200px;*/ display: block; margin-top: -70px; margin-bottom: -70px; margin-left: auto; margin-right: auto } .home_p2_services_middle figcaption{ padding-top: 30px; } .home_p2_services_left_top { border-right: 2px solid var(--global--color-orange); border-bottom: 2px solid var(--global--color-orange); } .home_p2_services_right_top { border-left: 2px solid var(--global--color-orange); border-bottom: 2px solid var(--global--color-orange); } .home_p2_services_left_bottom { border-right: 2px solid var(--global--color-orange); padding-top: 20px; } .home_p2_services_right_bottom { border-left: 2px solid var(--global--color-orange); padding-top: 20px; } /*------------------------------------------------------------------------*/ /*------- HOME PAGE PART 2 MEDIA QUERY -------------------*/ /*------------------------------------------------------------------------*/ /*@media only screen and (max-width: 800px) { .home-p2-item_1-intro, .home-p2-item_3-intro { flex: 2 1 0px; align-self: stretch; background-color: red; } }*/ @media only screen and (max-width: 1500px) { .home_p2_item_1, .home_p2_item_5 {flex: 1 3 100px; /*background-color: red;*/ } } #home-p2-flex_gap{ margin: 0px; } @media only screen and (max-width: 840px) { .home_p2_icon_box img { max-width: 10vw; max-height: 10vw; display: block; margin-left: auto; margin-right: auto; } #home-p2-flex_gap{ display: none; } .home-p2-flex_wrapper { margin: 0px 20px ; display: flex; flex-direction: column; } #Planning, #Content { border-right: 1px solid red; } #Logos, #SEO { border-right: 2px solid white; border-left: 2px solid var(--global--color-orange); } #Maintenance, #Hosting { border-left: 0px solid white; border-right: 1px solid var(--global--color-orange); } #Planning, #SEO { border-bottom: 2px solid var(--global--color-orange); } #Maintenance, #Development { padding-top: 20px; } .home_p2_services_middle { display: none; } .home_p2_item_1, .home_p2_item_5 {flex: 1 3 0px;} } /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------- HOME PAGE PART 3 (p3) -------------------*/ /*------------------------------------------------------------------------*/ /* standardized_outer_flex_wrapper */ /*----------------------------------------------------- */ /*----------------------------------------------------- */ /*------------------------------------------------------------------------*/ /*------- HOME PAGE PART 3 INNER / MIDDLE BIT -------------------*/ /*------------------------------------------------------------------------*/ /*.home-p3-middle-container { padding-top: 20px; display: flex; justify-content: left; align-items: center; } /* main content blocks */ /* .home-p3-middle-item_block { flex: 2 2 450px; display: block; margin : 20px auto 20px auto; padding-right: 15px; text-align: left; align-self: stretch; } .home-p3-middle-item_block img { max-width: 100%; display: block; margin-left: auto; margin-right: auto } */ /*------------------------------------------------------------------------*/ /*------- HOME PAGE PART 3 MEDIA QUERY --------------*/ /*------------------------------------------------------------------------*/ /*@media only screen and (max-width: 1000px) { .home-p3-middle-container { flex-direction: column; } .home-p3-middle-item_2, .home-p3-middle-item_4 { flex: 2 2 200px; display: block; margin : 0px auto; padding-right: 15px; text-align: center; align-self: stretch; } .home-p3-middle-item_3{ flex: 1 1 40px; } /* the outer gaps (of the inner content) which are beige */ /* .home-p3-middle-item_1, .home-p3-middle-item_5 {flex: 1 1 0px;align-self: stretch; } /*middle space */ /* .home-p3-middle-item_3 { flex: 1 1 20px; } .home-p3-middle-container img{ max-width: 30vw; margin: 10px auto 10px 10px auto; display: block; float: left; } .home-p3-middle-container figcaption { display: block; float: right; text-align: left; margin : 30px auto 0px 15px; max-width: 50vw; } /* CAN WE REVIEW TO SEE IF THIS LOCAL DECLARATION IS NEEDED */ /* .home-p3-middle-container h3 { font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1600 - 300))); display: left; margin: 0px; padding: 0px; } } */ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*----------- HOME PAGE PART 4 (p4) -----------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*----------- HOME PAGE PART 5 -----------------------------------*/ /*------------------------------------------------------------------------*/ .home-p5-flex-wrapper { display: flex; margin-top: 130px; justify-content: center; align-items: center; padding-left: 5px; padding-right: 5px; } /* outer white gap*/ .home-p5-item_1, .home-p5-item_3 { flex: 2 2 100px; align-self: stretch; } .home-p5-item_2 { flex: 1 1 1200px; text-align: center; align-self: stretch; } /* inner bits */ .home-p5-middle-container { display: flex; justify-content: center; } .home_p5_middle_item_1 { flex: 1 1 400px; text-align: left; /*moves button to the left */ } .home_p5_middle_item_2 { flex: 1 2 100px;} .home_p5_middle_item_3 { flex: 1 1 400px;} /*------------------------------------------------------------------------*/ /*------- HOME PAGE PART 5 MEDIA QUERY -------------------*/ /*------------------------------------------------------------------------*/ @media only screen and (max-width: 800px) { .home-p5-flex-wrapper { margin-top: 30px; padding-left: 20px; padding-right: 20px } /* middle bit */ .home-p5-item_2 { flex: 1 1 auto; text-align: center; align-self: stretch; } .home_p5_middle_container { flex-direction: column-reverse; } .home_p5_middle_item_2{ flex: 1 1 0px; } .home_p5_middle_item_3 img{ display: block; margin-left: auto; margin-right: auto } .home_p5_item_1 { flex: 1 1 auto;} .home_p5_item_2 { flex: 1 2 auto;} .home_p5_item_3 { flex: 1 1 auto;} } /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*----------- HOME PAGE PART 6 (p6) -----------------------------------*/ /*------------------------------------------------------------------------*/ /* .home_p6_middle_container { display: flex; flex-direction: column; justify-content: center; align-items: center; } .home_p6_middle_container h2{ flex: 1 1 auto; text-align: left; }*/ /*.home_p6_inner_container{ flex: 1 1 auto; background-color: var(--global--color-beige); padding: 30px; text-align: left; margin: 10px auto 0px auto; display: flex; flex-direction: row; justify-content: center; align-items: center; }*/ /* .home_p6_inner_text{ flex: 1 1 200px; } .home_p6_inner_text p{ background-color: var(--global--color-beige); } .home_p6_inner_space{ flex: 0 1 10px; }*/ /*------------------------------------------------------------------------*/ /*------- HOME PAGE PART 6 MEDIA QUERY -------------------*/ /*------------------------------------------------------------------------*/ @media only screen and (max-width: 800px) { .home-p6-flex_wrapper { margin : 30px 0x; padding-left: 20px; padding-right: 20px; display: flex; justify-content: center; align-items: center; } .home_p6_item_2 { flex: 1 1 0px; text-align: center; align-self: stretch; } .home_p6_inner_text{ flex: 1 1 auto; } .home_p6_inner_container{ flex: 0 1 0px; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0px 20px 20px 20px; margin: 0px 20px 20px 20px; } .home_p6_item_1, .home_p6_item_3{ flex: 1 3 0px; /*no height */ } .homw_p6_inner_image{ max-width: none; flex: 1 1 auto; padding-left: 0px; padding-right: 0px; margin-right: 0px; margin-left: 0px; } .home_p6_inner_image img { max-width: 90vw; } } /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /*----------- HOME PAGE PART 7 FLEX -----------------------------------*/ /*------------------------------------------------------------------------*/ .home-p7-flex-wrapper { margin-top: 3vw; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: #BE1E2D; } .home_p7_item_1 {flex: 1 3 50px;} .home_p7_item_2 {flex: 0 1 500px;} .home_p7_item_3 {flex: 0 1 150px;} .home_p7_item_4 {flex: 1 1 300px;} .home_p7_item_5 {flex: 1 3 50px;} .home-p7-flex-wrapper p { color: white; background-color: #BE1E2D; } .we_got_this{ color: white; font-size: calc(20px + (80 - 20) * ((100vw - 300px) / (1600 - 300))); font-family: var(--font-headings); margin-bottom: 0.5vw; } .home_p7_item_2 img { max-width: 40vw; } .home_p7_item_4 button { background-color: var(--global--color-green); font: var(--font-base-bold); color: white; letter-spacing: 1px; font-size: 18px; font-weight: 600; border: none; padding: 15px 32px; } /*------------------------------------------------------------------------*/ /*------- HOME PAGE PART 7 MEDIA QUERY -------------------*/ /*------------------------------------------------------------------------*/ @media only screen and (max-width: 1000px) { .home-p7-flex-wrapper { margin-top: 4px; margin-left: 0px; padding-left: 0px; } .home_p7_item_1 {flex: 1 3 0px;} .home_p7_item_2 {flex: 1 1 auto;} .home_p7_item_3 {flex: 1 1 0px;} .home_p7_item_4 {flex: 1 1 300px;} .home_p7_item_5 {flex: 1 3 0px;} .we_got_this{ margin-bottom: 0px; padding-bottom: 0px; } .home_p7_item_2 img { } .home-p7-flex-wrapper p { margin-top: 0px; padding-top: 2px; margin-bottom: 0px; padding-bottom: 0px; line-height: 1.2; } } /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /* START OF ABOUT PAGE CSS */ /* HEADER */ .about_p0_intro { max-width: 70vw; text-align: center; margin: 0 auto; } .about_p0_flex_wrapper { display : flex; flex-direction: row; align-items: center; justify-content: center; } .about_p0_item_1 {flex: 1 1 250px;} .about_p0_item_2 {flex: 1 1 1000px;} .about_p0_item_3 {flex: 1 1 250px;} /*---------------------------------------------------------------------------------------*/ /*------------------------ ABOUT 1 -----------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*uses small_width_outer_wrapper*/ /*---------------------------------------------------------------------------------------*/ /*---------------------- INNER ABOUT 1 -----------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ .about_p1_grid_container{ background-color: white; display: grid; grid-template-columns: 1fr 1fr; grid-row-gap: 2vw; grid-column-gap: 2vw; } .about_p1_point1{ display: flex; background-color: var(--global--color-beige); padding: 1vw; } .about_p1_point1_left { flex: 1 1 auto; padding-right: 1.5vw; padding-top: 1.5vw; } .about_p1_point1_right { flex: 1 1 auto; padding-right: 0.75vw; } .about_p1_point1 div{ 1 1 auto;} /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ ABOUT 2 -----------------------------------------*/ /*---------------------------------------------------------------------------------------*/ .about_p2_flex_wrapper { display : flex; flex-direction: row; } .about_p2_item_1 {flex: 1 1 100px;} .about_p2_item_2 { flex: 1 1 1000px; text-align: center; margin: auto; } .about_p2_item_3 {flex: 1 1 100px;} .about_part_2_flex_wrapper_middle_bit { display : flex; flex-direction: row; } /* todo make responsive */ /* mb stands for middle bit */ .about_p2_item_mb_1 {flex: 1 1 30px;} .about_p2_item_mb_2 {flex: 1 1 500px;} .about_p2_item_mb_3 {flex: 1 1 30px;} .about_p2_item_mb_4 {flex: 1 1 500px;} .about_p2_item_mb_5 {flex: 1 1 30px;} .about_p2_item_mb_6 {flex: 1 1 500px;} .about_p2_item_mb_7 {flex: 1 1 30px;} .about_p2_flex_wrapper{ display: flex; } .about_p2_item_1 {flex: 1 1 500px; } /* content */ .about_p2_item_2 { flex: 1 3 100px; } /*gap */ .about_p2_item_3 { flex: 1 1 500px; } /* content */ /*---------------------------------------------------------------------------------------*/ /*---------------------- INNER ABOUT 2 -----------------------*/ /*---------------------------------------------------------------------------------------*/ .about_p2_item_2 { align-self: center; display: flex; justify-content: center; } .about_p2_item_2 img { width: 50vw; height: auto; } /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ ABOUT 3 -----------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------- INNER ABOUT 3 -----------------------*/ /*---------------------------------------------------------------------------------------*/ .about_bullets { padding-left: 10px; } .about_bullets li{ list-style-type: none; font-size: var(--font-size-normal); line-height: var(--line-height_normal_plus); font-weight: 600; } .two_column_container { display : flex; flex-wrap: wrap; align-self: center; justify-content: center; } .two_column_item li { flex : 40%; list-style-type: none; font-size: var(--font-size-normal); font-weight: 600; } /* puts a padding on the right hand column only */ .two_column_item li:nth-child(even) { padding-left: 0px; } .two_column_item li:nth-child(odd) { padding-right: 0px; } /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ ABOUT 4 -----------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ ABOUT 5 -----------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /* this needs tp be changed to a image slider or something simpler */ .flex_wrapper_about_part_5 { display : flex; flex-direction: row; margin-top: 0px; margin-bottom: 0px; } .about_p5_item_1 {flex: 1 1 300px;} .about_p5_item_2 {flex: 1 1 700px;} .about_p5_item_3 {flex: 1 1 300px;} .about_p5_inner_container{ display : flex; flex-direction: row; } .about_p5_inner_left{ flex : 50%; } .about_p5_inner_right{ flex : 50%; color: white; background-color: black; padding: 30px; } /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*--------- WEB DESIGN PACKAGES = wdp ----------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ WEB DESIGN PACKAGES Part 2 ------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------- WDP PART 2 INNER -----------------------*/ /*---------------------------------------------------------------------------------------*/ .wdp_p2_inner_container { display: flex; flex-direction: row; justify-content: center; background-color: var(--global--color-beige); padding: 20px; } .wdp_p2_item_2 h2 { margin-bottom: 0px; } .wdp_p2_inner_item_1 {flex: 1 1 300px;} .wdp_p2_inner_item_2 {flex: 1 1 50px;} .wdp_p2_inner_item_3 {flex: 1 1 300px;} /*.wdp_p2_inner_item_1 li { list-style-image: url(http://twentytwentytwo/wp-content/themes/twentytwentyone-child/assets/images/orange_tick.svg); } */ /* expermental negative margin */ .wdp_p2_inner_item_3 img{ margin-left: 50px; margin-top:50px; margin-right: -50px; margin-bottom:-50px; } /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ WEB DESIGN PACKAGES Part 3 ------------------------*/ /*---------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------*/ /*---------------------- WDP PART 3 INNER ----------------------*/ /*-----------------------------------------------------------------------------*/ .wdp_p3_inner_container { display: flex; flex-direction: row; justify-content: center; background-color: var(--global--color-pastel-blue); padding: 30px; } .wdp_p3_inner_item_1 {flex: 1 1 300px;} .wdp_p3_inner_item_2 {flex: 1 1 50px;} .wdp_p3_inner_item_3 {flex: 1 1 300px;} .wdp_p3_inner_item_3 img, .wdp_p3_inner_item_1 img { margin-top: 50px; margin-bottom: -50px; } /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ WEB DESIGN PACKAGES Part 4 + 5----------------------*/ /*---------------------------------------------------------------------------------------*/ /* part 4 and 5 share CSS - we namge it p4 until we come up with a better naming convention */ /*---------------------------------------------------INTRO */ .wdp_p4_outer_container{ margin-top: 40px; } .wdp_p4_intro{ margin: auto; text-align: center; width: 70%; padding: 20px 0px 20px 0px; } .wdp_p4_intro p{ text-align: justify; } .wdp_p4_flex_container{ display: flex; } .wdp_p4_item_1 {flex: 1 2 100px;} .wdp_p4_item_2 {flex: 1 1 200px;} .wdp_p4_item_3 {flex: 1 1 30px;} .wdp_p4_item_4 {flex: 1 2 600px;} .wdp_p4_item_5 {flex: 1 1 20px;} .wdp_p4_item_6 {flex: 1 1 200px;} .wdp_p4_item_7 {flex: 1 2 100px;} .wdp_p4_feature_left{ border-top: 1px solid var(--global--color-black); text-align: right; } .wdp_p4_feature_left h4, .wdp_p4_feature_right h4 { font-size: var(--font-size-small); } .wdp_p4_feature_left p{ text-align: right; font-size: var(--font-size-small); } .wdp_p4_feature_right{ border-top: 1px solid var(--global--color-black); text-align: left; } .wdp_p4_feature_right p{ text-align: left; font-size: var(--font-size-small); } .wdp_p4_item_4_table_wrapper { padding-top: 1vw; } .wdp_p4_image_for_mobile{ display: none; } @media only screen and (max-width: 900px) { .wdp_p4_intro{ width: 80%; } .wdp_p4_item_4 { display: none; } .wdp_p4_image_for_mobile{ margin: auto; width: 80%; display: block; } } /*--------------------------------------------------------*/ /* price table (pt) variations */ .pt_variation1 { width: 100%; } @media only screen and (max-width: 600px) { .pt_variation1 { width: 100%; } } /*.pt_variation2 { margin-left: auto; margin-right: auto; font-size: var(--font-size-small); }*/ /*.pt_variation3{ width: 80%; font-size: var(--font-size-small); }*/ .pt_variation4{ } /*.pt_variation3 td, .pt_variation3 th { font-size: var(--font-size-normal_plus); }*/ .price_table { border-radius: 5px; padding-top: 10px; /* padding-right: 0px; padding-left: 0px;*/ text-align: center; font-size: var(--font-size-small); background-color: white; border-collapse:collapse; border: none; } /*.wdp_p4_item_4 tr:first-child { background-color: var(--global--color-bright-pastel-blue); }*/ .price_table td, .price_table th { padding:0px 0px; border:none; } /* .price_table td:not(:first-child), .price_table th:not(:first-child) { text-align: center; border-left: 4px solid white; } */ .price_table td:not(:first-child), .price_table th:not(:first-child) { border-left: 4px solid white; } .price_table td:first-child, .price_table th:first-child { /*text-align: right;*/ font-weight: 600; } .price_table th { background-color: var(--global--color-bright-pastel-blue); color: white; } .price_table tr { /* background-color: var(--global--color-light-grey);*/ /* background-color: var(--global--color-dark-grey);*/ } /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ .wdp_p55_flex_container { display: flex; } .wdp_p55_item_1 {flex: 1 2 20px;} .wdp_p55_item_2 {flex: 1 1 800px;} .wdp_p55_item_3 {flex: 1 3 20px;} .wdp_p55_inner_flex_container{ margin-top: 2vw; display: flex; } .wdp_p55_inner_item_1 { flex: 1 1 400px; padding-left: 2.5vw; display: flex; flex-direction: column; /*background-color: pink;*/ align-content: center; justify-content: center; } .wdp_p55_inner_item_1 h3 { align-self: flex-start; /*background-color: red;*/ } .wdp_p55_inner_item_1 .orangeticks{ /* background-color: blue;*/ } .wdp_p55_inner_item_2 {flex: 1 1 300px;} .wdp_p55_inner_item_2_img { flex: 1 1 300px; margin-left: 8vw; margin-top: 6vw; margin-right: -8vw; margin-bottom:-6vw; min-width: 50px; width: auto; height: auto; /*box-shadow: 4px 4px 8px 4px #ddd;*/ } .wdp_p55_inner_price_container { display: flex; } .wdp_p55_inner_price_item_1 { padding-top: 20px; padding-right: 35px; padding-left: 20px !important; flex: 1 1 600px; /*background-color: blue;*/ } .wdp_p55_inner_price_item_2 { flex: 1 1 300px; } @media only screen and (max-width: 1200px) { .wdp_p55_inner_price_item_1 { padding-top: 60px; flex: 1 1 900px; } .wdp_p55_inner_price_item_2 { display: none; } } @media only screen and (max-width: 1000px) { .wdp_p55_inner_item_2_img { margin-left: -5vw; margin-top: 5vw; margin-right: 5vw; margin-bottom:-5vw; min-width: 30px; } .wdp_p55_inner_item_1 { flex: 1 1 300px; padding-left: 15px; padding-right: 35px; } .wdp_p55_inner_item_2 {flex: 1 1 200px;} } /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ WEB DESIGN PACKAGES Part 6 + 7 ---------------------*/ /*---------------------------------------------------------------------------------------*/ /* .wdp_p6_flex_wrapper { display : flex; flex-direction: row; } .wdp_p6_item_1 {flex: 1 1 50px;} .wdp_p6_item_2 {flex: 1 1 500px;} .wdp_p6_item_3 {flex: 1 1 50px;} */ /*-----------------------------------------------------------------------------*/ /*---------------------- WDP PART 6 + 7 INNER ----------------------*/ /*-----------------------------------------------------------------------------*/ .grid_list_of_features { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 2.5vw; grid-column-gap: 4vw; } @media only screen and (max-width: 500px) { .grid_list_of_features { grid-template-columns: 1fr 1fr; } } /*.wdp_p6_inner_container h3{ font-size: var(--font-size-normal); font-family: var(--font-base-bold); } */ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ WEB DESIGN PACKAGES Part 8 ------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ WEB DESIGN PACKAGES Part 8 ------------------------*/ /*---------------------------------------------------------------------------------------*/ /*.wdp_p8_flex_wrapper { display : flex; flex-direction: row; } .wdp_p8_item_1 {flex: 1 1 50px;} .wdp_p8_item_2 {flex: 1 1 1000px;} .wdp_p8_item_3 {flex: 1 1 50px;} */ /*-----------------------------------------------------------------------------*/ /*---------------------- WDP PART 8 INNER ----------------------*/ /*-----------------------------------------------------------------------------*/ /* Custom inner because it needs too much customization */ .wdp_p8_inner_container { display: flex; flex-direction: row; justify-content: center; background-color: var(--global--color-paste-blue); padding: 30px; } .wdp_p8_inner_item_1 {flex: 1 1 20px;} .wdp_p8_inner_item_2 {flex: 1 1 500px;} .wdp_p8_inner_item_3 {flex: 1 1 30px;} .wdp_p8_inner_item_4 {flex: 1 1 500px;} .wdp_p8_inner_item_5 {flex: 1 1 20px;} .wdp_p8_inner_item_2 { background-color: var(--global--color-beige); padding: 20px; } .wdp_p8_inner_item_4 { background-color: var(--global--color-beige); padding: 20px; } .wdp_p8_grid_container ul{ display: grid; grid-template-columns: 1fr 1fr; grid-row-gap: 0.5vw; grid-column-gap: 2.5vw; padding: 20px; } .wdp_p8_grid_container li { font-size: var(--font-size-extra_small); } .wdp_p8_inner_container table { font-size: var(--font-size-small); background-color: white; } /*media queries*/ @media only screen and (max-width: 800px) { .wdp_p8_inner_container { flex-direction: column; } } /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------- /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*--------- DIGITAL MARKETING AND SEO = dmseo ---------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------*/ /*------------------------ DMSEO HERO ---------------------------*/ /*---------------------------------------------------------------------------------------*/ /*.dmseo_p0_flex_wrapper_hero_intro { display : flex; margin-bottom: 0px; } .dmseo_p0_hero_intro_item_1 {flex: 1 1 100px;} .dmseo_p0_hero_intro_item_2 {flex: 1 1 800px;} .dmseo_p0_hero_intro_item_3 {flex: 1 1 100px;} ------------------------------------------------- .dmseo_p0_flex_wrapper_hero { align-content: center; background: #eee; padding: 0; display: grid; width: 100vw; overflow: hidden; } .dmseo_p0_flex_wrapper_hero figure { overflow: auto; }*/ /*.dmseo_p0_flex_wrapper_hero img { scroll-snap-align: center; }*/ /* layout */ /* .dmseo_p0_flex_wrapper_hero figure { align-content: center; border: 1em solid white; background: white; display: grid; grid: auto / repeat(7, auto); grid-gap: 1em; }*/ /* ------------------------------------------------- */ /*---------------------------------------------------------------------------------------*/ /*------------------------ DMSEO PART 1 ---------------------------*/ /*---------------------------------------------------------------------------------------*/ /* uses ITOC general segment /*---------------------------------------------------------------------------------------*/ /*------------------------ DMSEO PART 2 ---------------------------*/ /*---------------------------------------------------------------------------------------*/ /* uses why_starfish_with_line_art_flex_wrapper */ /*------------------------------------------------------------------------*/ /*----------- DMSEO Part 3 + Web Maintenance (dmseo-p3) -------------------------------*/ /*------------------------------------------------------------------------*/ /* uses standardized equal widthed inner columns */ /* used twice to diplay icons arranged in the shape of a "+" */ /*------------------------------------------------------------------------*/ /*----------- DMSEO Part 4 (dmseo-p4) -------------------------------*/ /*------------------------------------------------------------------------*/ .dmseo_p4_inner { display : flex; margin-bottom: 40px; } .dmseo_p4_inner_item_1 {flex: 1 1 50px;} .dmseo_p4_inner_item_2 {flex: 1 1 400px;} .dmseo_p4_inner_item_3 {flex: 1 1 50px;} .dmseo_p4_inner_item_4 {flex: 1 1 400px;} .dmseo_p4_inner_item_5 {flex: 1 1 50px;} .dmseo_p6_item_4 p { font-size: var(--font-size-small); } .rounded_box { background-color: var(--global--color-light-grey); border-radius: 10px; box-shadow: 4px 4px 8px 4px #ddd; display: flex; margin: 0 auto; align-items: center; justify-content: center; } .rounded_box div{ align-self: center; } .rounded_box ul, .rounded_box ul { padding-left: 0px; font-size: var(--font-size-normal); } /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*.pricing_segment{ background-color: var(--global--color-beige); padding: 3vw; }*/ @media only screen and (max-width: 900px) { .pricing_segment .sccif_item_1, .pricing_segment .sccif_item_7{ display: none; } .pricing_segment .sccif_item_2, .pricing_segment .sccif_item_6 { display: none; } .pricing_segment .sccif_item_4{ background-color: red; flex: 1 1 0px; } } /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------*/ .product_and_services_flex_wrapper_menu { display : flex; flex-wrap: wrap; flex-flow: column wrap; height: 450px; padding-left: 30px; padding-right: 30px; align-content: space-between; } .product_and_services_flex_wrapper_menu ul{ padding-left: 0px; } .product_and_services_flex_wrapper_menu li{ list-style:none; font-size: var(--font-size-small); } .product_and_services_flex_wrapper_menu h3{ font-size: var(--font-size-normal); margin-top: 25px; margin-bottom: 0px; padding-bottom: 0px; } @media only screen and (max-width: 1000px) { .product_and_services_flex_wrapper_menu { height: 550px; } } @media only screen and (max-width: 720px) { .product_and_services_flex_wrapper_menu { height: 650px; } } @media only screen and (max-width: 400px) { .product_and_services_flex_wrapper_menu { height: 750px; padding-left: 0px; padding-right: 0px; } } .product_and_services_flex_wrapper { display : grid; grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) ); column-gap: 3%; } .product_and_services_flex_wrapper h3 { margin-top: 25px; } .product_and_services_flex_wrapper p { margin-bottom: 0px; } .product_and_services_flex_wrapper a:link { text-decoration: underline; } /* --------------------------------------------------------------- */ /* --------------------------------------------------------------- */ /* --------------------------------------------------------------- */ /* Divides icons from address*/ .contact_us_grid_container { display: grid; grid-template-columns: 25fr 3fr 12fr; grid-column-gap: 1vw; } @media only screen and (max-width: 720px) { .contact_us_grid_container { display: grid; grid-template-columns: 20fr 1fr 20fr; margin-right: 10px !important; margin-left: 10px !important; } .contact_us_grid_container_icons_outer { display: grid; grid-template-columns: 1fr !important; } .contact_us_grid_container_icons_inner { margin-bottom: 5px !important; } } .contact_us_grid_container input[type=text] { width: 100%; } .contact_us_grid_container label, .contact_us_grid_container input { display: block; } .contact_us_grid_container label { font-family: var(--font-base-bold); font-size: var(--font-size-normal_plus); margin-bottom: 0.75vw; } .contact_us_grid_container h3:not(:first-of-type) { /*background-color: yellow;*/ margin-top: 2vw; } /* Splits icons into 2 colums, 2 rows*/ .contact_us_grid_container_icons_outer { display: grid; grid-template-columns: 1.5fr 1fr; } /*Divides icon and text left and right*/ .contact_us_grid_container_icons_inner { display: grid; grid-template-columns: calc(30px + (50 - 30) * ((100vw - 500px) / (1900 - 500))) 6fr 50fr; justify-content: flex-start; align-items: flex-start; align-content: flex-start; margin-bottom: 30px; } .contact_us_grid_container_icons_inner div { margin-right: 1vw; margin-top: : 0px; } .contact_details{ display: grid; grid-template-columns: 1fr 2fr; width: 100%; } .contact_details div:nth-child(2) { text-align: right; } /* --------------------------------------------------------------- */ /* --------------------------------------------------------------- */ /* --------------------------------------------------------------- */ .footer_outer_flex_wrapper{ padding-top: 30px; display: flex; color: var(--global--color-white); } .footer_outer_flex_wrapper a { color: var(--global--color-white); } .fofw_item_0,.fofw_item_4 { flex: 1 2 200px; /*background-color: green;*/ } .fofw_item_1_upper, .fofw_item_1_lower { flex: 1 1 1000px; /*background-color: pink;*/ } .fofw_item_2 {flex: 1 2 50px; /*background-color: green;*/} .fofw_item_3 {flex: 1 1 400px; /*background-color: blue;*/} @media only screen and (max-width: 1000px) { .flcfw_item_3, .fofw_item_1_upper { display: none; } .fofw_item_2{ flex: 1 2 80px; } .fofw_item_1_lower { flex: 1 1 1200px; display: flex; justify-content: flex-end; } .fofw_item_3 {flex: 1 1 400px;} .footer_contact_us_button button{ padding-top: 10px; } } .footer_highlights_of_service { /*background-color: pink;*/ display : flex; flex-wrap: wrap; flex-flow: column wrap; height: 300px; width: 100%; padding-left: 30px; align-content: space-between; } .footer_highlights_of_service div { width: 40%; margin-right: 30px; } .footer_title { font-size: var(--font-size-small); font-family: var(--font-base-bold); margin-top: 25px; } .footer_outer_flex_wrapper a { font-size: var(--font-size-extra_small); color : #878787; } .footer_menu_of_links { display: flex; } .fmol_item_1 {flex: 1 1 300px; /*background-color: red;*/} .fmol_item_2 {flex: 1 2 200px; /*background-color: green;*/} .fmol_item_3 {flex: 1 1 300px; /*background-color: blue;*/} .footer_logo_copywrite_flex_wrapper { display: flex; margin-bottom: 30px; } .flcfw_item_1 {flex: 0 1 50px; /*background-color: pink;*/ padding-left: 20px; } .flcfw_item_2 { flex: 1 1 250px; /*background-color: orange;*/ padding-left: 20px; /*padding-top: 10px;*/ } .flcfw_item_3 {flex: 0 1 100px; /*background-color: yellow;*/} .list_of_social_media_icons { display: flex; flex: 0 1 auto; } .footer_menu_of_links ul{ padding-left: 0px; } .footer_menu_of_links li{ list-style:none; font-size: var(--font-size-extra_small); } .fmol_item_1 li { font-size: var(--font-size-extra_small); font-weight: 600; padding-bottom: 10px; } .footer_contact_us_button { padding-top: 50px; /*background-color: orange;*/ width: 100%; display: inline-flex; justify-content: left; } .footer_company_name{ font-size: var(--font-size-normal); font-weight: 600; } .footer_small_print{ font-size: var(--font-size-extra_small); } .footer_small_print a { text-decoration:underline; } .social_media_icon { width: 20px; height: 20px; margin: 10px; } .list_of_social_media_icons{ width: 100%; display: inline-flex; justify-content: flex-end; } #footer_button{ border: 3px solid; border-color: var(--global--color-green); background-color: var(--global--color-dark-grey); font-size: 15px; padding: 13px 82px; } #footer_button a{ color: white; font-size: var(--font-size-normal); } /* --------------------------------------------------------------- */ /* --------------------------------------------------------------- */ /* --------------------------------------------------------------- */ .get_a_quote_checkbox label { display: flex; align-items: center; font-family: var(--font-base-bold); font-size: var(--font-size-normal_plus); margin-bottom: 0vw; } .get_a_quote_checkbox label input[type=checkbox]{ margin-right: 20px; } /*TO DO - TRANSFER THEM TO "GET A QUOTE" CLASS */ .get_a_quote_input input[type=text], .get_a_quote_input input[type=email] { width: 95%; margin-right: 10px; } .get_a_quote_input label { font-family: var(--font-base-bold); } /* Contact Us email field extra styling */ #wpcf7-f69-o1 input[type=email] { width: 100%; } /*************************************************************************************** ANIMATION *******************************************************************************/ /* svg */ .svg-homepage{width: 115px;height: 115px;} .heart-pulse { position: relative; -webkit-animation: heart-pulse 1s infinite; /* Safari 4.0 - 8.0 */ animation: heart-pulse 1s infinite; } @keyframes heart-pulse { 0% { -webkit-transform: scale(1.00); -ms-transform: scale(1.00); transform: scale(1.00); -webkit-transform-origin:center; -ms-transform-origin:center; transform-origin:center; } 25% { -webkit-transform: scale(1.075); -ms-transform: scale(1.075); transform: scale(1.075); -webkit-transform-origin:center; -ms-transform-origin:center; transform-origin:center; } 50% { -webkit-transform: scale(1.085); -ms-transform: scale(1.085); transform: scale(1.085); -webkit-transform-origin:center; -ms-transform-origin:center; transform-origin:center; } 75% { -webkit-transform: scale(1.075); -ms-transform: scale(1.075); transform: scale(1.075); -webkit-transform-origin:center; -ms-transform-origin:center; transform-origin:center; } 100% { -webkit-transform: scale(1.00); -ms-transform: scale(1.00); transform: scale(1.00); -webkit-transform-origin:center; -ms-transform-origin:center; transform-origin:center; } } .svg-homepage-2{width: 140px;height: 140px;} .first, .second, .third, .fourth { position: relative; animation-timing-function: ease; } .first{ -webkit-animation: first-blink 2s infinite; /* Safari 4.0 - 8.0 */ animation: first-blink 2s infinite; } .second{ -webkit-animation: second-blink 2s infinite; /* Safari 4.0 - 8.0 */ animation: second-blink 2s infinite; } .third{ -webkit-animation: third-blink 3s infinite; /* Safari 4.0 - 8.0 */ animation: third-blink 3s infinite; } .fourth{ -webkit-animation: third-blink 2.5s infinite; /* Safari 4.0 - 8.0 */ animation: third-blink 2.5s infinite; } @keyframes first-blink { 0% { opacity: 1; } 25% { opacity: 0.5; } 50% { opacity: 0; } 75% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes second-blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes third-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes fourth-blink { 0% { opacity: 0; } 25% { opacity: 0.5; } 50% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 0; } } /* For new form */ .contact-form-container { max-width: 650px !important; margin: 0 auto !important; } .contact-form-container input, .contact-form-container textarea { width: 100% !important; } .contact-alternative { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #ddd; text-align: center; } .contact-alternative a { color: #000; font-weight: 600; text-decoration: none; } .contact-alternative a:hover { text-decoration: underline; } @media (max-width: 768px) { .contact-form-container { padding: 0 1rem; } }