/*
Theme Name: dadocom
Theme URI: https://www.foxcomputers.ch
Author: Fox Computers
Author URI: https://www.foxcomputers.ch
Version: 2024
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: dadocom

dadocom WordPress Theme 2011-2025
dadocom is distributed under the terms of the GNU GPL
*/

@font-face {
    font-family: 'Inter-Light';
    src: url('fonts/Inter-Light.woff2') format('woff2'),
        url('fonts/Inter-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Inter-Regular';
    src: url('fonts/Inter-Regular.woff2') format('woff2'),
        url('fonts/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Inter-Medium';
    src: url('fonts/Inter-Medium.woff2') format('woff2'),
        url('fonts/Inter-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Inter-SemiBold';
    src: url('fonts/Inter-SemiBold.woff2') format('woff2'),
        url('fonts/Inter-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Inter-Bold';
    src: url('fonts/Inter-Bold.woff2') format('woff2'),
        url('fonts/Inter-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    outline:none;
    box-sizing: border-box;
    -webkit-appearance:none;
    appearance:none;
    border-radius:0,
    -webkit-tap-highlight-color:transparent;
}
html {
    scroll-behavior:smooth
}
body {
    line-height:1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a {
    text-decoration-skip-ink:auto
}
a[href^="tel"] {
    color:inherit;
    text-decoration:none
}
ol,ul {
    list-style:none
}
blockquote,q {
    quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none
}
q {
    display:inline;
    font-style:italic
}
q:before {
    content:'"';
    font-style:normal
}
q:after {
    content:'"';
    font-style:normal
}
table {
    border-collapse:collapse;
    border-spacing:0
}
th,td {
    padding:2px
}
sup,sub {
    font-size:80%
}
sup {
    vertical-align:super
}
sub {
    vertical-align:sub
}
img {
    max-width:100%;
    height: auto;
}
em {
    font-style: italic;
}
strong {
    font-family: 'Inter-Bold';
}
.wp-caption, .wp-caption-text, .gallery-caption {
    display: none;
}
.alignright {
    float:right;
    margin:0 0 32px 32px;
}
.alignleft {
    float:left;
    margin:0 32px 32px 0;
}
.aligncenter {
    display: block;
    margin:0 auto 32px auto;
}

#wrapper {
    overflow: hidden;
}

#header {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background:#fff;
    z-index: 999;
}
#header #header-inner {
    margin:0 auto;
    padding:24px 32px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    transition:all .4s ease;
}
.home #header #header-inner {
    justify-content:flex-end;
    padding:51px 32px;
}
.home #header #header-inner #logo {
    display: none;
}
#header #logo img {
    display: block;
    width:283px;
    height:78px;
}

#menu ul {
    font-size:0;
    text-align: right;
}
#menu ul li {
    display: inline-block;
}
#menu ul li:before {
    display: inline-block;
    content:"|";
    font-family: 'Inter-Regular';
    font-size:18px;
    line-height:24px;
    color:#767676;
    margin:0 8px;
}
#menu ul li:nth-child(1):before {
    display: none;
}
#menu ul li a {
    font-family: 'Inter-Regular';
    font-size:18px;
    line-height:24px;
    color:#767676;
    text-decoration: none;
    display: inline-block;
}
#menu ul li a:hover, #menu ul li a.active {
    color:#191919;
}

#intro {
    height:100dvh;
    display: flex;
    align-items: flex-end;
}
#intro #logo {
    position: fixed;
    top:172px;
    left:50%;
    width:1440px;
    transform:translateX(-50%);
    opacity:0;
    transition:opacity 1.2s ease;
    z-index: 9999;
}
.loaded #intro #logo {
    transition:opacity 1.2 ease;
    opacity:1;
}
#intro #logo img {
    display: block;
    width:1440px;
    height:397px;
    margin:0 auto;
}

#intro #intro-cta {
    margin:0 auto;
    padding-bottom:148px;
    width:1440px;
    text-align: center;
}
#intro #intro-cta a {
    display: inline-block;
    font-family: 'Inter-Regular';
    font-size:24px;
    line-height:32px;
    color:#191919;
    text-decoration: none;
    padding:0;
    border-bottom:2px solid #191919;
    transition:all .4s ease;
}
#intro #intro-cta a:hover {
    padding:0 8px;
    transition:all .4s ease;
}
#intro #arrow-down {
    position: absolute;
    bottom:30px;
    left:50%;
    transform: translateX(-50%);
    z-index:2;
}

.sb-item.white {
    background:#fff;
}
.sb-item.gray {
    background:#F1F1F1;
}
.sb-item.bottom-gap-off > * {
    padding-bottom:0 !important;
}

