/*======================================= BIG MAMAS AND PAPAS FRANCHISE CSS ========================================*/ html, body { height:100%; } body { background:url("../images/bg-marble.jpg") center top #fdfdfd; background-size:cover; color:#494949; font:16px/1.5 'Montserrat', sans-serif; width:100%; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } body.overflow { overflow:hidden; } ul, li { list-style-type:none; margin:0; padding:0; } a { color:#c25715; text-decoration:none; } a:hover { color:#000; text-decoration:none; } .container { position:relative; max-width:1400px; } button { border:none; background:none; border-radius:none; padding:0; margin:0; } input { background: #fff; border: 1px solid #ddd; display: inline; padding: 7px 5px; } textarea { background: #fff; border: 1px solid #ddd; display: inline; padding: 7px 5px; } select { background: #fff; border: 1px solid #ddd; display: inline; padding: 7px 5px; } h1, h2, h3, h4, h5, h6 { font-family:'Bitter', serif; font-weight:700; display:block; position:relative; text-transform:uppercase; } h1 { color:#282828; font-size:2em; } h2 { color:#282828; font-size:1.8em; } h3 { color:#282828; font-size:1.75em; } h4 { color:#282828; } h5 { color:#282828; } h6 { color:#FFF; } .orange { color:#c25715; } .bg-concrete { background:url("../images/bg-concrete.jpg") top left #f4f4f4; } .bg-wood { background:url("../images/bg-wood.jpg") center top #351e15; background-size:cover; } .img-box-shadow { box-shadow:0 0 30px rgba(0,0,0,0.4); } .img-cover::after { background:rgba(0,0,0,0.45); content:""; display:block; height:100%; position:absolute; top:0; left:0; width:100%; z-index:1; } .img-frame { border:10px solid #FFF; } .flex-column { flex-direction:column; } .flex-lg-row { flex-direction:row; } .relative { position:relative; } .anchor { display:block; height:1px; width:1px; position:absolute; top:-100px; } /*Font ----------------------------------------------------------------------------------------------*/ nav, .btn { font-family:'Bitter', serif; font-weight:700; text-transform:uppercase; } /*Button ----------------------------------------------------------------------------------------------*/ .btn { background:#c25715; border:none; color:#FFF; font-size:14px; padding:10px 15px; } .btn:hover { background:#e55f0d; color:#FFF; } .btn:focus { border:none; box-shadow:none; } .btn-submit { position:absolute; top:20px; right:80px; z-index:10; } .btn-outline { border:3px solid #282828; background:none; color:#282828; } .btn-outline:hover { background:#282828; color:#FFF; } /* Captions ----------------------------------------------------------------------------------------------*/ .caption { position:relative; } .img-caption { background:rgba(255,255,255,1); color:#000; padding:5px 20px; margin:0; text-align:center; width:100%; } .img-caption.no-bg { background:none; } /*======================================= HEADER ========================================*/ header { display:flex; position:fixed; top:0; left:0; right:0; width:100%; z-index:999; } #header-shrink-bg { background:#333; height:0; position:fixed; top:0; left:0; width:100%; transition:all 0.3s ease; z-index:9; } header.shrink #header-shrink-bg { height:80px; } #logo { position:absolute; top:10px; left:10px; width:80px; transition:all 0.3s ease; z-index:999; } /* nav */ nav { align-items:flex-end; background:#111 ; display:flex; flex-direction:column; height:100%; overflow:auto; position:fixed; top:0; left:100%; transition:left .7s; -webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1); transition-timing-function: cubic-bezier(0.42,0,0.58,1); width:100%; z-index:10; } nav.anim { left:0; } nav > ul { display:flex; flex-direction:column; margin-top:80px; opacity:0; text-align:right; transition:all 1s ease-out; transform:rotateY(90deg); padding:30px; } nav > ul::before { background:rgba(255,255,255,0.8); content:""; display:block; height:1px; position:absolute; top:15px; right:40px; width:80px; } nav.anim > ul { opacity:1; transition-delay:.2s; transform:rotateY(0deg); } nav > ul > li > a { color:#FFF; display:block; font-weight:700; padding:10px; } nav > ul > li > a:hover { color:#FFF; } /* dropdown menus */ .dropdown > .nav-sub { display:none; margin-bottom:1rem; } .dropdown.active > a:first-child { color:#c25715; } .dropdown.active > .nav-sub { display:flex; flex-direction:column; } .dropdown > .nav-sub > li > a { color:rgba(255,255,255,0.75); display:block; font:400 14px/1em 'Montserrat',sans-serif; padding:10px; text-transform:capitalize; } /* nav toggle & animate */ #nav-toggle { height:50px; color:#FFF; outline:none; position:absolute; top:15px; right:15px; z-index:999; width:50px; } .animated-icon { position:relative; width:38px; height:38px; cursor:pointer; -webkit-transition:.6s; transition:.6s; display:inline-block; top:3px; } .animated-icon .ani { top:18.5px; left:5px; } .animated-icon .ani, .animated-icon .ani:before, .animated-icon .ani:after { content:''; position:absolute; height:3px; width:28px; background:rgb(255, 255, 255); -webkit-transition:.3s; transition:.3s; } .animated-icon .ani:before, .animated-icon .ani:after { background:inherit; } .animated-icon.menu-arrow-r.anim { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); } .animated-icon.menu-arrow-r .ani:before { top:-8px; left:0; } .animated-icon.menu-arrow-r .ani:after { top:8px; left:0; } .animated-icon.menu-arrow-r.anim .ani:before { top:-5.5px; width:18px; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); left:-3px; } .animated-icon.menu-arrow-r.anim .ani:after { top:5.5px; width:18px; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); left:-3px; } /*======================================= HERO / PAGE HEADER ========================================*/ #hero, #page-header { align-items:center; background:url("../images/headers/hero.jpg") center center #222; background-size:cover; display:flex; justify-content:center; height:90vh; max-height:1000px; position:relative; width:100%; } .hero-content, .page-header-content { padding:30px; position:relative; z-index:2; } .hero-content h1, .page-header-content h1 { color:#FFF; letter-spacing:3px; text-align:center; } .hero-content h1 span { display:block; line-height:1.5em; letter-spacing:0px; font-size:0.5em; } #page-header { height:70vh; max-height:none; } #page-header.about { background:url("../images/headers/hero.jpg") center center #222; background-size:cover; } #page-header.faqs { background:url("../images/headers/faqs.jpg") center center #222; background-size:cover; } #page-header.financial { background:url("../images/headers/financials.jpg") center center #222; background-size:cover; } #page-header.opportunity { background:url("../images/headers/opportunity.jpg") center center #222; background-size:cover; } #page-header.franchise-opportunity { background:url("../images/headers/franchise-opportunity.jpg") center center #222; background-size:cover; } #page-header.support { background:url("../images/headers/support.jpg") center center #222; background-size:cover; } /*======================================= CONTENT / SECTIONS ========================================*/ section, footer { display:flex; flex-direction:column; padding:4rem 2rem; position:relative; z-index:2; } #opportunity { padding-bottom:8rem; } #leadership-team, #difference { flex-direction:column; } #difference h2, #leadership-team h2 { color:#FFF; } #difference, #leadership-team { padding-left:1rem; padding-right:1rem; } #operations, #restaurant-menu { padding:4rem 0; } #operations .container, #restaurant-menu container { padding:0; } #sub-footer { background:#FFF; flex-direction:column; padding:4rem 0; } .food-plates { margin-top:2rem; } .section-img { margin-top:-8rem; } .section-img.mtop-3 { margin-top:-3rem; } .section-content { padding:2rem 0; } /* card */ #difference .card-list { display:flex; flex-direction:row; flex-wrap:wrap; width:100%; } #difference .card { box-shadow:0 0 30px rgba(0,0,0,0.75); border:none; border-radius:0; margin:1rem 0; } #difference .card-body { display:flex; flex-direction:column; padding:2rem; } #difference .card-body .btn { margin-top:auto; } #difference .card-position { color:#c25715; font-weight:700; padding-bottom:2rem; } /* leaders */ #leaders.card-list { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; width:100%; } #leaders.card-list .card { margin:1rem; } #leaders .card { border:none; } .leader-profile { display:flex; flex-direction:column; padding:0; } .leader-image { background:#DDD; } .leader-image-desktop { display:none; background-size:cover; } .leader-image-mobile { display:inline-block; } .leader-image, .leader-image img { border-radius:.25rem .25rem 0 0; } .leader-bio { padding:2rem; } .leader-bio h5.card-title em { font-size:.6em; text-transform:lowercase; } .leader-bio em.card-position { color:#c25715; display:block; font-weight:700; margin-bottom:1rem; } /* list group */ .list-group-item.active { background:#c25715; border-color:#c25715; color:#FFF; font-weight:700; } .list-group-item.title { background:#FFF; color:#282828; font-weight:700; } .list-group-item span { display:block; } .list-group-horizontal { width:100%; } /* expansion list */ .expansion-item { background:#FFF; display:flex; flex-direction:column; flex-basis:100%; margin:0; width:100%; padding:0; } .expansion-item-header { padding:2rem 1rem 1rem; } .expansion-item-header h5 { color:#c25715; } .expansion-body-title, .expansion-body-item { padding:0.625rem 1rem; } .expansion-body-title { background:#F7F7F7; border-top:1px solid rgba(0,0,0,.125); border-bottom:2px solid rgba(0,0,0,.125); color:#282828; font-weight:700; } .expansion-body-item { font-size:0.9em; } .expansion-item-footer { color:#282828; font-weight:700; margin-top:auto; border-top:1px solid rgba(0,0,0,.125); padding:2rem; } .expansion-item-footer em { display:block; } .expansion-item-footer .btn { margin-top:1rem; } .expansion-body-item b { color:#282828; } .expansion-body-item span { display:flex; flex-direction:column; } .expansion-body-item span.population { padding-bottom:1rem; } .expansionmap { display:block; } /*======================================= PAGES ========================================*/ #story { } #story .section-content { padding:2rem 0; } #story-imgs { display:none; } #story-imgs img:nth-child(1), #story-imgs img:nth-child(5) { -ms-transform:rotate(-7deg); -webkit-transform:rotate(-7deg); transform:rotate(-7deg); position:relative; left:-20px; } #story-imgs img:nth-child(3) { -ms-transform:rotate(5deg); -webkit-transform:rotate(5deg); transform:rotate(5deg); } #layout-concepts img { margin:1rem 0; } #operations p, #restaurant-menu p { padding:0 2rem; } #locations { display:flex; flex-direction:column; align-items:center; } #locations-list { padding:0 1rem 1rem; width:100%; } #locations-list .list-group { display:flex; flex-direction:row; flex-wrap:wrap; } #locations-list .list-group li { font-weight:700; list-style-type:decimal; } #locations-list .list-group li a { display:block; } #locations-map { align-self:flex-start; width:100%; } #map { min-height:700px; height:100%; width:100%; } #performance { padding:4rem 1em; } #performance .container { display:flex; } #estimates { padding:4rem 1rem; } #estimates .table { font-size:14px; } #marketing-fees { margin-top:2rem; } #marketing-fees div[class^="col"] { margin:1rem 0; } .totals { background:#c25715 !important; color:#FFF; } #reporting { text-align:center; } .marketing-list { display:flex; flex-direction:row; justify-content:center; flex-wrap:wrap; width:100%; } .marketing-list li { width:50%; } .market-item { padding:2rem; text-align:center; } .market-item h5 { font-size:1em; } .market-item .material-icons, .owner-trait .material-icons { color:#FFF; font-size:50px; } .market-icon { background:#c25715; border-radius:50%; display:inline-block; height:80px; text-align:center; position:relative; width:80px; } .market-icon i { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .manage-system .market-icon { background:#cbbc92; } #faqs { padding:4rem 1rem; } #faqs #accordion { max-width:900px; margin:0 auto; width:100%; } #faqs .card { margin:10px 0; text-align:left; } #faqs .card-header { padding:0; text-align:left; } #faqs .card button.btn { background:#EEE; color:#282828; font-size:14px; font-weight:700; padding:12px 50px 12px 20px; text-align:left; text-decoration:none; width:100%; white-space:normal; } #faqs .card button.btn:hover { color:#c25715; } #faqs .card button.btn i { position:absolute; top:10px; right:15px; } #faqs .card a { color:#333; } #faqs .card a:hover { color:#ED1D24; } #faqs .card a.button { color:#FFF; margin:30px 0 0; width:auto; } #faqs .card a.button:hover { color:#FFF; } #faqs .card-body p { margin-bottom:0; } #faqs .info-box { display:inline-block; float:left; height:auto; margin:10px 0; text-align:left; width:100%; } #faqs .info-box ol li { color:#333; list-style-type:decimal; } #faqs .info-box ol li p { color:#656565; } .owner-trait { align-items:center; display:flex; flex-direction:column; } .owner-trait .market-icon { margin-bottom:1rem; } #inquiries { padding-top:5rem; } /*menu boards*/ #carouselMenuBoards { padding:0 15vw 3rem; } .carousel-indicators li { background-color:rgba(0,0,0,1); } .carousel-indicators li.active { background-color:#333; } .carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); position:relative; z-index:2; } .carousel-control-next-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); position:relative; z-index:2; } .carousel-control-prev::after, .carousel-control-next::after { background:#000; border-radius:50%; content:""; display:block; height:40px; position:absolute; top:50%; left:50%;transform:translate(-50%,-50%); width:40px; } /* training pictures */ #trainingPics { margin:0 0 6rem; padding:10px; } #trainingPics .row > div { padding:10px; } /* Real Estate */ #realestate ol { margin:1rem 0; } #realestate li { list-style-type:disc; } /* Refer A Friend */ #inquiryForm { display:flex; margin-top:120px; width:100%; } /*======================================= FOOTER ========================================*/ footer { background:#333; padding-left:0; padding-right:0; } #footer-links { flex-direction:row; flex-wrap:wrap; } #footer-links .col { margin:0 0 1.5rem; width:100%; } .foot-links > li { display:block; padding:5px 0; } .foot-links > li > a { color:#c3c2c2; font-size:14px; font-weight:700; } .foot-links > li > a:hover { color:#FFF; } #copyright { /* border-top:1px solid rgba(255,255,255,0.5); */ color:#999; font-size:13px; } #sub-footer .btn-outline { white-space:normal; } .partners { display:flex; flex-direction:row; justify-content:center; margin-bottom:1rem; } .partners li { align-items:center; display:flex; justify-content:center; padding:10px; } .partners li img { width:250px; } /*======================================= GOOGLE MAP ========================================*/ #map .gm-style-iw { border-radius:0px; color:#FFF; font:400 14px/1.5em 'Montserrat',sans-serif; overflow: hidden; padding: 40px 30px 30px; /*padding:10px 0; position:relative;*/ } #map .gm-style-iw b { color:#2b2b2b; display:inline-block; font:700 16px/1em 'Montserrat',sans-serif; margin:0 0 10px; text-transform:uppercase; } #map .gm-style-iw p { color:#656565; text-transform:capitalize !important; } #map .gm-style-iw a { display:inline-block; margin:-35px 0 0; } #map .gm-style-iw button { top:10px !important; right:10px !important; } #map .gm-style-iw .window-content h3 { font-size:20px; } #map .gm-style-iw .window-content span { color:#383838; display:block; } #map .gm-style-iw .window-content .btn { display:block; margin-top:1rem; padding:12px 25px; } #locationsListGroup { justify-content:center; } #locationsListGroup li a { color:#c25715; cursor:pointer; } #locationsListGroup li a:hover { color:#333; } /*======================================= MEDIA QUERIES ========================================*/ /* Extra Small */ @media (min-width:480px){ #footer-links .col { width:50%; } } /* Small */ @media (min-width:768px){ h1 { font-size:3em; } #difference .card { margin:1rem; width:calc(50% - 2rem); } #estimates .table { font-size:16px; } #leaders.card-list .card { width:calc(50% - 2rem); } /* #leaders .card { } .leader-profile { flex-direction:row; } .leader-image { width:33.3334%; } .leader-image-mobile { display:none; } .leader-image-desktop { display:inline-block; } .leader-image img { border-radius:.25rem 0 0 .25rem; } .leader-bio { padding:2rem; width:66.6667%; } */ } /* Medium */ @media (min-width:992px){ body { font-size:18px; } h1 { font-size:4em; } h2 { font-size:2.5em; } h3 { font-size:2.25em; } h5 { font-size:1.25em; } p { line-height:2; } .btn { padding:15px 30px; } .btn-submit { padding:10px 15px; position:relative; top:auto; right:auto; transition:all 0.3s ease; } .img-frame { border:20px solid #FFF; } /* header */ header { padding:0 20px; align-items:center; } #logo { position:relative; top:15px; left:auto; width:164px; } header.shrink #logo { width:110px; } #header-shrink-bg { height:100%; position:absolute; bottom:100%; top:auto; left:0; } header.shrink #header-shrink-bg { height:100%; bottom:0; } .anchor { top:-120px; } #inquiry.anchor { top:-150px; } /* nav */ #nav-toggle { display:none; } nav { background:none; position:relative; top:auto; left:auto; overflow:visible; margin-left:auto; margin-right:20px; flex-direction:row; transition:all 0.3s ease; width:auto; } nav > ul { flex-direction:row; opacity:1; margin:0; transform:rotateY(0deg); padding:0; } nav > ul::before { display:none; } nav > ul > li { align-items:center; display:flex; text-align:center; } nav > ul > li > a { font-size:14px; padding:10px 15px; } nav > ul > li > a::after { align-self:flex-start; background:#FFF; content:""; display:block; height:2px; width:0; transition:width .3s; } nav > ul > li > a:hover::after { width:100%; } /* header shrink */ /* dropdown menus */ .dropdown > .nav-sub { box-shadow:0 10px 10px rgba(0,0,0,0.5); margin-bottom:0; } .dropdown > a { align-items:center; display:flex; flex-direction:column; height:100%; justify-content:center; } .dropdown.active > a:first-child { border-radius:.25rem .25rem 0 0; background:#FFF; color:#c25715; } .dropdown.active > .nav-sub { background:#FFF; border-top:1px solid rgba(0,0,0,0.1); border-radius:0 0 .25rem .25rem; display:flex; flex-direction:column; position:absolute; top:100%; padding:5px; width:200%; } .dropdown.active > .nav-sub > li { display:block; } .dropdown.active > .nav-sub > li > a { color:#494949; font-weight:700; line-height:1.2em; text-align:left; } .dropdown.active > .nav-sub > li > a:hover { color:#000; } /* content */ section, footer { flex-direction:row; padding:6rem 2rem; } .section-img, .section-content { width:50%; } #story .section-content, #state-of-industry .section-content { padding:2rem 4rem; } #by-the-numbers { padding:0rem 2rem 6rem; } .section-reverse { flex-direction:row-reverse; } .list-group-horizontal { flex-direction:row; } /* pages */ #story-imgs { display:block; } #locations-map { padding:0 1rem; } #performance .container { flex-direction:column; } #estimates .table { font-size:1em; } #marketing-fees div[class^="col"] { margin:2rem 0; } .marketing-list { flex-direction:row; } .marketing-list li { width:33.3334%; } .market-item h5 { font-size:1.25em; } #faqs .card button.btn { font-size:18px; } /* .leader-bio p { line-height:1.5; } */ .carousel-control-prev::after, .carousel-control-next::after { height:60px; width:60px; } /* expansions */ .expansion-item { display:flex; flex-direction:row; padding:2rem; } .expansion-item.pull-left { flex-direction:row-reverse; } .expansion-content { display:flex; flex-direction:column; padding-right:2rem; width:80%; } .expansion-item.pull-left .expansion-content { padding-left:2rem; } .expansion-item-header { padding:0 0 1rem; } .expansion-body-item { display:flex; flex-wrap:wrap; padding:0 0 1rem 0; } .expansion-body-item span { display:flex; flex-direction:column; } .expansion-body-item span.population { padding-right:5rem; } .expansion-body-item.cities span { flex-direction:row; width:33.3334%; } .expansion-body-item.cities span::after { padding-right:5px; } .expansion-body-item.cities b { flex-grow:1; width:100%; } .expansion-item-footer { border:none; font-size:0.9em; margin-top:auto; padding:0; } .expansion-map { width:45%; } /* footer */ footer { padding:4rem 2rem; } #footer-links { display:flex; flex-direction:row; } } /* Large */ @media (min-width:1200px){ h2 { font-size:3em; } .btn { font-size:16px; } .btn-submit { padding:15px 30px; } /* header */ header { padding:0 40px; } #difference, #leadership-team { padding:10rem 4rem; } #difference .card { margin:1rem; } #difference .card img { flex-shrink:0; } #leaders.card-list .card { width:calc(33.3334% - 2rem); } #leaders.card-list .card p { line-height:1.5; } } /* Extra Large */ @media (min-width:1400px){ h5 { font-size:1.5em; } .market-item h5 { font-size:1.25em; } .marketing-list li { width:16.66667%; } } /* Nav */ @media (min-width:1630px){ .btn-submit { font-size:16px;} /* nav */ nav > ul > li > a { font-size:16px; padding:15px 30px; } .dropdown.active > .nav-sub { padding:15px; width:100%; } #difference .card { margin:2rem; width:calc(25% - 4rem); } /* #leaders.card-list .card { width:calc(50% - 2rem); } .leader-profile { flex-direction:row; overflow:hidden; } .leader-image { width:33.3334%; } .leader-image-mobile { display:none; } .leader-image-desktop { display:inline-block; } .leader-image img { border-radius:.25rem 0 0 .25rem; } .leader-bio { padding:2rem; width:66.6667%; } */ } /* 2k Screens */ @media (min-width:1921px){ .section-content { padding:0; width:25%; } #story .section-content, #state-of-industry .section-content { width:35%; } #story .section-content { padding-right:50px; } #state-of-industry .section-content { padding-left:50px; } /* .leader-bio { padding:4rem; } .leader-bio p { line-height:2; } .leader-image { background-image:attr(data-image url); } */ }