@font-face {    font-family: 'tt0001m_';    src: url('../fonts/tt0001m_.ttf') format('truetype');    font-weight: normal;    font-style: 
normal;}
@font-face {    font-family: 'ColabThi.otf';    src: url('../fonts/ColabThi.otf') format('truetype');    font-weight: normal;    font-style: 
normal;}
@font-face {    font-family: 'Roboto-Thin';    src: url('../fonts/Roboto-Light.ttf') format('truetype');    font-weight: normal;    font-style: 
normal;}

html, body {
  height:100%;
}

body {
  padding-top: 30px; /* body padding for fixed top nav */
}


.img-home-portfolio,
.img-customer,
.portfolio-item {
  margin-bottom: 30px;
}

.tab-pane {
  margin-top: 15px;
}

.jdl {
	font-family: 'Roboto-Thin', serif;
	font-size: 25px;
	color: #FFF;
	background-color: #0095F9;
	width: 100%;
	padding-left: 5px;
	margin-bottom: 5px;
	margin-top: 5px;
}





/* Page Sections */
}
@media (min-width: 970px) {

.section,
.section-colored {
  padding: 100px 0;
  
}

}

.container, .container h3  {	font-family: 'Roboto-Thin', serif;}

.section {
		background-image:url(../img/foo.png);
	background-repeat: repeat;
	background-position: center ;	
	background-color: #E7EBE8;
	-webkit-box-shadow: inset 0 0 7px #666;
	-moz-box-shadow: inset 0 0 7px #666;
	box-shadow: inset 0 0 7px #666;
	color: #666;	
	padding-top: 40px;
	padding-right: 0;
	padding-bottom: 40px;
	font-family: 'Roboto-Thin', serif;
	}
.section h3 {
	font-family: 'Roboto-Thin', serif;
	font-size: 25px;

	margin-top: 5px;
	margin-bottom: 8px;

}

