@font-face {
font-family: 'breathing';
src: url('images/breathing.woff2') format('woff2'),
url('images/breathing.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* banner start */
#banner{
border-radius:10px 10px 0px 0px;
height:140px;
position:relative;
top: -140px;
}
.small,.medium,.smaller{font-family:"Times New Roman", Times, serif;}
/*.large,.larger{font-family:optimus;}*/
.smaller{font-size:10pt;}
.small{font-size:12pt;}
.medium{font-size:16pt;}
.large{font-size:27pt;}
.larger{font-size:32pt;}
.title{
	position: absolute;
    top: 0.55em;
    background-image: url(images/logo.svg);
    width: 190px;
    height: 82px;
    left: 40px;

}
.banner_v_div{
height: 120px;
border-left: 1px solid #DDD;
border-right: 2px solid white;
position: absolute;
right: 250px;
top: 10px;
}
.bold{font-weight:bold;}
#banner_right{
position: absolute;
right: 0px;
height: 140px;
width: 250px;
}
/* banner end */
/*  layout start*/
html, body{margin:0;font-family:arial,sans-serif;}
#container,#banner,#footer{width:100%;}
a {text-decoration:none;}
#container {
background: rgb(249, 249, 249);
    /* background-repeat: no-repeat; */
    position: relative;
    min-height: 100%;
    z-index: 0;
    background-image: url(images/pattern_repeat_NOBG.png);
    background-size: 25px;
    background-blend-mode: screen;
    max-width: 1600px;
    margin: auto;

}
.container{
margin-left: auto;
margin-right: auto;
width: 90%;
min-width: 900px;
max-width: 1600px;
}
#upper_bg_feature{
position: relative;
    height: 140px;
    box-shadow: 0px 0px 2px rgba(40, 40, 40, 0.8);
    background: linear-gradient(45deg, rgba(255, 248, 201, 0.56) 0%, rgba(255, 248, 201, 0.03) 20%, rgba(253, 247, 201, 0) 21%, rgba(187, 227, 208, 0) 56%, rgba(104, 201, 216, 1) 100%);
    overflow: hidden;
}
#upper_bg_feature:before{
content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	background:rgb(255 248 201 / 50%);
	z-index: -1;
}
#upper_bg_feature:after{
	content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(72, 104, 167, 1) 0%, rgba(115, 138, 175, 0) 14%, rgba(255, 248, 201, 0) 59%, rgba(255, 248, 201, 0) 88%, rgba(255, 248, 201, 0.56) 100%);
    top: 0;
}

#content {
min-height: 900px;
padding-right: 40px;
}
/*
contact form start
*/
.contact_container{
box-shadow: 0px 0px 3px -1px rgba(40, 40, 40, 0.4);
}
textarea ,input{
padding: 5px;
margin: 3%;
width: 92%;
background: rgb(249, 249, 249);
resize: vertical;
border-radius: 3px;
border: none;
border-top: 1px solid #dfdfdf;
transition: background 1s;
font-family: sans-serif;
font-size: 11pt;
}
textarea:focus ,input:focus{
/*background: rgba(0, 219, 255,0.1);*/
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00dbff+0,00dbff+20,ffffff+100&0.12+0,0.07+20,0+100 */
background: -moz-linear-gradient(left,  rgba(0,219,255,0.12) 0%, rgba(0,219,255,0.07) 20%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,219,255,0.12) 0%,rgba(0,219,255,0.07) 20%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,219,255,0.12) 0%,rgba(0,219,255,0.07) 20%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f00dbff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
.button{
width: 100%;
margin-right: auto;
margin-left: auto;
user-select: none;
transition: background 0.1s;
}
.button:focus, .active_button:focus{
background: white;
transition: background 0.1s;
}
.active_button{
background: rgba(0, 219, 255,0.2);
box-shadow: 0px 0px 5px #36d0ff;
transition: background 0.1s;
}
.inactive_button{background: rgba(0, 219, 255,0.2);
box-shadow: 0px 0px 5px #36d0ff;
transition: background 0.1s;
opacity: 0.2;}
fieldset{
background:white;
border: none;
}
fieldset{    padding-bottom: 5px;
padding-left: 12px;
padding-right: 12px;
padding-top: 5px;
}
/* footer start */
#footer{
min-height: 300px;
background: linear-gradient(135deg, rgba(108,114,179,1) 0%,rgba(74,104,167,1) 50%,rgba(108,114,179,1) 100%);
overflow: hidden;
padding-top: 30px;

