::-webkit-scrollbar {   
    width: 8px;
    height: 8px;
    -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: rgba(0,0,0,0.0);
    opacity: 0;
    filter: alpha(opacity=0);
    display:none;
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 6px;            
    background-color: rgba(204, 204, 204, 0.6);
    background-clip: content-box;      
 }

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #aaa;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #aaa;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #aaa;
}
:-moz-placeholder { /* Firefox 18- */
  color: #aaa;
}

*{
	box-sizing: border-box;
	line-height: 150%;
    font-size: 15px;
    font-weight: 400;
    color: #666;
	font-family: 'Raleway', sans-serif;
	
    text-decoration: none;
    text-shadow: none;
    margin:0px;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
    -webkit-tap-highlight-color: transparent;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


html, body{
	margin:0px;
	padding:0px;
    min-width:320px;
    -webkit-user-select: none;
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;  
}
.free-wall {
	margin: 0px;
}
#activateGrp{
    padding:20px 0px;
    border-top: 1px dashed #AAA;
   /* border-bottom: 1px dashed #AAA;*/
    /*background-color: #F9F9F9;*/
        background-color: rgba(249, 249, 249,0.9);
    text-align:center;
    display:none
}

#footer{
    color:#bbb;
    padding:20px 0px;
    border-top: 1px dashed #AAA;
    display:none;
    text-align:center;
    width: 100%;
}

#footer a{ 
    color:#bbb;
}

#footer a:hover{ 
    color:#333;
}

.brick {
	margin: 0;
	opacity:0;
	cursor:pointer;
}
.fea {
    width: 100%;
    position: absolute;
    font-size: 20px;
    z-index: 10;
    font-weight: 500;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    opacity:0;
}

.feas{
    text-align: center;
    width: 70px;
    height: 36px;
    margin: auto;
    background-color: rgb(238, 238, 238);
    box-shadow: 0px 9px 11px -2px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 9px 11px -2px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 9px 11px -2px rgba(0, 0, 0, 0.7);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-top: 4px;
}


.viewed{
    -webkit-animation: filter-animation 1 forwards 1s ;
    -moz-animation: filter-animation 1 forwards 1s ;
    animation: filter-animation 1 forwards 1s ;
}

@-webkit-keyframes filter-animation {
  from {
    -webkit-filter: grayscale(0) opacity(1);
  }
  to {
    -webkit-filter: grayscale(1) opacity(.5);
  }
}


.statsBrickB{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align:center;
    display: table;
    background-color: #EEE;
}
.statsBrick{
    opacity:0;
    vertical-align: middle;
    display: table-cell;
}
.statsTxt{
    font-size: 60px;
}
.emojiB{
    height: 70px;
    width: 70px;
    margin-top: 10px;
}
.emoji{
    height:100%;
    background: url("img/_emoji.png") no-repeat 0% 0px;
    -webkit-background-size: auto 100%;
    -mox-background-size: auto 100%;
    background-size: auto 100%;
}


.imgS{
	border-radius:5px;
    opacity:0;
}

#wallCont{
    padding:10px 10px 0px;
}
.cbig{
	width:500px;

}
.fadeIn{
	opacity:0;	
	display: block;
    -webkit-animation:fadeIn ease-in 1;  
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:.5s;
    -moz-animation-duration:.5s;
    animation-duration:.5s;
}

.hCover{
    overflow:hidden;
    display: table;
    cursor:pointer;
    position: absolute;    
    width: 100.2%;
    height: 100%;    
    /*background-color: rgba(255,255,255,0.5);*/
    border-radius:5px;
    padding:10px 10px 14px;
    display:none;
    z-index: 2;
}
.cvrCont{
    cursor:pointer;    
	padding:20px;
	/*padding-top: 25px;*/
	width:100%;
	height:100%;
	text-align: center;
    border-radius: 5px;    
    background-color: rgba(51,51,51,0.95);    
    vertical-align: middle;
    display: table-cell;
    box-shadow: 0px 0px 10px 8px rgba(255, 255, 255, 0.5) !important;
    -webkit-box-shadow: 0px 0px 10px 8px rgba(255, 255, 255, 0.5) !important;
    -moz-box-shadow: 0px 0px 10px 8px rgba(255, 255, 255, 0.5) !important;
}
.cvrTitle{
	text-align: center;
    color: #fff;
    font-size: 25px;
}
.cvrSub{
	font-size:16px;
	margin-top: 10px;
    color: #ccc;
}
.cvrBrk{
	width:100px;
	margin:10px auto;
}
#pDetail{
	background-color: #E0E0E0;
	width: 100%;
	height: auto;
	display:none;
    overflow:hidden;
    position:relative;
	box-shadow: rgb(204, 204, 204) 0px 30px 29px -15px inset, rgb(204, 204, 204) 0px -30px 30px -14px inset;
	-webkit-box-shadow: rgb(204, 204, 204) 0px 30px 29px -15px inset, rgb(204, 204, 204) 0px -30px 30px -14px inset;
	-moz-box-shadow: rgb(204, 204, 204) 0px 30px 29px -15px inset, rgb(204, 204, 204) 0px -30px 30px -14px inset;
}
.dDetail{
	width:100%;
    z-index: 100;
    min-width:300px;
    max-width:1000px;
   padding-top: 30px;
}

