body {
    background-color: white;
    font-family: "Merriweather", serif;
    font-size: 40px;
    margin: 0 150px;
    margin-bottom: 20px;
}

.hidden {
    display: none;
}

.video-container {
    height: 50vh;
    width: 8 0vw;
    position: relative;
}

.video-container video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: 0;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption h2 {
    z-index: 1;
    position: relative;
    text-align: center;
    color: #dc0000;
    padding: 10px;
    font-size: 100px;
}

a:link {
    color: black;
}

a:visited {
    color: Black;
}

a:hover {
    color: yellowgreen;
    text-decoration: none;
}

a:active {
    color: blue;
}

.Nav {
    font-size: 35px;
    margin-top: 50px;
}

footer {
    font-size: medium;
    text-align: center;
    background-color: black;
    color: White;
    width: 100%;
    position: absolute;
    left: 0;
    height: 160px;
    max-height: 160px;
}
h1 {
    font-size: 30px;
}

img {
    margin-top: 20px;
    margin-bottom: 20px;
}

.profilepic {
    text-align: center;
    margin-top: 30px;
}

.intromessage {
    font-size: 40px;
    margin: 0 300px;
    font-family: "Lobster", serif;
}

.portfoliolink {
    text-align: center;
}

.categoriesBox {
    max-width: 30%;
    font-size: 30px;
    margin-top: 300px;
    border: 3px solid black;
}

.categoriesBox h2 {
    cursor: pointer;
}

.Thumbnails {
    display: flex;
    justify-content: space-evenly;
    font-size: 20px;
}

h2 {
    font-size: 30px;
    text-align: center;

}

h3 {
    text-align: center;
    font-size: 20px;
    color: black;
    margin-top: 30px;
}

.wixparagraphs p {
    color: black;
    font-size: 15px;
}

h4 {
    font-size: 30px;

}

.portfolioinfo h1 {
    font-size: 40px;
    text-align: center;
    color: black;

}

.portfoiopageinfo {
    font-size: 30px;
    color:black;
    margin-top: 30px;
}

p {
    font-size: 20px;
}

.KVmoviegif {
    display: flex;
    justify-content: space-evenly;
   
    
}


.Header1 {
    display: flex;
    align-items: start;
    justify-content: space-between;
    background-color: white;
    color: Black;
    margin-top: 30px;
    font-size: 20px;
}

.PizzaLogos {
    text-align: center;
    margin-bottom: 20px;
    margin: 30px;
}

#portfolio2 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.previousworksthumb {
    display: flex;
    justify-content: space-evenly;
}

.paperprototypes {
    display: flex;
    justify-content: space-evenly;


}

.videoprototypes {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

.videoequipment {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

#corporatevideolink {
    text-align: center;
    font-size: 15px;
    margin-bottom: 60px;
    color: black;
}

#corporatevideolink h2 {
    font-size: 20px;
    margin-top: 40px;
}

h4 {
    font-size: medium;
    text-align: center;
}

.projectnames h1 {
    font-size: 30px;
    color: black;
}

.ContactForm {
    text-align: center;
    font-size: 30px;
    border: 2px solid black;
    padding-top: 30px;
    margin-bottom: 70px;
}

.contactFormFields {
    display: flex;
    justify-content: space-between;
    margin: 10px 20px;
}

.contactme {
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
    border: 2px solid black;
}

.contactparagraph {
    font-size: 20px;
    vertical-align: middle;
    color:black
}

.myprograms {
    font-size: 15px;
    text-align: center;
    color: black;
}

.programicons {
    display: flex;
    margin-right: 40px;
}

.programicons img {
    margin-top: 5px !important;
    margin-left: 5px;
}

.homepageinfo {
    font-size: 20px;
    border: 2px solid White;
}

#clickable {
    cursor: pointer;
    color: blue;
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: flex;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    top: 25px;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    font-size: 16px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: wheat
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

#alignRight {
    text-align: center;
    font-size: 30px;
    margin-bottom: 80px;
    font-family: "Lobster", serif;
}

.projectsinfo {
    color: black;
}
.bigFont {
    font-size: 20px;
    color: black;
   
}

.portfolioinfo h1 {
    font-size: 20px;
}



.Thumbnails img {
    margin-top: 20px;
    min-height: 310px;
}

.Thumbnails .bigFont {
    font-weight: bold;
}

.Thumbnails>div {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.alignedLabels {
    text-align: end;
    display: inline-block;
    font-size: 20px;
}

.contactInfoContainer h3 {
    font-size: 30px;
    margin-bottom: 10px !important;
    margin-top: 10px;
}

.contactInfoContainer .infoLabel {
    margin-top: 40px;
}

.contactInfoContainer {
    max-width: 50%;
    display: flex;
    align-items: center;
}

.contactFormContainer {
    width: 40%;
    color:black;
}

.messageinput {
    margin-top: 10px;
    height: 60px;
}

#submitButton {
    height: 30px;
    width: 200px;
    border-radius: 10px;
    margin-bottom: 30px;
    margin-top: 20px;
}

.aboutmoreinfo {
    font-size: 20px;
    color: black;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.socialmediacontainer{
    display: flex;
    justify-content: center;
    margin-top: 0;
    margin: 0px;
}
.socialmediacontainer img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.myskills {
    display: flex;
    text-align: left;
    font-size: large;
}

h1 {
    font-size: 50px;
    text-align: center;
}

.aboutmeinfo {
    display: flex;
    justify-content: space-between;

}

.contactinfo {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.vklogo {
    text-align: center;
    margin-top: 45px;
}

h2 {
    color: black;
}

h4 {
    color: black;
}
#vklogo {
    text-align: center;
    margin-bottom: 30px;
}

#vkparagraph {
    margin-top: 20px;
}

