/*****************************/
/*         CSS RESET         */
/*****************************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;}
p,blockquote,q,pre,address,hr,code,samp,dl,ol,ul,table,menu{margin-bottom:1em;}
html{font-size:100%;}
body{font-family:arial, helvetica, sans-serif; font-size:11px; line-height:1.6; color: #777}
h1,h2,h3,h4,h5,h6{font-weight:bold;margin-bottom:10px;}
h1{font-size:3em;line-height:1.1;}
h2{font-size:2em;line-height:1.15;}
h3{font-size:1.5em;line-height:1.2;}
h4{font-size:1.25em;line-height:1.25;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
code,kbd,pre,samp,tt{font-family:"andale mono",consolas,monaco,"lucida console","courier new",courier,monospace;line-height:1.3;}
pre{white-space:pre-wrap;}
abbr,acronym,dfn{border-bottom:1px dotted;cursor:help;font-variant:normal;font-style:normal;}
var{font-style:normal;}
center{text-align:center;}
a:focus{outline:1px dotted;}
img{border:0;}
ul{list-style:disc outside none;}
ol{list-style:decimal outside none;}
li{margin-left:2em;}
li ul,li ol{margin-bottom:0;}
dd{margin-bottom:1em;}
hr{border:0;border-bottom:1px solid;}
big{font-size:1.25em;}
small,sub,sup{font-size:.85em;}
sub,sup{line-height:1;}
sub{vertical-align:bottom;}
sup{vertical-align:top;}
del,s,strike{text-decoration:line-through;}
ins{text-decoration:none;border-bottom:1px dotted;}
bdo{border-bottom:1px dotted;}
u{text-decoration:underline;}
fieldset{padding:1em;}
legend{font-weight:bold;padding:0 .25em;}
input,textarea,select,button{font-family:inherit;font-size:1em;}
input[type=button],input[type=file],input[type=image],input[type=reset],input[type=submit],button[type=button],button[type=reset],button[type=submit]{cursor:pointer;line-height:1;}
input[type=text],input[type=password],textarea{padding:1px;}
textarea{text-align:left;line-height:1.25;}
table{border-collapse:collapse;border-spacing:0;border:0;line-height:1.3;}
caption,th,td{text-align:left;vertical-align:top;}
th,td{border:1px solid;padding:.5em 1em;}
caption{padding-bottom:1em;}
h5,h6{font-size:1em;}
em,i,blockquote,q,cite{font-style:italic;}
strong,b,dt,th{font-weight:bold;}
/*****************************/
     /* /END RESET */
/*****************************/

/***********************************************************/
/****************** Masonry Column Set *********************/
/***********************************************************/
.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 200px; }
.col4 { width: 580px; }
.col5 { width: 380px; }
.col1 img { max-width: 80px;  }
.col2 img { max-width: 180px; }
.col3 img { max-width: 200px; }
.col4 img { max-width: 580px; }
.col5 img { max-width: 380px; }
/***********************************************************/
/***************** /Masonry Column Set *********************/
/***********************************************************/



/***********************************************************/
/****************** General page styles ********************/
/***********************************************************/

h1 {}

h1,h2,h3,h4,h5,h6 { margin:0;padding:0; color:#2d949b }


a { color: #2d949b; }

a:hover { text-decoration: none; border-bottom:1px dotted #2d949b}

ul {
	margin:0 10px 0 10px;
	font-size:13px;
	color: #2d949b;
}



#leftColumn {
	float:left;
	width:200px;
	height:3000px;
	padding:40px 20px 0;
	left:40px;
	position:fixed;
	text-align:center;
}

#portfolio { /* MAIN Content area */
	margin:0 0 0 330px;
	overflow:hidden;
	padding:30px 0;
	position:relative;
}

body.dark #leftColumn {  /* Alternate Color styles */
	border-left:1px solid #eff2df;
	border-right:1px solid #eff2df;
	background:url(images/transparent-Dark.png);
	
}

table {
    width: 100%;
}

th {
    text-align: center;
}


/***************************************************************/
/************   Left Column Sorting Nav   **********************/
/***************************************************************/

#filtering-nav {margin:2em 0;}

#filtering-nav li {
    list-style: none;
    margin:0;
    padding:0
}

