/* mysterious javascript port function start */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* mysterious javascript port function end */



body {
  
	font-family: sans-serif;
    font-weight: 100;
    font-size:9pt;
    line-height:1.45;
  background-color:aliceblue;
}


/* top section start */


/*logo start*/

#logo {
    position:relative;
    width: 100px;
    height: 100px;
    overflow:hidden;
    display:inline-block;
	margin-left:10px;
	
}

#logohover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    opacity: 0;
}

#logohover:hover {
    opacity: 1;
  }

/*logo end*/


header {
	display:flex;
	width:100%;
	min-height:100px;
    padding-left:2%;
}

nav {
    margin-left:2%;
	list-style: none;
	position:relative;
	display:inline-block;
    font-family: "Courier New";
  font-weight: 1000;
    font-size:15px;
}

nav li {
	display:inline-block;
	padding:20px;
    margin-top:7px;
	
}

nav .contact {
	color:deeppink;
	display:inline;
	position:relative;
	white-space:nowrap;
}

nav a:hover {
	color: deeppink;
}

header ul a {
	color:blue;
	text-decoration: none;
}

.socials img{
    width:18px;
    height:18px;
    margin-right:20px;
    filter: grayscale();
}

.socials img:hover {
    filter:none;
}


/* top section end */






/* front page gallery start */

.gallery {
  position: relative;
    width:90%;
    max-width:1550px;
    margin-left:auto;
    margin-right:auto;
    margin-left:8%;
    
}

.portrait {
    overflow:auto;
    width:100%;
    margin: 0 auto;
}

/* clearfix */
.portrait:after {
  content: '';
  display: block;
  clear: both;
}


.portrait,
.itemcontainer {
    width: 30%;
    margin-bottom: 2rem;
    transition: all .25s ease-in-out;
    overflow: auto;
}


.itemcontainer.wide {
    width: 60%;
}



/* overlay start */






.text {
	opacity:0;
  color: white;
	font-family: "helvetica";
  font-size: 19px;
    font-weight:300;
    line-height:1.2;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
	 transition: all .25s ease-in-out;
    display:inline;
}

.itemcontainer:hover .text {
	opacity:1;
}


.itemcontainer{
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 10%,rgba(0,0,0,0.85) 90%);
}
    .itemcontainer:hover img {
        mix-blend-mode: multiply;
        filter:grayscale(10%);
    }

 .itemcontainer:hover video {
        mix-blend-mode: multiply;
        filter:grayscale(10%);
    }


/* overlay end */
	  
	 .itemcontainer img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 .itemcontainer video {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itemcontainer .video {
    display:width: 100%; 
    object-fit: cover;
    vertical-align: middle;

}

/* front page gallery end */





	
	
/* port window settings start */



.port {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding-top: 10px;
    padding: 3% 12% 0% 12%;
  background: aliceblue;
  background-color: aliceblue;
  z-index: 103;
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  border-bottom: 1px solid #d0d0d0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
    
}


	/* port layout start */
	
.row {
	width: 90%;
	margin-left:auto;
	margin-right: auto;
	
}

.row img {
	float:left;
    max-width:75%;
	padding: 0 29px 0 0;
}

#aboutme img {
    padding-bottom: 18px;
}

.row .wide {
    max-width:100%;
}

	
.row .description {
	float:right;
	width: 400;
	padding: 30px 40px 0 0;
}

.port h1 {
  font-size: 26px;
  line-height: 1.2;
    font-family: "Courier New";
    font-weight:500;
  padding: 0 0 10px 0;
	color:deeppink;
}

.award {
    width:130px;
    margin: 35px 10px 0px 10px;
}

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

   .row img {
        width: 100%;
        padding-bottom: 10px;
        float: none;
    }

    .row .description {
        width: 100%;
        padding-bottom: 10px;
        float: none;
    }
}
	
	/* port layout end */
	


.port .social {
	display:inline-block;
	position:relative;
	width:100px;
	padding-top:20px;
}


	

	/* port animation start */
	
.port > * {
  opacity: 0;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.port.item_open {
  visibility: visible;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.8s ease-in-out;
    
}

.close img {
    max-width:50px;
}

.close{
    position: absolute;
    max-width:100%;
    margin-left:75%;
    z-index: 1004;

    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

.item_open {
    visibility:visible;
}

.port > * {
  opacity: 1;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.5s;
}

	/* port animation end */


/* Mobile exception to show */

@media screen and (max-width: 580px) {
header {
    flex-direction: column;
    align-items: center;
    padding-left: 0; /* Remove the 2% padding from desktop */
  }
.port {display: none;}
  .nav {display:none;}
  nav {margin-top:-9%;}
  #logo {margin-left:}
#about {display: none; }
    .itemcontainer {width:90%;}
    
    .landscape, .fulllandscape {
    flex-direction: column;
  }
}

@media screen {
  #aboutmemobile {
    display: none;
  }
}




.page-load-status {
  display: none;
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}


.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips_dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* change color here */
  position: absolute;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips_dot:nth-child(1),
.loader-ellips_dot:nth-child(2) {
  left: 0;
}
.loader-ellips_dot:nth-child(3) { left: 1.5em; }
.loader-ellips_dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips_dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips_dot:nth-child(2),
.loader-ellips_dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips_dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}