html, body {margin:0;
		padding:0px;
		width:100%;
		height:100%;
		color:maroon;
        background:url(../lo_sfondo/ba14.jpg) repeat;
        	
					
		}

body           {
	       position:relative;
         }
		

@font-face{ 
            font-family:klasy4nyj;
			src:url(wryfty/Rosamunda-One-Normal.ttf);
          }
.intestazione {font-family:klasy4nyj;
        text-align: center;
		font-size: 64pt;
		color:white;
        text-shadow:2px 2px 2px maroon; 
		line-height: 1; 
	
}

.intestazione1{	
              font-size: 50pt;            
		}
		
.intestazione_v_main {font-family:  Impact, sans-serif;
                    text-shadow:4px 4px 4px maroon;
       				color: 	 #fbb718;
                   }

		
.testa { border: 0px solid yellow;
        border-top:10px solid #ffcc00;
        border-bottom:10px solid #ffcc00;	    
		padding:0px;
		text-align: center;
		width:100%;
		min-width: 800px;
		margin:auto;
		margin-top:0px;
		background:url(ba21.jpg)no-repeat;
		background-size:100%;
		
		font-family:klasy4nyj;
		font-size: 64pt;
		margin-bottom:15px;
		border-radius:55px;
		color:white;
        text-shadow:2px 2px 2px maroon; 
		line-height: 20pt;
		}

.testa_kroky	{ border: 0px solid yellow;
         width:100%;
		 height:60px;
		 z-index:3;
		 position: relative;
		}
		
.posto_lohotyp	{ border: 0px solid yellow;
         width:45px;
		 height:40px;
         float:left;
		 margin-left:15px;		 
		 background:url(../zobrazennia/logo1.png) center/cover;
		 background:url(../zobrazennia/logo5.png) center/cover;
         
		}

.postoSpirito{ border: 0px solid yellow;
         width:240px;
		 height:170px;
		 margin:auto;
		 margin-top: -20px;
		 background:url(../zobrazennia/SpiritoSanto2.png) no-repeat;		 
		 z-index:4;
		  
        }
		
.posto_menu{ border: 0px solid red;
         float: right;
         width:45px;
		 height:45px;
		 margin-right:30px;
		 margin-top: -85px;
		 background:url(../zobrazennia/menu.ico) no-repeat center/cover; 
		 
        }
.posto_lohotyp_testo{ border: 0px solid red;         
         width:200px;
		 height:30px;         
         position: absolute; 
		 left:65px;
		 bottom: 0px; 
         padding: 0px;
		 text-align: left;		 
		font-size: 14pt;
		color:maroon;
		font-style: italic;
        text-shadow:2px 2px 2px #fbb718; 
		line-height: 10pt;
         		 
        }	

.posto_reklama_vtesta{ border: 0px solid red;         
         width:430px;
		 height:20px;         
         position: absolute; 
		 right:40px;
		 bottom: 0px; 
         padding: 0px;
		 text-align: left;		 
		font-size: 14pt;
		color:maroon;
        text-shadow:2px 2px 2px #fbb718; 
		line-height: 10pt;
         		 
        }		
		
		
.foto_intestazione  {border: 0px solid yellow;
         width:100%;
		 height:400px;
		 margin:auto;
		 margin-bottom: 50px;
		 position: relative;
         
		}
.posto_zaholovok1 { border: 0px solid red;         
         width:500px;
		 height:50px;         
         position: absolute; 
		 right:20px;
		 bottom: 40px; 
         padding: 10px;
		 text-align: center;
		 font-family:klasy4nyj;
		font-size: 44pt;
		color:white;
        text-shadow:3px 2px 2px maroon; 
		line-height: 30pt;
         		 
        }		
.posto_fb {border: 0px solid red;
          width:190px;
        height:33px;
		margin: auto;		
		padding-left: 40px;
		}
		
.main_1    {border:0px solid white;
		width:800px;
		min-height:80%; /*Це супер працює.*/		
		margin:auto;
		padding:0px;
		border-radius:20px;
		margin-top:0px;
		position: relative;		
		background:url(../lo_sfondo/ba28.jpg);
		position:relative;
        box-shadow: 10px 0px 30px 10px maroon;
		}
		
.pertesto_1 {border: 0px solid white;
			width:680px;
			padding:0px;
			text-align:left;
			margin:auto;
			position: relative;
			font-size: 13pt;
			line-height: 1.8;
			font-family: Verdana, sans-serif;
			
			}
		
