/*
Theme Name: Grada Building
Theme URI: ed.paulo.pedro04@gmail.com
Description: The grada building is theme that support a bootstrap and responsive design. This website is a project of Glue Digital (<a href='http://gluedigital.com.au/'>http://gluedigital.com.au/</a>).
Author: Ed Paulo B. Pedro
Author URI: ed.paulo.pedro04@gmail.com
Version: 1.0
Tags: light, three-columns, right-sidebar, flexible-width, custom-colors, custom-header, custom-background, custom-menu, theme-options, threaded-comments, sticky-post, translation-ready
License: GNU/GPL Version 2 or later
License URI: http://www.gnu.org/licenses/gpl.html
*/

@import url('vc_templates/style.css');
@import url('css/universal-style.css');
@import url('css/universal-transistion.css');

/**************************************************
RESET
**************************************************/

* { list-style:none ; margin:0 ; outline:none ; padding:0 }
input, select, textarea { -webkit-box-sizing:border-box ; -moz-box-sizing:border-box ; box-sizing:border-box }
article, aside, details, figcaption, figure, footer, header, nav, section, summary { display:block }
audio, canvas, video { display:inline-block }

/**************************************************
UNIVERSAL STYLES
**************************************************/	

a, input, textarea, select, small, label, button[type="submit"], h1, h2, h3, h4, h5 { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-decoration:none; }
a img { border:none }
a:hover, a:active{ text-decoration:none !important; }

@font-face{ font-family: "corbel"; src: url(fonts/corbel.ttf); }
@font-face{ font-family: "Monotype Corsiva"; src: url(fonts/MTCORSVA.ttf); }
@font-face{ font-family: "AlternateGotNo3D"; src: url(fonts/alternategotno3d.ttf); }
@font-face{ font-family: "Calibri"; src: url(fonts/Calibri.ttf); }


html, p, a, li, h1, h2, h3, h4, h5, h6{
	font-family: "PT Sans";
}
/**************************************************
HEADER
**************************************************/
header{
    z-index: 999;
    position: relative;
}
header , header a{
	color:#fff;
}
header .logo{
	width:100%;
	max-width: 180px;
}
header a:hover, header  a:active{
	color:#fff;
}
header .header-01 #main-navigation{
	padding-bottom:0.8em;
	width:100%;
	text-align: right;
}
header .header-01 #main-navigation ul { 
	margin: 0px; 
}
header .header-01 #main-navigation li { 
	margin-left: -4px; 
}
header .header-01 #main-navigation ul li { 
	display: inline-block; 
	padding:1em 2em 0px;
}
header .header-01 #main-navigation ul li:last-child { 
	padding:1em 0 0px 1em;
}
header .header-01 #main-navigation li a{
	font-family: "Montserrat";
	font-weight:bold;
	color:#eee;
	font-size:90%;
}
header .header-01 #main-navigation li.current_page_item a, header .header-01 #main-navigation li a:hover, header .header-01 #main-navigation li a:active{
	color:#057bc5;
}
header .header-01 #main-navigation li.current_page_item:nth-child(2) a{
	color:#eee;
}
header #social-header{
	display:block;
	width:100%;
	padding-top: 1.6em;
	text-align: right;
}
header #social-header span{
	font-size:11px;
	color:#eee;
}
header #social-header span a{
	font-size:15px;
	border:0;
	height:inherit;
	color:#fff;
	width:inherit;
	border-radius: 0;
    margin-right: 10px;
}
header #social-header a{
	display:inline-block;
	color:#fff;
	height:28px;
	width:28px;
	border:1px solid #fff;
	text-align: center;
	margin: 0 1px;
}
header #social-header a i{
	padding-top: 6px;
	display: inline-block;
}
header #social-header a:hover, header #social-header a:active, #topbar .readmore:hover{
	color:#94C2DE;
	border-color:#94C2DE;
}

