@font-face {
  font-family: bebasBold;
  src: url(fonts/BebasNeue-Bold.ttf);
}

@font-face {
  font-family: now;
  src: url(fonts/Now-Regular.otf);
}

@font-face {
  font-family: playfair-medium;
  src: url(fonts/PlayfairDisplay-Medium.ttf);
}
 
@font-face {
  font-family: playfair-regular;
  src: url(fonts/PlayfairDisplay-Regular.ttf);
}
 

body {
    margin: 0px;
    overflow: hidden;
    font-family: sans-serif;
}



#container{
    width: 100%;
    height: 100vh;
    margin: 0;
}


#main {
    width: 94%;
    height: 90%;
    box-sizing: border-box;
    background-color: #f5f1ee;
    margin: 4vh auto 0 auto;
    border-radius: 27px;
    overflow: hidden;
    position: relative;
}



#info {
    width: 42%;
    height: 100%;
    float: left;
    position: relative;
}

#info-container {
    position: absolute;
    width: 80%;
    height: auto;
    left: 6%;
    bottom: 2%;
    padding-bottom: 20px;
}

#my-img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: gray;
    margin-bottom: 17px;
    background-image: url(imgs/cvpic.png);
    background-size: cover;
    background-position: center;
}

#heading {
    font-size: 50px;
    padding: 10px 10px 0px 10px;
    font-family: playfair-medium;
}

#about-me {
    padding: 0px 10px 10px 10px;
    font-family: playfair-regular;
    font-size: 24px;
    font-weight: bold;
}

#contact {
    text-decoration: underline;
    font-size: 18px;
    font-weight: normal;
}

#contact:hover {
    cursor: pointer;
    color: darkviolet;
}

#large-items-container:hover {
    cursor: pointer;
}

#contact-mob {
    text-decoration: underline;
    float: left;
}

#contact-mob:hover {
    cursor: pointer;
    color: darkviolet;
}
    
#items {
    width: 58%;
    height: 100%;
    float: left;
    background-color: #f7f7f7;
    overflow: scroll;
}

#items-scroll {
    width: 80%;
    margin: 30px auto 30px auto;
    height: auto;
    overflow: scroll;
}

.item {
    width: 46%;
    height: 300px;
    margin: 2%;
    float: left;
    background-color: white;
    border-radius: 15px;
    filter: drop-shadow(5px 5px 5px lightgray);
    position: relative;
    background-size: cover;
}

.item:hover {
    cursor: pointer;
}



.item-details {
    width: 62%;
    height: 163px;
    margin: 0 auto;
    max-width: 220px;
    position: absolute;
     -ms-transform: translateY(-50%);
    transform: translateY(-50%);

    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX: ;
    
}

.container-for-hover {
    transition: 0.5s;
    transform-origin: 50% 50%;
    transform-box: fill-box;
    width: 100%;
    height: 100%;
}

.container-for-hover:hover {
    transform: scale(1.05);
}


.logosmaller {
    width: 65%!important;
    max-width: 250px!important;
}

.itemlogo img {
    margin: auto;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.item-heading {
    font-size: 21px;
    text-align: center;
    font-family: playfair-regular;
    bottom: 0px;
    position: absolute;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    box-shadow: 1px 2px 13px -2px rgba(0,0,0,0.3);
-webkit-box-shadow: 1px 2px 13px -2px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 2px 13px -2px rgba(0,0,0,0.3);
}


.itemlogo {
    width: 90%;
    max-width: 200px;
    height: auto;
    margin: 0 auto 0 auto;
}

.itemlogo-lower{
         padding-top: 34px;
}

.shaded {
    color: #fff;
    /*filter: drop-shadow(0px 0px 5px darkgray);*/
}


#large-items-container {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.65);
    position: absolute;
    z-index: 999;
    /*opacity: 0;*/
    pointer-events: none;
    display: none;
}

/*
#large-items-container:hover {
    cursor: pointer;
}
*/

.item-large {
    width: 90%;
    max-width: 1280px;
    height: 90%;
    background-color: white;
    filter: drop-shadow(5px 5px 5px lightgray);
    border-radius: 20px;
    margin: 5vh auto 5vh auto;
    position: relative;
    display: none;
    overflow: scroll;
}

.large-close {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 32px;
    font-size: 25px;
    margin-left: 93%;
    font-family: now;
    z-index: 999;
    background-image: url(imgs/close.png);
    background-size: cover;
    text-align: center;
    border-radius: 20px;
}

.large-close:hover {
    cursor: pointer;
}

.large-title {
    width: 80%;
    margin-left: 10%;
    top: 60px;
    font-size: 35px;
    text-align: center;
    font-family: playfair-medium;
}

.project-content {
    width: 80%;
    left: 10%;
    top: 65px;
    font-size: 20px;
    text-align: center;
    position: absolute;
    background-color: white;
    min-height: 500px;
    padding-bottom: 50px;
}



.iframeContainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 100%
}

.iframeContainerWide {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%
}

