/*==================================================================*/

:root{
--primary-font-family: "Athiti", sans-serif;
--secondary-font-family: "Roboto", sans-serif;
--third-font-family: "Montserrat", sans-serif;
}



/* color coding */


.gradLink{
    padding: 6px 10px;
    background: #646464;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    font-family: athiti,sans-serif;
    border-radius: 30px;
    background-image: linear-gradient(90deg, rgba(76,175,80,1), rgba(172,175,80,1));
    font-size: 17px;
}


.gradLink:hover{
border: 1px solid #646464;
color:white;
}


code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	font-family:monospace;
	text-align: left;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: none;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #a11;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #170;
}


.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #f00;
}
.token.selector{
	color:#00c;
	
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #a67f59;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #00c;
}

.token.function {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}



*/
body{
margin:0px;
padding:0px;
}


.hrBreak{
	
}
h1,h2,h3,h4,h5{font-family:athiti,sans-serif!important; text-shadow:1px 1px 1px rgba(200,200,200,1); font-weight:500 !important;}
h1{font-size:36px;margin:0.50em 0;color:rgb(10,10,10); }
h2{font-size:30px;margin:0.50em 0;}
h3{font-size:24px;margin:1em 0em 0.3em 0em;}
h4{font-size:20px;margin:1.5em 0em 0.50em 0em;}
h5{font-size:18px;}
h6{font-size:16px;}
p{margin:15px 0.2em;padding:0;font-family:var(--secondary-font-family);font-size:16px;line-height:25px;color:rgba(20,20,20,1);}
a{font-family:var(--secondary-font-family); font-size:15px;}

@media screen and (max-width:900px){
code{font-size:15px}

h1{font-size:32px;}
h2{font-size:26px;}/*"wf_segoe-ui_normal", Verdana, Geneva, Tahoma, sans-serif*/
h3{font-size:22px;}
h4{font-size:19px;}
}

@media screen and (max-width:790px){    


h1{font-size:26x;margin:0.50em 0;font-weight:500 !important;color:rgb(10,10,10);}
h2{font-size:20px;}
h3{font-size:18px;font-weight:normal;}
h4{font-size:17px;font-weight:normal;}
h5{font-size:16px;font-weight:normal;}
h6{font-size:16px;font-weight:normal;}
p{margin:15px 0.2em;padding:0;font-size:15px;line-height:30px;color:rgba(20,20,20,1);}





}



















body{
margin:0px;
padding:0px;
}

#bodyStructure{
display:grid;
grid-template-columns:229px 1fr;
grid-template-rows:1fr;
position:fixed;
width:100%;
height:100%;
overflow:auto;
}

#sidebar{
grid-column: 1;
grid-row: 1;
background-color:rgba(250,250,250,1);
width:229px;
height:100%;
}

#aside{
position:fixed;
float:left;
height:82%;
width:229px;
overflow:auto;
}

#aside ul{
margin:0px;
padding:0px;
list-style-type:none;
margin-top:40px;
}

#aside ul li{
}

#aside ul li a{
display: block;
text-decoration: none;
padding: 4px 10px;
color: royalblue;
}

#content{
grid-column: 2;
grid-row: 1;
width:100%;
height:100%;

}

#searchProperty{
width: 212px;
height: 40px;
background-color: red;
position: fixed;
box-shadow: 1px 1px 3px rgba(230,230,230,1);
}

#searchPropertyInput{
width: 198px;
height: 40px;
position: absolute;
padding: 0px 7px;
border: 0px;
outline: 0px;
}

.rightContainerExample{
width:100%;
max-height:50px;
background-color:rgba(250,250,250,1);
padding:0px;
}

.rightContainerHead{
text-align:center; vertical-align:middle; line-height:50px;
margin:0px;
box-shadow:2px 2px 3px rgba(230,230,230,1)
}


.preview{
height:auto;
min-height:55%;
margin:0px;
}
.code{
height:auto;
min-height:45%;
margin:0px;
}

input[type="radio"]{
width:5px;
height:5px;
background-color:red;
}

