/*--------------------------------------------------- FONT IMPORT -------------------------------------------------*/ @import url('https://fonts.googleapis.com/css2?family=Allison&family=Cormorant+Unicase:wght@300;500&family=Kristi&display=swap'); /*-------------------------------------------------- GLOBAL BODY --------------------------------------------------*/ .full_width_content { max-width: 150rem !important; } /* Hide scrollbar for Chrome, Safari and Opera */ *::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ * { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /*--------------------------------------------------- Two Column Floating List ---------------------------------------------------*/ #container .section:not(.w232) .the_list_item #container .section:not(.w232) .the_list_item {width: 47% !important; display: inline-grid!important; margin-right: 0.8rem !important;} #container .the_list_item .the_list_item_desc ol li, #container .the_list_item .the_list_item_desc ul li{position:static!important;} ul li{list-style-position: inside !important;} /*fix for Charlotte theme*/ ul.columns {columns: 3; -webkit-columns: 3; -moz-columns: 3;} ul.columns2 {columns: 2; -webkit-columns: 2; -moz-columns: 2;} ol.columns {columns: 3; -webkit-columns: 3; -moz-columns: 3;} ol.columns2 {columns: 2; -webkit-columns: 2; -moz-columns: 2;} /*----------------------------------------------------- SCROLL TO TOP BUTTON -------------------------------------------------------*/ #myBtn { position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 7px; /* Some padding */ border-radius: 50px; /* Rounded corners */ font-size: 18px; /* Increase font size */ padding: 1rem !important; background-color: #e8d6c5; /* Set a background color */ color: #fff; /* Text color */ } #myBtn:hover { background-color: #b99b84; /* Add a dark-grey background on hover */ } html:not(.mobileview) #myBtn { display: block !important; } /*---------------------------------------------------- HEADER -----------------------------------------------------*/ #the_header { max-width: 100% !important; box-shadow: none !important; } #wrapper #_the_logo, .share_icons-wrap { margin: 0 auto !important; max-width: 130rem !important; } html:not(.mobileview) .phone::after { content: '(315) 367-5001 | Friday Blow Out - Buy One Get One Baked Goods' !important; text-align: right !important; font-size: 1.4rem !important; padding-right: 2rem !important; text-transform: uppercase !important; font-weight: bold !Important; } /*----------------------------------------------------- LOGO ------------------------------------------------------*/ #the_header .logo-variation.logo-variation-header .logo-slot img { max-height: 10rem !important; margin: -1.5% auto 2.5% !important; } /*-------------------------------------------------- NAVIGATION ---------------------------------------------------*/ #_the_navigation a, #menu-holder a { text-transform: uppercase !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.2em !important; font-family: raleway, sans-serif !important; } /*tab hover*/ html:not(.mobileview) #access .menu ul { padding: .7rem 1rem .5rem !important; } html:not(.mobileview) #access .menu li { margin-top: 0 !important; } html:not(.mobileview) #access .menu ul li a { padding: 1.7rem 2.2rem !important; border-radius: 0px !important; } /*---------------------------------------------------- BUTTON -----------------------------------------------------*/ .the_list_item_action a,#gform_submit_button_1,#gform_submit_button_2 { background: var(--links) !important; border-radius:0px !important; box-shadow: none !important; border: 1px solid #DD6C41 !important; font-size: 1.4rem !important; letter-spacing: .25rem !important; text-transform: uppercase !important; color: #fff !important; padding: 1.2rem 2.5rem !important; font-family: raleway, sans-serif !important; } .the_list_item_action a:hover,#gform_submit_button_1:hover,#gform_submit_button_2:hover { background: var(--headBkg) !important; color: #2d2d2d !important; } .the_list_item_action { background-color: transparent !important; } .mediaqueries.mobileview .the_list_item_action a { font-size: 1.1rem !important; } /*------------------------------------------------- FONT STYLING --------------------------------------------------*/ h1, h2, h3{ font-weight: normal !important; } .the_list_item_desc { font-size: 1.6rem !important; font-weight: lighter !important; line-height: 2.8rem !important; Letter-spacing: .08rem !important; } /*--------------------------------------------------- CONTENT -----------------------------------------------------*/ .tsidesign_content{ max-width: 106rem !important; margin: 0 auto !important; } /*main*/ .tsD_main { margin: 8% auto 8% !important; } .tsD_main .the_list_item_headline { font-weight: 100 !important; color: #2d2d2d !important; font-family: 'Cormorant Unicase', serif !important; margin-bottom: 0 !important; font-size: 3rem !important; } html:not(.mobileview) .tsD_main .the_list_item_headline { font-size: 4rem !important; } .tsD_main .the_list_item_subheadline { color: #b99b84 !important; font-family: 'Cormorant Unicase', serif !important; font-style: italic !important; text-transform: initial !important; font-size: 2.3rem !important; line-height: 2.5rem !important; letter-spacing: .1rem !important; } /*----------------------------------------------------- DLS -------------------------------------------------------*/ .tsidesign_dl-split { max-width: 150rem !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; } .tsidesign_dl-split .the_list_item { margin: 0 !important; width: 50% !important; } .tsidesign_dl-split .item_1 { background: var(--accentBkg) !important; padding: 3% 0% 3% 3% !important; } .tsidesign_dl-split .item_2 { background: var(--navBkg) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding-left: 5% !important; } /*font*/ .tsidesign_dl-split .item_2 .the_list_wrap { max-width: 80% !important; } .tsidesign_dl-split .the_list_item_headline a { font-family: 'Kristi', cursive !important; color: #966640 !important; font-size: 6rem !important; line-height: 6rem !important; } .tsidesign_dl-split .the_list_item_subheadline { color: #575757 !important; font-family: 'Cormorant Unicase', serif !important; font-style: italic !important; text-transform: initial !important; font-size: 2.5rem !important; line-height: 3rem !important; letter-spacing: .1rem !important; margin-bottom: 8% !important; } /*overlap image*/ .dl-div { position: relative !important; } .dl-img { position: absolute !important; top: -45vw !important; left: 50% !important; } .dl-div img { max-width: 60% !important; border-radius: 200px 200px 0 0 !important; } @media (min-width: 1500px) { .dl-img { top: -560px !important; } } @media (max-width: 800px) { .tsidesign_dl-split { display: initial !important; } .tsidesign_dl-split .item_1 { width: 100% !important; padding: 0 !important; } .tsidesign_dl-split .item_2 { width: 90% !important; margin: -75vw auto 0 !important; padding: 10% !important; } .tsidesign_dl-split .the_list_item_headline a { font-size: 5rem !important; line-height: 5rem !important; } .tsidesign_dl-split .the_list_item_subheadline { font-size: 2rem !important; line-height: 2rem !important; margin-bottom: 10% !important; } .dl-div { display: none !important; } } /*--------------------------------------------------- FEATURES ----------------------------------------------------*/ /*headline-features*/ .tsidesign_feature-headline { max-width: 100rem !important; margin: 5% auto 0!important; padding: 0 !important; } .tsidesign_feature-headline .the_list_item_headline{ font-family: 'Allison', cursive !important; color: #966640 !important; font-size: 6rem !important; line-height: 0rem !important; padding: 2% 2% 1% 2% !important; border: none !important; } .tsidesign_feature-headline .the_list_item_heads { background: #e8d6c5 !important; } .typewriter{ line-height: 5rem !important; } .tsidesign_feature-headline .typewriter{ overflow: hidden; border-right: .04em solid #966640; white-space: nowrap; margin: 0 auto; animation: animated-text 2s steps(29,end) .1s 1 normal both, animated-cursor 600ms steps(29,end) infinite; display: inline-flex; } /*--- Quicker Cursor Blink ---*/ @keyframes animated-cursor{ from{border-right-color: #cca07e;} to{border-right-color: transparent;} } /*--- Typing Out Text Animation ---*/ @keyframes animated-text{ from{width: 0;} to{width: 290px;}/* Adjust as needed */ } /*features*/ .tsidesign_feature { max-width: 110rem !important; margin: 0 auto !important; padding: 4% 2% 2% !important; } .tsidesign_feature *{ -webkit-transition: all .3s ease-in-out !important; -moz-transition: all .3s ease-in-out !important; -o-transition: all .3s ease-in-out !important; transition: all .3s ease-in-out !important; } .tsidesign_feature .the_list_item_headline a{ font-size: 4rem !important; letter-spacing: .1rem !important; font-family: 'Allison', cursive !important; color: #966640 !important; } .tsidesign_feature .the_list_item .the_list_item_subheadline { opacity: 0 !important; text-transform: initial !important; } .tsidesign_feature .the_list_item:hover .the_list_item_subheadline, .mediaqueries.mobileview .tsidesign_feature .the_list_item .the_list_item_subheadline{ opacity: 1 !important; } .tsidesign_feature .the_list_item .the_list_item_image { margin-right:auto !important; margin-left:auto !important; width: 20% !important; } .tsidesign_feature .the_list_item { opacity: .8 !important; } .tsidesign_feature .the_list_item:hover { -webkit-transform: translateY(-8px) !important; transform: translateY(-8px) !important; opacity: 1 !important; } .tsidesign_feature .the_list_item_action a { background: transparent !important; color: #fff !important; } @media (max-width:800px) { .tsidesign_feature .the_list_item { margin: 3% auto !important; } } .tsidesign_vibe , .tsidesign_vibe .the_list_item{ margin: 0 auto !important; padding: 0 !important; } .tsidesign_vibe .the_list_item{ width: 25% !important; } @media (max-width: 575px) { .tsidesign_vibe .the_list_item{ width: 50% !important; } } @media (max-width: 400px) { .tsidesign_vibe .the_list_item{ width: 100% !important; } } /*--------------------------------------------------- SPLIT ----------------------------------------------------*/ .tsidesign_split { max-width: 90rem !important; margin: 0 auto !important; display: flex !important; flex-flow: row wrap; align-items: flex-end ; position: relative !important; margin-top: -17vw !important; } .tsidesign_split .item_1 { margin-bottom: 1% !important; } .tsidesign_split .the_list_item_headline { font-family: 'Cormorant Unicase', serif !important; font-weight: 100 !important; font-size: 3rem !important; } .headline{ font-family: 'Kristi', cursive !important; color: #966640 !important; font-size: 5rem !important; letter-spacing: .1rem !important; display: inline-block !important; } html:not(.mobileview) .home .headline{ line-height: 4rem !important; padding-left: 40% !important; } .tsidesign_split .the_list_item:hover .headline{ -webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } .tsidesign_split .the_list_item_subheadline { font-family: 'Cormorant Unicase', serif !important; letter-spacing: .25rem !important; color: #b99b84 !important; margin-top: -2% !important; margin-bottom: 5% !important; font-size: 1.7rem !important; line-height: 1.7rem !important; } .tsidesign_split img{ border-radius: 200px 200px 0px 0px !important; } @media (max-width: 870px) { .tsidesign_split { margin-top: 5% !important; text-align: center !important; max-width: 80% !important; } .tsidesign_split .the_list_item { width: 100% !important; } .tsidesign_split .item_1 { margin-bottom: 8% !important; } .tsidesign_split img{ width: 70% !important; } } @media (min-width: 1500px) { .tsidesign_split { margin-top: 0px !important; } } @-webkit-keyframes scale-up-center { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-center { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); } } /*--------------------------------------------------- BANNER ----------------------------------------------------*/ .tsidesign_banner{ max-width: 100rem !important; margin: 8% auto 10%!important; text-align: center !important; padding: 0 !important; position: relative !important; } .tsidesign_banner .the_list_wrap { background: #E8D6C5 !important; padding: 10% 10% 8% 10% !important; } .tsidesign_banner .the_list_item_headline { font-family: 'Kristi', cursive !important; color: #966640 !important; font-size: 5rem !important; letter-spacing: .1rem !important; } .home .tsidesign_banner .the_list_item_headline { margin-bottom: 5% !important; } .tsidesign_banner .the_list_item_subheadline { font-family: 'Cormorant Unicase', serif !important; } .tsidesign_banner .the_list_item_desc span { color: #966640 !important; font-style: italic !important; letter-spacing: .2rem !important; } div.banner { position: absolute !important; top: 90% !important; left: 10% !important; right: 10% !important; } /*--------------------------------------------------- SUBPAGES ----------------------------------------------------*/ /*dl*/ .tsidesign_internal-dl .slidesjs-container, .tsidesign_internal-dl .slidesjs-control{ height: 30vw !important; } .tsidesign_internal-dl .the_list_item_headline{ font-family: 'Cormorant Unicase', serif !important; font-size: 4rem !Important } .tsidesign_internal-dl .the_list_item_headline span { font-family: 'Kristi', cursive !important; } .tsidesign_internal-dl .the_list_item_subheadline { color: #fff !important; font-family: 'Cormorant Unicase', serif !important; font-style: italic !important; text-transform: initial !important; font-size: 2.3rem !important; line-height: 2.5rem !important; letter-spacing: .1rem !important; } .tsidesign_internal-dl .the_list_text { max-width:50% !Important } @media (min-width: 1500px) { .tsidesign_internal-dl .slidesjs-container, .tsidesign_internal-dl .slidesjs-control{ height: 10vw !important; } } @media (max-width: 869px) { .tsidesign_internal-dl .the_list_text { max-width:100% !Important } } @media (max-width: 569px) { .tsidesign_internal-dl .slidesjs-container, .tsidesign_internal-dl .slidesjs-control{ height: 42vw !important; } .tsidesign_internal-dl .the_list_item_headline{ font-family: 'Cormorant Unicase', serif !important; font-size: 2.7rem !Important } .tsidesign_internal-dl .the_list_item_headline span { font-family: 'Kristi', cursive !important; } .tsidesign_internal-dl .the_list_item_subheadline { color: #fff !important; font-family: 'Cormorant Unicase', serif !important; font-style: italic !important; text-transform: initial !important; font-size: 1.4rem !important; line-height: 1.5rem !important; letter-spacing: .1rem !important; } .tsidesign_internal-dl .the_list_text{ padding-top: 0 !Important } } @media (max-width: 300px) { .tsidesign_internal-dl .the_list_item_headline{ font-family: 'Cormorant Unicase', serif !important; font-size: 2rem !Important }} /*---------- team page ----------*/ /*team-banner*/ .tsidesign_team-banner{ max-width: 50% !important; margin: -10% auto 10%!important; text-align: center !important; padding: 0 !important; position: relative !important; } .tsidesign_team-banner .the_list_wrap { background: #E8D6C5 !important; padding: 8% 5% 5% 5% !important; } .tsidesign_team-banner .the_list_item_headline { font-family: 'Kristi', cursive !important; color: #966640 !important; font-size: 5rem !important; letter-spacing: .1rem !important; margin-bottom: 5% !important; } /*team-headline*/ .tsidesign_team-headline{ max-width: 130rem !important; width: 50% !important; padding: 0 !important; } .tsidesign_team-headline .the_list_item_headline { text-transform: uppercase !important; font-size: 3rem !important; line-height: 4rem !important; font-weight: 600 !important; letter-spacing: .2rem !important; text-shadow: -4px 4px 0px #6d7f5e !important; color: #fff !important; background: #8f9671 !important; padding: 3% 10% 3% 25% !important; margin-left: -3% !important; border-radius: 0px 150px 150px 0px !important; box-shadow: -4px 4px 0px #6d7f5e !important; border: 5px solid #6d7f5e !important; overflow: hidden !important; -webkit-transition: all .3s ease-in-out !important; -moz-transition: all .3s ease-in-out !important; -o-transition: all .3s ease-in-out !important; transition: all .3s ease-in-out !important; } .tsidesign_team-headline .the_list_item:hover .the_list_item_headline { box-shadow: -10px 8px 0px #6d7f5e !important; text-shadow: -10px 8px 0px #6d7f5e !important; } @media (max-width: 600px) { .tsidesign_team-headline{ width: 85% !important; } .tsidesign_team-headline .the_list_item_headline { font-size: 2rem !important; line-height: 2.5rem !important; } } /*team*/ .tsidesign_team { max-width: 100rem !important; margin: 0 auto !important; } .tsidesign_team .the_list_item { margin-bottom: 5% !important; } .tsidesign_team .the_list_item_headline { font-family: 'Cormorant Unicase', serif !important; font-size: 2.4rem !important; color: #b99b84 !important; } /*padding*/ .tsD_padding { margin-top: 10% !important; } /*---------- contact ----------*/ .tsD_map{ margin: -10% auto 10%!important; position: relative !important; } /*---------------------------------------------------- Animation -----------------------------------------------------*/ /*————————— animations (slide in left) ------------------------*/ .slide-in-left { -webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes slide-in-left { 0% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-left { 0% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /*————————— animations (slide in right) ------------------------*/ .slide-in-right { -webkit-animation: slide-in-right 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-right 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes slide-in-right { 0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /*---------------------------------------------------- FOOTER -----------------------------------------------------*/ #the_footer { max-width:100% !important; } #wrapper .footer_brand { box-shadow: inset 1px 1px 6px -2px rgba(0,0,0,.4) !important; } .mediaqueries.mobileview #_the_copyright { padding-bottom: 15% !important; } /*------------------------------------------------- MEDIA QUERIES -------------------------------------------------*/ .mediaqueries.mobileview #container .item_1.the_list_item.center.hero.yes_image.yes_heads.yes_link.yes_desc{ background-attachment:initial!important; } .mediaqueries.mobileview #container .section .list_block.type_article.a3 .the_list_item { background-attachment:initial!important; } .isMobile #the_header #_the_logo, .isMobile #the_header, .isMobile #the_header #_the_logo .slot-type-image { min-height: 10rem !important; } @media(max-width: 575px){ #the_header, #the_header #_the_logo, #the_header #_the_logo .slot-type-image { min-height: 10rem !important; } } /*----------------------------------------------------- FLEX ------------------------------------------------------*/ #container .tsidesign_flex, #container .tsD_flex { margin: 0 auto !important; display: -webkit-box !important; display: -moz-box !important; display: box !important; display: -webkit-flex !important; display: -moz-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: stretch; -moz-box-align: stretch; box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; -ms-flex-align: stretch; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #container .tsidesign_flex .the_list_item, #container .tsD_flex .the_list_item { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } /*KILLS RIGHT MARGIN ON THE LAST ITEM IF ODD NUMBER OF FEATURES SO EDGES ARE FLUSH WHEN SCALED - RK QA*/ #container .tsidesign_flex .the_list_item:last-of-type, #container .tsD_flex .the_list_item:last-of-type {margin-right: 0rem !important;} /*END*/ .flexboxlegacy #container .tsidesign_flex .the_list_item, .flexboxlegacy #container .tsD_flex .the_list_item{ -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; -webkit-flex: 1 1 auto; flex: 1 1 auto; } .no-flexboxlegacy #container .tsidesign_flex .the_list_item, .no-flexboxlegacy #container .tsD_flex .the_list_item{ -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; } #container .tsidesign_flex .the_list_item, .flexboxlegacy #container .tsidesign_flex .the_list_item .the_list_wrap, #container .tsD_flex .the_list_item, .flexboxlegacy #container .tsD_flex .the_list_item .the_list_wrap { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 auto; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-align-self: stretch; -moz-align-self: stretch; align-self: stretch; -ms-flex-item-align: stretch; } #container .tsidesign_flex .the_list_item .the_list_wrap, #container .tsD_flex .the_list_item .the_list_wrap { /*height: 100% !important;*/ -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; } .flexboxlegacy #container .tsidesign_flex .the_list_item .the_list_wrap, .flexboxlegacy #container .tsD_flex .the_list_item .the_list_wrap { height: auto; } #container .tsidesign_flex .the_list_item .the_list_item_action, #container .tsD_flex .the_list_item .the_list_item_action { margin-top: auto !important; display: block; width: 100%; } #container .tsidesign_flex, #container .tsD_flex { justify-content: space-around; } #container .tsidesign_flex .the_list_item, #container .tsD_flex .the_list_item { justify-content: space-between; } @media (max-width:815px) and (min-width:575px) { .tsidesign_flex .the_list_item, .tsD_flex .the_list_item { width: 44.988% !important; } } /* ------------------ Floating Social Media Tabs ------------------ */ .social_items_flex { display: flex; flex-direction: column; justify-content: space-around; position: fixed; bottom: 70px; z-index: 999999; } .mobileview .social_items_flex { display: none !important; } .social_button { height: 60px; width: 60px; float: left; margin: 5px; overflow: hidden; background: #fff; border-radius: 50px; cursor: pointer; box-shadow: 0 10px 10px rgba(0,0,0,0.1); transition: all 0.3s ease-out; } .social_button:hover { width: 330px; } .social_button .floating_icon { display: inline-block; height: 60px; width: 60px; text-align: center; border-radius: 50px; box-sizing: border-box; line-height: 60px; transition: all 0.3s ease-out; } .google_button:hover .floating_icon { background: #32A350; } .google_button .floating_icon i { color: #32A350; } .social_button:hover .floating_icon i { color: #fff; } .social_button .floating_icon i { font-size: 25px; line-height: 60px; } .social_button span { font-size: 20px; font-weight: 500; line-height: 60px; margin-left: 10px; transition: all 0.3s ease-out; } .google_button:hover span { color: #32A350; } /* ------------------ End Floating Social Media Tabs ------------------ */