.sb-item {
    opacity:0;
    transform: translateY(120px);
    transition:all .8s ease;
}
.slidein.sb-item {
    opacity:1;
    transform: translateY(0);
    transition:all .8s ease;
}

.sbi-tfull {
    margin:0 auto;
    padding:164px 32px 132px 32px; 
    max-width:1502px;
}
.sbi-tfull .sbi-tfull-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin:0 -24px;
}
.sbi-tfull .sbi-tfull-inner .sbi-title {
    width:calc(42% - 48px);
    margin:0 24px;
}
.sbi-tfull .sbi-tfull-inner .sbi-text {
    width:calc(58% - 48px);
    margin:0 24px;
    padding-top:36px;
}
.sbi-tfull .sbi-tfull-inner .sbi-text.no-lead {
    padding-top:48px;
}

.sbi-ifull {
    margin:0 auto;
    padding:164px 32px; 
    max-width:1502px;
}

.sbi-iltr {
    margin:0 auto;
    padding:164px 32px; 
    max-width:1502px;
}
.sbi-iltr .sbi-iltr-items {
    border-top:1px solid #ccc;
}
.sbi-iltr .sbi-iltr-items .sbi-iltr-item {
    border-bottom:1px solid #ccc;
}
.sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin:0 -24px;
}
.sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner .sbi-iltr-item-icon {
    width:calc(42% - 48px);
    margin:0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:64px 0;
}
.sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner .sbi-iltr-item-img {
    width:calc(42% - 48px);
    margin:0 24px;
    padding:64px 0;
}
.sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner .sbi-iltr-item-img img {
    display: block;
}
.sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner .sbi-iltr-item-text {
    width:calc(58% - 48px);
    margin:0 24px;
    padding:64px 0 32px 0;
}

.sbi-ref {
    margin:0 auto;
    padding:164px 32px 140px 32px; 
    max-width:1502px;
}
.sbi-ref .sbi-ref-items {
    display: flex;
    flex-wrap: wrap;
    margin:0 -12px;
    padding-top:12px;
}
.sbi-ref .sbi-ref-items .sbi-ref-item {
    width:calc(25% - 24px);
    margin:0 12px 24px 12px;
    border:1px solid #ccc;
}
.sbi-ref .sbi-ref-items .sbi-ref-item img {
    display: block;
    margin:0 auto;
    width:300px;
    height:200px;
}
.sbi-ref-subtitle {
    padding-top:16px;
}
.sbi-ref-name-items {
    column-count: 3;
    column-gap: 24px;
    padding-top:16px;
}
.sbi-ref-name-items .sbi-ref-name-item {
    margin-bottom:4px;
}
.sbi-ref-name-items .sbi-ref-name-item a {
    font-family: 'Inter-Regular';
    font-size:24px;
    line-height:32px;
    color:#191919;
    text-decoration: none;
}
.sbi-ref-name-items .sbi-ref-name-item a:hover {
    color:#CC0000;
}
.sbi-ref-name-items .sbi-ref-name-item span {
    font-family: 'Inter-Regular';
    font-size:24px;
    line-height:32px;
    color:#191919;
}

.sbi-contact {
    margin:0 auto;
    padding:164px 32px; 
    max-width:1502px;
}
.sbi-contact .sbi-contact-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin:0 -24px;
}
.sbi-contact .sbi-contact-inner .sbi-contact-text {
    width:calc(42% - 48px);
    margin:0 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sbi-contact .sbi-contact-inner .sbi-contact-text .sbi-contact-subtext {
    padding-top:48px;
}
.sbi-contact .sbi-contact-inner .sbi-contact-form {
    width:calc(58% - 48px);
    margin:0 24px;
}

.error404 #content {
    min-height: calc(100vh - 208px);
    display: flex;
    justify-content: center;
    align-items: center;
}
#post-e404 {
    padding:0 32px;
    max-width:960px;
    text-align: center;
}

