/* Theme Name: arlaw Theme URI: https://www.arlaw.ca/ Description: Child theme to Enfold Author: Ultimediam Multimedia Inc Author URI: http://www.ultimediam.com Template: enfold Version: Version 4.4.1 */ /* OTHER FILES EDITED functions.php - to add the typekit.com link for klavia - script to change the archive page layout to the grid style goes inside if not using functions.php header.php - to remove max scale 1 for mobile NOTE!!!!!!!!!! UNBLOCK ROBOTS IN YOAST WHEN GOING LIVE!!!!!!!!! Huge SEO Issue: You're blocking access to robots. You must go to your Reading Settings and uncheck the box for Search Engine Visibility. */ /************************** FONTS ************************************************************************/ /* 'klavika-web' normal 300 for light 'klavika-web' italic 300 for light italic 'klavika-web' normal 600 for medium 'klavika-web' italic 600 for medium italic */ /************************** GENERAL ************************************************************************/ /* selection */ ::-moz-selection { background: black; /* Firefox */ } ::selection { background: black; } /************************** IMAGES ************************************************************************/ .avia_image { border-radius: 0px; } /************************** COLOURS ************************************************************************/ /* taupe - main corporate colour used for h1-h6 */ .colMain { color: #afa89c; } /* almost black - used as logo tagline line 1 - used for body, etc */ .colSecondary { color: #231f20; } /* alternate colour - deep blue */ .colAlt { color: #1b1a26; } /* black */ .colBlack { color: #000; } /* white */ .colWhite h1, .colWhite h2, .colWhite h3, .colWhite p { color: #fff; } /************************** SECONDARY MENU ************************************************************************/ /* backgrounds *****************************************/ /* non transparent header background */ #header_meta { background-color: #ff0066 !important; } /* transparent header background before scrolling */ #top .av_header_transparency #header_meta { background-color: rgba(0,0,0,1) !important; /* border-bottom: 0px solid rgba(255,255,255,0.5); */ /* background: transparent; */ /* background-color: rgba(0,0,0,1); /* background: #000 url("/images/branch.jpg") center center repeat scroll; */ } /* transparent header background after scrolling */ .html_header_transparency #header_meta { background-color: green !important; } /* container height *************************************/ #header_meta .container, #header_meta { min-height: 50px; height: 50px; border: 0px; } /* balances out the height for the main menu */ .html_header_top.html_header_topbar_active.html_header_sticky #top #main { padding-top: 50px !important; } /* social ***********************************************/ /* remove borders from social */ #top #wrap_all .social_bookmarks li { border: none !important; /* this also effects ' social margin-top: 10px; */ } /* color of social icons */ #top .social_bookmarks li a { color: #ff0066 !important; } /* social at right - can use left */ .av_icon_active_right .social_bookmarks { padding-left: 30px; padding-top: 10px; } /* phone tagline *****************************************/ /* phone tagline */ .header_color .phone-info { font-size: 11px; line-height: 11px; letter-spacing: 1px; text-transform: uppercase; color: #fff !important; text-shadow: 0px 0px 0px #000; margin: 15px 0 0 20px !important; } .header_color .phone-info a { color: #fff !important; } .header_color .phone-info a:hover { color: #ff0066 !important; text-decoration: none; } /* menu text container **********************************/ /* at right - can use left */ .av_secondary_right .sub_menu { padding-top: 10px; padding-right: 20px; } /* menu text ********************************************/ /* menu text above transparent before scrolling */ #top #wrap_all .av_header_transparency .sub_menu > ul > li > a { color: #fff !important; } /* menu text above transparent & non transparent after scrolling */ .header_color .sub_menu > ul > li > a, .header_color .sub_menu > div > ul > li > a { text-decoration: none; font-size: 11px; line-height: 11px; letter-spacing: 1px; text-transform: uppercase; color: green !important; text-shadow: 0px 0px 0px #000; margin: 50px 0 50px 0 !important; } .header_color .sub_menu > ul > li > a:hover, .header_color .sub_menu > div > ul > li > a:hover { color: #ff0066 !important; text-decoration: none; } /* unique button for my account - using border ******************/ #menu-item-28 { padding-right: 60px !important; } #menu-item-28 a { /* font-weight: bold; color: #fff !important; */ border: 1px solid #fff; background-color: #ff0066 !important; padding: 7px 15px 5px 15px; box-shadow: 5px 5px 10px rgba(0,0,0,0.4); } /* removes pipe between menu items */ #top .sub_menu > ul, #top .sub_menu > ul > li { border: none !important; } /* PULLDOWNS SECONDARY & MAIN *******************************************************************************/ /* adjusts position underneath on both transparent and non trans */ ul.sub-menu { /* margin-left:18% !important; margin-top:-50% !important; */ } /* pulldowns for both secondary and main transparent and non trans */ .header_color .sub-menu > li > a { text-decoration: none; color: #fff !important; font-size: 11px; font-weight: 500; line-height: 11px; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0px 0px 0px #000; background-color: #afa89c !important; border: 1px solid #fff !important; } /* pulldowns for secondary menu */ #top .sub_menu li ul { top: 30px !important; /* adjust location under secondary */ width: 170px; padding: 0px; box-shadow: 0 8px 15px rgba(0,0,0,0.3) !important; left: -50%; margin: 0; border: 1px solid #fff !important; } /* pulldowns for main menu */ .av-main-nav ul { /* margin-top: 30px !important; */ width: 170px; padding: 0px; box-shadow: 0 8px 15px rgba(0,0,0,0.3); left: -50%; margin: 0; border: 1px solid #fff !important; } /* tweak to make the main menu pulldown look correct */ .header_color .main_menu .menu ul li a { color: #fff !important; /* color: #fff !important; */ padding-left: 15px !important; /* border: 0px solid #fff !important; border-bottom: 0px solid #fff !important; */ } .header_color .main_menu ul:last-child > li > a { /* border-bottom: 1px solid #fff !important; */ } /* active for both secondary and main */ .header_color .sub-menu > li.current-menu-item > a, .header_color .sub-menu > li.current_page_item > a { background-color: #231f20 !important; color: #fff !important; } /************************** MAIN MENU ************************************************************************/ /* use custom height in theme and adjust - using 106 here */ /* backgrounds *****************************************/ /* non transparent & trans header - overrides transparent header bg */ #header_main { /* background: rgba(0,0,0,0.3); */ /* background-color: rgba(0,0,0,0.7); */ border-bottom-width: 0px !important; } /* header menu background and text when scrolling is active */ #header_main_alternate { /* border-top-width: 0px; background: #ff3300 !important; background-color: rgba(0,0,0,0.5) !important; */ } /* transparent header - before scrolling it picks up the non transparent bg */ header#header.av_header_transparency { /* background-color: red; */ /* background: transparent; */ background-color: rgba(0,0,0,0.7); } .header_color .header_bg { /* background: transparent; */ background: #231f20; /* background: #000 url("/images/branch.jpg") bottom center repeat scroll; */ border-bottom: 0px solid rgba(255,255,255,1); /* background-color: rgba(0,0,0,1); */ /* background: #888a8d url("/images/headerBackground.png") center left repeat scroll; */ } /* logo ***************************************************/ .header_color img { width: 300px; /*required for svg */ height: auto; margin: 0px 0px; padding: 27px 0px 0px 20px !important; } /* new header logo svg css in enfold */ .logo svg, .logo.avia-img-svg-logo > a > img, .logo .alternate.avia-img-svg-logo { width: 300px !important; height: auto !important; margin: 0px 0px !important; padding: 27px 0px 0px 20px !important; } /* maintenance mode logo */ .logoMaintenance img { width: 300px; /*required for svg */ height: auto; margin: 0px 0px; padding: 0px 0px 27px 0px !important; } /* position menu text **************************************/ /* NOTE header positioning chnages if you go from header - default header style to minimal in admin */ /* adjusts all of menu area down or up for before and after scrolling - use with custom height */ .main_menu { /* top: 0px; */ } /* option 1 - adjusts just the menu items within main menu area */ .av-main-nav-wrap { /* top: 30px; */ } /* option 2 - adjusts just the menu items within main menu area */ .av-main-nav-wrap ul { top: 53px; /* margin-top: -65px; */ } /* option 3 - adjusts just the menu items within main menu area */ .av-main-nav li { /* top: 30px; */ } /* option 4 - adjusts just the menu items within main menu area */ .avia-menu > ul > li > a { /* position: relative; top: -65px !important; */ } /* this is the border underneath on hover */ .header_color .avia-menu-fx { /* background-color: #9cc2df; color: #ffffff; border-color: #7aa0bd; these are the defaults */ display: none !important; } /* main menu text **************************************/ #top #wrap_all .av_header_transparency .sub_menu li ul { background-color: red !important; } /* before scrolling */ #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a, #top .av_header_transparency #header_main_alternate, .av_header_transparency #header_main .social_bookmarks li a { text-decoration: none; color: #fff !important; font-size: 14px; line-height: 14px; font-style: normal; font-weight: 600; /* this tweaks the position before scrolling line-height: 200px; */ letter-spacing: 4px; text-transform: uppercase; text-shadow: 0px 0px 0px #000; margin: 0px !important; /* margin: 50px 0 50px 0 !important; use this with secondary, don;t without */ } /* active page on transparent menu */ #top #wrap_all .av_header_transparency .main_menu ul > li.current-menu-item > a > .avia-menu-text { background: transparent !important; color: #afa89c !important; } /* this also applies to the mobile menu */ .header_color .main_menu ul > li > a { color: #afa89c !important; font-size: 14px; line-height: 14px; font-style: normal; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; } .header_color .main_menu ul > li > a:hover { color: #afa89c !important; text-decoration: none; } /* active page on transparent menu after scrolling and non transparent menu */ .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: #fff !important; } /* buttons **************************************/ /* main menu button - bordered */ .header_color .av-menu-button-bordered > a .avia-menu-text { border: 1px solid #fff !important; border-radius: 0px !important; /* background-color: #ff0066 !important; padding-left: 15px; padding-right: 15px; margin-right: 15px; background-color: rgba(0,0,0,0.2); */ } .header_color .av-menu-button-bordered > a:hover .avia-menu-text { background-color: #ccc !important; } /* main menu button - colored */ .header_color .av-menu-button-colored > a .avia-menu-text { border: 1px solid #fff !important; border-radius: 0px !important; background-color: #000 !important; } .header_color .av-menu-button-colored > a:hover .avia-menu-text { background-color: #8b9f23 !important; opacity: 1 !important; } /* hovers for both if not custom for each */ .header_color .av-menu-button > a:hover .avia-menu-text { /* background-color: #ff3300 !important; */ } /* unique styling for a button */ #menu-item-82 { padding-right: 27px !important; } /************************ BASICS *************************************************************/ /* this tweaks the colour under the socket */ html { background: #231f20 !important; } .main_color { background-color: #fff !important; color: #000; } p, ul, ol { font-family: "klavika-web", sans-serif; font-style: normal; font-weight: 300; font-size: 15px; line-height: 24px; letter-spacing: 1px; color: #000; } .alternate_color p, .alternate_color ul, .alternate_color ol { color: #fff; } a { text-decoration: none; } .main_color a { color: #afa89c; } .alternate_color a { color: #afa89c; } .main_color a:hover { color: #fff; text-decoration: none; } .alternate_color a:hover { color: #fff; text-decoration: none; } .main_color ul, .main_color ol { /* font-family: 'Abel', sans-serif; */ } .alternate_color li { border: 0px solid #ff3300; } /* ul dots */ ul.disc, .entry-content-wrapper ul { list-style-type:circle; } .main_color strong { color: #000; } .alignL { text-align: left; } .alignR { text-align: right; } .alignC { text-align: center; } h1, h2, h3, h4, h5, h6 { font-family: "klavika-web", sans-serif; font-style: normal; font-weight: 300; letter-spacing: 2px; color: #afa89c !important; text-transform: uppercase; } .alternate_color h1, .alternate_color h2, .alternate_color h3, .alternate_color h4, .alternate_color h5, .alternate_color h6 { color: #fff !important; } /* page titles */ .main_color h1, .alternate_color h1 { font-size: 20px; line-height: 24px; margin: 0 0 10px 0; } .alternate_color h1 { } .template-page .entry-content-wrapper h1 { letter-spacing: 2px !important; } /* page sub titles - see also .template-page .entry-content-wrapper h2 below */ .main_color h2, .alternate_color h2 { font-size: 18px; line-height: 22px; margin: 0px 0 5px 0; } .alternate_color h2 { font-weight: 300; margin: 0 0 10px 0; } .main_color h3 { font-size: 16px; line-height: 20px; margin: 10px 0 10px 0; } .main_color h4 { font-size: 14px; line-height: 18px; margin: 10px 0 10px 0; } /* masonry & portfolio titles, plus footer titles */ .main_color h5 { font-size: 12px; line-height: 16px; margin: 10px 0 10px 0; } /* masonry & portfolio excerpts */ .main_color h6 { font-size: 9px; line-height: 12px; margin: 10px 0 10px 0; } /* alternate section ****************************************/ .alternate_color { background: #1b1a26 !important; } .alternate_color .entry-content-wrapper ul { margin-top: 30px; list-style-type: none; font-size: 10px; line-height: 8px; margin-left: 50%; } .alternate_color .entry-content-wrapper ul:before { content: "\2014"; /* en dash here */ position: absolute; margin-left: -0.5em; margin-top: 0.3em; } /* use this to tweak the image set to position right in alt sections */ .avia-image-container.avia-align-right { margin-left: 0px; /* orinigally 15px */ } /* these need to be in a span inside the text editor - using H1 for titles & h2 for subs */ .pgTitles { padding-bottom: 20px; border-bottom: #888a8d 1px solid !important; } .pgTitlesAlt { color: #fff; padding-bottom: 20px; border-bottom: #fff 1px solid !important; } hr.pgTitlesSubs { /* margin: 0px 0 0px 0; height: 1px; width: 35px; border: 0px solid #939598 !important; */ } .pgTitlesSubs .hr-inner { border-top-width: 0px !important; } /* this sets the vertical spacing for both the title and sub - see also reg h2 above */ .template-page .entry-content-wrapper h2 { margin-top: 0px !important; margin-bottom: 0px !important; } .pgSubs { /* color: #ff3300; padding-top: 20px; border-top: #ff3300 1px solid !important; */ } .pgSubsAlt { color: #fff; /* padding-top: 20px; border-top: #ff3300 1px solid !important; */ } /* sidebar */ .main_color .sidebar { color: #333; } .main_color .sidebar a { color: #000; } #formDisc { text-align: center; } #formDisc .discTxt { font-size: 10px !important; line-height: 14px !important; font-weight: 300 !important; color: #666 !important; text-transform: uppercase; } /* special headings **********************************/ /* hide line after special headings */ .av-special-heading-h1 .special-heading-border, .av-special-heading-h2 .special-heading-border, .av-special-heading-h3 .special-heading-border { display:none; } .av-special-heading { margin-top: 50px; } /* special heading - default & modern */ .av-special-heading-tag { padding-bottom: 20px !important; border-bottom: #888a8d 1px solid !important; margin-bottom: 60px !important; } /* target a specific item to center default */ .av-special-heading-h2.avia-builder-el-4 { float: none!important; width: 50% !important; left: 28% !important; } /* use h3 and style the same as h2 to apply align right */ h3.av-special-heading-tag { float: right !important; } /* to tweak on all if using custom colours - add in h3 etc to be specific */ .custom-color-heading .av-special-heading-tag { color: #ff0066 !important; text-shadow: 2px 2px 8px #000; } .custom-color-heading .av-special-heading-tag strong { color: #000 !important; } /* special heading - modern centered */ .modern-quote .av-special-heading-tag { /* padding-bottom: 20px !important; border-bottom: #ff3300 1px solid !important; */ } /* sub heading */ .av-subheading_below p { font-weight: 300; letter-spacing: 2px; color: #888a8d; text-transform: uppercase; /* same as h3 titles */ font-size: 24px; line-height: 30px; margin: 0px; /* padding-top: 20px; border-top: #ff3300 1px solid !important; */ } .av-subheading.av_custom_color { opacity: 1.0; text-shadow: 2px 2px 8px #000; } .av-subheading.av_custom_color p { color: #ff3300; } /* images incl svg ***************************************************/ .arlawSeal img { width: 200px; height: auto; } /* buttons *********************************/ /* button over slider images */ #top .avia-slideshow-button { font-weight: 300; text-transform: uppercase; border-radius: 0px; background-color: #333; opacity: 1; color: #fff; border: 1px solid #fff !important; padding-left: 15px; padding-right: 15px; } /* buttons on pages - medium */ .avia-button.avia-size-medium { font-weight: 300; font-size: 14px; line-height: 24px; letter-spacing: 0px; text-transform: uppercase; border-radius: 0px; background-color: #354119; color: #fff ! important; border: 1px solid #fff !important; padding-left: 15px; padding-right: 15px; margin-top: 20px; } .avia-button.avia-size-medium a:hover { background-color: #ff3300 !important; } /************************ SLIDERS **********************************************/ /* slider captions and descriptions */ .slideshow_align_caption { /* top: 60%; vertical-align: inherit; */ } div .slideshow_caption h2 { font-weight: 300; font-size: 32px; line-height: 40px; letter-spacing: 2px; color: #fff; text-transform: uppercase; text-shadow: 5px 5px 10px #000; /* adjust over image margin-top: -15%; */ } /* caption titles on a specific page - set to bottom framed */ .page-id-491 div .slideshow_caption h2 { font-weight: 300; font-size: 32px; line-height: 40px; letter-spacing: 2px; color: #fff; text-transform: uppercase; text-shadow: 5px 5px 10px #000; /* adjust over image */ margin-top: -15%; } .avia-caption-content { /* margin-left: 70px; */ text-align: center; } .caption_framed .slideshow_caption .avia-caption-content p { background: rgba(0, 0, 0, 0.7); padding: 20px; margin: 0px; } .avia-caption-content p { /* same as h1 */ font-weight: 300; font-size: 20px; line-height: 24px; letter-spacing: 2px; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 8px #000; } /* bottom framed */ .caption_bottom .slideshow_caption .slideshow_inner_caption { padding: 0px; } .caption_bottom .slideshow_caption .slideshow_inner_caption { text-align: center; } .caption_framed .slideshow_caption .avia-caption-title { /* color: #ff3300; */ } /* custom title element */ .sliderQuote { font-style: italic; font-weight: 300; font-size: 20px; line-height: 24px; text-shadow: 2px 2px 4px #000; text-align: center; } /* icon dot bgs *****************************************/ .main_color .iconlist_content { color:#000; } .alternate_color .iconlist_content { color:#fff; } .main_color .avia-icon-list .iconlist_icon { background-color: #666; } .alternate_color .avia-icon-list .iconlist_icon { background-color: #333; } /************************ 3 up grid images & text with spacing ************************/ /* use this inside a color section to make 1/2 1/2 and other columns full width */ #top .fullwidth-section .container { max-width: 100%; padding: 0; } /* this is a tweak to get regular text blocks to have margins on other pages */ .txtBlock { margin: 0px !important; } /* for white text on dark blocks */ .txtBlockAlt { margin: 50px !important; } .txtBlockAlt p { color: #fff; } /* news page */ .txtBlockNews { margin: 50px 50px 0px 50px !important; } .txtBlockNews p { color: #fff; } /* fullwidth img with text beside 1/3 and 2/3 fixes bug this also is a trick used to make a scrolldown arrow on a fullwidth slider - Add a color-section after the slider no min-height no padding no border with scrolldown arrow */ .avia-section { min-height: 0px; } /* fix bug on padding in 1/3 */ .av-layout-grid-container .flex_cell { padding: 0px !important; } /* coloured bgs *****************************/ .onGrey { background-color: #333 !important; } .onGrey .avia_textblock { /* margin: 50px; use this if all text is in one block */ } .onGrey .avia_textblock h3 { color: #fff; margin: 50px 50px 20px 50px; /* use if using more than 1 block */ } .onGrey .avia_textblock h4 { color: #fff; margin: 0px 50px 20px 50px; /* use if using more than 1 block */ } .onGrey .avia_textblock p { color: #fff; margin: 0px 50px 50px 50px; /* use if using more than 1 block */ } /************************ 3 up grid images with spacing ************************/ #imgGrid { padding: 10px !important; border: 10px solid #ff3300 !important; background: #ff3300 !important; } #imgGrid .avia_image { padding: 10px !important; border: 20px solid #ff3300 !important; } /************************ SLIDER ANIMATED TEXT *********************************/ /*.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content, .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-content { visibility: visible; -webkit-animation: caption-bottom 1.5s 1 ease-out; animation: caption-bottom 1.5s 1 ease-out; } .avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title, .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-title { visibility: visible; -webkit-animation: caption-top 1.5s 1 ease-out; animation: caption-top 1.5s 1 ease-out; } */ /************************ HOTSPOTS ********************************************/ .av-hotspot-container .av-image-hotspot_inner { } /* hotspot tooltip hover */ .avia-tooltip .avia-arrow { display: none; } .avia-tooltip { background: rgba(45, 45, 45, 1) !important; border: solid 1px #fff !important; } /* custom class to style text */ .ttDescr { text-align: center !important; letter-spacing: 1px; word-spacing: 0px; font-weight: bold; font-size: 14px !important; color: #fff !important; } /* specific page */ .page-id-XX .avia-tooltip p { text-align: center !important; margin: 0 auto !important; line-height: 15px; } /************************ LIGHTBOX *****************************************/ /* hide title in lightbox */ .mfp-title { /* display: none; */ } /* hide counter in lightbox */ .mfp-counter { display: none; } /************************ MASONRY GALLERY **********************************/ .avia_desktop .av-hover-overlay-active .av-masonry-image-container { opacity: 1.0; /* originally 0.7 */ } .main_color .av-masonry { background-color: #ff3300; } .av-masonry-entry .av-inner-masonry-content { background: rgba(0,0,0,0.6) !important; } /* boxes in masonry grid - using trans bg */ .av-masonry-container { background-color: transparent; } .av-masonry-entry:before { /* content: attr(ex); background-color: rgba(0,0,0,0.7) !important; position: absolute; width: 100%; height: 100%; z-index: 1000; text-align: center; line-height: 180px; font-weight: bold; font-size: 24px; color: #fff; text-transform: uppercase; opacity: 0; */ transition: all linear 0.2s; } .av-masonry-entry:hover:before { opacity: 1; } .main_color .avia-arrow { /* background-color: #0a1119; */ display: none !important; } .av-inner-masonry:hover .avia-arrow { display: none !important; } /* gallery title & caption together - overriden by below */ .av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content { font-size: 12px; } /* titles */ .av-masonry-entry .av-masonry-entry-title { font-style: italic; font-weight: 300; letter-spacing: 2px; color: #fff !important; text-transform: uppercase; font-size: 14px; line-height: 18px; opacity: 1 !important; } .av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content { padding-top: 0px; } /* excerpts */ .av-masonry-entry-content.entry-content { font-style: italic; font-weight: 300; letter-spacing: 2px; color: #fff !important; text-transform: uppercase; font-size: 12px; line-height: 16px; opacity: 1 !important; } .av-masonry-entry .av-inner-masonry-content { padding:10px 10px 10px 10px; } /* change arrows to logo for portfolio hovers */ .image-overlay .image-overlay-inside:before { content: url("/images/logoOverlay.png") !important; background-color: rgba(0,0,0,0.5) !important; } .avia_transform a:hover .image-overlay { background-color: #000 !important; opacity: 0.5 !important; } a:hover .image-overlay .image-overlay-inside { /* -webkit-animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); animation-name: avia_pop_small; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-delay: initial; animation-iteration-count: 1; animation-direction: initial; animation-fill-mode: initial; animation-play-state: initial; */ } /************************ PORTFOLIO GRID ***********************************************/ /* sorting bg and text */ .avia-fullwidth-portfolio .sort_width_container { background-color: #2d2d2d; } .main_color #js_sort_items { background-color: transparent; color: #fff; text-transform: uppercase; } .main_color #js_sort_items a { color: #fff; } .main_color #js_sort_items a:hover { color: #ff0000; } .main_color #js_sort_items a.active_sort { color: #ff0000; } /* titles */ .main_color .grid-entry-title { font-style: italic; font-weight: 300; letter-spacing: 2px; color: #000 !important; text-transform: uppercase; font-size: 14px; line-height: 18px; opacity: 1 !important; margin: 0px; /* background-color: rgba(0,0,0,0.3) !important; background-color: transparent; */ /* moves it into the thumbnail - margin-top: -90px; padding-left: 20px; padding-bottom: 20px; text-shadow: 2px 2px 4px #000;*/ } /* background under portfolio excerpt */ .main_color .grid-content { border: 1px #000 solid; background-color: transparent; padding: 20px; /* padding: 0px; /* margin-bottom: 50px; */ } /* excerpts */ .grid-entry-excerpt { font-style: italic; font-weight: 300; letter-spacing: 2px; color: #333 !important; text-transform: uppercase; font-size: 12px; line-height: 16px; background-color: #fff; } .grid-entry .main_color .avia-arrow { /* background-color:#0a1119; */ display: none; } /* ajax portflio preview window */ .main_color .portfolio-preview-content { background-color: #fff; } .portfolio-preview-title { display: none; } .main_color .portfolio-preview-content p { background-color: #fff; color: #333; font-size: 14px; line-height: 18px; margin: 20px 0 20px 0; } /************************ ACCORDION ************************/ /* using minimal styling in admin */ .av_toggle_section { margin: 0px 50px !important; } .togglecontainer { } #top .main_color .av-minimal-toggle .toggler { background: #fff !important; } .av-minimal-toggle .single_toggle { margin: 0 0 10px 0; border: 0px solid #afa89c !important; } .togglecontainer .single_toggle:first-child .toggler, .togglecontainer .taglist + .single_toggle .toggler { font-weight: 600; font-size: 16px; text-transform: uppercase; color: #1b1a26; letter-spacing: 2px; } .lawyerTitle { color: #afa89c; } /* hides + toggle and uses other icons .toggle_icon span { display: none; } .toggle_icon:before { content: '\E87D'; font-family: 'entypo-fontello'; font-size: 14px; font-weight: normal; vertical-align: top; } .activeTitle .toggle_icon:before { content: '\E87B'; } .toggle_icon { border: 0; } */ /* icon colour for + and - */ .toggle_icon .vert_icon, .toggle_icon .hor_icon, span.toggle_icon { border-color: #afa89c; } /* hides border btw title and content when open */ .js_active .toggler { border: none !important; } /* open toggle where tables go */ .main_color .toggle_content { background: #fff; } .main_color .toggle_content a { font-weight: 700; color: #1b1a26 !important; } /* inside txtBlockAlt for lawyer credits */ .txtBlockAlt h6 { /* font-style: italic !important; */ padding-top: 20px !important; line-height: 22px; /* adjust the v spacing */ color: #fff !important; } /* tables */ table { text-align: center; } tr:first-child th { text-align: center; background: #67b71c; color: #ff0066; } .row1 { } .row2 { } .col1 { /*background:#0a1119; color:#fff; width:100px;*/ } .col2 { /*width:200px;*/ } .col3 { } .col4 { } .col5 { } /* icons */ .iconLeft { /*margin-right:20px!important;*/ padding:0px 20px 20px 0px; } .iconLeft2 { /*margin-right:20px!important;*/ padding:0px 20px 20px 0px; } .icons { margin-bottom:-5px; } /************************ BLOG POSTS *******************************************************/ /* everything in single post list on main */ .post { /* background: #ff0066; */ } /* custom class for blog post element padding inside text block */ .newsList { padding: 50px !important; } .newsList p { color: #fff !important; } /* title meta date and p */ #top .fullsize .template-blog .post .entry-content-wrapper { text-align: left; } /* title on main news page ******/ .post-title.entry-title { color: #fff !important; font-weight: 700; } /* see laso page title arpund 764 */ .template-page .template-blog .entry-content-wrapper h2 { text-transform: uppercase; /* text-align: center !important; */ letter-spacing: 2px; } /* read more link in main posts page ******/ more-link-arrow::after { content: "\E87d"; font-family: 'entypo-fontello'; font-size: 10px; vertical-align: middle; padding: 0 8px; color: #ff0066 !important; } /* single post pages **************/ .single .post-entry h1 { /* color: green !important; font-weight: 700; */ } .single .post-entry p a { color: #1b1a26 !important; font-weight: 700; } .single .post-entry p a:hover { color: #000 !important; text-decoration: none; } .single .post-entry p a::after { content: "\E87d"; font-family: 'entypo-fontello'; font-size: 10px; vertical-align: middle; padding: 0 8px; } /* meta *************************/ /* hide thumbnail icons at left */ .template-blog .blog-meta { display: none !important; } /* v line that goes with icons */ .multi-big .post_author_timeline, .single-small .post_author_timeline { /* display: none !important; */ } .slide-content .blog-categories { /* display: none; */ } /* hide categories under grid */ .main_color .minor-meta { color: #afa89c; /* display: none !important; */ } /* hide text sep after date */ .text-sep { display: none !important; } .template-blog .post_delimiter { margin-bottom:0px; } .comment_meta_container, .side-container-comment-inner, .comment-container minor-meta { /* display: none !important; */ } /* main news page */ .blog-categories.minor-meta, .comment-container.minor-meta, .blog-author.minor-meta { display: none !important; } .read-more-link a { font-weight: 700; color: #fff !important; } .read-more-link a:hover { color: #afa89c !important; } /* line between posts on main */ #top .main_color.fullsize .template-blog .post_delimiter { border-color: #afa89c; } /* individual post pages */ .single .comment-container.minor-meta, .single .text-sep.text-sep-comment, .single .blog-categories.minor-meta, .single .text-sep.text-sep-cat, .single .blog-author.minor-meta { /* display: none !important; */ } /* hide recent news widget thumbnail */ .newsbox .news-thumb { display: none; /* ad in .newsbox .news-time to hide both date and time */ } /* archive pages - using functions.php to set as a grid **********/ /* hide thumbnail */ .slide-entry-overview a.slide-image { display: none; } /* title */ #top.archive.category .content .entry-title { text-align: left !important; color: #afa89c !important; } /* hide comments */ .slide-meta-comments { display: none !important; } /* hide deliminator */ .slide-meta-del { display: none !important; } /* remove sidebar on blog category #top.archive.category .sidebar { display: none!important; border: none!important; } #top.archive.category .content{ width: 100%; border: none !important; } */ /* hide category title on news & events page - id 411 */ .page-id-411 .flex_column .widget .widgettitle, .page-id-411 .content .widget .widgettitle { display: none !important; } .page-id-411 label { display: none !important; } .page-id-411 select { border-radius: 0px !important; border-color: #ccc !important; background-color: #fff !important; color: #000 !important; width: 288px !important; } .page-id-411 .flex_column .widget:first-child, .page-id-411 .content .widget:first-child { padding-top: 20px; } /* adjust width of post exceprt content */ .page-id-411 .fullsize .template-blog .post .entry-content-wrapper { max-width: 100% !important; } .page-id-411 .flex_column .template-blog .post-title { margin: 20px 0px 5px 0px !important; } .page-id-411 .flex_column .template-blog .post-meta-infos { margin: 0px !important; } /* pagination ******************************/ /* pagination entire area */ .pagination { /* background: orange; */ } /* pagination text current and page X of X text at right */ .page-id-411 .main_color .pagination span { color: #000 !important; } /* hide page X of X text at right */ .page-id-411 .pagination .pagination-meta { /* display: none; */ } /* pagination dot current */ .page-id-411 .pagination .current { background: #fff !important; color: #000 !important; } /* pagination not current */ .page-id-411 .pagination a, .page-id-411 .fullsize .template-blog .pagination a { background: #afa89c !important; color: #000 !important; } .page-id-411 .pagination a:hover, .page-id-411 .fullsize .template-blog .pagination a:hover { background: #fff !important; color: #000 !important; } /************************** GOOGLE MAP **********************/ .avia-google-map-container .gm-style-iw p { font-size: 14px; line-height: 18px; } .gm-style .gm-style-iw { font-size: 14px; line-height: 18px; } .gm-style .gm-style-iw a { color: #ff0000 !important; } /************************** REGISTER FORM ************************************************************************/ .formgrid { position: relative; /* This fixes the IE7 overflow hidden bug */ clear: both; float: left; width: 100%; overflow: hidden; /* background: #fff; padding: 50px; */ } .row-holder { width: 100%; float: left; clear: both; } #errorContainer { font-size: 11px; color: #000 !important; width: 100%; float: left; display: none; font-weight: bold; margin-top: 10px; } /* both cols */ .leftcol, .rightcol { float: left; width: 50%; position: relative; } .leftcol p, .rightcol p { /* width: 300px; float: left; margin-top: 0px; margin-bottom: 12px; padding-top: 8px; */ /* using just placeholders so tightening this up */ margin-bottom: 0px; padding-top: 0px; } .leftcol li, .rightcol li { padding: 0 20px 0 20px; display: inline; } /* left col */ .leftcol { padding-right: 20px; } .leftcol .chkBx p { width: 20px; /* float: left; margin-top: 0px; margin-bottom: 12px; padding-top: 8px;*/ } /* right col */ .rightcol { margin-top:0px; } .rightcol .radio-holder { /*width: 100%; float: left; height: 15px; */ } .rightcol .radio-holder p { margin-top: 0px; margin-left: 25px; padding-top: 2px; width: auto; } /* crucial to style placeholders in forms ******************************/ .main_color input::-moz-placeholder { /* firefox newer */ color: #53565A !important; } .main_color input::-webkit-placeholder { /* Chrome/Opera/Safari */ color: #53565A !important; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #53565A !important; } ::-moz-placeholder { /* Firefox 19+ */ color: #53565A !important; } :-ms-input-placeholder { /* IE 10+ */ color: #53565A !important; } :-moz-placeholder { /* Firefox 18- */ color: #53565A !important; } /* form basics **********************************************************/ /* using title font for labels */ #top label { font-weight: 300; font-size: 14px; line-height: 14px; letter-spacing: 0px; text-decoration: none; color: #fff !important; text-transform: uppercase; } input, textarea, select { border: 1px solid #53565A !important; background: #fff !important; padding: 20px; font-size: 11px; line-height: 11px; letter-spacing: 0px; color: #53565A !important; width: 185px; float:left; margin: 5px 0; text-transform: none; } input:focus, textarea:focus, select:focus { background: #ccc !important; outline: none; border: 1px solid #53565A; } #top input[type="text"] { border: none; color: #53565A !important; border-bottom: 1px solid #53565A !important; } /* use image for pulldown arrow *************************/ #top select { /* border: none; color: #53565A !important; border-bottom: 1px solid #53565A !important; background: #fff url("/images/formArrow.png") no-repeat center right !important; */ } /* hide the firefox pulldown arrow */ select { -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; } /* wrap each select in a div for the fontello icon arrow */ .select-container { position: relative; } /* use fontello icon for pulldown arrow *******************/ .select-container::before { z-index:9999!important; font-family: 'entypo-fontello'; content:'\e877'!important; color: #000; padding: 12px 8px; position: absolute; right: 0; top: 0; background: transparent !important; text-align: center; line-height: 12px; /* adjust vertical positioning */ width: 30px; height: 100%; pointer-events: none; } /* required text */ .alternate_color .required { color: #fff; } .requiredFields { color: #8b9f23 !important; } /* submit button */ #top input[type="submit"] { font-weight: 600; font-size: 12px; line-height: 12px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: #fff !important; border: 0px solid #fff !important; border-radius: 0px; padding: 10px 15px 10px 15px; margin: 10px 0px 0px 0px; /* background-color: rgba(0,57,97,1) !important; */ background-color: #afa89c !important; } #top input[type='submit']:hover { background-color: #000 !important; /* color: #fff !important; */ } select { /* width:370px; */ /* width: 100% !important; */ background: #fff url("../images/arrow.png") no-repeat center right; background-size: 1px 1px; -webkit-background-size: 26px 32px; color: #53565A !important; float: left; font-size: 12px; line-height: 1.2em; margin: 3px 0; padding: 0.3em; width: 185px; } #top .alternate_color input[type='text'] { color: #53565A !important; } #top .main_color input[type='text'], #top .main_color select, #top .main_color textarea { border-color: #53565A; background-color: #fff; color: #53565A !important; } input[type=checkbox], input[type=radio] { border:none; } input[type=checkbox] { width:14px; height:14px; margin: 0 10px 0 0; } input[type=radio] { width:20px; } .radio-holder { float:left; margin-top:5px; } .radio-holder p { color: #53565A; } input[type=radio]:checked { /*background: url("../images/radio.png") no-repeat center center;*/ -webkit-background-size: 21px 21px; /* shrink high resolution background */ } input[type=checkbox]:checked { background: url("../images/check.png") no-repeat center center; -webkit-background-size: 21px 21px; /* shrink high resolution background */ } .main_color input[type='submit'] { border-color: #53565A; background-color: #53565A !important; color: #fff !important; padding: 12px 22px; } /* for custom checkbox title */ .chkTitle { font-weight: bold; font-size: 12px; } #top select[multiple], #top .avia_ajax_form .select[multiple] { height: auto; min-height: 160px; } /************************ FOOTER ON PAGE ***************************************************************/ #csfooter { padding: 30px 0px; background-color: #231f20 !important; text-align: left; /* background: url(/images/cedarBand.jpg) no-repeat center center; */ /* border-top: 1px solid #000; */ border-top: 0px solid rgba(0,0,0,1); } .csFtrBg { padding: 30px 0px; margin: 0px 0px; } /* footer titles */ .csFtrBg h5 { font-size: 13px; line-height: 17px; letter-spacing: 3px; color: #afa89c; } /* copyright */ .csFtrBg h6 { font-size: 10px; line-height: 14px; letter-spacing: 3px; color: #afa89c; } .csFtrBg p { color: #fff; } .csFtrBg a { color: #afa89c; } .csFtrBg a:hover { color: #fff !important; text-decoration: none; } .csFtrBg strong { font-weight: 600; color: #afa89c; } /************************ FOOTER ***************************************************************/ #footer { padding: 30px 0 0px 0; background-color: #231f20 !important; text-align: left; /* background: url(/images/cedarBand.jpg) no-repeat center center; */ /* border-top: 1px solid #000; */ border-top: 0px solid rgba(0,0,0,1); } #ftrR { text-align: right; } #ftrL { text-align: left; } /* default is h3 */ .flex_column .widget .widgettitle, .content .widget .widgettitle { font-weight: 600; font-size: 14px; line-height: 14px; letter-spacing: 4px; color: #fff !important; text-transform: uppercase; margin-top: 0px !important; } .footer_color .textwidget h3 { color: #fff !important; } #footer .widget { margin: 0px 0 0px 0; } /* custom header title so not using title fields */ .ftrHdr { font-weight: 600; font-size: 14px; line-height: 14px; letter-spacing: 4px; color: #afa89c !important; text-transform: uppercase; padding-bottom: 50px !important; } .footer_color p { font-weight: 300; font-size: 15px; line-height: 24px; letter-spacing: 1px; color: #fff !important; } .footer_color a { color: #afa89c; } .footer_color a:hover { color: #fff !important; text-decoration: none; } .footer_color strong { font-weight: 600; color: #afa89c; } /* logos */ #arlawLogo { text-align: right; } #arlawLogo a { /* display: inline !important; used when side by side with another logo */ } #arlawLogo img { width: 100px; height: auto; /* margin-top: 12px; */ } /* centre icons */ #footer .textwidget .social_bookmarks { text-align: center; } #footer .textwidget .social_bookmarks li { display: inline-block; float: none; } /* style social */ #footer .social_bookmarks li { clear: none !important; border: 0 !important; float: left; font-size: 18px; width: 30px; padding: 0px 0 10px 0; } #footer .social_bookmarks li a { width: 15px; line-height: 30px; min-height: 30px; min-width: 30px; } /************************ SOCKET ************************/ #socket { padding: 0px 0 20px 0; /* background-color: transparent; */ background-color: #231f20; color: #fff; /* background: url(/images/branch.jpg) no-repeat bottom center scroll; */ border-top: 0px solid rgba(0,0,0,1); } #socket p { color: #fff; } #socket a { color: #fff; } #socket .copyright { font-weight: 00; text-align: center; width: 100%; font-size: 11px; line-height: 14px; letter-spacing: 2px; margin-top: 0px; margin-bottom: 0px; color: #afa89c; text-transform: uppercase; } #socket .copyright a { color: #afa89c; text-decoration: none; } #socket .copyright a:hover { color: #fff; } .pipe { padding: 0px 10px; } /* hide top arrow */ #scroll-top-link { display: none; } /******************************************************************************* MEDIA QUERIES ****************************************/ /* this is for landscape tablets */ @media only screen and (max-width: 1024px) { /* start */ /* #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; } nav.main_menu { display: none; } #wrap_all { position: relative !important; } */ /* end */ } /******************************************************************************* SMALL DESKTOP *******************/ @media only screen and (min-width: 990px) and (max-width: 1199px) { /* start */ /* end */ } /******************************************************************************* BREAK POINT *******************/ @media only screen and (min-width: 990px) { /* start */ .onlyDesktop { display: visible !important; } .onlyMobile { display: none !important; } .hide-on-desktop { display: none !important; } /* end */ } /* this fixes the issue with new tablets */ @media only screen and (max-width: 989px) and (min-width: 768px) { /* start */ .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container { height: 100px; line-height: 100px; } .responsive #top .av-logo-container .avia-menu { margin-top: 60px; } /* end */ } /******************************************************************************* BREAK POINT - using 989 here to include tablet landscape *******************/ @media only screen and (max-width: 989px) { /* start **********/ /* hide and show elements */ .onlyDesktop { display: none !important; } .onlyMobile { display: visible !important; } .hide-on-mobile { display: none !important; } /* header logo and burger menu **********************************************/ /* height of both logo and main menu area */ .responsive #top #wrap_all .container { /* height: 20px !important; background: green !important; just to see what elemnt is targetted */ } .responsive #top .logo, .responsive #top .logo a { text-align: center !important; width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; background: #231f20 !important; /* background: red !important; just to see what elemnt is targetted */ border: 0px solid #ff0066; } .responsive #top .logo img { padding: 20px !important; margin: 0 auto !important; } /* new logo svg */ .logo svg { padding: 0; display: inline-block; height: 60px !important; } /* adjusts the burger within main menu area */ .av-main-nav-wrap ul { top: 0px; } .responsive #top #wrap_all .main_menu { position: static; height: auto !important; } .responsive #top .av-logo-container #avia-menu { margin: 0 auto !important; width: 50px !important; /* use left: 0 and right: auto to position it at left */ } .responsive #top .av-logo-container .avia-menu { width: 100%; text-align: center !important; background: #231f20 !important; /* background: blue !important; just to see what elemnt is targetted */ } #top #wrap_all #header .av-small-burger-icon a { height: auto !important; line-height: 3 !important; } /* use this for the default burger size */ #top #wrap_all #header .av-burger-menu-main a { } /* burger closed */ .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after { background-color: #fff !important; } /* burger open */ #top .header_color .is-active .av-hamburger-inner, #top .header_color .is-active .av-hamburger-inner::before, #top .header_color .is-active .av-hamburger-inner::after { background-color: #fff !important; } /* tweak the vertical position of the menu when open */ #av-burger-menu-ul { vertical-align: top; /* originally middle */ background: black !important; /* just to see what elemnt is targetted */ } /* pancake open menu */ #top #av-burger-menu-ul { vertical-align: top!important; /* default is middle */ } #av-burger-menu-ul li { text-align: center; padding: 5px 0px !important; } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a { font-size: 12px; line-height: 16px; color: #afa89c !important; } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a:hover { color: #fff !important; opacity: 1 !important; } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.current-menu-item .avia-menu-text { color: #fff !important; } /* typography & basics **********************************************/ div .slideshow_caption h2 { font-size: 40px; line-height: 40px; /* adjust over image */ margin-top: -50%; } .avia-caption-content p { display: none !important; } .main_color h1, .alternate_color h1 { font-size: 20px; line-height: 24px; } .main_color h2, .alternate_color h2 { font-size: 18px; line-height: 22px; } .main_color h3, .alternate_color h3 { padding-top: 10px; font-size: 16px; line-height: 20px; } /* grids and columns **********************************************/ /* remove space on 1/2 grids on contact to make them fullwidth */ .responsive #top #wrap_all .container { width: 100% !important; max-width: 100% !important; padding: 0px !important; } .responsive #top #wrap_all .flex_column { margin: 0px !important; } .contactBlock { padding: 50px 20px 50px 20px !important; } /* this is a tweak to get regular text blocks to have margins on other pages */ .txtBlock { margin: 0px 20px !important; } .txtPrivacy { padding: 20px !important; } /* for white text on dark blocks */ .txtBlockAlt { margin: 0px !important; padding: 20px !important; } /* inside txtBlockAlt for lawyer credits */ .txtBlockAlt h6 { /* font-style: italic !important; */ /* color: #fff !important; */ letter-spacing: 1px; } /* news page */ .txtBlockNews { margin: 20px 20px 10px 20px !important; } /* custom class for blog post element padding inside text block */ .newsList { padding: 50px 20px !important; } /* single post pages **************/ .single .post-entry { margin: 0px 20px 20px 20px !important; /* color: green !important; font-weight: 700; */ } /* adjust sidebar */ .sidebar { padding: 0px !important; } .responsive #top #main .sidebar.smartphones_sidebar_active .inner_sidebar { margin: 0px 20px 0px 20px !important; } .responsive #top #main .sidebar.smartphones_sidebar_active { border-top: 1px solid #afa89c; } /* archive page */ #top .avia-content-slider { margin: 0px 20px !important; } /* images - remove padding ***************************************/ .avia_image { /* margin: 0px !important; padding: 0px !important; min-width: 100%; */ } /* contact page totem */ .alternate_color img { margin: 0px !important; min-width: 100%; } /* accordion toggler ***********************************************/ .av_toggle_section { margin: 0px 20px !important; } .txtBlockAlt h6 { padding-bottom: 20px !important; } /* register form **************************************************/ #top label { font-size: 12px; line-height: 12px; color: #fff !important; padding-top: 10px !important; } .leftcol, .rightcol { width: 100%; } .leftcol { padding-right: 0px; } input[type=checkbox] { width: 10px !important; height: 10px !important; margin: 0 10px 0 0; } input[type=radio] { width: 10px !important; } #formDisc { text-align: left; } .discTxt p { padding-top: 30px !important; } /* footer & socket **************************************************/ #footer { text-align: center; padding-bottom: 30px; } #arlawLogo { text-align: center!important; } #socket .copyright { margin: auto; width: 100%; font-size: 8px; line-height: 12px; letter-spacing: 0px; } .pipe { padding: 0px 5px; } .pipeSm { padding: 0px 2px; } /* footer page vs widget */ #top .csFtrBg { text-align: center!important; padding: 30px 30px !important; margin: 0px 0px; } /* adjust space under icon - using h6 copyright */ #top .csFtrBg h6 { margin-top: 20px !important; } /* end max-width 898 **********/ } /* MORE MOBILE SETTINGS - TWEAK LOGO PLACEMENT, ETC ****************************/ /* even bigger portrait phones *************************************************/ @media only screen and (min-width: 768px) and (max-width: 989px) { /* start 767-989 */ /* end 767-989 */ } /* bigger portrait phones *************************************************/ @media only screen and (min-width: 480px) and (max-width: 767px) { /* start 480-767 */ /* end 480-767 */ } /* smaller portrait phones *************************************************/ @media only screen and (max-width: 767px) { /* start max 767 */ /* new logo svg */ .logo svg { padding: 0; display: inline-block!important; /* height: 60px !important; */ } /* end max 767 */ } /* smallest portrait phones *************************************************/ @media only screen and (max-width: 479px) { /* start max 479 */ /* end max 479 */ } /* all portrait phones *************************************************/ @media only screen and (max-width: 989px) { /* start max 989*/ /* end max 989 */ }