.section a:link { text-decoration: none; 	color: #09F;	}
.section a:visited { text-decoration: none; color: #09F; }
.section a:active { text-decoration: none; color: #09F;	}

.section a{
	color: #09F;	
    -webkit-transition: 0.9s;
    -moz-transition: 0.9s;
    -o-transition: 0.9s;
    -ms-transition: 0.9s;
    transition: 0.9s;
}

.section a:hover {
	color: #333;
	;
}


.section-colored {
	font-family: 'Roboto-Thin', serif;
	font-size: 14px;
	padding-top: 40px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
	color: #4E4E4E;
}



.section-colored h2 {
	font-family: 'Roboto-Thin', serif;
	font-size: 36px;}

.section-colored h3 {
	font-family: 'Roboto-Thin', serif;
	font-size: 25px;
	margin-top: 5px;
	margin-bottom: 8px;
}

.carousel-inner
{
	text-shadow:1px 1px 1px rgba(0,0,0,.6);
	background-color: #fff;
	color: #FFF;

	font-size: 14px;
	-webkit-box-shadow: inset 0 0 7px #666;
	-moz-box-shadow: inset 0 0 7px #666;
	box-shadow: inset 0 0 7px #666;
	background-image:url(../img/wd.jpg);
	background-repeat: repeat;
	background-position: center ;	   
	}

.sectiongrey {
	text-shadow:1px 1px 1px rgba(0,0,0,.6);
	background-color: #fff;
	color: #FFF;

	font-size: 14px;
	-webkit-box-shadow: inset 0 0 7px #666;
	-moz-box-shadow: inset 0 0 7px #666;
	box-shadow: inset 0 0 7px #666;
	background-image:url(../img/wd.jpg);
	background-repeat: repeat;
	background-position: center ;	   
	}

.sectiongrey h3 {	  
font-family: 'Lora', serif;
        font-size: 40px; }	
	
.sectiongrey,
.sectiongrey-colored {
	padding-top: 100px;
	padding-right: 0;
	padding-bottom: 80px;
	padding-left: 0;  
  
}

.sectiongrey-colored {
	background-color: #FFF; /* change this to change the background color of a colored section */

}


.section2,
.section2-colored {
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0;

}

.section2-colored {
	background-color: #000; /* change this to change the background color of a colored section */
	font-size: 11px;
		background-image:url(../img/f.png);
	background-repeat: repeat;
	color: #CCC;}

.section3,
.section3-colored {
	color: #000;
	padding-top: 80px;
	padding-right: 0;
	padding-bottom: 80px;
	padding-left: 0;
	
}

.section3-colored {
	background-color: #fff; /* change this to change the background color of a colored section */
}

.navbar {
	background-image:url(../img/f_.png);
	background-repeat: repeat;
	font-weight: bold;
}

.navbar a{	
    -webkit-transition: 0.9s;
    -moz-transition: 0.9s;
    -o-transition: 0.9s;
    -ms-transition: 0.9s;
    transition: 0.9s;
}

.navbar a:hover {
	color: #333;
	;
}



.boxpro {
	height: 600px;
}
.boxpro h3 {
	color: #09F;
}

.sidebar {
  margin-top: 40px;
}

.sidebar ul {
  border-radius: 5px;
  padding: 5px;
  border: 1px solid #cccccc;
}

#navi {

	margin-top: 5px;
}

/* Half Page Height Carousel Customization */
.carousel {
  height: 60%;
}

.item,
.active,
.carousel-inner {
  height: 100%;
}

.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

/* Social Icons Styles */
.list-social-icons {
  margin-bottom: 45px;
}

.tooltip-social a {
  text-decoration: none;
  color: inherit;
}

.facebook-link a:hover {
  color: #3b5998;
}

.linkedin-link a:hover {
  color: #007fb1;
}

.twitter-link a:hover {
  color: #39a9e0;
}

.google-plus-link a:hover {
  color: #d14836;
}

/* Service Page Styles */
.service-icon {
  font-size: 50px;
}

/* 404 Page Styles */
.error-404 {
  font-size: 8em;
}

/* Pricing Page Styles */
.price {
  font-size: 4em;
}

.price-cents {
  vertical-align: super;
  font-size: 50%;
}

.price-month {
  font-size: 35%;
  font-style: italic;
}

/* Footer Styles */
footer {
	margin: 50px 0;

}

/* fb like*/
.fbl { float:left;
	padding-left: 10px;
	padding-top: 10px;	
	}
.fbl2 {
	float:left;
	padding-top: 5px;	
		padding-left: 10px;
	}

/* Responsive Styles */
@media (max-width: 800px) {
.boxpro {
	height: 100%;
}
.carousel {
  height: 90%; /* increases the carousel height so it looks good on phones */
}

}

/*news list*/
.md4-news {
	height: 500px;

}


/* masonry */

.box {
  width: 150px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 12px;
  	font-family: 'Roboto-Thin', serif;
}

.box a{
	color: #09F;
	-webkit-transition: 0.9s;
	-moz-transition: 0.9s;
	-o-transition: 0.9s;
	-ms-transition: 0.9s;
	transition: 0.9s;
}

.box a:hover {
	color: #333;
}


.box h4{
  	font-family: 'Roboto-Thin', serif;
}

.box a:link {
	text-decoration: none;
}
.box a:visited {
	text-decoration: none;
}
.box a:hover {
	text-decoration: none;
}
.box a:active {
	text-decoration: none;
}

#clearer {
	clear:both;
}




/* effect */
.effect {
	cursor: pointer;}

.effect a{
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -o-perspective: 600px;
    -ms-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.effect a span{
    display: block;
    position: relative;
    padding: 0 2px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    transition: all 400ms ease;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.effect a:hover span {
	-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
	-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
	-o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
	-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
	transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
	background-color: #3C3;
}

.effect a span:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;
    color: #fff;
    background: #3C3;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -o-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}