/*=========================================================
    CLD PoE Tree in Air
    Desktop Stylesheet
=========================================================*/


/*=========================================================
    RESET
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/*=========================================================
    ROOT VARIABLES
=========================================================*/

:root{

    /* Brand Colours */

    --blue:#0073E6;
    --darkBlue:#004D99;
    --yellow:#FFE84A;
    --green:#008000;
    --red:#C00000;
    --grey:#555555;
    --lightGrey:#888888;
    --borderGrey:#DDDDDD;
    --white:#FFFFFF;

    /* Typography */

    --font:
        "Trebuchet MS",
        "Segoe UI",
        Arial,
        sans-serif;

    --fsIntro:28px;
    --fsTechnology:48px;
    --fsMainTitle:76px;
    --fsSubtitle:32px;
    --fsSection:42px;
    --fsBody:27px;
    --fsCaption:22px;
    --fsSmall:16px;

    /* Layout */

    --pageWidth:1450px;

    --spaceXS:8px;
    --spaceS:16px;
    --spaceM:28px;
    --spaceL:50px;
    --spaceXL:80px;

    --radius:10px;

    --shadow:
        0 10px 30px rgba(0,0,0,.12);

}



/*=========================================================
    HTML
=========================================================*/

html{

    scroll-behavior:smooth;

}



/*=========================================================
    BODY
=========================================================*/

body{

    background:var(--white);

    color:#222;

    font-family:var(--font);

    overflow-x:hidden;

}



/*=========================================================
    PAGE
=========================================================*/

.page{

    width:100%;

    max-width:var(--pageWidth);

    margin:auto;

    padding:25px 45px 45px;

}



/*=========================================================
    IMAGES
=========================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

}



/*=========================================================
    LINKS
=========================================================*/

a{

    text-decoration:none;

    color:inherit;

}



/*=========================================================
    COMMON HEADINGS
=========================================================*/

h1,
h2,
h3{

    line-height:1.2;

    font-weight:700;

}



/*=========================================================
    PARAGRAPHS
=========================================================*/

p{

    line-height:1.65;

}



/*=========================================================
    SECTION GAP
=========================================================*/

section{

    margin-bottom:var(--spaceXL);

}



/*=========================================================
    HEADER
=========================================================*/

.header{

    margin-bottom:45px;

}



/*=========================================================
    CAMERA
=========================================================*/

.camera-area{

    display:flex;

    justify-content:flex-end;

    margin-bottom:14px;

}



.camera-image{

    width:185px;

}



/*=========================================================
    INTRO
=========================================================*/

.intro-area{

    width:100%;

}



.intro-text{

    font-size:var(--fsIntro);

    font-style:italic;

    color:var(--grey);

    text-align:left;

    letter-spacing:.5px;

}



/*=========================================================
    HERO
=========================================================*/

.hero{

    text-align:center;

    margin-bottom:60px;

}



/*=========================================================
    TECHNOLOGY
=========================================================*/

.technology-heading{

    color:var(--darkBlue);

    font-size:40px;

    margin-bottom:24px;
    
    white-space:nowrap;

}





/*=========================================================
    MAIN TITLE
=========================================================*/

.main-heading{

    color:var(--blue);

    font-size:var(--fsMainTitle);

    font-weight:800;

    line-height:1.05;

    margin-bottom:18px;

}



/*=========================================================
    SUB TITLE
=========================================================*/

.sub-heading{

    color:#666666;

    font-size:var(--fsSubtitle);

    font-weight:500;

}



/*=========================================================
    STRIKE THROUGH
=========================================================*/

.strike{

    position:relative;

    display:inline-block;

}



.strike::after{

    content:"";

    position:absolute;

    left:-2px;

    right:-2px;

    top:50%;

    height:3px;

    background:var(--red);

    transform:rotate(-4deg);

}



/*=========================================================
    FEATURE SECTION
=========================================================*/

.feature-section{

    margin-top:60px;

}



/*=========================================================
    FEATURE BOX
=========================================================*/

.feature-box{

    max-width:1180px;

    margin:auto;

    background:var(--yellow);

    border-radius:var(--radius);

    padding:36px 48px;

    box-shadow:var(--shadow);

}