.propertySection{
width: 86%;
padding: 0% 1% 1% 1%;
left: 6%;
position: relative;
box-shadow: 2px 2px 10px rgba(200,200,200,1);
margin-bottom:40px;
    
}

.propertySection h2{
font-size: 25px;
margin: 0.50em 0;
color: white;
box-sizing: border-box;
width: 102%;
margin-left: -1%;
padding: 0px 10px;	
background-color:rgba(76,175,80,1);
position: sticky;
top: 0;
z-index: 1;
}

.propertySection a{
width: 100%;
color:black;
text-decoration: none;	
}

.pdtdd{
display:grid;
grid-template-columns:50% 50%;
grid-template-rows:100%;
border-bottom:2px solid rgba(232,233,250,1);
}
.dtdd{
grid-column:1/2;
}

.rdtdd{
grid-column:2/3;
padding: 36px 25px 15px 25px;
}


#navbar{

background-color:rgba(250,250,250,1);
box-shadow:2px 2px 5px 0px rgba(220,220,220,1), -2px -2px 2px 0px rgba(220,220,220,1);
width:100%;
padding:0px;
float:left;
z-index:1;
}

#navbar ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#navbar label{
font-size:40px;
background-color:rgba(200,200,200,1);
float:left;
width:50px;
}

#navbar ul li a{
text-decoration:none;
}



.propertySection h2:after{
content: "Explore";
font-weight: 900;
display: inline-block;
padding: 6px 10px;
background: white;
border: 1px solid #fff;
color: white;
text-decoration: none;
font-family: athiti,sans-serif;
border-radius: 30px;
background-image: linear-gradient(90deg,rgba(76,175,80,1),rgba(172,175,80,1));
font-size: 15px;
position: absolute;
right: 4px;
top: 1px;
}


.propertySection h2:after:hover{
border: 1px solid #646464;
color:white;
}




.flexCont{
display:flex;	
flex-flow: row wrap;
justify-content:space-evenly;
}
.flexCont .imageOptCont{
flex-grow:1;
margin:0px;	
}




.shareBtmCross{
width: 20px;
height: 20px;
position: absolute;
right: 3px;
top: 11px;
}








.shareButtomPopup{
display:none;	
}
@media screen and (max-width:380px){code{font-size:14px}
h1{font-size:30x;margin:0.50em 0;font-weight:500 !important;color:rgb(10,10,10);}
h2{font-size:25px;}
h3{font-size:21px;font-weight:normal;}
h4{font-size:20px;font-weight:normal;}
h5{font-size:17px;font-weight:normal;}
h6{font-size:16px;font-weight:normal;}
p{margin:10px 0.2em;padding:0;font-size:15px;line-height:30px;color:rgba(20,20,20,1);}

}



#sidebar{
grid-column: 1;
grid-row: 2;
background-color:rgba(250,250,250,1);
width:229px;
height:100%;
position:fixed;
overflow:auto;
}


#sidebar .topToggle{
position: fixed;
left: 260px;
font-size: 25px;
border: 1px solid #9bcf2f;
border-radius: 2px;
padding: 0px 10px;
top: 8px;
display:none;
cursor:pointer;
background-color:rgba(255,255,255,1);
color:rgb(76, 175, 80);
}

#aside{
float:left;
height:82%;
overflow:auto;
}

#nav{		
width: 100%; 
background-color: rgba(250, 250, 250,1);

border-bottom: 1px solid rgba(230,230,230,1);
margin-bottom: 20px;
box-shadow: -1px -1px 10px 0px rgba(230,230,230,1);
height: 40px;
}

#nav ul{
list-style-type:none;
padding:0px;	
margin:0px;
float:left;
}
#nav ul li{
float:left;
}
#nav ul li a{
text-decoration: none;
padding: 7.5px;
display: block;
color:black;
font-family:athiti,sans-serif!important;
font-size:16px;
}

#nav ul li a:hover{
background-color: rgb(230, 230, 230);
}

#aside ul{
margin:0px;
padding:0px;
list-style-type:none;
margin-top:40px;
}

#aside ul li{
}

