/* Theme Name: Illustrious Child Author: Carlos Morales Author URI: http://www.cmorales.es Template: illustrious */ /*** Tema Padre ***/ /* INDEX 1. GENERAL ELEMENTS Styles basic elements such as headings or hyperlinks, affecting the overall site but not its layout. 2. LAYOUT Defines the structure and design of the site. All styles that displace elements go here. Special layout elements such as breadcrums or page-specific stuff also goes here. 3. NAVIGATION Defines the styles for menus and cross-post navigation. Any specific element related to site traversing goes here. 4. POSTS Styles the appearance of posts and overall content, as well as typography. Must be in line with editor-style.css, so that both styles match. 5. COMMENTS Sets the appearance of the comment system, structuring both entries and posting forms. 6. WIDGETS Establishes the layout of widgets. Whereas the layout section affects the site in general, this section determines widget appearance for both their layout and contents. */ /* -------------------------------------------------------------- 1. GENERAL ELEMENTS -------------------------------------------------------------- */ /* BODY */ body { font-family:Arial, Helvetica, sans-serif; background:#f5f5f5; color:#666; font-size:0.875em; line-height:1.6; } /* HEADINGS */ h1, h2, h3, h4, h5, h6 { font-family:'Average', Arial, Helvetica, sans-serif; color:#000; line-height:1.2; margin:0 0 20px; text-shadow:0 1px 0 rgba(255,255,255,0.5); } h1 { font-size:3em; } h2 { font-size:2em; } h3 { font-size:1.5em; } h4 { font-size:1.3em; } h5 { font-size:1.2em; } h6 { font-size:1.1em; } /* HYPERLINKS */ a:link, a:visited { color:#000; text-decoration:none; } a:hover { color:#aaa; text-decoration:underline; } /* CITATIONS */ blockquote { display:block; font-style:italic; padding:0 5%; margin:25px 0; } blockquote cite, blockquote em, blockquote i { font-style:normal; } /* FORMS */ input[type=text], input[type=password], input[type=input], input[type=tel], input[type=url], input[type=email], input[type=number], input[type=range], input[type=search], input[type=color], input[type=time], input[type=week], input[type=month], input[type=date], input[type=datetime], textarea, select { border:1px solid #CCCCCC; padding:8px; background:#ffffff; } input[type=submit] { width:auto; -webkit-appearance:none; } /* MAIN THEME COLORS */ .primary-color { color:#E85F52; } .primary-color-bg { background-color:#E85F52; } .secondary-color { color:#555; } .secondary-color-bg { background-color:#555; } /* SHORTCODE CUSTOM STYLING */ .button, .button:visited, input[type=submit] { border-radius:0px; } .button-default, .button-default:link, .button-default:visited, input[type=submit] { background:#806a6a; background:-moz-linear-gradient(top, #806a6a 0%, #3b3333 100%); background:-webkit-linear-gradient(top, #806a6a 0%,#3b3333 100%); background:linear-gradient(to bottom, #806a6a 0%,#3b3333 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#806a6a', endColorstr='#3b3333',GradientType=0 ); text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3); border-color:#3b3333; } .button-default:hover, input[type=submit]:hover { background:#806a6a; } /* -------------------------------------------------------------- 2. LAYOUT -------------------------------------------------------------- */ /* WRAPPERS */ .outer { overflow:hidden; width:100%; } .wrapper { background:#f5f5f5; margin:0 auto; } .container { max-width:980px; padding:0 20px; margin:0 auto; } /* HEADER */ .header { position:relative; width:100%; padding:20px 0 40px; margin:0; } .header .logo { float:left; padding-top:15px; } .header .logo a { display:block; line-height:1em; } .header .title { display:block; line-height:1em; margin:0; } .header .title a { display:inline; } .header .title a:hover { text-decoration:none; } .header .logo .description { display:none; text-transform:capitalize; letter-spacing:2px; } .header .hidden { display:none; } /* HOMEPAGE SLIDES */ /**/ .slider { overflow:hidden; background:#f5f5f5; margin:0 0 40px; padding:0; position:relative; text-align:center; border:10px solid #fff; box-shadow:0 1px 3px 1px rgba(0,0,0,0.3); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-transition:0.3s all; -webkit-transition:0.3s all; transition:0.3s all; } .slider-slides { display:block; overflow:visible; margin:0; height:350px; padding:0; } .slider-slides .slide { background-color:#AAA; background-size:cover; background-position:center; height:350px; position:relative; list-style:none; width:100%; margin:0; } .slider-slides .slide-textbox { position:absolute; bottom:0; left:l; background:#444; background:rgba(0,0,0,0.5); padding:20px; width:100%; text-align:left; text-shadow:0 1px 3px #222; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .slider-slides .slide-textbox .slide-title { font-size:2em; margin-bottom:10px; } .slider-slides .slide-textbox p:last-child { margin-bottom:0; } .slider-slides .slide-textbox .slide-title a:link, .slider-slides .slide-textbox .slide-title a:visited { color:#fff; text-decoration:underline; } /* Slider Controls */ .slider-prev, .slider-next { -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; opacity:0; } .slider:hover .slider-prev, .slider:hover .slider-next { opacity:1; } .slider-prev, .slider-next { position:absolute; width:50px; height:50px; font-size:50px; line-height:50px; margin-top:-25px; top:50%; right:20px; text-align:center; color:#fff; z-index:999; border-radius:50%; text-shadow:0 0 3px rgba(0,0,0,0.5); cursor:pointer; } .slider-prev { left:20px; right:auto; } .slider-prev:before { font-family:'fontawesome'; content:'\f0a8 '; } .slider-next:before { font-family:'fontawesome'; content:'\f0a9'; } /* BREADCRUMBS */ .breadcrumb { margin:20px 0; padding:10px 0; border-bottom:1px solid #ddd; } .breadcrumb-separator{ position:relative; padding-right:15px; margin-right:10px; } .breadcrumb-separator:before { display:block; position:absolute; top:50%; right:0; list-style:none; font-family:'fontawesome'; content:'\f105'; font-size:14px; color:#999; margin-top:-7px; line-height:1; } .breadcrumb-separator { } .breadcrumb-link :first-child{} .breadcrumb-link :hover{} .breadrcumb-title{} /* PAGE BANNERS AND TITLES */ .banner { overflow:hidden; padding:0; margin:0 0 30px; max-height:400px; } .banner img { display:block; width:100%; height:auto; line-height:0; padding:0; margin:0; } .pagetitle { padding:0; margin:0 0 30px; } .pagetitle .pagetitle-title { margin:0; } /* HOMEPAGE MINI FEATURES */ .minifeatures { margin:0; } .minifeatures .feature { margin-bottom:40px; } .minifeatures .feature img { display:block; margin:0 5% 0 0; line-height:0; width:100%; } .minifeatures .feature .feature-image { border:6px solid #fff; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; margin:0 0 20px; } .minifeatures .feature .feature-title { font-size:1.7em; margin:0 0 10px; } .minifeatures .feature .feature-content { clear:both; } /* PAGE CONTENT */ .main { padding:0; } .content { float:left; width:65%; margin:0 5% 30px 0; padding:0; } .sidebar-left .content { float:right; margin:0 0 30px 5%; } .sidebar-left .content-wide, .sidebar-right .content-wide, .content-wide { float:none; padding:0; margin:0; width:auto; } /* SIDEBARS */ .sidebar { float:left; width:30%; } .widget { overflow:hidden; margin:0 0 30px; } /* SIDE NAVIGATION */ .submenu { float:right; width:30%; } .submenu.left { float:left; } /* FOOTER SIDEBARS */ .subfooter { margin:30px 0; border-bottom:1px solid #888; } /* FOOTER */ .footer { background:url(../illustrious/images/bg-footer.jpg) #666; padding:30px 0; clear:both; padding:30px 0; box-shadow:inset 0 7px 5px -7px rgba(0,0,0,0.5); } .footer .widget-title { text-shadow:0 -1px 0 rgba(0,0,0,0.3); } body .dark { color:#cbbbbb; } /* -------------------------------------------------------------- 3. NAVIGATION -------------------------------------------------------------- */ /* MAIN MENU */ .menu-main { padding-top:20px; float:right; } .menu-main { margin:0; } .menu-main > ul { display:block; margin:0; padding:0; } /* Fix for extra wrapper in default menu markup */ /* Menu Elements */ .menu-main li { float:left; } .menu-main li { position:relative; margin:0; list-style:none; -moz-transition:0.2s all; -webkit-transition:0.2s all; transition:0.2s all; } .menu-main li a { display:block; margin:0; padding:10px; color:#222; text-transform:uppercase; -moz-transition:0.2s all; -webkit-transition:0.2s all; transition:0.2s all; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .menu-main li a .menu-description { display:none; } .menu-main li:hover { text-decoration:none; } .menu-main li:hover > a, .menu-main li a:hover { text-decoration:underline; } /* Current item highlight both normally and on hover */ .menu-main .current-menu-ancestor > a, .menu-main .current-menu-item > a { } .menu-main .current_page_ancestor > a:hover, .menu-main .current-menu-item > a:hover { } /* Children Elements */ .menu-main ul, .menu-main li, .menu-main a { -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; } .menu-main li ul { visibility:hidden; opacity:0; margin:0; position:absolute; background:#fff; box-shadow: 0 0 2px 2px #888; top:100%; left:0; z-index:9999; } .menu-main li ul li { } .menu-main li ul li a { width:200px; color:#000; font-size:12px; line-height:1.5; height:auto; padding:8px 10px; text-shadow:none; text-transform:capitalize; } .menu-main li ul li:first-child a { border-top:none; } .menu-main li ul li:hover > a, .menu-main li ul li a:hover { background-color:#eee; } /* Children display on hover */ .menu-main li:hover > ul { visibility:visible; opacity:1; } /* Further Children Elements */ .menu-main li ul > li:hover { overflow:visible; } .menu-main li ul ul { margin:0; top:0; left:200px; } /* MOBILE MENU */ .menu-mobile { display:none; clear:both; margin:20px 0 20px; padding:10px; width:100%; border:1px solid #ccc; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; } /* FOOTER MENU */ .footermenu { float:right; overflow:hidden; margin:0 0 30px; } .menu-footer { display:block; width:100%; text-align:center; margin:0; padding:0; } .menu-footer > ul { overflow:hidden; margin:0; padding:0; } /* Menu Elements */ .menu-footer li { display:block; float:left; padding:0; margin:0; list-style:none; } .menu-footer li a { margin-left:15px; color:#fff; } .menu-footer li a:hover, .menu-footer li:hover > a { } .menu-footer .current-menu-item > a { text-decoration:underline; } /* SUBMENU NAVIGATION */ .menu-sub { margin:0 0 30px; padding:0; } .menu-sub li { position:relative; list-style:none; margin:0; } .menu-sub li:before { display:block; position:absolute; top:50%; left:10px; list-style:none; font-family:'fontawesome'; content:'\f104'; font-size:14px; color:#999; margin-top:-7px; line-height:1; } .menu-sub li a { display:block; padding:8px 10px 8px 30px; } .sidebar-left .menu-sub li:before { left:auto; right:10px; content:'\f105'; } .sidebar-left .menu-sub li a { padding:8px 30px 8px 10px; } .menu-sub li a:hover { text-decoration:none; } .menu-sub .current_page_item a, .menu-sub .current-cat a { } .menu-sub li ul { display:none; font-size:1em; } /* PORTFOLIO NAVIGATION */ .menu-portfolio { overflow:hidden; margin:0 0 30px; padding:0; text-align:center; } .menu-portfolio li { list-style:none; display:block; padding:0; margin:0; } .menu-portfolio li a { float:left; display:block; margin-right:3px; padding:10px 25px; color:#222; } .menu-portfolio .current_page_item, .menu-portfolio .current-cat { border-bottom:0; } .menu-portfolio .current_page_item a, .menu-portfolio .current-cat a { background:#ddd; border-radius:3px; } .menu-portfolio .current_page_item ul li a, .menu-portfolio .current-cat ul li a { color:#222; background:none; } /* NEXT/PREV POST NAVIGATION */ .navigation { overflow:hidden; margin:0 0 30px; } .navigation a { display:block; } .navigation .nav-prev, .navigation .nav-next { position:relative; padding:0 30px; } .navigation .nav-prev { float:left; text-align:left; } .navigation .nav-prev:before { display:block; position:absolute; top:50%; left:0; list-style:none; font-family:'fontawesome'; content:'\f104'; font-size:30px; color:#999; margin-top:-15px; line-height:30px; } .navigation .nav-next { float:right; text-align:right; } .navigation .nav-next:before { display:block; position:absolute; top:50%; right:0; list-style:none; font-family:'fontawesome'; content:'\f105'; font-size:30px; color:#999; margin-top:-15px; line-height:30px; } /* NUMBERED PAGINATION */ .page-link { clear:both; } .pagination { overflow:hidden; margin:0 0 30px; text-align:center; } .pagination span, .pagination a { display:inline-block; color:#777; margin:0 3px; padding:5px 10px; border-radius:3px; } .pagination span { background:url(../illustrious/images/shades/black_30.png); box-shadow:inset 0 1px 2px #999; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2); color: #f5f5f5; } .pagination a:hover { background:#eee; text-decoration:none; } .pagination .current { } /* IN-POST PAGINATION */ .page-link { clear:both; } .postpagination { overflow:hidden; margin:10px 0px 30px; float:left; background:#ddd; background:-moz-linear-gradient(top, #f5f5f5 0%, #cccccc 100%); background:-webkit-linear-gradient(top, #f5f5f5 0%,#cccccc 100%); background:linear-gradient(to bottom, #f5f5f5 0%,#cccccc 100%); border:1px solid #ccc; border-bottom:1px solid #aaa; color:#444; text-shadow:0 1px 0 #f2f2f2; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } .postpagination span { display:block; float:left; color:#777; background:#ccc; padding:5px 10px; font-size:14px; } .postpagination a span { display:block; float:left; padding:5px 10px; font-size:14px; background:none; } .postpagination a span:hover { background:#eee; text-decoration:none; } .postpagination .current { text-shadow:0 1px 0 #fff; } /* -------------------------------------------------------------- 4. POSTS & PAGES -------------------------------------------------------------- */ /* POSTS */ .post { margin:0 0 40px; } .post .post-image { width:110px; height:auto; margin:5px 20px 5px 0; height:auto; float:left; border:5px solid #fff; box-shadow:0 2px 2px 0 rgba(0,0,0,0.3); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .post .post-image-wide { float:none; text-align:center; margin:0 0 30px; line-height:0em; width:100%; } .post .post-image img { display:block; margin:0; line-height:0em; } .post .post-body { margin-left:130px; } .post .post-title { margin:0; } .post .post-title a { color:inherit; } .post .post-byline { font-size:0.8em; margin:0 0 10px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .post .post-byline div { position:relative; display:inline-block; margin:0; } .post .post-tags { display:block; margin:0 0 30px; padding:0; } .post .post-tags li { display:inline-block; list-style:none; padding:0 5px; margin:0; border-radius:3px; } .post .post-tags li a { } .post .post-content { padding:0; margin:0; } .post .post-content p:last-child { margin-bottom:0; } .post .separator { clear:both; width:100%; } .post .readmore { margin:0; } /* INDIVIDUAL PORTFOLIO ITEMS */ .cpo_portfolio { margin: 0 0 40px; } .cpo_portfolio .portfolio-media { margin:0 0 20px; } .cpo_portfolio .portfolio-image { text-align:center; margin:0 0 30px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .cpo_portfolio .portfolio-image img { border:6px solid #fff; box-shadow:0 1px 3px 0 rgba(0,0,0,0.3); } .cpo_portfolio .portfolio-details { padding-left:5%; margin-bottom:30px; border-left:1px solid #ddd; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .cpo_portfolio .portfolio-details div { margin:0 0 10px; padding-left:30px; position:relative; } .cpo_portfolio .portfolio-details .details-icon { position:absolute; display:block; width:15px; margin-top:1px; font-size:1.3em; text-align:center; left:0; top:0.1em; } .cpo_portfolio .portfolio-content { } /* GALLERIES IN POSTS AND PORTFOLIOS */ .gallery { margin:0; position:relative; padding:0; overflow:hidden; } .gallery .item { float:left; overflow:hidden; list-style:none; width:32%; text-align:center; margin:0 2% 2% 0; padding:0; } .gallery .item_last { margin:0 0 2%; } .gallery .item img { line-height:0; width:100%; height:auto; } .gallery .item .content { position:absolute; width:60%; margin:30px 15%; padding:20px 5%; bottom:0; background:url(../illustrious/images/shades/black_10.png); color:#fff; } .gallery .separator { clear:both; } /* PORTFOLIO SHOWCASE */ .portfolio { clear:both; padding:50px 0 0; border-top:1px solid #ddd; } .portfolio-heading { text-align:center; margin-bottom:30px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .portfolio-content { } .portfolio-column { margin-left:0; list-style:none; padding:0; } .portfolio-item { display:block; position:relative; text-align:left; list-style:none; padding:0; margin:0 0 30px; -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; } .portfolio-item-image { display:block; position:relative; border:6px solid #fff; box-shadow:0 1px 3px 0 rgba(0,0,0,0.3); } .portfolio-item-image img { display:block; max-width:100%; margin:0 auto; width:100%; height:auto; line-height:0; } .portfolio-item .portfolio-item-title { padding:10px 0; font-size:1.4em; text-shadow: 0px 1px 0px #fff; -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; } .portfolio-item .portfolio-item-overlay { opacity:0; position:absolute; top:0; z-index:9999; width:100%; top:0; bottom:0; -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; border-radius:4px 4px 0 0; } .portfolio-item .portfolio-item-icon { display:block; position:absolute; top:60%; left:50%; font-size:32px; line-height:60px; color:#fff; margin:-30px 0 0 -30px; width:60px; height:60px; z-index:99999; -moz-transition:0.6s all; -webkit-transition:0.6s all; transition:0.6s all; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .portfolio-item a:hover { text-decoration:none; } .portfolio-item:hover .portfolio-item-overlay { opacity:0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .portfolio-item:hover .portfolio-item-icon { top:50%; opacity:1; text-shadow:0 0 10px #fff; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* 404 PAGE */ .notfound { padding:100px 0;} .notfound-image { font-size:200px; font-weight:bold; text-align:center; line-height:1; margin:0 auto; } .notfound-title { text-align:center; } .notfound-content { margin:0 auto; width:50%; } /* SEARCH PAGE */ .search-result { margin:0 0 30px; } .search-form { margin:0 0 30px; } .search-title { margin:0; } .search-byline { font-size:0.8em; } .search-content p { margin:0; } /* BLANK PAGE */ .blank { padding:50px 0; } /* CONTACT FORM */ .contact-form { } .contact-form .test { left:-9999px; position:absolute; top:-9999px; } .contact-form .field { overflow:hidden; margin:0 0 20px; } .contact-form .field label{ float:left; width:20%; } .contact-form .field input[type=text] { width:80%; clear: both; float: left; } .contact-form .field textarea{ height:200px; max-height:600px; min-height:200px; resize:vertical; max-width:100%; } .contact-form .field .error{ display:block; margin-left:20%; color:#F30; font-weight:bold; font-size:0.9em; } .contact-form .field input[type=submit]{ margin:0; } /* -------------------------------------------------------------- 5. COMMENTS -------------------------------------------------------------- */ /* COMMENTS */ .comments { clear:both; margin:0; } .commentlist { list-style:none; padding:0; margin:0 0 30px; } .commentlist > li { margin:0 0 10px; } .comment { overflow:hidden; list-style:none; } .comment .comment-avatar { float:left; padding:3px; } .comment .comment-avatar img { border:3px solid #fff; box-shadow:0 1px 2px 0 #ccc; } .comment .comment-title { padding:0; margin-left:100px; } .comment .comment-author { display:block; font-size:1.3em; } .comment .comment-date { font-size: 0.8em; } .comment .comment-approval { display:block; padding:0 10px 0; margin:0; } .comment .comment-content { margin:5px 0 0 100px; padding:0; } .comment .comment-options { overflow:hidden; text-align:right; font-size:0.9em; } .comment .comment-options a { margin-left:10px; } /* Contents Styling for Comment Body */ .comment .comment-content ul, .comment .comment-content ol { margin-bottom:18px; } .comment .comment-content p:last-child { margin-bottom:6px; } .comment .comment-content blockquote p:last-child { margin-bottom:24px; } /* Nested Comments */ .comment .children { list-style:none; margin:0 0 0 50px; padding:20px 0 0; } /* Pingbacks & Trackbacks */ .comments ol.pinglist { margin:0; } .comments .pingback { list-style:none; margin:0 0 10px 0; } .comments .pingback .url { font-style:italic; } /* COMMENT FORM */ .comment-respond { margin:30px 0; overflow:hidden; position:relative; } .comment-respond p { overflow:hidden; margin: 0 0 5px; } /* Fields */ .comment-respond .comment-notes { display:none; } .comment-respond .required { color:#ff4b33; } .comment-respond label{ display:block; float:left; padding:8px 10px 0px 0; width:25%; } .comment-respond input[type=text] { float:left; clear:both; } .comment-respond textarea{ height:200px; float:left; clear:both; max-height:400px; min-height:200px; resize:vertical; } /* Nested Form */ #cancel-comment-reply-link { float:right; display:block; font-size:0.9em; } /* Allowed Tags */ .comment-respond .form-allowed-tags { display:none; color:#888; font-size:0.9em; padding-left:25%; } .comment-respond .form-allowed-tags code { display:block; font-size:0.9em; } .comment-respond .form-submit { } /* -------------------------------------------------------------- 6. WIDGETS Includes all widget-related elements -------------------------------------------------------------- */ /* GENERAL WIDGET STYLING */ .widget ul { margin-bottom:0; } .widget li { list-style:none; margin-left:0; } .widget li ul { margin-left:20px; margin-top:5px; } /*FLICKR WIDGET*/ .cpotheme-flickr .flickr_badge_image { width: 20%; border: 3px solid #FFFFFF; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3); } /* RECENT POSTS*/ .cpotheme-recent { overflow: visible; } .cpotheme-recent .recent-item { overflow:visible; padding-bottom:30px; } .cpotheme-recent .recent-item .recent-image { } .cpotheme-recent .recent-item .recent-image img{ border: 3px solid #FFFFFF; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3); } /* -------------------------------------------------------------- 7. EXTERNAL RESOURCES Includes styles for additional theme libraries and resources -------------------------------------------------------------- */ /***** Estilos del tema hijo ****/ @font-face { font-family: 'fishfingerslight'; src: url('fonts/fishfingers_light-webfont.eot'); src: url('fonts/fishfingers_light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/fishfingers_light-webfont.woff2') format('woff2'), url('fonts/fishfingers_light-webfont.woff') format('woff'), url('fonts/fishfingers_light-webfont.ttf') format('truetype'), url('fonts/fishfingers_light-webfont.svg#fishfingerslight') format('svg'); font-weight: normal; font-style: normal; } .menu-main, h1, h2, h3{ font-family: 'fishfingerslight', sans-serif; } h1 { font-size: 3.5em; } h2 { font-size: 2.5em; } h3 { font-size: 2em; } .menu-main { font-size: 1.7em; } .header .logo { max-width: 100%; } @media screen and (min-width: 1024px) { .menu-main { max-width: 500px; } }