#section-banner { } #section-banner .content::before { display:block; background-image:url('/img/home/monitoring.jpg'); } #section-banner .text-block { position:relative; } #section-how { background:#2f2f2f url('/img/home/how.jpg') no-repeat center; background-size:cover; background-attachment:fixed; } #section-how .columns { font-weight:300; line-height:1.5em; padding:30px 0; } #section-how .column { position:relative; box-sizing:border-box; text-align:center; } #section-how .column::before { content:''; display:block; border-radius:50%; background-color:#fff; background-size:contain; background-repeat:no-repeat; background-position:center; } #section-how .column.upload::before { background-image:url('/img/home/how-upload.png'); } #section-how .column.predict::before { background-image:url('/img/home/how-predict.png'); } #section-how .column.intervene::before { background-image:url('/img/home/how-intervene.png'); } #section-how .column.next { font-size:0; } #section-how .column.next::before { background-image:url('/img/home/how-arrow.png'); background-color:transparent; } #section-how .buttons { text-align:center; } #section-effective { background:#fff; } #section-effective .text-block { position:relative; } #section-effective .content::before { display:block; background-image:url('/img/home/effective.png'); background-position:0 50%; } #section-news { background:#dfdfdf; } #section-news ul { display:block; position:relative; } #section-news li { display:block; box-sizing:border-box; } #_section-news a { display:block; box-sizing:border-box; color:#707070; text-align:left; /*background:#fff url('/img/home/newspaper.svg') no-repeat 32px 50%; background-size:64px;*/ transition:color 600ms ease, background-color 600ms ease; } #_section-news a:hover { background-color:#211546; /*-image:url('/img/home/newspaper-hover.svg');*/ color:#fff; transition:color 300ms ease, background-color 300ms ease; } #section-control { background:#fff; } #section-control .content { max-width:520px; } /******************************/ /* SMALL SCREENS */ /******************************/ /* Define mobile styles */ @media only screen { section .content .text-block { text-align:center; margin:0 auto; max-width:480px; } section .content .buttons { margin-top:24px; } #section-banner { } #section-banner .content::before { background-position:50%; } #section-banner .text-block { } #section-banner h1 { margin-bottom:30px; } #section-how .columns { width:200px; margin:0 auto; } #section-how .columns::after { content:none; } #section-how .column { display:block; padding:0; margin-bottom:48px; width:auto; } #section-how .column:last-child { margin-bottom:0; } #section-how .column::before { display:block; width:140px; height:140px; position:relative; margin:0 auto 12px; } #section-how .column.next { display:none; } #section-how ol { list-style-type:decimal; } #section-how .buttons { margin:8px 0 24px; } #section-effective { } #section-effective .text-block { } #section-effective .content::before { background-position:50%; } #section-news h1 { margin-bottom:32px; } #section-news ul { } #section-news li { display:block; margin:16px; background:#fff; } #section-news .buttons { text-align:left; margin:16px 0 0; } #section-news .date { text-align:left; text-transform:uppercase; padding:16px 16px 0; } #section-news .date * { display:inline; font-size:0.65rem; color:#999; } #section-news .details { padding:8px 16px 16px; text-align:left; } #section-news .details h3 { margin-top:0; font-size:1rem; font-weight:400; line-height:1.5em; } #section-news .details p { font-size:0.8rem; } } @media only screen and (orientation:portrait) { } @media only screen and (orientation:landscape) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (max-width:40em) { } /******************************/ /* MEDIUM SCREENS */ /******************************/ /* min-width 641px, medium screens */ @media only screen and (min-width:40.063em) { #section-news li { padding:32px 0; } #section-news .buttons { display:block; } #section-news .date { box-sizing:border-box; padding:0 32px; float:left; width:120px; text-align:center; text-transform:uppercase; } #section-news .date * { display:block; } #section-news .day { margin-bottom:4px; font-size:2rem; font-weight:600; color:#ccc; } #section-news .month { font-size:1.2rem; color:#333; } #section-news .year { font-size:1rem; color:#333; } #section-news .details { margin:0 0 0 120px; padding:0 32px; border-left:dashed 1px #ccc; text-align:left; } #section-news .details h3 { font-size:1.5rem; line-height:1.2em; } #section-news .details p { font-size:1rem; } } @media only screen and (min-width:40.063em) and (orientation:portrait) { } @media only screen and (min-width:40.063em) and (orientation:landscape) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width:40.063em) and (max-width:64em) { } /******************************/ /* LARGE SCREENS */ /******************************/ /* min-width 1025px, large screens */ @media only screen and (min-width:64.063em) { section .content::before { height:auto; } section .content .text-block { text-align:inherit; max-width:640px; margin:0; padding:0; } #section-banner { } #section-banner .content::before { display:block; left:40%; width:60%; background-image:url('/img/home/monitoring.jpg'); background-position:0 50%; } #section-banner .text-block { position:relative; width:45%; } #section-banner h1 { margin-bottom:60px; } #section-how .columns { margin-top:-420px; } #section-how .column.next { display:inline-block; } #section-how .buttons { text-align:center; margin:380px 0 0; } #section-how { } #section-how .columns { margin-top:-420px; width:auto; } #section-how .columns::after { content:''; } #section-how .column { display:inline-block; width:220px; text-align:center; padding-top:220px; margin-bottom:0; } #section-how .column::before { position:absolute; top:0; width:200px; margin-left:10px; height:200px; } #section-how .column.next { display:inline-block; width:102px; } #section-how .column.next::before { width:102px; } #section-how .number { display:none; } #section-effective { } #section-effective .text-block { left:40%; width:60%; } #section-effective .content::before { margin-left:-25px; width:40%; } #section-news ul { text-align:justify; } #section-news ul::after { content:''; display:inline-block; width:90%; } #section-news li { position:relative; display:inline-block; box-sizing:border-box; width:31%; vertical-align:top; margin:0; padding:16px 32px; height:360px; border-radius:4px; box-shadow:3px 3px 16px rgba(0,0,0,0.15); } #section-news .buttons { text-align:center; position:absolute; bottom:24px; left:32px; right:32px; height:48px; } #section-news .button { font-size:0.8rem; } #section-news .date { display:block; float:none; text-align:left; padding:0; margin:0; } #section-news .date * { display:inline; font-size:0.65rem; font-weight:400; color:#999; } #section-news .details { margin:0; padding:8px 0; text-align:left; border:none; } #section-news .details h3 { margin-top:0; font-size:1.4rem; font-weight:400; line-height:1.2em; } #section-news .details p { font-size:0.8rem; } } @media only screen and (min-width:64.063em) and (orientation:portrait) { } @media only screen and (min-width:64.063em) and (orientation:landscape) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ @media only screen and (min-width:64.063em) and (max-width:90em) { } /******************************/ /* XLARGE SCREENS */ /******************************/ /* min-width 1441px, xlarge screens */ @media only screen and (min-width:90.063em) { #section-news ul { } #section-news ul::after { } #section-news li { } #_section-news a { height:150px; padding:16px 16px 16px 120px; background-position:32px 50%; } #_section-news a:hover { } } @media only screen and (min-width:90.063em) and (orientation:portrait) { } @media only screen and (min-width:90.063em) and (orientation:landscape) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ @media only screen and (min-width:90.063em) and (max-width:120em) { } /******************************/ /* XXLARGE SCREENS */ /******************************/ /* min-width 1921px, xxlarge screens */ @media only screen and (min-width:120.063em) { }