#aside ul li a{
display: block;
text-decoration: none;
padding: 5px 10px;
color: royalblue;
}

#aside ul li a:hover{
background-color:rgba(240,240,240,1);
}

#asideToggle
{
cursor: pointer;
position: fixed;
left: 178px;
bottom: 0px;
background-color: rgba(150,150,150,1);
color: white;
padding: 0px 10px;
font-size: 30px;
border-top-left-radius: 50%;
z-index: 1;
}


#searchProperty{
width: 212px;
height: 40px;
background-color:  rgb(76, 175, 80);
position: fixed;

}

#searchPropertyInput{
width: 198px;
height: 40px;
position: absolute;
padding: 0px 7px;
border: 0px;
outline: 0px;
box-shadow: 1px 1px 3px rgba(230,230,230,1);
}



.rightContainerExample{
width: 100%;
background-color: rgba(250,250,250,1);
padding: 0px;
vertical-align: middle;
float:left;
position:relative;
}

.rightContainerHead{
text-align:center; 
margin:0px;
position:relative;
top:20%;
}


.preview{
height:94%;
margin:0px;
width:100%;
overflow:auto;
float:left;
}

.resultBox{
margin: 0px;
position: relative;
grid-row: 2;
grid-column: 1;
}

.code{
margin: 0px;
padding: 1%;
overflow: auto;
grid-row: 2;
grid-column: 1;
}

.htmlLabel, .cssLabel{
font-size: 12px;
color: white;
padding: 2px;
background-color: rgba(150,150,150,1);
user-select:none;
}
input[type="radio"]{
background-color: rgb(76, 175, 80);
}
.dtdd{
padding:10px;
position:relative;
background-color:transparent;
border-right:1px dashed rgba(200,200,2300,1);
}
.dtdd:last-child{
 border:0px;	
}
.orOp{
color:black;	
font-style:normal;
}




.valueInDemoBox{
position: absolute;
left: 10px;
bottom: 10px;
background-color: rgba(230,230,230,1);
padding: 10px;
border-radius: 30px;
}


#nav1{		
height:25px;
margin:0px;
position:sticky;
right:0px;
top:0px;
/*box-shadow:-2px -2px 15px rgba(240,240,240,0.6) inset, 3px 3px 15px rgba(240,240,240,0.5) inset;*/
border: 1px solid rgba(230,230,230,1);
border-width: 0px 0px 1px 0px;
}

#nav1 ul{
list-style-type:none;
padding:0px;	
margin:0px;
float:left;
}
#nav1 ul li{
float:left;	
}
#nav1 ul li a{
text-decoration: none;
padding: 2px 8px;
display: block;
color:black;
font-size:14px;
font-family:athiti,sans-serif!important;
}
#nav1 ul li a:hover{
text-decoration:underline;	
}


.nav2{
float: left;
width: 100%;
box-shadow: -1px -1px 10px 0px rgba(230,230,230,1);
border-bottom: 1px solid rgba(230,230,230,1);
background-color: white;
}

.nav2 ul{
list-style-type:none;
padding:0px;	
margin:0px;
float:left;
}
.nav2 ul li{
float:left;

}
.nav2 ul li a{
text-decoration: none;
padding: 7.5px;
cursor:pointer;
color:black;
font-size:16px;
display: block;
font-family:athiti,sans-serif!important;}

.nav2 ul li:nth-child(2){
display:none;
}

.nav2 ul li a:hover{
background-color:rgb(230, 230, 230) !important;
color:black !important;	
}

.nav2 ul li a:active{
background-color: rgb(76, 175, 80) !important;
color: rgb(255, 255, 255) !important;
}

.submitPractice{
outline: 0px;
cursor: pointer;
font-size: 16px;
background-color: rgb(76, 175, 80);
color: rgba(255,255,255,1);
border: 1px solid rgb(76, 175, 80);
padding: 11px;
float: right;
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: absolute;
right: 5px;
/* bottom: 5px; 
box-shadow: -2px -2px 15px rgba(180,180,180,0.6) inset, 3px 3px 2px rgba(150,150,150,0.5) inset;*/
font-family: athiti,sans-serif!important;
}


