layout_skel/css/styles.css.tpl

/*------------------------------------
[Stylesheet - Template]
Instructions: To go to stylesheet section, you can do a find for section title in square brackets. This will take you to the initial mention.

1. [Basic Layout] Styling (all pages)
    - 1.2 [Blog]
    - 1.3 [Menu]
    - 1.4 [Minicontact]
    - 1.5 [Footer]
2. [@CSS Variables] that need to be in @CSS for Stylus
3. [Stylus Mixins + Variables]
4. [Typography]
5. [Reusable Styles]
6. [Header] styling
7. [Custom Section Styling]
------------------------------------*/

/*-- 1 - [Basic Layout] --*/
* {
  box-sizing: border-box;
}
#root {
  max-width: 960px;
  width: 100%;
}
.primary-column.has-content {
  padding: 1rem 0;
}
.primary-column {
  width: 69%;
}
.wide .primary-column {
  width: 100%;
  float: none;
}
.secondary-column  {
  width: 31%;
}
.wide .secondary-column{
  display:none;
}

/*-- 1.3 - [Menu] --*/
/* = Horizontal Menu */

/*-- 1.4 - [Minicontact] --*/
#mini{}
#minicontact {
  margin:0;
  padding:0 12px;
}
#minicontact label {
  display:block;
  margin:8px 10px 2px 0;
  text-align:left;
}
.mini-header {
  font-size: 1.5rem;
  text-align:center;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
}
#minicontact input.form-btn {
  width: calc(100% - 12px);
  max-width: 250px;
  margin: 0 auto;
  margin-top: 0.5rem;
  height: auto;
  padding: 0.5rem 1rem;
  font-family: {$body_font_family};
  border: none;
  text-transform: uppercase;
}
#minicontact input, #minicontact textarea{
  font-size: 1rem;
}
#minicontact input{
  height: 3rem;
  padding: 6px;
}
#minicontact textarea{
  height: 3.75rem;
  padding: 6px;
}
.mini-submit{
  text-align: center;
}
.mini-bottom .mini-field input  {
  height: 2.5rem;
  padding: 6px;
  font-size: 1rem;
}
.mini-bottom .mini-field {
  width: 33.33333%;
  float: left;
}
.mini-bottom .mini-field, .mini-bottom .mini-textarea{
  box-sizing: border-box;
  padding: 1rem 6px;
}
.mini-bottom #minicontact textarea{
  height: 5.625rem;
  clear: both;
}
.secondary-column .content-pad {
  padding: 0;
}
.secondary-column #mini {
  border-top: 1px solid #bfbfbf;
  padding: 2rem 1rem;
}

/*-- 1.5 - [Footer] --*/
.footer-main {
  position:relative;
  width: 100%;
  margin: 0 auto;
}
.footer-main a {
  text-decoration: none;
}
.footer-main a:hover{
}
.footer-menu {
  list-style:none;
  display:block;
  clear:left;
  margin:0 auto;
  padding: 0;
}
.footer-menu li {
  display: inline;
}
.footer-menu a {
  margin:0 4px;
  white-space: nowrap;
}
.footer-logos img{
  vertical-align: middle;
  margin: 0 10px;
}
/* = Dakno Copyright */
.dakno {
  width: 100%;
  padding: 0;
}

@media only screen and (max-width: 850px) {
  .primary-column, .secondary-column{
    width: 100%;
    float:none;
  }
}

@media only screen and (max-width: 650px) {
  .mini-bottom .mini-field {
    width: 100%;
    float: none;
  }
  .mini-bottom .mini-field, .mini-bottom .mini-textarea{
    padding: 0.25rem 0.5rem;
  }
}
/* magnific reset (otherwise the close button is covered) */
body.db_body_margin .mfp-wrap {
  margin-top: 50px;
  height: calc(100% - 50px);
}
/*-- 2 - [@CSS Variables] --*/
/*-- 3 - [Stylus Mixins + Variables] --*/
/*
#header {
  background-image: url(path + 'logo.png');
}
*/
/*-- 4 - [Typography] --*/
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body * {
  box-sizing: border-box;
}
body a:hover {
  text-decoration: none;
}
[tabindex="-1"]:focus {
  outline: 0;
}
/*-- 5 - [Reusable Styles] --*/
/*-- 6 - [Header] --*/
.top {
  position: relative;
}
.header-main {
  position: relative;
  z-index: 30;
  box-sizing: border-box;
}
.logo {
  display: block;
}
.logo img {
  max-width: 100%;
  display: block;
}
.broker-logo img {
  max-width: 100%;
  display: block;
}
/*-- 7 - [Custom Section Styling] --*/
.box-mid {
  position: relative;
  z-index: 20;
}
.secondary-column #mini {
  margin-top: 2rem;
}
.footer-menu li {
  display: block;
  box-sizing: border-box;
  padding: 0 1rem 0.5rem 1rem;
}
/* hero header */
.box-custom-hero {
  height: 240px;
}
.box-custom-hero .dak-table-align__cell {
  background: rgba(0,0,0,0.45);
}
.box-custom-hero .page {
  padding: 0;
}
.box-custom-hero .section {
  padding: 0;
}
.box-custom-hero-form .dak-overlay-light-heavy {
  color: #000;
  text-shadow: none;
}
.box-custom-hero-form .standard-form label {
  text-align: left;
}
.set-hero .d5m-module-header,
.set-hero_form .d5m-module-header {
  display: none;
}
@media screen and (min-width: 768px) {
  .box-custom-hero {
    height: 480px;
  }
  .primary-column.has-content {
    padding: 3rem 0;
  }
}
@media screen and (min-width: 851px) {
  .secondary-column .content-pad {
    padding: 12px;
  }
  .secondary-column #minicontact .form-btn {
    width: 100%;
  }
  .secondary-column #mini {
    margin-top: 3rem;
    padding: 0.5rem 1rem;
    border-top: none;
    border-left: 1px solid #bfbfbf;
  }
  .mini-bottom-wide #mini {
    max-width: 800px;
    margin: 0 auto;
  }
  .mini-bottom-wide #minicontact {
    max-width: 760px;
    margin: 0 auto;
  }
}