#filtering-nav li a  {
    display: block;
    padding: 2px ;
    margin: 0 10px 12px;
    text-decoration:none;
    letter-spacing:.1em;
    font-size:15px;
}

#filtering-nav.rounded li a  {
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

#filtering-nav li a:focus {outline:none;}

body.dark #filtering-nav li a {/* Alternate Color styles */
    color:#eff2df;
    
	background: url(images/darkButton.jpg) 0 0 repeat-x;
}

body.dark #filtering-nav li a:hover  {/* Alternate Color styles */
	background: url(images/darkButton.jpg) 0 -45px repeat-x;
}

body.dark #filtering-nav li a:active  {/* Alternate Color styles */
	background: url(images/darkButton.jpg) 0 -90px repeat-x;
}



/* Nav button specific styles if you need them */
#filtering-nav .all {}
#filtering-nav .web {}
#filtering-nav .photo {}
#filtering-nav .illustration {}
#filtering-nav .print {}
#filtering-nav .about {
	margin:30px 35px 0px;
	text-transform:uppercase;
	font-size:13px;
	padding:5px;
	}


/***************************************************************/
/**********************   Gallery Boxes   **********************/
/***************************************************************/

.box {
    margin:0 0 16px 0;
    background: none;
    float: left;
    overflow:hidden;
   
}

.box img {float:left;}

body.dark .box { /* Alternate Color styles */
    
    
	   
}



	/******************************************************************************************/
	/* These are if you want to style a certain box category. - Maybe different background colors for each? */
	.box.web { }
	.box.photo { }
	.box.illustration { }
	.box.print { }
	.box.about p { /* Some styles for 'about' boxes only */
		margin:5px 20px;
		padding:10px 0}
	.box.about h5 {
		margin:8px 0 8px 20px;
		font-size:24px;
		line-height:1em}
	.box.about img {margin-bottom:10px;}
	/******************************************************************************************/
	

.description {
	position:absolute;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
	padding:10px 0;
	bottom: 10px;
	background:#000;
	width:100%;
	left:-100%;
	background:url(images/transparent-Dark.png);
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.description h5 {
	font-size:16px;
	margin:0 10px;
	line-height:1em;
}

.description span {
	font-size:10px;
	display:block;
	color:#FFF;
}

.description p {
	padding:0;
	font-size:10px;
	margin:4px 10px 0;
	line-height:1.2em;
}


a.button {
	margin:10px 10px 0;
	font-weight:bold;
	float:right;
	font-size:9px;
	line-height:1.4em;
	display:block;
	padding:0px 6px;
	background:#000;
	text-decoration:none;
	border:1px solid #333;
}

a.button:hover {background-color: #333;}

/* Magnifying Glass */
a.zoom span {
	display:none;
	position: absolute;
	right:4px;
	top:4px;
	background:url(images/magnify.png) no-repeat;
	width:23px;
	height:22px;
	text-indent:-9999px
}

.social {
	display:block;
	float:left;
	margin:0 0 10px 20px;
}

.social:hover {
	border:none;
	position: relative;
	top:2px;
}

p.quote {
	font-size:17px;
	font-style:italic;
	line-height:1.4em;
	position:relative;
	top:-10px;
}

cite {
	text-align:right;
	color: #999;
	display:block;
	font-size:14px;
	margin:-24px 20px 10px 0
}


/***********************************************************/
/*************** About Me & Contact Form *******************/
/***********************************************************/
#contactBox {
	overflow:hidden;
	padding-bottom:5px;
}

#info {
	margin:0;
	width:560px;
	float:left
	}

#info ul {
	list-style:none;
	margin:5px 0 5px 5px;
	padding:0;
	text-transform:uppercase;
}