#content h1, #content h2 {
    font-family: 'Inter-Bold';
    font-size:76px;
    line-height:96px;
    color:#191919;
    margin-bottom:32px;
}
#content h3 {
    font-family: 'Inter-SemiBold';
    font-size:28px;
    line-height:36px;
    color:#CC0000;
    margin-bottom:8px;
}
#content .sbi-contact-text h3 {
    font-size:24px;
    line-height:32px;
    color:#191919;
    margin-bottom:0;
}
#content .sbi-contact-form h3 {
    font-size:48px;
    line-height:60px;
    color:#191919;
    margin-bottom:28px;
}
#content p {
    font-family: 'Inter-Regular';
    font-size:24px;
    line-height:32px;
    color:#191919;
    hyphens: auto;
    margin-bottom:32px;
}
#content .sbi-lead p {
    font-family: 'Inter-SemiBold';
    font-size:40px;
    line-height:48px;
    margin-bottom:48px;
}
#content p a, #content ul li a, #content ol li a {
    color:#191919;
}
#content p a:hover, #content ul li a:hover, #content ol li a:hover {
    color:#CC0000;
    text-decoration: none;
}
#content ul, #content ol {
    margin-bottom:32px;
    padding-left:24px;
}
#content ul li {
    font-family: 'Inter-Regular';
    font-size:24px;
    line-height:32px;
    color:#191919;
    list-style: disc;
    hyphens: auto;
}
#content ol li {
    font-family: 'Inter-Regular';
    font-size:24px;
    line-height:32px;
    color:#191919;
    list-style: decimal;
    hyphens: auto;
}

.form-element {
    margin-bottom:16px;
}
.form-element-submit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom:16px;
}
.wpcf7-text {
    width:100%;
    border-bottom:1px solid #191919;
    padding:12px 0;
    font-family: 'Inter-Regular';
    font-size:24px;
    line-height:32px;
    color:#191919;
}
.wpcf7-textarea {
    width:100%;
    min-width:100%;
    max-width:100%;
    border-bottom:1px solid #191919;
    padding:12px 0;
    font-family: 'Inter-Regular';
    font-size:24px;
    line-height:32px;
    color:#191919;
}
.wpcf7-spinner {
    order:1;
}
.wpcf7-submit {
    border:2px solid #191919;
    font-family: 'Inter-SemiBold';
    font-size:24px;
    line-height:32px;
    color:#191919;
    background:#fff;
    padding:8px 32px;
    cursor: pointer;
    order:2;
    transition:all .4s ease;
}
.wpcf7-submit:hover {
    color:#fff;
    background:#191919;
    transition:all .4s ease;
}
.wpcf7-not-valid-tip {
    display: block;
    padding-top:4px;
    font-family: 'Inter-SemiBold';
    font-size:12px !important;
    text-transform: uppercase;
    color:#dc3232;
}
.wpcf7-not-valid {
    border-bottom:1px solid #dc3232 !important;
}
.wpcf7 form .wpcf7-response-output {
	margin: 2em 0 0 0 !important;
	padding:16px 24px !important;
    font-family: 'Inter-SemiBold';
    font-size:24px;
    line-height:32px;
    text-align: center;
}
.wpcf7 form.sent .wpcf7-response-output {
    border: 2px solid #46b450 !important;
    color:#46b450 !important;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border: 2px solid #dc3232 !important;
    color:#dc3232 !important;
}

#footer {
    background:#333333;
    padding:0 32px;
}
#footer #footer-inner {
    margin:0 auto;
    padding:64px 0;
    max-width:1320px;
    background:url(images/footer-logo.svg) no-repeat center center;
    background-size:100% auto;
}
#footer #footer-inner #footer-claim p {
    font-family: 'Inter-SemiBold';
    font-size:24px;
    line-height:32px;
    color:#CCCCCC;
    text-align: center;
}
#footer #footer-inner #footer-menu {
    padding-top:24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#footer #footer-inner #footer-menu #copyright span {
    font-family: 'Inter-Light';
    font-size:18px;
    line-height:24px;
    color:#CCCCCC;
}
#footer #footer-inner #footer-menu #fmenu ul {
    font-size:0;
}
#footer #footer-inner #footer-menu #fmenu ul li {
    display: inline-block;
}
#footer #footer-inner #footer-menu #fmenu ul li:before {
    display: inline-block;
    content:"|";
    font-family: 'Inter-Light';
    font-size:18px;
    line-height:24px;
    color:#cccccc;
    margin:0 8px;
}
#footer #footer-inner #footer-menu #fmenu ul li a {
    font-family: 'Inter-Light';
    font-size:18px;
    line-height:24px;
    color:#cccccc;
    text-decoration:none;
}
#footer #footer-inner #footer-menu #fmenu ul li a:hover {
    text-decoration:underline;
}