.submitPractice:hover{
background-color:rgba(255,255,255,1);color:rgba(100,100,100,1);	
}
.rightContainerExampleInner{
width:100%; height:34px; background-color:transparent;
display:none;	
position:fixed;

	
}




.propDescription:before{
content:"Definition";
display: block;
padding: 2px 4px;
background-color: #9bcf2f;
color: white;
position: absolute;
left: -10px;
top: -25px;
width: max-content;
font-family: athiti,sans-serif!important;
font-size: 14px;	
}

.syntaxValues:before{
content:"Syntax";
display: block;
padding: 2px 4px;
background-color: #fab125 !important;
color: white;
position: absolute;
left: -10px;
top: -25px;
width: max-content;
font-family: athiti,sans-serif!important;
font-size: 14px;
}

.valuesCont:before{
content:"Property values";
display: block;
padding: 2px 4px;
background-color: #0fbfcf;
color: white;
position: absolute;
left: -10px;
top: -25px;
width: max-content;
font-family: athiti,sans-serif!important;
font-size: 14px;	
}


.syntaxValues:after{
position: absolute;
content: "";
border-top: 10px #b78931 solid;

border-left: 10px solid transparent;
top: 0px;
left: -10px;
}




.propDescription:after{
position: absolute;
content: "";
border-top: 10px #739825 solid;
border-left: 10px solid transparent;
top: 0px;
left: -10px;

}


.valuesCont:after{
position: absolute;
content: "";
border-top: 10px #22929c solid;
border-left: 10px solid transparent;
top: 0px;
left: -10px;
}

.note{
padding: 6px;
height: auto;
width: auto;
min-width: 5px;
min-height: 15px;
position: absolute;
left: -100px;
top: 35px;
background-color: white;
z-index: 1000;
width: 250px;
height: 285px;
box-shadow: 1px 1px 14px 0px rgba(230,230,230,1);
border: 1px solid rgba(230,230,230,1);
display:none;
}

.note:before{
position:absolute;
content:"";
border-bottom:10px rgba(200,200,200,1) solid;
border-right:7.5px solid transparent;
border-left:7.5px solid transparent; 
top: -10px;
left: 135px;
}

.compatibility{
cursor:pointer;	
}

.compatibility:hover .note{
display:block;
}

.supportedTable{
font-size: 12px;
border-collapse: collapse;
margin: 3px;
background-color: white;
z-index: 1000;
position: absolute;
top: 0px;
right: 0px;
margin: 0px;
height:88%;
width:260px;
}




.supportedTable td, .supportedTable th{
border:1px solid rgba(240,240,240,1);
text-align:center;
}


.supportedTable td img{
width:20px;
height:20px;	
}
.supportedTable caption{
caption-side:bottom;
}

#supportedNiddle{
position:absolute; 
cursor:pointer;	
font-size:18px;
text-shadow:1px 1px 1px rgba(200,200,200,1);
}








@keyframes toggleAnimationOpen {
0% {
	left:-255px;
}	

100%{
	left:0px;
}
}


@keyframes toggleAnimationClose {
0% {
	left:0px;
}	

100%{
	left:-255px;
}
}

@keyframes toggleButtonOpen {
0% {
	left:5px;
}	

100%{
	left:235px;
}
}

@keyframes toggleButtonClose {
0% {
	left:235px;
}	

100%{
	left:5px;
}
}



@media screen and (max-width:900px){

#nav{
}

#nav ul{
margin:0px 0px 0px 45px;	
}


#leftContent{
grid-column:1;
grid-row:1/2;
overflow:auto;
}

.rightContainerExampleInner{
display:inline-block;	
}


.preview{
height:90%;
}



#sidebar{
left:-229px;
}

#sidebar .topToggle{
display:block;	
top:4px;
}

#asideToggle{
display:none;	
}


.nav2 ul li:nth-child(2){
display:block;
}
}
.syntaxValues {
width:auto; height:auto;  padding:2px 10px; background-color:rgba(250,250,250,1); border-left:3px solid #fab125 !important; margin:60px auto 0px auto;
position:relative;	
width:95%;
box-sizing:border-box;
}