#info ul li {
	padding:2px 0;
	background:none;
	font-size:11px;
	line-height:normal
}

	/********
	// Begin Contact Form
	*********/
	
	ul.form {list-style:none;padding:0;border:0;margin:0;background:none;}
	ul.form li {background:none;margin:0!important;padding:0;line-height:normal;}
	
	#contactForm {
		text-align:right;
		margin:0px 20px 0 0;
		width:190px;
		float:left
		} 
	
	#contactForm form {font-size:12px;}
		
	#contactForm label {
		display:block;
		float:left;
		font-size:15px;
		margin:0;
		padding:0;
		width:100%;
		}
		
	#contactForm fieldset {padding:0;border:none;}
		
	#contactForm textarea {height:70px;}
	
	#contactForm textarea, #contactForm input {
		background:#252525;
		font-size:11px;
		border:none;
		padding:2px;
		margin-bottom:5px;
		width:165px;
		border:1px solid #333;
		color:#FFF
		}
		
	body.light #contactForm textarea, body.light #contactForm input {
		background:#fff; border:1px solid #999; color:#333 }
		
	#contactForm input.submit {
		cursor:pointer;
		background:none;
		width:70px;
		font-size:10px;
		font-family:Georgia, "Times New Roman", Times, serif;
		color:#CCC;
		text-transform:uppercase
		}
		
	body.light #contactForm input.submit { color:#666 }
		
	.valid {border:1px solid green !important;}
	.invalid {border:1px solid red !important;}
		
	/********
	// End Contact Form
	*********/

/***********************************************************/
/*************** /About Me & Contact Form *******************/
/***********************************************************/



/***********************************************************/
/********************* Layout Switcher *********************/
/***********************************************************/
.panel {
	position:fixed;
	z-index:2;
	top: 25px;
	right: 0;
	display: none;
	background: #000;
	color:#999;
	width: 330px;
	height: auto;
	padding:10px 30px 20px;
	filter: alpha(opacity=90);
	opacity: .90;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
}

body.light .panel {
	background: #FFF;
	color: #000;
	-moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
	filter: alpha(opacity=85);
	opacity: .85;
}

.panel h2 { margin-bottom:5px;}

