/*****************************************/
/********** MAIN ELEMENTS ***********/
/*****************************************/
body 
{ 
	background-color: #333333;
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;	
}

hr {display: block; position: relative; padding: 0; margin: 8px auto; height: 0; width: 50%; max-height: 0; font-size: 1px; line-height: 0; clear: both; border: none; border-top: 2px solid #0047AB; border-bottom: 2px solid #0047AB;}
hr.two {display: block; position: relative; padding: 0; margin: 8px auto; height: 0; width: 100%; max-height: 0; font-size: 1px; line-height: 0; clear: both; border: none; border-top: 2px solid #159cd4; border-bottom: 2px solid #159cd4;}

/*****************************************/
/********** Spacing  *********************/
/*****************************************/
@media (min-width: 320px) {.topspacing{padding-top: 45px;}}
@media (min-width: 568px) {.topspacing{padding-top: 58px;}}
@media (min-width: 1200px) {.topspacing{padding-top: 75px;}}
.no-padding {padding: 0;}

/*****************************************/
/********** Section Colors ***************/
/*****************************************/
.white{background-color: #FFFFFF; color: #000000;}	
.grayLight{ background-color: #dddddd; color: #333333;}
.grayDark{ background-color: #333333; color: #dddddd;}

/*****************************************/
/********** TEXT *************************/
/*****************************************/
h1{color: #333333; font-family: 'Anton', sans-serif;}
h2{color: #333333;}
h3{color: #333333;}
h4{color: #333333; font-weight: bolder;}
h5{color: #333333;}

.whiteText{color: #FFFFFF;}
.dahlRoyal{color: #0047AB;}
.redText{color: #FF3333;}
.grayLightText{color: #dddddd;}
.grayDarkText{color: #333333;}
.shadowDark{text-shadow: 1px 1px #333333;}
.shadowLight{text-shadow: 1px 1px #dddddd;}


.header-text {position: absolute;}
@media (min-width: 320px) {
.header-text {top: 2%;
left: 5%;
}
.header-text h1 {font-size: 25px;}
.header-text h3 {font-size: 16px;}
}
@media (min-width: 576px) {
.header-text {top: 15%;
        left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.header-text h1 {font-size: 50px;}
.header-text h3 {font-size: 25px;}
}
@media (min-width: 768px) {
.header-text {top: 8%;
        left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.header-text h1 {font-size: 30px;}
.header-text h3 {font-size: 15px;}
}

@media (min-width: 992px) {
.header-text {top: 8%;
        left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.header-text h1 {font-size: 50px;}
.header-text h3 {font-size: 25px;}
}

@media (min-width: 1200px) {
.header-text {top: 8%;
        left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.header-text h1 {font-size: 60px;}
.header-text h3 {font-size: 30px;}
}

/*****************************************/
/********** LINKS ************************/
/*****************************************/
a.a1:link{   color: #dddddd; font-size: 16px; text-decoration: underline;}
a.a1:visited{color: #dddddd; font-size: 16px; text-decoration: underline;}
a.a1:hover{  color: #ff9933; font-size: 16px; text-decoration: underline;}

a.a2:link{   color: #000000; font-size: 18px; text-decoration: none;}
a.a2:visited{color: #000000; font-size: 18px; text-decoration: none;}
a.a2:hover{  color: #FF3333; font-size: 18px; text-decoration: none;}

a.a3:link{   color: #dddddd; font-size: 16px; text-decoration: underline;}
a.a3:visited{color: #dddddd; font-size: 16px; text-decoration: underline;}
a.a3:hover{  color: #999999; font-size: 16px; text-decoration: underline;}

a.a4:link{   color: #0047AB; font-size: 18px; text-decoration: none;}
a.a4:visited{color: #0047AB; font-size: 18px; text-decoration: none;}
a.a4:hover{  color: #4169E1; font-size: 18px; text-decoration: none;}

a.a5:link{   color: #0047AB; font-size: 40px; text-decoration: underline;}
a.a5:visited{color: #0047AB; font-size: 40px; text-decoration: underline;}
a.a5:hover{  color: #4169E1; font-size: 40px; text-decoration: underline;}

/*****************************************/
/********** BACKGROUND PICS***************/
/*****************************************/
.bgrentals{
    background-image: url("images/belgrade-rental-leasing-pet-friendly-units.jpg");
    width: 100%;
    min-height: 400px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.bgforrent{
    background-image: url("images/benchmark-property-management-belgrade-mt-rentals-v3.jpg");
    width: 100%;
    min-height: 600px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/*****************************************/
/********** BUTTONS **********************/
/*****************************************/
/***********************
  ROUND BUTTONS
************************/
.round {  border-radius: 24px;}

/***********************
  CUSTON BTN VALUES
***********************/
.btn-nav {
    padding: 10px 10px;
    border: 0 none;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;

}
@media (min-width: 992px) {
.topnav{
        margin-top: 5px;
}
}
@media (min-width: 1200px){
  .topnav{
        margin-top: 5px;
}  
}
.btn-nav:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
}

.btn-primary {
    background: #0099cc;
    color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background: #33a6cc;
}
.btn-primary:active, .btn-primary.active {
    background: #007299;
    box-shadow: none;
}

/*****************************************/
/********** NAVIGATION BAR ***************/
/*****************************************/
.navbar-custom .navbar{
    height: 90px;
}
.navbar-custom .navbar-nav .nav-link {
    font-size: 18px;
    font-family: Tahoma, Geneva, sans-serif;
    color: rgba(0, 71, 171, 1);
}
.navbar-custom .navbar .navbar-nav>li>a:hover,
.navbar-custom .navbar .navbar-nav>li>a:focus {
    color: rgba(0, 153, 204, 1);
}

/*****************************************/
/********** YOUTUBE VIDEO SIZING *********/
/*****************************************/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}