@font-face {
  font-family: 'MontserratRegular';
  font-weight: normal;
  src: url('../font/MontserratRegular.woff2') format('woff2'),
       url('../font/MontserratRegular.woff') format('woff'); 
}

@font-face {
  font-family: 'MontserratBold';
  font-weight: normal;
  src: url('../font/MontserratBold.woff2') format('woff2'),
       url('../font/MontserratBold.woff') format('woff');
}

@font-face {
  font-family: 'MontserratBlack';
  font-weight: normal;
  src: url('../font/MontserratBlack.woff2') format('woff2'),
       url('../font/MontserratBlack.woff') format('woff');
}

body
{font-family: 'MontserratRegular';	height: 100%; margin: 0; overflow: hidden;}
body, a
{color: #000; text-decoration: none;}

#footer, #header, #contact, #practice
{ 
boder: 1px dashed #000; }

#copy img, #logoImg
{lter: invert(100%);}

#wrapper 
{width:100%;height:100vh; margin: 0;padding: 0; }

#borderTop, #borderRight, #borderBottom, #borderLeft
{ position: fixed; background-color: white; opacity: 1; z-index: 98;}

#borderLeft
{width: 25px; height: 100%; top: 0; left: 0; }
#borderTop
{width: 100%; height: 90px; top: 0;left: 0;}
#borderRight
{width: 25px;height: 100%; top: 0;right:0;}
#borderBottom
{width: 100%; height: 25px; left: 0;bottom: 0; }
#borderBottomMain
{width: 100%; height: 25px; left: 0;bottom: 0; 
position: fixed; opacity: 1; z-index: 98;}

#header
{width: calc(100% - 50px); height: 90px; position: fixed; top:0px; left: 25px;z-index: 100;float: left; ackground-color:red}

#logo 
{position: fixed; top:5px; width:350px; height:80px; overflow: hidden;z-index: 99;
background-image: url("../img/superstruktura_logo.png");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100%;
}
#logo:hover
{ 
background-image: url("../img/superstruktura_logo_move.png");
transition: s}	
#logoImg
{width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 8px; margin: auto;}

/* Styl nawigacji */
#mainNav {
    display: flex;
    justify-content: right; /* Wy rodkowanie nawigacji */
    align-items: center;
}

#mainNavList {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin: 0;
    line-height: 90px;
}

.mainNavItem {
    margin: 0 15px;
}