/**************************************************
FOOTER
**************************************************/
footer .footer-01{
	background-color:#101010;
	color:#777777;
	padding-top: 4em;
	padding-bottom: 2.5em;
	font-size:12px;
	border-bottom:1px solid #343434;
}
footer .footer-01 a{
	color:#777777;
	font-size: 13px;
}
footer .footer-01 .contacts h2{
	color:#fff;
	text-transform:uppercase;
	padding-bottom: 1.5em;
	font-weight: 600;
	font-size: 15px;
}
footer .footer-01 .social-bar-conainer .social-bar{
	background-color:#F9B902;
	color:#000;
	padding: 0.8em 1.5em;
}
footer .footer-01 .social-bar-conainer .social-bar a{
	display:inline-block;
	color:#17252E;
	height:24px;
	width:24px;
	border:1px solid #17252E;
	border-radius: 50%;
	text-align: center;
	margin: 0 1px;
}
footer .footer-01 .social-bar-conainer .social-bar span{
	margin-right: 10px;
	font-size: 13px;
}
footer .footer-01 .social-bar-conainer .social-bar a i{
	padding-top: 4px;
	display: inline-block;
}
footer .footer-01 .social-bar-conainer .social-bar a:hover, footer .footer-01 .social-bar-conainer .social-bar a:active{
	color:#fff;
}
footer .footer-01 #main-navigation{
	padding-bottom:0.8em;
}
footer .footer-01 #main-navigation ul { 
	margin: 0px; 
}
footer .footer-01 #main-navigation ul li { 
	display: inline-block;
	padding: 0 2em 1em 0px;
	width: 49%;
}
footer .footer-01 .contact-details{
	padding-bottom:15px;
	width:100%;
}
footer .footer-01 .contact-details .fa, footer .footer-01 .contact-details i{
	font-size: 15px;
	width: 25px;
	display: inline-block;
}
footer .footer-01 .business-hour{
	padding-bottom: 10px;
	border-bottom: 2px solid #252525;
	padding-top: 10px;
}
footer .footer-01 .business-hour b{
	text-align:right;
}
footer .footer-01 .business-hour-paragraph{
	padding-bottom: 5px;
}
footer .footer-01 .business-hour:last-child{
	border-bottom: 0;
}
footer .footer-02{
	background:#222222;
	color:#fff;
	padding-top: 2em;
	font-size:12px;
	padding-bottom: 2em;
}
footer .footer-02 #copyright{
	color:#777777;
}
footer .footer-02 #copyright a{
	color:#fff;
}
footer .footer-02 #main-navigation{
	padding-bottom:0.8em;
	text-align: right;
}
footer .footer-02 #main-navigation ul { 
	margin: 0px; 
}
footer .footer-02 #main-navigation ul li { 
	display: inline-block; 
	padding:0 1.1em;
}
footer .footer-02 #main-navigation ul li:first-child { 
	display: inline-block; 
	padding:0 0.9em;
}
footer .footer-02 #main-navigation ul li:last-child { 
	display: inline-block; 
	padding:0 0 0 1.1em;
}
footer .footer-02 #main-navigation li a{
	color:#fff;
}
footer .footer-02 #main-navigation li a:hover{
	color: #777777;
}


/**************************************************
HOME PAGE
**************************************************/
#main .entry-content, #pages .entry-content{
	padding-left:15px;
	padding-right:15px;
}
#main .first-container{
	background-color: #0C1E30;
}
#main .second-container img.services{
	max-width:100%;
    border-radius: 3px;
}
#main .second-container h3{
	font-size: 18px;
	padding-bottom: 10px;
    padding-top: 10px;
}
#main .second-container h3 a{
    font-family: "Montserrat";
	color:#1F669C;
}
#main .second-container p, #main .third-container p{    
	line-height: 24px;
    text-align: justify;
}
#main .third-container h3{
	font-size: 18px;
    font-family: "Montserrat";
	padding-bottom: 10px;
    padding-top: 10px;
	color:#1F669C;
}
#main .third-container strong, #main .third-container b{
    font-family: "Montserrat";
}
#main .third-container .icon-services img{
	margin-bottom:0.8em;
}
#main .third-container .icon-services a{
	color:#3C3C3C;
}
#main .third-container .icon-services a:hover{
	color:#2C5B93;
}
#main .fourth-container h2{    
	font-family: "Montserrat";
    font-weight: bold;
    font-size: 26px;
    color: #fff;
}
#main .fourth-container hr{  
    border: 1px solid #fff;
    width: 90px;
}
#main .fourth-container .project-img{
	max-width: 100%;
    height: 220px;
    display: block;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    width: 310px;
    background-position: center center;
}
#main .fourth-container .project-content{
	background: rgba(0,0,0,0.5);
	color: white;
	cursor: pointer;
	display: table;
	height: 220px;
	left: 0;
	position: absolute;
	top: 0;
	width: 310px;
	opacity: 0;
	margin-left:15px;
	padding: 1.5em;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
#main .fourth-container .project-title{
    color: #fff;
    text-transform: uppercase;
    font-family: "Montserrat";
	margin-top: 8em;
    display: block;
}
#main .fourth-container .project-content .readmore{
	background-color:#2C5B93;
	color:#fff;
    font-family: "Montserrat";
    font-weight: bold;
    display: inline-block;
    padding: 0.7em 1.5em;
    font-size: 13px;
    border-radius: 3px;
}
#main .fourth-container .project-container:hover .project-content {
	opacity: 1;
}
#main .fourth-container .media-carousel .carousel-control.left{
	right: 50px;
}
#main .fourth-container .media-carousel .carousel-control.right{
	right: 0px;
}
#main .fourth-container .media-carousel .carousel-control-container{
	display:inline-block;
	border-radius:20px;
	padding:2px 0;
	margin-top:30px;
}
#main .fourth-container .media-carousel .carousel-control{
	background: transparent;
    color: #fff;
    top: -65px;
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    left: inherit;
    border: 1px solid #fff;
}
#main .fourth-container .media-carousel .carousel-control .fa {
    color: #fff;
    border-radius: 50%;
	font-size: 36px;
}


