body {
  font-family: Helvetica;
  font-size: 16px;
  line-height: 1.1;
  padding-top: 100px;
  background-color: #000000;
  color: #ffffff;}

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 10px 15px 4px 15px;
  background-color: #000000;
  z-index: 3;}

.header_main{
 display: flex;
 justify-content: space-between;
 background-color: #000000;
 color: #ffffff;}

a {
  color: #ffffff;
  text-decoration: none;}

nav{display: flex;}

nav a {
  margin-left: 20px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 30px;}

header a:hover, .links a:hover{font-style: italic;}

.heart{width: 38px;
  position: relative;
  top: -3px;}

.subpage_h1{font-size: 90px; text-transform: uppercase; letter-spacing: -2px; margin: -8px -4px -4px 0px;}
.subpage_h1 a:hover{font-style: normal;} 

/* CSS FOR FOOTER *******************************************************/
/* CSS FOR FOOTER *******************************************************/

footer{
  padding: 10px 10px 14px 12px;
  color: #ffffff;}

.links{padding: 0px 0px 0px 4px;}

.links a{
  margin-left:0;
  margin-right:20px;}

/* CSS FOR NEW SUBPAGES *******************************************************/
/* CSS FOR NEW SUBPAGES *******************************************************/

.subpage p, .subpage h4{color: #ffffff;}
.subpage h4{font-size: 10px;}

.hero {
 width: 100%;
 height: auto;
 margin: auto 0px auto 0px;}

.hero img{width: 100%;
  height: 600px;
  object-fit: cover;}

.content{
  width:70%;
  padding-top: 20px;
  margin:auto;
  display: block;
  position:relative;}

.content img{
  padding-bottom: 20px;
  width: 100%; }

.content p{
  font-size: 30px;
  line-height: 1.2;
  width:98%;
  padding: 40px 0 70px 180px;
  text-align: left;}

 .double{
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 20px;}

.triple, .triple_iframe{
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-gap: 20px;
  padding-bottom:10px;}

.stripe{padding-bottom: 0; margin-bottom: -20px;}

/*h1 {
  font-size: 180px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 0.9;
  transition: all 0.3s ease;}*/

/* CSS FOR IMAGES ON LANDING PAGE AND PROJECT STRIPE ON SUBPAGE *******************************************************/
/* CSS FOR IMAGES ON LANDING PAGE AND PROJECT STRIPE ON SUBPAGE *******************************************************/

.images{
  display: flex;
  flex-wrap: wrap;}

.image {
  position: relative;
  width: 33.3333333%;
  padding: 0;}

.projects{
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-gap: 20px;
  padding: 20px 20px 0 20px;}

.project{position: relative;}

.overlay{
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  transition: opacity 0.2s;
  z-index: 2;}

.project .overlay{background-color: #000000;}
.project{position: relative;}

.image:hover .overlay,
.project:hover .overlay{
 opacity: 1;}

.image h2, .image h3{
  position: absolute;
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-size: 30px;}

.project h2{
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 20px;}

.image h2{top: 42%;}
.image h3, .project h2{top: 38%;}

/* CSS FOR JAVA BELOW *******************************************************/
/* CSS FOR JAVA BELOW *******************************************************/

.compact{
font-size: 30px;
font-weight: 500;
letter-spacing: 0;
padding: 0 0 4px 0;
line-height: 1;
text-transform: uppercase;}

/* CSS FOR OLD SUBPAGES BELOW *******************************************************/
/* CSS FOR OLD SUBPAGES BELOW *******************************************************/

/*.home{
  margin-left: 0;
  letter-spacing: 0px;}*/

.old_subpage, .old_subpage header, .old_subpage .header_main{
  background-color: #ffffff;}

.old_subpage header{padding: 10px 34px 4px 15px;}

.old_subpage a{
  color: #000000;}

.old_subpage .heart{width: 30px;}

.container{
  width: 100%;
  margin-top: -100px;
  padding-left: 12px;
  box-sizing: border-box;
  display: block;}

.row{
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;}

.left_section{
  max-height: 100vh;
  overflow: auto;
  -webkit-box-flex: 0;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
  padding-top: 70px;}

.right_section{
  display: block;
  max-height: 100vh;
  overflow: auto;
  -webkit-box-flex: 0;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding: 74px 24px 24px 12px;}

.right_section p{
  font-size: 24px;
  line-height: 1.2;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  color: #000000;}

.pr_images img{
  padding-bottom: 12px;
  width: 100%;}

.pr_images p{
  margin-bottom: 12px;
  max-width: 50%;}

h4{line-height: 1.3;
color: #000000;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;}

.star{
border-top: 1px solid black;
padding-top: 4px; margin-top: -6px;
max-width: 50%;
color: #000000;}

h5{
font-size: 60px;
padding-bottom: 200px;
color: #000000;}

.right_section h5{line-height: 1;}

.italics{font-style: italic;}

.toolbar_top{display:none !important;}

/* CSS FOR THE POSTER WALL BELOW *******************************************************/
/* CSS FOR THE POSTER WALL BELOW *******************************************************/

.poster_wall{
background-color: #000000;}

.posters{
display: grid;
grid-template-columns: repeat(5, auto);
grid-gap: 18px;
padding: 0 18px;
background-color: #000000;
grid-auto-flow: dense;}

.double_column{grid-column: auto / span 2; position: relative;}
.triple_column{grid-column: auto / span 3; position: relative;}
.quad_row{grid-row: span 5 / auto; position: relative;}
.double_row{grid-row: span 2 / auto; position: relative;}

/* ABOUT MENU ////////////////////////////////////////////////////////*/
/* ABOUT MENU ////////////////////////////////////////////////////////*/
/* ABOUT MENU ////////////////////////////////////////////////////////*/
/* ABOUT MENU ////////////////////////////////////////////////////////*/

.about p, .contact p{
font-size: 24px; line-height: 1.3;
-webkit-hyphens: auto;
-ms-hyphens: auto; hyphens: auto;
  color: #ffffff;}

.old_subpage .about p, .old_subpage .contact p{
  color: #000000;}

.open{
transform: translateY(0);}

.mobile-description{display: none;
color: #000000;}

.client, .client_long
{border-style: solid;
    border-width: 1px;
    border-radius: 75px;
    padding: 0 12px 0 12px;
    margin-right: 4px;
    margin-top: 6px;}

.clients-names{
display: flex;
    flex-wrap: wrap;
    font-size: 36px;
    line-height: 1.4;
    padding-bottom: 4px;}

/* CSS FOR CHANGING IMAGE IN ADOBE REWIND *******************************************************/
/* CSS FOR CHANGING IMAGE IN ADOBE REWIND *******************************************************/

.change_on_hover{
background: url("stream68.svg") no-repeat;
background-size:  contain;
width: 400px;
height:  300px;
display: block;}

.change_on_hover:hover{
background: url("stream70.svg") no-repeat;
background-size:  contain;}

/* IPAD PRO PORTRAIT / IPAD LANDSCAPE **********************************/
/* IPAD PRO PORTRAIT / IPAD LANDSCAPE **********************************/
/* IPAD PRO PORTRAIT / IPAD LANDSCAPE **********************************/
/* IPAD PRO PORTRAIT / IPAD LANDSCAPE **********************************/

@media (max-width: 1080px) {
.content p{font-size: 20px;}
.images{margin-top: 33px;} 
.image {width: 50%;}

header {padding: 10px 10px 6px 10px;
max-height: 100%;
overflow: scroll;}

.header_main {display: block;}
header a{margin-left: 0px; margin-right: 170px;}
header a:hover{font-style: normal;}

.subpage_h1{margin: -8px -4px -7px 0px;}

h1 {margin-bottom: 0; margin-top: 0;} 
.compact {margin-bottom: 0px; margin-top: 0}

.left_section{flex: 0 0 50%;
max-width: 50%; padding-top: 85px }
.right_section{flex: 0 0 50%;
max-width: 50%; padding-top: 85px}

.about p, .contact p{padding-top: 0;}
.scribd_iframe_embed{height: 400px;}

.hero img{height: 400px;}
.content{width:90%;}
}

/* MOBILE*******************************************************/
/* MOBILE*******************************************************/
/* MOBILE*******************************************************/
/* MOBILE*******************************************************/

@media (max-width: 700px){
.subpage_h1{font-size: 50px;}
.hero{margin: -22px 0px auto 0px;}
.hero img{height: 240px;}
.content{width:94%; padding-top: 10px;}
.content img{padding-bottom: 10px;}
.content p{font-size: 20px; 
padding: 30px 0px 50px 0px;}

#menu{padding-top: 2px;}

.double{grid-gap: 10px;}
.triple{grid-gap: 10px;}

.projects{grid-template-columns: repeat(2, auto);
 grid-gap: 10px; padding: 10px 10px 4px 10px;}
.images{padding: 0 0 4px 0; margin-top: -30px;}
.image {width: 100%;}

header{padding: 10px 10px 4px 10px;}
header nav{display: flex;
justify-content: space-between;}
header a{margin-right: 0;}
nav a{font-size: 20px;}
.compact{line-height: 1;}

.old_subpage header{padding: 8px 8px 0px 10px;}
.pr_images {margin-top: 64px;}

h1 {font-size: 84px;
letter-spacing: -2px;
margin-bottom: 0; 
margin-top: 0;
line-height: 0.9;}  

.left_section{flex: 0 0 100%;
max-width: 100%;
padding-right: 0px;
padding-top: 0px; }
.right_section {display: none;}

.about p, .contact p{font-size: 16px;}

.clients-names{font-size: 28px;}
.clients-names .client_long{line-height: 1.1;}

footer{
  padding: 4px 10px 10px 12px;}

.mobile-description{display: block; font-size: 16px;
line-height: 1.2;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
padding-bottom: 12px;
padding-top: 8px;}

h6{font-size: 30px;
line-height: 1.1;
max-width: 80%;
-webkit-hyphens: none;}
.mobile-description p{max-width: 100%;line-height: 1.3;}
.mobile-description h4{
border-top: 1px solid black;
padding-top: 4px; margin-top: -6px;
max-width: 50%;
font-size: 12px;}
.scribd_iframe_embed{height: 240px; }
.triple_iframe{grid-template-columns: repeat(1, auto); grid-gap: 0;}

.posters{
margin-top: -30px;
grid-template-columns: repeat(3, auto);} 

}