.syntaxValues p{
font-style:italic;
color:#005A9C;	
}



hr{
border:0.5px solid rgba(240,240,240,1);	
}

.dtdd > dt{
margin-bottom:15px;	
}

.dtdd > dt > p{	
 font-weight:600;
 font-style:italic;
 color:#005A9C;
 letter-spacing:0.5px;
 
}
.dtdd > dd:last-child > p{	
 width:fit-content;
 padding:6px 10px;
 border-left:5px solid rgba(230,230,230,1);
 background-color:rgba(240,240,240,1);
 color:rgba(20,20,20,1);
 font-family:monospace;
 font-style:italic;
}


.defaultButton{
position: absolute;
right: 10px;
top: 3px;
border: 1px solid #005A9C;
border-radius: 4px;
padding: 2px 4px;
font-style: normal;
font-size: 12px;

}

.propDescription{
border-left:3px solid #9bcf2f;
padding:6px;
box-sizing:border-box;
margin:60px auto 0px auto;
background-color:rgba(250,250,250,1);
position:relative;
width:95%;
}


.valuesCont{
border-left:3px solid #0fbfcf;	
background-color:rgba(250,250,250,1);
position:relative;
margin:60px auto 0px auto;
width:95%;
}

.animButton{
left: 47%;
position: relative;
background-color: rgba(232,233,252,1);
border: 2px solid rgb(150,150,150,1);
outline: 0px;
padding: 4px 8px;
font-size: 18px;
font-family: athiti, sans-serif;	
cursor:pointer;
}



/* Input style */


input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  position: relative;
}
input[type=range]:focus {
  outline: 0px;
  background: rgba(240,240,240,0.5);
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: rgba(200,200,200,0.5);
  border: 0px;
}



input[type=range]::-webkit-slider-thumb {
  
  height: 36px;
  width: 16px;
  background: rgba(76,175,80,1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
 background: rgba(200,200,200,0.5);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: rgba(200,200,200,0.5);
  border: 0px;
}
input[type=range]::-moz-range-thumb {
  height: 36px;
  width: 16px;
  background: rgba(76,175,80,1);
  cursor: pointer;
  appearance: none;
  margin-top: -14px;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: rgba(200,200,200,0.5);
  border: 0px;
}

input[type=range]::-ms-thumb {
  height: 40px;
  width: 16px;
  background: rgba(76,175,80,1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -16px;
}

input[type=range]:focus::-ms-fill-lower {
  background: rgba(76,175,80,1);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(29,161,242,1);
}



.valuesRange{
 position:static;
 left:-38px;
 bottom:-66px; 
 transform:rotateZ(270deg);
 display:none;
}

.inputCont{
 width:50px;
 height:10px;
 background-color:rgba(250,250,250,1);
 position:absolute;
 right:20px;
 bottom:20px;
 }

.firstInputValue{
position:absolute;
bottom:0px;
display:none;	
left:20px;
}
.lastInputValue{
position: absolute;
top: -2px;
display: none;
left: 10px;
}


.inputCont:hover{
 height:180px;
 box-shadow:1px 1px 3px 0px, -1px -1px 2px 0px;
}
.inputCont:hover .valuesRange{
 display:block;	
}
.inputCont:hover .firstInputValue{
 display:block;	
}
.inputCont:hover .lastInputValue{
 display:block;	
}





.checkCompCont{
text-align:center;
	
}
.compatibilityChecker{
cursor:pointer;
display:none;
}
.checkCompStatement{
display:none;	
position:absolute;
background-color:rgba(150,150,150,1);
color:white;
border-radius:4px;
border:1px solid rgba(240,240,240,1);
font-size:12px;
top:-30px;
}
.compatibilityChecker:hover+.checkCompStatement{
display:block;	
}



/*=========popup for icons=============*/
.block {
    display: none; 
    position: fixed; 
    z-index: 100; 
    padding-top: 40px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
		
}


.block-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 250px;
	height:250px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 0.4s;
    animation-name: animatebottom;
    animation-duration: 0.5s;
		border-radius:5px;
	border:none;
}


@-webkit-keyframes animatebottom {
    from {top:80px; opacity:0} 
    to {top:140; opacity:1}
}

@keyframes animatebottom {
    from {top:140px; opacity:0}
    to {top:0; opacity:1}
}


.exitContainer {
color: white;
float: right;
font-weight: bold;
text-align: center;
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid rgb(15,157,88);
}

.exitContainer:hover,
.exitContainer:focus {
text-decoration: none;
cursor: pointer;
transition-duration: 200ms;
border:1px solid rgb(255,255,255); 
	transition-duration: 100ms;
}

.exit{
color: white;
width: 45px;
list-style-type: none;
margin: -3px -7px;
border-radius: 100%;
font-size: 35px;
position: absolute;
right: 18px;
top: 15px;
}

.block-header {
    padding: 2px 10px;
	padding-top:8px;
    background-color: rgb(15,157,88);
    color: white;
	borde:none;
	border-radius: 5px 5px 0px 0px;
}

.block-body {padding: 2px 16px; overflow:auto; height:80%;}

#asideSharing {
	width:40%;
	margin:auto;
}
#asideSharing ul{
    list-style-type: none;
   	margin-top:10px;
    padding: 0;
    background-color: rgb(255,255,255);

}
#asideSharing ul li a{

    border-radius:5px;
       text-align:center;
	margin:10px 0px 10px 0px;
	display: block;
    padding: 8px 16px;
    text-decoration: none;
	font-size:15px;
	font-weight:normal;

}

