/************************************************************************************
BASIC DOCUMENT PROPERTIES
*************************************************************************************/

* {
    margin:0;
    padding:0;
 }
body {
    color: #202020;
}
#wrapper{
        /*background-color:#ed0f69;*/
}
body img{                  /*logo slika na početku sajta*/
    display:block;
    margin:auto;
    /*background-color: #ed0f69;*/
    width: 300px;
}
body img a:hover{  
    display:block;
    margin:auto;
    background-color: #ed0f69;
    opacity:0.8;
}
.frame{
    border: 2px solid #696969;
    
}
.members_heading4{ /*za stranicu members*/
    font-family: OpenSans-Regular;
    margin:20px;
}
.members_heading3{ /*za stranicu members*/
    font-family: OpenSans-Regular;
    margin:20px 0 0 20px;
}
.photo_members{
    width:110px;
    height:120px;
    border: 2px solid #696969;
    /*clear:both;
    float:left;*/
    /*margin-top:20px;*/
    display:block;
}
.photo_news_hor{
    width:180px;
    height:110px;
    border: 2px solid #696969;
    /*clear:both;
    float:left;*/
    /*margin-top:20px;*/
    display:block;
}
.photo_news_ver{
    width:110px;
    height:150px;
    border: 2px solid #696969;
    /*clear:both;
    float:left;*/
    /*margin-top:20px;*/
    display:block;
}
.p_members{
    /*clear:both;
    float:left;*/
    margin-left: 20px;
    font-family: OpenSans-Medium;
    font-size: small;
}


.omotac {
    overflow:hidden;
    position: relative;
}


section article p a:link, section article p a:visited {
        color:#050000;
        text-decoration:underline;
        /*box-shadow: none;*/
    }
section article p a:hover {
        color:#696969;
        text-shadow:none;
        transform:none;
        transition:none;
        text-decoration:none;
   }

/************************************************************************************
STRUCTURE
*************************************************************************************/

