*{
	box-sizing: border-box;
}

body{
	background-color: #000;
	color: #0d0d0d;
	font-family: 'Niramit', sans-serif;
	font-size: 16px;
	line-height: 1.6em;
	margin: 0;
	padding: 0;
	width: 100%;
}

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

p{
	text-align: justify;
}

nav{
	position: fixed;
	top: 0;
	width: 100%;
}

a{
	transition: .2s ease;
}

input{
	transition: .2s ease;
}


/* Global */

.container{
	width: 80%;
	margin: auto;
	overflow: hidden;
	padding: 30px 30px;
}

.container2{
	width: 80%;
	margin: auto;
	overflow: hidden;
}

@media screen and (max-width: 900px){
	.container{
		width: 90%;
		margin: auto;
		overflow: hidden;
		padding: 10px 10px;
	}

	.container2{
		width: 100%;
		margin: auto;
		overflow: hidden;
	}
}


/* Navbar */

#active{
	color: #0d0d0d; 
	background-color: #fff;
}

#logo{
	float: left;
}

#logo a{
	color: #fff;
	
	font-weight: 600;
	text-decoration: none;
	padding: 20px 16px;
	font-size: 16px;
	letter-spacing: 0.8px;
	line-height: 60px;
}

#logo a:hover{
	
}

#navbar{
	z-index: 1;
	background-color: #0d0d0d;
	text-align: right;
	height: 60px;
	line-height: 60px;
	transition: .2s ease;
}



.menu a{
	font-weight: 600;
	margin: 0 0 0 -5px;
	padding: 20px 18px;
	clear: right;
	font-size: 16px;
	letter-spacing: 1px;
	text-decoration: none;
	color: #fff;
	line-height: 60px;
}

.menu a:hover{
	color: #0d0d0d;
	background-color: #fff;
}



label{
	margin: 0;
	padding-right: 40px;
	padding-left: 20px;
	font-size: 24px;
	line-height: 60px;
	display: none;
	width: 25px;
	float: right;
}

#toggle{
	display: none;
}

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

	#navbar{
		width: 100%;
	}

	label{
		background: #fff;
		display: block;
		cursor: pointer;
	}

	.menu{
		z-index: 3;
		text-align: center;
		width: 100%;
		display: none;
		background: rgba(13,13,13,1.0);
	}

	.menu a{
		padding: 0;
		display: block;
		margin: 0;
		color: #fff;
		
	}

	.menu a:hover{
		color: #fff;
		background: rgba(0,176,208,0.5);
	}

	#toggle:checked +.menu {
		display: block;
	}
}


/* Welcome */

#welcome img{
	width: 400px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-filter: drop-shadow(4px 4px 10px black);filter: drop-shadow(4px 4px 10px black);
}

#welcome{
	z-index: -1;
	position: relative;
	width: 100%;
	height: 100vh;
	font-size: 40px;
	text-align: center;
	color: #fff;
	font-weight: 100;
}

#welcome h1{
	letter-spacing: 2px;
	opacity: 0.8;
	position: absolute;
	left: 50%;
	top: 35%;
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 500px){
	#welcome{
		height: 100vh;
		
	}

	#welcome h1{
		position: absolute;
		left: 50%;
		top: 35%;
		
	}

	#welcome img{
		width: 250px;
		position: absolute;
		left: 50%;
		top: 50%;
		
	}
}


/* Footer */

#main-footer{
	background: #0d0d0d;
	color: #fff;
	line-height: 30px;
	text-align: center;
	font-size: 4px;
	letter-spacing: 2px;
}

#main-footer h1{
	margin: 0;
}



/* Home */

.fling-minislide img{
	top: 0px;
	filter: brightness(0.7); 
	width: 100%; 
	height: 100vh; 
	object-fit: cover;
	object-position: top center;
	z-index: -2;
	position: fixed; 
}

.fling-minislide img{ 
	animation:fling-minislide 20s infinite; 
	opacity:0;
	transform: scale(100%); 
}

@keyframes fling-minislide {
	25%{opacity:1;} 
	40%{opacity:0;}
	0%{transform: scale(100%);} 
	100%{transform: scale(110%);}
} 