body.light .panel h2 {color: #333}

.panel ul {margin:20px 0; padding:0}
.panel ul li { margin-left:20px}
.panel ul a {text-decoration:none;}
.panel ul a:hover { color:#FFF; font-weight:bold; border:none}
.panel ul ul {list-style:square; margin:0}


body.light .panel ul a {text-decoration:none; color: #333}
body.light .panel ul a:hover { color:#333}

.panel .notes {float:right;}

.panel .notes p {
	width:120px;
	border:1px solid #333;
	padding:10px;
	font-size:11px;
	margin:10px 0;
	color:#CCC;
	overflow:hidden
}

body.light .panel .notes p {
	color:#000; background:#eaeaea}

.notesButton {
	display:block;
	background:#111;
	border:1px solid #333;
	color:#FFF;
	text-align:center;
	padding:3px;
	font-size:11px;
	text-decoration:none;
	margin:0px 0 3px 0;
}

.notesButton:hover {
	background:#222;
	border:1px solid #333;
}

body.light .panel .notesButton {
	background: #999;
	border:1px solid #333;
	color:#000;
}
body.light .panel .notesButton:hover {background:#ccc;}

a.trigger{
	position:fixed;
	z-index:1;
	display: block;
	text-decoration: none;
	top: 0px; right: 0;
	font-size: 12px;
	font-family: verdana, helvetica, arial, sans-serif;
	padding:3px 25px;
	color: #fff;
	background: #333;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 0px;
	-webkit-border-bottom-right-radius: 0px;
}

a.trigger:hover{
	background:#000;
	color:#FFF;
	border:none
}

a.active.trigger {
	background:#000;
	color:#ccc;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-bottomright: 0px;
	-webkit-border-bottom-right-radius: 0px;
	filter: alpha(opacity=90);
	opacity: .90;
}

a.trigger:focus {outline:none;}

body.light a.trigger {
	background: #FFF;
	color: #000;
	-moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}


/***********************************************************/
/********************* /Layout Switcher ********************/
/***********************************************************//***********************************************************//***********************************************************//***********************************************************/



html {
  scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: 'Source Sans Pro', sans-serif;
	
 	background-color: #2b668e;
}

body a,
.slider-info a {
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	text-decoration: none;
	outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: 'Source Sans Pro', sans-serif;
}

p {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 1px;
}
ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style-type: none;
}

body a:hover {
	text-decoration: none;
}

body a:focus {
	outline: none;
	text-decoration: none;
}

/*-- bottom-to-top --*/
/*-- header --*/
.navimg {
    border-radius: 50%;
    margin: 0 auto;
    border: 4px solid rgba(255, 255, 255, 0.39);
}
/* CSS Document */

header {
    position: relative;
    z-index: 9;
    width: 100%;
}

.toggle,
[id^=drop] {
    display: none;
}

/* Giving a background-color to the nav container. */

nav {
    margin: 0;
    padding: 0;
}


#logo a {
    float: left;
    display: initial;
    margin: 0;
    color: #fff;
}

#logo a span {
    color: #fff;
}
nav.mnu {
    text-align: right;
}
/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
    content: "";
    display: table;
    clear: both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

/* Positioning the navigation items inline */

nav ul li {
    margin: 0px;
    display: block;
}

/* Styling the links */

nav a {
   color: #2b668e;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 15px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}


nav ul li ul li:hover {
    background: #f8f9fa;
}

/* Background color change on Hover */

nav a:hover {
    color: #00a8e0;
}

.menu li.active a {
    color: #00a8e0;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */

nav ul ul {
    display: none;
    position: absolute;
    /* has to be the same number as the "line-height" of "nav a" */
    top: 30px;
    background: #fff;
    padding: 10px;
}

/* Display Dropdowns on Hover */

nav ul li:hover > ul {
    display: inherit;
}

/* Fisrt Tier Dropdown */

nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
}

nav ul ul li a {
    color: #333;
    padding: 5px 10px;
    display: block;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/

nav ul ul ul li {
    position: relative;
    top: -60px;
    /* has to be the same number as the "width" of "nav ul ul li" */
    left: 170px;
}


/* Change ' +' in order to change the Dropdown symbol */

li > a:only-child:after {
    content: '';
}


/* Media Queries
--------------------------------------------- */

@media all and (max-width: 768px) {

    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
    }

    nav {
        margin: 0;
    }

    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle + a,
    .menu {
        display: none;
    }

    /* Stylinf the toggle lable */
    .toggle {
        display: block;
        padding: 8px 20px;
        font-size: 15px;
        text-decoration: none;
        border: none;
        float: right;
        background-color: #ffffff;
        color: #333;
        cursor: pointer;
    }
    .menu .toggle {
        float: none;
        text-align: center;
        margin: auto;
        width: 80%;
        padding: 5px;
        font-weight: normal;
        font-size: 16px;
        letter-spacing: 1px;
    }

    .toggle:hover {
        color: #333;
        background-color: #fff;
    }

    /* Display Dropdown when clicked on Parent Lable */
    [id^=drop]:checked + ul {
        display: block;
        background: rgba(16, 16, 16, 0.85);
        padding: 15px 0;
        text-align: center;
		width: 90%;
    }

    /* Change menu item's width to 100% */
    nav ul li {
        display: block;
        width: 100%;
        padding: 5px 0;
    }

    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }

    nav ul ul ul a {
        padding: 0 80px;
    }

    nav a:hover,
    nav ul ul ul a {
        background-color: transparent;
    }

    nav ul li ul li .toggle,
    nav ul ul a,
    nav ul ul ul a {
        padding: 14px 20px;
        color: #FFF;
        font-size: 17px;
    }


    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #212121;
    }

    /* Hide Dropdowns by Default */
    nav ul ul {
        float: none;
        position: static;
        color: #ffffff;
        /* has to be the same number as the "line-height" of "nav a" */
    }

    /* Hide menus on hover */
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }

    /* Fisrt Tier Dropdown */
    nav ul ul li {
        display: block;
        width: 100%;
        padding: 0;
    }

    nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */
    }
    nav ul ul li a {
        color: #fff;
        font-size: 0.85em;
    }
	 nav ul li {
        display: inline-block;
        width: 100%;
    }
}

@media all and (max-width: 330px) {

   

}

.sidenav {
	height: 100%;
	width: 300px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background: url(../images/banner-1.jpg) no-repeat bottom;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
	overflow-x: hidden;
	padding-top: 20px;
}

section#about {
	margin: 1em;
	padding: 1em;
	border: 1px solid #dacfcf;
}

.navbar-light .navbar-brand {
	padding: 6px 15px;
	line-height: 36px;
	text-decoration: none;
	font-size: 29px;
	color: #000;
	text-transform: uppercase;
	display: block;
	letter-spacing: 1px;
	font-weight: 300;
	background: #fff;
	border: 4px solid rgba(103, 58, 183, 0.43);
	text-align: center;
}

.navbar-expand-lg .navbar-nav li a {
	color: #000;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 15px;
}