.facebook {
background-color:rgb(59,89,152);
color:white;
border:1px solid rgb(59,89,152);
font-family:athiti,sans-serif!important;
}
.facebook:hover,.facebook:focus {
background-color:white;
color:rgb(59,89,152);
text-decoration: none;
}
.twitter {
background-color:rgb(0,132,180);
color:white;
border:1px solid rgb(0,132,180);
font-family:athiti,sans-serif!important;
}
.twitter:hover,.twitter:focus {
background-color: white;
color:rgb(0,132,180);
text-decoration: none;
}
.google-plus {
background-color:#ff4500;
color:white;
border:1px solid #ff4500;
font-family:athiti,sans-serif!important;
}
.google-plus:hover,.google-plus:focus {
background-color:white;
color:#ff4500;
text-decoration: none;
}

h2.share-heading {
    margin-top: 4px;
	font-size:25px;
}




/*svg icons */


.facebookSVG {
background-color:rgb(59,89,152);
color:white;
}
.facebookSVG:hover{
height:40px;
}
.twitterSVG {
background-color:rgb(0,132,180);
color:white;
}

.twitterSVG:hover{
height:40px;
}

.redditSVG{
background-color:#ff4500;
color:white;
}

.redditSVG:hover{
height:40px;
}

*/

/* sharing+subscription timeinterval popup */

.shareblock1{
	
	
}
.block1 {
    display: none; 
    position: fixed; 
    z-index: 100; 
    padding-top: 40px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
		
}


.block-content1 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 300px;
	height:300px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 0.4s;
    animation-name: animatebottom;
    animation-duration: 0.5s;
		border-radius:5px;
	border:none;
}


@-webkit-keyframes animatebottom {
    from {top:80px; opacity:0} 
    to {top:140; opacity:1}
}

@keyframes animatebottom {
    from {top:140px; opacity:0}
    to {top:0; opacity:1}
}


.exitContainer1 {
color: white;
float: right;
font-weight: bold;
text-align: center;
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid rgb(15,157,88);
}

.exitContainer1:hover,
.exitContainer1:focus {
text-decoration: none;
cursor: pointer;
transition-duration: 200ms;
border:1px solid rgb(255,255,255); 
	transition-duration: 100ms;
}

.exit1{
color: white;
width: 45px;
list-style-type: none;
margin: -3px -7px;
border-radius: 100%;
font-size: 35px;
position: absolute;
right: 18px;
top: 15px;
}

