/* General */
body { margin:0; padding:0; background-color:#f8f8f8; color:#3d3d3d; font-family:"Krub", sans-serif; }
a { color:#3d3d3d; transition:.3s cubic-bezier(.25,.8,.25,1); }
a:hover { text-decoration:none; color:#ff3b3f; }

h1, h2, h3, h4, h5, h6 { font-family:"Lora", sans-serif; } 

h2 { position:relative; text-transform:capitalize; }
h2:after { content:""; display:block; width:100px; height:3px; margin:10px auto 20px; background-color:#ff3b3f; }

h2 + p { margin-bottom:3rem; font-size:14px; color:#696969; }

.button-highlight { padding:10px 20px; background-color:#ff3b3f; color:#FFFFFF; border-radius:5px; text-transform:uppercase; font-weight:700; }
.button-highlight:hover { background-color:#ff0000; color:#FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

section { padding:3rem 0 1.5rem; }
/* end General */

/* Header */
.header .logo img { max-width:204px; }
.header nav a { margin:0 20px; font-weight:700; text-transform:uppercase; font-family:"Lora", sans-serif; }
/* end Header */

/* Jumbotron */
[data-words] { vertical-align:top; position:relative; }
[data-words] > p { position:absolute; color:#ff3b3f; white-space:nowrap; }

.filter-box { padding:40px 40px 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); border-radius:5px; background-color:#ffffff; }
.more-filters { position:relative; margin-left:0px; margin-top:20px; }
.more-filters a { font-size:12px; color:#ff3b3f; }
/* end Jumbotron */

/* Grid listing homepage */
.subtitle { display:inline-block; padding:10px; border-radius:5px; font-size:16px; font-family:"Krub", sans-serif; font-weight:700; text-transform:uppercase; border:1px solid #efefef; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition:.3s cubic-bezier(.25,.8,.25,1); }
.subtitle:hover { cursor:pointer; border:1px solid rgba(255, 59, 63, .4); color:#ff3b3f; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
.subtitle:hover i { color:#ff3b3f; }

.grid-listing .container { position:relative; cursor:pointer; box-sizing:border-box; background-color:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition:.3s cubic-bezier(.25,.8,.25,1); }
.grid-listing .container:hover { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }

.grid-listing .image .row { position:relative; overflow-x:hidden; }
.grid-listing .image img { position:relative; top:0; left:50%; object-fit:none; transform:translateX(-50%); } 
.grid-listing .image .promoted-span { position:absolute; display:inline-block; top:0; left:0; right:0; padding:5px; font-size:12px; background-color:#ffd25e; color:#3d3d3d; font-weight:700; text-transform:uppercase; } 
.grid-listing .image .price { position:absolute; right:0; bottom:10px; }

.grid-listing .content { padding:1.5em 0; }
.grid-listing .content h4 { margin-bottom:1.5em; color:#ff3b3f; font-weight:700; text-transform:uppercase; font-size:21px; }
.grid-listing .content .row { padding:0 1em; }
.grid-listing .content .row p i { color:#ff3b3f; }

.grid-listing .row p { font-weight:500; }
.grid-listing .row p:last-of-type { position:absolute; right:1.0em; }

.grid-listing .user-info { padding:1em; } 
.grid-listing .user-info { border-top:1px solid #efefef; }
.grid-listing .user-info .price { padding:0 1em; background-color:#ff3b3f; color:#ffffff; font-weight:500; }


.grid-listing .see-listing { position:relative; bottom:0; opacity:0; background-color:#ff3b3f; color:#ffffff; font-weight:500; transition:.3s cubic-bezier(.25,.8,.25,1); }
.grid-listing:hover .see-listing { opacity:1; bottom:3.5em; }
.grid-listing .see-listing a { display:block; color:#ffffff; font-weight:500; text-transform:uppercase; }
.grid-listing .see-listing:hover { background-color:#ff0000; }
/* end Grid listing homepage */

/* Onboarding */
.onboarding { position:relative; padding-bottom:3rem; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); z-index:99; }
.onboarding .box .container { position:relative; cursor:pointer; box-sizing:border-box; background-color:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition:.3s cubic-bezier(.25,.8,.25,1); }
.onboarding .box .container:hover { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }

.onboarding i { font-size:64px; color:#ff3b3f; margin-bottom:3rem; }
.onboarding h3 { font-size:24px; }
/* end Onboarding */

/* locations */
.locations { position:relative; background-color:#ffffff; }
.locations:after { content: ""; position:absolute; top:0; left:0; bottom:0; right:0; background:url("../img/locatii-background.jpg"); background-repeat:repeat; opacity:0.2; }

.locations .row div .container { position:relative; z-index:99; display:block; width:100%; min-height:20rem; background-size:cover; border-radius:5px; background-position:50%; box-sizing:border-box; transition:.3s cubic-bezier(.25,.8,.25,1); }
.locations .row:nth-of-type(1) div:nth-of-type(1) .container { background-image:url('../img/judete/brasov.jpg'); }
.locations .row:nth-of-type(1) div:nth-of-type(2) .container { background-image:url('../img/judete/arad.jpg'); }
.locations .row:nth-of-type(2) div:nth-of-type(1) .container { background-image:url('../img/judete/hunedoara.jpg'); }
.locations .row:nth-of-type(2) div:nth-of-type(2) .container { background-image:url('../img/judete/bucuresti.jpg'); }
.locations .row:nth-of-type(3) div:nth-of-type(1) .container { background-image:url('../img/judete/timisoara.jpg'); }

.locations .row div .container:after { content: ""; position:absolute; top:0; left:0; bottom:0; right:0; background-color:#000000; opacity:0.4; transition:.3s cubic-bezier(.25,.8,.25,1); }
.locations .row div:hover .container:after { opacity:0.1; }

.locations .row div .container h3 { position:absolute; left:50%; bottom:3rem; z-index:99; transform:translateX(-50%); color:#ffffff; }
.locations .row div .container p { position:absolute; left:50%; bottom:1.3rem; z-index:99; transform:translateX(-50%); color:#ffffff; }
/* end locations */

/* Try it */
.try-it { position:relative; background-color:#ffffff; }
.try-it:after { content: ""; position:absolute; top:0; left:0; bottom:0; right:0; background:url("../img/try-it-background.jpg"); background-size:100%; background-repeat:repeat; opacity:0.2; }
.try-it .container { position:relative; z-index:99; }
/* end Try it */