#menu-trigger {
    display: none;
    position: fixed;
    top:20px;
    right:32px;
    width:48px;
    height:33px;
    cursor: pointer;
    z-index:999999;
}
#menu-trigger span {
    width:100%;
    height:3px;
    background:#191919;
    position: absolute;
    left:0;
    transition:all .8s ease;
}
#menu-trigger.active span {
    background:#fff;
    transition:all .8s ease;
}
#menu-trigger span:nth-child(1) {
    top:0;
    transition:all .8s ease;
}
#menu-trigger span:nth-child(2) {
    top:15px;
    transition:all .8s ease;
}
#menu-trigger span:nth-child(3) {
    top:30px;
    transition:all .8s ease;
}
#menu-trigger.active span:nth-child(1) {
    top:18px;
    transform: rotate(45deg);
    transition:all .8s ease;
}
#menu-trigger.active span:nth-child(2) {
    opacity:0;
    transition:all .8s ease;
}
#menu-trigger.active span:nth-child(3) {
    top:18px;
    transform: rotate(-45deg);
    transition:all .8s ease;
}

#mobile-menu {
    display: none;
    position: fixed;
    top:0;
    right:0;
    width:500px;
    border-bottom-left-radius:0;
    background:#191919;
    z-index:99999;
    transform: translate(150%,-150%);
    transition:all .8s ease;
}
#mobile-menu.mopen {
    border-bottom-left-radius:250px;
    transform: translate(0,0);
    transition:all .8s ease;
}
#mobile-menu #mobile-menu-inner {
    padding:72px 32px 116px 32px;
}
#mobile-menu #mmenu ul li {
    margin-bottom:10px;
}
#mobile-menu #mmenu ul li a {
    font-family: 'Inter-Regular';
    font-size:32px;
    line-height:40px;
    color:#fff;
    text-decoration: none;
    display: inline-block;
}