.block-header1 {
    padding: 2px 10px;
	padding-top:8px;
    background-color: rgb(15,157,88);
    color: white;
	borde:none;
	border-radius: 5px 5px 0px 0px;
}

.block-body1 {padding: 2px 16px; overflow:auto; height:80%;}

#asideSharing1 {
	width:40%;
	margin:auto;
}
#asideSharing1 ul{
    list-style-type: none;
   	margin-top:10px;
    padding: 0;
    background-color: rgb(255,255,255);

}
#asideSharing1 ul li a{

    border-radius:5px;
       text-align:center;
	margin:10px 0px 10px 0px;
	display: block;
    padding: 8px 16px;
    text-decoration: none;
	font-size:15px;
	font-weight:normal;

}

h2.share-heading1 {
    margin-top: 4px;
	font-size:25px;
}



/* direct share */



.shiftSocial{
position: absolute;
right: 50px;
color: white;
font-size: 25px;
bottom: -113px;
cursor: pointer;
background-color: rgb(150,150,150);
padding:5px;
}

#websocial{    
    height: 18%;
    width: 100%;
    box-shadow: -1px -1px 13px 0px rgba(230,230,230,1) inset;
    position: absolute;
    bottom: 0px;
	z-index:1;
}
.websocial{
    height: 13%;
    width: 0%;
    position: fixed;
	top: 70px;
    right: 17px;
	transition: right 500ms;
	z-index:1;
}

#websocial ul{        
	list-style-type: none;
    background-color: rgba(255,255,255,0.1);
    width: 75%;
    position: absolute;
    right: 55px;
    float: left;}


.websocial ul{
float:right;	
list-style-type: none;
}	

#websocial ul li{float:right;}
#websocial ul li a, .websocial ul li a{display:block;padding:10px;text-decoration:none;}


#websocial ul li a img, .websocial ul li a img{
width:30px;
height:30px;	
fill:white;
}


#searchPropertyInput:focus{
box-shadow:1px 1px 22px rgba(230,230,230,1);
}





/* email sending */


.main-comment-container{
background-color: rgba(34,177,76,1);
width: 300px;
height: 300px;
position: absolute;
right: 60px;
bottom: 60px;
border: 1px solid rgba(230,230,230,1);
border-radius: 8px;
padding: 19px 18px;
box-shadow: 2px 2px 12px 0px rgba(200,200,200,1);

}

.feedOpen{
width: 50px;
height: 50px;
background-color: rgba(76,175,80,1);
border-radius: 3px;
position: fixed;
cursor: pointer;
right: 5px;
bottom: 5px;
z-index:1;
}


.feedOpen:hover{
background-color: rgba(76,105,80,1);
}


.comment-feed{
    position: absolute;
    top: 15px;
    left: 15px;	
}

.comment-feed svg{
position: relative;
left: 2px;
top: 1px;
}


#feedBackForm{
width:80%;
height:70%;
margin:auto;
box-shadow:-1px -1px 3px rgba(200,200,200,0.5), 1px 1px 2px rgba(200,200,200,0.5);
padding:20px;
margin-top:1.5%;
}

.sendMessage
{
    outline: none;
    background-color: white;
    padding: 8px 10px;
    color: black;
    font-size: 17px;
    border: none;
    position: absolute;
    bottom: 10px;
    right: 20px;
    cursor: pointer;
    font-family: athiti,sans-serif;
}
.sendMessage:hover{
box-shadow:2px 2px 2px 0px rgba(200,200,200,1);    
}
textarea{
border-radius: 3px;
outline: none;
border: 1px solid rgba(200,200,200,1);
font-size: 17px;
width: 95%;
margin-top: 19px;
}
#guestEmail{
outline: 0px;
border: 1px solid rgba(200,200,200,1);
padding: 3px;
height: 35px;
width: 95%;
border-radius: 3px;
font-family: athiti,sans-serif;
border-radius: 4px;
}
#guestMessage{
  font-family:athiti,sans-serif;  
}





