/*
 Theme Name:     CRFTD LANDING PAGE
 Theme URI:      https://www.crabtreesystems.com/
 Description:    Customzied landing page for Septtimous Law.
 Author:         Crabtree Systems
 Author URI:     https://www.crabtreesystems.com
 Template:       SL
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */
/***
1. HEADER
2. BODY
3. TYPOGRAPHY
4. ELEMENTS
5. FORM
6. FOOTER
***/

<style> @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400&family=Playfair+Display&display=swap'); </style>

/*** 1. HEADER ***/
head {
    position: absolute;
    top: 0;
}

/*** 2. BODY ***/
html, body {
    font-size: 100%;
    font-family: 'Outfit', sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color: #012641;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.clear {
    clear: both;
}

::selection {color:white;background:#567470;}
::-moz-selection {color:white;background:#567470;}

#crftd-page {
    height: 100%;
    position: absolute;
    width: 100%;
    margin: 0;
}

.crftd-wrapper {
    text-align: center;
    margin: auto 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
}

.crftd-content {
    margin: auto;
    padding: 40px 0;
    width: 80vw;
    max-width: 100%;
    height: auto;
    position: relative;
    display: grid;
    align-content: center;
    background-color: #60b3d1;
    border: 5px double #cde2f1;
    border-radius: 4px;
}

@media only screen and (min-width: 1601px) {
    .crftd-content {
        width: 60vw;
    }
}

/*** 3. TYPOGRAPHY ***/

.crftd-content h1, .crftd-content p, .crftd-content h2, .crftd-content h3, .crftd-content p a {
    color: #fff;
    line-height: 100%;
    text-transform: uppercase;
}

.crftd-content p a {
    text-decoration: none;
}

.crftd-content h1, .crftd-content h2 {
    text-transform: uppercase;
    margin: 0px 0px 20px 0px;
}

.crftd-content h3 {
    margin: 0px 0px 5px 0px;
}

.crftd-content p {
    font-size: 32px;
    margin: 0px 0px 10px 0px;
}

h1, h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 36px;
    color: #fff;
}

@media only screen and (min-width: 1301px) {
    h1, h2 {
        font-size: 100px;
    }
}

@media only screen and (min-width: 1601px) {
    h1, h2 {
        font-size: 100px;
    }
}

@media only screen and (min-width: 1301px) and (max-width: 1600px) {
    h1, h2 {
        font-size: 80px;
    }
}

@media only screen and (min-width: 1001px) and (max-width: 1300px) {
    h1, h2 {
        font-size: 60px;
    }
}

@media only screen (min-width: 768px) and (max-width: 1000px) {
    h1, h2 {
        font-size: 60px;
    }
}

@media only screen and (max-width: 767px) {
    h1, h2 {
        font-size: 38px;
    }
     h3 {
        font-size: 24px;
    }
    .crftd-content p, .crftd-content p a {
        font-size: 24px;
    }
}

h4, h5, h6, p {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
}

/*** 4. ELEMENTS ***/
.text-underline {
    text-transform: uppercase;
    text-decoration: underline;
}

hr.divider-top, hr.divider-bottom {
    border-top: 3px double #fff;
    align-content: center;
}

@media only screen and (min-width: 768px) {
    hr.divider-top, hr.divider-bottom {
        width: 50%;
    }
}
    
@media only screen and (max-width: 767px) {
    hr.divider-top, hr.divider-bottom {
        width: 85%;
    }
}

hr.divider-bottom {
    margin-bottom: 30px;
}

/*** 5. FORM ***/
/*** 6. FOOTER ***/
/* BOOM

                |\ |\
                | \| \
                |  |  :
           _____l__l  |
         .'            '.
       .'                '
       |   ..             '
       |  /__.            |
       :.' -'             |
      /__.                |
     /__, \               |
        |__\        _|    |
        :  '\     .'|     |
        |___|_,,,/  |     |    _..--.
     ,--_-   |     /'      \../ /  /\\
    ,'|_ |---|    /    ,,,_/ / ,  / _\\
  ,-- | \|  / ___..,,/   /  ,  ,_/   '-----.
 /   ,   \  |/  ,____,,,__,,__/            '\
,   ,     \__,,/                             |
| '.       _..---.._                         !.
! |      .' CRFTD. '.                        |
.:'      | (-_ _--')  :          |            !
.'.       '.  Y    _.'             \,         :
 .          '-----'                 !          .
 .           /  \                   .          .
------------------------------------------------------------------*/