/**************************************************
INNER PAGE
**************************************************/
#pages{
	padding-bottom:5em;
}
#pages .inner-container p{
    font-size: 13px;
    line-height: 24px;
}
#pages .inner-container h3 {
    font-family: "Montserrat";
    font-weight: bold;
    font-size: 22px;
}
#pages .inner-container h4 {
    font-family: "Montserrat";
    font-weight: bold;    
	font-size: 16px;
	margin-top: 7px;
    display: inline-block;
}
#pages .inner-container img {
    max-width:100%;
}
#pages .inner-container hr {
    border: 1px solid #057bc5;
    width: 90px;
}


/**************************************************
PROJECT PAGE
**************************************************/
#pages .projects-container .project-img{
    height: 220px;
    display: block;
    background-size: cover;
    width: 310px;
    background-position: center center;
}
#pages .projects-container .project-content{
	background: rgba(0,0,0,0.5);
	color: white;
	cursor: pointer;
	display: table;
	height: 220px;
	left: 0;
	position: absolute;
	top: 0;
	width: 310px;
	opacity: 0;
	margin-left:15px;
	padding: 1em 1.5em 0;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
#pages .projects-container .project-title{
    color: #fff;
    text-transform: uppercase;
    font-family: "Montserrat";
	margin-top: 8em;
    display: block;
}
#pages .projects-container .project-content .readmore{
	background-color:#2C5B93;
	color:#fff;
    font-family: "Montserrat";
    font-weight: bold;
    display: inline-block;
    padding: 0.7em 1.5em;
    font-size: 13px;
    border-radius: 3px;
}
#pages .projects-container .project-container:hover .project-content {
	opacity: 1;
}
#pages .projects-container .project-container{
	margin-bottom:2em;
}


/**************************************************
SINGLE PROJECT PAGE
**************************************************/
#projects{
    padding-bottom:3em;
}
#projects  p{
    font-size: 13px;
    line-height: 24px;
}
#projects h3 {
    font-family: "Montserrat";
    font-weight: bold;
    font-size: 22px;
}
#projects  h4 {
    font-family: "Montserrat";
    font-weight: bold;    
	font-size: 16px;
	margin-top: 7px;
    display: inline-block;
}
#projects img {
    max-width:100%;
}
#projects hr {
    border: 1px solid #057bc5;
    width: 90px;
}
#projects .project-image{
	max-width: 100%;
    height: 220px;
    display: block;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    background-position: center center;
	margin-bottom:2.5em;
}

/**************************************************
WHO WE ARE PAGE
**************************************************/
#pages .employee-container{
    padding-top: 2em;	
}
#pages .employee-container .employee-position{
	font-style:italic;
}
#pages .employee-container .employee-title{    
	padding-bottom: 2px;
    display: inline-block;
    font-size: 18px;
    color: #333333;
    padding-top: 15px;
}
#pages .employee-container .employee-img{
	max-width:100%;
	width:320px;
}



/**************************************************
CONTACT PAGE
**************************************************/
#pages .contact-container p{
	font-size: 13px;
	line-height: 24px;
}
#pages .contact-container a{
	color:#057bc5;
	font-weight:bold;
}
#pages .contact-container a:active{
	color:#057bc5;
}
#pages .contact-container h2{
	font-family: "Montserrat" !important;
	font-weight: bold;
	font-size: 28px;
}
#pages .contact-container h3{
	font-family: "Montserrat" !important;
	font-size: 18px;
	text-transform:uppercase;
	margin-top: 0;
}
#pages .contact-container hr{
	border: 1px solid #057bc5;
	width: 90px;
}
#pages .contact-container input[type="text"], #pages .contact-container input[type="email"], #pages .contact-container textarea, #pages .contact-container select{
    background: #FFFFFF;
    padding: 0.96em 1.4em;
    border: 1px solid #DDDDDD;
    border-radius: 1%;
    width: 100%;
    margin: 10px 0;
    font-size: 13px;
}
#pages .contact-container input[type="submit"]{
	font-family: "Montserrat" !important;
	font-weight: bold;
	background: #057bc5;
	border: 0;
	color: #fff;
	text-transform:uppercase;
	padding: 0.8em 2em;
}

/**************************************************
FAQs PAGES
**************************************************/
#pages {

}

