/*
Theme Name: Watra Zdynia
Author: Magdalena Mayer
Description: Motyw wydarzenia Watra w Zdyni
Version: 1.0
License: GNU General Public Licence v2 or later
License URI: http://www.gnu.org/license/gpl-2.0.html
Text Domain: watrazdynia
Domain Path: /languages
*/



@font-face
{
font-family: Lato;
src:url(../czcionki/Lato-Regular.ttf);
}
@font-face
{
font-family: Lato Bold;
src:url(../czcionki/Lato-Bold.ttf);
}
@font-face
{
font-family: Lato Black;
src:url(../czcionki/Lato-Black.ttf);
}
@font-face
{
font-family: Lato Light;
src:url(../czcionki/Lato-Light.ttf);
}
@font-face
{
font-family: Open Sans;
src:url(../czcionki/Open-Sans-Regular.ttf);
}

body {
   width: 100%;
   box-sizing: border-box;
   background-color: transparent;
   padding: 0;
   margin: 0;
   text-align: left;
   font-family: 'Lato', arial, Helvetica, "Arial Narrow", Arial, sans-serif;
   color: #2d2d2d;
}


.frame-2 {width: 100%; background: #fff;} /* BIAŁE TŁO DO ZAWSZE BIAŁEJ */

.frame {
	 box-sizing: border-box;
	 display: block;
     width: 100%;
     max-width: 1300px;
	 margin-left: auto;
	 margin-right: auto;
	 padding: 20px;
	 position: relative;
     background: transparent;
} 

a {text-decoration: none;}

.clear {clear: both;}

.film {width: 100%; height: auto;}
p {margin-bottom: 20px;}

img {max-width: 100%; height: auto;}
.wp-block-image img {
    max-width: 100%; height: auto;
}



/********************************************************************
                   NADPISANE STYLE WORDPRESSA
*********************************************************************/

.wp-block-file a.wp-block-file__button {border: 0px !important; color: #fff !important;}

/**************************************************************************************************
                WTYCZKA COOKIE - wyłączenie "cookie notice" (settings button)
***************************************************************************************************/

.cli-style-v2 .cli-plugin-main-link:not(.cli-plugin-button), .cli-style-v2 .cli_settings_button:not(.cli-plugin-button), .cli-style-v2 .cli_action_button:not(.cli-plugin-button) {
display: none !important;}

/*****************************************************************************
                              GIF do Watra w mediach
*****************************************************************************/

.obrazek_3
{background-image: url("https://watrazdynia.pl/wp-content/themes/watrazdynia/img/video.jpg"); background-repeat: no-repeat; float:left; padding: 0; margin:10px;
}
.obrazek_3:hover
{background-image: url("https://watrazdynia.pl/wp-content/themes/watrazdynia/img/anim_4.gif"); background-repeat: no-repeat;
}

.wp-block-image .alignleft {margin-top: 0 !important; padding: 0 !important;}

.wp-block-image {margin-bottom: 0 !important; }

/*****************************************************************************
                              NAGŁÓWEK Z NAWIGACJĄ
*****************************************************************************/

header{box-sizing: border-box; 
       position:fixed; 
	   width: 100%; 
	   background: #80c6e8; /*****KOLOR NAGŁÓWKA*****/
	   height: 60px; 
	   box-shadow:0 3px 15px rgba(0,0,0,.15); 
	   z-index: 100;
	   }

#logo img{box-sizing: border-box; float:left; height: 50px; width: auto; margin: 4px 0 0 20px; }

.spol {box-sizing: border-box; float: right; margin: 0 20px 0 0; color: #fff !important;}
.spol svg:hover {transform: rotateY(180deg);}

.icon-spol {padding: 25px 13px 8px 13px; background: #ffcf3d; height: 20px;}
.icon-spol:hover .cls-2 {fill: red;}

#main-nav {box-sizing: border-box;
     margin: 0 60px 0 0;
	 max-width: 1200px;
	 background: transparent;
	 float: right;
    }
#main-nav-mobile {display: none;}

	
#button {display: none;}

/*****************************************************************************
                            STRONA GŁÓWNA - BANER 
*****************************************************************************/

#baner {box-sizing: border-box; width: 100%; height: auto; margin: 60px 0 -4px 0; padding: 0;}

/*****************************************************************************
                   STRONA GŁÓWNA - CZĘŚĆ Z TRZEMA LINKAMI
******************************************************************************/

#part-one {font-family: 'Lato Black';
           font-size: 18px;
		   line-height: 25px;
           background: #80c6e8; /*****KOLOR TŁA CZĘŚCI Z TRZEMA LINKAMI*****/
		   }
.link {box-sizing: border-box; position: relative; display:block; float: left; width: 33%; height: auto; padding: 20px 20px 20px 0; text-align: left; color: #2d2d2d !important;}
.link a {color: #2d2d2d !important;}
.link a:hover {color: #000 !important;}

.icon {fill: #000; transition-property: fill; transition-duration: 1s; }
.icon-crown {fill: #ffde00; transition-property: fill; transition-duration: 1s; }
.icon-hover {fill: red; transition-property: fill; transition-duration: 0.5s; }
.icon-check {background: transparent;  height: 30px; margin: 0 0 10px 0;}

.line {width: 40px; height: 1px; background: #000; margin: 0 0 8px 0; transition-property: width, background; transition-duration: 1s; }
.line-hover {width: 80px; height: 1px; background: red; margin: 0 0 8px 0; transition-property: width, background; transition-duration: 0.5s; }


.link-title {font-family: 'Lato Black'; font-size: 28px; line-height: 30px; text-transform: uppercase; margin: 0 0 14px 0;}
.link-title-hover {font-family: 'Lato Black'; font-size: 28px; line-height: 30px; text-transform: uppercase; margin: 0 0 14px 0; color: red;}

/*****************************************************************************
             STRONA GŁÓWNA - CZĘŚĆ Z LINKAMI DO ZESPOŁÓW SCENY GŁÓWNEJ
******************************************************************************/	   
		   
#part-two {
           background: #fff; margin: 0px 0 0 0; /*****KOLOR TŁA CZĘŚCI Z ZESPOŁAMI*****/
		   } 

.stage {
	box-sizing: border-box; 
	float: left; 
	width: 25%; 
	min-height: 260px;
    font-family: 'Lato Light';  
	}
.stage img {
	box-sizing: border-box; 
	position: absolute; 
	clip: rect(auto, auto, 190px, auto);
	z-index:30; 
	width: 100% !important;
    }
.img-opacity {
	opacity: 1; 
    transition-property: opacity; 
	transition-duration: 2s; 
	}
.img-opacity-hover{
	opacity: 0.2; 
	transition-property: opacity; 
	transition-duration: 0.5s
	}
.stage-1{
	box-sizing: border-box; 
	position: relative; 
	z-index: 28;
	width: 96%; 
	height: 190px;
    background: #000; 
    transition-property: background, border; 
	transition-duration: 1.5s; 
	border: 0px solid #000;
	}
.stage-1-hover {
	box-sizing: border-box; 
	position: relative;  
	width: 96%;
	height: 190px;
	background: #2d2d2d; 
    transition-property: background, border; 
	transition-duration: 0.5s; 
	border: 5px solid #2d2d2d;
    }
.stage-2{
	box-sizing: border-box; 
	position: relative; 
	width: 96%;	
	padding: 2px 0 3px 0;
    background: #000; 
    text-align: center; 
	color: #fff; 
	font-size: 16px; 
    text-transform: uppercase;   
	}
.stage-3{
	box-sizing: border-box; 
	position: relative; 
	z-index:27; 
	width: 96%; 
	height: 190px;
	margin: -214px 0 0 0; 
	padding: 90px 0 0 0;
    text-align: center; 
	color: #fff; 
	font-size: 18px;  
	text-decoration: none; 	
    }

/*****************************************************************************
                       STRONA GŁÓWNA - CZĘŚĆ Z TEKSTEM
******************************************************************************/	   

#part-three {margin: -36px 0 0px 0; background: #fff; padding: 0 0 20px 0;}
#part-three a {color: #58b4c1;}

/*****************************************************************************
                       STRONA GŁÓWNA - CZĘŚĆ Z FILMEM
******************************************************************************/	   

#part-four {margin: 5-0px 0 0 0; background: #000;}

#part-four iframe {width: 100%; height: 600px;}

/*****************************************************************************
                       STRONA GŁÓWNA - CZĘŚĆ Z TEKSTEM
******************************************************************************/	   

#part-five {margin: 20px 0 40px 0; }
#part-five a {color: #000; }

/*****************************************************************************
                               STRONY i WPiSY 
******************************************************************************/	

#content {float: left; margin: 110px 0 50px 0; width: 69%; font-size: 18px; background: #fff; /*****KOLOR TŁA PODSTRON (strony i wpisy)*****/
}
#content a {color: #ad0109; }
#content2 {float: left; margin: 110px 0 50px 0; width: 100%; font-size: 18px; background: #fff; /*****KOLOR TŁA PODSTRON (strony i wpisy), 100% SZEROKOŚĆ BEZ MENU BOCZNEGO*****/
}
#content2 a {color: #ad0109; }
#content3 {float: left; margin: 110px 0 50px 0; width: 72%; font-size: 18px; background: #fff; /*****ZAWSZE BIAŁE TŁO*****/
}
#content3 a {color: #ad0109; }

#content iframe {width: 100%; height: 600px; padding: 0; margin: 0;}
#content2 iframe {width: 100%; height: 600px; padding: 0; margin: 0;}
#content3 iframe {width: 100%; height: 600px; padding: 0; margin: 0;}

#sidebar {float: right; width: 22%; margin: 125px 0 50px 0;}

#sidebar h2 {font-size: 20px; font-weight: normal; text-transform: uppercase; color: #01a0e2; border-bottom: 1px solid #01a0e2; padding-bottom:3px; display: inline;}
#sidebar ul {list-style-type: none; padding: 0;}
#sidebar li {list-style-type: none; padding: 0;}
#sidebar ul li a {
		   box-sizing: border-box; 
       position:relative; 
	   display: block;
	   width: 100%;
       margin-bottom: 1px; 
	   background: #01a0e2; /*****KOLOR TŁA MENU BOCZNEGO NA PODSTRONACH)*****/
	   padding: 12px 12px 12px 14px;  
	   font-size: 18px;
	   color: #fff; /*****KOLOR TEKSTU BOCZNEGO NA PODSTRONACH)*****/
	   transition-property: background, padding;
	   transition-duration: 0.5s;
}
#sidebar ul li a:hover {
		   box-sizing: border-box; 
       position:relative; 
	   display: block;
	   width: 100%;
       margin-bottom: 1px; 
	   background: #fede3e; /*****KOLOR TŁA MENU BOCZNEGO NA PODSTRONACH)*****/
	   padding: 12px 12px 12px 20px;  
	   font-size: 18px;
	   color: #01a0e2; /*****KOLOR TEKSTU BOCZNEGO NA PODSTRONACH)*****/
	   transition-property: background, padding;
	   transition-duration: 0.3s;
}
/*****************************************************************************
                                   STRONA ARCHIVE
******************************************************************************/	
.archive-title {text-transform: uppercase;  
                color: #69b5e0; /*****KOLOR TYTUŁU ARCHIWUM*****/
				border-bottom: 1px solid #6bbdc9; 
				display: inline; 
				font-size: 22px; 
				}
.archive-note {width: 30%; 
               float: left; 
			   font-size: 12px; 
			   margin: 15px 15px 15px 0;
			   min-height: 400px;
		      }
.archive-note img {width: 100%;}			   
.archive-note-title {
	                font-size: 20px; 
                    text-transform: uppercase; 
					 margin-bottom: 6px; 
					 }
.archive-note-title a {color: #69b5e0 !important; } /*****KOLOR TYTUŁU WPISU ARCHIWUM*****/
.archive-note-content {font-size: 16px;}
.archive-readmore {font-size: 18px; 
                   text-transform: uppercase; 
				   margin-top: 5px; 
				   }
.archive-readmore a {color: #900107; } /*****KOLOR "czytaj więcej" ARCHIWUM*****/
.pagination {}
.pagination h2 {display: none;}
.pagination nav {clear: both; }

/*****************************************************************************
                                   STOPKA
******************************************************************************/	   


footer
     {box-sizing: border-box; 
       position:relative; 
	   width: 100%; 
	   background: #80c6e8; /*****KOLOR NAGŁÓWKA*****/
	   height: 80px; 
	   padding: 35px 25px 35px 25px;
	   font-size: 14px;
	   
     }
	 
	 #footer-left {float: left; font-style: italic;}
	 #footer-right {float: right;}
	 

/*#######################################################################

                           TABLETY
						   
########################################################################*/		
				   
@media (min-width: 480px) and (max-width: 1200px) {
	
header{position:absolute; }		

.link {width: 100%; padding: 0 50px 30px 50px; }

.stage { width: 33%; }

#part-four iframe {width: 100%; height: 450px;}

#content {width: 100%; font-size: 18px; background: #fff; margin: 45px 0 30px 0;} 

#sidebar {float: left; width: 50%; margin: 0;}

.archive-note {width: 45%; }

#button {display: inline-block; 
         color: #fff; 
         font-size: 44px; 
         margin: 0 0 0 10px; 
		 padding: 5px 0 0 0;
         cursor: pointer; 
         width: 44px;
		 height: 47px;
         border-right: 1px solid #fff; 
		 border-left: 1px solid #fff; 
         border-bottom: 1px solid #fff; 
         text-align: center; 
}

#main-nav {display: none;
    }

#main-nav-mobile {
	 box-sizing: border-box;
     position: absolute;
	 margin: 10px 0 0 20px;
	 width: 50%;
	 background: #80c6e8; /*****KOLOR TŁA MENU MOBILNEGO*****/
     display: block;
	 padding: 5px 0 5px 0;
	 border-radius: 3px;
	 box-shadow: 0 0 8px 2px rgba(0,0,0,.25);
	 
    }
	
#main-nav-mobile ul {list-style-type: none;}	
#main-nav-mobile ul li {padding: 5px 0 5px 0; }
#main-nav-mobile ul li a {
color: #fff; /*****KOLOR NAPISÓW MENU MOBILNEGO*****/
text-transform: uppercase; 
border-bottom: 1px solid #e4e4e4; 
display: block; }

	

.main-nav-visible {visibility: visible;}
.main-nav-hidden {visibility: hidden;}


}

