@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700,800);
@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,800);

body {
  font-family: 'Open Sans', sans-serif;
  max-height: 50%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}

/*////////////////////////////////////////////////////////Typography 0*/

h1 {
  text-transform: uppercase;
  letter-spacing: -0.125em;
}
h2 {
  text-transform: uppercase;
  font-weight: 500;
}
h3 {
  letter-spacing: -0.03125em;
}
article {
  letter-spacing: -0.0125em;
}

/*/////////////////////////////////////////////////////Strona Główna 1*/

header#front {
  position: relative;
  overflow: hidden;
  width: 100%;
  // min-height: 100vh;
  display: -webkit-box;
  display: -ms-box;
  // display: flex;
  display: block;
  // background: #fff;
}

header #box {
  background: #ececec;
  float: left;
  // display: block;
  margin-top: 0;
  // position: relative;
  width: 48%;
  height: 492px;
}

header #boxb {
  background: #ececec;
  float: right;
  width: 52%;
  height: 492px;
}

header #boxc {
  // background: #EBF4F9;
  width: 64%;
  float: right;
  height: 485px;
}
  
header #boxd {
  /*background: #acd8d1;*/
  width: 36%;
  float: left;
  height: 485px;
}

header .graph-image {
  width: auto;
  height: 485px;
  background: url('../img/graph.jpg') no-repeat top center;
  background-size: cover;
}

#boxc article {
  text-align: justify;
  color: #4c4c4c;
  font-size: 1em;
  padding-left: 10%;
  padding-right: 10%;
  line-height: 1.5em;
  // padding-bottom: 1%;
  padding-top: 15%;
}

  header .decor {
  font-family: 'Open Sans', sans-serif;
  text-align: right;
  color: #fff;
  font-size: 6em;
  font-weight: 800;
  padding-right: 150px;
  margin-top: -30px;
}

header .hor-image {
  margin-top: 4px;
  width: 1099px;
  height: 487px;
  background: url('../img/szal_b.png') no-repeat top center;
  background-size: cover;
}

header .modern {
  font-family: 'Open Sans', sans-serif;
  display: block;
  text-align: left;
  color: #ddd;
  font-size: 5em;
  font-weight: 800;
  padding-top: 50px;
}

header .malarstwo {
  font-family: 'Open Sans', sans-serif;
  display: block;
  position: relative;
  text-align: right;
  color: #bba266;
  font-size: 1.8em;
  font-weight: 300;
  letter-spacing: 14px;
  margin-top: 0px;
  padding-right: 2%;
  z-index: 1;
}

header .colors {
  color: #bba266;
  font-weight: 700;
}

header .branding {
  font-family: 'Open Sans', sans-serif;
  text-align: left;
  color: #fff;
  font-size: 5.2em;
  font-weight: 800;
  margin-left: -4px;
  margin-top: -15px;
}

header .complex {
  text-align: right;
  color: #2d2d2d;
  font-size: 1.2em;
  font-weight: 400;
  margin-top: 20%;
  margin-right: 7%;
}

header .layout {
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  color: #fff;
  font-size: 3.4em;
  font-weight: 400;
  letter-spacing: 38px;
  text-transform: uppercase;
  top: 35%;
  margin-left: 2%;
  position: relative;
}