header {
	padding-top: 2em;
}

.navbar-expand-lg .navbar-nav li {
	margin: 1em 0 0;
}

.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
	color: #fff;
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: #fff;
}
.navbar-light .navbar-nav .nav-link {
	color: rgba(255, 255, 255, 0.35);
}
.serv_link {
    color: #000;
    font-weight: 600;
}
.main {
	margin-left: 300px;
}

@media screen and (max-height: 450px) {
	.sidenav {
		padding-top: 15px;
	}
}
.sidenav h1 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.35em;
    line-height: 1.75em;
    margin-top: 1em;
    font-weight: 400;
}
.side_top {
    text-align: right;
    padding: 6em 2.5em 0;
}
.banner-text-w3ls {
    padding: 8em 4em 4em 4em;
}
.banner-text-w3ls h2 {
    color: #787878;
    font-size: 2em;
    letter-spacing: 2px;
    font-weight: 400;
}
p.banp {
    font-size: 18px;
    letter-spacing: 1px;
    color: #999;
    font-weight: 400;
}
p.newsp {
    font-size: 16px;
    letter-spacing: 1px;
    color: #999;
    font-weight: 400;
}
.agile-link-bnr {
    padding: 10px 40px;
    color: #999;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 16px;
    text-transform: capitalize;
    background: none;
    border: 1px solid #999;
}
.agile-link-bnr:hover {
    background:#e7746f;
    border: 1px solid #e7746f;
}
.news {
    padding: 4em 4em;
    background: #ffffff;
    border-top: solid 2px #efefef;
}
.newsgrid1 {
    padding: 0;
}
.newsgrid2 {
    padding: 2em 5em;
    background: #1d89e4;
}
.gri2 {
    background: #42a5f6;
}
.gri3 {
    background:  #1564c0;
}

.news-grids h4 {
    letter-spacing: 2px;
    color: #787878;
    font-weight: 400;
    padding: 1em 0 1em 0;
    font-size: 1.3em;
    text-align: left;
}
.news-grids-right {
    margin-top: 3em;
}
.news img {
    border-radius: 5px;
}
.wthree-inner-sec.services-bg {
    background: rgba(255, 255, 255, 0.12);
}
h2.w3_head, h3.w3_head {
    font-weight: 400;
    color: #787878;
    font-size: 1.5em;
    letter-spacing: 0.075em;
    line-height: 1.35em;
}
p.main_p {
    font-size: 1.4em;
    line-height: 1.8em;
    letter-spacing: 0.075em;
    color: #777;
    font-weight: 300;
}
section.slide-wrapper-1 {
    padding: 5em 8em;
    text-align: center;
    background: #fff;
	box-shadow: 0 0.05em 0.15em 0 rgba(0, 0, 0, 0.17);
}
.news_top {
    padding-right: 5em;
}
p.iner {
    font-size: 1.3em;
    line-height: 1.8em;
    letter-spacing: 0.075em;
    color: #777;
    font-weight: 300;
}
/* contact */
.gal-img img {
    border-radius: 5px;
}
.wedo {
    padding: 4em 4em;
    background: #ffffff;
    text-align: left;
    border-top: solid 2px #efefef;
}
.contact_grid_right input[type="text"], .contact_grid_right input[type="email"], .contact_grid_right textarea {
    outline: none;
    padding: 15px 15px;
    font-size: 14px;
    color: #777;
    background: rgba(255, 255, 255, 0.75);
    width: 100%;
    letter-spacing: 1px;
    border: solid 1px rgba(0, 0, 0, 0.15);
    border-radius: 0.25em;
    margin-top: 1em;
}

.contact_grid_right input[type="text"]:nth-child(2),
.contact_grid_right input[type="email"] {
    margin: 1em 0 0;
}

.contact_grid_right textarea {
    min-height: 13em;
    margin: 1em 0em;
    resize: none;
}

.contact_grid_right input[type="submit"] {
    outline: none;
    padding: 14px 20px;
    font-size: 1.1em;
    color: #fff;
    background:#00a8e0;
    border: none;
    letter-spacing: 2px;
    border-radius: 0.25em;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
    font-weight: 700;
    cursor: pointer;
}

.contact_grid_right input[type="submit"]:hover {
    background-color:#e7746f;
}

