.quote{
float:right;
width:573px;
margin:49px 67px 0 0
}
.quote > img{
float:right;
width:91px
}
.quote .txt{
float:right;
width:416px;
text-align:right;
font-size:46px;
margin:25px 67px 0 0;
letter-spacing:1px;
line-height:56px
}
.self_profile{
float:right;
width:100%;
text-align:center;
margin:35px 0 0 0
}
.self_profile > img{
display:inline-block
}
.self_profile .titles{
float:right;
width:100%;
margin:32px 0 0 0;
position:relative;
padding:0 0 5px 0
}
.self_profile .titles::after{
content:"";
position:absolute;
right:0;
bottom:0;
left:0;
margin:0 auto;
top:auto;
width:68px;
height:3px;
background:black
}
.self_profile .titles .title{
float:right;
width:100%;
text-align:center;
margin:0 0 52px 0
}
.self_profile .titles .title .years{
float:right;
width:100%;
font-weight:bold;
text-align:center;
font-size:32px
}
.self_profile .titles .title .diploma{
float:right;
text-align:center;
font-size:32px;
padding:0 70px;
width:500px;
margin:-10px 0 0 0;
line-height:42px
}
.more_about_me{
float:right;
padding:0 41px 53px;
text-align:center;
font-size:36px;
margin:55px 0 0 0;
line-height:38px;
position:relative
}
.more_about_me::after{
content:"";
position:absolute;
right:0;
bottom:0;
left:0;
margin:0 auto;
top:auto;
width:68px;
height:3px;
background:black
}
.selected_projects{
float:right;
width:100%;
text-align:center
}
.selected_projects h2{
float:right;
width:100%;
text-align:center;
padding:0;
font-weight:bold;
margin:29px 0 0 0;
font-size:46px;
letter-spacing:1px
}
.selected_projects .project_imgs{
float:right;
margin:14px 0 0 0
}
.selected_projects .project_imgs img{
float:right
}
.selected_projects a .overlay {
display:none
}
.dos_and_donts{
float:right;
width:100%;
text-align:center;
margin:7px 0 0 0
}
.dos_and_donts h2{
float:right;
width:100%;
text-align:center;
font-weight:normal;
font-size:48px;
line-height:58px
}
.dos_and_donts .tips{
float:right;
width:100%;
margin:54px 0 0 0
}
.dos_and_donts .tips .tip{
float:right;
width:100%;
position:relative;
margin:0 0 54px 0;
background:url(../../../design/default/css/images/about/tip_bg.png) top center no-repeat
}
.dos_and_donts .tips .tip::after{
content:"";
position:absolute;
right:0;
bottom:0;
left:0;
margin:0 auto;
top:auto;
width:68px;
height:3px;
background:black
}
.dos_and_donts .tips .tip h3{
float:right;
width:100%;
font-weight:bold;
text-align:center;
font-size:48px;
margin:0;
padding:128px 0 0 0
}
.dos_and_donts .tips .tip .txt{
float:right;
padding:0 70px 50px;
text-align:center;
font-size:36px;
margin:23px 0 0 0;
line-height:40px;
width:500px
}
.vid{
float:right;
margin:1px 0 0 0;
width:100%
}
.vid iframe{
float:right;
width:100%
}
.vid .txt{
float:right;
padding:0 70px 0;
font-size:36px;
text-align:center;
margin:0 0 0 0;
line-height:38px
}
.recs{
float:right;
width:100%;
padding:40px 0 0 0;
height:1568px
}
.recs .recs_title{
float:right;
width:100%;
text-align:center;
font-weight:bold;
font-size:46px;
margin:0;
padding:0;
letter-spacing:1px
}
.recs .recs_holder{
float:right;
position:relative;
height:1500px;
width:100%
}
.recs .recs_holder .arrow_right,
.recs .recs_holder .arrow_left{
position:absolute;
top:493px;
z-index:2;
cursor:pointer
}
.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:-38px 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:225px;
position:relative
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec   .property_title .num::after{
content:"";
position:absolute;
right:0;
bottom:0;
left:0;
margin:0 auto;
top:auto;
width:68px;
height:3px;
background:black
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec  .property_title .underline{
display:none
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec  .property_title .property_name{
float:right;
font-size:40px;
width:100%;
text-align:center;
font-weight:bold;
margin:14px 0 0 0
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec  .txt{
float:right;
text-align:center;
padding:20px 45px 0;
width:550px;
font-size:36px;
line-height:41px
}
.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
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width :1224px) {
/* Styles */
.quote{
width:540px;
margin:5px 147px 0 0;
position:relative
}
.quote::after{
content:"";
position:absolute;
bottom:-48px;
right:95px;
width:45px;
height:4px;
background:black
}
.quote > img{
width:49px
}
.quote .txt{
width:409px;
text-align:right;
font-size:20px;
margin:36px 43px 0 0;
letter-spacing:1px;
line-height:36px
}
.self_profile{
position:relative
}
.self_profile > img{
top:-299px;
left:129px;
width:449px;
display:block;
position:absolute
}
.self_profile .titles{
width:443px;
margin:63px 237px 0 0
}
.self_profile .titles::after{
display:none
}
.self_profile .titles .title{
text-align:right;
margin:0 0 16px 0
}
.self_profile .titles .title .years{
font-size:18px;
width:81px
}
.self_profile .titles .title .diploma{
text-align:right;
font-size:16px;
padding:0;
width:330px;
margin:2px 6px 0 0;
line-height:normal
}
.more_about_me{
padding:0 241px 0 0;
text-align:right;
font-size:16px;
margin:25px 0 0 0;
line-height:normal;
width:790px;
min-height:190px
}
.more_about_me::after{
display:none
}
.selected_projects{
text-align:right
}
.selected_projects h2{
text-align:right;
padding:0 28px 0 0;
margin:48px 0 0 0;
font-size:30px;
width:1196px
}
.selected_projects .project_imgs{
margin:3px 0 0 0
}
.selected_projects .project_imgs a{
float:right;
width:408px;
margin:0;
position:relative
}
.selected_projects .project_imgs img{
width:408px
}
.selected_projects .project_imgs a .overlay {
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
}
.selected_projects .project_imgs a:hover .overlay {
background-color:rgba(0,0,0,0.5)
}
.selected_projects .project_imgs 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
}
.selected_projects .project_imgs a .overlay .text b{
border-bottom:3px solid white;
padding:0 0 6px 0
}
.selected_projects .project_imgs a:hover .overlay .text {
transition:.75s ease;
opacity:1
}
.dos_and_donts h2{
width:145px;
text-align:right;
font-weight:normal;
font-size:30px;
line-height:34px;
margin:58px 39px 0 0
}
.dos_and_donts .tips{
width:910px;
margin:54px 130px 0 0
}
.dos_and_donts .tips .tip{
width:455px;
margin:0;
background-position:97% 9px;
background-size:60px
}
.dos_and_donts .tips .tip h3{
width:360px;
text-align:right;
font-size:31px;
margin:0;
padding:0 92px 0 0;
position:relative
}
.dos_and_donts .tips .tip h3::after{
content:"";
position:absolute;
bottom:-27px;
right:94px;
width:45px;
height:4px;
background:black
}
.dos_and_donts .tips .tip::after{
display:none
}
.dos_and_donts .tips .tip .txt{
padding:40px 94px 0 0;
text-align:right;
font-size:16px;
margin:23px 0 0 0;
line-height:normal;
width:320px;
min-height:190px
}
.vid{
margin:89px 0 0 0
}
.vid iframe{
width:666px;
height:458px;
margin:0 32px 0 0
}
.vid .txt{
padding:0 135px 0 0;
font-size:16px;
text-align:right;
margin:0 0 0 0;
line-height:normal;
width:280px;
min-height:342px
}
.recs{
height:568px
}
.recs .recs_title{
text-align:right;
font-size:28px;
padding:29px 157px 0 0;
margin:0;
width:1067px
}
.recs .recs_holder{
height:497px
}
.recs .recs_holder .arrow_right,
.recs .recs_holder .arrow_left{
top:162px;
width:66px
}
.recs .recs_holder .arrow_right{
right:20px
}
.recs .recs_holder .arrow_left{
left:20px
}
.recs .recs_holder #recs_slider_holder{
width:100%;
height:497px
}
.recs .recs_holder #recs_slider_holder #recs_slider {
width:5000000px;
height:497px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec{
width:1224px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .right{
float:right;
width:403px;
padding:0 155px 0 0
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .right .rec_title{
float:right;
margin:34px 0 0 0;
position:relative
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .right .rec_title::after{
content:"";
position:absolute;
bottom:5px;
right:4px;
width:46px;
height:4px;
background:black
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .right .rec_title .number{
float:right;
font-size:112px;
font-weight:bold
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .right .rec_title .name{
float:right;
margin:60px 12px 0 0;
font-weight:bold;
font-size:26px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .txt{
padding:0;
margin:30px 0 0 0;
width:280px;
font-size:16px;
line-height:normal;
text-align:right
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .read_more{
float:right;
width:100%;
color:black;
text-decoration:none;
font-size:16px;
margin:50px 0 0 0;
font-weight:bold
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .left{
float:left;
width:558px;
margin:-28px 0 0 108px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .left img{
float:right;
width:100%
}
}
/* Large screens ----------- */
@media only screen  and (min-width :1824px) {
/* Styles */
.self_profile .titles {
width:503px
}
.self_profile .titles .title .years {
font-size:16px
}
.self_profile .titles .title .diploma {
font-size:16px;
width:410px;
margin:0 6px 0 0
}
.self_profile > img{
top:-299px;
left:299px;
width:449px
}
.more_about_me {
font-size:18px;
width:1330px
}
.selected_projects .project_imgs a{
width:608px
}
.selected_projects .project_imgs img{
width:608px
}
.selected_projects .project_imgs a .overlay .text {
font-size:40px;
line-height:840px
}
.selected_projects .project_imgs a .overlay .text b{
border-bottom:5px solid white
}
.dos_and_donts h2 {
width:245px;
font-size:41px;
line-height:44px
}
.dos_and_donts .tips {
width:1280px
}
.dos_and_donts .tips .tip {
width:615px
}
.dos_and_donts .tips .tip h3 {
width:460px;
font-size:41px
}
.dos_and_donts .tips .tip .txt {
font-size:18px;
width:420px
}
.vid iframe {
width:886px;
height:578px
}
.vid .txt {
font-size:18px;
width:430px
}
.recs{
height:720px
}
.recs .recs_title{
font-size:40px;
width:1569px
}
.recs .recs_holder{
height:638px
}
.recs .recs_holder .arrow_right,
.recs .recs_holder .arrow_left{
top:289px
}
.recs .recs_holder #recs_slider_holder{
height:638px
}
.recs .recs_holder #recs_slider_holder #recs_slider {
height:608px
}
.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 .right{
width:602px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .right .rec_title .number{
font-size:122px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .right .rec_title .name{
font-size:36px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .txt{
width:672px;
font-size:20px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .read_more{
font-size:20px
}
.recs .recs_holder #recs_slider_holder #recs_slider .rec .left{
width:802px;
margin:-28px 0 0 0
}
}