/*=========================================================
    FEATURE TEXT
=========================================================*/

.feature-box p{

    font-size:var(--fsBody);

    color:#222;

    margin-bottom:18px;

}



.feature-box p:last-child{

    margin-bottom:0;

}



/*=========================================================
    FEATURE EMPHASIS
=========================================================*/

.feature-box strong{

    color:var(--darkBlue);

}



/*=========================================================
    COLOUR HELPERS
=========================================================*/

.base-word{

    color:var(--blue);

}



.tree-word{

    color:var(--green);

}



.changed-word{

    font-style:italic;

    font-weight:800;

    font-size:1.08em;

}



.explore-word{

    font-weight:700;

}



.explore-product{

    font-weight:400;

}

/*=========================================================
    PRODUCT SECTION
=========================================================*/

.product-section{

    margin-top:30px;

    margin-bottom:70px;

}



/*=========================================================
    PRODUCT TITLE
=========================================================*/

.product-title{

    text-align:center;

    font-size:var(--fsSection);

    font-weight:700;

    color:#444;

    margin-bottom:55px;

}



/*=========================================================
    PRODUCT LAYOUT
=========================================================*/

.product-layout{

    display:grid;

    grid-template-columns:
        6fr
        3fr
        3fr;

    align-items:center;

    column-gap:36px;

}



/*=========================================================
    COMMON PRODUCT PANEL
=========================================================*/

.bases-panel,
.trees-panel,
.size-panel{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}



/*=========================================================
    BASE IMAGE
=========================================================*/

.bases-image{

    width:100%;

    max-width:610px;

}



.bases-caption{

    margin-top:20px;

    font-size:23px;

    font-weight:600;

    color:var(--blue);

    letter-spacing:.3px;

}



/*=========================================================
    TREE 5
=========================================================*/

.tree5-image{

    width:96%;

    max-width:220px;

}



/*=========================================================
    TREE 8
=========================================================*/

.tree8-image{

    width:96%;

    max-width:220px;

    margin-top:30px;

}



/*=========================================================
    TREE CAPTION
=========================================================*/

.tree-caption{

    margin-top:12px;

    margin-bottom:14px;

    font-size:22px;

    font-weight:600;

    color:var(--green);

}



/*=========================================================
    SIZE IMAGE
=========================================================*/

.size-image{

    width:94%;

    max-width:285px;

}



/*=========================================================
    SIZE CAPTION
=========================================================*/

.size-caption{

    margin-top:18px;

    font-size:22px;

    font-weight:600;

    color:#444;

}



/*=========================================================
    ACHIEVEMENT
=========================================================*/

.achievement-section{

    text-align:center;

    margin-top:55px;

}



/*=========================================================
    INSTALLATION
=========================================================*/

.installation-text{

    font-size:24px;

    color:#666;

    font-style:italic;

    line-height:1.65;

    margin-bottom:28px;

}



/*=========================================================
    PATENT
=========================================================*/

.patent-text{

    font-size:28px;

    font-weight:700;

    color:var(--red);

}



.separator{

    color:#999;

    padding:0 18px;

}



/*=========================================================
    TAGLINE
=========================================================*/

.tagline-section{

    margin-top:65px;

    margin-bottom:75px;

    text-align:center;

}



.tagline{

    display:inline-block;

    font-size:42px;

    font-weight:700;

    color:var(--blue);

}



/*=========================================================
    EXPLORE
=========================================================*/

.explore-section{

    margin-top:40px;

    margin-bottom:38px;

    text-align:center;

}



.explore-heading{

    color:var(--blue);

    line-height:1.45;

}



.explore-word{

    display:inline;

    font-size:40px;

    font-weight:700;

}



.explore-product{

    display:inline;

    margin-left:10px;

    font-size:40px;

    font-weight:400;

}

/*=========================================================
    NAVIGATION
=========================================================*/

.navigation-area{

    width:100%;

    margin-top:22px;

    margin-bottom:90px;

}



/*=========================================================
    NAVIGATION GRID
=========================================================*/

.navigation-grid{

    width:100%;

    max-width:1180px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}



/*=========================================================
    NAVIGATION BUTTON
=========================================================*/