/************************************************************************************
FONTS 
*************************************************************************************/
@font-face{
    font-family: OpenSans-Light;
    src:url('../fonts/OpenSans-Light.otf');
}
@font-face{
    font-family: OpenSans-ExtraBold;
    src:url('../fonts/OpenSans-ExtraBold.otf');
}
@font-face{
    font-family: OpenSans-Medium;
    src:url('../fonts/OpenSans-Medium.otf');
}
@font-face{
    font-family: OpenSans-Regular;
    src:url('../fonts/OpenSans-Regular.otf');
}
@font-face{
    font-family: OpenSans-Italic;
    src:url('../fonts/OpenSans-Italic.otf');
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
@media screen and (min-width:841px)  {
    body {
        background-color: white;
    }
    header {
        width:100%;
        position:relative;
        height:60px;
        background:#484848;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
        box-shadow: 0px 0px 15px #ed0f69;
        /*opacity:0.85;*/
    }

    header section {
        max-width:100%;
        margin:0 auto;
    }

    header h1 {
        font-family:OpenSans-ExtraBold;
        font-size:28px;
        margin:0;
        padding:12px 10px 12px 0px;
        float:left;
        margin-left:50px;
    }
    header nav{
        font-family: OpenSans-Regular;
    }
    header a:link, header a:visited {
        color:#FFF;
    }
        header a:hover {
            color: #ed0f69;
            -moz-transition: 0.8s;
            -o-transition: 0.8s;
            -webkit-transition: 0.8s;
            transition: 0.8s;
        }
    #logo{
        padding: 10px 10px 0px 0px;
        margin:0;
        width:200px;
    }
    
    nav ul, nav li{
        list-style:none;
    }
    nav ul {
        text-align:center;
        margin:0;
        padding:0;
    }
    nav li {
        width:12%;
        float:left;
    }
    nav li a:link, nav li a:visited {
        display:block;
        color: #FFF;
        text-decoration:none;
        height:40px;
        padding:20px 5px 0 5px;
        border-right:solid 1px #696969;
    }
        nav li a:hover {
            color: #ed0f69;
            -moz-transition: 0.6s;
            -o-transition: 0.6s;
            -webkit-transition: 0.6s;
            transition: 0.6s;
            /*background-color:#686868;*/
            box-shadow: 0px 0px 10px #ed0f69 inset;
        }
        nav li a:active {
            color: #ed0f69;
            /*background-color:#686868;*/
            box-shadow: 0px 0px 10px #ed0f69 inset;
        }
    .header_first_link {
        border-left:solid 1px #696969;
     }
    section{
    clear:both;
    width: 70%;
    background-color: #FFF;
    margin:auto;
    border-left: 2px solid #B6B6B6;
    border-right: 2px double #B6B6B6;
    /*box-shadow:  inset 0px 0px 10px #696969;*/

     box-shadow:0 0 10px hsl(0, 0%, 80%), 0 0 15px hsl(0, 0%, 90%);
    /*box-shadow: 0px 6px 250px #ed0f69;*/
    }
    section h2{
        padding:20px 20px 20px 20px;
    }
    section article{ 
        padding:20px 20px 20px 20px;
    }
    section article h1,h2,h3,h4,h5,h6{
        font-family:OpenSans-Regular;
    }
    section article li{
        font-family: OpenSans-Light;
        margin-left: 55px;
        text-align: justify;
        font-size: 12pt;
 
    }
    section article p{
        font-family: OpenSans-Light;
        padding: 10px 0;
        text-align: justify;
        font-size: 10pt;
    }
      section article hr
      {
        border: 0;
        height: 1px;
        background: #rgba(0,0,0,0);
        background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(237,15,105,0.75), rgba(0,0,0,0)); 
        background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(237,15,105,0.75), rgba(0,0,0,0)); 
        background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(237,15,105,0.75), rgba(0,0,0,0)); 
        background-image:      -o-linear-gradient(left, rgba(0,0,0,0),rgba(237,15,105,0.75), rgba(0,0,0,0)); 
		clear: left; display: block;

    }
    div hr
      {
        border: 0;
        height: 1px;
        background: #rgba(0,0,0,0);
        background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(237,15,105,0.75), rgba(0,0,0,0)); 
        background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(237,15,105,0.75), rgba(0,0,0,0)); 
        background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(237,15,105,0.75), rgba(0,0,0,0)); 
        background-image:      -o-linear-gradient(left, rgba(0,0,0,0),rgba(237,15,105,0.75), rgba(0,0,0,0)); 
    }
    section article a:link, section article a:visited {
        color:#fff;
        text-decoration:none;
    }
        section article a:hover {
            text-shadow: 2px 2px #000;
            -moz-transition: 0.6s;
            -o-transition: 0.6s;
            -webkit-transition: 0.6s;
            transition: 0.6s;
        }
    /*section img {
        padding: 10px;
        margin:0;
        width:200px;
    }*/
        /*section img:hover {
            opacity: 0.7;
            -moz-transition: 0.5s;
            -o-transition: 0.5s;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }*/
    footer {
        clear:both;
        font-family: OpenSans-Light;
        padding:20px 20px 40px 20px;
        background:#484848;
        color:#FFF;
        font-size:12px;
        max-height:10px;
        /*opacity:0.85;*/
    }
    footer a:link, footer a:visited {
        color:#DADADA;
        text-decoration:none;
    }
    footer a:hover {
        color:#B6B6B6;
   }

    footer p {
        padding:0;
        margin:0;
    }



    .icon {
        background-color: #FFF;
        width: 22px;
        float: left;
        opacity: 0.95;
        -moz-transition: width 0.2s;
        -o-transition: width 0.2s;
        -webkit-transition: width 0.2s;
        transition: width 0.2s;
        
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding:1px;
    }
    .icon:hover{
        opacity:1; 
        width:25px;
        box-shadow: 1px 1px 10px #696969;
    }
	
	 .icon2 {
        background-color: #FFF;
        width: 22px;
        /*float: left;*/
        opacity: 0.95;
        -moz-transition: width 0.2s;
        -o-transition: width 0.2s;
        -webkit-transition: width 0.2s;
        transition: width 0.2s;
        
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding:1px;
    }
    .icon2:hover{
        opacity:1; 
        width:25px;
        box-shadow: 1px 1px 10px #696969;
    }
    .social_network_link {
        margin: 5px;
        font-family:OpenSans-Light;
        font-size: x-small;
        color: #696969;
    }
        .social_network_link:hover{
        margin: 5px;
        font-family:OpenSans-Light;
        font-size: x-small;
        color: #ed0f69;
        text-decoration:none;
        font-weight:bold;

    }

        .lijevi_blok {
			min-height: 100%;
			width: 10%;
			left: 20px;
			position: absolute;
		}
	.desni_blok {
		/*background:blue;*/
		height:100%;
		width:82%;
		float:right;
	}
	.news img{
		float: left;
		margin: 15px 0px 15px 15px;
	}
	
	#map-canvas{
          width: 550px;
          height: 350px;
      }
	
}
@media screen and (min-width:568px) and (max-width:840px) {

    section {

    }
    #wrapper{
        background-color: #FFF;
    }
     header {
        width:100%;
        position:relative;
        opacity:0.8;
        border-radius:5px;
        height:100px;
    }
      nav li a:link, nav li a:visited {
        color: #FFF;
        text-decoration:none;
    }
        nav li a:hover {
            color: #ed0f69;
            box-shadow: 0px 0px 10px #ed0f69 inset;
        }

     header h1 {
        display:none;
    }
    nav ul, nav li{
        list-style:none;
    }

    nav ul {
        text-align:center;
        width:100%;
        margin:0;
        padding:0;
    }
    nav li {
        width:49.8%;
        border-bottom:solid 1px #181818;
        border-right:solid 1px #181818;
        float:left;
        background-color:#000;
    }
    nav li a:link, nav li a:visited {
        display:block;
        color: #FFF;
        text-decoration:none;
        padding:8px 0;
    }
    nav li a:hover {
        color: #ed0f69 ;
        transition:0.4s;
        background-color:#181818;
    }

     section article{
        text-align:center;
        padding:40px 40px 20px 40px;
    }

    section article a:link, section article a:visited {
        color:#ed0f69;
        text-decoration:none;
    }
        section article a:hover {
            color: #fff;
            text-shadow: 2px 2px #000;
            -moz-transition: 0.3s;
            -o-transition: 0.3s;
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }
    section img {

        margin:30px auto;
        width:100%;
        height:auto;
    }
        section img:hover {
            opacity: 0.7;
            -moz-transition: 0.5s;
            -o-transition: 0.5s;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }
    footer {
        padding:20px 20px 20px 20px;
        background:#000;
        opacity:0.8;
        color:#686868;
        font-size:12px;
        height:20px;
    }
    footer a:link, footer a:visited {
        color:#686868;
        text-decoration:none;
    }
    footer a:hover {
        text-decoration:underline;
    }

    footer p {
        padding:0;
        margin:0;
    }
        .icon {
        background-color: #FFF;
        width: 32px;
        float: left;
        opacity: 0.95;
        -moz-transition: width 0.2s;
        -o-transition: width 0.2s;
        -webkit-transition: width 0.2s;
        transition: width 0.2s;
        border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
        padding:1px;
    }
    .icon:hover{
        opacity:1; 
        width:35px;
        box-shadow: 1px 1px 10px #696969;
    }
	
	 .icon2 {
        background-color: #FFF;
        width: 32px;
        /*float: left;*/
        opacity: 0.95;
        -moz-transition: width 0.2s;
        -o-transition: width 0.2s;
        -webkit-transition: width 0.2s;
        transition: width 0.2s;
        border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
        padding:1px;
    }
    .icon2:hover{
        opacity:1; 
        width:35px;
        box-shadow: 1px 1px 10px #696969;
    }
    ul li{
	list-style-type:none;

    }
    section article p{
    	margin: 18px 0px;
    }
	
	      section article hr
      {
        border: 0;
        height: 1px;
        background: #rgba(0,0,0,0);
        background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(237,15,105,0.75), rgba(0,0,0,0)); 
        background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(237,15,105,0.75), rgba(0,0,0,0)); 
        background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(237,15,105,0.75), rgba(0,0,0,0)); 
        background-image:      -o-linear-gradient(left, rgba(0,0,0,0),rgba(237,15,105,0.75), rgba(0,0,0,0)); 
		clear: left; display: block;

    }
		section h2{
		margin: 20px;
		}
	#map-canvas{
	max-width: 100%;
	height: auto;
	}
    
}