.nyz     { 
        border: 0px solid yellow;
        border-top:10px solid #ffcc00;
        border-bottom:10px solid #ffcc00;
	    color:maroon;
		padding:0px;
		text-align: center;
		width:100%;
		min-width:800px;
		margin:auto;
		margin-top:15px;
		background: rgba(255, 204, 0, 0.4);		
		font-family: Source Sans Pro, sans-serif;
		border-radius:25px;
		min-height:221px;/*це я додала до цього стилю кроків. щоб розтягнути до висоти зображень*/ 
	   }
	   
.nyz1{font-size:8pt;
	  font-style:oblique;
	  color:maroon;
	  z-index:3;
}	   
	   
.kroky_menu {width:970px;
        height:50px;
        margin: auto;
        background: rgba(255, 153, 0, 0.5);
        margin-top: 40px;
        margin-bottom: 40px;
        border-radius:10px;
        		
}	   

.sami_kroky	{width:40px;
		   height:40px;
		   margin-top: 5px;
	       margin-left: 10px;
		   border-radius:40px;
           float: left;
		   position:relative;
		   background: rgba(255, 153, 0, 0.8);
		   text-align:center;
		   font-family:  "Arial Black", sans-serif;
		   font-size:20pt;
		   
        }

.decimo {width:47px;}   
		
.kr {margin-top: 3px;}   

.sami {	float: left;
        margin-top: 10px;
		margin-left: 20px;
        font-size:20pt;
			
}

.imagine_center {width:100%;
                max-height:300px;
                border-radius:3px;
}

.zaholovok_zmiwenyj_zliva {border: 0px solid yellow;
                          width:500px;
	                       margin-left: -50px;
						   margin-bottom: 20px;
						   font-family:  "Arial Black", sans-serif;
						   line-height:1.3;
                           z-index: 2;}   
   
		/*++++++++ тут початок стилю для читати також: рамка для зображень*/
figure  {
    background: #fbb718; 
    display: block; 
    width: 200px; 
    height: 250px; 
    float: left; 
    margin: 0 10px 10px 0; 
    text-align: center; 
	line-height:1.1;
	overflow: hidden;
	font-family: "Arial Black", sans-serif; 
	font-size:15px;
   }
.figura {border: 4px solid yellow;
	    width:90%;		
		margin:auto;
		margin-top:15px;
        height:170px;
		}	


.f1 {background:url(../zobrazennia/benedici3.jpg) no-repeat center/cover; 
	
    }

.f2 {	background:url(../zobrazennia/prego3.jpg) no-repeat center/cover; 	
           		}

.f3{background:url(../zobrazennia/prego12.jpg) no-repeat center/cover; 
                    	
           		}
.f4{background:url(../zobrazennia/prego41.jpg) no-repeat center/cover;
                    					
           		}

.f5{background:url(../zobrazennia/Isus8.jpg) no-repeat center/cover;
                    					
           		}
.f6{background:url(../zobrazennia/xr2.jpg) no-repeat center/cover;
                    					
           		}
.f7{background:url(../zobrazennia/spovid3.jpg) no-repeat center/cover;
                    					
           		}
.f16{background:url(../zobrazennia/santafamiglia.jpg) no-repeat center/cover;
                    					
           		}
.f17{background:url(../zobrazennia/Isus7.jpg) no-repeat center/cover;
                    					
           		}


.f8{background:url(../zobrazennia/euc1.jpg) no-repeat center/cover;
                     	
           		}
.f9{background:url(../zobrazennia/mirac2.jpg) no-repeat center/cover;                  
                   					
           		}

.f10{background:url(../zobrazennia/perdono.JPG) no-repeat center/cover;
                                      					
           		}
.f11{background:url(../zobrazennia/sia2.jpg) no-repeat center/cover;
                                        				
           		}
.f12{background:url(../zobrazennia/carita5.jpg) no-repeat center/cover; 
	                 
           		}

.f13{background:url(../zobrazennia/bambino3.jpg) no-repeat center/cover; 	
           		}
		
.f14{background:url(../zobrazennia/mama2.jpg) no-repeat center/cover;
           		}

.f15{background:url(../zobrazennia/bamb5a.jpg) no-repeat center/cover;
                    background-size: 100% 100%; 	
           		}

		
   
.per_leggere_ancora {width: 100%;
    height: 200px;
	line-height: 1.2;
	font-size:11pt;
    margin: auto; 
   }
		/*++++++++ тут початок copiji supplemento.css*/
	   
.center_vmenu {width:90%;
        height:30px;
        margin: auto;
        background: rgba(255, 153, 0, 0.3);
        line-height: 1.3;				
}
/*++++++++ тут початок di vecchia copiji spovid.css	
.center_vmenu {width:90%;
        height:30px;
        margin: auto;
        background: rgba(255, 153, 0, 0.3);		
}
/*++++++++ тут початок copiji supplemento.css*/	
.menu {margin-left: 30px;
           float: left;
		   position:relative;
		   font-size:large;			   
        }
			
