@charset "utf-8";
/**********************************************************
Project: www.pazovazanajugrozenije.rs
Design and Code by: Milos Zekovic - www.miloszekovic.com
**********************************************************/

@import url('font/font.css');

/* global css */
html, body, div, span, section, article, header, footer, nav, aside, hgroup, h1, h2, h3, h4, h5, h6, p, a, em, font, img, strong, b, u, i, ol, ul, li { margin:0; padding:0; border:0; }
body { background:#f9f9f9; color:#555; font-family:"Calibri", "CalibriB", Arial, Helvetica, sans-serif; text-shadow:0 1px 0 #fff; }
div, span, section, article, header, footer, nav, aside, hgroup, label, input, textarea, select { float:left; }
ul, ol, li { list-style:none; float:left; }
h1, h2, h3, h4, h5 { color:#3a4ba0; float:left; }
a { color:#ee2945; text-decoration:none; }
a:hover { color:#3b4ba0; }
a:active { color:#999; }
img { float:left; font-size:15px; }
p { float:left; font-size:14px; }
p a { border-bottom:1px dotted #ee3539; }
p a:hover { border-bottom:1px dotted #3b4ba0; }
p a:active { border-bottom:1px dotted #999; }
a, p a, a img { transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; }

.container, .container-slider { width:960px; margin:0 auto 0 auto; float:none; }
.box, h1, h2, h3, h4, h5, .news li h2, .news li b, .news li p, .news li img, .about .video, footer span, .about-video ul li b, .about-video ul li .video, .how p, .donations em, .donations ul li img, .about .video-title, .contact, .how, .how ul li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.centering { display:block; margin:0 auto 0 auto; float:none; }
no-fade, .no-fade * { transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; }

#wrapper, h1, h2, h3, h4, h5, header, .content, .top span, .top article, .news, .news li b, .news li img, .about, .about .video, footer, .to-the-top, .footer, footer span, .slider, .slides, .slide, .pages-header, .about-video, .about-video ul, .about-video ul li b, .about-video ul li .video, .how, .how p, .how-block, .donations, .donations ul, .donations article, .donations ul li img, .about .video-title, .contact, .contact li p, #map-canvas, .how ul, .how ul li { width:100%; }

.button-red { display:block; text-align:center; color:#fff; float:left; font-size:30px; background:#ee2945; border-bottom:1px solid #fff; width:300px; padding-top:17px; height:57px; text-shadow:none; }
.button-red:hover { background:#3b4ba0; color:#fff; }
.button-red:active { background:#999; color:#fff; }
.button-red.blue, .button-red.blue:hover, .button-red.blue:active { background:#3b4ba0; }

/* header */
header { height:152px; background:url(../images/ui/header.png) center no-repeat; border-top:5px solid #3a4ba0; }
header span { margin-top:20px; }
header span img { width:150px; height:111px; }
header nav, header article { width:810px; }
header nav ul { float:right; height:50px; }
header nav ul li a { display:block; font-size:17px; height:36px; padding:12px 17px 0 17px; color:#3b4ba0; }
header nav ul li a.active, header nav ul li a:hover.active, header nav ul li a:active.active { background:#3a4ba0; color:#fff; text-shadow:none; }
header nav ul li.home a { text-indent:-9999px; width:60px; height:48px; padding:0; background:url(../images/ui/icon-home.png) top center no-repeat; }
header nav ul li.home a.active, header nav ul li.home a:hover.active, header nav ul li.home a:active.active { background:url(../images/ui/icon-home.png) bottom center no-repeat; }
header h1 { width:615px; height:29px; text-indent:-9999px; background:url(../images/ui/title-bg.png) no-repeat; background-size:615px 29px; margin:40px 0 0 10px; }
header article ul { float:right; }
header article ul li { margin:36px 0 0 5px; }
header article ul li img { width:28px; height:28px; }

/* slider */
.slider-wrapp { background:#ebebeb;
	background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #e1e1e1), color-stop(1, #f4f4f4) );
	background-image: -o-linear-gradient(bottom, #e1e1e1 0%, #f4f4f4 100%);
	background-image: -moz-linear-gradient(bottom, #e1e1e1 0%, #f4f4f4 100%);
	background-image: -webkit-linear-gradient(bottom, #e1e1e1 0%, #f4f4f4 100%);
	background-image: -ms-linear-gradient(bottom, #e1e1e1 0%, #f4f4f4 100%);
	background-image: linear-gradient(to bottom, #e1e1e1 0%, #f4f4f4 100%);
	-webkit-box-shadow:inset 0 0 2px 2px #ddd;
	box-shadow:inset 0 0 2px 2px #ddd; }
.container-slider { width:1200px; height:400px; border-right:10px solid #ee2945; border-left:10px solid #3b4ba0; }
.slider { position:relative; height:400px; overflow:hidden; }
.slides { height:400px; overflow:hidden; *zoom:1; -webkit-backface-visibility:hidden; -webkit-transform-style:preserve-3d; }
.slide { height:400px; clear:none; }
.slide img { width:100%; height:100%; }
.slider .slider-arrow { visibility:hidden; position:absolute; display:block; bottom:167px; width:65px; height:65px; text-indent:-9999px; }
.slider .slider-arrow, .slider .slider-arrow * { transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; }
.slider:hover .slider-arrow { visibility:visible; }
.slider-arrow--right { right:0; background:url(../images/ui/slider-arrows.png) right no-repeat; }
.slider-arrow--left { left:0; background:url(../images/ui/slider-arrows.png) left no-repeat; }
.slider-nav { display:none; }

/* home */
.top { background:#fff; border-bottom:1px solid #eee; padding:25px 0 45px 0; }
.top h2, .top h3, .top h4, .top span { text-align:center; font-weight:normal; }
.top h2 { font-size:48px; color:#555; margin-bottom:4px; }
.top h3 { font-size:60px; color:#ee2945; font-weight:bold; margin-bottom:8px; }
.top h4 { font-size:33px; color:#3b4ba0; margin-bottom:45px; }
.top span { background:#eee; font-size:28px; line-height:36px; padding:20px 0 20px 0; margin:0 0 50px 0; }
.top article em, .donations em { width:645px; padding:14px 0 0 15px; float:left; font-size:33px; color:#3b4ba0; font-weight:bold; }

/* news */
.news { border-bottom:1px solid #eee; padding:40px 0 40px 0; }
.news li { width:300px; margin-right:30px; }
.news li h2, .news li b, .news li p { padding:0 15px 0 15px; }
.news li h2 a { display:block; font-size:18px; line-height:20px; color:#3b4ba0; }
.news li h2 a:hover { color:#ee2945; }
.news li h2 a:active { color:#999; }
.news li b { float:left; font-size:12px; font-weight:normal; color:#999; margin:10px 0 12px 0; }
.news li img { height:auto; border:5px solid #3b4ba0; }
.news li img:hover, .about .video:hover { border:5px solid #ee2945; }
.news li img:active { border:5px solid #999; }
.news li p { line-height:22px; margin:11px 0 0 0; }
.news li.even h2 a, .news li.even h2 a:hover, .news li.even h2 a:active { color:#ee2945; }
.news li.even p { margin-top:17px; }
.news li.even p:last-child { margin-top:33px; }

.news.double li { padding-bottom:25px; margin-bottom:20px; border-bottom:1px solid #eee; }

/* about */
.about, .donations { margin:20px 0 70px 0; }
.donations.double { margin:40px 0 60px 0; }
.about article { width:600px; padding:0 15px 0 15px; margin-right:30px; }
.about article h3, .about article h2 { font-size:35px; }
.about article p, .how p { text-align:justify; margin-top:10px; line-height:24px; font-size:16px; }
.about aside { width:270px; padding:0 15px 0 15px; }
.about aside h4 { font-size:22px; margin:13px 0 3px 0; }
.about article h4 { font-size:24px; margin:20px 0 0 0; }
.about article h5 { margin-top:20px; }
.about article h5 a { font-size:20px; border-bottom:1px dotted #ee3539; }
.about article h5 a:hover { border-bottom:1px dotted #3b4ba0; }
.about article h5 a:active { border-bottom:1px dotted #999; }
.about aside p { color:#777; margin:11px 0 2px 0; line-height:22px; font-size:16px; }
.about aside .log { margin-top:18px; }
.about aside p strong { font-size:18px; }
.about .video, .about-video ul li .video { margin:30px 0 40px 0; border:5px solid #3b4ba0;  position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.about .video iframe, .about-video ul li .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:block; }
.about .video-title { float:left; margin:-30px 0 30px 0; text-align:right; padding-right:15px; font-size:13px; color:#999; }
.about .buttons li { margin-right:30px; }

.about.page { margin:35px 0 35px 0; }
.about.page article { width:930px; margin-right:0; }
.about-video { background:#fff; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:30px 0 40px 0; }
.about-video ul li { width:300px; margin-right:30px; }
.about-video ul li h3 { padding:0 15px 0 15px; font-size:20px; }
.about-video ul li b { float:left; font-weight:normal; font-size:14px; padding:2px 15px 15px 15px; }
.about-video ul li .video { margin:0; }

.how { margin:30px 15px 70px 15px; }
.how h3 { font-size:16px; margin-top:20px; }
.how h4 { font-size:22px; margin-top:20px; color:#ee2945; }
.how .how-big { font-weight:bold; color:#ee2945; margin:15px 0 0 0; }
.how .how-big.double { margin:15px 0 15px 0; }
.how .how-big strong { margin-left:5px; font-size:26px; }
.how ul { margin-top:10px; }
.how ul li { padding-left:10px; line-height:32px; color:#777; }

.contact { padding:35px 15px 15px 15px; }
.contact li { width:50%; }
.contact li { width:50%; }
.contact li h2, .contact li h3 { text-align:center; margin-bottom:5px; }
.contact li h3 { font-size:16px; text-align:left; }
.contact li p { font-size:16px; line-height:28px; }
.contact li p b { font-size:13px; color:#999; margin-right:5px; }
.contact li.even { width:100%; margin-bottom:30px; }
.contact li.even p { text-align:center; }
.contact li.three p, .contact li.three h3 { text-align:right; }

.map { margin-bottom:40px; background:url(../images/ui/contact-logo.png) center bottom no-repeat; padding-bottom:169px; }
#map-canvas { border-top:5px solid #eee; border-bottom:5px solid #eee; height:400px; }

/* footer */
footer { height:225px; background:#e9e9e9; -webkit-box-shadow:inset 0 0 2px 2px #ddd; box-shadow:inset 0 0 2px 2px #ddd; }
footer .to-the-top { margin-top:-31px; }
footer .to-the-top a { text-indent:-9999px; width:60px; height:60px; background:url(../images/ui/top-a.png) no-repeat; background-size:60px 60px; }
footer .to-the-top a:hover { background:url(../images/ui/top-b.png) no-repeat; background-size:60px 60px; }
footer .to-the-top a:active { background:url(../images/ui/top-c.png) no-repeat; background-size:60px 60px; }
footer article { margin-top:40px; }
footer article img { width:75px; height:56px; }
footer article p { font-size:13px; color:#777; line-height:20px; margin:17px 0 0 15px; width:550px; }
footer article p b { font-weight:normal; margin-left:15px; }
footer aside { float:right; margin-top:40px; }
footer aside a { display:block; height:39px; padding:17px 65px 0 0; font-size:13px; color:#777; font-weight:bold; line-height:20px; text-align:right; background:url(../images/ui/starapazova-logo.png) right no-repeat; background-size:50px 56px; }
footer aside strong { text-transform:uppercase; }
footer span { margin:20px 0 0 15px; }
footer span a { font-size:13px; color:#999; }

/* pages header */
.pages-header { height:154px; background:url(../images/ui/header-pages.jpg) center no-repeat; }

/* donations */
.donations em { margin-right:15px; }
.donations ul { margin-bottom:60px; }
.donations ul li { width:128px; margin:10px 10px 0 0; }
.donations ul li img { height:auto; border:1px solid #ddd; -webkit-border-radius:6px; border-radius:6px; }

#tooltip { position:absolute; background:#fefefe; font-size:12px; color:#666; border:1px solid #ddd; cursor:pointer; box-shadow:0 0 3px #ddd; -webkit-box-shadow:0 0 3px #ddd; -moz-box-shadow:0 0 3px #ddd; padding:7px 11px 7px 11px; -moz-border-radius:4px; border-radius:4px; -webkitborder-radius:4px; line-height:15px; }

/* actives */
a img:hover, header nav ul li a:hover, .news li.even h2 a:hover, .button-red.blue:hover, .slider-arrow--right:hover, .slider-arrow--left:hover { opacity:.80; -moz-opacity:.80; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; }
a img:active, .news li.even h2 a:active, .button-red.blue:active, .slider-arrow--right:active, .slider-arrow--left:active { opacity:.60; -moz-opacity:.60; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; }