@media screen and (min-width:240px) and (max-width:567px) {
    section {
 
    }
    #wrapper{
        background-color: #FFF;
    }
    header {
        width:100%;
        position:relative;
        background-color:#000;
        opacity:0.8;
        border-radius:5px;
    }

    header h1 {
        display:none;
    }

    nav ul, nav li{
        list-style:none;
    }
    nav ul {
        text-align:center;
        width:100%;
        margin:0;
        padding:0;
    }
    nav li {
        width:100%;
        border-bottom:solid 1px #181818;
	 background-color:#000;
    }
    nav li a:link, nav li a:visited {
        display:block;
        color: #FFF;
        text-decoration:none;
        padding:8px 0;
    }
        nav li a:hover {
            color: #ed0f69;
            -moz-transition: 0.4s;
            -o-transition: 0.4s;
            -webkit-transition: 0.4s;
            transition: 0.4s;
            background-color: #181818;
        }
	section h2{
		margin: 20px;
		}
    section article{
        text-align:center;
        padding:40px 40px 20px 40px;
    }
    section img {
        margin:20px auto;
        width:100%;
        height:auto;
    }
        section img:hover {
            opacity: 0.7;
            -moz-transition: 0.5s;
            -o-transition: 0.5s;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }

    section article a:link, section article a:visited {
        color:#ed0f69;
        text-decoration:none;
    }
    section article a:hover {
        color: #fff;
        text-shadow: 2px 2px #000;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }
    footer {
        padding:10px 20px 25px 20px;
        background:#000;
        opacity:0.8;
        color:#686868;
        font-size:12px;
        height:20px;
    }
    footer a:link, footer a:visited {
        color:#686868;
        text-decoration:none;
    }
    footer a:hover {
        text-decoration:underline;
    }

    footer p {
        padding:0;
        margin:0;
    }
    .left {
        float:left;
        width:100%;
    }
	
	.desni_blok  img{

    height:25px;
    width:25px;
	float:left;
	margin-right:8px;
	border-radius: 5px;

	}
	.desni_blok  hr{

    width: 95%;

    margin-left:1px;
	margin-right:auto;
	}

	    .icon {
        background-color: #FFF;
        width: 22px;
        float: left;
        opacity: 0.95;
        -moz-transition: width 0.2s;
        -o-transition: width 0.2s;
        -webkit-transition: width 0.2s;
        transition: width 0.2s;
        
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding:1px;
    }
	.icon2 {
        background-color: #FFF;
        width: 22px;
        /*float: left;*/
        opacity: 0.95;
        -moz-transition: width 0.2s;
        -o-transition: width 0.2s;
        -webkit-transition: width 0.2s;
        transition: width 0.2s;
        
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding:1px;
    }
	
		.pub p{
		padding-bottom:10px;
		padding-top:10px;
		}
	.news img{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	#map-canvas{
		max-width: 100%;
		height: auto;
	}
	#show{
		display: none;
		visibility: hidden;
	}
	.numeration{
		list-style-type: none;
	}
}