@-webkit-keyframes onLoad {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes onLoad {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*///////////////////////////////////////////////////Nawigacja Pasek Górny 2*/

#navBar {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 70px;
  background: transparent;
  // box-shadow: 0px 0px 10px #2d2d2d;
  z-index: 9999;
}

/*/////////////////////////////////////////////////////////Name on Nav Bar 3*/

h1 {
  font-family: 'Open Sans';
  display: inline-block;
  color: #efefef;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  font-size: 1.2em;
  margin: 0;
  font-weight: 500;
  padding: 2em 0 0 2em;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 7em;
  font-family: 'Open Sans'; /////////////////////////////*font Drawer menu 3b*/
  letter-spacing: .3em;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

/*/////////////////////////////////////////////////////////////Drawer menu 3c*/

.drawer-menu {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  padding: 120px 0;
  background: #222;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: perspective(500px) rotateY(-90deg);
  transform: perspective(500px) rotateY(-90deg);
  opacity: 0;
  box-shadow: 0px 0px 5px #1E1E1E;
}

.drawer-menu li {
  text-align: center;
}

.drawer-menu li a {
  display: block;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.drawer-menu li a:hover {
  color: #1a1e24;
  background: #96908D;
}

/*////////////////////////////////////////////////////////////////Checkbox 4*/

.check {
  display: none;
}

/*//////////////////////////////////////////////////////////Menu button Up 5*/

.menu-btn {
  position: fixed;
  display: block;
  top: 28px;
  right: 40px;
  display: block;
  width: 40px;
  height: 40px;
  font-size: 10px;
  text-align: center;
  cursor: pointer;
  z-index: 3;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 40px;
  height: 1px;
  background: #808080; /* kolor nawigacji - open, close */
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.bar.middle {
  top: 12px;
  opacity: 1;
}

.bar.bottom {
  top: 24px;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

.menu-btn__text {
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  margin: auto;
  color: #fff;
  -webkit-transition: all .5s;
  transition: all .5s;
  display: block;
  visibility: visible;
  opacity: 1;
}

/*///////////////////////////////////////////////////////////Hover Effects 6*/

.menu-btn:hover .bar {
  background: white;
}

.menu-btn:hover .menu-btn__text {
  color: #999;
}

.close-menu {
  position: fixed;
  top: 0;
  right: 300px;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  visibility: hidden;
  opacity: 0;
}

/*/////////////////////////////////////////////////////////////////Checked 7*/

.check:checked ~ .drawer-menu {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  z-index: 2;
}

.check:checked ~ .contents {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translateX(-300px);
  transform: translateX(-300px);
}

.check:checked ~ .menu-btn .menu-btn__text {
  visibility: hidden;
  opacity: 0;
}

.check:checked ~ .menu-btn .bar.top {
  width: 56px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
  opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
  width: 56px;
  top: 40px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.check:checked ~ .close-menu {
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  background: rgba(0, 0, 0, .5);
  visibility: visible;
  opacity: 1;
  z-index: 3;
}

/*////////////////////////////////////////////////////////About Me Section 8*/

#top {
  width: 100%;
  height: 350px;
  /*background: #fdece7;*/
}

/* lewy DIV about */
#about {
  float: left;
  width: 36%;
  // height:auto;
  height: 350px;
  background: #fff;
  /*// background: #dae3cf;*/
  // color: #5B5A60; /* kolor tekstu */
}

#right_about {
  float: right;
  width: 64%;
  height: 350px;
  background: #edecea;
  /*// background: #e6ecdf;*/
}

#right_about .inter-image {
  width: 808px;
  height: 350px;
  background: url('../img/interior_photo_b.jpg') no-repeat top center;
  background-size: cover;
}

#about article {
  // font-size: 1em;
  font-size: .95em;
  color: #4c4c4c;
  padding-left: 7%; /* tekst certyfikat w dziale about odstęp */
  padding-right: 7%;
  line-height: 1.9em;
  padding-top: 15%;
  padding-bottom: 2%;
}
 #about .certificate {
  font-size: .85em;
  color: #999;
}
article {
  text-align: justify;
  // line-height: 150%;
  color: rgba(26, 26, 26, .6);
  // padding: 0 10% 8% 10%;
}

/*//////////////////////////////////////////////////////////////Skill bars 9*/

#skills {
  // display: block;
  width: 100%;
  // background: #81e509;
  height: 350px;
}

#skills article {
  font-size: .95em;
  color: #6b6b6b;
  padding-left: 20%; /* tekst główny skills */
  padding-right: 20%;
  line-height: 1.9em;
  padding-top: 5%;
  padding-bottom: 2%;
}

#skills .colors {
  color: #bba266;
  font-weight: 700;
}

#skillsboxa {
  width: 100%;
  height: 350px;
  float: left;
  background: #f4f4f4;
  // background: #e0f5ff;
}

#skillsboxb {
  width: 50%;
  height: auto;
  float: right;
  background: #ceefff;
}

/*////////////////////////////////////////////////////////////////////Portfolio Section 10*/