.follow {
    padding: 2em 0;
    margin: 5em 0;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
}
ul.social_section_1info li {
    display: inline-block;
}
ul.social_section_1info li a {
    width: 50px;
    height: 50px;
    text-align: center;
    display: block;
    line-height: 47px;
    border-radius: 5px;
    border: 1px solid #484848;
    background: #272727;
}
ul.social_section_1info a {
    color: #999;
    margin-right: 30px;
    font-size: 22px;
}
ul.social_section_1info a:hover {
    color: #fff;
}
.cpy-right p{
	color:#fff;
}
.cpy-right p a {
    color: #43b3e0;
}
.cpy-right p a:hover{
	color:#999;
}
.cpy-right {
    padding: 2em 0 0;
    border-top: solid 2px #efefef;
    margin: 4em 0 0 0;
}
#success-message {
	opacity: 0;
}

.col-xs-12.col-sm-12.col-md-12.col-lg-12 {
	padding: 0 20% 0 20%;
}

.form-title {
	padding: 25px;
	font-size: 30px;
	font-weight: 300;
}

.form-group .form-control {
	-webkit-box-shadow: none;
	border-bottom: 1px;
	border-style: none none solid none;
	border-color:#ffd708;
}

.form-group .form-control:focus {
	box-shadow: none;
	border-width: 0 0 2px 0;
	border-color: #000;
}

textarea {
	resize: none;
}

.btn-mod.btn-large {
	height: auto;
	padding: 13px 52px;
	font-size: 15px;
}

.btn-mod.btn-border {
	color: #000000;
	border: 1px solid #000000;
	background: transparent;
}

.btn-mod,
a.btn-mod {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 4px 13px;
	color: #fff;
	background: rgba(34, 34, 34, .9);
	border: 1px solid transparent;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 2px;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
	-moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
	-o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
	-ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
	transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.btn-mod.btn-border:hover,
.btn-mod.btn-border:active,
.btn-mod.btn-border:focus,
.btn-mod.btn-border:active:focus {
	color: #fff;
	border-color: #000;
	background: #000;
	outline: none;
}

@media only screen and (max-width: 500px) {
	.btn-mod.btn-large {
		padding: 6px 16px;
		font-size: 11px;
	}
	.form-title {
		font-size: 20px;
	}
}

form#contact-form label {
	color: #ea4335;
}

label {
	color: #000 !important;
	font-weight: 600;
	letter-spacing: 0.5px;
}



.form-control {
	background-color: #e2e2e2;
	border: none;
}

.map iframe {
	width: 100%;
	border: 7px solid #e4e4e4;
	min-height: 500px;
}

/* //contact */
/*-- gallery --*/
section.gallery {
    background: #f0f4f4;
}

/*-- //gallery --*/
/*-- popup --*/

.pop-overlay {
    position: fixed;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 0ms;
    visibility: hidden;
    opacity: 0;
}

.pop-overlay:target {
    visibility: visible;
    opacity: 1;
	z-index:1;
}

.popup {
    background: #fff;
    border-radius: 5px;
    width: 35%;
    position: relative;
    margin: 8em auto;
    padding: 3em 1em;
}

.popup p {
    font-size: 15px;
    color: #666;
    letter-spacing: .5px;
    line-height: 30px;
}

.popup h2 {
    margin-top: 0;
    color: #fff;

}

.popup .close {
    position: absolute;
    top: 5px;
    right: 15px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
}

.popup .close:hover {
    color: #30c39e;
}


/*-- //popup --*/
/*-- popup --*/

.overlay {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0ms;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
    background: #fff;
    border-radius: 5px;
    width: 27%;
    position: relative;
    margin: 15em auto;
	padding: 5em;
}
.popup {
    background: #fff;
    border-radius: 5px;
    width: 40%;
    position: relative;
    margin: 8em auto;
	padding: 3em 1em;
}
.popup p{
	font-size: 15px;
	color: #666;
	letter-spacing: .5px;
	line-height: 30px;
}
.popup .close {
    position: absolute;
    top: 25px;
    right: 25px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
}
.popup h2 {
  margin-top: 0;
  color: #fff;

}
.popup .close {
    position: absolute;
    top: 5px;
    right: 15px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
}
.popup .close:hover {
  color: #30c39e;
}

