/* cmsms stylesheet: KyleFollettCSS modified: Friday, October 11, 2024 4:08:53 PM */
* {
    margin:0;
    padding:0;
}
body {
    background-color:#1A3133;
    font-family: "Quicksand", system-ui;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 1.25em;
    color: #6BB9BB;    
}
body.home {
    background-image: url('/uploads/images/home.svg'), url('/uploads/images/home.jpg');
    background-position: center 110px, center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;
}
body.what-i-do {
    background-image: url('/uploads/images/what-i-do.svg'), url('/uploads/images/what-i-do.jpg');
    background-position: center 110px, center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;
}
body.work {
    background-image: url('/uploads/images/work.svg'), url('/uploads/images/work.jpg');
    background-position: 100px 110px, center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;
}
body.about-me {
    background-image: url('/uploads/images/about-me.svg'), url('/uploads/images/about-me.jpg');
    background-position: center 110px, center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;
}
body.hire-me {
    background-image: url('/uploads/images/about-me.svg'), url('/uploads/images/about-me.jpg');
    background-position: center 110px, center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;
    
    .content p {
        text-align: center;
        font-size: 1.75em;
        a {
            color: #FF5732;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    }    
}
.header {
    width: auto;
    padding: 1.88em 2.50em;    
    h1 {
        float:left;
        a span {
            display: none;
        }
    }
    a.hire-me {
        float: right;
        display: block;
        background-color: #FF5732;
        color: #ffffff;
        padding: 0.81em 1.13em 0.81em 2.43em;
        border-radius: 6.25em;
        border:0.13em solid #FF5732;
        background-image: url('/uploads/images/shovel-white.svg');
        background-position: 18px 16px;
        background-repeat: no-repeat;
        background-size: auto;
        text-decoration: none;
    }
    a.hire-me:hover {
        border:0.13em solid #FF5732;
        color:#FF5732;
        background-color: #ffffff;
        background-image: url('/uploads/images/shovel-orange.svg');
    }
    ul {
        float: right; 
        margin-right: 1.13em;
        li {
            list-style-type: none;
            display: inline-block;            
            a {
                color:#6BB9BB;
                text-decoration: none;
                display: block;
                padding: 0.81em 1.25em;                
                span {
                    display: block;
                    width:0%;
                    height: 2px;
                    background-color:#6BB9BB;
                    transition: 0.3s;
                    margin: auto;
                }
                
            }
            a:hover {
                span {                    
                    width:100%;
                } 
            }          
            
        } 
        li.currentpage {
            a {
                color:#ffffff;
                span {
                    background-color: #ffffff;
                    width:100%;
                }
            }
        }      
    }
    
}
.content {
    max-width: 52.50em;
    margin: auto;
    padding: 2em 2.50em;
    position: relative;
    a {
        color: #ffffff;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    ol {
        padding-left: 2em;
        li {
            padding-bottom: 1em;
        }
    }
    .main-image {
        img {
            width: 100%;
        }
    }
    .screen-previews {
        width: auto;
        overflow-x: auto;
        padding: 0;
        div {
            padding: 0;
            white-space: nowrap;
            img {
                display: inline-block;
                margin-right: 2em;
            }
        }
    }
    a.back-to-all {
        color: #6BB9BB;
        text-decoration: none;
        position: absolute;
        top:4.0em;
        left:2.50em;
        background-image: url('/uploads/images/go-left.svg');
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 24px 78px;
        padding-left: 32px;
    }
    a.back-to-all:hover {
        color:#ffffff;
        background-position: 0px -54px;
    }
    div {
        padding: 2.0em 0;
    }
    p {
        margin-bottom: 2em;
    }
    div.left {
        text-align: left;
        padding-right: 25%;
    }
    div.right {
        text-align: right;
        padding-left: 25%;
    }
    .work-main {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap:1.25em;
        row-gap: 0;
        padding: 0;
        div {
            flex-basis: 30%;
            a {
                text-decoration: none;
                color: #6BB9BB;
                transition: 0.3s;
            }            
            a.thumbnail {
                background-color: #1A3133;
                border: 1px solid #1E706E;
                display: block;
                transition: 0.3s;
                img {
                    width: 100%;
                    opacity: 0.25;
                    transition: 0.3s;
                }
            }
        }
        div:hover {
            a {
                color:#ffffff
            }
            a.thumbnail {
                border: 1px solid #6BB9BB;
                img {
                    opacity: 1;
                }
            }
        }
    }
}
h2 {
    font-weight: 400;
    font-size: 4.00em;
    color:#FF5732; 
    text-align: center; 
    span {
        color:#ffffff;
    }
    margin-bottom: 0.5em;
}
.home h2 {
    text-align: left;
}
h3 {
    font-weight: 400;
    font-size: 2.0em;    
}
h4 {
    font-weight: 200;
    font-size: 1.88em; 
    color:#ffffff; 
    padding-bottom: 0.5em;  
}
h5 {
    font-weight: 200;
    font-size: 1.25em;
    color: #6BB9BB;
}
.modal {
    max-width:56.25em;
    color: #1E706E;
    font-size: 1.25em;
    a {
        color: #FF5732;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    h3 {
        color:#FF5732;
        background-color: #ffffff;
        background-image: url('/uploads/images/shovel-orange.svg');
        background-position: 0px 16px;
        background-repeat: no-repeat;
        background-size: 32px 32px;
        padding-left: 48px;
    }
    p {
        padding: 1.0em 0;
    }
    .radios {
        padding-bottom: 1.25em;
        div {
            display: inline-block;            
            padding-right: 1.25em;
            input {
                display: none;
            }
            input + label {
                display: inline-block; 
                height: 24px;
                line-height: 24px; 
                background-image: url('/uploads/images/radio.svg');
                background-position: 0px -44px;
                background-repeat: no-repeat;
                background-size: auto;
                padding-left: 34px;
            }
            input:checked + label {
                background-position: 0px 0px;
            }
        }
    }
    .textfields {
        display: inline-block;
        font-size: 0.75em;
        font-weight: 600;
        float: left;
        margin-right: 1.00em;
        width: 30%;
        label {
            display: block;
            margin-bottom: 0.4em;
        }
        input {
            border:2px solid #6BB9BB;
            font-family: "Quicksand", system-ui;
            font-weight: 500;
            font-size: 1.25em;
            height: 55px;
            line-height: 55px;
            padding: 0 0.50em;
            border-radius: 5px;
            color:#1E706E;
            width: 90%;
        }
        input:focus {
            outline: none;
            border:2px solid #FF5732;
        }
    }
    .checkboxes {
        clear:left;
        padding: 1.25em 0;
        label:first-child {
            display: block;
            padding-bottom: 0.50em;
            font-size: 0.75em;
            font-weight: 600;
        }
        div {
            display: inline-block;            
            padding-right: 1.25em;
            width: 30%;
            padding-bottom: 0.25em;
            input {
                display: none;
            }
            input + label {
                display: inline-block; 
                height: 24px;
                line-height: 24px; 
                background-image: url('/uploads/images/check.svg');
                background-position: 0px -44px;
                background-repeat: no-repeat;
                background-size: auto;
                padding-left: 34px;
            }
            input:checked + label {
                background-position: 0px 0px;
            }
        }
    }
    .message {
        clear: left;
        padding-bottom: 0.75em;
        label {
            display: block;
            padding-bottom: 0.50em;
            font-size: 0.75em;
            font-weight: 600;
        }
        textarea {
            border:2px solid #6BB9BB;
            font-family: "Quicksand", system-ui;
            font-weight: 500;
            font-size: 0.75em;
            padding: 0.50em;
            border-radius: 5px;
            color:#1E706E;
            width: 90%;
        }
        textarea:focus {
            outline: none;
            border:2px solid #FF5732;
        }
    }
    .submit {
        padding-bottom: 0.75em;
        input { 
            font-family: "Quicksand", system-ui;
            font-weight: 500;
            font-size: 0.75em;           
            display: block;
            background-color: #FF5732;
            color: #ffffff;
            padding: 0.81em 1.13em 0.81em 2.43em;
            border-radius: 6.25em;
            border:0.13em solid #FF5732;
            background-image: url('/uploads/images/send-white.svg');
            background-position: 18px 16px;
            background-repeat: no-repeat;
            background-size: auto;
            text-decoration: none;
        }
        input:hover {
            border:0.13em solid #FF5732;
            color:#FF5732;
            background-color: #ffffff;
            background-image: url('/uploads/images/send-orange.svg');
        }
    }
    a.close-modal {
        border-radius: 50px;
        top: 20px;
        right: 20px;
        width:32px;
        height:32px;
        background-color: #ffffff;
        background-image: url('/uploads/images/close.svg');
        background-position: 4px 4px;
        background-repeat: no-repeat;
        background-size: 24px 24px;
    }
    a.close-modal:hover {
        background-color: #C9EFF1;
    }
}