#portfolio {
  text-align: center;
  width: 100%;
  // background: #fad5fb;
  height: 300px;
}

#portfoliobox {
  width: 100%;
  height: auto;
  padding-top: 4%;
  padding-bottom: 3%;
  // background: #FCE7FD;
}

/*//////////////////////////////////////////////////////////Contact form with Formspree 11*/

#contact {
  width: 100%;
  background: #fff;
  margin: 0;
  padding-bottom: 0;
}

#contact h3 {
  text-transform: uppercase;
  text-align: right;
  padding-right: 10%;
  color: #b8b8b8;
}

p.contactIn {
  color: #444;
  padding-top: 8%;
  padding-bottom: 0;
  text-align: right;
  margin: 0 auto;
}

#contact p {
  text-align: right;
  // padding-left: 12%;
}

#contact h1 {
  padding: 0 0 0 0;
  text-align: left;
  display: block;
  color: #2d2d2d;
  font-size: 1.8em;
}

// #contact input {
//   border-radius: 0px;
//   border: 1px solid #ccc;
//   border-radius: 0;
//   background: #fafafa;
// }

// #contact label {
//   padding-left: 0%;
//   padding-bottom: 2%;
//   display: block;
//   text-align: left;
//   color: rgba(5, 5, 5, 0.6);
// }

/*/////////////////////////////////////////////////////////////Footer and Scroll up 12*/

#footer-above {
  width: 100%;
  height: 30px;
}

#to-top {
  display: block;
  padding-bottom: 4%;
  // background: red;
}

#scroll-up {
  display: inline-block;
  // background: #aed835;
  width: 10px;
  height: 10px;
  margin: auto;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  display: block;
  border-top: 2px solid #1e1e1e;
  border-left: 2px solid #1e1e1e;
  cursor: pointer;
  -webkit-transition: all .5s;
  transition: all .5s;
}

footer {
  display: inline-block;
  font-size: .85em;
  width: 90%;
  padding-bottom: 3%;
  color: #999;
  text-align: center;
  // background: #eee8aa;
  margin: 0 5%;
}

/*//////////////////////////////////////////////////////////////////Media Query for Tablet*/

@media screen and (min-width: 768px) {

#skills article {
  padding-top: 3%;
  padding-left: 15%; /* tekst główny skills */
  padding-right: 15%;
}
  // div#skills p {
  //   font-size: 1.3em;
  //   margin-left: 10%;
  //   margin-right: 10%;
  // }
  #portfolio {
    height: auto;
}
  /*////////////////////////////////////// Skill bars for larger viewports */
  // #skills ul {
  //   font-size: 1.2em;
  //   margin: 0 auto;
  //   padding: 0 0 0 0;
  //   text-align: center;
  //   width: 100%;
  //   display: block;
  //   clear: both;
  // }
  // div#skill-left {
  //   display: inline-block;
  //   width: 42%;
  //   padding-right: 5%;
  //   text-align: left;
  //   font-size: 1em;
  // }
  // div#skill-right {
  //   display: inline-block;
  //   width: 42%;
  //   padding-left: 5%;
  //   text-align: left;
  //   font-size: 1em;
  // }

  /*  ////////////////Contact Form  ////////////////*/
  div#contact {
    clear: both;
  }
  #contact h1 {
    padding-left: 10%;
    font-size: 1.8em;
  }
  #contact h3 {
    font-size: 1em;
    padding-left: 10%;
    letter-spacing: 2px;
  }
  #contact p {
    margin-right: 10%;
    font-size: 1em;
    padding-left: 10%;
  }
  // #contact article {
  //   margin-right: 10%;
  //   font-size: 1em;
  //   padding-left: 10%;
  // }
  // #contact label {
  //   font-size: 1.2em;
  // }

  div#contact {            /* Cały div Contact */
    display: inline-block;
    // background: #b1d9e5;
  }

  #con-left {
    // display: inline-block;
    float: left;
    padding-top: 8%;
    width: 50%;
    height: 500px;
    // background: #e0ffcd;
  }

  #con-right {
    // display: inline-block;
    float: right;
    padding-top: 8%;
    width: 50%;
    height: 500px;
    // background: #f0ffe6;
  }

  .saatchi-icon {
    display: block;
    width: 48px;
    height: 51px;
    float: left;
    margin-top: 5%;
    margin-left: 14%;
    // text-align: left;
    background: transparent url('../img/saatchiart_icon.png') 0 0 no-repeat;
  }
  
  #saatchi {
    -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }

  #saatchi:hover {
    opacity: 0.5;
    -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }

  #con-right h3 {
    text-align: left;
    color: #b8b8b8;
  }

  #con-right p {
    text-align: left;
  }

  div #footer-above {
    clear: both;
  }
}

