/*--Start css--*/
 body{
	 background: #000;
      margin: 0px 10%;
	  padding: 0:
      
}

h2,h3 {
	font-family: serif;
	color: #f5deb3;
	text-align: center;
	margin-bottom: 3px;
	margin-top: 3px;
    }
 header{
     width: 100%;
	 margin: 0;
	 padding-top: 20px;
	 background-image: url(../img/bacground-1.jpg);
	 background-size: cover;
	 border: 4px solid #6a0000;
	 border-radius: 10px; 
	       }
 .Deka{
     margin: 0 0 0 20%;
	 padding: 0;
      }
  #logo{
		float: right;
		margin: 0 5% 0 0;
		padding: 0;
	    
	}
#v-header{
	text-align: center;
	margin: 0;
	padding: 5px 0;
	
}
	#vcont{
		 display: grid;
		 grid-template-columns: 1fr 1fr 1fr 1fr;
		 margin: 5px;
	     color: #f5deb3;
		 text-align: center;
		 width: 100%;
		 border: 1px solid #6a0000;
		 border-radius: 20px; 
		 box-sizing: border-box;
                }
	    
	.video {
	   width; 300px;
	   height: 0;
	   padding-bottom: 169px;
       float: left;
       margin: 7px;
       display: inline-grid;
	   position: relative;
       overflow: hidden;
       border: 5px solid darkred;
       border-radius: 5px 10px 5px 10px;
       box-sizing: border-box;
	  
      }
    .video iframe{
		width: 100%;
		height: 100%;
		position: absolute;
	}
  footer{
	    border: 4px solid #6a0000;
		border-radius: 10px; 
		background: linear-gradient(#6a0000, #5d0e0e, #000000);	
        border-top: 1px solid #6a0000;
		clear: both;
	    box-sizing: border-box;
		height: 40px;
		line-height: 20px;
		width: 100%;
		text-align: center;
		color: #f5deb3;	
	}	
	
	.nav {
	border: 1px solid #6a0000;
    border-radius: 10px; 
	background: linear-gradient(#000, #5d0e0e, #6a0000);	
    border-bottom: 1px solid #6a0000;
    text-align: right;
    height: 40px;
    line-height: 40px;
   
}
.menu {
    margin: 0 30px 0 0;

}
.menu a {
    clear: right;
    text-decoration: none;
	font-family: serif,sans-serif;
   	color: #f5deb3;
	font-size: 22px;
    margin: 0 10px;
	padding: 3px 6px;
	border: 1px;
	border-radius: 4px solid red;
    line-height: 40px;

}
.menu a:hover {
	color: #f5deb3;
	background: black;
	border: 1px solid red;
	border-radius: 15px;
}
.activ-t {
	
	background: linear-gradient(rgba(185, 2, 2, 0.78), #1a1818, #e51616);
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;

	
	}	
span {
    color: #880000;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
	color: aqua;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
	
	
}
#toggle {
    display: none;
	
}
/**--Sadržaj stranice-start --**/

	 .content{
		  background: #000;
	      display: grid;
          grid-template-columns: 1fr 6fr 1fr;		 
	      grid-gap: 0.3em;
		  border: 4px solid #6a0000;
		  border-radius: 10px;
		  box-sizing: border-box;
		  overflow: hidden;
		  clear: both;
         }

	.mcont{
	   
		 color: #f5deb3;
		 border: 1px solid #6a0000;
		 border-radius: 15px; 
		 text-align: center;
		 padding-bottom: 1px;
		 padding-top: 5%;
		 background: linear-gradient(#6a0000, #3a0000,#000);	
		 border: 4px solid #1a0000;
		 border-radius: 20px;
	} 
    .mcont a {
		text-decoration: none;
        color: #f5deb3;
		padding-bottom: 1px;
		
    }
   
	.lcont{
		 border: 4px solid #1a0000;
		 border-radius: 20px;
		 overflow: hidden;
		
	}
	
    .rcont{	
		 border: 4px solid #1a0000;
		 border-radius: 20px;
		 overflow: hidden;
	}
	
/**--Sadržaj stranice-end --**/

/*--Prijava za programe ---*/
	
	
	login input[type="text"],
	login input[type="password"]
	{
		border: none;
		background: red;
		font-size: 20px;
		color: wheat;
		margin-left: 15px;
		padding-left: 10px;
		
	}
	
	
fieldset{
	background: linear-gradient(#000, #3a0000, #6a0000);
	border: 1px solid #8a0000;
	align-self: center;
	margin: auto;
	border-radius: 10px;
	padding-left: 25%;
	padding-top: 4%;
	padding-bottom: 2%;
	width: 65%;
	
}
button{
	display: inline;
	color: #f5deb3;
    margin-left: 20%;
	line-height: 30px;
	background: #3a0000;
	padding: 6px 12px;
	text-align: center;
	font-size: 1em;
	border: 2px solid #6a0000;
    border-radius: 15px; 
}
button:hover{
	cursor: pointer;
	background: #1a0000;
}
	
  /*--Prijava za programe-kraj ---*/

  /*------------Preuzimanje-start------------*/
    .p-mcontent {
		  display: grid;
		  grid-template-columns: 1fr;
		  color: #f5deb3;
		  padding: 0;
	      text-decoration: none;
		   
	 } 
	
     .p-mcontent .p-rcont a{
		  color: #f5deb3;
		  padding: 0;
	      text-decoration: none;
		 
	 } 

	
	
    .p-rcont{
	    background: linear-gradient(#6a0000, #3a0000, #000);	
		border: 4px solid #1a0000;
		border-radius: 20px; 
        text-align: center;
		padding-top: 1%;
		
	}
     .ldown{
	    border: 4px solid #1a0000;
		border-radius: 20px; 
		padding-left: 10%;
		padding-top: 5%;
		background: linear-gradient(#6a0000, #3a0000,#000);
	
		
	}
    .ldown a{
	    color: #f5deb3;
		text-decoration: none;
		
	}
	
    .rdown{
	    background: linear-gradient(#6a0000, #3a0000, #000);	
		border: 4px solid #1a0000;
		border-radius: 20px; 
        padding-left: 10%;
		padding-top: 5%;
		text-decoration: none;
	}
    .rdown a{
	    color: #f5deb3;
		text-decoration: none;
		
	}


 /*------------Preuzimanje-end------------*/

/*-------------------------------------------------------*/

/*----Display manji od 768px-----------------------------*/

@media only screen and (max-width: 768px) {
	body{
		background: #000;
		margin: 5px;
	}
	.Deka{
     margin: 0;
	 width: 100%;
	 height: 80px;	
      }
	#logo{
	    z-index: 11;
		float: right;
		width: 70px;
		height: 70px;
	}
	label {
		padding: 2px;
        display: block;
        cursor: pointer;

    }
    .menu {
        text-align: center;
        width: 100%;
        display: none;
	
    }
    .menu a {
		color: #3fdeb0;
		background: #6a0000;
        display: block;
        border: 3px solid red;
        margin: 0;
		z-index: 10;
        position: relative;
     
    }
    #toggle:checked + .menu {
        display: block;
		z-index: 1;
		
	}  
	/*video sadržaj-start*/
	#vcont{
		grid-template-columns: 1fr 1fr;
	}
	.video{
		margin: 0;
		padding: 0;
		width: 100%;
		min-height: 160px;
		padding-bottom: 56.25%;
		position: relative;

	}
	.video iframe{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.video h2{
		font-size: 0.7em;
		margin: 0;
		padding: 0;
	}
	/*video sadržaj-end*/
	.content{
		display: block;
	}

	.mcont{
	
		font-size: 1.2em;
		
		display: block;
		width: 100%;
		margin: 0:
	}
	.lcont{
		display: none;
	}
	.rcont{
		display: none;
	}
	
	/**Log in***/

.p-content{
          grid-template-columns: 1fr;		 
	      width: 100%;
	 }
.p-lcont{
		
		
	}
	
    .p-rcont{	
       
		}
}
		
/*-------------------------------------------------------*/
/*----Display manji od 500px-----------------------------*/

@media only screen and (max-width: 500px) {
	body{
		background: #000;
		margin: 5px;
	}
	.Deka{
     margin-left: 2%;
      }
	#logo{
		display: none;
	}
	
	label {
        display: block;
        cursor: pointer;

    }
    .menu {
        text-align: center;
        width: 100%;
        display: none;
	
    }
    .menu a {
		color: red;
		background: darkred;
        display: block;
        border: 3px solid red;
        margin: 0;
		z-index: 10;
        position: relative;
     
    }
    #toggle:checked + .menu {
        display: block;
		padding: 3px;
		
    }
	/*video sadržaj-start*/
	#vcont{
		display: block;
	}
	.video{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		position: relative;

	}
	.video iframe{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.video h2{
		margin: 0;
		padding: 0;
	}
	/*video sadržaj-end*/
	.content{
		display: block;
	}

	.mcont{
		font-size: 1.2em;
		display: block;
		width: 100%;
		margin: 0:
	}
	.lcont{
		display: none;
	}
	.rcont{
		display: none;
	}
	.p-mcontent {
		  display: block;
		  grid-template-rows: 1fr 1fr;
		  color: #f5deb3;
		  padding: 0;
	      text-decoration: none;
		   
	 } 
	fieldset{
		margin: 0;
		width: auto;
	}
	
	}

	/*--End css--*/