@font-face {
    font-family: 'Gotham';
    src: local('Gotham Bold'), local('GothamBold'),
        url(/fonts/GothamBold.woff2') format('woff2'),
        url('/fonts/GothamBold.woff') format('woff'),
        url('/fonts/GothamBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Book';
    src: local('Gotham Book'), local('Gotham-Book'),
        url('/fonts/Gotham-Book.woff2') format('woff2'),
        url('/fonts/Gotham-Book.woff') format('woff'),
        url('/fonts/Gotham-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: local('Gotham Light'), local('Gotham-Light'),
        url('/fonts/Gotham-Light.woff2') format('woff2'),
        url('/fonts/Gotham-Light.woff') format('woff'),
        url('/fonts/Gotham-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'Gotham';
    src: local('Gotham Medium'), local('Gotham-Medium'),
        url('/fonts/Gotham-Medium.woff2') format('woff2'),
        url('/fonts/Gotham-Medium.woff') format('woff'),
        url('/fonts/Gotham-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}


@font-face {
    font-family: 'Gotham';
    src: local('Gotham Black'), local('Gotham-Black'),
        url('/fonts/Gotham-Black.woff2') format('woff2'),
        url('/fonts/Gotham-Black.woff') format('woff'),
        url('/fonts/Gotham-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}



@font-face {
    font-family: 'lorabold';
    src: url('lora-bold-webfont.woff2') format('woff2'),
         url('lora-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'lorabold_italic';
    src: url('lora-bolditalic-webfont.woff2') format('woff2'),
         url('lora-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'loraitalic';
    src: url('lora-italic-webfont.woff2') format('woff2'),
         url('lora-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'loraregular';
    src: url('lora-regular-webfont.woff2') format('woff2'),
         url('lora-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


* {
 	margin: 0;
	padding: 0;
/* border: 1px solid red; */
}

img{
    margin-bottom:0.5rem;
}


body{
	background-color: #f9f9f8;
}


.linkAbout {
    font-family: 'lorabold', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 14px;
    color: rgba(0,0,0,.5);
    display: block;
	margin-bottom: 0.5rem;
}

a.link_anim{
    position: relative;
    display: inline-block;
    text-decoration: none;
    margin-bottom: 1rem;   
    font-family: 'lorabold', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: rgba(0,0,0,1);

}


.link_anim:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 6px;
  bottom: 0;
  left: 0;
  background-color: #8dbae7;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
transform-origin: left;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  z-index: -1;
}

.btn{
	display: inline-block;
	padding: 0.5rem 2rem;
	text-decoration: none;
	font-family: 'Gotham', helvetica, sans-serif;
	font-weight: 500;
	font-size: 1rem;
	color: #8dbae7;
	transition: 0.5s all;
}

.btn:after{
	content: '';
	display: inline-block;
	background: url('/img/link.svg') no-repeat;
	 width: 14px;
   	height: 14px;
	margin-left: 0.3rem;
}

.btn:hover{
	opacity: 0.5;
}

.link_anim:hover:before{
    visibility: visible;
     -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

p{  
	font-family: 'loraregular', Georgia, serif;
	font-weight: 200;
	font-size: 14px;
	letter-spacing: 0.1px;
	line-height: 24px;
	color: rgba(0,0,0,1);
      margin-bottom: 1.5rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.nav_description{
	font-family: 'loraregular', Georgia, serif;
	color: rgba(0,0,0,1);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.1px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



h2,
.h2_span{
	text-align: center;
	font-family: 'Gotham';
	font-weight: 700;
	font-size: 40px;
	line-height: 40px;
	letter-spacing: 5px;
	color: black;
	display: inline-block;
	text-transform: uppercase;
    margin-bottom: 0.5rem}


h3,
.h3_span{
	font-family: 'Gotham';
	font-weight: 500;
	font-size: 33px;
	line-height: 33px;
	letter-spacing: 0.8px;
	font-weight: 600;
	margin-bottom: 12px; 
}

.h3_span,
.h2_span {
    text-transform: none;
    text-align: left;
     color: white;
}

h3.h3_hello{
	letter-spacing: 4px;
	margin-bottom: 0;
}

h4 {
	text-align: center;
	font-family: 'Gotham';
	font-weight: 600;
	font-size: 28px;
    	line-height: 28px;
	letter-spacing: 1px;
	color: rgba(0,0,0,0.8);
	margin: 1.424em 0 1em 0;
}

.cat_desc{
	position: relative;
    text-align: left;
    font-family: 'Gotham';
    font-weight: 400;
    font-size: 1rem;
    color: rgba(186, 186,186, 0.9);
     margin: 1.8rem 0;
}

.cat_desc:before {
	content: '';
	position: absolute;
	top: 1.9rem;
	left: 2px;
	background-color: rgba(186, 186,186, 0.9);
	height: 1px;
	width: 2rem;
}


h5 {
	text-align: center;
	font-family: 'Gotham';
	font-weight: 500;
	font-size: 20px;
    	line-height: 36px;
	letter-spacing: 0.1px;
	color: black;
	margin: 1.424em 0 1em 0;
}
	
h6{
    font-family: 'loraregular', Georgia, serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: rgba(0,0,0,1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mrg_top{
	margin-top: 64px;
}

#container_arbeiten{
	box-sizing: border-box;
    text-align: center;
	margin: auto;
	margin-top: 72px;
    width: 100%;
	max-width: 1000px;
    position: relative;
}


#work_description {
	grid-column: 1/3;
	margin-top: 50px;
}

.line_work {
	margin: auto;
	display: block;
	height: 1px;
	width: 100px;
	background: black;
	margin: 20px auto;
}


.line_about {
	display: block;
	height: 6px;
	width: 40px;
	background: black;
	margin-top: 0.5rem;
	position: absolute;
	left: 45%;
	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
}

.info{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
	text-align: center;
	max-width: 880px;
	margin: 1.5rem auto;
    padding: 0 8px;
}

.wrkinfo{
	position: relative;
    grid-column: 1/3;
}

img.expl_work {
    margin-bottom: 1rem;
    width: 100%;
}

.ghost{
    color:#82bbe5;
    font-family: 'Gotham';
    font-size: 1rem;
}

/* 

ul {
    -webkit-transition: opacity .6s; 
    transition: opacity .6s;
}


ul:hover li {
	opacity: 0.4;
}

ul li:hover { opacity:1; }

*/


ul li a {
    display: flex;
    align-items: center;
}



#nav-fullscreen ul li {
	-webkit-transition: opacity .6s;
    transition: opacity .6s;
    margin-bottom: 0.5rem;
}

#nav-fullscreen ul:hover > li:not(:hover){
  opacity: 0.5;
}

.nav-projects-item-thumb {
	z-index:-1;
	width: 30%;
	display: inline-block;
	position: absolute;
	left: 400px;
}


#container_arbeiten img {
	grid-column: 1/3;
	width: 100%;
}
	
nav {
    	position: fixed;
	width: 100%;
	z-index: 9999;
	top: -10px;
	height: 100px;	
}

#container {
    max-width:1000px;
    display: grid;
    padding-top: 80px;
    margin: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 8px;
    justify-content: center;
    align-items: center;
}


.next_img_frame{
    max-width: 300px;
    margin: auto;
}


.img_nxtPrjkt img{
	width: 100%;
	height: auto;
}

.img_nxtPrjkt .posterMockUp img{
	position: relative;
	bottom: -20px;
}

/* IOANNIS GEORGALAS LOGO */

.letter {
  display: inline-block;
}

#logo{	
    z-index: 1;
    display: inline-block;
    position: fixed;
    top: 50px;
    left: 150px;
    color: black;
    transition: 1s ease-in-out;
}

.arrow {
	opacity: 0;
	position: absolute;
	display: inline-block;
	height: 2px;
	width: 13px;
	background: black;
	top: 7px;
	left: -15px;
}

.arrow:before {
	content: "";
	height: 6px;
	position: absolute;
	top: -3px;
	left: -1px;
	display: inline-block;
	width: 6px;
	border-bottom: 2px solid #000;
	border-left: 2px solid #000;
	transform: rotate(45deg);
}

.letters{
    display: inline-block;
}

.ml12,
.ml13 {
    font-size: 14px;
    letter-spacing: .2em;
    font-family: 'Gotham';
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .2em;
    display: inline-block;
    transition: left 1s ease-out;
}



/* END - IOANNIS GEORGALAS LOGO */




label {
    z-index: 9999;
    position: absolute;
    display: flex;
    align-content: center;
    text-align: center;
    justify-content: space-around;
    top: 45px;
    right: 170px;
    transition: 1s ease-in-out;

}

label a {
	text-decoration: none;
}

#nav-toggle{
	height: 20px;
	width: 20px;
	align-self: center;
	position: relative;
	top: 5px;
	cursor: pointer;
	margin-right: 1.2rem;
	transition: .5s ease-in-out;
}


#about {
	z-index: 2;
	position: relative;
	top: -1px;
	cursor: pointer;
}

#about span{
	margin: auto;
	display: inline-block;
      background-color: black;
	width: 16px;
	height: 2px;
	content: '';
	transform-origin: center;
}


#about span:nth-child(2){
	position: relative;
	right:0;
	transform: rotate(90deg);
}

#nav-toggle span {
    	background-color: black;
	width: 16px;
	height: 2px;
	display: block;
	content: '';
      transform-origin:  center;
	transition: all .4s ease-in-out;
}

#nav-toggle span:before {
	content:"";
	height: 2px;
	width: 2px;
	background: black;
	position: absolute;
    	left: -4px;
}

/* Hamburger Menu  */



#nav-toggle span:nth-child(1) {
  position: absolute;
  top: 0px;
}

#nav-toggle span:nth-child(2) {
  position: absolute;
  top: 6px;
}

#nav-toggle span:nth-child(3) {
  position: absolute;
  top: 12px;
}



/* X Menu */
#nav-toggle.open span:before{
	opacity: 0;
}