/*///////////////////////////////////////////////////// Media Query 360px only for logo */

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

  // header#front {
  //   display: inline-block;
  // }

header #box {
    float: left;
    width: 100%;
    height: 392px;
  }

header #boxb {
    background: #D7E9F3;
    float: left;
    width: 100%;
    height: 487px;
  }

header #boxc {
    float: left;
    width: 100%;
    height: auto;
  }
  
header #boxd {
    float: left;
    width: 100%;
    height: auto;
  }

#boxc article {
  padding-top: 5%;
  padding-bottom: 3%;
}

header .layout {
    // display: none;
  text-align: left;
  font-size: 2.4em;
  letter-spacing: 28px;
  top: 35%;
  margin-left: 1%;
 }

header .decor {
  // display: none;
  text-align: left;
  color: #fff;
  font-size: 6em;
  font-weight: 800;
  margin-top: -30px;
 }

header .hor-image {
  margin-top: 0;
  // width: 658px;
  // height: 487px;
  background: url('../img/szal_b.png') no-repeat top center;
 }

header .graph-image {
  width: auto;
  height: 485px;
  background: url('../img/graph.jpg') no-repeat top center;
 }

header .modern {
  // display: none;
  font-size: 6em;
  top: -10%;
  position: relative;
  line-height: .85em;
 }

header .malarstwo {
  font-size: 1.4em;
  letter-spacing: 10px;
  padding-right: 8%;
 }

#about {    /* lewy DIV about 360 */
  width: 100%;
  // height:auto;
  height: 300px;
}

#right_about {
width: 100%;
height: 300px;
}

#about article {
  // font-size: .95em;
  padding-left: 5%;
  // padding-right: 5%;
  // line-height: 1.4em;
  padding-top: 12%;
  padding-bottom: 1%;
}

#skillsboxa {
  width: 100%;
  height: auto;
  float: left;
 }

#skillsboxb {
  width: 100%;
  float: right;
 }

#skills article {
  padding-left: 10%; /* tekst główny skills 360 */
  padding-right: 10%;
  line-height: 1.8em;
  padding-bottom: 2%;
}

#portfolio {
  height: auto;
}

// #portfoliobox {
//   padding-top: 2%;
// }

#contact h3 {
  text-align: center;
  padding-left: 10%;
 }

#contact p {
  text-align: center;
// padding-left: 12%;
 }

p.contactIn {
  padding-top: 4%;
  padding-bottom: 0;
  // margin: 0 auto;
}

 div#contact {            /* cały div Contact 360 */
    display: inline-block;
    // background: #b1d9e5;
  }

#con-left {
  font-size: .95em;
  float: left;
  width: 100%;
  height: 200px;
  // background: #EBF4F9;
  }

#con-right {
  font-size: .95em;
  float: left;
  width: 100%;
  height: 200px;
  // background: #E8F8ED;
  }

.saatchi-icon {
    width: 48px;
    height: 51px;
    float: left;
    margin-top: 0%;
    margin-right: 0%;
  }

}

@media screen and (min-width: 480px) {

  // header #bg-photo {
  // margin-top: 0;
  // top: 0;
  // left: 0;
  // display: block;
  // width: 100%;
  // height: auto;
  // }
}

/*////////////////////////////////////////////////////////// Large Tablet and Desktop */

@media screen and (min-width: 1000px) {

.menu-btn:hover span.bar.middle {
    width: 20px;
  }

.menu-btn:hover span.bar.bottom {
    width: 30px;
  }

#scroll-up:hover {
    border-top: 2px solid #999;
    border-left: 2px solid #999;
  }

