/**
*
* ---------------------------------------------------------------------------
*
* Template : Blue - A One-Page HTML Portfolio/Business Template
* Author : Muhammad Morshd
* Author URI : http://morsheds.com
*
* --------------------------------------------------------------------------- 
*
*/

/* =================================== */
/*	Basic Style 
/* =================================== */
/**Technicalities**/

.wrap {
	width:90%;
	margin: 0 auto;
}

.headerfaq h4
{
	margin-top: 130px;
	text-align: center;
	font-size:2em ;
	
}

.subheaders h4
{
	margin-top: 50px;
	text-align: center;
	font-size:1.5em ;
	color:#008ECC;
	
}

.post-title
{
	margin-top: 70px;
	text-align: center;
}
.colors
{
	margin:auto;
	text-align: center;
}

.colors img
{
	
	background-color: ;
		
}

.styles
{
	margin:auto;
	text-align: center;
}

.styles p
{
	width:80%;
	text-align: left;
	margin:auto;
	font-size:1em;
	color:black;
}



.sec-title-map {
    margin-bottom: 50px;
	margin-top: 0px;
}


.sec-title-map h2 {
    font-size: 36px;
    margin: 0 0 30px;
    padding-bottom: 30px;
    position: relative;
    text-transform: uppercase;
}



.sec-title {
    margin-bottom: 50px;
	margin-top: 0px;
}

.sec-title.white {
    color: #fff;
}

.sec-title h2 {
    font-size: 36px;
    margin: 0 0 30px;
    padding-bottom: 30px;
    position: relative;
    text-transform: uppercase;
}

.sec-title.white h2 {
    color: #fff;
}

.sec-title h2:after {
    border-bottom: 1px solid #009ee3;
    content: "";
    display: block;
    left: 45%;
    bottom: 0;
    position: absolute;
    width: 115px;
}

.sec-title.white h2:after {
    border-bottom: 1px solid #fff;
}

.sec-titlecom {
    margin-bottom: 50px;
	margin-top: 140px;
}

.sec-titlecom.white {
    color: #fff;
}

.sec-titlecom h2 {
    font-size: 36px;
    margin: 0 0 30px;
    padding-bottom: 30px;
    position: relative;
    text-transform: uppercase;
}

.sec-titlecom.white h2 {
    color: #fff;
}

.sec-titlecom h2:after {
    border-bottom: 1px solid #009ee3;
    content: "";
    display: block;
    left: 45%;
    bottom: 0;
    position: absolute;
    width: 115px;
}

.sec-titlecom.white h2:after {
    border-bottom: 1px solid #fff;
}






/*=================================================================
	Portfolio
==================================================================*/

.project-wrapper {
    margin: 0;
    padding: 0;
	width:100%;
	margin:0 auto;
    list-style: none;
    text-align: center;
	background-color: ;
}

.project-wrapper li {
    display: inline-block;
}

.portfolio-item {
    cursor: pointer;
    margin: 0 1% 1% 0;
    overflow: hidden;
    position: relative;
    width: 100%;
	
}
.portfolio-item-popular {
    cursor: pointer;
    margin: 0 1% 1% 0;
    overflow: hidden;
    position: relative;
    width: 30%;
	height:209px; 
	top:-50px;
	margin-bottom: 40px;
	
}



figcaption.mask {
    background-color:transparent;
    bottom: -160px;
    color: black;
    padding: 7px;
    position: absolute;
    width: 100%;
    text-align: left;
    
    -webkit-transition: all 0.4s ease 0s;
       -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
         -o-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}

.portfolio-item:hover figcaption.mask {
    bottom: 0;
}

.portfolio-item-popular:hover figcaption.mask {
    bottom: 0;
}

figcaption.mask h3 {
    margin: 0;
    color: black;

}

figcaption.printdisclaimer h3 {
    margin: 0;
	font-size: 10px;
    color: #fff;
}

figcaption.printdisclaimer p{
    margin: 0;
	padding-bottom: -10px;
	font-size: 8px;
    color: #fff;
}
/**figcaprtion-mask for disclaimer**/
figcaption.maskdisc {
    background-color: rgba(54, 55, 50, 0.79);
    bottom: 210px;
    color: #fff;
    padding: 7px;
    position: absolute;
    width: 100%;
	height:9%;
    text-align: left;
	
    
    -webkit-transition: all 0.4s ease 0s;
       -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
         -o-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}


.portfolio-item:hover figcaption.maskdisc {
    bottom: 208px;
}