.fling-minislide img:nth-child(4){animation-delay:0s;}
.fling-minislide img:nth-child(3){animation-delay:5s;}
.fling-minislide img:nth-child(2){animation-delay:10s;}
.fling-minislide img:nth-child(1){animation-delay:15s;}





/* My Work Grid */

#my-work{
	background-color: rgba(255,255,255,0.9);
}


#home-work{
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr ;
	grid-template-areas: 
	"foto1 text1"
	"text2 foto2";
}

#home-work h2{
	
	font-size: 22px;
}

.item0{
	text-align: center;
	grid-area: title;
	align-self: center;
}

.item1{
	min-height: 400px;
	background-image: url('../img/portfolio/sport/2k/sport25.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	grid-area: foto1;
	
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
	
}


.item2{
	padding-left: 20px;
	grid-area: text1;
	align-self: center;
}

.item3{
	padding-right: 20px;
	text-align: left;
	grid-area: text2;
	align-self: center;
}

.item4{
	background-image: url('../img/portfolio/reportaz/2k/reportaz7.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	grid-area: foto2;

	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}




@media(max-width: 1050px){
	#home-work{
		
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 2fr 1fr 2fr 1fr;
		grid-template-areas: 
		"foto1"
		"text1"
		"foto2"
		"text2";
	}

	.item2{
		padding: 0;
	}

	.item3{
		padding: 0;
		text-align: left;
	}
}

@media(max-width: 450px){
	#home-work{
		
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-template-areas: 
		"foto1"
		"text1"
		"foto2"
		"text2";
	}

	.item2{
		padding: 0;
	}

	.item3{
		padding: 0;
		text-align: left;
	}
}

/* News section */

#news{
	width: 100%;
	background-color: #f4f4f4;
	
}

/* Social Home */

#social-home{
	margin-bottom: 80px;
	
}

@media screen and (max-width: 500px){
	#social-home{
	margin-bottom: 80px;
	
}
}

.cytat{
	color: #fff;
	text-align: center;
}

.ikony-social{
	margin-top: 30px;
	width: 290px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
}


.ikony-social li {
    display: inline-block;
    padding-right: 9px;
    padding-left: 9px;
}

/* About */

#about{
	margin-top: 150px;
	background-color: rgba(244,244,244,0.9);
}

#main{
	float:right;
	width: 70%;
	box-sizing: border-box;
}

#main p{
	text-align: justify;
	text-indent: 30px;
}

#sidebar{
	float: left;
	width: 30%;
	padding-right: 30px;
	box-sizing: border-box;
}

#sidebar img{
	display: block;
}

#dorobek{
	margin-top: 20px;
	background-color: rgba(244,244,244,0.9);
}

@media(max-width: 1600px){
	#main{
		width: 100%;
		float: center;
	}

	#sidebar {
		padding: 0px;
		width: 100%;
		float: center;
	}

	#sidebar img{
		max-width: 400px;
		max-height: 400px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Contact */

#grid-kontakt{
	padding: 0;
	margin-top: 150px;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 0fr 1fr;
	grid-template-areas: 
	"tekst tekst"
	"form dane";
}

.kontakt-tekst{
	background-color: rgba(244,244,244,0.9);
	grid-area: tekst;
	padding: 20px;
	font-size: 17px;
}

.kontakt-form{
	background-color: rgba(244,244,244,0.9);
	grid-area: form;
	padding: 20px;
}

.kontakt-dane{
	background-image: url('../img/kontakt2.jpg');
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	grid-area: foto2;
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
	background-color: rgba(244,244,244,0.9);
	grid-area: dane;
	padding: 20px;
}

#main2 h1{
	font-size: 20px;
}



.my-form .form-group{
	margin-bottom: 15px;
}

.my-form label{
	display: block;
	font-size: 14px;
}

.my-form input[type="text"], .my-form textarea{
	overflow: none;
	padding: 8px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.my-form input[type="submit"]{
	background-color: #0d0d0d;
	color: #fff;
	padding: 10px 15px;
	border: 0.5px solid #999;
}

.my-form input[type="submit"]:hover{
	background-color: #fff;
	color: #111;
	border: 0.5px solid #999;
	transition: .2s ease;
}


@media(max-width: 1100px){
	#grid-kontakt{
		padding: 0;
		margin-top: 100px;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 0fr 1fr;
		grid-template-areas: 
		"dane"
		"tekst"
		"form";
	}
}