.centerAlignBoth{
    margin-top:50%;
    margin-left:50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.centerAlignX{
    margin-left:50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.centerAlignY{
    margin-top:50% !important;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}


#dTitle{
	font-size:35px;
	margin:0px 20px 10px;
    font-weight: 300;
    min-height:52px;
}
#dCont{
	color:#333;
	padding:0px 20px 40px;
    font-size: 17px;
}
#dAddContLoader{
    text-align: center;
    padding-bottom:20px;
    color:#999;
    font-size:12px;
    display:none
}
#dAddContI{
    width:100%;height: 100%;
    border: 0px;
}
#profile{
	width:100%;
	/*background-color:#eee;*/
	padding:20px 0px;
}
.cBtn{
	cursor:pointer;
	color:#aaa;
	border:2px solid #aaa;
	padding: 6px;
	display: inline-block;
	margin:5px;
	max-width:150px;
	min-width:50px;
	width:27%;
}
.cBtnHover{
        color:#fff;
        background-color:#aaa;
    }

.padTop{
    padding-top:80px;
}
.padTop110{
    padding-top: 50px !important;   
}
.pDXfix{
    position: fixed;
    top: 0px;
    z-index:200;
    -webkit-box-shadow: 0px -13px 22px 0px rgba(0,0,0,6) !important;
    -moz-box-shadow: 0px -13px 22px 0px rgba(0,0,0,0.6) !important;
    box-shadow: 0px -13px 22px 0px rgba(0,0,0,0.6) !important;
    background-color: rgba(224, 224, 224, 0.97) !important;
}
#swipeCvr{
    background-color: transparent;
    opacity:0;
    position:absolute;
    width:100%;
    height:100%
}


.prohi{
    color: #888;
    font-weight:500;
    position:absolute;
    border-radius:100px;
    padding:5px 10px;
    background-color:#fff;
    z-index: 3;
display:none;
    border:4px solid #eee;

    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4) !important;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4) !important;
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.4) !important;

}

#pro{
    display:block;
}
#pro2{
     display:none;
} 
.proprocH{
    text-align:center;
    font-size:20px;
    margin-bottom: 15px;
    padding: 0px 20px;
    font-weight: 200;
}
.proproclink{
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    color:#777;
}

#proproc{
    cursor:pointer;
    max-width:1000px;
    width:100%;
    padding:30px 0px 10px;
    display:none;
}
.proprocC{
    display:table-cell;
    width:50%;
    background-color: #F4F5F6;
}
.proprocBox{
    display:table;
    width:100%;
}
.proprocSp{
    width: 10px;
    background-color: #eee;
    display: table-cell;
    padding: 5px;
}
.proproQ{
    font-size: 14px;
    font-style: italic;
    padding: 15px;
    vertical-align: middle;
    width: 50%;
    text-align:center;
    display:table-cell;
}
.proprocD{
    background-color:#f4f5f6;
    display:table-cell;
    width: 50%;
    padding: 0px 15px 20px;
    text-align:center;
    font-size: 12px;
}
.proprocT{
    width: 50%;
    display:table-cell;
    text-align:center;    
    padding:15px 15px 5px;
    color:#333;
    font-size:14px;
    font-weight: 500;
    background-color:#f4f5f6;
}


.pDX{
    height: 50px;
    text-align: center;
    margin: auto;
    padding-top: 20px;
    z-index: 200;
    background-color: #e0e0e0;
    width: 100%;
    border-bottom:1px solid #ccc;
}

.activeBrickH{
	background-color: rgba(0, 0, 0, 0.5);
}
.activeBrickHcvr{
	background-color: rgba(255, 255, 255, 0.9);
}

