@charset "UTF-8"; /* Project: The Post Publishing Public Company Limited Version: 2.0 (iPostToday) Author: Samart Ya-Hyaman Department: Post Digital copyright: since 2009 The Post Publishing Public Company Limited modified by: radiz latest updated on: 20 May 2009 ......................................................................... */ /* RESET: ......................................................................... */ * {margin: 0; padding: 0; outline: none;} body { font-family: "Lucida Grande", Arial, Helvetica; font-size: 13px; color: rgb(102,102,102); } a {color: rgb(0 84 198);} a:hover {color: rgb(0 84 198); text-decoration: none;} img, fieldset {border: none;} p {line-height: 20px; margin-bottom: 18px;} em {color: rgb(153,153,153); font-style: normal;} strong {color: rgb(85,85,85);} ul {list-style: none; line-height: 18px;} ol {margin-left: 22px;} h2 { color: rgb(0 84 198); font-size:20px; font-weight: normal; padding: 5px 0 5px; text-transform: uppercase; border-bottom: 2px solid #415c9e; margin-bottom: 15px; } h2.underline { border-bottom: 2px solid #415c9e; padding-bottom: 5px; margin-bottom: 15px;} h3 {color: rgb(85,85,85); font-size: 13px;} h4 {color: rgb(85,85,85); font-size: 15px; font-weight: normal;} .noBorder { border: none !important;} /* DEFAULT STRUCTURE CONTROL: ......................................................................... */ #wrapper {margin: 18px auto; width: 950px;} #wrapper #headerWrapper {margin-bottom: 54px; width: 950px;} #wrapper #container {margin-bottom: 36px; width: 950px;} #container #mainNavigation { border-top: 1px solid rgb(207,207,207); float: left; width: 224px; } #container #toc { /*border-top: 1px solid rgb(207,207,207);*/ float: right; /*padding-top: 10px;*/ width: 708px; overflow: hidden; } #container .overline { border-top: 1px solid rgb(207,207,207); padding-top: 10px;} #wrapper #footerWrapper { border-top: 1px solid rgb(207,207,207); padding-top: 10px; width: 950px; clear: both; } /* DEFAULT CONTENTS CONTROL: ......................................................................... */ #wrapper .productContent h3 {color: rgb(85,85,85); font-size: 18px; font-weight: normal;} #wrapper .infoContent h3 {color: rgb(0 84 198); font-size: 13px;} #wrapper .noBold { font-weight: lighter!important;} #wrapper #toc ul, #wrapper #toc ol {margin-bottom: 18px;} #wrapper #toc ul.list { overflow: hidden; padding-left: 30px;} #wrapper #toc ul.list li { padding-bottom: 10px; list-style: outside;} #wrapper .marginRightNone {margin-right: 0 !important;} #wrapper .floatLeft {float: left; margin-right: 18px; margin-top: 5px;} #wrapper .boderTop {border-top: 1px solid rgb(207,207,207);} #wrapper .paddingBottom {padding-bottom: 18px;} p.thumbnail { float: left;} .latestNews p.readmore,.newsReleaseList p.readmore { float: right; margin-bottom: 5px;} /* =defined for #header ................................................................. */ #headerWrapper h1 { background: url(../images/thePost_logo.gif) no-repeat; border-top: 1px solid rgb(207,207,207); float: left; } #headerWrapper h1 a { display: block; height: 100px; text-decoration: none; width: 345px; } #headerWrapper h1 a span {visibility: hidden;} #headerWrapper p { border-top: 1px solid rgb(207,207,207); float: right; font-family: "Helvetica Neue", Arial; font-size: 17px; font-weight: bold; padding: 40px 0 0 18px; width: 569px; } /* =defined for #content ................................................................. */ #mainNavigation li {width: 224px; overflow: hidden; border-bottom: 1px solid rgb(207,207,207);} #mainNavigation li a { width: 214px; color: rgb(34,34,34); display: block; font-weight: bold; height: 13px; padding: 10px 5px; text-decoration: none; outline: none; _overflow: hidden; } #mainNavigation li.double{border: none;} #mainNavigation li.double a{height: 36px;} #mainNavigation li a:hover {color: rgb(0 84 198);} #mainNavigation li a.active {width: 214px; background: rgb(0 84 198); color: rgb(255,255,255);} #mainNavigation li a.active:hover {color: rgb(255,255,255);} #mainNavigation li span { color: #768ec8; font-size: 11px; margin-left: 5px;} #mainNavigation li ul {list-style: none;} #mainNavigation li ul li a {width: 189px; color: rgb(85,85,85); padding-left: 30px; font-weight: normal;} #mainNavigation li ul li a.active {width: 189px; /*background: none; color: rgb(0 84 198);*/ padding-left: 30px;} /*#mainNavigation li ul li a.active:hover {color: rgb(0 84 198);}*/ #mainNavigation li ul.subNavigation li ul li { background: url(../images/icon/icon-second-subNav.png) no-repeat 93px 14px; padding-left: 40px; width: 224px; margin-left: -40px;} #mainNavigation li ul.subNavigation li ul li a { padding-left: 70px;} #mainNavigation li ul.subNavigation li ul li a.active { background: url(../images/icon/icon-second-subNav.png) no-repeat 53px 14px rgb(0 84 198);} /* =defined for Panel is multiple #productCategory, #newspaperSection, #weeklySections, #threeMainSections, #navigationTab ................................................................. */ #productCategory ul, #newspaperSection, .threeMainSectionsList, #weeklySections, .digitalMediaList, .pocketBooksList ul, .latestNews, .newsReleaseList, .newsReleaseList ul { width: 708px; } #productCategory ul li, #newspaperSection li, .threeMainSectionsList li, .pocketBooksList ul li { float: left; margin: 0 18px 0 0; width: 224px; } .list-of-contents {list-style: disc outside; margin-left: 15px;} /* =set h3 for panel need use ONLY ................................................................. */ #container #toc h3 { margin-bottom: 5px; font-size: 18px; font-weight: normal; line-height: 22px;} body #container #toc .hilightb {font-size: 14px; color:#333; padding: 10px 0 0;} #weeklySections h3, #threeMainSections h3 { border-bottom: 1px solid rgb(207,207,207); font-size: 15px !important; font-weight: normal; float: left; height: 25px; } div.download {border-top: 1px solid #cfcfcf; padding: 20px 0 0; margin: 40px 0 0; } .center {text-align:center;} #weeklySections h3 {width: 363px;} #weeklySections p {font-size: 12px; margin-bottom: 8px;} #threeMainSections h3 {width: 318px;} /*contact blue box*/ .contactbl {background: #f1f7fd; padding: 15px 20px; margin: 0 0 15px;} .contactbl ol {margin: 0;} .contactbl ol li{list-style: none; font-weight: bold; font-size: 13px;} .contactbl ol li:nth-of-type(2){padding: 20px 0 5px;} .contactbl ol li p{padding: 0; margin: 0; font-weight: normal;} .contactbl h3, .contactbl h4 {font-size: 13px!important; font-weight: bold;} .contactbl.btm {font-style: italic;} /* =set #naviationTap for panel need use ONLY ................................................................. */ #weeklySections #navigationTab {float: right; width: 345px;} #threeMainSections #navigationTab {float: right; width: 390px;} #internationalSections #navigationTab {float: right; width: 690px; padding-left: 18px;} /* =defined for Panel is fix property #productCategory, #newspaperSection, #weeklySections, #threeMainSections, #navigationTab, #businessContact ................................................................. */ #productCategory {border-top: 1px solid rgb(207,207,207); padding-top: 10px; overflow: hidden;} #productCategory ul li a {color: rgb(51,51,51); text-decoration: none;} #productCategory ul li a img {border: 1px solid rgb(207,207,207); padding: 6px;} #productCategory ul li a:hover img {border: 1px solid rgb(73,125,170); padding: 6px;} #newspaperSection h3 {font-size: 15px !important; font-weight: normal;} #weeklySections dl, #internationalSections dl {clear: both; padding: 18px 0 36px; width: 708px;} #weeklySections dl dt, #internationalSections dl dt {float: left; margin-right: 18px;} #threeMainSections {clear: both;} #threeMainSections h4 {clear: both; padding-top: 18px;} .threeMainSectionsList {clear: both; margin-bottom: 0 !important;} .threeMainSectionsList li {font-size: 12px; margin-bottom: 0 !important;} .threeMainSectionsList li.threeCollumn {margin:0; width:708px;} #navigationTab { background: url(../images/bg/bg_border.gif) 0 100% repeat-x; height: 26px; margin-bottom: 0 !important; } #navigationTab li {float: left;} #navigationTab li.borderRight {border-right: 1px solid rgb(207,207,207);} #navigationTab li a { border-color: rgb(207,207,207); border-style: solid; border-width: 0 0 1px 1px; color: rgb(85,85,85); display: block; padding: 3px 10px 4px; text-decoration: none; } #navigationTab li a:hover {color: rgb(0 84 198);} #navigationTab li a.active { border-color: rgb(207,207,207) rgb(207,207,207) rgb(255,255,255) rgb(207,207,207) ; border-style: solid; border-width: 1px 0 1px 1px; color: rgb(0 84 198); padding-bottom: 3px; } .vdoPresentation { background: url(../images/bg/bg_tv-radio.jpg) no-repeat; height: 271px; margin-bottom: 18px; position: relative; width: 708px; } .vdoPresentation p { background: rgb(0,0,0); height: 240px; left: 20px; position: relative; top: 20px; width: 300px; } .digitalMediaList {margin-bottom: 0 !important;} .digitalMediaList li {float: left; margin-right: 18px; width: 345px;} .pocketBooksList h3 { border-top: 1px solid rgb(207,207,207); clear: both; color: rgb(0 84 198) !important; font-size: 15px !important; padding: 10px 0; width: 708px; } .pocketBooksList h4 {color: rgb(51,51,51) !important; font-size: 13px;} .pocketBooksList ul {clear: both; margin-bottom: 0 !important;} dl#contactInformation {border-bottom: 1px solid rgb(207,207,207);} dl#contactInformation dt { color: rgb(0 84 198); display: block; padding: 10px 0; border-top: 1px solid rgb(207,207,207); cursor: pointer; } dl#contactInformation dt:hover {background: rgb(241,241,241);} dl#contactInformation dd {width: 708px;} dl#contactInformation dd h3 {color: rgb(85,85,85) !important;} dl#contactInformation dd h3 span {display: block;} dl#contactInformation dd ul {padding-left: 30px;} .latestNews h2, .newsReleaseList h2 { font-size: 15px !important; margin-bottom: 10px; padding: 0; text-transform: none; } /*.latestNews h3, .newsReleaseList h3 {color: rgb(85,85,85) !important; font-weight: normal;}*/ .latestNews h3 {font-size: 18px !important;} .latestNews h3 a, .newsReleaseList h3 a { /*color: rgb(85,85,85);*/ text-decoration: none;} .latestNews h3 a:hover, .newsReleaseList h3 a:hover {color: rgb(0 84 198); text-decoration: underline;} .latestNews .abbildungSubLevel1 {width: 345px; float: left; margin: 0 18px 0 0;} .latestNews .abbildungSubLevel1 img {width: 345px;} .latestNews .abbildungSubLevel2 {width: 224px; float: right; margin: 0 0 0 18px;} .latestNews .abbildungSubLevel2 img {width: 224px;} .abbildungMain em, .abbildungSubLevel1 em, .abbildungSubLevel2 em {font-style: italic; font-size: 12px;} p.abbildungMain img {width: 708px; margin-bottom: 7px;} p.abbildungMain em { font-size: 13px; font-style: normal; border-bottom: 1px solid #CCC; display: block; padding-bottom: 10px; margin-bottom: 12px;} .newsReleaseList h3 {font-size: 18px !important;} .newsReleaseList ul {border-top: 1px solid rgb(207,207,207);} .newsReleaseList ul li {width: 708px; border-bottom: 1px solid rgb(207,207,207); padding-top: 15px;} .pageNavigation {text-align: center;} .pageNavigation a {border: 1px solid rgb(207,207,207); margin: 0 1px; padding: 1px 5px; text-decoration: none;} .pageNavigation a:hover { background: rgb(0 84 198); color: rgb(255,255,255);} .pageNavigation a.active {background: none; border: none; color: rgb(85,85,85);} #businessContact { border-color: rgb(207,207,207); border-style: solid; border-width: 1px 0; padding-top: 5px; } #businessContact h3 {color: rgb(0 84 198) !important; font-size: 13px !important;} /* =defined for address ................................................................. */ address {font-style: normal; margin-bottom: 0 !important; padding-bottom: 10px;} address span {display: block;} #corpateMap {_display: inline;} #corpateMap a {cursor: pointer; text-decoration: underline;} #corpateMap a:hover {text-decoration: none;} #corpateMap span {text-align: center;} /* =defined for form ................................................................. */ form label { color: rgb(0 84 198); display: block; font-size: 15px; margin-bottom: 6px; } form select {width: 224px;} form textarea {width: 466px;} form img {margin-top: 6px;} form #e-mail, form #code, form textarea {border: 1px solid rgb(0 84 198); padding: 2px;} form #e-mail:focus, form #code:focus, form textarea:focus {border: 2px solid rgb(0 84 198); padding: 1px;} #e-mail {width: 345px;} #code {width: 220px;} form .submit, form .reset { border: none; cursor: pointer; height: 21px; width: 47px; } .submit {background: url(../images/button/btn_send.gif) no-repeat;} .reset {background: url(../images/button/btn_clear.gif) no-repeat;} /* =defined for Clear ................................................................. */ #headerWrapper:after, #container:after, #newspaperSection:after, #weeklySections:after, #weeklySections dl:after, #threeMainSections:after, .threeMainSectionsList:after, #internationalSections dl:after, .digitalMediaList:after, .pocketBooksList ul:after, .latestNews:after, .newsReleaseList:after, .newsReleaseList ul li:after { content: '.'; clear: both; display: block; height: 0; visibility: hidden; } /* =defined for jQuery Effects ................................................................. */ .subNavigation {display: none; border-top: 1px solid #CFCFCF;} .toggle .subNavigation {display: block;} .err{color:red;} /* New modify 16 / 7 / 2012 by Ty */ #wrapper .newspaper ul { width: 708px; overflow: hidden;} #wrapper .newspaper ul li { width: 162px; height: 295px; padding: 0 20px 0 0; float: left;} #wrapper .newspaper ul li.last { padding: 0;} #wrapper .newspaper ul li a { display: block; text-align: center;} #wrapper .newspaper ul li a.thumbnail { height: 249px; width: 162px; margin-bottom: 10px; position: relative;} #wrapper .newspaper ul li a.thumbnail img { position: absolute; bottom: 0; left: 0;} #wrapper #container ul.active ul{ display: block;} #wrapper #footerWrapper p { margin-top: 15px;} #mainNavigation li.follow-facebook { border: none; padding-top: 8px;} #mainNavigation li.follow-facebook a { background: url(../images/icon/icon-facebook.png) no-repeat 5px center; padding: 0 8px; height: 26px; line-height: 12px; width: 95px;} #mainNavigation li.follow-facebook a span { padding-left: 23px; width: 75px; color: #999; display: block; padding-top: 1px;} #productCategory ul { clear: both;} #productCategory ul li { height: 200px;} #productCategory h2 { float: left;} #productCategory p.seeMore { float: left; width: 100px; margin: 8px 0 0 18px;} #productCategory p.seeMore a { background: url(../images/icon/icon-arrow.png) no-repeat right center; color: #666; width: 60px; display: block; text-decoration: none;} #wrapper #toc ul.achievement li { float: left; width: 340px;} #wrapper #toc ul.readmore, #wrapper #toc ul.listStyle { overflow: hidden;} #wrapper #toc ul.readmore li { width: 335px; float: left; background: url(../images/bg/list-style.gif) no-repeat left 12px; padding: 5px 0 5px 12px;} #wrapper #toc ul.listStyle li { background: url(../images/bg/list-style.gif) no-repeat left 12px; padding: 5px 0 5px 12px;} #wrapper #toc table.finance-HL tr th { color: #415c9e; width: 120px; padding: 10px 0; border-bottom: 1px solid #415c9e;} #wrapper #toc table.finance-HL tr th span { display: block;} #wrapper #toc table.finance-HL tr td { padding: 12px 25px 12px 0; border: none; text-align: right; border-bottom: 1px solid #eee;} #wrapper #toc table.finance-HL tr th.first, #wrapper #toc table.finance-HL tr td.first { width: 240px!important; text-align: left; padding-right: 0;} #wrapper #toc table.finance-HL tr.last td {border-bottom: 2px solid #415c9e; padding-bottom: 15px;} #financial-statement ul#navigationTab { padding-left: 50px;} div#tab1, div#tab2 { margin-top: 20px;} .annual-report, .executive-management, .board-director { overflow: hidden;} .annual-report li { width: 156px; float: left; padding: 0 50px 0 30px; height: 300px; overflow: hidden;} .annual-report li p.thumbnail { margin-bottom: 5px;} .annual-report li p { margin-bottom: 0px; text-align: center;} .executive-management li { width: 190px; float: left; padding: 0 31px 0 15px; height: 330px; overflow: hidden;} .executive-management li p, .board-director li p { margin-bottom: 0px; text-align: center; clear: both;} .executive-management li p.thumbnail { float: none;} .executive-management li p span, .board-director li p span { display: block;} .board-director li { width: 160px; float: left; padding: 0 50px 0 26px; height: 350px; overflow: hidden;} .history { float: right; width: 490px;} .history h3 { color: #415c9e; font-size: 18px;} #toc div p.thumbnail { margin-left: 30px;} .history p.intro { margin-bottom: 22px;} .history p { margin-bottom: 10px;} .history p span { color: #415c9e; text-transform: uppercase;} .history ul.listStyle { margin: -10px 0 10px 10px !important;} .history ul.listStyle li { padding-bottom: 0px !important;} ul.award-detail { overflow: hidden; margin: 10px 0 50px!important;} ul.award-detail li { width: 229px; float: left; padding: 0 5px; height: 300px;} ul.award-detail li.first { padding-left: 0px;} ul.award-detail li.last { padding-right: 0px;} ul.award-detail li p.thumbnail { margin-bottom: 5px;} ul.award-detail li p strong { color: #415c9e;} ul.award-detail.two-col li {width: 348px; height: auto; padding: 0;} ul.award-detail.two-col li.first {margin: 0 12px 0 0;} ul.award-detail.two-col li .thumbnail {float: none;} ul.csr-detail li { margin-bottom: 40px;} ul.csr-detail li.smallList { width: 349px; float: left; margin-right: 10px;} ul.csr-detail li.last { margin-right: 0;} ul.csr-detail li p { margin-bottom: 3px;} ul.csr-detail li p strong { color: #415c9e; display: block;} ul.csr-detail .two-col .thumbnail {float: left; width: 229px;} ul.csr-detail .two-col div {float: left; width: 465px; margin: 0 0 0 14px;} #container #toc ul.csr-detail li.last { border: none;} #container #toc .highlight {color: #415c9e; font-weight: bold;} #container #toc ul.csr-detail .two-col,#container #toc ul.csr-detail .three-col {padding: 0 0 20px; border-bottom: 1px solid #e7e5e5; overflow: hidden; margin: 0 0 25px;} #container #toc ul.csr-detail .two-col div h3,#container #toc ul.csr-detail .three-col div h3 {color:#425d9c; font-size: 13px; font-weight: bold; margin: 0 0 5px; line-height: 18px; } #container #toc ul.csr-detail .three-col .thumbnail {float: left; width: 470px;} #container #toc ul.csr-detail .three-col div {float: left; width: 225px;} .latestNews p.headline, .newsReleaseList p.headline { font-size: 15px; color: #415c9e; margin-bottom: 13px;} .latestNews em, .newsReleaseList em { margin-bottom: 5px; display: block;} #wrapper .latestNews { margin-bottom: 20px;} #wrapper .newsReleaseList { overflow: hidden;} #wrapper .newsReleaseList .floatLeft { height: 85px; overflow: hidden; margin: 0 10px 5px 0;} #wrapper .latestNews .floatLeft { height: 130px; overflow: hidden; margin: 0 10px 5px 0;} #wrapper .newsReleaseList div { width: 1416px;} #wrapper .newsReleaseList div ul { float: left; width: 708px; overflow: hidden;} #container #toc p.updated { color: #768EC8; margin-bottom: 30px;} .event-2015 {margin: -10px 0 0;} .event-2015 > p{float: left; width: 230px;} .event-2015 ul{ float: right; width: 445px; padding: 0;} .event-2015 .updated {clear: both; float: none; width: 100%;} .contain-blue {background:#f1f7fd; overflow:hiden; padding: 15px 15px 0; margin: 0 0 20px;} #container #toc .contain-blue h3 {font-size: 13px; font-weight: bold; color: #425d9c; margin: 0;} .contain-blue address {line-height: 18px; padding: 0 0 20px;} .contain-blue h4 {color: #666666; font-size: 13px; font-weight: bold; padding: 10px 0 0;} .contain-blue span {display: block;} .contain-blue p {padding: 12px 0 0;} .contain-blue p span:first-child {display: inline; font-weight: bold;} .contain-blue p span {display: block; font-weight: normal;} .contain-blue p:last-child {padding: 12px 0 15px;} #wrapper #toc ul.listStyle-default { overflow: hidden;} #wrapper #toc ul.listStyle-default li {padding: 3px 0; color: #666666; list-style: disc inside none; line-height: 18px;} /*headline*/ .detail-hd {font-size: 14px!important; color:#333!important;font-weight: bold!important; text-decoration: none!important;} /*headline link*/ #container #toc .hd-link a{font-size: 14px; color:#415c9e;font-weight: bold; text-decoration: underline;} #container #toc .hd-link a:hover{text-decoration:none;} #container #toc .event-2015 h3{float:left; padding:0 0 10px 20px;} #container #toc .listing-award li {width:708px; overflow:hidden; height:auto; padding:20px 0; border-bottom:1px solid #e6e6e6;} #container #toc .listing-award li.first {padding-top:0;} #container #toc .listing-award li.last {border-bottom:0; padding-bottom:0;} #container #toc .listing-award li p {width:423px; overflow:hidden; margin:0; float:left;} #container #toc .listing-award li p.thumbnail {width:270px; overflow:hidden; padding-right:15px; float:left;} #container #toc .listing-award li p.right {padding-left:15px; padding-right:0; text-align:right;} #container #toc .listing-award li p.thumbnail-last {width:430px;} #container #toc .listing-award li p.col-last {width:260px;} /*2016 awards*/ #container #toc.award2016 ul.listing-award {border-top: 1px solid #e6e6e6} #container #toc.award2016 li p {float: none; display: table-cell; width: auto; vertical-align: top;} #container #toc.award2016 li p:nth-of-type(1) {padding-right: 10px;} #container #toc.award2016 li.last p:nth-of-type(1){width: 500px;} /*CSR 2015*/ #container #toc ul.csr-list .two-col, #container #toc ul.csr-list .three-col {border-bottom:0; margin:0; padding: 0 0 20px;} #container #toc ul.csr-list .two-col .thumbnail, #container #toc ul.csr-list .three-col .thumbnail {float:none; width:auto; overflow:hidden; margin:0;} #container #toc ul.csr-list .two-col div {width:210px; padding-right:10px; margin:0;} #container #toc ul.csr-list .two-col div.last {width:430px; overflow:hidden; padding-right:0;} #container #toc ul.csr-list .three-col div {width:210px; padding-right:10px;} #container #toc ul.csr-list .three-col div.last {padding-right:0;} /*logo postgroup*/ #wrapper #footerWrapper {overflow:hidden; margin-bottom: 20px;} #wrapper #footerWrapper .logo-post {width:200px; display:inline-block; float: left;} #wrapper #footerWrapper > p {float:right; margin-top: 0;} /*add style 20202*/ .bc-1{background-color: #ffe0e4;} .box-unsubscribe{display: block; width: 100%; text-align: center; height:calc(100vh - 200px); position: relative;} .box-unsubscribe img{ width: 220px; height: auto;} .box-unsubscribe p{margin: 30px 0; font-size: 20px; line-height: 32px;} .box-unsubscribe .box-pos{position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 370px; margin: auto; width: 100%; } .box-unsubscribe a{background-color:#435e9c; color: #fff; min-width: 100px; padding:10px 20px; margin: 5px; display: inline-block; text-decoration: none; font-size: 16px; font-weight: 900; transition: background 0.5s;} .box-unsubscribe a:hover{ background-color: rgb(207,207,207); color: #435e9c; transition: background 0.5s} .box-unsubscribe hr{display: block; margin-top: 30px; margin-bottom: 40px; border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #ccc, #ccc); } .box-unsubscribe p.text-confirm{font-size: 26px; margin-bottom: 40px; line-height: 40px;} .responsive{ width: 100% ; max-width: 950px; margin: 0 auto; padding: 0; } .responsive .container{ padding-left: 15px; padding-right: 15px; } .responsive .footer{ overflow: hidden; margin-bottom: 20px; border-top: 1px solid rgb(207,207,207); padding-top: 20px; clear: both; } .responsive .footer .logo-post { width: 200px; display: inline-block; float: left; } .responsive .footer > p { float: right; margin-top: 0; } @media (max-width: 767px) { .box-unsubscribe{height:calc(100vh - 270px);} .box-unsubscribe img{width: 140px;} .box-unsubscribe p{font-size: 16px; margin: 30px 0 30px; line-height: 28px;} .responsive .footer > p {float: left; margin-top: 10px; font-size: 16px; } .box-unsubscribe a{} .responsive #headerWrapper h1{ background-size: 260px; } .box-unsubscribe .box-pos{height: 320px;} .responsive .footer > p{font-size: 12px;} .responsive .footer{margin-bottom: 0;} .box-unsubscribe hr{display: none} .box-unsubscribe a{min-width: 80px;} }