@charset "utf-8"; /* CSS Document */ /* INCLUSIONS CSS ERMES */ @import url(../ermes-standard/style.css); @import url(../ermes-standard/modeles.css); /* INCLUSIONS CSS SYRACUSE */ @import url(../standard/portal/front/modeles.css); @import url(../standard/portal/front/style.css); @import url(../syracuse/syracuse.css); @import url(integration.css); @import url(epica.css); /************Fonts**************/ @font-face { font-family: 'elysioregular'; src: url('fonts/Elysio-webfont.eot'); src: url('fonts/Elysio-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Elysio-webfont.woff2') format('woff2'), url('fonts/Elysio-webfont.woff') format('woff'), url('fonts/Elysio-webfont.ttf') format('truetype'), url('fonts/Elysio-webfont.svg#elysioregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'elysiobold'; src: url('fonts/Elysio-Bold-webfont.eot'); src: url('fonts/Elysio-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Elysio-Bold-webfont.woff2') format('woff2'), url('fonts/Elysio-Bold-webfont.woff') format('woff'), url('fonts/Elysio-Bold-webfont.ttf') format('truetype'), url('fonts/Elysio-Bold-webfont.svg#elysiobold') format('svg'); font-weight: normal; font-style: normal; } a { outline: 0; } /*************Hide outline*************/ *:focus, *:hover { outline: 0 !important; } .x-webkit *:focus, *:focus { outline: 0 !important; } button:focus, .btn:focus { outline: 0 !important; } .btn-group > .btn:focus, .btn-group-vertical > .btn:focus { outline: 0; } .x-webkit *:focus, *:focus { outline: 0 !important; } button:focus, .btn:focus { outline: 0 !important; } ul.notes-echelle.js li.note-focus { outline: 0 !important; } .rsDefaultInv .rsArrow:hover, .rsDefaultInv .rsArrow:focus { outline: 0; border: none } /**************************/ body { background: #fff; color: #000 } body, .x-body, h2, h3, h4, h5, h6, td, pre, .panel-front > .x-panel-header span { font-family: 'elysioregular'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } header { background: transparent } #search-panel { background: none } #menu-panel { background: transparent url('images/menu_shadow.jpg') no-repeat center top; border: none } /*****************Logo*****************/ .navbar-header { float: left } .navbar-header-before { background: #fff url('images/logo22.png') no-repeat; width: 150px; /*89px;*/ height: 187px; float: left; margin: 0 30px 0 0; background-position-x: center; background-position-y: -10px; } } .navbar-inverse { } .navbar-brand { width: 779px; height: 128px; background: #fff url('images/logo.jpg') no-repeat left center; } .navbar-brand:hover, .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { } .navbar-brand-after { background: #fff url('images/logo_side.jpg') no-repeat right center; height: 128px; width: 128px; /*194px;*/ display: block; float: right; } .navbar-header-after { float: right; } .navbar-header-after a { background: #fff url('images/local.png') no-repeat left center; font-size: 28px; color: #bd1a8d; padding: 6px 0 6px 32px; display: block } .navbar-header-after a:hover { color: #96c11f; text-decoration: none } .navbar-brand h1 { display: none } #share_social { z-index: 9999 } /*****************Connexe*****************/ #nav_connexe { position: relative; } .connectBox { background: #b5b2b2 } .connectBox .form-control { } #langue-btn { z-index: 9; bottom: -15px; right: 0; } #langue-btn li a { background: #b5b2b2; padding: 6px 8px; font-size: 12px; color: #000 } #langue-btn a.active { background: #fff; color: #96C11F } ul.pipe-separators li::after { display: none } /********/ #identite_utilisateur { color: #000 } } /*****************Search*****************/ #search-panel { background: #fff } #scenario-selection, #submit-search { } #submit-search { } #submit-search .icon-search { } #scenario-selection { } #textfield, .clean-text-field { } #search-panel #textfield, #search-panel .clean-text-field { border: 1px solid #b5b2b2; font-size: 18px; color: #26475F } #search-panel .clean-text-field { border-left: none } .clean-text-field { line-height: 0 } .tt-hint { } #globalScenarioMobile { background: #B5B2B2; } #globalScenarioMobile > li > a { color: #000 } #globalAdvancedSearchLink { font-size: 14px; color: #000 } .tt-suggestion.tt-cursor { background: #b92158; } #globalScenarioMobile .active, #globalScenarioMobile .active:hover, #globalScenarioMobile .active:focus { background: #F2F0F1; color: #000 } #globalScenarioMobile > li > a:hover, #globalScenarioMobile > li > a:focus { color: #000 } .site-btn a, .site-btn a:hover, .site-btn a:focus { color: #000 } .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .dropdown-menu > .active > a:focus { background: #9f0045 } #textfield, .tt-hint { font-size: 12px } /*****************Ariane*****************/ #ariane { font-size: 14px; color: #b5b2b2; padding: 0; } #ariane .actif { font-weight: normal; color: #b5b2b2; } #ariane span.texte { } #ariane a { color: #b5b2b2 } /*****************Button*****************/ /*********Default***********/ .btn-default { background-color: #b5b2b2; border-color: #b5b2b2; color: #000 } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { background-color: #b5b2b2; border-color: #b5b2b2; color: #000 } /*********Validation***********/ .btn-validation { background-color: #fd932f; border-color: #fd932f; color: #fff; } .btn-validation:hover, .btn-validation:focus, .btn-validation:active, .btn-validation.active, .open .dropdown-toggle.btn-validation { background-color: #fd9f46; border-color: #fd9f46; color: #fff } /*********Action***********/ .btn-action { background-color: #26475F; border-color: #26475F; color: #fff; } .btn-action:hover, .btn-action:focus, .btn-action:active, .btn-action.active, .btn-action.disabled, .btn-action[disabled] { background-color: #305b7b; border-color: #305b7b; color: #fff; } /*********Action***********/ .btn-info { background-color: #BC1B8B; border-color: #BC1B8B; color: #fff; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] { background-color: #BC1B8B; border-color: #BC1B8B; color: #fff; } /*********Basket*********/ .btn-basket { background-color: #96C11F; border-color: #96C11F; color: #fff; } .btn-basket:hover, .btn-basket:focus, .btn-basket:active, .btn-basket.active, .btn-basket.disabled, .btn-basket[disabled] { background-color: #aad72e; border-color: #aad72e; color: #fff; } /*********Basket*********/ .btn-dark { background-color: #26475F; border-color: #26475F; color: #fff; } .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .btn-dark.disabled, .btn-dark[disabled] { background-color: #305b7b; border-color: #305b7b; color: #fff; } .memoriser .dropdown-toggle { border-top: 1px solid #aad72e } /*****************Content*****************/ h1, h2, h3, h4, h5 { } h3 { line-height: 22px } .panel-front, .panel-selection { background: #fff; border: 1px solid #26475F } .panel > .panel-heading h2, .panel-title, .panel-front > .x-panel-header { text-transform: none } .panel-front > .x-panel-header span, h2 { color: #bd1a8d; font-weight: normal; font-size: 26px } .bs-bullets .rsNavSelected button { background: #bd1a8d; border-color: #bd1a8d; border-radius: 0 } .bs-bullets button, .bs-bullets button:focus, .bs-bullets button:active, .bs-bullets button:hover { background: #fff; border-color: #bd1a8d; border-radius: 0; border-width: 1px } /*********Themes**********/ /*********Thème 1 Carrousel**********/ .theme_1 { } .theme_1 .panel-front, .theme_1 .panel-selection { padding: 0; border: none } .theme_1 .panel-heading { display: none } #portal .theme_1 .panel-body { padding: 0 } .carousel_3 { border: none } .carousel_3 .slider_container { background: transparent url('images/carousel_bg.png') no-repeat right bottom; right: 0; left: auto; width: 100%; padding: 0; display: none } .carousel_3 h3, .carousel_3 p { color: #fff; font-weight: normal; text-transform: none } .carousel_3 h3 { line-height: 22px } .carousel_3 h2 { text-align: right; display: block } .carousel_3 h2 span { background: transparent url('images/shape_btn.png') no-repeat right bottom; color: #fff; font-size: 18px; font-family: arial; padding: 6px 12px 21px 12px; display: inline-block } .carousel_3 .slider_content { position: absolute; bottom: 85px; right: 10px; width: 260px; } .theme_1 .rsDefaultInv.rsHor .rsArrowLeft { left: 0px } .theme_1 .rsDefaultInv.rsHor .rsArrowRight { right: 0px } /*.theme_1 .bs-bullets .rsNavSelected button { background: #b8c551; border-color: #b8c551; border-radius: 0 } .theme_1 .bs-bullets button, .theme_1 .bs-bullets button:focus, .theme_1 .bs-bullets button:active, .theme_1 .bs-bullets button:hover { background: #fff; border-color: #b8c551; border-radius: 0; border-width: 1px } */ .rsDefaultInv .rsBullets { } .rsDefaultInv.rsHor .rsArrowLeft { left: 0px } .rsDefaultInv.rsHor .rsArrowRight { right: 0px } .bs-bullets .rsNavSelected button { background: #BD1A8D; border-color: #BD1A8D; border-radius: 4px; padding: 0; width: 8px; height: 8px } .bs-bullets button, .bs-bullets button:focus, .bs-bullets button:active, .bs-bullets button:hover { background: #B5B2B2; border-color: #B5B2B2; border-radius: 4px; padding: 0; width: 8px; height: 8px } /*********Thème 2 **********/ .theme_2 { } .theme_2 .panel-front, .theme_2 .panel-selection { padding: 10px; background: #96c11f; border: none } .theme_2 .panel-front > .x-panel-header span, .theme_2 h2 { color: #fff; } .theme_2 .panel-heading h2 { background : transparent url('images/map_small.png') no-repeat left center; padding: 10px 0 10px 36px } .theme_2 .panel-heading h2:before { /*content: '\e812'; position: relative; width: 100%; color: #fff; font-size: 36px; font-family: 'ermes-font-update'; font-weight: normal; padding:0 10px 0 0*/ } .theme_2 ul li, .theme_2 ul li a, .theme_2 a, .theme_2 p, .theme_2 span { color: #fff } /***********/ /*********Thème 3 **********/ .theme_3 { } .theme_3 .panel-front, .theme_3 .panel-selection { padding: 10px; background: #bd1a8d; border: none } .theme_3 .panel-front > .x-panel-header span, .theme_3 h2 { color: #fff; } /*.theme_3 ul li, .theme_3 ul li a , .theme_3 a , .theme_3 h4, .theme_3 h3, .theme_3 h2, .theme_3 h1, .theme_3 p, .theme_3 span {color: #fff}*/ .theme_3 ul li, .theme_3 ul li a, .theme_3 a, .theme_3 p, .theme_3 span { color: #fff } .theme_3 .panel-heading h2:before { content: '\e802'; position: relative; width: 100%; color: #fff; font-size: 36px; font-family: 'ermes-font-update'; font-weight: normal; padding: 0 10px 0 0 } /*****************/ /*********Thème 4 **********/ .theme_4 { } .theme_4 .panel-front, .theme_4 .panel-selection { padding: 10px; background: #B5B2B2; border: none } #portal .theme_4 .panel-body { padding: 10px } .theme_4 .panel-front > .x-panel-header span, .theme_4 h2 { color: #fff; font-size: 26px; padding: 0 0 10px 0 } .theme_4 h3 { text-align: left; color: #bd1a8d; font-size: 18px; font-weight: normal } .theme_4 .panel-heading h2:before { content: '\e830'; position: relative; width: 100%; color: #fff; font-size: 36px; font-family: 'ermes-font-update'; font-weight: normal; padding: 0 10px 0 0 } /*********Thème 5 **********/ .theme_5 { } .theme_5 .panel-front, .theme_5 .panel-selection { padding: 0; border: none } .theme_5 .panel-heading { display: none } #portal .theme_5 .panel-body { padding: 0 } .theme_5 .nav.nav-tabs { margin: 0; background: transparent } .theme_5 .nav.nav-tabs li { width: 49% } .theme_5 .nav-tabs li:nth-child(2) { float: right } .theme_5 .nav-tabs > li { background-color: #96c11f } .theme_5 .nav-tabs > li.active { background-color: #26475F } .theme_5 .nav-tabs > li.active a, .theme_5 .nav-tabs > li.active a:hover, .theme_5 .nav-tabs > li.active a:focus { background-color: #26475F; border-color: #26475F; color: #fff } .theme_5 .tab-content { background: #26475F; } .theme_5 .nav-tabs > li > a { font-weight: normal; padding: 4px 10px; text-transform: none; background: transparent } .theme_5 .nav-tabs li a { color: #fff; padding: 4px 10px; text-align: center; font-weight: normal; font-size: 26px } .theme_5 .tab-content, .theme_5 .tab-content p, .theme_5 .tab-content li a { color: #fff } .theme_5 .tab-content h2, .theme_5 .tab-content h3, .theme_5 .tab-content h4 { color: #96c11f } .theme_5 .webframe-ermes-lastviewedresources-item-shadow, .theme_5 .webframe-ermes-openfindselection-item-shadow { display: none } .theme_5 div.webframe-ermes-lastviewedresources-item, .theme_5 div.webframe-ermes-openfindselection-item { background: #26475F; border: 1px solid #fff } .theme_5 .btn-default { background-color: #b5b2b2; border-color: #b5b2b2; color: #26475F } .theme_5 .btn-default:hover, .theme_5 .btn-default:focus, .theme_5 .btn-default:active, .theme_5 .btn-default.active, .theme_5 .open .dropdown-toggle.btn-default { background-color: #b5b2b2; border-color: #b5b2b2; color: #26475F } /*********Thème 6 **********/ .theme_6 { } .theme_6 .panel-front, .theme_6 .panel-selection { padding: 10px; background: #26475f; border: none } .theme_6 .panel-front > .x-panel-header span, .theme_6 h2 { color: #fff; } .theme_6 .panel-heading h2 { } /*.theme_6 ul li, .theme_6 ul li a , .theme_6 a , .theme_6 h4, .theme_6 h3, .theme_6 h2, .theme_6 h1, .theme_6 p, .theme_6 span {color: #fff}*/ .theme_6 ul li, .theme_6 ul li a, .theme_6 a, .theme_6 p, .theme_6 span { color: #fff } p { color: #000 } /*************/ /*********Thème 7 **********/ .theme_7 { } .theme_7 .panel-front, .theme_7 .panel-selection { padding: 10px; background: #96c11f; border: none } .theme_7 .panel-front > .x-panel-header span, .theme_7 h2 { color: #fff; } .theme_7 .panel-heading h2:before { /*content: '\e812'; position: relative; width: 100%; color: #fff; font-size: 36px; font-family: 'ermes-font-update'; font-weight: normal; padding:0 10px 0 0*/ } .theme_7 ul li, .theme_7 ul li a, .theme_7 a, .theme_7 p, .theme_7 span { color: #fff } /*********Thème 8 **********/ .theme_8 { } .theme_8 .panel-front, .theme_8 .panel-selection { padding: 10px; background: #bd1a8d; border: none } .theme_8 .panel-front > .x-panel-header span, .theme_8 h2 { color: #fff; } /*.theme_3 ul li, .theme_3 ul li a , .theme_3 a , .theme_3 h4, .theme_3 h3, .theme_3 h2, .theme_3 h1, .theme_3 p, .theme_3 span {color: #fff}*/ .theme_8 ul li, .theme_8 ul li a, .theme_8 a, .theme_8 p, .theme_8 span { color: #fff } /*****************/ /*********Thème 9 **********/ .theme_9 { } .theme_9 .panel-front, .theme_9 .panel-selection { padding: 10px; background: #979494; border: none } /*#portal .theme_9 .panel-body { padding: 10px }*/ .theme_9 .panel-front > .x-panel-header span, .theme_9 h2 { color: #fff; font-size: 26px; padding: 0 0 10px 0 } .theme_9 h3 { text-align: left; color: #bd1a8d; font-size: 18px; font-weight: normal } /***********/ ul.wlc { display: inline-block } ul.wlc li { float: left; display: inline-block; width: 25%; margin: 0 0 13px 0 } ul.wlc li a { padding: 6px 0px 6px 16px; color: #bd1a8d; font-size: 15px; background: transparent url('images/puce.png') no-repeat left 12px } a.link_rose { color: #BD1A8D } a.link_blue { color: #26475F } .link_rose a { color: #BD1A8D } .link_blue a { color: #26475F } .link_rose { color: #BD1A8D } .link_blue { color: #26475F } .no-style { color: unset } h1 { color: #26475F; font-size: 40px } h2 { color: #26475F; font-size: 26px } h3 { color: #26475F; font-size: 21px } .titre_h1_rose, p.titre_h1_rose, h1.titre_h1_rose { color: #BD1A8D; font-size: 40px } .titre_h1_blue, p.titre_h1_blue, h1.titre_h1_blue { color: #26475F; font-size: 40px } .titre_h1_green, p.titre_h1_green, h1.titre_h1_green { color: #96C11F; font-size: 40px } .titre_h2_rose, p.titre_h2_rose, h2.titre_h2_rose { color: #BD1A8D; font-size: 26px } .titre_h2_blue, p.titre_h2_blue, h2.titre_h2_blue { color: #26475F; font-size: 26px } .titre_h2_green, p.titre_h2_green, h2.titre_h2_green { color: #96C11F; font-size: 26px } .titre_h3_rose, p.titre_h3_rose, h3.titre_h3_rose { color: #BD1A8D; font-size: 21px } .titre_h3_blue, p.titre_h3_blue, h3.titre_h3_blue { color: #26475F; font-size: 21px } .titre_h3_green, p.titre_h3_green, h3.titre_h3_green { color: #96C11F; font-size: 21px } /*****************Footer*****************/ .badge { color: #BC1B8B; } #criteres_recherche p, #description_resultats, .taille_page, .btn-group.pageSize-container button, .btn-group.pageSize-container.open .dropdown-menu > li > a { color: #BC1B8B; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { border-bottom: 5px solid #BC1B8B; color: #BC1B8B; } h3.category_header { background: #26475F } h2.category_header { color: #26475F } .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { background: #26475F } .myaccount-activity .myaccount-welcome .user-name a, .myaccount-profile .account-label { color: #BC1B8B } .search-icon-container.mobile, .search-icon-container.mobile > .btn-group, .search-icon-container.mobile .btn, .search-icon-container.mobile .btn.precedent, .search-icon-container.mobile .btn.suivant { background-color: #BC1B89; } /*****************footer*****************/ footer { background: #26475f; color: #fff; } footer .container { padding: 20px 30px } footer a, footer a:hover, footer a:focus, footer [class^="icon-"], footer [class*=" icon-"], footer .container ul li, .label-ermes { color: #fff } .fluid_col { float: left; width: 25% } .fluid_col.titles h2 { margin: 0 0 20px 30px } .fluid_col ul { margin: 10px 0 } /*******Rich footer*******/ .footer_1 { width: 100%; text-align: center; float: left } .footer_1 ul { display: inline-block; margin: 0 0 20px 0 } .footer_1 ul li { display: inline; font-size: 12px; } .footer_1 ul li a { font-size: 12px; margin: 0 8px } .footer_2 { float: left; width: 100% } .footer_2 .menu { float: left } .footer_2 .menu h2 { color: #fff; font-size: 18px } .footer_2 .adress { float: left; font-size: 12px; background: transparent url('images/logo_footer.png') no-repeat center top; padding: 0 } .footer_2 .adress span { padding: 100px 0 0 75px; display: block } .footer_2 ul li a { font-size: 12px } #mobile-actions { box-shadow: none } div.product-infos { display: none; } /******************Responsive devices*******************/ /* Full HD · width: 1920px */ @media (min-width: 1920px) { } /* Kindle landscape · width: 1024px */ /* iPad landscape · width: 1024px */ @media (min-width: 1024px) { } @media (max-width: 1024px) { .navbar-header-after a { font-size: 20px } .navbar-brand { width: 641px; height: 128px; background-size: 100%; } } @media (min-width: 992px) { } @media (max-width: 800px) { .navbar-brand { width: 418px; height: 128px; background: #fff url('images/logo.jpg') no-repeat left center; background-size: 100%; } .navbar-header-after a { font-size: 16px; background: none; } .navbar-brand-after { background: #fff url('images/logo_side.jpg') no-repeat right center; height: 112px; width: 88px; background-size: 100%; } .navbar-header-before { width: 61px; height: 187px; float: left; margin: 0 16px 0 0; background-size: 100%; } } @media (max-width: 768px) { } /* iPad portrait width: 768px */ @media (min-width: 768px) { header { border-top: 10px solid #b5b2b2; margin-bottom: 0; padding: 0; } #search-panel .panel-body { padding-left: 0px; width: 55%; position: absolute; left: 123px; top: -67px; z-index: 10 } .navbar > .container .navbar-brand { margin-left: 0; } /********/ .btn-account { background: #b5b2b2; border: none; color: #fff; font-size: 18px; } .btn-account:hover, .btn-account:focus, .btn-account:active, .btn-account.active, .open .dropdown-toggle.btn-account { background: #b5b2b2; border: none; color: #fff } /***************/ #ermes_main_menu { width: 100%; display: table; /*background: #fff;*/ background: #26475f; padding: 0; margin: 36px 0 0 0 } #ermes_main_menu li.LEVEL1 { display: table-cell; width: 20%; float: none; background: transparent; border: none; font-size: 14px; } #ermes_main_menu li.LEVEL1 > a { display: block; text-align: center; padding: 14px 1px; color: #fff; margin-left: 1px; background: #26475f; } #ermes_main_menu li.LEVEL1:first-child > a { border-left: none; margin-left: 0 } #ermes_main_menu li.LEVEL1 a:hover { /*font-size: 16px; line-height: 19px;*/ background-color: #96c11f; color: #26475f; /*transition: line-height 0.5s,font-size 0.5s,background-color 0.5s;*/ transition: background-color 0.5s; } #ermes_main_menu li.LEVEL1 > a { padding-left: 10px; padding-right: 10px; } #ermes_main_menu li.LEVEL1 { width: auto; float: left; display: block; } #ermes_main_menu li.LEVEL1:first-child { margin-left: 2%; } /**********************Depot infodoc webframe**********************/ .globalFrame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .globalFrame { position: relative; padding-bottom: 100%; padding-top: 30px; height: 0; overflow: auto; } /**********************End CSS for Depot infodoc webframe**********************/ ul#ermes_main_menu > li:nth-child(5) { border-left: solid 1px white; float: right; } } @media (max-width: 767px) { } /* iPhone 6 Plump landscape · width: 736px */ @media (max-width: 736px) { } /* iPhone 6 Plump landscape · width: 667px */ @media (max-width: 667px) { .navbar-header-before { width: 100%; height: 82px; float: left; margin: 0 16px 0 0; background-size: 100%; background: #fff url('images/meeddm.png') no-repeat center bottom; } .navbar-brand { display: none } .navbar-header-after a { background: #fff url('images/local.png') no-repeat left center; font-size: 28px; color: #bd1a8d; padding: 6px 0 6px 32px; display: block; margin: 35px 0 0 0; } .navbar-header-after { float: left} .navbar-brand-after { background: #fff url('images/logo_side.jpg') no-repeat right top; height: 84px; width: 88px; background-size: 100%; } } /* Kindle portrait · width: 600px */ /* Android (Nexus 4) landscape · width: 600px */ @media (max-width: 600px) { } /* iPhone 5 Retina regardless of IOS version */ /* iPhone 5 landscape · width: 568px */ @media (max-width: 568px) { } /*iPhone 3+4 landscape · width: 480px*/ @media (max-width: 480px) { } /*iPhone 6 Plump portrait · width: 414px*/ @media (max-width: 414px) { .navbar-header-after a {font-size: 20px;} } /*Android (Nexus 4) portrait · width: 384px*/ @media (max-width: 384px) { } /*iPhone 6 portrait · width: 375px*/ @media (max-width: 375px) { } /*Crappy Android landscape · width: 320px*/ /*iPhone 5 portrait · width: 320px*/ /*iPhone 3+4 portrait · width: 320px*/ @media (max-width: 320px) { .navbar-brand-after { background: #fff url('images/logo_side.jpg') no-repeat right center; height: 78px; width: 66px; background-size: 100%; } .navbar-header-after a { font-size: 18px; } } /*Crappy Android portrait · width: 240px*/ @media (max-width: 240px) { }