.mainNavItem a {
    font-size: 18px;
    text-transform: uppercase;
    padding: 10px 15px;
    text-decoration: none;
    color: #000;}
.mainNavItem a:hover
{ color: #ffb901;}

#contentStaticMain, #contentStatic
{width: calc(100% - 50px); height: calc(100% - 125px); margin-top: 90px; margin-left: 25px; display: grid; place-items: center; ackground-color: green;}


.fade-in{
  -webkit-animation: fade-in 0.5s ease;
  -moz-animation: fade-in ease-in-out 0.5s both;
  -ms-animation: fade-in ease-in-out 0.5s both;
  -o-animation: fade-in ease-in-out 0.5s both;
   animation: fade-in 0.5s ease;
   visibility: visible;
  -webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}

.mainImg img
{max-width: 100%; max-height: 100vh;display: block; position: relative; margin: auto; z-index: 2;opacity: 1; transition: all 5s ease-in-out;  }

.mainImg img:hover
{transform: scale(1.2);}

#footer 
{width: 70px; height: 25px; position: fixed; right: 25px; bottom:0px; z-index: 100; float:right;   }

#footer img     
{height:18px; padding-left: 2px;padding-top: 3px;}  

#practice img     
{height:10px; padding-right: 1px;} 
 
#footer span
{display: block;padding-top: 2px;padding-right: 0;font-size: 18px;}   

.txt
{font-size: 14px;line-height: 150%;}
.txtB
{font-size: 14px;line-height: 150%;}

.txtLogo
{font-family: 'MontserratBold', sans-serif;	font-size: 14px; line-height: 150%;}

.txth1
{font-family: 'MontserratBold', sans-serif;	font-size: 24px;line-height: 100%;}
.txtNumber
{font-family: 'MontserratBold', sans-serif;	font-size: 48px;line-height: 100%;}


/* .............................................Practice */

#practiceDescription
{width: 80%; height: 100%; position: absolute; top: 0;  left: 0; right: 0; bottom: 0; margin: auto; }

#practice
{width: 80%; text-align: justify;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

#about
{width: 70%; height: 100%;text-align: justify;  position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%)}

#numbers
{width: 70%; text-align: center;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  display: block;}

#collaboration
{width: 70%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  display: block;}

#mgimg
{width: 100%; display: block; position: relative; top: 0px; left: 0px; }

#mgimg img
{width: 100%; position: relative; margin: auto;}
/* .............................................Projects */


#contentProjects
{width: calc(100% - 50px); margin-left: 25px; margin-top: 90px; overflow: hidden; ackground-color: blue; }

.projectThumbnail
{width: calc(20% - 20px); margin: 10px; float: left; filter: grayscale(50%); transition: all 0.5s ease-in-out; position: relative; z-index: 10; }

.Overlay
{width: 100%; height: 30px; z-index: 11; background-color: #000; position: absolute; left: 0; bottom: 0; float: left;
padding-top: 10px; font-family: 'MontserratBold';	font-size: 16px;color: #fff;opacity: 0;transition: all 0.5s ease-in-out;text-align: center;}

.projectThumbnailImg
{ width: 100%; z-index: 90; float: left;}
.projectThumbnail:hover
{transform: scale(0.97); filter: grayscale(0%);}
.projectThumbnail:hover .Overlay
{opacity: 0.8;}

/* .........................................................Project Page */

#contentProjectPage
{ width: calc(100% - 50px); height: calc(100vh - 120px); margin-left: 25px; margin-top: 90px;  }

.slide
{display: block; max-width: 1800px; width: 85%; height: calc(100vh - 115px); margin-top: 90px; margin: auto; position: relative;  justify-content: center; ackground-color: violet;}

.slide img
{max-width: 100%; max-height:100%; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;margin: auto;}

.img50 img
{width: 50%;}

.pagination
{width: 60px; height: 35px; position: fixed; bottom: 0px; right: 5px; text-align: right; font-size: 16px;z-index: 1000;	
-ms-display: none; }

/* Project without heroimg */
#projectDescription
{
width: 30%;
height: 50%;
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
ackground-color: red;
}
#chart
{width: 400px;}


/* Project with heroimg */

#projectDescriptionimg
{
width: 30%;
height: 40%;
display: block;
position: absolute;
top: 20%; left: 0; right: 0; 
margin: auto;
ackground-color: red;
}

#heroimg
{ width: 100%;
height: 100%;
display: block;
position: relative;
top: 10%; left: 0; right: 0; bottom: 0;
margin: auto;

}

#heroimg img
{max-width: 100%; max-height: 100%; display: block; position: relative; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

/* .................... */

h3
{ font-size: 22px; font-family: 'MontserratBold';}

.char-title, .char-item
{font-size: 14px; line-height: 150%;}

.char-title
{display: block; float: left; font-weight: 500;	}

.char-item
{font-weight: 400; padding-left: 10px;}

sup
{line-height: 0;}

.paragraph
{clear: both; width: 100%; font-size: 14px; text-align: justify; padding-top: 20px;	}

#back
{width: 30px; height: 30px; position: fixed; text-align: center; 
background-image: url("../img/superstruktura_cross.png");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 30px;
z-index: 1010;	top: 95px; right: 30px; }

#back:hover
{background-image: url("../img/superstruktura_crossh.png");	}

/* Contact ----------------------------------------------  */   

#contact
{width: 600px;height: 600px;position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);ackground-color: pink; }
#data
{width: calc(50% - 20px); height: calc(100% - 100px); padding-right: 20px; padding-top: 100px; text-align: right; position: absolute; left: 0; top: 0; font-size: 14px; opacity: 0.5;}

#form
{width: calc(50% - 20px); height: calc(100% - 90px); position: absolute; top: 0; right: 0; padding-left: 20px; padding-top: 83px; opacity: 0.5;}

#formDescription
{margin-bottom: 50px; text-align: justify;}
.popUp
{font-size: 10px; width: 250px; height: 20px; color: #FF6600;}

input, textarea, .btn, .file-upload > p
{ font-family: 'Montserrat', sans-serif; font-size: 12px; color: #666;}	

input
{isplay: inline-block; margin-bottom: 5px; width: 250px; height: 25px; background-color: #f9f9f9; color: #111; border: 1px solid #ddd; ont-size: 10px; box-sizing: border-box; outline: none; vertical-align: top;}

input[type=file]
{background-color: 	#fff;color: #666; border: none;}

.button, .success, .Error, #mail-status
{ background-color: #fff; width: 50px; height: 25px; color: #111; font-weight: 500; padding: 0px 10px; padding-left: 0; margin-top: 10px; border: none;cursor: pointer; letter-spacing: 1px; outline: none; font-size: 14px; text-align: left; clear: both;}

.success, .Error, #mail-status
{ width: 200px; cursor: auto;}
.button:hover
{color: #ffb901; }

textarea
{display: inline-block; margin-bottom: 10px; width: 500px; height: 250px; background-color: #f9f9f9; border: 1px solid #ddd; box-sizing: border-box; outline: none; vertical-align: top; resize: none;}


/* ........................................................................................................Media queries*/

 

/* Laptops -------------------------------------------------- */
@media screen and (min-width : 769px) and (max-width : 1223px) {


#borderTop
{ height: 80px;}

#header
{height: 80px; }

#logo 
{ top:5px; width:300px; height:70px; 
}	





/* Styl nawigacji */


#mainNavList {   
    line-height: 80px;
}

.mainNavItem {
    margin: 0 12px;
}

.mainNavItem a {
    font-size: 16px;
    padding: 10px 2px;
    color: #000;
}

#contentStaticMain, #contentStatic
{  height: calc(100% - 105px); margin-top: 70px;}

/* .................................................Practice */
#practiceDescription
{width: 80%; }

#practice
{width: 80%; }

#about
{width: 80%; }

#numbers
{width: 70%; }

#collaboration
{width: 70%; }



  
/* .................................................Projects */

#contentProjects
{ margin-top: 80px; }

.projectThumbnail
{width: calc(25% - 20px);}



/* ................................................Project Page */
#contentProjectPage
{ height: calc(100vh - 110px);  margin-top: 80px;  }

.slide
{ height: calc(100vh - 105px);   }



/* ..................................................Contact   */   

#contact
{width: 500px;height: 600px;position: absolute;top: 50%; left: 40%; transform: translate(-50%, -50%); 
margin-left:50px;}

#data
{
width: calc(50% - 20px);
height: calc(100% - 100px);
padding-right: 20px;
padding-top: 100px;
}
#data > .txt
{
font-size: 14px;
}

#form
{
width: calc(50% - 20px);
height: calc(100% - 90px);
padding-left: 20px;
padding-top: 88px;
}
	
input
{
width: 220px;
height: 25px;

}

textarea
{	
width: 350px;
}
}

/* Smartphones  */
@media screen and (max-width : 768px){

body
{font-size: 11px;}

#borderTop
{height: 120px; ackground:blue;}

#borderLeft
{width: 15px;}
#borderRight
{width: 15px;}
#borderBottom
{height: 25px;}
#borderBottomMain
{height: 25px;}

#header
{width: calc(100% - 30px); height: 40px; top:80px; left: 15px; }

#logo 
{width:350px; height:70px; padding-top: 5px}

/* Styl nawigacji */
#mainNav {   
    justify-content: center; /* Wy rodkowanie nawigacji */
}

#mainNavList {
    line-height: 50px;
}

.mainNavItem {
    margin: 0 4px;
}

.mainNavItem a {
    font-size: 14px;
    padding: 5px 8px;
}


#contentStaticMain, #contentStatic
{
width: calc(100% - 30px);
height: calc(100% - 145px);
margin-left: 15px;
margin-top: 120px;
float: left;
ackground:blue;}

#contentStaticMain
{overflow: hidden; }
.mainImg img
{height: auto;width: 100%;transition: none;}

.mainImg img:hover
{transform: none;}

#footer 
{isplay: none; left: 15px;}

/* .............................................Practice */

#practiceDescription
{width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; overflow: scroll; z-index:100; ackground: yellow;}

#practice
{width: 90%; text-align: justify; position: absolute; top: 75%; left: 50%; ransform: translate(50%, -50%);}

#about
{width: 90%; height: 90%;text-align: justify;  position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%)}

#numbers
{width: 70%; text-align: center;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  display: block;}

#collaboration
{width: 100%; text-align: center;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  verflow: scroll; display: block;}

#mgimg
{width: 100%; display: block; position: relative; top: 0px; left: 0px; }

#mgimg img
{width: 100%; position: relative; margin: auto;}
  
/* .............................................Projects */


#contentProjects
{
width: calc(100% - 30px);
margin-top: 110px;
margin-left: 15px;
padding-top: 15px;
overflow: hidden;

}

.projectThumbnail
{
width: calc(33% - 9px);
margin: 5px;
}
.Overlay
{
display: none;
}

/* ................................................Project Page */

#contentProjectPage
{ width: calc(100% - 30px); height: calc(100vh - 145px); margin-left: 15px; margin-top: 80px; ackground: red; }

.slide
{display: block; max-width: 1800px; width: 100%; height: calc(100vh - 145px); ackground: blue; margin-top: 8px; margin: auto; position: relative; justify-content: center;}

#chart
{width: 90%; text-align: left; position: absolute;top: 30%; left: 50%; transform: translate(-50%, -50%); overflow: hidden;}

.pagination
{
display: none;
width: 60px;
height: 44px;
bottom: 0px;
right: 2px;
font-size: 14px;	

}

#projectDescription
{
width: 90%;
height: 50%;
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
}

#projectDescriptionimg
{
width: 90%;
}

#heroimg
{
top: 70%; left: 0; right: 0; bottom: 0;
}



h3
{font-size: 16px;}

.char-title, .char-item
{font-size: 11px; line-height: 150%;}

.projectNav
{width: 30px; height: 30px;text-align: center; padding-top: 9px; font-size: 18px;}	

#back
{background-size: 20px;	top: 10px; right: 7px;}

/* Contact ----------------------------------------------  */   


#contact
{
width: 100%;
height: auto;
text-align: center;

}
#data
{
width: 40%;
padding-left: 0px;
height: 100px;
padding-right: 0px;
padding-top: 0px;
margin-top: 10px;
margin: auto;
clear: both;
text-align:left;
position: absolute;
top: -20px; left: 0; right: 0; bottom: 0;
margin: auto;

}


#form
{
display: none;

}
.txth1
{font-family: 'MontserratBold', sans-serif;	font-size: 18px;line-height: 100%;}
.txtLogo
{font-family: 'MontserratBold', sans-serif;	font-size: 12px; line-height: 150%;}

.txt, .txtB
{font-size: 11px;}

.mobileOff
{display: none;}
.mobileLeft
{width: 15px !important;}

}