#vklogo2 {
    text-align: center;
}

.vkparagraphs p{
    text-align: left;
    font-size: 20px;
}

.vksketches {
    display: flex;
    justify-content: space-evenly;
    margin: 30px;
}

.vkdesignpages {
    display: flex;
    justify-content: center;
}

.techlist {
    font-size: medium;
    text-align: left;
}

.logoimages {
    display: block;
    text-align: center;
}

.wixlink {
    text-align: center;
    font-size: 30px;
    margin-bottom: 80px;
    color: black;
}

.KVmoviefiglink {
    color: black;
    margin-top: 60px;
}

.KVmoviepaper {
    color:black;
    margin-bottom: 60px;
}
.KVmoviedesigns {
    color: black;
    margin-top: 30px;
}

.KVmovielink {
    color: black;
}

.appwireframes {
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
}

.vkpersonas {
    display: flex;
    justify-content: space-evenly;
}

hr.new4 {
    border-top: 3px solid white;
}

hr.new3 {
    border-top: 3px dashed white;
}

.hidden {
    display: none;
}

.homeslogan p {
    text-align: center;
    font-family: "Lobster", serif;
    color: black;
    font-size: 40px;
    margin-top: 40px;
}

.homepageicons {
    display: flex;
    justify-content: space-evenly;
}

#homepagerecent {
    border: 3px solid black;
    font-size: 50px;
}

hr.new4 {
    border-top: 3px dashed black;
}

.pageicons2 {
    font-size: medium;
    margin-top: 40px;
    color: white;
}


.homepageicons {
    font-size: medium;
    margin-top: 40px;
    color: white;
}
.mnavIcon {
    display: none;
}


.logoContainer {
    display: flex;
    justify-content: space-between;
}

.mobileviewhomepage {
    display: inline;
}

.mobileimage {
    overflow: hidden;
}
footer p{
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 15px;
}
footer img{
    margin-top: 0;
    margin-bottom: 0;
}
footer h4{
    margin-bottom: 0;
}
.flex-wrapper{
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
}

.Thumbnails p {
    font-size: 18px;
}
@media screen and (max-width: 450px) {
    body{
        margin: 10px;
    }

    .Thumbnails p {
        font-size: 20px;
    }
   
    .mobilenav {
        display: block;
        height: 40px;
        overflow: hidden;
        margin: 0;
        font-size: 20px;
    }
    .mobileView {
        text-align: center;
    }
    .mnavIcon {
        display: block;
        text-align: center;
        font-size: 30px;
    }
    .mobileView {
        display: block;
        font-size: 15px;
    }
    .mobileView h1 {
        font-size: 25px;
        color: black;
    }
    .programicons a{
        display: block;
        width: 100%;
        font-size: 30px;
    }
    .programicons {
        display: block;
        margin-right: 0px;
    }
    .expanded {
        height: 250px;
    }
    .homeslogan p {
        padding: 10px;
        text-align: center;
        font-size: 30px;
    }
    .logoContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .Thumbnails {
        display: block;
    }

    .Thumbnails img {
        max-width: 100%;
    }

    .Thumbnails>div {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .Thumbnails p {
        font-size: 20px;
        padding: 10px;
    }

    .paperprototypes {
        display: block;
        
    }

    .paperprototypes img {
        width: 100%;
    }

    .paperprototypes.smallWidth,
    .videoprototypes.smallWidth {
        width: 45%;
        margin: auto;
        align-content: center;
    }

    #corporatevideolink iframe {
        width: 100% !important;
    }

    .videoprototypes {
        display: block;
        margin-top: 20px;
        border: 2px solid black;
    }

    .videoprototypes img {
        width: 100%;
    }
    .portfoiopageinfo,.vkparagraphs {
        font-size: 20px;
        padding: 10px;
    }
    .aboutmeinfo, .contactinfo, .appwireframes, .vkdesignpages, .vkdesignpages, .KVmoviegif{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .portfolioinfo img,.vkpersonas img,.paperprototypes img,
    .vkdesignpages img, .logoimages img, .vklogo img{
        width: 100%;
    }
    .aboutmoreinfo, .contactInfoContainer, .contactFormContainer{
        width: 100%;
        max-width: 100%;
    }
    .dropdown:hover .dropdown-content {
        display: none;
    }
    #editingScreen img{
        height: 250px !important;
    }
    .templeImages img{
        width: 80% !important;
    }
    .templeImages{
        text-align: center;
    }

}

@media only screen 
   and (min-device-width :768px) 
   and (max-device-width : 1024px) {
    body{
        margin: 0 20px;
    }
    .mobileimage {
        overflow: hidden;
    }
    .tabletres{
        overflow: hidden;
    }
    .homepagekv{
        max-width: 30%;
    }
    .homepagekv img{
        width: 100% !important;
        height: 125px;
    }
    .mobilenav{
        margin-left: 50px;
    }
    .programicons{
        margin-right: 20px;
    }
    .tabletreskv {
        width: auto;
        height: auto;
    }
    .aboutmeinfo, .contactinfo{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    .aboutmoreinfo, .contactInfoContainer{
        max-width: unset;
    }
    .contactFormContainer{
        width: 60%;
    }
    .paperprototypes, .appwireframes, .videoprototypes{
        flex-wrap: wrap;
    }
    .dropdown:hover .dropdown-content {
        display: none;
    }
    .Thumbnails>div {
        max-width: 48%;
    }
    .Thumbnails>div img{
        width: 100% !important;
    }
    #wixsite{
        justify-content: center;
    }
    footer.fixed{
        font-size: medium;
        text-align: center;
        background-color: white;
        color: black;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        height: 160px;
        max-height: 160px;
    }
}