#websocial1{float: left;
    width: 10%;
    height: 13%;
    width: 100%;
}
#websocial1 ul{           list-style-type: none;
    background-color: rgba(255,255,255,0.1);
    position: absolute;
    right: 70px;
    float: left;}
#websocial1 ul li{float:right;}
#websocial1 ul li a{display:block;padding:10px;text-decoration:none;}

#websocial1 ul li a img{
width:30px;
height:30px;	
fill:white;
}



/* subscription status */



.emailSubscriberContainer{
	background-color:white;
	height:150px;
	width:100%;
	position:relative;
}

.emailSubscriberContainer p{
font-family:Athiti, sans-serif;
text-align:center;
font-size:20px;
}

.emailInput{
    outline: none;
    padding: 5px;
    width: 96%;
    font-size: 16px;
    border: 1px solid rgba(200,200,200,0.5);
    position: relative;
    top: 30px;
    /* left: 5%; */
    font-family: Athiti, sans-serif;
}
.emailSubscribe{
	width:94%;
	background-color:rgba(76,175,80,1);
	border:2px solid rgba(76,175,80,1);
	color:white;
	padding:3px 6px;
	outline:0px;
	position:relative;
	left:0%;
	font-size:15px;
	top:30px;
	font-family:Athiti, sans-serif;
}
.emailSubscribe:hover{
	background-color:rgba(100,100,100,1);
	border:2px solid rgba(100,100,100,1);
	cursor:pointer;
}


#subscribtionStatusOnRight, .subscribtionStatus{
    position:absolute;
    bottom:2px;
    text-align:center;
}

#subscribtionStatus{
    position:absolute;
    bottom:-70px;
    text-align:center;
}
.sidebarHeading{
    padding:0px 5px; background-color:rgba(100,100,100,1); margin:0px; color:white; font-family:athiti,sans-serif!important; color:white;font-size:25px
}
.subscriptionEmail{
	outline:none; position:absolute; padding:5px; width:190px; height:37px; font-size:16px; border-radius:4px; border:1px solid rgba(200,200,200,0.5); position:absolute;
}
.subscriberButton{
	padding:8px; background-color:rgba(76,175,80,1); color:white; border:none; outline:none; position:absolute; right:0px; top:0px;cursor:pointer;
	font-family:athiti,sans-serif;
}
.subscriberButton:hover{
	background-color:rgba(100,100,100,1);
}
.subsribtionStatus{
    text-align:center;
    
}
.subsribtionStatus p{
    font-size:20px;
    font-family:'Athiti', sans-serif !important;
}





@media screen and (max-width:900px){  


.pdtdd{
display:block;
}


#bodyStructure{
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:1fr;
	position:fixed;
	width:100%;
	height:100%;
	overflow:auto;
}

.pdtdd {
	display:grid;
    grid-template-columns: 100%;
    grid-template-rows: max-content 1fr;
	border-bottom: 1px solid white;
    border-width: 20px 0px;
}
.dtdd {
    grid-row: 1/2;
	grid-column:1/2;
	border-right:0px;	
	
}


.dtdd dd{
   margin-left:10px;	
}
.rdtdd {
    grid-row: 2/3;
	grid-column:1/2;
	background-color: rgb(246,246,246);
	position:relative;	
}



.rdtdd:before{
position:absolute;
content:"Example";
top:0px;
left:0px;
font-size: 12px;
color: white;
padding: 2px;
background-color: rgba(150,150,150,1);
user-select: none;	
}



#content{
grid-column: 1;
grid-row: 1;
width:100%;
height:100%;

}	

.propertySection{
width:90%;
left:4%;
}

.propertySection h2{
text-align: center;
width: 111.5%;
margin-left: -6%;
position: sticky;
top: 0px;
z-index: 1;
font-size: 25px;
}

#sidebar{
z-index:1;	
}




.shareButtomPopup{
display:block;
width: 100%;
height: 35px;
background-color: rgba(76,175,80,1);
position: fixed;
bottom: 0px;
z-index: 1;
text-align: center;
}

.shareButtomPopup .act{ 
color:white;
cursor:pointer;
}

.shareBtmPop{
position: absolute;
top: 2px;	
}

}