#nav-toggle.open{z-index: 9999;}

#nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 5px;

}

#nav-toggle.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 5px;

}

#nav-overlay {
	position: absolute;
	top: 0;
	left: 0;

	z-index: 0;

  	background: rgba(0, 0, 0, 0.7);

	border-radius: 50%;

	transition: 1.5s;
	transform: scale3d(0, 0, 0);
}

#nav-overlay.open {
	z-index: 1;
	transform: scale3d(1, 1, 1);
}

#nav-fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Gotham';
	font-weight: 500;
	font-size: 6vh;
	letter-spacing: 2px;
	color: black;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9999;
	transition: ease-in-out 0.25s;
    transition-delay: 0s;
	visibility: hidden;
	opacity: 0;
}


.nav-item {
	color: black;
	font-size: 5vh;
	font-weight: 600;
	letter-spacing: 3px;
}

.nav-line {
	content: "";
	display: inline-block;
	height: 1px;
	width: 16px;
	margin: 0  8px;
	position: relative;
	background: black;
}


#nav-fullscreen ul {
	margin: auto;
	max-width: 600px;
	list-style: none;}

#nav-fullscreen ul a {
		text-decoration: none;
	}

#nav-fullscreen.open {
	overflow: hidden;
	visibility: visible;
	opacity: 1;
	transition: ease-in-out 0.9s;
	transition-delay: 0.25s;
}