.vangelo  {width:90%;
        margin: auto;
		border:0px solid red;
        text-align: center;
		font-size: 17pt;
		font-weight: bold;
	    color:#ffa64d;
		text-shadow:2px 2px 2px maroon; 
        padding:0px;
		border:4px solid white;
        border-radius:75px 1px 75px 1px;
        height:100%;
        padding:15px; 
	    background:url(../bagraundy/f22.png);		
}
.no_tini{text-shadow:2px 2px 2px #ffcc00;
         color:#ffcc00;
}

.no_tini1{text-shadow:none;
         color:maroon;
		 font-size: 30pt;
         }
		 
.zentruvaty_zaholovky{font-size:15pt;
	  font-style:oblique;
	  color:maroon;
	  text-align:center;
	  
}

.kurcyv2	{font-family:klasy4nyj;
		font-size: 30pt;
}

 .kurcyv   {
    font-family: Times, serif;
    font-style: italic; 
        
   }
  
.rientro_a_sinistra {
        margin-left: 40px;
		border-left:6px solid #ff5500;
        padding-left:30px;
		font-weight: bold;
		text-align: justify;
		line-height:1.5
}
.rientro_maggiore_a_sinistra {
        margin-left: 60px;		
        padding-left:10px;
		font-size: 11.5pt;
		text-align: justify;
}
.grasso {
        font-weight: bold;
}

.grasso_v_normale {
        font-weight: normal;
}

.testo_giustificato{text-align: justify;
        		
}


h1	{text-shadow:2px 2px 2px maroon; 
     line-height: 1.2;
}

.a1{
		
	text-shadow:2px 2px 2px #990000;
	
}

.text_poverx_zobrazennia  {
	z-index:2;
	margin-top: -80px;
    padding-left: 8px;
	line-height: 1.3;				
}
	   
/*++++++++ тут кінець copiji supplemento.css */


.a2{
	font-size:large;
	font-weight:bold;
	line-height:50px	
}

a:visited {color:white;
}
a:link {
	color:white;
	text-decoration: none;
	}
a:active {
	color:yellow;
	}
a:hover  {font-size:xx-large;
        text-decoration: none;
		font-size:x-large;
}
.menu a:hover {
	 background: rgba(255, 153, 0, 0.5);
	}

 a:hover  .sami_kroky{
	 background: maroon; 
	}
h2> a:hover  {font-size:xx-large;
        text-decoration: none;
}

.nyz_s2 a:link {font-weight: bold;
	color:maroon;
	text-decoration: none;
	}	
.nyz_s2 a:visited {font-weight: bold;
	color:maroon;
	text-decoration: none;
	}

table  
	{	
		border:1px solid blue;
		border-collapse:collapse;
		width:550px;
		margin:auto;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-weight: bold;
   	}
td 	{
		border:1px solid green;			
		overflow: hidden;
		padding-left:10px;
        padding-right:10px;
		padding-top:20px;
        padding-bottom:20px;		
	}


h2, h3, h4, .menu {font-weight: bold;
       
	}
h1, h2, h3, .menu {color:maroon;
       text-shadow:2px 2px 2px #ffa64d;
	}
h1 {font-weight: bold;
    text-align: center;
    text-shadow:2px 2px 2px #fbb718;	
	}

/*++++++++ тут початок того, що не використовую, але залишила про всяк випадок */
.zmist{color:white;
       text-shadow:2px 2px 2px #ffa64d;
	   font-weight: bold;
	   font-size:20pt;
	   margin-top:25px;
	}

/*++++++++ тут - класи, що розміщували зображення в першому сайті */
.anhel_1 {
         width:17%;
         z-index:-1;
		 height:200px;	 
		 box-shadow: 10px 10px 40px 10px  white;
}
.anhel_2 {margin-top:-200px;
         width:17%;
		 height:200px;
         z-index:-1;		  
		 box-shadow: 10px 10px 40px 10px  white;
}
.xr {
   max-width: 100%;
}
.xrsp {
   width: 100%;
}
.sps {
	  width:320px;
      height: 240px;
}
.sps_1 {border-radius:3px;
	  width:295px;
      height: 200px;
}

