/*RESET*/

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

    a {
        color: inherit;
        text-decoration: none;
    }

    button, input[type="submit"] {
		cursor: pointer;
	}

/*SCROLLBAR*/

    body::-webkit-scrollbar {
        width: 15px;
    }

    body::-webkit-scrollbar-track {
        background-color: #CCC;
        border-radius: 0px
    }

    body::-webkit-scrollbar-thumb {
        background-color: #2F2F2F;
    }

/*UTILITY CLASSES*/

    /*WIDTHS*/

        .full {
            width: 100%;
        }

        .center {
            width: 75%;
            margin: 0 auto;
        }

    /*FLEX*/

        /*ROWS*/

            .flex-row-start-start {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: flex-start;
            }

            .flex-row-end-end {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-end;
                align-items: flex-end;
            }

            .flex-row-between-start {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: flex-start;
            }

            .flex-row-between-center {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
            }

            .flex-row-between-stretch {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: stretch;
            }

        /*COLUMNS*/

            .flex-col-center-center {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
            }

/*COLOURS*/

    /*FONTS*/

        .font-black {
            color: #111;
        }

        .font-white {
            color: #FFF;
        }

    /*BACKGROUNDS*/

        .bg-black {
            background-color: #111;
        }

        .bg-white {
            background-color: #FFF;
        }

/*FONTS*/

    /*IMPORT FONTS*/

        @font-face {
            font-family: "Roboto";
            src: url(../fonts/Roboto.ttf);
        }

    /*HEADINGS*/

        h1 {
            font-family: "Roboto", sans-serif;
            font-size: clamp(4rem, 2.6911rem + 7.4797vw, 11.666666666666666rem);
            font-weight: 800;
            text-transform: uppercase;
            max-width: 100%;
        }

        h2 {
            font-family: "Roboto", serif;
            font-size: clamp(2rem, 1.8293rem + 0.9756vw, 3rem);
            font-weight: 400;
            text-transform: uppercase;
        }

        h3 {
            font-family: "Roboto", sans-serif;
            font-size: 36pt;
            font-weight: 800;
            text-transform: uppercase;
        }

        h4 {
            font-family: "Roboto", sans-serif;
            font-size: clamp(1.125rem, 1.061rem + 0.3659vw, 1.5rem);
            font-weight: 800;
            text-transform: uppercase;
        }

    /*COPY AND LIST ITEMS*/

        p, li {
            font-family: "Roboto", sans-serif;
            font-size: clamp(1.125rem, 1.061rem + 0.3659vw, 1.5rem);
            font-weight: 400;
            line-height: 1.25;
        }

/*HEADER*/

    header {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /*TITLE*/

        header h1 {
            line-height: 80%;
        }

        header h1, header h2 {
            text-align: right;
        }

/*ASIDE*/

    aside {
        position: fixed;
        bottom: 15px;
        right: 15px;
        background: #141414;
        padding: 10px;
        box-shadow: 2px 2px 15px 2px #000000;
        z-index: 85;
    }

    /*ICON*/

        aside.email i {
            color: #FFF;
            transition: .25s ease-out;
        }

        /*TRANSITION*/

            aside.email i:hover {
                text-shadow: 2px 2px 5px 2px #FFFFFF;
                transition: .25s ease-in;
            }

/*MAIN*/

    /*PORTFOLIO*/

        /*ITEMS*/

            /*GENERIC*/

                #portfolio div {
                    margin-bottom: 10px;
                    height: 35vh;
                }

                /*INFORMATION HOLDER*/

                    #portfolio div .portfolio-information {
                        opacity: 0;
                        height: 100%;
                        background-color: rgba(0,0,0,0.85);
                        transition: .25s ease-out;
                    }

                    /*TRANSITION*/

                        #portfolio div:hover > .portfolio-information {
                            opacity: 1;
                            transition: .25s ease-in;
                        }

                    /*LINK*/

                        #portfolio div .portfolio-information h4 {
                            color: #FFF;
                        }

            /*SPECIFIC*/

                #portfolio-01 {
                    width: calc(66.6667% - 10px);
                    background: url(../images/portfolio/sagebrush.jpg) no-repeat center;
                    background-size: cover;
                }

                #portfolio-02 {
                    width: 33.3333%;
                    background: url(../images/portfolio/portcarling.jpg) no-repeat center;
                    background-size: cover;
                }

                #portfolio-03 {
                    width: calc(40% - 10px);
                    background: url(../images/portfolio/stcharles.jpg) no-repeat center;
                    background-size: cover;
                }

                #portfolio-04 {
                    position: relative;
                    width: calc(30% - 10px);
                    background: url(../images/portfolio/royalmontreal.jpg) no-repeat center;
                    background-size: cover;
                }

                #portfolio-05 {
                    width: 30%;
                    background: url(../images/portfolio/torontohunt.jpg) no-repeat center;
                    background-size: cover;
                }

    /*INFORMATION*/

        #information {
            padding-top: 100px;
            padding-bottom: 100px;
        }

        /*TITLE*/

            #information h3 {
                color: #FFF;
            }

        /*PRICING*/

            #information .pricing {
                margin-top: 100px;
                margin-bottom: 100px;
            }

            /*ITEMS*/

                #information .pricing .pricing-item {
                    position: relative;
                    width: calc(33.333% - 50px);
                    background: #141414;
                    color: #FFF;
                    padding-left: 50px;
                    padding-right: 50px;
                    padding-top: 100px;
                    padding-bottom: 100px;
                    text-align: center;
                    box-shadow: inset 2px 2px 15px 2px #000000;
                    transition: .25s ease-out;
                }

                /*TRANSITION*/

                #information .pricing .pricing-item:hover {
                    box-shadow: 2px 2px 15px 2px #000000;
                    transition: .25s ease-in;
                }

        /*TEXT*/

            #information p {
                margin-top: 25px;
                color: #FFF;
            }

/*MEDIA QUERIES*/

    @media (max-width: 1850px) {

        h1 {
            font-size: 72pt;
        }

    }

    @media (max-width: 1350px) {

        #information .pricing .pricing-item {
            width: 100%;
            margin-bottom: 25px;
        }

        #information .pricing .pricing-item:last-of-type {
            margin-bottom: 0px;
        }


    }

    @media (max-width: 1200px) {

        .center {
            width: 85%;
        }

        #portfolio-01, #portfolio-02, #portfolio-03, #portfolio-04, #portfolio-05 {
            width: 100%;
        }

        #information {
            padding-top: 25px;
            padding-bottom: 25px;
        }

        #information .pricing {
            margin-top: 25px;
            margin-bottom: 25px;
        }

    }

    @media (max-width: 1000px) {

        h1 {
            font-size: 48pt;
        }

    }

    @media (max-width: 800px) {

        .center {
            width: calc(100% - 30px);
        }

        h1 {
            font-size: 24pt;
        }

        h2 {
            font-size: 18pt;
        }

        h3 {
            font-size: 20pt;
        }

        header {
            padding: 25px;
        }

        header h1, header h2 {
            text-align: left;
        }

    }

    @media (max-width: 600px) {

        h3 {
            font-size: 14pt;
        }

    }