.iframeContainerStory {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
    max-height: 650px;
  padding-top: 1.77%;
    padding-bottom: 20px;
}

.iframeBanner {
  position: relative;
  overflow: hidden;
  width: 970px;
  height: 250px;
}



.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
    border: 0px;
}

iframe {
    border: none;

}

#ssframe1 {
    width: 450px;
    height: 700px;
    margin: 50px auto 0 auto;
}


@media only screen and (max-width: 670px) {
    #ssframe1 {
        margin: 0px auto 0 auto;
    }
}



#mrec {
    width: 300px;
    height: 250px;
    margin: 50px auto 0 auto;
}

#island {
    width: 300px;
    height: 600px;
    margin: 50px auto 0 auto;
}
	

#heading-mobile {
    display: none;
    font-family: playfair-medium;
}


/*  items   */

#item1 {
    background-image: url('imgs/thumbs/1-ink-floral-thumbnail.jpg');
}

#item2 {
    background-image: url('imgs/thumbs/2-lipstick-thumbnail.jpg');
}


#item3 {
    background-image: url('imgs/thumbs/painted-paisley-thumbnail.jpg');
}


#item4 {
    background-image: url('imgs/thumbs/butterfly-thumbnail.jpg');
}


#item5 {
    background-image: url('imgs/thumbs/floral-paisley-thumbnail.jpg');
}


#item6 {
    background-image: url('imgs/thumbs/6-beautyedit-thumbnail.jpg');
}


#item7 {
    background-image: url('imgs/thumbs/7-paisley-thumbnail.jpg');
}


#item8 {
    background-image: url('imgs/thumbs/8-fragrances-thumbnail.jpg');
}


#item9 {
    background-image: url('imgs/thumbs/9-xmas-thumbnail.jpg');
}

#item10 {
    background-image: url('imgs/thumbs/md-thumbnail.jpg');
}

#item11 {
    background-image: url('imgs/thumbs/swirl-thumbnail.jpg');
}

#item13 {
    background-image: url('imgs/thumbs/plush-thumbnail.jpg');
}

#item15 {
    background-image: url('imgs/thumbs/check-thumbnail.jpg');
}

#item16 {
    background-image: url('imgs/thumbs/thumbnail-postieBsmileythermal.jpg');
}

#item17 {
    background-image: url('imgs/thumbs/thumbnail-postieballetkittensprint.jpg');
}

#item18 {
    background-image: url('imgs/thumbs/thumbnail-postieGbutterflyset.jpg');
}

#item19 {
    background-image: url('imgs/thumbs/thumbnail-postieresortprint.jpg');
}

#item20 {
    background-image: url('imgs/thumbs/5-star-thumbnail.jpg');
}

#item21 {
    background-image: url('imgs/thumbs/tropicalwave1-thumbnail.jpg');
}
#item22 {
    background-image: url('imgs/thumbs/surfgeo2-thumbnail.jpg');
}




@media only screen and (min-width: 1580px) {
    
    .large-close {
    margin-left: 92%;
    }
    
}

@media only screen and (min-width: 1590px) {
    
    .large-close {
    margin-left: 91%;
    }
    
}

@media only screen and (min-width: 1620px) {
    
    .large-close {
    margin-left: 90%;
    }
    
}

@media only screen and (min-width: 1670px) {
    
    .large-close {
    margin-left: 89%;
    }
    
}

@media only screen and (min-width: 1720px) {
    
    .large-close {
    margin-left: 88%;
    }
    
}

@media only screen and (min-width: 1760px) {
    
    .large-close {
    margin-left: 87%;
    }
    
}ho

@media only screen and (min-width: 1820px) {
    
    .large-close {
    margin-left: 86%;
    }
    
}

@media only screen and (min-width: 1860px) {
    
    .large-close {
    margin-left: 85%;
    }
    
}

@media only screen and (min-width: 1900px) {
    
    .large-close {
    margin-left: 84%;
    }
    
}


@media only screen and (min-width: 1940px) {
    
    .large-close {
    margin-left: 83%;
    }
    
}

@media only screen and (min-width: 1980px) {
    
    .large-close {
    margin-left: 82%;
    }
    
}


@media only screen and (min-width: 2020px) {
    
    .large-close {
    margin-left: 81%;
    }
    
}

@media only screen and (min-width: 2140px) {
    
    .large-close {
    margin-left: 80%;
    }
    
}

@media only screen and (min-width: 2200px) {
    
    .large-close {
    margin-left: 79%;
    }
    
}

@media only screen and (min-width: 2300px) {
    
    .large-close {
    margin-left: 78%;
    }
    
}

@media only screen and (min-width: 2400px) {
    
    .large-close {
    margin-left: 77%;
    }
    
}

@media only screen and (min-width: 2500px) {
    
    .large-close {
    margin-left: 76%;
    }
    
}


@media only screen and (min-width: 2585px) {
    
    .large-close {
    margin-left: 75%;
    }
    
}


