/* Custom Style Definitions */
/* for City Property Management Ltd. */

html, body { width: 100%; margin: 0px; padding: 0px; }
html { line-height: 1.5; xletter-spacing: 0.017em; font-family: "Open Sans", Arial, san-serif; color: #111; }
body{background-color: #fff; border-top: 6px solid #F97C0E;}

/*--------------------fonts----------------------*/

/*---------------headings--------------------*/
h1, h2, h3, h4 { font-family: "Playfair Display", serif; font-weight: 900;}
h5{font-weight: 700;}
h2 {font-size: 42px; text-transform: uppercase; color: #fff;}
h3 {font-size: 30px; line-height: 30px;}
h4 {font-size: 24px;}

/*--------------text & paragaphs----------- */
p {font-weight: 400; color: #333;}
p.norm strong{ font-weight: 700; }
p.open{font-family: "Playfair Display"; color: #333;}
p.intro{font-size: 20px; line-height: 30px;}
p.norm { font-size: 15px; line-height: 28px;  }
p.emp{font-weight: 700px; font-size: 30px; line-height: 30px;}
p.emp em{font-style: normal; color: #c00;}
p.large { font-size: 30px; }
p.large em{font-style: normal;}
p.tiny{font-size: 12px;}
    p.tiny a{color: inherit;}
        p.tiny a:hover{text-decoration: underline;}
p img{vertical-align: middle;}

.toupcase {text-transform: uppercase;}
a.textlink { font-size: 16px; color: #eb0069; text-decoration: none;}
a.textlink:hover{text-decoration: underline;}

/*--------------divs & ids------------------*/
/*colors*/
.silver {background-color: #f7f7f7;}
.lgrey{background: #BEBBA5;}

/*common*/
.brdleft {border-left: 1px solid #ddd;}
.brdrght {border-right: 1px solid #ddd;}
.nomrg {margin: 0;}
.xtralpad{padding-left: 20px;}

#infostrip .row {margin: 0; padding: 0;}
  #infostrip p.address{color: #fff; font-size: 20px; font-weight: bold; margin: 0; padding: 10px 0;}
    #infostrip p.address em{font-style: normal; color: #99BDF8;}

.info-block { padding: 0 25px; }
.info-block p{ text-align: center; font-size: 90%; }

/*----------------parallax--------------*/
.parallax-container {  line-height: 0; height: auto; z-index: 1;}
.parallax-container h3{ font-weight: 700; font-size: 40px; text-align: center;}
.parallax-container p.norm{font-size: 24px;}
#prlx1{height: 200px; min-height: 260px;}
#prlx1 h3{margin-top: 80px; color: #fff;}
#prlx2{height: 100px; min-height: 160px;}

/*-------------cards-------------*/
.prods .card .card-content{padding: 0; margin-bottom: 20px; border-bottom: 3px solid #fbe33c;}
.prods .card .card-content .card-title{font-size: 18px; font-weight: bold; color: #333; padding-bottom: 5px; border-bottom: 1px solid #ccc;}
.prods .card .card-content p{padding: 10px 20px 40px; color: #555;}
.prods .card .card-content .card-image{border-bottom: 1px solid #eee;}
.prods .card .card-content .card-title a{color: #fff;}
.prods .card .card-content .card-title a:hover{ color: #000; text-decoration: underline;}

/*------------collections--------------*/
.collection { border: none; margin-left: 10px;}
.collection .collection-item { background-color: transparent; padding-bottom: 12px; color: #555; padding-left: 0; }

/*------------form-------------*/
.concontent form fieldset{border: none;}
.concontent form button { color: #333;}
.concontent form input {border-color: #ccc; }

/*----------------navbar--------------------*/
#navdiv { background: none; height: 145px;}
.navbar-material .nav-wrapper {
    height: 100px;
}
.navbar-material .nav-wrapper .brand-logo img {
  height: 100px;
}
nav {
    color: #999;
    background: transparent;
}
nav ul li a{
    font-family: "Playfair Display", sans-serif; color: #555; font-weight: 700; font-size: 18px; text-transform: uppercase; }    
nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {

}
nav ul li.active {
  background-color: transparent;
}
nav ul li.active a{color: #000;}
nav ul li.active a:hover{color: #000; borbder-bottom: none;}
nav ul li:hover {
  background-color: transparent;
  border-bottom: none;
}
nav ul li a:hover {
  background-color: transparent;
  border-bottom: none;
  color: #F97C0E;
}
nav .brand-logo { }


@media only screen and (min-width: 601px){
    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
    }
    nav ul{margin-top: 55px;}
    nav ul li:hover { background-color: transparent; border-bottom: 3px solid #eee;}
}
/*--------------sidenav-----------------*/
.side-nav .collapsible { margin: 0;}
.side-nav{}
.side-nav li{height: auto; }
.side-nav li:hover {  border-bottom: none;}
.side-nav a { font-size: 1.4rem;}
 .side-nav a:hover {
  background-color: #f7f7f7; 
  border-bottom: none;
  color: #F97C0E;}
.material-icons{color: #777; padding-top: 30px;}
/*-------------footernav---------------*/
.footernav ul{ list-style:none; text-align: center; padding-bottom: 10px; }
.footernav ul li { list-style-type:none; display:inline; color:#333 ; }
.footernav ul li a { padding:0 4px; display:inline-block; font-size: 12px; font-weight: normal; color:#333; text-decoration: none; border-right: 1px solid #333; }
.footernav ul li a:hover, .footernav ul li a:focus, .footernav ul li a:active { text-decoration: underline; color: #fff; }
.footernav ul li a.lastnav{border: none;}

/*-------------footer-------------*/
footer.page-footer{margin-top: 0; background-color: #bbb;}
footer.page-footer .row{margin-bottom: 0;}
footer.page-footer p.tiny{ font-size: 12px; color: #555;}
footer.page-footer p.large{ color: #fff; }

/*------------form--------------*/
.btn-color {
        background-color: #EE560E;
        border:none;
        cursor:pointer;
    }
    .btn-color:hover {
        background-color: #F8A24B;
        border:none;
        cursor:pointer;
    }
/*------------collections--------------*/
.collection {
    border: none;
}
.collection .collection-item {
    background-color: transparent;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}
.collection .collection-item strong{
    border-bottom: 1px solid #ddd;
    padding-bottom: 3px;
}
/*------------slider------------------*/

.slider .slides li .caption {
  position: absolute;
  top: 80%;
  text-align: center;
  xwidth: 100%;
  opacity: 0;
}

.slider .slides li .caption h3{ 
    font-size: 36px; line-height: 48px;
    font-weight: 900; text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    xtext-shadow: -1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;
}
.slider .slides li .caption h3:hover{background-color: none;}
/*-------------home-------------*/
#homcontent {}
.srv1   {background: #f3f3f3 url("../images/services_bg1.gif") top right no-repeat; height: 430px; margin-bottom: 20px;}
.prc1   {background: #f3f3f3 url("../images/pricing_bg1.gif") top right no-repeat; height: 430px;}
.srv1 h3, .prc1 h3{ padding-top: 40px; }
.srv1 p, .prc1 p {padding-top: 15px;}
#homcontent .xtratmrg{margin-top: 60px;}
#homcontent .xtratpad{padding-top: 30px;}
#homcontent .xtralpad{padding-left: 30px;}
#homcontent .xtrapad{padding: 0 30px;}
#homcontent .xtramrg{margin-top: 750px; margin-bottom: 50px;}
#homcontent .xtrabmrg{margin-bottom: 40px;}
#homcontent p.address{margin: 0; padding: 0}

#homcontent .highlite {margin-left: 30px; margin-right: 30px; font-size: 24px; }
#homcontent .parallax-container p, #homcontent .parallax-container h3 {color: #fff; }

/*-------------about-------------*/
#abtcontent .xtrapad{padding: 40px 0 10px;}
#abtcontent .xtratpad{padding-top: 30px;}
#abtcontent h3{margin-bottom: 30px; }
#abtcontent p.norm{margin: 20px 0;}
#abtcontent .wbrdr{border: 6px solid #ccc;}

/*-------------services-------------*/
#srvcontent .xtrapad{padding: 30px 0;}
#srvcontent .xtratpad{padding-top: 30px;}

/*-------------properties-------------*/
#prpcontent .xtrapad {padding: 30px 0;}
#prpcontent .xtratpad {padding-top: 30px;}
#prpcontent .xtrabpad {padding-bottom: 20px;}
#prpcontent .xtrapad1 {padding: 20px 0 40px;}

#prpcontent p.norm {font-size: 14px; padding: 0 15px 0 0; margin-bottom: 30px;}
#prpcontent p.norm em { color: #777;}
#prpcontent p.norm strong {margin: 20px 0 40px;}

/*-------------pricing-------------*/
#prccontent .silver .xtrapad{padding: 30px 0;}
#prccontent .xtratpad{padding-top: 30px;}
#prccontent .xtrabpad{padding-bottom: 30px;}
#prccontent p.big{font-size: 30px; font-family: "Playfair Display"; letter-spacing: -1px;}

/*-------------contact-------------*/
#concontent p.large {font-size: 16px; margin-bottom: 40px; letter-spacing: 1px;}
#concontent .page-footer p.large {font-size: 30px;}
#concontent h4{text-transform: uppercase; }
#concontent p.norm{line-height: 36px; }
#concontent .xtrapad{padding-top: 40px; padding-bottom: 20px;}
#concontent .silver {padding: 30px 0 20px; margin-top: 30px;}
#concontent .silver h4, #concontent .silver p.large{padding-left: 30px;}
/*#concontent .brdleft {margin-top: 40px; padding: 10px 0 40px 30px; }*/

/*media requests*/
@media only screen and (max-width: 601px){
  .srv1, .prc1 {background-image: none; }
}
@media only screen and (max-width: 992px){
    #prpcontent .brdrght{border-right: none;}
    #concontent .brdleft {border-left: none; margin-top: 20px; padding: 20px 0;}
    .srv1, .prc1{height: 480px;}
    .srv1 h3, .prc1 h3{ padding-top: 20px; }
}
/*overlay captions*/
.imgdiv {
  position: relative;
  width: 50%;
}

.imgdiv .image {
  display: block;
  width: 100%;
  height: auto;
}

.imgdiv .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.imgdiv:hover .overlay {
  opacity: 1;
}

.imgdiv .text {
    color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.captions {
    position: relative;
    overflow: hidden;

    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
            margin-bottom: 20px;
}

.captions::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

.captions:hover::before {
    background: rgba(0, 0, 0, .5);
}

.captions__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.captions__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px;
    color: #FCFEB4;

    -webkit-transform: translateY(100%);
            transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.captions:hover .captions__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.captions__overlay__title {
    line-height: 36px;
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-80% - 10px) );

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.captions:hover .captions__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}