.de_abraccio{vertical-align:middle;
	margin-left: 30px;
    margin-right: 30px;
    border-radius:25px;    
    box-shadow: 30px 30px 50px 20px   #fde840;	
}
img  {border-radius:25px;
    vertical-align: middle;
	z-index:-1;
}
.fiore {border-radius:3px;
	margin-left:20px;
}		
/*++++++++ тут - класи, що розміщували зображення в першому сайті */
/*++++++++ тут таблички малюють метелика */
.tably4ka{
	        border: 0px solid green;
			width:420px;
			text-align:justify;
			font-size:18pt;
			font-weight:bold;
			position: relative;
			margin:auto;
			font-family: serif;
			color: white;
			font-style:italic;
	
         }
.tably4ka1{
	        border: 3px solid white;
			width:160px;
			height:100px;
			padding:15px;
			text-align:justify;
	        background-color:	#cd0000;
			float: left;
			position: static;
	        border-radius:25px 70px 15px;
}
.tably4ka2{
	        border: 3px solid white;
			width:200px; width:160px;
			height:100px;
			padding:15px;
			text-align:justify;
	        background-color: #ffa366;					
			float: left;
			position: relative;
	        border-radius:70px 25px 70px 15px;
}
.tably4ka3{
	        border: 3px solid white;
			width:200px; width:160px;
			height:100px;
			padding:15px;
			text-align:justify;
	        background-color: 	#ff6347;
			float: left;
	        position: relative;
			border-radius:70px 15px 70px 25px;
}
.tably4ka4{
	        border: 3px solid white;
			width:200px; width:160px;
			height:100px;
			padding:15px;
			text-align:justify;
	        background-color: #ffec8b;
			float: left;
	        position: relative;
			border-radius:15px 70px 25px;
}
/*++++++++ тут кінець таблички малюють метелика */
/*++++++++ тут - початок різні шрифти */
.times   {
    font-family: Times, serif; /* Шрифт с засечками */
    }
.verdana    {	font-family:  Verdana, sans-serif;
		}
.arial    {	font-family:  Arial, sans-serif;
		}
.arial_black    {	font-family:  "Arial Black", sans-serif;
		}

.impact   {	font-family:  Impact, sans-serif;
		}
.Comic_Sans_MS    {	font-family:  "Comic Sans MS", sans-serif;
		}
.georgia    {	font-family:  Georgia, sans-serif;
		}
.Trebuchet_MS    {	font-family:  "Trebuchet MS", sans-serif;
		}		

		
		.LHF_Cosmic_Cursive   {	font-family:  'LHF Cosmic Cursive', sans-serif;
		}		
.Bickham_Script_Pro    {	font-family:  "Bickham Script Pro", sans-serif;
		}		
.geneva    {	font-family:  Geneva, sans-serif;
		}		
		
.helvetica    {	font-family:  Helvetica, sans-serif;
		}		

/*++++++++ тут -  кінець різні шрифти */

/*++++++++ тут початок - класи малюють в таблиці різні за величиною ячейки*/
.j1{width:60%;
    vertical-align:top;
	text-align: left;	
}
.j1_2{width:65%;
    vertical-align:top;
	text-align: left;
    	
}
.j7{vertical-align:top;
	text-align: left; 
    color: white;
	font-weight:bold;
}

.j9{color: white;
	font-weight:bold;
	text-align: center;
    background:  url(strilka23.png) no-repeat 90% 70%;	
}
.j4{border:0px solid red;
    text-align: center;
	color:#ffa64d;
    padding:0px;	
}
/*++++++++ тут кінець - класи малюють в таблиці різні за величиною ячейки*/

a >p {background:  url(strilka22.png) no-repeat 100% 10%;
}

/*++++++++ тут кусок, що взагалі!!! не використовую!!! */
.virgolette {
    /*font-family: monospace; /* Моношириный шрифт */
    quotes: '"' '"'; /* Устанавливаем вид кавычек */
   } 
   .virgolette:before {
    content: open-quote; /* Добавляем перед текстом открывающую кавычку */
  }
  
   .virgolette:after {
    content: close-quote;  /*Добавляем после текста закрывающую кавычку*/ 
   }
 /*++++++++ тут кінець куска, що взагалі!!! не використовую!!! */

 /*++++++++ тут кінець того, що не використовую, але залишила про всяк випадок */
	
@media screen and (max-width:1200px) {
	.anhel_1{display: none;}
	.anhel_2{display: none;}
		
	} 

@media screen and (max-width:800px) {
html, body    {
		      width:100%;
		      min-width:800px;		  
		     }
.main_1    {
		      max-width:98%;			  
		     }

.pertesto_1 { width:100%;
			max-width:640px;
	        }

}

@media screen and (max-width:640px) {
html, body    {
		      max-width:100%;		  
		   }

.main_1    {
		     max-width:98%;			  
		 }

.pertesto_1 { 
             min-width:320px;
			 text-align:left;
	        }	
	   
}