#pass{
    outline: none;
    font-size: 20px;
	width:100%;
    border-radius: 40px;
    height: 50px;
	border:1px ;
    color: #34CE11;
    background-color:#eee;
    padding: 6px;
    margin: 0px;
    max-width: 300px;
    text-align:center;
    clear:both;
    margin-bottom:10px;
	box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.15);
    -webkit-box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.15);
}
#btnEnter{
    width:100%;
    max-width:300px;
    clear: both;
    margin: 0px;
    border: none;
}

.dImg{
    width: 100%;
    margin-bottom:10px;
    background: url("img/_preloader.gif") no-repeat 0% 0px; 
    -webkit-background-size: auto 100%;
    -mox-background-size: auto 100%;
    background-size: auto 100%;
    border-radius:10px;
}
#btt{
    position: fixed;
    bottom: -60px;
    z-index:150;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -o-transform:translateX(-50%);
    transform:translateX(-50%);
    cursor: pointer;
    background-color:#fff;
    padding: 10px;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.4) !important;
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.4) !important;
    -moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.4) !important;
}
#bttImg{
    width: 35px;
    height: 35px;
    background-color: red;
    background: url("img/_arwT.svg") no-repeat 0% 50%;
    -webkit-background-size: 30px auto;
    -moz-background-size: 30px auto;
    background-size: 70px auto;
}



.arw{
    width: 15px;
    height: 30px;
    cursor: pointer;
    background: url("img/_arwR.svg") no-repeat 0% 0px;
    -webkit-background-size: 30px auto;
    -moz-background-size: 30px auto;
    background-size: 30px auto;
    margin: -25px 20px;
    float:right;
}

#arwL{
     background-image: url("img/_arwL.svg");
     float:left;
}



/*.arwFix{
    background-size: 80px auto;    
    width: 40px;
    height: 80px;  
    margin: 0px 30px;
}*/

#closeP{
    cursor: pointer;
    width: 23px;
    height: 23px;
    background: url("img/_closeX.svg") no-repeat 0% 0px;
    -webkit-background-size: 30px auto;
    -moz-background-size: 30px auto;
    background-size: auto 23px;
    margin: -4px auto;
}


.noClick{
    /*pointer-events: none;*/
    cursor: auto;
}
.filterBtn{
    border: none;
    margin: 2px 10px;
    max-width: 100px;
    width: auto !important;
    padding-bottom: 2px;
}
.filterActive{
    color:#666;
    pointer-events: none;
    border-bottom: 1px solid #666;
}
#filtersGrp{
    width:100%;
    text-align:center;
    margin-bottom:10px;
    display:none;
}

.brickLoading{
    background: url("img/_preloader-t.gif") no-repeat 50% 50%;
        /*background-size: 60%;*/
}

/* project htmls*/
.dContainer{
    width:100%;
    max-width:1000px;
    font-size: 17px;
    padding: 0px 10px;
    height:auto;
    font-weight: 100;
    font-family: 'Raleway', sans-serif;
}
.dFullRow{
    display: table;
    width:100%;
    max-width:1000px;
    margin-bottom: 60px;
    padding: 0px 10px;
}
.dHalfCont{
    display: table-cell;
    padding:10px;
    width:50%;
}
.dw30{
    width:30%
}
.dw40{
    width:40%
}
.dw60{
    width:60%
}
.dw70{
    width:70%
}

.dpL{
    padding: 0px 10px 0px 30px;
}

.dpR{
    padding: 0px 30px 0px 10px;
}