#nav-overlay {
	background: white;
}

.img__animation{
  display: inline-block;
  z-index: 0;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
 
}

.img__animation:before {
  content: "";
  text-align: center;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 	left top0px;
  transform-origin: left top 0px;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 1.5s;
  transition-duration: 1.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.img__animation:hover:before, .img__animation:focus:before, .img__animation:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


.portfolio{
	cursor: pointer;
}


.color2017, .mbb, .rocka, .size {
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0px;
	right: 0px;	
}

.color2017 {background-color: #1eaf9c;}
.mbb {background-color: #f43086;}
.rocka { background-color: #104c89;}
.size { background-color: #5a3958;}


.overlay_fx {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
}

.hello_line {
	position: absolute;
	top: 50%;
	left: -60px;	
}


.overlay_txt,
.overlay_txt_mbb,
.overlay_txt_rocka,
.overlay_txt_rocka_next,
.overlay_txt_sz{
	display: inline-block;
	color: white;
	width:  100%;
	font-family: 'Gotham';
	font-weight: 600;
	letter-spacing: .3rem;
	z-index: 10;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
}

.line_MBB,
.line_r2017,
.line_rocka,
.line_sz
 {
  opacity: 1;
  z-index: 1200;
  position: absolute;
  height: 4px;
  width: 10%;
  transform-origin: left;
  top: 60%;
  left: 40%;
  -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%); 
   background: white;
}

.line_r2017{
	left: 36%;
}

.line_rocka {
	left: 33%;
}

.line_sz{left: 24%;}

.arrow_nxt {
 	width:4rem;
	transform-origin: center;
	height: 2px;
	margin-top: 1.2rem;
	display: inline-block;
	position: relative;
	left: 0;
	background: white;
}

.heart {
	position: relative;
	top: 2px;
}



.arrow_nxt::after{
	content: "";
	width: 10px;
	height: 10px;
	position:absolute;
	top: -5px;
	right: 1px;
	display: inline-block;
	border-bottom: 2px solid white;
	border-right: 2px solid white;
	transform: rotate(-45deg);
}

.project-next_mbb,
.project-next_rocka,
.project-next_r2017{
    display: block;
    max-width: 1000px;
    margin: auto;
    padding-top: 64px;
    position: relative;
}

.next_img_frame:before{
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: pointer;
        content: '';
        -webkit-transition: -webkit-transform 0.6s;
        transition: transform 0.6s;
        transform-origin: left;
        -webkit-transform: scale(0, 1);
        transform: scale (0,1);
      }

.over_rocka:before { background: rgb(14,76,139);
background: -moz-radial-gradient(circle, rgba(14,76,139,0.6) 0%, rgba(14,76,139,1) 100%);
background: -webkit-radial-gradient(circle, rgba(14,76,139,0.6) 0%, rgba(14,76,139,1) 100%);
background: radial-gradient(circle, rgba(14,76,139,0.6) 0%, rgba(14,76,139,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e4c8b",endColorstr="#0e4c8b",GradientType=1);}

.over_sz:before{
	background: rgb(158,120,156);
background: -moz-radial-gradient(circle, rgba(158,120,156,1) 0%, rgba(90,57,88,1) 100%);
background: -webkit-radial-gradient(circle, rgba(158,120,156,1) 0%, rgba(90,57,88,1) 100%);
background: radial-gradient(circle, rgba(158,120,156,1) 0%, rgba(90,57,88,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9e789c",endColorstr="#5a3958",GradientType=1);
}

.over_mbb:before {
  background: rgb(244,48,134);
background: -moz-radial-gradient(circle, rgba(244,48,134,0.6) 0%, rgba(244,48,134,1) 100%);
background: -webkit-radial-gradient(circle, rgba(244,48,134,0.6) 0%, rgba(244,48,134,1) 100%);
background: radial-gradient(circle, rgba(244,48,134,0.6) 0%, rgba(244,48,134,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f43086",endColorstr="#f43086",GradientType=1);
}

.over_r2017:before{
	  background: rgb(30,175,156);
background: -moz-radial-gradient(circle, rgba(30,175,156,0.6) 0%, rgba(30,175,156,1) 100%);
background: -webkit-radial-gradient(circle, rgba(30,175,156,0.6) 0%, rgba(30,175,156,1) 100%);
background: radial-gradient(circle, rgba(30,175,156,0.6) 0%, rgba(30,175,156,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1eaf9c",endColorstr="#1eaf9c",GradientType=1);

}

.project-next_r2017:hover :before,
.project-next_rocka:hover :before {
    
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}


.caution_rocka{
    z-index: 1000;
    display: inline-block;
    color: black;
    text-decoration: none;
    margin: auto;
    position: relative;
    top: 80px;
    left: 100px;
    opacity: 0;
    -webkit-transition: -webkit-transform opacity 0.6s;
    transition: transform 1s;
    transform-origin: left;
    -webkit-transform: scale(1, 1);
    transform: scale (1,1);
}


.project-next_rocka:hover .caution_rocka{
    opacity: 1;
     -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}


.project-next_mbb{background-color: #fcf0f0;}


.next_pr_txt{
    display: inline-block;
    margin: auto;
    position: relative;
    top: 200px;
}


.img1, .img2, .img3, .img4, img5 {
	   	position: relative;
		width: 100%;
		height: auto;
}

.img_test img {
	display: block;
	width:100%;
	height: 100%;
	margin-bottom: 0;
}

.img_test {
	width: 100%;
	height: auto;
}

.img1{
	
	grid-column: 1 / 2;
}

.img2{
	grid-column: 2/ 3;
}

.img5{grid-column: }


.nav-line,
.nav_description{
    opacity: 0.3;
}

#aboutContainer,
#pr_allinfo{
    margin: 8rem auto 0;
    max-width: 990px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
    grid-row: auto;
}

.imgMe{
	
	grid-column: 1/-1;
	justify-self: end;
	position: relative;
}

.imgMe img {
	width: 100%;
	height: auto;
}


.txt_aboutMe{
	grid-column: 2/7;
	margin: 24px auto 64px;
	position: relative;
	justify-self: center;
}


.txt_aboutMe h6 {
	
	line-height: 30px;
	font-weight: 100;	
	    -webkit-font-smoothing: antialiased;
	margin-bottom: 0.5rem;
}

.myLinks {
	justify-self: end;
	grid-column: 8/13;
	margin-top: 24px;
}

#pr_allinfo div {
padding: 0 8px;
box-sizing: border-box;

}

.pr_desc{
    grid-column: 1/7;
   
}


.role {
    grid-column: 7/10;
    justify-self: end;
}

.tools {
	position: relative;	
    justify-self: end;
   grid-column: 10/13;}


.role ul {
    padding: 0;
    list-style: none;
}

.role ul li {
    margin-bottom: 0;
}


#bar {
  position:absolute;
  width:0%;
  height:6px;
  top:0;
  left:0;
  z-index:1000;
  background:#8dbae7;
}

#plusIcon {
	width: 16px;
	height: 16px;
}

#plusIcon span {
	width: 100%;
	height: 2px;
}


#plusIcon span:last-child{top:-18px;
}

.various_div {
	margin-top: 128px;
}


/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/


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

	#container {
		max-width: 800px;
	}
  

}





@media only screen and (max-width: 768px) {
	
    .various_div {
	margin-top: 56px;
}	
   
    .caution_rocka{
        opacity: 1;
        left: 50px;
	  top: 24px;
    }
    
	.imgMe{
		margin-top: 64px;
		grid-column: 1/12;
	}
	
	.imgMe img {
		width: 100%;
		height: auto;
	}
	
	.hello_line{
		position: static;
		margin-top: 2rem;
		margin-left: 1rem;
	}
	
	.line_about{
		position: static;
		transform: translate(0%, 0%);

	}
	
	.txt_aboutMe {
		grid-column: 1/-1;
		padding:0 1rem;
		margin-bottom: 32px;
	}
  
	.myLinks{
		grid-column: 1/-1;
		justify-self:start;
		margin-left: 1rem;
		margin-top: 0;
	}	
	
	
    .overlay_fx {
        display: none;
    }

	
#aboutContainer,	
#container {
    padding-top: 80px;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    grid-gap: 0;
}
	
	#aboutContainer {
		margin-top:  0;
		padding-top: 0;
	}
	
	
.img1,	
.img2,
.img3,
.img4,
.img5
  {
        position: relative;
	  grid-column: 1/3;
	}

.h1_mobile{
	opacity: 1;
	display: inline-block;
}

#logo{
       top: 30px;
       left: 18px; 
    }
	


    label {
	  width: 60px;
        top: 28px;
        right:10px;
    }
	
	#about {
		top:-2px;
		right: 0px;
	}
    
    #plusIcon span:last-child{top:-20px;}
	
	#nav-toggle{
		right: 0px;
	}
	
    nav ul li{
        padding: 0 16px;
    }
    
	.h3_container {
		box-sizing: border-box;
		padding-left: 20px;
	}	
	
    .img_test img{
		position: relative;
		display: inline-block;
		margin: auto;
        	justify-content: center;
        	align-content: center;
	}

	.overlay_fx {
		display: none;
	}
	
	.work_cont{ 
		    transform: translate(0%, 0%);
	}
    
    #pr_allinfo {
        align-items: start;
        padding:  0px 1rem ;
    }
    
    
     .pr_desc{
        grid-column: 1 / -1;
    } 
    
    
    .role {
        justify-self: left;
        grid-column: 1 / -1;
    }
    
    .tools{
        justify-self: left;
        grid-column: 1/ -1;
    }
	
 

}



@media only screen and (max-width: 420px) {
    
    .nav-line,
    .nav_description{
        display: none;
    }

  
	#pr_allinfo{margin-top: 80px;}
	
	.pr_desc>p{
		margin-bottom: 0;
	}
	
	.cat_desc{margin-top: 0;}
	
	.role ul li:nth-child(2)>p{margin-bottom: 0;
		
}
	#container_arbeiten{margin-top: 32px;}
	
	.next_img_frame:before{
        -webkit-transform: scale(1, 1);
        transform: scale (1,1);
      }
    
	label{
		padding-right: 0.5rem;
	}
	
}