@media only screen and (max-width:1560px) {    
    #intro #logo {
        width:100%;
    }
    #intro #logo img {
        width:980px;
        height:258px;
    }
}
@media only screen and (max-width:1280px) {    
    #content h1, #content h2 {
        font-size:56px;
        line-height:72px;
        margin-bottom:32px;
    }
    .sbi-tfull .sbi-tfull-inner .sbi-text {
        padding-top:16px;
    }
    .sbi-tfull .sbi-tfull-inner .sbi-text.no-lead {
        padding-top:28px;
    }
    .sbi-ref-name-items {
        column-count: 2;
    }
}
@media only screen and (max-width:1180px) {    
    #intro #logo img {
        width:700px;
        height:184px;
    }
    .sbi-ref .sbi-ref-items .sbi-ref-item {
        width: calc(33.333% - 24px);
    }
}
@media only screen and (max-width:1080px) {
    #header #header-inner {
        padding: 12px 32px;
    }
    #header #logo img {
        width: 210px;
        height: 58px;
    }
    .home #header #header-inner {
        padding:30px 32px;
    }
    #intro #intro-cta {
        padding-bottom: 72px;
    }
    #intro #intro-cta a {
        font-size: 18px;
        line-height: 26px;
    }
    #intro #arrow-down {
        bottom:24px;
    }
    #intro #arrow-down img {
        width:45px;
        height:24px;
    }
    .sbi-ifull, .sbi-iltr, .sbi-contact {
        padding:76px 32px; 
    }
    .sbi-tfull {
        padding:76px 32px 44px 32px; 
    }
    .sbi-ref {
        padding:76px 32px 52px 32px; 
    }
    .sbi-tfull .sbi-tfull-inner .sbi-title, .sbi-tfull .sbi-tfull-inner .sbi-text {
        width:calc(100% - 48px);
    }
    .sbi-tfull .sbi-tfull-inner .sbi-text, .sbi-tfull .sbi-tfull-inner .sbi-text.no-lead {
        padding-top: 0;
    }
    .sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner .sbi-iltr-item-icon, .sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner .sbi-iltr-item-img {
        width:calc(100% - 48px);
        padding:32px 0 0 0;
    }
    .sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner .sbi-iltr-item-icon {
        display: block;
    }
    .sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner .sbi-iltr-item-icon img {
        width:96px;
        height:96px;
    }
    .sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner .sbi-iltr-item-text {
        width:calc(100% - 48px);
        padding:16px 0 32px 0;
    }
    .sbi-contact .sbi-contact-inner .sbi-contact-text {
        width:calc(100% - 48px);
        display: block;
    }
    .sbi-contact .sbi-contact-inner .sbi-contact-text .sbi-contact-subtext {
        padding-top:24px;
        padding-bottom:24px;
    }
    .sbi-contact .sbi-contact-inner .sbi-contact-form {
        width:calc(100% - 48px);
    }
}
@media only screen and (max-width:1023px) {
    .alignright, .alignleft {
        float:none;
        display: block;
        margin:0 auto 32px auto;
    }
    .home #header #header-inner {
        padding: 41px 32px;
    } 
    #menu-trigger {
        display: block;
    }
    #mobile-menu {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #menu {
        display: none;
    }
    #content h1, #content h2 {
        font-size: 40px;
        line-height: 48px;
        margin-bottom: 24px;
    }
    #content h3 {
        font-size:20px;
        line-height:28px;
    }
    #content .sbi-contact-text h3 {
        font-size:18px;
        line-height:26px;
    }
    #content .sbi-contact-form h3 {
        font-size:28px;
        line-height:36px;
        margin-bottom:16px;
    }
    #content p {
        font-size:18px;
        line-height:26px;
        margin-bottom:26px;
    }
    #content .sbi-lead p {
        font-size:24px;
        line-height:32px;
        margin-bottom:32px;
    }
    #content ul, #content ol {
        margin-bottom:26px;
    }
    #content ul li, #content ol li, .sbi-ref-name-items .sbi-ref-name-item a, .sbi-ref-name-items .sbi-ref-name-item span, #footer #footer-inner #footer-claim p {
        font-size:18px;
        line-height:26px;
    }
    .wpcf7-text, .wpcf7-textarea {
        padding:8px 0;
        font-size:18px;
        line-height:26px;
    }
    .wpcf7-submit {
        font-size:18px;
        line-height:26px;
        padding:6px 24px;
        margin-top:8px;
    }
    .wpcf7 form .wpcf7-response-output {
        font-size:18px;
        line-height:26px;
    }
    .form-element {
        margin-bottom: 8px;
    }
    #footer #footer-inner {
        padding: 48px 0;
    }
    #footer #footer-inner #footer-menu {
        flex-direction: column;
        justify-content: flex-start;
    }
    #footer #footer-inner #footer-menu #copyright {
        display: block;
        order:2;
    }
    #footer #footer-inner #footer-menu #fmenu {
        order:1;
        margin-bottom:4px;
    }
    #footer #footer-inner #footer-menu #fmenu ul li:nth-child(1):before {
        display: none;
    }
    #footer #footer-inner #footer-menu #copyright span, #footer #footer-inner #footer-menu #fmenu ul li:before, #footer #footer-inner #footer-menu #fmenu ul li a {
        font-size:16px;
        line-height:22px;
    }
}
@media only screen and (max-width:810px) {    
    .sbi-ref-name-items {
        column-count: 1;
    }
    .sbi-ref .sbi-ref-items .sbi-ref-item {
        width: calc(50% - 24px);
    }
}
@media only screen and (max-width:767px) {    
    #header #header-inner {
        padding: 12px 24px;
    }
    .home #header #header-inner {
        padding:36px 24px;
    }
    #header #logo img {
        width: 174px;
        height: 48px;
    }
    #intro #logo img {
        width:502px;
        height:132px;
    }
    #menu-trigger {
        top:24px;
        right:24px;
        width:36px;
        height:24px;
    }
    #menu-trigger span {
        height:2px;
    }
    #menu-trigger span:nth-child(2) {
        top:11px;
    }
    #menu-trigger span:nth-child(3) {
        top:22px;
    }
    #menu-trigger.active span:nth-child(1), #menu-trigger.active span:nth-child(3) {
        top:16px;
    }
    .sbi-ifull, .sbi-iltr, .sbi-contact {
        padding:76px 24px; 
    }
    .sbi-tfull {
        padding:76px 24px 44px 24px; 
    }
    .sbi-ref {
        padding:76px 24px 52px 24px; 
    }
    .sbi-iltr .sbi-iltr-items .sbi-iltr-item .sbi-iltr-item-inner .sbi-iltr-item-icon img {
        width: 72px;
        height: 72px;
  }
}
@media only screen and (max-width:568px) {    
    #mobile-menu {
        width:100%;
        height:100%;
        max-height:100%;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    #mobile-menu::-webkit-scrollbar {
        display: none;
    }
    #mobile-menu.mopen {
        border-bottom-left-radius:0;
    }
    #mobile-menu #mobile-menu-inner {
        padding:72px 24px;
    }
    #mobile-menu #mmenu ul li {
        text-align: center;
    }
    #footer #footer-inner {
        padding: 24px 0;
    }
}
@media only screen and (max-width:567px) {    
    #intro #logo img {
        width:380px;
        height:100px;
    }
}
@media only screen and (max-width:480px) {    
    .sbi-ref .sbi-ref-items .sbi-ref-item {
        width: calc(100% - 24px);
    }
}
@media only screen and (max-width:423px) {    
    #intro #logo img {
        width:304px;
        height:80px;
    }
}