/*Social media*/

.wrapper,.copyright {
    padding: 0px;
}
hr{
    margin: 30px 20px;
    border-top:2px solid #1C1E26 ;
    border-bottom:2px solid #38404D;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.list-inline li {
    display: inline-block;
    padding-right: 3px;
    padding-left: 3px;
    margin-bottom: 10px;
}

@media(max-width: 1100px){
	.list-inline li {
		margin-bottom: 40px;
	}

}

.social-icons .fa {
	font-size: 1.6em;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa{ 
    border-radius: 50%;
}

.social-icons.icon-rounded .fa{
    border-radius:5px;
}  

.social-icons .fa:hover, .social-icons .fa:active {
    color: #FFF;
    
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active { 
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

.social-icons .fa-apple{background-color:#aeb5c5;} 
.social-icons .fa-500px{background-color: #000;} 
.social-icons .fa-dribbble{background-color:#F46899;}  
.social-icons .fa-dropbox{background-color:#018BD3;}
.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;}  
.social-icons .fa-google-plus,.social-icons .fa-google-plus-square{background-color:#CF3D2E;} 
.social-icons .fa-instagram{background: linear-gradient(to bottom left, purple, orange);}
.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#0085AE;} 
.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#CC2127;} 
.social-icons .fa-renren{background-color:#025DAC;}
.social-icons .fa-skype{background-color:#01AEF2;}
.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#32CCFE;} 
.social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square{background-color:#C52F30;}

/* Gallery */


.portfolio{
	margin-top: 60px;
	display: grid;
	
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	box-sizing: border-box;
}
/*
:root{
	--shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
	--shadow2: 0 4px 8px 0 rgba(0, 176, 208, 0.2), 0 6px 20px 0 rgba(0, 176, 208, 0.19);
	--shadow3: 0 2px 4px 0 rgba(0, 90, 90, 0.2);
	--shadow4: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
*/
.portfolio img{
	z-index: -3;
	object-position: top center;
	object-fit: cover;
	width: 100%;
	height: 279.5px;
}

/*
.portfolio img:hover{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

*/

.portfolio a{
	height: 280px;
	background-color: #0d0d0d;
	text-decoration: none;
	color: #fff;
	font-weight: 400;
	text-align: center;
	box-shadow: var(--shadow);
	transition: .4s ease;
}

.portfolio p{
	background-color: rgba(0,0,0,0.7);
	transform: translate(0, -287px);
	text-align: center;
	margin: 0;
	opacity: 1;
	height: 280px;
	line-height: 280px;
	transition: .4s ease;
	font-weight: 600;
	letter-spacing: 1px;
}

.portfolio p:hover{
	opacity: 0;
}

@media screen and (max-width: 900px){
	.portfolio p{
		opacity: 1;
		
	}
}


/* Gallery  Albums/Lightbox */

.gallery-title a{
	text-decoration: none;
}

.gallery-title h1{
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	background-color: #fff;
	padding: 14px 16px;
	margin-top: 60px;
	color: #0d0d0d;
	letter-spacing: 1px;
	transition: .2s ease;
}

.gallery-title h1:hover{
	letter-spacing: 2px;
}


.gallery-title2 h1{
	text-align: center;
	font-size: 17px;
	font-weight: 500;
	background-color: #0d0d0d;
	padding: 14px 16px;
	margin-top: -12px;
	color: #fff;
	letter-spacing: 1px;
}



#gallery-modal{
	margin-top: -12px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	box-sizing: border-box;
}

.box{
	height: 280px;
	overflow: hidden;
}

.box img{
	display: grid;
	width: 100%;
	height: 280px;
	object-position: center center;
	object-fit: cover;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.box a{
	display: grid;
	object-position: center center;
	object-fit: cover;
	width: 100%;
	height: 280px;
	
}

.box img:hover{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}



/* Animate CSS */

.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}




/* 000 webhost banner */

div a img{
	display: none;
}