/* Mobile devices and everything upto 1224px  ----------- */
/* Styles */
.wrap .header .logo{
position:absolute;
top:195px;
right:0;
left:0;
width:187px;
height:187px;
margin:0 auto
}
.wrap .header .logo img{
float:right;
width:187px
}
.banner{
float:right
}
.banner img{
float:right
}
.recs{
float:right;
width:100%;
padding:60px 0 0 0;
height:1578px
}
.recs .recs_title{
float:right;
width:100%;
text-align:center;
font-weight:bold;
font-size:46px;
margin:0;
padding:0;
letter-spacing:4px
}
.recs .recs_holder{
float:right;
position:relative;
height:1500px;
width:100%
}
.recs .recs_holder .arrow_right,
.recs .recs_holder .arrow_left{
position:absolute;
top:514px;
z-index:2
}
.recs .recs_holder .arrow_right{
right:0
}
.recs .recs_holder .arrow_left{
left:0
}
.recs .recs_holder #recs_slider_holder{
float:right;
position:relative;
z-index:1;
width:640px;
overflow:hidden;
height:1500px
}
.recs .recs_holder #recs_slider_holder #recs_slider{
position:absolute;
top:0;
right:0;
width:50000000px;
max-width:50000000px;
height:1500px;
transition:all 0.75s ease
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec{
float:right;
position:relative;
width:640px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec   .property_title{
float:right;
width:100%;
text-align:center;
z-index:2;
position:relative;
margin:-14px 0 0 0
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec  .property_title .num{
float:right;
font-size:176px;
width:100%;
text-align:center;
font-weight:bold;
height:218px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec  .property_title .number_underline{
float:right;
background:black;
width:64px;
height:5px;
margin:0 45%
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec  .property_title .property_name{
float:right;
font-size:44px;
width:100%;
text-align:center;
font-weight:bold;
margin:20px 0 0 0;
color:black
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec  .txt{
float:right;
text-align:center;
padding:28px 45px 0;
width:550px;
font-size:36px;
line-height:42px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .rec_img{
float:right;
margin:28px 0 0 0;
width:100%;
text-align:center
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .project_btn{
float:right;
border:4px solid black;
padding:6px 14px;
text-align:center;
color:black;
font-weight:bold;
font-size:30px;
text-decoration:none;
margin:42px 197px 0;
letter-spacing:2px;
width:216px
}
.designs{
float:right
}
.designs a{
float:right;
max-width:100%;
margin:0 0 1px 0
}
.designs a img{
float:right;
width:100%;
max-width:100%
}
.designs a .overlay {
display:none
}
.content .contact{
float:right;
margin:53px 0 0 0
}
.content .contact .contact_title{
float:right;
width:100%;
text-align:center
}
.content .contact .contact_title h2{
float:right;
width:100%;
text-align:center;
padding:0;
margin:0;
font-weight:bold;
font-size:43px;
letter-spacing:3px;
height:51px
}
.content .contact .contact_title span{
float:right;
width:100%;
text-align:center;
font-size:33px;
letter-spacing:1px
}
.content .contact .form_holder{
float:right;
margin:46px 44px 0 0;
width:555px
}
.content .contact .form_holder input[type=text]{
float:right;
background:white;
color:black;
border:1px solid black;
padding:2px 28px 0 0;
margin:0 0 46px 0;
width:524px;
height:76px;
font-size:32px
}
.content .contact .form_holder input[type=submit]{
float:right;
color:white;
background:black;
font-weight:bold;
font-size:36px;
padding:0;
margin:28px 97px 0 0;
border:0;
width:356px;
height:78px;
-webkit-appearance:none;
border-radius:0
}
.about{
float:right
}
.about .right{
float:right;
margin:90px 0 0 0
}
.about .right img{
float:right
}
.about .left{
float:right
}
.about .left .about_title{
float:right;
width:100%;
text-align:center;
color:black;
font-size:44px;
font-weight:bold;
padding:0;
margin:48px 0 0 0;
letter-spacing:2px
}
.about .left .title_underline{
float:right;
width:68px;
height:3px;
background:black;
margin:36px 286px 0 0
}
.about .left .txt{
float:right;
text-align:center;
font-size:36px;
padding:0 60px;
margin:50px 0 0 0;
width:510px;
line-height:1;
height:auto;
overflow-y:hidden
}
.about .about_me{
float:right;
border:4px solid black;
padding:6px 14px;
text-align:center;
color:black;
font-weight:bold;
font-size:30px;
text-decoration:none;
margin:60px 197px 0;
letter-spacing:2px;
width:216px
}
.news{
float:right
}
.news h2{
float:right;
width:100%;
font-size:46px;
text-align:center;
margin:88px 0 30px 0;
padding:0;
font-weight:bold
}
.news .row{
float:right;
width:564px;
padding:0 44px 0 0
}
.news .row .block{
float:right;
border:1px solid #ababab;
margin:0 0 48px 0;
padding-top:36px;
padding-right:36px;
padding-bottom:15px;
padding-left:36px
}
.news .row .block > img{
float:right
}
.news .row .block h3{
float:right;
padding:0;
font-weight:bold;
font-size:34px;
position:relative;
margin:11px 0 38px 0;
text-align:center
}
.news .row .block h3::after{
content:"";
width:70px;
height:5px;
background:black;
float:right;
margin:37px 0 0 0
}
.news .row .block h3 a{
float:right;
color:black;
text-decoration:none;
width:100%
}
.news .row .block .smaller_title{
float:right;
font-size:26px;
color:black;
margin:0;
font-weight:bold;
width:380px
}
.news .row .block .date{
float:right;
font-size:24px;
color:black;
width:110px;
text-align:left;
font-weight:bold;
margin:0
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width :1224px) {
/* Styles */
.wrap .header .logo {
position:absolute;
top:226px;
right:55px;
left:auto;
width:120px;
height:120px;
margin:0 auto;
float:none;
z-index:3
}
.wrap .header .menu .menu_links{
padding:8px 186px 0 0
}
.banner{
float:right;
width:100%
}
.banner img{
float:left;
width:1067px
}
.recs{
padding:38px 0 0 0;
height:466px
}
.recs .recs_holder{
height:422px
}
.recs .recs_title{
float:right;
width:1069px;
text-align:right;
font-weight:bold;
font-size:30px;
margin:0 155px 0 0;
padding:0;
letter-spacing:0
}
.recs .recs_holder .arrow_right,
.recs .recs_holder .arrow_left{
top:159px;
width:66px;
cursor:pointer
}
.recs .recs_holder .arrow_right {
right:17px
}
.recs .recs_holder .arrow_left {
left:22px
}
.recs .recs_holder #recs_slider_holder{
float:right;
z-index:1;
width:1174px;
padding:0 25px;
height:422px
}
.recs .recs_holder #recs_slider_holder #recs_slider{
width:5000000px;
float:none;
position:absolute;
top:0;
right:0;
padding:0 74px 0 0
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec{
float:right;
width:1040px;
padding:0 80px 0 0
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .property_title{
padding:43px 0 0 0;
position:relative;
width:402px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .property_title::after{
content:"";
position:absolute;
bottom:7px;
right:0;
width:45px;
height:4px;
background:black
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .property_title .num{
font-size:116px;
width:auto;
height:auto;
text-align:right;
margin:0
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .property_title .property_name{
font-size:26px;
width:auto;
margin:62px 20px 0 0
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .rec_txt{
float:right;
width:402px;
height:421px;
position:relative
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .rec_txt > a{
position:absolute;
bottom:2px;
right:3px;
text-decoration:none;
color:black;
font-size:16px;
font-weight:bold
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .rec_txt > a:hover{
color:#ff0033
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .txt{
float:right;
padding:0;
width:272px;
font-size:14px;
text-align:right;
margin:20px 0 0 0;
line-height:normal;
height:180px;
overflow-y:hidden
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .rec_img{
float:right;
margin:-22px 0 0 0;
width:540px;
text-align:center
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .rec_img > img{
float:right;
width:100%
}
.designs{
margin:59px 0 0 0
}
.designs a{
float:right;
width:408px;
margin:0;
position:relative
}
.designs a img{
float:right
}
.designs a .overlay {
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
height:100%;
width:100%;
transition:.5s ease;
background-color:rgba(0,0,0,0);
z-index:2
}
.designs a:hover .overlay {
background-color:rgba(0,0,0,0.5)
}
.designs a .overlay .text {
opacity:0;
float:right;
width:100%;
text-align:center;
color:#fff;
font-size:26px;
height:100%;
line-height:562px;
letter-spacing:2px
}
.designs a .overlay .text b{
border-bottom:3px solid white;
padding:0 0 6px 0
}
.designs a:hover .overlay .text {
transition:.75s ease;
opacity:1
}
.content .contact{
float:right;
margin:54px 0 0 0;
width:100%
}
.content .contact .contact_title{
float:right;
margin:0;
width:255px;
text-align:right
}
.content .contact .contact_title h2{
float:right;
margin:0 22px 0 0;
font-size:26px;
text-align:right;
width:233px;
height:29px
}
.content .contact .contact_title span{
float:right;
margin:0 28px 0 0;
font-size:14px;
width:227px;
letter-spacing:0;
text-align:right
}
.content .contact .form_holder{
margin:10px 0 0 0;
width:969px
}
.content .contact .form_holder input[type=text]{
background:white;
color:black;
border:1px solid black;
padding:2px 16px 0 0;
margin:0 0 0 22px;
width:235px;
height:34px;
font-size:14px
}
.content .contact .form_holder input[type=submit]{
font-size:22px;
padding:0;
margin:0;
border:0;
width:113px;
height:39px
}
.content .contact .form_holder input[type=submit]:hover{
background:#ff0033
}
.about .right{
margin:60px 0 0 0
}
.about .right img{
width:600px
}
.about .left{
width:390px;
margin:51px 10px 0 0
}
.about .left .about_title{
position:relative;
text-align:right;
font-size:27px;
margin:0 70px 0 0;
width:320px
}
.about .left .about_title::after{
content:"";
position:absolute;
right:0;
bottom:-93px;
left:0;
width:44px;
height:4px;
background:black
}
.about .left .txt{
float:right;
font-size:16px;
padding:0;
margin:130px 70px 0 0;
width:280px;
line-height:normal;
text-align:right;
height:auto
}
.about .about_me{
margin:28px 70px 0 0;
padding:0;
font-size:16px;
border:0;
letter-spacing:normal;
width:auto;
height:auto
}
.about .about_me:hover{
color:#ff0033
}
.news h2{
margin:43px 24px 0 0;
padding:0;
text-align:right;
font-size:30px
}
.news .row{
width:100%;
margin:11px 25px 0 0;
padding:0
}
.news .row .block{
width:321px;
border:1px solid #ababab;
padding-top:23px;
padding-right:21px;
padding-bottom:9px;
padding-left:21px;
margin:0 0 0 43px
}
.news .row .block:nth-child(3){
margin:0 0 0 0
}
.news .row .block a img{
float:right;
width:100%
}
.news .row .block h3{
font-size:18px;
margin:5px 0 22px 0;
text-align:right;
width:100%
}
.news .row .block h3::after{
width:43px;
height:4px;
margin:24px 0 0 0
}
.news .row .block h3 a:hover{
color:#ff0033
}
.news .row .block .smaller_title{
font-size:18px;
margin:0;
width:222px
}
.news .row .block .date{
font-size:18px;
color:black;
width:90px;
text-align:left;
font-weight:bold;
margin:0
}
}
/* Large screens ----------- */
@media only screen  and (min-width :1824px) {
/* Styles */
.wrap .header .logo {
width:187px;
height:187px;
top:354px;
right:0px
}
.banner img {
width:1670px
}
.recs{
padding:38px 0 0 0;
height:720px
}
.recs .recs_holder{
height:638px
}
.recs .recs_title{
width:1569px;
font-size:40px
}
.recs .recs_holder .arrow_right,.recs .recs_holder .arrow_left {
top:289px
}
.recs .recs_holder #recs_slider_holder{
width:1769px;
height:638px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec{
width:1590px;
padding:0 80px 0 0
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .property_title{
padding:43px 0 0 0;
position:relative;
width:672px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .property_title::after{
content:"";
position:absolute;
bottom:7px;
right:0;
width:45px;
height:4px;
background:black
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .property_title .num{
font-size:126px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .property_title .property_name{
font-size:36px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .rec_txt{
float:right;
width:672px;
height:638px;
position:relative
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .rec_txt > a{
font-size:20px;
bottom:138px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .txt{
width:512px;
font-size:20px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .rec_img{
float:right;
margin:-22px 0 0 0;
width:802px;
text-align:center
}
.designs{
margin:59px 0 0 0
}
.designs a{
float:right;
width:608px;
margin:0
}
.designs a img{
float:right
}
.designs a .overlay .text {
font-size:40px;
line-height:840px
}
.designs a .overlay .text b{
border-bottom:5px solid white
}
.content .contact .contact_title{
width:335px
}
.content .contact .contact_title h2{
font-size:32px;
width:223px;
height:39px
}
.content .contact .contact_title span{
font-size:16px;
width:227px
}
.content .contact .form_holder{
margin:10px 0 0 0;
width:1469px
}
.content .contact .form_holder input[type=text]{
margin:0 0 0 39px;
width:375px;
height:55px;
font-size:24px
}
.content .contact .form_holder input[type=submit]{
font-size:24px;
width:170px;
height:55px
}
.about .right img {
width:1200px
}
.about .left {
width:590px
}
.about .left .about_title {
font-size:37px;
width:450px
}
.about .left .txt {
font-size:18px;
margin:130px 70px 0 0;
width:420px
}
.about .about_me {
font-size:18px
}
.news h2 {
font-size:40px
}
.news .row .block{
width:488px;
padding-top:31px;
padding-right:29px;
padding-bottom:16px;
padding-left:29px;
margin:0 0 0 61px
}
.news .row .block h3{
font-size:28px
}
.news .row .block .smaller_title {
font-size:22px;
width:386px
}
.news .row .block .date {
font-size:22px
}
}