.dConnectL{
        padding-left: 0px;

}
.dConnectR{
        padding-right: 0px;

}
.dConnectL img:first-child { 

    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.dConnectR img:first-child { 

    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.dFooter{
    text-align:center;
    color:#999;
    margin: 30px 0px;
    font-size:13px;
    font-style:italic;
    border-top:1px dashed  #bbb;
    padding-top: 10px;
}
.dFooter:before{
       text-align:center;
       content:"Content here is condensed and summarised.\AGive me a shout if you'd like to learn more!\A";
       white-space: pre; /* or pre-wrap */
}


.txtLink{
    color:#999;
    font-size:13px;
    font-style:italic;
    cursor:pointer;
}
.txtLink:hover{
    color:#333;

}
.dCen{
    text-align:center;
}

.imgRnd{
    width:100%;
    border-radius:5px;
}
.dTxt{
    vertical-align: middle;
}
.dTxtB{
    text-align: center;
    vertical-align: middle;
}
.dSubTitle{
    font-weight: 500;
    color:#333;
}
/* force mobile tablet css */

    .hCoverT{
        display: block;
        position:absolute;
        width:100%;
        z-index: 2;
        height:200px;
        padding: 0px;
        background-color: transparent;
        overflow:hidden;
        opacity:0;
    }

    .cvrContT{
        bottom:0px;
        position: absolute;
        padding: 10px !important;
        height:auto;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;    
        -webkit-box-shadow:  0px -2px 15px 0px rgba(0,0,0,0.6) !important;
        -moz-box-shadow:  0px -2px 15px 0px rgba(0,0,0,0.6) !important;
        box-shadow:  0px -2px 15px 0px rgba(0,0,0,0.6) !important;
    }
    .cvrTitleT{
        font-size: 12px;
        color: #FFFFFF;
        font-weight: 500;
    }
    .cvrBrkT{
      display:none;
    }
    .cvrSubT{
        display:none;
        margin-top: 0px;
    }
    .activeBrickHcvrT{
        border: 1px solid #bbb;
        background-color: rgba(255, 255, 255, 0.9);
    }
    /*force end*/


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

    .dDetail{
    	padding-top: 0px;
    }
    .dImg{
        border-radius:0px;
    }
    .filterBtn{
        width: auto !important;
    }
    #dTitle{
        font-size:25px;
    }
}

@media only screen and (max-width: 750px) {
    .proprocC{
            display: table;
            width: 100%;
    }
}
@media only screen and (max-width: 400px) {
   .dHalfCont{
        display: block;
        width:100%;
        vertical-align: middle;
    }
    .dw30, .dw40, .dw70, .dw60{
        width:100%
    }

    .dTxt{
        padding:10px;
        font-size:14px;
    }
    .dTxtB{
        padding:10px;
        font-size:14px;
    }
    .dFullRow{
         margin-bottom: 30px; 
     }
    .dpL{
        padding: 0px 10px;
    }
    .dpR{
        padding: 0px 10px;
    }
    .hcT{
        margin-bottom: 20px
    }
    .dConnectL{
        padding-left: 10px;
    }
    .dConnectR{
            padding-right: 10px;
            padding-bottom: 0px;

    }
    .dConnectL img:first-child { 

        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    .dConnectR img:first-child { 

        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .statsTxt{
        font-size: 40px;
    }

    .emojiB {
        height: 50px;
        width: 50px;
        margin-top: 8px;
    }

/* mobile brick cont */

    .hCover{
        display: block;
        position:absolute;
        width:100%;
        z-index: 2;
        height:150px;
        padding: 0px;
        background-color: transparent;
        overflow:hidden;
        opacity:0;
    }

    .cvrCont{
        bottom:0px;
        position: absolute;
        padding: 10px !important;
        height:auto;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        /*background-color: rgba(60,60,60,0.9);*/
        -webkit-box-shadow: 0px -2px 15px 0px rgba(0,0,0,0.6) !important;
        -moz-box-shadow: 0px -2px 15px 0px rgba(0,0,0,0.6) !important;
        box-shadow: 0px -2px 15px 0px rgba(0,0,0,0.6) !important;
    }
    .cvrTitle{
        font-size: 12px;
        color: #FFFFFF;
        font-weight: 500;
    }
    .cvrBrk{
      display:none;
    }
    .cvrSub{
        display:none;
        margin-top: 0px;
    }
    .activeBrickHcvr{
        border: 1px solid #bbb;
        background-color: rgba(255, 255, 255, 0.9);
    }



/*process cont */
    #pro{
        display:none;
    }
    #pro2{
        display:block;
    }
    .proprocT{
        width:100%;
    }
    .proprocD{
        width:100%;
        padding-bottom:15px;
    }
    .proproQ{
        width:100%;
        padding: 5px;
    }
    .proprocC{
        margin-bottom: 10px;
    }

}
@media only screen and (min-width: 400px) {
    
    .cBtn:hover:not(.filterBtn):not(#btnEnter){        
        color:#fff;
        background-color:#aaa;
    }
    #closeP:hover, .arw:hover{
        background-position: 100% 0%;
    }

    .filterBtn{
        border: none;
        font-size: 15px;
        min-width: 40px;
        width: auto !important;
    }
    #btnEnter:hover{
    color:#666;
    }
    .filterBtn:hover{
        border: none;
        color:#666;
    }
    #bttImg:hover{
     background-position: 100% 50%; 
    }
}
    
}