@charset "UTF-8";
/*  CSS Document */

/*  Your Name
Date
==================================================
Table of Contents
==================================================
:: Layout
:: Animation
:: Demo Stuff
:: Grid Stuff
:: Media Query

/*	Layout
================================================== */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Sen:wght@400..800&display=swap');
body { font-family: "EB Garamond", serif; color: #000; font-size: 1.25em; 
    line-height: 1.6em; margin: 0; box-sizing: border-box;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
body, html { height: 100%; }
h2, h3, h6, h31 { font-family: "Sen", sans-serif; 
    line-height: 1.25em; margin-bottom: .5em; margin-top: 40px; color: #ffff99; }
h1 { font-family: "Sen", sans-serif; 
    line-height: 1.25em; margin-bottom: .5em; margin-top: 40px; color: #ffff99; margin-bottom: 100px; margin-top: 150px; font-size: 7.5vw; text-shadow: 8px 8px #2c085e;
}
h2 { font-size: 5em; text-shadow: 5px 5px #2c085e; }
h3 { font-size: 3em; text-shadow: 3px 3px #2c085e; }
h31 { font-size: 2em; text-shadow: 3px 3px #2c085e; }
h4 { font-size: 1em; }
h5 { font-size: .75em; text-align: right;  font-family: 'lancelot', serif;}
.input { font-size: 1em; font-family: "Sen", sans-serif; color: #ffff99;
}
a:link{ color: #ffff99; text-decoration: none; }
a:visited { color: #ffff99; text-decoration: none; }
a:hover { color: #2a3492; }
a:active { color: #ffff99; }
.die { position: absolute; background: white;}
.die:hover { opacity: 0;}
.site:link { color: #ffff99;}
.site:visited { color: #7e79a8;}
.site:hover { color: #2a3492;}
ul, li { margin: 0; list-style-type: none; padding: 0;  }
footer { font-size: 1em; }
nav { padding: 20px ; background: #000000;
    background: linear-gradient(140deg,rgba(0, 0, 0, 1) 0%, rgba(46, 30, 92, 1) 30%, rgba(42, 52, 146, 1) 40%, rgba(46, 30, 92, 1) 50%, rgba(0, 0, 0, 1) 100%); width: 100vw; 
    position: fixed; top: 0; left: 0; max-height: 35px; border-bottom: 2px solid #000000}
.parallax-1 {
    background-image: url(images/Minton_P5_163.jpg);
    height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    max-width: 100vw;
}
.parallax {
    background-image: url(images/Minton_P4_158.jpg);
    height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    max-width: 100vw;
}
.parallax-2 {
    background-image: url(images/Minton_P5_143.jpg);
    height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    max-width: 100vw;
}
.parallax-3 {
    background-image: url(images/Minton_P5_143.jpg);
    height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    max-width: 100vw;
}
.logo {
    float: left;
    max-height: 100px;
}
.portfolio {
    max-width: 250px;
    max-height: 150px;
    position: center;
}
.portgroup {
    border: 3px solid #2c085e;
    padding: 3em;
    grid-gap: 1.5em;
    border-radius: 1.5em;
    margin-top: 3em;
    max-height: 12em;
}
.space {
    padding-top: 100px;
}
/*	Animation
================================================== */
h1::before {
    content:"Andrew Minton";
    animation: rewrite 7.5s; animation-iteration-count: infinite;
}
@keyframes rewrite {
    1%, 74% { content: "Andrew Minton"}
    2%, 73% { content: "Andrew Minto"}
    3%, 72% { content: "Andrew Mint"}
    4%, 71% { content: "Andrew Min"}
    5%, 70% { content: "Andrew Mi"}
    6%, 69% { content: "Andrew M"}
    7%, 68% { content: "Andrew "}
    8%, 67% { content: "Andrew"}
    9%, 66% { content: "Andre"}
    10%, 65% { content: "Andr"}
    11%, 64% { content: "And"}
    12%, 63% { content: "An"}
    13%, 62% { content: "A"}
    14%, 61% { content: "As"}
    15%, 60% { content: "Ast"}
    16%, 59% { content: "Astr"}
    17%, 58% { content: "Astra"}
    18%, 57% { content: "Astral"}
    19%, 56% { content: "Astral "}
    20%, 55% { content: "Astral R"}
    21%, 54% { content: "Astral Ra"}
    22%, 53% { content: "Astral Rav"}
    23%, 52% { content: "Astral Rave"}
    24%, 51% { content: "Astral Raven"}

}
h1::after {
    content: "";
    border-right: 5px solid;
    animation: blink 0.5s; animation-iteration-count: infinite;        
}
@keyframes blink {
    0%, 100% { opacity: 1;}
    50% { opacity: 0;}
}
/*	Demo Stuff
================================================== */
.purple { background-color: #262626; }
body { color: white; }
.mini { z-index: 1}
.center {font-family: "Sen", sans-serif; z-index: 2;}
.center .icon { display: none;}
.center:not(.dropdown-content .mini) {
    display: flex;
    justify-content: center;
    text-decoration: none;
    font-size: 1.5em;
    text-align: center;}
.centername {
    display: block;
    text-align: center;
    margin: 0px;
    position: absolute;
    bottom: 0px;
    min-width: 100vw;
}
.navbar {
    z-index: 2;
    display: flex; /* Enables Flexbox */
    justify-content: space-between; /* Pushes content to opposite ends */
    align-items: center; /* Vertically centers items */
    padding: 30px;    /* Example styling */
}
.nav-links {
    list-style: none;
    margin: 0;
    padding-right: 100px;
    display: flex;
}
.nav-links li {
    margin-left: 50px; /* Adds space between links */
    line-height: 2em;
    font-size: 2vw;
}
.page-wrap {max-width: 1100px; margin: 0 auto 50px; }


/* Slideshow container */
.slideshow-container {
    max-width: 75vw;
    min-height: 500px;
    position: relative;
    margin: auto;
}

.slideshow-container2 {
    max-width: 40vw;
    position: relative;
    margin: auto;
    display:flex;
    margin-top: 50px;
}
.slideshow-container4 {
    max-width: 1200px;
    margin-top: 50px;
    position: relative;
    display: flex;
    margin: auto;
}
.slideshow-container5 {
    max-width: 700px;
    margin-top: 100px;
    position: relative;
    display: flex;
    margin: auto;
}
.port-container {
    max-width: 50vw;
    position: relative;
    margin: auto;
    display:flex;

}
.port-container2 {
    max-width: 800px;
    max-height: 500px;
    position: relative;
    margin: auto;
    display:flex;

}
.port-container3 {
    max-width: 500px;
    max-height: 500px;
    position: relative;
    margin: auto;
    display:flex;

}
.slideshow-container3 {
    max-width: 40vw;
    position: relative;
    margin: auto;
    margin-top: 50px;
}
/* Hide the images by default */
.mySlides {
    display: none;
    max-height: 666.6px;
}
.picture {
    max-height: 100px;
}
.portpic {
    max-width: 60vw;
    display: flex;
    margin-right: auto;
    margin-left: 12em;
}
.portpic2 {
    max-width: 60vw;
    display: flex;
    margin-left: auto;
    margin-right: 12em;
}
/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
    color: #4d0099;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: white;
    font-size: 24px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #ffff99;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.dot2 {
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: 0 4px;
    background-color: #ffff99;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active, .dot:hover {
    background-color: #4d0099;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}
.background {
    background-image: url(images/Backgrounds-03-01.webp);
    height: auto;
    background-size: auto;
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-position: center center;
    width: 100vw;
    min-height: 100vh;
}
.padding {
    margin-top: 60px;
    margin-left: 40px;
}
.padding2 {
    margin-top: 250px;
}
.padding4 {
    margin-bottom: 200px;
    margin-left: 100px;
    margin-right: 100px;
    padding-bottom: 50px;
}
.padding3 {
    margin-bottom: 200px;
    margin-left: 300px;
    margin-right: 300px;
    padding-bottom: 50px;
}
.fading {
    background-color: rgba(0,0,0,0.4);
    background-size: auto;
    background-attachment: absolute;
    background-position: center;
    padding: 40px;
    box-shadow: 0 0 8px 8px rgba(0,0,0,0) inset;
    background-repeat: repeat-y 50% 0;
    min-height: 75vh;
}
.fading2 {
    background-color: rgba(0,0,0,0.4);
    background-size: auto;
    background-attachment: absolute;
    background-position: center;
    padding-top: 100px;
    padding-right: 40px;
    box-shadow: 0 0 8px 8px rgba(0,0,0,0) inset;
    background-repeat: repeat-y 50% 0;
    min-height: 75vh;
}
.video2 {
    margin-top: 175px;
    max-width: 1200px;
    object-position: center;
    object-fit: cover;
}

/*	Grid Stuff
================================================== */
.grid-container-three {
    display: grid; 
    grid-template-columns: 33% 33% 33%;

}


.grid-container-two {
    display: grid; 
    grid-template-columns: 48% 4% 48%;    
}

.item-1, .item-3, .item-5 {
    grid-column-start: 1;
    grid-column-end: 2;
    border: 3px solid #2c085e;
    padding: 50px;
    grid-gap: 24px;
    border-radius: 25px;
    margin-top: 50px;
}

.item-2, .item-4, .item-6 {
    grid-column-start: 3;
    grid-column-end: 4;
    border: 3px solid #2c085e;
    padding: 50px;
    grid-gap: 24px;
    border-radius: 25px;
    margin-top: 50px;
}
.grid-container-pro {
    display: grid;
    grid-template-columns: 48% 4% 48%;
    border: 3px solid #2c085e;
    padding: 50px;
    grid-gap: 24px;
    border-radius: 25px;
    margin-top: 50px;
}
.float {
    float: left;
    padding-right: 50px;
    padding-left: 50px;
}
.float3 {
    float: right;
    padding-right: 50px;
    padding-left: 50px;
}
.float2 {
    float: left;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 50px;
}
.title-pro {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
}
.porttext {
    float: right;
    padding-left: 2.5em;
    padding-top: 14em;
    text-align: center;
}
.porttext2 {
    float: left;
    padding-right: 2.5em;
    padding-top: 14em;
    text-align: center;
}
.pro-1, .pro-3, .pro-5 {
    grid-column-start: 1;
    grid-column-end: 2;
}
.pro-2, .pro-4, .pro-6 {
    grid-column-start: 3;
    grid-column-end: 4;
}
.grid-container-four {
    display: grid; 
    grid-template-columns: 25% 25% 25% 25%;
    border: 3px solid #2c085e;
    padding: 50px;
    grid-gap: 24px;
    border-radius: 25px;
    margin-top: 50px;
}
.photography {
    border: 3px solid #2c085e;
    padding: 50px;
    grid-gap: 24px;
    border-radius: 25px;
    margin-top: 50px;
}
.photography2 {
    padding: 50px;
    grid-gap: 24px;
    border-radius: 25px;
    margin-top: 50px;
}
.photography3 {
    grid-gap: 24px;
    border-radius: 25px;
    margin-top: 50px;
}
.tall {
    max-height: 666.6px;
    position: center;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #2c085e;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #ffff99;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    padding: 20px;
    margin-top: 50px;
    margin-bottom: 30px;
}
.contact-grid {
    display: grid; 
    grid-template-columns: 48% 4% 48%;
}
.left {
    grid-column-start: 1;
    grid-column-end: 2;
}
.right {
    grid-column-start: 3;
    grid-column-end: 4;
}
.middle {
    grid-column-start: 1;
    grid-column-end: 4;
}
.middlecenter {
    grid-column-start: 1;
    grid-column-end: 4;
    position: center;
    text-align: center;
}
.video {
    max-width: 800px;
    display: flex;
    margin-right: auto;
    margin-left: auto;
}
.video4 {
    max-height: 500px;
    max-width: 800px;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    object-position: center;
    position: relative;
}
.video3 {
    max-height: 500px;
    max-width: 800px;
    display: flex;
    margin-right: auto;
    margin-left: auto;
}
.mad {
    display: flex;
    align-items: center;
    padding: 25px;
}
.mad2 {
    display: inline-block;
    vertical-align: top;
    padding-left: 40px;
    padding-bottom: 20px;
}
/*	Media Query Stuff
================================================== */
@media screen and (max-width: 900px) { 
    .page-wrap { max-width: 90vw; }
    .grid-container-three, .grid-container-two, .grid-container-four, .grid-container-pro { grid-template-columns: auto; grid-template-columns: 100%;}
    h2 {font-size: 3em;}
    h3 {font-size: 2em;}
    .item-1, .item-2, .item-3, .item-4, .item-5, .item-6, .pro-1, .pro-2, .pro-3, .pro-4, .pro-5, .pro-6 {
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .porttext {
        float: inherit;
        padding-top: 2em;
    }
    .porttext2 {
        float: inherit;
        padding-top: 2em;
    }
    .center a:not(:first-child) {display: none;}
    .center a.icon {
        float: right; display: block;
    }
    .center.responsive {position: relative;}
    .center.responsive .icon {
        position: absolute;
        right: 0%;
        top: 0%;
    }
    .center.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .parallax, .parallax-1, .parallax-2, .parallax-3 {
        background-attachment: scroll;
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
    }
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
}
@media screen and (min-width: 900px){
    .page-wrap { min-width: 90vw; }
    .porttext {
        float: right;
        padding-left: 1em;
        padding-top: 3em;
        text-align: center;
    }
    .porttext2 {
        float: left;
        padding-right: 1em;
        padding-top: 3em;
        text-align: center;
    }
    h2 { font-size: 3em; text-shadow: 5px 5px #2c085e; }
    h3 { font-size: 1em; text-shadow: 3px 3px #2c085e; }
    .mobile-only {
        display: none;
    }
    .desktop-only {
        display: block;
    }
}