/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2019, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Font-face setup
- Fonts overrides
- Demo - Code
- Demo - Wrapper
- Header
- Sections
- Aside
- Pagination
- Breadcrumb
- Thumbs
- Demo - Grid
- Color examples setup
*/

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

@font-face {
  font-family:'baloo';
  font-style:normal;
  font-weight:300;
  src:local(''),
       url('../font/baloo.woff2') format('woff2'),
       url('../font/baloo.woff') format('woff');
}

@font-face {
  font-family:'josefin';
  font-style:bold;
  font-weight:bold;
  src:local(''),
       url('../font/josefin.woff2') format('woff2'),
       url('../font/josefin.woff') format('woff');
}

/***** Fonts overrides *****/
body, form, input, button, textarea, select, label,
.select select, .select optgroup option,
.select optgroup option, .checkbox > span label,
.radio > span label, form .message, .btn        { font-family:'josefin', Sans-Serif; color:var(--color-gray500); letter-spacing:1.2px; }

html                                            { scroll-behavior:smooth; }
body                                            { padding:0; background-color:var(--color-snow); display:flex; flex-direction:column; min-height:100vh; color:var(--color-gray800); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

h1, h2                                          { font-family:'baloo', Sans-Serif }
h2                                              { margin-bottom:-30px; font-size:3.7rem; line-height: 3.5rem; color:var(--color-brand800); }

.logo                                           { margin:0 auto; width:270px; height:270px; }

/***** Demo wrapper *****/
.wrapper                                        { display:flex; flex-direction:column; width:100%; height:100vh; }

.left                                           { padding:60px 30px; display:flex; flex-direction:column; gap:30px; justify-content:center; color:var(--color-snow); background-image:url(../img/bg-01.jpg); background-size:cover; }
.left h1                                        { margin:0 auto; width:100%; max-width:600px; font-size:3.1rem; line-height:3rem; }
.left p                                         { margin:0 auto; width:100%; max-width:600px; font-size:16px; }

.right                                          { display:flex; flex-direction:column; font-size:16px; }

.top                                            { margin:0 auto; padding:60px 30px; max-width:760px; display:flex; flex-grow:1; flex-direction:column; gap:30px; justify-content:center; }

.term                                           { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.term li                                        { margin:0; padding:20px 20px; line-height:15px; display:flex; flex-direction:column; justify-content:center; background-color:var(--color-haze); gap:6px; }
.term strong                                    { font-size:2rem; }
.term li:first-child,
.term li:last-child                             { flex-grow:1; background-color:var(--color-mist); text-align:left; }

.term li:first-child                            { border-radius:20px 20px 0 0; }
.term li:last-child                             { border-radius:0 0 20px 20px; }

/***** Button Reset *****/
button[aria-disabled=true]                      { cursor:inherit; }
input::-moz-focus-inner,
button::-moz-focus-inner                        { border:0; padding:0; }

.btn                                            { margin:0; padding:10px 30px 17px; color:var(--color-brand800); fill:currentColor; background-color:var(--color-snow); border:0; font-family:inherit; font-size:2rem; font-weight:bold; line-height:initial; letter-spacing:.5px; display:inline-flex; gap:8px; flex-direction:row; align-self:flex-start; align-items:center; vertical-align:middle; justify-content:center; text-align:left; text-decoration:none; width:auto; flex-wrap:nowrap; position:relative; top:0; left:0; cursor:pointer; border:none; border-radius:var(--radius); overflow:visible; -webkit-appearance:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; transition:background 0.2s cubic-bezier(0.33, 0, 0.2, 1) 0s, color 0.2s cubic-bezier(0.33, 0, 0.2, 1) 0s; }
.btn:hover                                      { background-color:var(--color-brand800); color:var(--color-snow); transition:background 0.2s cubic-bezier(0.33, 0, 0.2, 1) 0s, color 0.2s cubic-bezier(0.33, 0, 0.2, 1) 0s; }

.list                                           { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:20px; }
.list li                                        { margin:0; padding:0; display:flex; }
.list li .icon                                  { margin:4px 10px 0 0; }

.gallery                                        { margin:0; padding:0; list-style:none; display:grid; grid-gap:0px; grid-auto-flow:dense; grid-template-columns:33.33% 33.33% 33.33%; }
.gallery li                                     { margin:0; padding:0; position:relative; }
.gallery img                                    { width:100%; height:auto; }
.gallery .one:after                             { content:''; width:100%; height:3px; background-color:var(--color-snow); position:absolute; bottom:0; left:0; }
.gallery .two                                   { grid-row:span 2; }
.gallery .two:before                            { content:''; width:3px; height:100%; background-color:var(--color-snow); position:absolute; top:0; left:0; }
.gallery .two:after                             { content:''; width:3px; height:100%; background-color:var(--color-snow); position:absolute; top:0; right:0; }
.gallery .three:after                           { content:''; width:100%; height:3px; background-color:var(--color-snow); position:absolute; bottom:0; left:0; }

/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
  .wrapper                                      { flex-direction:row; }
  .left                                         { padding:0 40px; width:50vw; }
  .right                                        { width:50vw; }
}

/***********************************************
Desktop - This applies from 1000px onwards
***********************************************/
@media (min-width:1000px)                       {
  body                                          { max-height:100vh; overflow:hidden; }

  .left                                         { padding:0 60px; }
  .left h1                                      { font-size:5.1rem; line-height:5rem; }
  .top                                          { padding:60px; }

  .term                                         { flex-direction:row; }
  .term li                                      { text-align:center; }
  .term li:first-child                          { border-radius:20px 0 0 20px; }
  .term li:last-child                           { border-radius:0 20px 20px 0; }
}

/***********************************************
Desktop HD - This applies from 1200px onwards
***********************************************/
@media (min-width:1200px) {

}

@media screen and (prefers-reduced-motion:reduce) {
  html                                          { scroll-behavior:auto; }
}