// #port-link {
//     -webkit-transition: all .5s;
//     transition: all .5s;
//   }

// #port-link:hover {
//     padding-left: 5%;
//   }

.hideme {
    opacity: 0.7;
  }

#skills article {
  font-size: .95em;
  color: #6b6b6b;
  padding-left: 20%; /* tekst główny skills */
  padding-right: 20%;
  line-height: 1.9em;
  padding-top: 5%;
  padding-bottom: 2%;
}
  /*//////////////////////////////////////////////// about */
  // #about h1 {
  //   padding-top: 5%;
  //   // padding-bottom: 1%;
  //   font-size: 1.7em;
  // }

  // div#skills article {
  //   font-size: .85em;
  // }
  // #about img {
  //   padding-top: 35%;
  //   width: 55%;
  //   margin-left: 37.5%;
  //   margin-right: 37.5%;
  //   padding-bottom: 10%;
  // }

  #footer {
    padding-bottom: 1.5%;
  }
}

/*////////////////////////////////////////////// Media Query for large desktop computers */

@media screen and (min-width: 1500px) {

body {
  max-height: 50%;
  max-width: 100%;
  /*background: #fff;*/
}

header .modern {
  text-align: right;
  padding-top: 30px;
}

header .graph-image {
  float: right;
  width: 455px;
  height: 485px;
}

#footer {
    padding-bottom: 1%;
  }
}


/*///////////////////// RESUME SECTION */

/*///////////////////////////// Header */

// header #resume {
//   height: 75vh;
//   width: 100%;
//   position: relative;
//   display: -webkit-box;
//   display: -ms-flexbox;
//   display: flex;
//   overflow: hidden;
// }

// #bg-resume {
//   max-width: 100%;
//   -o-object-fit: cover;
//      object-fit: cover;
//   position: absolute;
//   display: block;
//   height: 75vh;
//   margin-top: 78px;
//   opacity: .9;
//   -webkit-animation: onLoad 2s ease-in-out;
//           animation: onLoad 2s ease-in-out;
// }

// #res-head {
//   top: 50%;
//   max-width: 33.333%;
//   margin: 0 33.5%;
//   position: absolute;
//   z-index: 9;
//   display: block;
// }

// #port-head {
//   top: 50%;
//   max-width: 50%;
//   margin: 0 25%;
//   position: absolute;
//   z-index: 9;
//   display: block;
// }

/*/////////////////////////////////////// skills */

// #tech-and-skills {
//   background: #EDEEEF;
//   display: block;
// }

// #tech-and-skills h1 {
//   color: #2d2d2d;
//   text-align: left;
//   padding-bottom: 8%;
//   padding-top: 15%;
// }

// #tech-and-skills h3 {
//   padding-left: 5%;
//   color: #2d2d2d;
//   letter-spacing: .4px;
//   text-transform: uppercase;
// }

// div#tech-and-skills ul {
//   list-style-type: disc;
//   margin: 0;
//   padding: 0 0 8% 0;
//   padding-left: 15%;
//   color: rgba(26, 26, 26, .6);
//   line-height: 2em;
// }

/*/////////////////////////////////////////////////////////// Media queries for resume */

@media screen and (min-width: 768px) {

// #skills {
//   height: 400px;
// }
  
// #res-head {
//   max-width: 20%;
//   margin: 0 40%;
//   }
  
// #port-head {
//   max-width: 25%;
//   margin: 0 37.5%;
//   }
      
// #tech-header {
//   padding-top: 1.5%;
//   margin-left: 5%;
//   float: left;
//   width: 30%;
//   display: inline-block;
//   }
  
// #daily {
//     margin-left: 5%;
//     padding-top: 5%;
//     width: 25%;
//     display: inline-block;
//     padding-bottom: 8%;
//   }
  
// #familiar {
//     padding-top: 5%;
//     float: right;
//     width: 27%;
//     display: inline-block;
//   }
  
// #experience {
//     background: whitesmoke;
//     display: inline-block;
//   }
  
// #exp-header {
//     text-align: center;
//     padding-top: 1.5%;
//     margin-left: 5%;
//     float: left;
//     width: 30%;
//   }
  
// #exp-text {
//     width: 60%;
//     float: right;
//   }
  
// #experience h3 {
//     padding-top: 8%;
//   }
  
// #education {
//     clear: both;
//     display: inline-block;
//     margin-top: -6px;
//     width: 100%;
//   }
  
  // article#mcglinns {
  //   padding-bottom: 0;
  //   padding-right: 15%;
  // }
  
  // #experience ul {
  //   padding-right: 15%;
  // }
  
  // ul#mcglinns {
  //   padding-bottom: 15%;
  // }
  
  // #edu-header {
  //   text-align: center;
  //   padding-top: 1.5%;
  //   margin-left: 5%;
  //   float: left;
  //   width: 30%;
  // }
  
  // #edu-text {
  //   width: 60%;
  //   float: right;
  //   padding-top: 5%;
  // }
   
}
/*////////////////////// Portfolio page */
/*////// Portfolio header edited above */
// #port-thumb {
//   background: #EDEEEF;
// }