box-shadow: 0px 0px 2px rgba(40, 40, 40, 0.8);
position: relative;
}
#footer li a{
	transition: color .3s;
    color: transparent;
    font-size: 20px;
    text-shadow: 0px -1px 0px #F3F3F3, 0px 0px 0px #000, 1px 4px 6px #f3f3f300;
}
#footer li a:hover{
	color: rgb(0, 219, 255);
	transition: color .3s;
}
/* footer end */
#page_heading{    
	font-size: 25px;
    font-weight: normal;
    padding: 10px 0px;
    color: #696969;
    text-align: center;
    margin-left: 40PX;
    background: rgb(255 255 255);
    box-shadow: 0px 0px 3px -2px rgba(40, 40, 40, 0.4);

}
.paragraph{
padding-left:40px;
color:#5a5a5a;
position:relative;
padding-bottom:20px;
}

/*  layout end*/
ul li{list-style-type:none;}
/*  dropdown start*/
#menu >li{
    display: inline-block;
    position: relative;
    z-index: 2;
    padding-left: 0px;
    height: 20px;
    color: #4a68a7;
    margin-right: 4px;
    font-weight: 600;
}

#menu {margin-bottom:0px;bottom:5px;position:absolute;font-family:Ebrima,sans-serif;}
#menu >li:nth-child(1):hover,#menu >li:hover:nth-child(4){
border-radius:5px;
}
.level1 a{color:#4a68a7; padding-right: 1em;}
.level1 span{
padding-left:5px;
display:block;
}

.sub{
position:absolute;
list-style:none;
top:26px;
display:none;
margin-top:-26px;
z-index:1;
opacity:0;
left:0px;
/*background: rgba(249, 249, 249,0.95);*/
background-image: url('images/test.png');
border-radius:2px;
padding-left:0px;
/*box-shadow:0px 0px 1px rgba(40,40,40,.5);*/
}
/*.sub:before{
	    content: "";
    position: absolute;
    filter: blur(1px);
    background-image: url('images/test.png');
z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
}*/


.sub a {color: rgb(0, 219, 255); display: block;}
.sub a:hover{ mix-blend-mode: multiply;}
.sub li:nth-child(2){margin-top:5px ;}
.sub li:nth-child(2),.sub li:nth-child(3),.sub li:nth-child(4) {
border-bottom:5px solid rgba(77, 105, 80, .0);
}
.sub li:nth-child(2):hover,.sub li:nth-child(3):hover,.sub li:nth-child(4):hover,.sub li:nth-child(5):hover {
background: rgba(0, 219, 255, 0.1);
}
.sub li:last-of-type{
border-radius:0px 0px 2px 2px;
height:20px;
padding-bottom: 6px;
}
.sub:hover{opacity:1;display:block;}
.level1:hover>.sub{opacity:1;display:block;}
/*.sub.long li:first-of-type,.sub.short li:first-of-type{
border-bottom: 1px solid white;
padding-bottom: 2px;
}
*/
.short{
width:65px;
}
span.short{width:55px;}
span.shorter{width:50px;}
.long{
width:170px;
}
.med_length{width:95px;}

span.long{width:160px;}
.shorter{
width:55px;
}
.plan_holder{
	overflow: hidden;
background:white;
position: relative;
height: 400px;
box-shadow: 0px 0px 3px -1px rgba(40,40,40,0.4);
background-position: center;
background-repeat: no-repeat;
transition: background-size 0.6s, box-shadow 1s;
}
.grid_holder{
display: grid;
grid-template-columns: auto auto;
row-gap: 4%;
column-gap: 2%;
}
.white_divider{
width: 90%;
border-top: 1px solid white;
border-bottom: 1px solid rgba(147, 147, 147, 0.5);
margin-left: auto;
margin-right: auto;
margin-bottom: 5%;
margin-top: 5%;
}
.plan_tittle{
width: 100%;
height:25%;

}
.plan_detials{
width: 100%;
height: 20%;
background: rgba(255,255,255,0.7);
position: absolute;
bottom: -20%;
display: grid;
grid-template-columns: auto auto;
row-gap: 0%;
column-gap: 2%;
opacity: .25;
transition: bottom .25s,opacity 0.25s;
}
.plan_detials>p{
margin-top: 5px;
margin-left: 5px;
}
.plan_holder:nth-of-type(1){
background-image: url('images/jupiter.svg');
background-size: 100%;
background-position-y: bottom;
}
.blue_text{
color: rgb(0, 219, 255);
text-shadow: 0px 0px 1px rgba(40,40,40,.5);
}
.plan_holder:hover{
background-size: 100%;
background-repeat: no-repeat;
transition: background-size 0.3s, box-shadow 0.3s;
box-shadow: 0px 0px 3px 0px rgba(40,40,40,0.4);
background-size: 115%;
}
.plan_holder:hover > .plan_detials{

opacity: 1;
bottom: 0px;
transition: bottom .25s,opacity 0.25s;


}
.plan_holder:hover > .plan_detials p{
/*color: white;*/

/*font-weight: bold;*/
}
.signature{
font-family: breathing;
margin-top: 1%;
margin-left: 2%;

}
.font_25px{
	font-size: 25px;
}
/*slideshow start*/
.slide_show{
position: relative;
width: 100%;
height: 450px;
background: white;
top: -140px;
z-index: -1;
box-shadow: inset 0px -3px 7px -5px rgba(40,40,40,0.5);
margin-bottom: -140px;
}
.slide_show .slide_img:nth-child(4){
animation: fade 20s linear 0s infinite forwards;
background-image: url(images/2400before.jpg);
animation-fill-mode: forwards;
/*background-position-y: -350px;*/
background-position-y: 100%;
}
.slide_show .slide_img:nth-child(3){
animation: fade 20s linear 5s infinite forwards;
background-image: url(images/2400.jpg);
animation-fill-mode: forwards;
background-position-y: -85px;
}
.slide_show .slide_img:nth-child(2){
animation: fade 20s linear 10s infinite forwards;
background-image: url(images/3550before.jpg);
animation-fill-mode: forwards;
background-position-y: -320px;
}
.slide_show .slide_img:nth-child(1){
background-image: url(images/3550.jpg);
background-position-y: 0px;
}
.slide_show>.slide_img{
position: absolute;
height: 100%;
background-size: 100% auto;
background-position: center;
width: 100%;
}
/*slideshow end*/
/*slideshow animation start*/
@keyframes fade {
0% {opacity:1;}
25%{opacity:1;}
30%{opacity:0;}
35%{opacity:0;}
50%{opacity:0;}
55%{opacity:0;}
95%{opacity:0;}
100%{opacity:1;}
}
/*slideshow animation end*/
.center{
text-align: center;
}
.white_bg{
background: white;
padding: 20px;
}
.blue_dot_list{
background: white;
box-shadow: 0px 0px 3px -2px rgba(40,40,40,0.4);
padding: 20px;
}
.blue_dot_list li{
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
.blue_dot_list li a{color: #5a5a5a;}
.sublist li:before{
content: "۲";
transform: rotate(230deg);
display: inherit;
width: 20px;
position: absolute;
left: -29px;
top: -13px;
font-size: 42px;
color: rgb(0, 219, 255);
text-shadow: 0px 0px 1px rgba(40,40,40,.5);
}
.real_shadow_text{
color: rgb(0, 219, 255);
text-shadow: 1px 1px 2px #737373,-1px -1px 2px #fff;
}
.v_align_text{
margin-top: auto;
margin-bottom: auto;
}
.footage,.garage,.bath,.bedroom{
padding-left: 40px;
position: relative;
font-weight: bold;

}
.icons{
	position: absolute;
left: 5px;
top: -4px;
}
.indent{padding-left: 15px;}
.social_holder img{
	width: 40px;
	top:0px;
	position: relative;
	filter: invert(50%);
	transition: top 0.3s;
	background: rgba(0,0,0,0);
}
.social_holder img:hover{
	top: 3px;
filter: invert(100%) drop-shadow(0px 0px 2px black) brightness(200%);
transition: top 0.3s,background 0.3s;
background: rgba(255, 72, 0,0.2);
border-radius: 25%; 
}

.grid{display: grid;grid-template-columns: auto auto;}
.margin_left_auto{
	margin-left: auto;
}
.lt_grey{
	color: rgb(196, 196, 196);
}
.social_holder a{
	float: right;
}

#description_holder{
	display: block;
    width: 100%;
    min-height: 500px;
    position: relative;
}

.row_holder{
	position: relative;
    display: block;
    width: 100%;
    height: 250px;
}
.row_holder div:nth-of-type(3){
	float:right;  	
}
.row_holder div:nth-of-type(2){
	margin-left: 5%;  
}
.row_holder div:nth-of-type(2):hover{
	margin-left: 0%;  
}

.sub_description{
    width: 30%;
    height: 5em;
    background: rgba(249, 249, 249,0.5);
    overflow: hidden;
    transition: height 0.3s, background 0.3s, box-shadow 0.3s;
    color: #5a5a5a;
    border-bottom: 5px;
    display: inline-grid;
    position: initial;
}

.sub_description:before{
	content: "";
	width: 30%;
	height: 0.125em;
	top: 2.5em;
	background: rgb(0, 219, 255);
	position: absolute;

}
.sub_description:hover:before{
	display: none;
}
.sub_description:after{
	content: " ";
    position: absolute;
    /* padding-top: 1em; */
    /* padding-left: 15%; */
    /* font-size: xxx-large; */
    width: 40px;
    height: 40px;
    /*background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 49%, rgba(242, 242, 242, 1) 51%, rgba(242, 242, 242, 1) 100%);*/
    margin-left: 13%;
    margin-top: 2.1em;
    transform: rotate(45deg);
    box-shadow: inset -5px -5px 5px -6px rgba(40, 40, 40, 0.3);
}
.sub_description:hover{
    width: 100%;
    height: 100%;
    opacity: 1;
    background: white;      
    position: absolute;  
    z-index: 1;
    left: 0PX;
    top: 0PX;
    margin-left: 0px; 
    box-shadow: 0px 0px 3px -1px rgba(40, 40, 40, 0.8);  
    padding-top: 5px;
}
.sub_description:hover:after{
	content: "";
	width: 100%;
	height:0.5em;
	background: rgb(0, 219, 255);
	position: absolute;
	bottom:0.5em;
	box-shadow:0px 0px 3px -1px rgba(40, 40, 40, 0.8) ;
	opacity: 0.5;
	padding-top: 0px;
	transform: none;
	left: initial;
    margin-left: inherit;
}

.sub_description p{
	/*margin-left: 3em;*/
    text-align: center;
    /*margin-right: 3em;*/
}

.sub_description p:first-child{
	font-weight: bolder;
}
.sub_description p:nth-of-type(2){
	opacity: 0;
	transition: opacity 0.2s;
	position: relative;
	top: -25px;
}

.sub_description:hover p:nth-of-type(2){
	opacity: 1;
}
.sub_description ul{
	position: relative;
    top: -25px;
    left: 1em;
}

html{
	scroll-behavior: smooth;
}
.embedded{
	background: url(images/menu_bg.png);
    padding: 1em;
    box-shadow: inset 0px 0px 5px -2px rgb(40 40 40 / 70%);
    height: 300px;
    position: relative;
}
.embedded p{
	    position: absolute;
    color: white;
    text-shadow: 0px 0px 1px black;
    font-size: larger;
    text-align: center;
    margin: 0;
    top: 153px;
    max-width: 800px;
}

#fla{
	background-image: url(images/outline-fl.svg);
    width: 300px;
    height: 250px;
    float: right;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 1.6em;
    filter: hue-rotate(-185deg) drop-shadow(2px 4px 6px black);
}
.footer_links{
	display: inline-flex;
}
.footer_links a{
	margin-right: 1em;
	color: white;
	transition: color 0.2s;
}
.footer_links a:hover{color:rgb(0, 219, 255);}

.ass{
	padding: 1em;
	float: left;
	background: white;
	margin-right: 1em;
	border-radius: 5px;

}
#associate {
    overflow: hidden;
    height: 0px;
    border-top: 1px solid rgb(0 0 0 / 30%);
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    position: absolute;
    top: 4em;
    width: 90%;
    left: 0%;
    transition: height 0.3s;
    padding-left: 5%;
    padding-right: 5%;
}


.footer_links div:target{
    height: 250px !important;    
    background: RGBA(0,0,0,0.2);
    color:blue;

}

#closed{
	position: absolute;
    top: 0.5em;
    right: 0.5em;
    height: 30px !important;
    width: 30px;
    background: grey;
    border-radius: 15px;
    box-shadow: inset 0px 0px 5px rgb(0 0 0 / 45%);

}

#closed a {
	color: white;
    margin-left: auto;
    font-size: 18pt;
    position: absolute;
    left: 28%;
    top: -4%;  
    height: 30px;
    width: 30px;  
}

#closed a:hover{color:rgb(0, 219, 255);}
.white{color: white;}
.black{color: #5a5a5a;}
.left_pattern{
	position: absolute;
    width: 70px;
    height: 100%;
    left: 0px;
    background-image: url(images/pattern.png);
    background-size: 100%;
    opacity: 0.3;}

.lower{
	position: absolute;
    width: 55px;
    height: 3000px;
    left: 50%;
    background-image: url(images/pattern.png);
    background-size: 100%;
    opacity: 0.3;
    top: -1155px;
    transform: rotate(90deg);
}
.pad_lr{
	padding-left: 2%;
	padding-right: 2%;
}