/*#######################################################################

                           KOMÓRKI
########################################################################*/		
				   
@media (max-width: 480px) {
	
header{position:absolute; }	
	
#logo img{display: none; }	

#button {display: inline-block; color: #fff; font-size: 46px; margin: 0 0 0 20px; cursor: pointer; }


.link {width: 100%; padding: 0 0 20px 0;}

.stage {width: 100%; }

#part-four iframe {width: 100%; height: 300px;}

#content {width: 100%; font-size: 18px; background: #fff; margin: 35px 0 30px 0;} 

#sidebar {float: left; width: 100%; margin: 0;}

#content iframe {width: 100%; height: 300px;}
#content2 iframe {width: 100%; height: 300px;}
#content3 iframe {width: 100%; height: 300px;}

.content table {margin: 0;}

.archive-note {width: 100%; }

#main-nav {display: none;
    }

#main-nav-mobile {
	 box-sizing: border-box;
     margin: 20px auto 0 auto;
	 width: 90%;
	 background: #80c6e8;; /*****KOLOR TŁAM MENU MOBILNEGO*****/
     display: block;
	 padding: 5px 0 5px 0;
	 border-radius: 3px;
	 box-shadow: 0 0 8px 2px rgba(0,0,0,.25);
	 
    }
	
#main-nav-mobile ul {list-style-type: none;}	
#main-nav-mobile ul li {padding: 5px 0 5px 0; }
#main-nav-mobile ul li a {
color: #fff; /*****KOLOR NAPISÓW MENU MOBILNEGO*****/
text-transform: uppercase; 
border-bottom: 1px solid #e4e4e4; 
display: block; }

	

.main-nav-visible {visibility: visible;}
.main-nav-hidden {visibility: hidden;}


}