/* mobile */
#sevenbanner {
    display:block;
}



#sevenalt {
    display: none;
    background-color: #f3f3f3;
    text-align: center;
    width: 95%;
    margin-left: 2.5%;
    height: 300px;
    padding: 10px;
    box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
  
    #sevenbanner {
        display: none;
    }
    
    #sevenalt {
        display: block;
    }
    
}

@media only screen and (max-width: 1370px) {
  
    #info {
        width: 40%;
    }
    
    #items {
        width: 60%;
    }
    
    .item {
        height: 280px;
    }
    
}

@media only screen and (max-width: 1360px) {
    
    #items-scroll {
        width: 85%;
    }
    
    
}

@media only screen and (max-width: 1250px) {
    
    #heading {
        font-size: 45px;
    }
    
    
    #my-img {
        width: 200px;
        height: 200px;
        border-radius: 100px;
    }
    
}


@media only screen and (max-width: 1170px) {
  
    #info {
        width: 100%;
        height: 272px;
    }
    
    #info-container {
        height: 90%;
        padding: 0px;
        bottom: 0px;
        left: 0px;
        width: 725px;
        margin: 18px auto 0 auto;
        position: relative;
    }
    
    #infodetails {
        width: auto;
        height: 100%;
        float: left;
    }
    
    #my-img {
        float: left;
        margin-top: 17px;
    }
    
    #heading {
        padding-left: 35px;
        font-size: 37px;
    }
    
    #about-me {
        padding-left: 35px;
        max-width: 460px;
    }
    
    
    #items-scroll {
        width: 75%;
    }
    
    #items {
        width: 100%;
        height: 68%;
    }
    
    .item {
        height: 280px;
    }
    
}


@media only screen and (max-width: 980px) {

    .large-close {
        margin-left: 92%;
        top: 30px;
    }

}

@media only screen and (max-width: 980px) {
    
    #items-scroll {
        width: 80%;
    }
    
    
}



@media only screen and (max-width: 900px) {
   
    .item-large{
        width: 92%;
        max-width: 1280px;
        height: 94%;
        margin: 3vh auto 5vh auto;
    }
    
    .project-content {
        width: 86%;
        left: 7%;
    }
    
    .large-close {
        margin-left: 93%;
        top: 14px;
    }
    
}

@media only screen and (max-width: 835px) {
    
    
    #items-scroll {
        width: 90%;
    }
    
    #info {
        width: 100%;
        height: 239px;
    }
    
    
    #info-container {
        width: 95%;
    }

    #my-img {
        float: none;
        margin: 0 auto;
         width: 100px;
        height: 100px;
        border-radius: 50px;
    }
    
    #heading-mobile {
        display: block;
        font-size: 29px;
        text-align: center;
        margin-top: 13px;
    }
    
    #heading {
        display: none;
    }
    
    #infodetails {
        width: 95%;
        height: auto;
        float: none;
        margin-left: 2.5%;
    }
    
    #about-me {
        padding-left: 0px; 
        max-width: 477px;
        text-align: center;
        margin: 0 auto;
        font-size: 15px;
    }
    
    #items {
        height: 71%;
    }
    
    
}


@media only screen and (max-width: 745px) {

    .large-close {
        margin-left: 92%;
    }

}




@media only screen and (max-width: 715px) {
    
    #items-scroll {
        width: 95%;
    }
    
    
}


@media only screen and (max-width: 660px) {

    .large-close {
        margin-left: 91%;
    }

}



@media only screen and (max-width: 640px) {
    
   
    .item {
        height: 240px;
    }
    
    #info {
        height: auto;
        padding-bottom: 10px;
    }
    
    #items {
        height: 72%;
    }

    
}

@media only screen and (max-width: 533px) {

    .large-close {
        margin-left: 90%;
    }

}


@media only screen and (max-width: 520px) {
   
    #main {
        height: 96%;
        margin: 2vh auto 0 auto;
    }
    
    .item {
        width: 94%;
    }
    
    .itemlogo {
    margin: 7% auto 0 auto;
    }
    
    .item-details {
        top: 12%;
    }
    
    .item-heading {
    bottom: -10px;
    }
    
    .itemlogolower {
        margin: 14% auto 0 auto!important;
    }

    .headinghigher {
        bottom: 3px!important;
    }

    
    .sevendays-heading {
        bottom: 3px!important;
    }
    
    
    #items-scroll {
        padding-bottom: 85px;
    }
    
    #about-me {
        font-size: 13px;
    }
    
}

@media only screen and (max-width: 485px) {

    .large-close {
        margin-left: 89%;
    }
    
    .large-title {
        top: 38px;
        font-size: 30px;
    }

}


@media only screen and (max-width: 465px) {

    .large-close {
        margin-left: 88%;
    }

}

/*
.mobileanim {
  animation-name: example;
  animation-duration: 1s;
  overflow: hidden;
  animation-play-state: paused;
}


@keyframes example {
  from {height: 320px;}
  to {height: 174px;}
}

*/