.portfolio-item-popular:hover figcaption.maskdisc {
    bottom: 0px;
}


figcaption.maskdisc h3 {
    margin: 0;
    color: #fff;

}

figcaption.printdisclaimer h3 {
    margin: 0;
	font-size: 10px;
    color: #fff;
}

figcaption.printdisclaimer p{
    margin: 0;
	padding-bottom: -10px;
	font-size: 8px;
    color: #fff;
}
ul.external {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 100px;
	z-index: 4;
	width:240px;
    
    -webkit-transition: all 0.4s ease 0s;
       -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
         -o-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}

ul.external li {
    display: inline-block;
	
}

ul.external li a {
    background-color: rgba(255, 255, 255, 0.9);
    color: blue;
    display: block;
    padding: 10px 18px 13px;
	
 
    -webkit-transition: all 0.5s ease 0s;
       -moz-transition: all 0.5s ease 0s;
        -ms-transition: all 0.5s ease 0s;
         -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
}

ul.external li a:hover {
    background-color: gray;
    color: #fff;

}

.portfolio-item:hover ul.external {
    top:280px;
}


/**Components caption**/
.portfolio-item-component {
    cursor: default;
    margin: 0 1% 1% 18%;
    overflow: hidden;
	top:-187px;
    position: absolute;
    width: 60%;
	background-color: black;
	opacity: .8;
	border-radius: 7px;
}

.portfolio-item-component h3
{
	font-size: 17px;
	font-family:cambria;
	text-align: left;
	margin-bottom: 2px;
	margin-top:3px;
	margin-left: 7px;
	color:white;

}
.portfolio-item-component p
{
	font-size: 15px;
	font-family:cambria;
	text-align: left;
	color:white;
	margin-left:7px;
	margin-right:7px;
	margin-bottom: 7px;
}

.portfolio-item-component:hover figcaption.mask {
    bottom:0px;
}

/**map-Instructions**/
.portfolio-item-map {
    cursor: pointer;
    margin: 0 1% 1% 0;
    overflow: hidden;
    position: relative;
    width: 100%;
	
}


figcaption.maskmap {
    background-color:black;
	opacity:.85;
    bottom: -160px;
    color: white;
    padding: 7px;
    position: absolute;
    width: 100%;
    text-align: left;
    
    -webkit-transition: all 0.4s ease 0s;
       -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
         -o-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}

.portfolio-item-map:hover figcaption.maskmap {
    bottom: 0;
}



figcaption.maskmap h3 {
    margin: 0;
	text-align: center;
    color: white;

}


/**printIcon**/
ul.external-print {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 90px;
	z-index: 4;
	width:240px;
    
    -webkit-transition: all 0.4s ease 0s;
       -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
         -o-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}

ul.external-print li {
    display: inline-block;
	
}
ul.external-print li a {
    background-color: rgba(255, 255, 255, 0.9);
    color: gray;
    display: block;
    padding: 10px 18px 13px;
	
 
    -webkit-transition: all 0.5s ease 0s;
       -moz-transition: all 0.5s ease 0s;
        -ms-transition: all 0.5s ease 0s;
         -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
}

ul.external-print li a:hover {
    background-color: gray;
    color: #fff;

}

.portfolio-item:hover ul.external-print {
    top:200px;
}
 




/*============================================================ 
	Responsive Styles
 ============================================================*/



/**Ipad mini break point**/

@media only screen 
and (min-device-width : 768px) and (max-device-width : 1024px) 
{

.tools
{
	width:80%;
	position:relative;
	margin:0 auto;
}


	
		/**color visualizer description**/
	figcaption.maskdisc {
   display: none;
}
	

	
}


/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

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


/**Tools Page**/

	.tools
{
	width:60%;
	position:relative;
	margin:0 auto;
}
	
	/**color visualizer description**/
	figcaption.maskdisc {
   display: none;
}

	.sec-title-map h2 {
  
	margin-top: -80px;
}
	.maskmap
	{
		visibility: hidden;
	}

}


/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	

/* portfolio */
    .portfolio-item {
        width: 48%;
    }

    figcaption.mask {
        bottom: -132px;
    }

	/**Tools Page**/
	
	.tools
{
	width:90%;
	position:relative;
	margin:0 auto;
}
	
	
		/**color visualizer description**/
	figcaption.maskdisc {
   display: none;
}
	.maskmap
	{
		visibility: hidden;
	}

		
}