// .container {
//   padding: 2em 0;
//   margin: 0 10%;
// }

// .content {
//   position: relative;
//   width: 100%;
//   max-width: 450px;
//   margin: auto;
//   overflow: hidden;
// }

// .content .content-overlay {
//   background: rgba(0, 0, 0, 0.7);
//   position: absolute;
//   height: 100%;
//   width: 100%;
//   left: 0;
//   top: 0;
//   bottom: 0;
//   right: 0;
//   opacity: 1;
//   -webkit-transition: all 0.4s ease-in-out 0s;
//   transition: all 0.4s ease-in-out 0s;
// }

// img.content-image {
//   padding: 0;
//   margin: 0;
//   width: 100%;
// }

// .content .content-overlay2 {
//   border: 2px solid rgba(255, 255, 255, 0.5);
//   height: 90%;
//   width: 94%;
//   position: absolute;
//   left: 0;
//   top: 0;
//   bottom: 0;
//   right: 0;
//   margin: auto;
//   opacity: 1;
//   -webkit-transition: all 0.4s ease-in-out 0s;
//   transition: all 0.4s ease-in-out 0s;
// }

// .content-image {
//   width: 100%;
// }

// .content-details {
//   position: absolute;
//   text-align: center;
//   padding-left: 20%;
//   padding-right: 20%;
//   width: 100%;
//   top: 50%;
//   left: 50%;
//   opacity: 1;
//   -webkit-transform: translate(-50%, -50%);
//   transform: translate(-50%, -50%);
// }

// .content-details h3 {
//   color: #fff;
//   font-weight: 500;
//   letter-spacing: 0.15em;
//   margin-bottom: 0.5em;
//   font-size: 15%;
//   text-transform: uppercase;
// }


@media screen and (min-width: 800px) {
  
// .container {
//   display: inline-block;
//   width: 26%;
//   padding: 10% 0;
//   margin: 0 11%;
// }
  
 // #photo-left {
 //    margin-left: 13%;
 // }

// .content {
//   position: relative;
//   width: 100%;
//   max-width: 450px;
//   margin: auto;
//   overflow: hidden;
// }

// .content .content-overlay {
//   background: rgba(0, 0, 0, 0.7);
//   position: absolute;
//   height: 100%;
//   width: 100%;
//   left: 0;
//   top: 0;
//   bottom: 0;
//   right: 0;
//   opacity: 0;
//   -webkit-transition: all 0.4s ease-in-out 0s;
//   transition: all 0.4s ease-in-out 0s;
// }

// img.content-image {
//   padding: 0;
//   margin: 0;
//   width: 100%;
// }

// .content .content-overlay2 {
//   border: 2px solid rgba(255, 255, 255, 0.5);
//   position: absolute;
//   height: 99%;
//   width: 100%;
//   left: 0;
//   top: 0;
//   bottom: 0;
//   right: 0;
//   margin: auto;
//   opacity: 0;
//   -webkit-transition: all 0.4s ease-in-out 0s;
//   transition: all 0.4s ease-in-out 0s;
// }

// .content:hover .content-overlay,
// .content:hover .content-overlay2 {
//   opacity: 1;
// }

// .content:hover .content-overlay2 {
//   height: 90%;
//   width: 94%;
// }

// .content-image {
//   width: 100%;
// }

// .content-details {
//   position: absolute;
//   text-align: center;
//   padding-left: 20%;
//   padding-right: 20%;
//   width: 100%;
//   top: 50%;
//   left: 50%;
//   opacity: 0;
//   -webkit-transform: translate(-50%, -50%);
//   transform: translate(-50%, -50%);
//   -webkit-transition: all 0.4s ease-in-out 0s;
//   transition: all 0.4s ease-in-out 0s;
// }

// .content:hover .content-details {
//   opacity: 1;
// }

// .content-details h3 {
//   color: #fff;
//   font-weight: 500;
//   letter-spacing: 0.15em;
//   margin-bottom: 0.5em;
//   font-size: 15%;
//   text-transform: uppercase;
// }
  
  
  
}