/**************************************************
MESSAGE STYLES
**************************************************/	
#main div.success{
    border-left: 5px solid #46B450;
	padding-right: 38px;
    position: relative;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
	margin-bottom:1em;
	color:#111;
	background-color:#fff;
}
div.updated p {
    margin: .5em 0;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 100% !important;
	padding-left: 20px;
}

/**************************************************
404 PAGE NOT FOUND
**************************************************/
.page-404{
	padding: 9em 0 0;
	border-radius: 5px;
	background-clip: padding-box;
	font-family: "Open Sans";
}
.page-404  .header, .page-404 .sub-header, .page-404 .sub-header2{
	color:#333;
	padding:1em 0;
	text-transform:uppercase;
}
.page-404 b{
	color:#2A48AB;
}
.page-404 .header{
	font-size:500%;
	padding:  0;
	line-height: 80px;
	text-align: center;
	letter-spacing: -1px;
}
.page-404 .sub-header{
	font-size:90%;
	text-align: center;
}
.page-404 .sub-header p{
	background-color:#2A48AB;
	color:#fff;
	letter-spacing:1px;
	display: inline-block;
	border-radius: 10px;
	padding: 0.5em 2.5em;
	margin-top: 1em;
	margin-bottom: 10em;
}


/**************************************************
TOP HEADER
**************************************************/
#header{
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
header .header-text {
    padding-top: 5em;
}
header .header-text h2 {
    font-family: "Montserrat";
    font-weight: bold;
    font-size: 40px;
    padding-bottom: 0;
}
header .header-text p{
    font-size: 16px;
    line-height: 26px;
}


#topbar{
	background-color:#F8FAF9;
	padding-top: 20px;
	padding-bottom: 25px;
    border-bottom: 1px solid #D9D9D9;
    border-top: 1px solid #D9D9D9;
}
#topbar h1{
    font-family: "Montserrat";
    font-weight: bold;
    font-size: 30px;
    text-transform: uppercase;
}
#topbar .readmore{
	background:#fff;
	border:1px solid #E1DFDF;
	color:#888888;
    font-family: "Montserrat";
    font-weight: bold;
    display: inline-block;
    padding: 0.7em 1.5em;
    font-size: 13px;
    border-radius: 3px;
	margin-top: 15px;
}


/**************************************************
BREADCRUMBS
**************************************************/
#breadcrumb {
	padding-top: 16px;
	padding-bottom: 20px;
    border-bottom: 1px solid #E1DFDF;
    border-top: 1px solid #eee;
	margin-bottom:3em;
}
#breadcrumb .breadcrumbs{
    margin-top: 0;
    font-family: "PT Sans";
    margin-bottom: 0;
}
#breadcrumb .breadcrumbs li{
    color: #333;
    font-size: 16px;
    margin: 0;
    padding-right: 15px;
    display:inline-block;
}
#breadcrumb .breadcrumbs li.separator {
	color:#3C566D;
}
#breadcrumb .breadcrumbs li a{    
	color: #333;
    font-weight: bold;
	font-size: 13px;
}
#breadcrumb .breadcrumbs li strong{
    font-weight: 400;
	color: #3C566D;
	font-size: 13px;
}


/**************************************************
MOBILE STYLE
**************************************************/	
@media all and (min-width : 768px) { 
	header .header-02 #main-navigation  { 
		display:block !important;
	}
	#show-my-mobile-nav-button{
		display:none !important;		
	}
	#hide-my-mobile-nav-button{
		display:none !important;		
	}
	#main .first-container{
		margin-top:-128px;
	}
	#main .second-container img.services{
		margin-top:-90px;
	}
	#main .third-container .about-content{
		padding-right:20px;
	}
}
@media all and (max-width : 767px) { 
	header .header-02 #main-navigation  { 
		display:none;
	}
	header .header-01 .logo{
		position:relative;
	}
	#show-my-mobile-nav-button{
		display:block;		
	}
	#hide-my-mobile-nav-button{
		display:none;		
	}
	#show-my-mobile-nav-button, #hide-my-mobile-nav-button {
		background: #3E3E3E;
		color: #fff;
		font-size: 200%;
		cursor: pointer;
		max-width: 50px;
		border: 1px solid #fff;
		text-align: center;
		font-weight: 400;
		font-family: "Lato Light";
		border-radius: 5px;
		margin: 5px 0px;
		padding-top: 4px;
	}
	header .header-01 #main-navigation ul li{
	    padding: 0 0.9em;
		font-size: 12px;
	}
	#topbar .text-right{
		text-align:left;
	}
	#main .second-container{
	    padding-top: 2em;
	}
	#main .fourth-container .project-container{
		margin-bottom:2em;
	}
	#pages .contact-container input[type="submit"]{
	    margin-bottom: 2.5em;
	}
}