/*-- //popup --*/
.gallery {
    padding: 4em 4em;
    border-top: solid 2px #efefef;
}

.wthree-inner-sec.services-bg {
    background: rgba(255, 255, 255, 0.12);
}

.services-box {
    margin-bottom: 40px;
    padding: 20px 0;
    transition: all 1s;
    -moz-transition: all 1s;
    /* Firefox 4 */
    -webkit-transition: all 1s;
    /* Safari and Chrome */
    -o-transition: all 1s;
    /* Opera */
}

.services-box:hover {
    transition: all 1s;
    -moz-transition: all 1s;
    /* Firefox 4 */
    -webkit-transition: all 1s;
    /* Safari and Chrome */
    -o-transition: all 1s;
    /* Opera */
}

.services-box:hover span {
    background: transparent;
    border-radius: 100px;
    color: #e7746f;
}

.icon span {
    width: 100px;
    height: 100px;
    color: #00a8e0;
    /* border-radius: 50%; */
    line-height: 100px;
    text-align: center;
    font-size: 26px;
    border: solid 2px rgba(210, 215, 217, 0.75);
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
}

.service-content {
    margin-left: 1em;
    text-align: left;
}

.service-content h4, .service-content h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 35px;
    margin-bottom: 0.5em;
    color: #3d4449;
}
.service-txt h5 {
    text-transform: capitalize;
    font-size: 2.5em;
    color: #000;
    letter-spacing: 1px;
    font-weight: 300;
    line-height: 1.5;
}

.service-txt h5 span {
    background: #19adf2;
    font-weight: 600;
    color: #fff;
    padding: 0 4px;
}
section.slide-wrapper {
    padding: 4em 4em;
}
/* //services */
/* -- Responsive code -- */
@media screen and (max-width: 1440px) {
.side_top {
    padding: 2em 2em 0;
}
}

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

}

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

@media screen and (max-width: 1080px) {
	
	.sidenav {
		width:362px;
	}
	.main {
		margin-left: 362px;
	}
	.sidenav h1 {
    font-size: 1.2em !important;
}
.banner-text-w3ls {
    padding: 4em 2em 4em 2em;
}
.gallery {
    padding: 2em 2em;
}
section.slide-wrapper {
    padding: 2em 2em;
}
.news {
    padding: 2em 2em;
}
.wedo {
    padding: 2em 2em;
}
.popup {
    width: 63%;
}
}

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

}

@media screen and (max-width: 991px) {
	.banner-text-w3ls h2 {
    font-size: 1.7em !important;
}
header {
    padding-top: 3em;
    padding-right: 1.5em;
}
.contact_grid_left {
    padding-left: 1em;
    margin-top: 2em;
}
.news-grids-middle {
    margin-top: 3em;
}
}

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

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

@media screen and (max-width: 768px) {
	.sidenav {
    width: 100%;
    height: 60%;
    position: relative;
    overflow: inherit;
}
	.main {
		margin-left: 0;
	}
	header {
		padding-top: 0;
		padding-right: 0em;
	}
	.side_top {
    text-align: center;
}
nav ul {
    top: 43px;
    position: absolute;
}
.side_top {
    padding: 2em 0em 0;
}
}
@media screen and (max-width: 736px) {
.proj-1.gal-img {
    margin-top: 3em;
}
.popup {
    width: 80%;
}
}
@media screen and (max-width: 640px) {
	.news_top {
    padding-right: 0em;
}
}

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

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

@media screen and (max-width: 480px) {
.cpy-right p {
    text-align: center;
}	
.banner-text-w3ls h2 {
    font-size: 1.4em !important;
}
p.banp {
    font-size: 16px !important;
}
}

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

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

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

@media screen and (max-width: 320px) {
	.side_top {
    padding: 1em 0em 0;
}
.banner-text-w3ls {
    padding: 2em 1em 2em 1em;
}
.banner-text-w3ls h2 {
    font-size: 1.2em !important;
}
.gallery {
    padding: 2em 1em;
}
section.slide-wrapper {
    padding: 2em 1em;
}
.icon span {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
}
.news {
    padding: 2em 1em;
}
.services-box {
    margin-bottom: 0px;
    padding: 20px 0;
}
.wedo {
    padding: 2em 1em;
}
.sidenav h1 {
    margin-bottom: 1em;
}
}


/* -- //Responsive code -- */