/*////////////////////////////////////// photography portfolio *

#photos {
  width: 95%;
  display: block;
  padding: 0 2.5%;
}

#border img {
  width: 100%;
  margin: 0;
  padding: 0;
}

#border a {
  margin: 0;
  padding: 0;
}

figure#border {
  width: 49%;
  display: inline-block;
  margin: 0;
  padding: 0;
}

#photography-port {
  display: block;
  width: 96%;
  padding-left: 2%;
  padding-right: 2%;
  background: #EDEEEF;
  padding-top: 78px;
  padding-bottom: 10%;
}

#photography-port h1 {
  text-align: center;
  text-transform: uppercase;
  color: #2d2d2d;
  display: block;
  margin: 0;
  padding: 8% 0 12% 0;
  font-size: 1.5em;
  letter-spacing: .3em;
  font-weight: bolder;
}

@media screen and (min-width: 768px) {
  
  #photography-port h1 {
    font-size: 2.8em;
  }
  
  #photos {
  width: 68%;
  display: block;
  padding: 0 0 0 16.5%;
}
  
  #photography-port {
  display: block;
  width: 96%;
  padding-left: 2%;
  padding-right: 2%;
  background: #EDEEEF;
  padding-top: 78px;
  padding-bottom: 10%;
}
  
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .7);
}

.lightbox img {
  width: 90%;
  max-height: 90%;
  margin-top: 30%;
  margin-left: 0;
  margin-right: 0;
  float: none;
  display: inline-block;
}

.lightbox:target {
  outline: none;
  display: block;
}

.lightbox:target img {
  -webkit-animation: fadein .2s ease-in-out;
          animation: fadein .2s ease-in-out;
}

@-webkit-keyframes fadein {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); 
  }
  
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes fadein {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); 
  }
  
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/*//////////////////////////////////////////////////////////////////////////// Fix for landscape mode */
@media screen and (orientation: landscape) {
  // .lightbox img {
  //   max-width: 50%;
  //   margin-top: 10%;
  // }
  
  // .lightbox article {
  //   display: none;
  // }
  
/*/////////////////////////////////////////////////////////////////////////  Fixes for portrait scale  */
// #img7.lightbox img,
// #img8.lightbox img,
// #img11.lightbox img,
// #img12.lightbox img,
// #img15.lightbox img,
// #img16.lightbox img {
//   max-width: 30%;
//   margin-top: 15%;
// }
  
}

/*////////////////////////////////////////////////////////////////////////////////////// Tablet and up */
@media screen and (min-width: 768px) {
/*/////////////////////////////////////////////////////////////////////////////////////////  Lightbox  */

//   .lightbox {
//   display: none;
//   position: fixed;
//   z-index: 999;
//   width: 100%;
//   height: 100%;
//   text-align: center;
//   top: 0;
//   left: 0;
//   background: rgba(0, 0, 0, .7);
// }

// .lightbox img {
//   width: 50%;
//   max-width: 50%;
//   max-height: 90%;
//   margin-top: 12%;
//   float: none;
//   -webkit-transition: background 1s;
//   transition: background 1s;
// }
  
// #img7.lightbox img,
// #img8.lightbox img,
// #img11.lightbox img,
// #img12.lightbox img,
// #img15.lightbox img,
// #img16.lightbox img {
//   max-width: 25%;
//   margin-top: 10%;
// }
}