.nav-box{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:82px;

    padding:12px 18px;

    background:var(--blue);

    color:var(--white);

    font-size:24px;

    font-weight:600;

    text-align:center;

    border-radius:12px;

    box-shadow:0 8px 18px rgba(0,0,0,.12);

    transition:

        background .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}



/*=========================================================
    BUTTON HOVER
=========================================================*/

.nav-box:hover{

    background:var(--darkBlue);

    transform:translateY(-4px);

    box-shadow:0 14px 24px rgba(0,0,0,.18);

}



/*=========================================================
    BUTTON ACTIVE
=========================================================*/

.nav-box:active{

    transform:scale(.98);

}



/*=========================================================
    FOOTER
=========================================================*/

.footer{

    border-top:2px solid var(--borderGrey);

    padding-top:38px;

    padding-bottom:45px;

}



/*=========================================================
    FOOTER CONTENT
=========================================================*/

.footer-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}



/*=========================================================
    FOOTER LOGO
=========================================================*/

.footer-logo{

    width:108px;

    height:auto;

}



/*=========================================================
    SINCE
=========================================================*/

.footer-since{

    margin-top:4px;

    font-size:14px;

    font-weight:600;

    letter-spacing:4px;

    color:#555;

}



/*=========================================================
    COMPANY
=========================================================*/

.footer-company{

    margin-top:24px;

    font-size:20px;

    font-weight:700;

    color:var(--blue);

}



/*=========================================================
    ADDRESS
=========================================================*/

.footer-address{

    margin-top:10px;

    font-size:16px;

    line-height:1.7;

    color:#555;

}



/*=========================================================
    COPYRIGHT
=========================================================*/

.footer-copy{

    margin-top:22px;

    font-size:16px;

    color:#666;

}



/*=========================================================
    DESKTOP BREAKPOINTS
=========================================================*/

@media (max-width:1600px){

:root{

    --pageWidth:1320px;

    --fsTechnology:44px;

    --fsMainTitle:68px;

    --fsSubtitle:30px;

    --fsSection:38px;

    --fsBody:25px;

}

}



@media (max-width:1440px){

:root{

    --pageWidth:1220px;

    --fsTechnology:40px;

    --fsMainTitle:60px;

    --fsSubtitle:28px;

    --fsSection:36px;

    --fsBody:23px;

}

.page{

    padding-left:35px;

    padding-right:35px;

}

.product-layout{

    column-gap:28px;

}

.nav-box{

    min-height:74px;

    font-size:22px;

}

}



@media (max-width:1366px){

:root{

    --pageWidth:1160px;

    --fsTechnology:36px;

    --fsMainTitle:54px;

    --fsSubtitle:26px;

    --fsSection:34px;

    --fsBody:21px;

}

.feature-box{

    padding:30px 38px;

}

.installation-text{

    font-size:21px;

}

.patent-text{

    font-size:24px;

}

.tagline{

    font-size:36px;

}

.nav-box{

    min-height:68px;

    font-size:20px;

}

}



/*=========================================================
    SMALL DESKTOP
=========================================================*/

@media (max-width:1200px){

.navigation-grid{

    grid-template-columns:repeat(2,1fr);

}

.product-layout{

    grid-template-columns:1fr;

    row-gap:55px;

}

}



/*=========================================================
    LARGE MONITORS
=========================================================*/

@media (min-width:2200px){

:root{

    --pageWidth:1650px;

}

}



/*=========================================================
    SELECTION
=========================================================*/

::selection{

    background:var(--blue);

    color:#fff;

}



/*=========================================================
    SMOOTH TRANSITIONS
=========================================================*/

body,
.feature-box,
.nav-box{

    transition:.30s;

}



/*=========================================================
    UTILITY CLASSES
=========================================================*/

.text-center{

    text-align:center;

}

.hide{

    display:none;

}

.show{

    display:block;

}

.mt20{

    margin-top:20px;

}

.mt40{

    margin-top:40px;

}

.mb20{

    margin-bottom:20px;

}

.mb40{

    margin-bottom:40px;

}



/*=========================================================
    END OF DESKTOP.CSS
=========================================================*/