.iphone {
    display: none;}

body {
  margin-right: 10px;
  margin-left: 10px;
}

h1 {
z-index: 1;
width: 120px;
Padding-left: 25px;
Padding-top: 7px;
}

header {
    z-index: 1;
  position: fixed;
  top: 25px;
  left: 0;
  width: 100%;
  padding: 5px;
  /* flexbox is a modern CSS layout mode that gives us much more power over how elements are positioned*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

nav a {
    z-index: 1;
 padding-bottom: 3px;
 display:  block;
 margin-right: 35px ;
 color: #000000;
 font-family: Helvetica;
 font-weight: 700;
 text-decoration: none;
  font-size: 25px;
}

.description25 {
  margin-top: 10px ;
  margin-bottom: 10px ;
 margin-left: 25%;
  width: 40%;
 color: #000000;
 font-family: Helvetica;
 font-weight: 700;
 text-decoration: none;
  font-size: 13px;
}

.description5 {
  margin-top: 10px ;
  margin-bottom: 10px ;
 margin-left: 5%;
  width: 40%;
 color: #000000;
 font-family: Helvetica;
 font-weight: 700;
 text-decoration: none;
  font-size: 13px;
}

@media (max-width:900px) {
  .description25 {
  margin-top: 10px ;
  margin-bottom: 10px ;
 margin-left: 5%;
  width: 90%;
 color: #000000;
 font-family: Helvetica;
 font-weight: 700;
 text-decoration: none;
  font-size: 13px;
  }
    .description5 {
  margin-top: 10px ;
  margin-bottom: 10px ;
 margin-left: 5%;
  width: 90%;
 color: #000000;
 font-family: Helvetica;
 font-weight: 700;
 text-decoration: none;
  font-size: 13px;
  }
}

iframe {
margin-left: 25%;
margin-right: 25%;
  width:  50%;
}

@media (max-width:900px) {
  iframe {
margin-left: 5%;
margin-right: 5%;
  width: 90%;
  }
}

nav a:hover {
  font-style: italic;
}

.jurema {
  width: 250px;
  margin-top: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*LIST*/
.list {
 /*border-top: 5px solid #000000;*/
  margin-top: 50px;
  /*margin-right: 20px;*/
  margin-left: 16%;
  display:  block;
  float: left;
  flex-wrap: wrap;
  margin-bottom: 100px;
  width: 40%;
}   

.list a {
 color: #000000;
 font-family: Helvetica;
 font-size: 25px;
 font-weight: 700;
 text-decoration: none;
 margin-bottom: 10px;
 display:     block;
 border-bottom: 3px solid rgba(0, 0, 0, 0);
}

.list a:hover {
  font-style: italic;
 /* border-bottom: 3px solid #000000;*/
 border-spacing: -1px;
}

.listb {
  margin-top: 50px;
  margin-right: 4%;
  margin-left: 4%;
  display:block; 
  width: 33%;
  /*float: right;*/
  float: left;
  flex-wrap: wrap;
  margin-bottom: 100px;
}

.listb p {
 font-family: Helvetica;
 font-size: 25px;
 font-weight: 300;
 text-decoration: none;
 margin-bottom: 10px;
  border-bottom: 3px solid rgba(0, 0, 0, 0);
}

/* LIST OVERLAY */

.info {
  margin-top: 10px;
}

.about {
 width: 50%;
 float: left;
 padding-left: 75px;
 padding-right: 50px;
 padding-top: 25px;
 margin-left: 3%;
 font-family: Helvetica;
 font-size: 25px;
 font-weight: 700;
}

.about p {
  display: block;
  padding-bottom: 50px;
}

.about a {
  display: block;
  padding-bottom: 10px;
 font-family: Helvetica;
 font-size: 25px;
 font-weight:700;
  color: #000000;
  text-decoration: none;
}

.barch {
  margin-bottom: 15px;
  text-decoration: ;
}

.email {
  padding-top: 40px;
}

.photo {
  width: 40%;
  float: left;
  padding: 30px;
}

@media (max-width:1080px) {
  .about p, .about a {
    font-size: 20px;
  }
  .about p {
  padding-bottom: 30px;}
}

@media (max-width:932px) {
  .about p, .about a {
    font-size: 18px;
  }
  .about p {
  padding-bottom: 40px;}
}

@media (max-width:860px) {
  .about p, .about a {
    font-size: 18px;
  }
  .about p {
  padding-bottom: 30px;}
}

@media (max-width:810px) {
  .photo {
    width: 35%;
    padding-left: 10px;
  }
  
  .about p, .about a {
    font-size: 17px;
  }
    .about p {
  padding-bottom: 15px;}
  
 .email {
  padding-top: 15px;
}
  }

@media (max-width:730px) {
  .about {
  width: 90%;
  padding-left: 50px;
  padding-right: 50px;
    padding-bottom: 0px;
    }
  .photo {
  width: 100%;
  margin-left: 2%;
  margin-right: 2%;
  }
}

@media (max-width:600px) {
  .jurema {
    opacity: 0;
  }
}

.about p {
  display: block;
}

.about a {
  display: block;
  padding-bottom: 0px;
}

.email {
  padding-top: 30px;
}


/* @media (max-width:500px) {
  .info {margin-top: 90px;}
} */

@media (max-width:1000px) {
  .desktop {
    display: none;
  }
  
  .iphone {
    display: block;
  }
  
  .iphonenav a {
    font-size: 25px;
     display: block;
  }
  
  .iphonenav img {
    width: 100px;
    margin-left: -20px;
    margin-top: 15px;
  }
  
.iphonenav {
  width: 20%;
  position: fixed;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
}
  
  .list a:hover {
 border-bottom: 0px solid #000000;
}
 
  .iphone .list a {
    font-size: 25px;
  }

.iphone .list {
  position: relative;
  margin-left: 30%;
  width:60% ;
  margin-top: 5%;
}

.iphone .list img {
  display: block;
  padding-top: 10px;
}
}

@media (max-width:530px) {
  
  .info {
  margin-top: -50px;
}
  
  .iphone .list a {
    font-size: 16px;
  }
  
  .iphone nav {
    padding-bottom: 25px;
  }
  
   .iphonenav a {
    font-size: 20px;
  }
    .iphonenav img {
    width: 75px;
    margin-left: -20px;
    margin-top: 0px; 
  }
  
  h1 {
width: 25%;
Padding-left: 25px;
position: fixed;
  }
  
  h1 img{
     margin-top: 130px;
  }
  
  .indexog img {
   display: none;
  }
  
  .iphoneog img {
  margin-top: -30px;
  }
  
  nav a {
display: none;
  }
  
  .iphone .list {
  margin-left: 35%;
  width:60%;
  margin-top: 5%;
}
}

@media (max-width:390px) {

    .iphoneog {
     margin-left: -7px;
 padding-top: -25px;
      width: 20%;
  }
  .iphone .list a {
    font-size: 16px;
  }
    .iphonenav img {
    width: 40%;
    margin-left: 2%;
      margin-top: 2%;
  }
  .iphone .list {
  margin-left: 35%;
  width:60%;
  margin-top: 5%;
}
  /* */
   .info {
  margin-top: -50px;
}
  
  .iphone nav {
    padding-bottom: 25px;
  }
  
   .iphonenav a {
    font-size: 20px;
  }
  
  .list a {
   font-size: 14px;
}
  
    .iphonenav img {
    width: 75px;
    margin-left: -20px;
  }
  
  h1 {
width: 25%;
Padding-left: 25px;
position: fixed;
margin-top: -30px;
  }
  
  nav a {
display: none;
  }
  
  .iphone .list {
  margin-left: 35%;
  width:60%;
  margin-top: 5%;
}
}


  /*
@media (max-width:900px) {
  .list a{font-size: 18px;} 
  .listb p{font-size: 18px;} 
}

@media (max-width:690px) {
  .list {
    font-size: 18px;
  width: 50%;
  margin-bottom: 0px;
  padding-left: 50px;
  padding-top: 20px;} 
  .list a {font-size: 20px;}
  .listb p{font-size: 0px;} 
  .listb {
    margin-top: -150px;
    margin-bottom: -200px;
    padding: 0px;
  }
}
*/
.xsailseries, .xtypedrawings, .xrca2020, .xrcaconcept, .xwip, .xvf, .xwhitenoise, .xstefan, .xrcawip, .xposterparty, .xjerry, .x2x2, .xredmen, .xoverpass, .xdaleyrowney, .xdaleyrowney2, .xgertie1, .xgertie2, .xthesis, .xeidlitz, .xtomorrow, .xprints, .xunfolding, .xvr-a, .xmaslow, .xmaslowprints, .xbrands, .xalapointe, .xpoolparty, .xsustainlab, .xuntitled, .xzagreb, .xmadeira, .xsystems {
  margin-top: 180px;
  margin-bottom: 50px;
}

.xsailseries img, .xsustainlab img, .xwhitenoise img, .xstefan img, .xjerry img, .x2x2 img, .xredmen img, .xoverpass img, .xdaleyrowney2 img, .xgertie1 img, .xgertie2 img, .xunfolding img, .xvr-a img, .xmaslow img, .xmaslowprints img, .xbrands img, .xalapointe img, .xmadeira img {
  width: 50%;
  display: flex;
 padding-top: 10px;
 margin-left: 25%;
 margin-right: 25%;
  padding-bottom: 30px;
  display:  block;
}

@media (max-width:900px) {
.xtypedrawings img, .xsailseries img, .xwip img, .xwhitenoise img, .xstefan img, .xjerry img, .x2x2 img, .xredmen img, .xoverpass img, .xdaleyrowney2 img, .xgertie1 img, .xgertie2 img, .xunfolding img, .xbrands img, .xalapointe img, .xsustainlab img, .xmadeira img {
  width: 90%;
  display: flex;
 padding-top: 0px;
 margin-left: 5%;
 margin-right: 5%;
  padding-bottom: 20px;
  display:  block;
}
}

.xtypedrawings img,.xrca2020 img, .xwip img, .xvf img, .xrcawip img, .xrcaconcept img, .xthesis img, .xeidlitz img, .xtomorrow img, .xdaleyrowney img, .xprints img, .xposterparty img, .xmaslow img, .xmaslowprints img, .xpoolparty img, .xuntitled img, .xzagreb img, .xsystems img {
 display: block;
 width: 90%;
 padding-top: 10px;
 margin-left: 5%;
 margin-right: 5%;
 padding-bottom: 20px;
}

.xposterparty a, .xgertie2 a, .xoverpass a {
 padding-top: 10px;
  padding-bottom: 10px;
 color: #000000;
 font-family: Helvetica;
 font-size: 25px;
 font-weight: 700;
 display:   block;
 margin-left: 15%;
 margin-right: 77.5%;
}

/* HOME */

.sailserieshome img, .typedrawingshome img, .rca2020home img, .wiphome img, .rcaconcepthome img,.vf img, .sustainlab img, .whitenoise img, .stefanhome img, .rcawip img, .home1 img, .home2 img, .home3 img, .home4 img, .home5 img, .home6 img, .home7 img, .home8 img, .home9 img, .home10 img, .home11 img, .home12 img, .home13 img, .home14 img, .home15 img, .home16 img, .home17 img, .home18 img, .home19 img, .home20 img, .home21 img, .home22 img, .home23 img, .home24 img, .home25 img {
 display: none;
}

/* , .home2 img, .home3 img, .home4 img, .home5 img, .home6 img, .home7 img, .home8 img, .home9 img, .home10 img, .home11 img, .home12 img, .home13 img, .home14 img, .home15 img, .home16 img, .home17 img, .home18 img, .home19 img, .home20 img, .home21 img, .home22 img, .home23 img, .home24 img, .home25 img */

.desktop .sailserieshome:hover img, .desktop .typedrawingshome:hover img, .desktop .rca2020home:hover img, .desktop .wiphome:hover img, .desktop .rcaconcepthome:hover img, .desktop .sustainlab:hover img, .desktop .whitenoise:hover img, .desktop .stefanhome:hover img, .desktop .rcawip:hover img, .desktop .vf:hover img, .desktop .home1:hover img,.desktop .home2:hover img,.desktop .home3:hover img,.desktop .home4:hover img,.desktop .home5:hover img,.desktop .home6:hover img,.desktop .home7:hover img,.desktop .home8:hover img,.desktop .home9:hover img,.desktop .home10:hover img,.desktop .home11:hover img,.desktop .home12:hover img,.desktop .home13:hover img,.desktop.desktop .home14:hover img,.desktop .home15:hover img,.desktop .home16:hover img, .desktop .home17:hover img,.desktop .home18:hover img,.desktop .home19:hover img,.desktop .home20:hover img,.desktop .home21:hover img, .desktop .home22:hover img,.desktop .home23:hover img,.desktop.desktop .home24:hover img,.desktop .home25:hover img {
  display: block;
  position: absolute;
  border: 3px solid #000000;
}

.desktop .typedrawingshome:hover img {
 transform: translate3d(400px, -30px, 0px); 
 width: 40%;
}

.desktop .sailserieshome:hover img {
 transform: translate3d(400px, -60px, 0px); 
 width: 30%;
}

.desktop .rca2020home:hover img {
 transform: translate3d(400px, -30px, 0px); 
 width: 40%;
}

.desktop .wiphome:hover img {
 transform: translate3d(400px, -50px, 0px); 
  width: 35%;
}

.desktop .rcaconcepthome:hover img {
 transform: translate3d(400px, -80px, 0px); 
  width: 35%;
}
.desktop .whitenoise:hover img {
 transform: translate3d(400px, -150px, 0px); 
  width: 25%;
}
.desktop .stefanhome:hover img {
 transform: translate3d(400px, -120px, 0px); 
 width: 30%;
}
.desktop .rcawip:hover img {
 transform: translate3d(400px, -60px, 0px); 
  width: 35%;
}
.desktop .vf:hover img {
 transform: translate3d(400px, -250px, 0px); 
  width: 20%;
}
.desktop .home1:hover img {
  transform: translate3d(400px, -60px, 0px); 
  width: 40%;
}
.desktop .home2:hover img {
    transform: translate3d(400px, -50px, 0px);
    width: 25%;
} 
.desktop .home3:hover img {
 transform: translate3d(400px, -40px, 0px);
  width: 25%;
}
.desktop .home4:hover img {
  transform: translate3d(400px, -30px, 0px);
  width: 25%;
}
 .desktop .home5:hover img {
    transform: translate3d(400px, -150px, 0px);
  width:  25%;
}
.desktop .home6:hover img {
      transform: translate3d(400px, -150px, 0px);
  width: 25%;
}
.desktop .home7:hover img {
   transform: translate3d(400px, -200px, 0px);
  width: 25%;
}
.desktop .home8:hover img {
  transform: translate3d(400px, -280px, 0px);
  width: 30%;
}
.desktop .home9:hover img {
  transform: translate3d(400px, -150px, 0px);
  width: 35%;
}
.desktop .home10:hover img {
  transform: translate3d(400px, -180px, 0px);
  width: 35%;
}
.desktop .home11:hover img {
    transform: translate3d(400px, -300px, 0px);
   width: 30%;
}
.desktop .home12:hover img {
  transform: translate3d(400px, -350px, 0px);
   width: 25%;
}
.desktop .home13:hover img {
    transform: translate3d(400px, -400px, 0px);
  width: 25%;
}
.desktop .home14:hover img {
   transform: translate3d(390px, -250px, 0px);
  width: 25%;
}
.desktop .home15:hover img {
  transform: translate3d(400px, -200px, 0px);
  width: 25%;
}
.desktop .home16:hover img {
    transform: translate3d(400px, -350px, 0px);
    width: 30%;
}
.desktop .home17:hover img {
    transform: translate3d(400px, -300px, 0px);
  width: 25%;
}
.desktop .home18:hover img {
      transform: translate3d(400px, -230px, 0px);
  width: 25%;
}
.desktop .home19:hover img {
    transform: translate3d(400px, -250px, 0px);
    width: 30%;
}
.desktop .home20:hover img {
  transform: translate3d(400px, -200px, 0px);
  width: 30%;
}
.desktop .sustainlab:hover img{
  transform: translate3d(400px, -300px, 0px);
  width: 20%;
}
.desktop .home23:hover img{
 transform: translate3d(400px, -450px, 0px);
  width: 25%;
}
.desktop .home24:hover img {
   transform: translate3d(400px, -550px, 0px);
  width: 25%;
}
.desktop .home25:hover img {
   transform: translate3d(400px, -350px, 0px);
  width: 35%;
}

@media (max-width:530px) {
  .iphoneog {
    padding-top: 30px;
    width: 40%;
  }
 .infoOG img {
    margin-top: 120px;
  }
  .info {
    padding-top: 10px;
  }

  .about {
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
  }
  .photoOG img {
      margin-top: 120px;
  }
    .graphicOG img {
      margin-top: 120px;
  }
}

.blank {
color: rgba(0, 0, 0, 0);
}

.photos {
 margin-top: 10px;
 margin-bottom: 10px;
}

.photos img {
  width: 33%;
  Padding: 10px;
}

@media (max-width:850px) {
  .photos img {
    width: 49.5%;
  }
}

@media (max-width:420px) {
  .photos img {
    padding: 5px;
    width: 49.4%;
  }
}