/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
*{margin:0px;
padding:0px;
}
*{box-sizing:border-box;}
body{
	width:100%;
	height:auto;
	overflow-x:hidden;
	overflow-y:auto;
	margin:0px;
	padding:0px;
	background:#fff;
	position:relative;
	}
ul{list-style:none; margin:0px; padding:0px;}

.main{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	}
.main .intro-header{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	background:#000;
	height:50px;
	}
	.main .intro-header .contact-detail{
		float: left;
        margin: 12px 50px;
        padding: 0px;
        width: 50%;
		}
	.main .intro-header .contact-detail a{
		text-decoration:none;
		display:inline-block;
		margin:0px;
		padding:0px 5px;
		color:#fff;
		}	
		.main .intro-header .contact-detail a i{
			font-size:20px;
			color:#1b83a6;
			position:relative;
			top:3px;
			}
		.main .intro-header .contact-detail p{
	    margin:0px;
		padding:0px 5px;
		display:inline-block;
		font:14px helvetica;
			}	

.main .intro-header .social-wrraper{
	 float:right;
	 margin:12px 50px;
	 padding:0px;
	 width:auto;
	 }
	 .main .intro-header .social-wrraper a{
	    padding: 6px 0px;
        background: none;
        margin: 14px 3px 0;
        background-color: #000;
        border-radius: 8px;
        border: 1px solid #000000;
        width: 28px;
       text-align: center;
       line-height: 28px;
       height: 28px;
	    }
	            .main .intro-header .social-wrraper a.facebook:hover{ background:#3b5998;}
				.main .intro-header .social-wrraper a.twitter:hover{ background:#00a9ff;}
				.main .intro-header .social-wrraper a.google:hover{background:#DD4B39;}
				.main .intro-header .social-wrraper a.linkedin:hover{ background:#6cb1ca;}
				
	 .main .intro-header .social-wrraper a i{
			 color: #fff;
             font-size: 13px;
			 width:28px;
			 height:28px
			 }
				 .main .intro-header .social-wrraper a i.fa.fa-google-plus{
				 width:27px;
				 height:28px;
				 font-size:13px;
				 position: relative;
                 bottom: 1px;
				 }
			 
.main .spotlight{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	}
	.main .spotlight .logo{
		float:left;
		margin:15px 50px;
		padding:0px;
		width:170px;
		}
		.main .spotlight .logo a{
			text-decoration:none;
			margin:0px;
			padding:0px;
			}
		.main .spotlight .logo a img{
			width:100%;
			margin:0px;
			padding:0px;
			} 
	
#nav
{width:auto;
float:right;
margin:50px 40px 0px;
padding:0px;
    /* container */
}
    #nav > a
    {
        display: none;
    }
    #nav li
    {
        position: relative;
padding: 5px 0px;
    }
 
    /* first level */
 
    #nav > ul
    {
        height: 3.75em;
    }
        #nav > ul > li
        {
            
            height: 100%;
            float: left;
			padding: 0px 18px;
        }
		#nav > ul > li a{
			text-decoration:none;
			color:#6ed3f8;
			font:15px helvetica;
			font-weight:bold; 
			}
			#nav > ul > li a:hover{
				 color:#afafaf;}
			#nav > ul > li a.active{
				color:#afafaf;
				}
 
    /* second level */
 
    #nav li ul
    {
 display: none;
position: absolute;
top: 65%;
padding: 0px 0px;
background: #333333;
width: 200px;
    }
        /*#nav li:hover ul
        {
            display: block;
        }*/
		#nav li ul li{
			text-align:left;
			padding:5px 8px;
			}
			#nav li ul li:hover{
				background:#000;}
			#nav li ul li a{
				font:13px helvetica;
				color:#fff;
				}
		#nav li ul li a:hover{
			color:#359ac8;
			;
			}
		
#ninja-slider {
    width:100%;
    background:#FFF;
    padding: 0!important;
    margin:0 auto;
    overflow:hidden;
    box-sizing:border-box;
	position: relative;
    bottom: 120px;
    z-index: -1;
}

#ninja-slider .slider-inner {
    /*max-width:720px;*/
    margin:0 auto;/*center-aligned */
    font-size:0px;
    position:relative;
    box-sizing:border-box;
}

#ninja-slider ul {
    position:relative;
    list-style:none;
    padding:0;
    box-sizing:border-box;
    background:black;
}

#ninja-slider li {    
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
    font-size:12px;
    list-style:none;
    margin:0;
    padding:0;
    opacity:0;
    overflow:hidden;
    box-sizing:border-box;
}


#ninja-slider li.ns-show {
    opacity:1;
}


/* --------- slider image ------- */  
#ninja-slider .ns-img {
    background-color:rgba(0,0,0,0.8);
    background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/

    /*box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);*/
    border-radius:4px;

    cursor:default;
    display:block;
    position: absolute;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
}


/*---------- Captions -------------------*/

#ninja-slider .caption {
    font-size:10em;
    font-family: 'Bree Serif', sans-serif;
    position:absolute;
    width:100%;
    text-align:center;
    color:rgba(255,255,255,0.8);
    bottom:20%;
}
#ninja-slider li.ns-show .caption {
    /* 5s = (delay + transitionSpeed) set in the ninja-slider.js */
    -webkit-animation: titleAnimation 10s linear both;
    animation: titleAnimation 4s linear both;
}

#ninja-slider li.sl-0 .caption { 
    /*delay caption animation for the initial slide*/
    -webkit-animation: none;
    animation: none;
    display:none;
}

@keyframes titleAnimation { 
	0% { opacity:0; }
	10% { opacity:0;transform: translateY(-20%);}
	20% { opacity:1;transform: translateY(0%);}
	70% {opacity:1;transform: translateY(0%);}
	80% {opacity:0;transform: translateY(100%);}
	100% {opacity:0;transform: translateY(100%);}
}

@-webkit-keyframes titleAnimation { 
	0% { opacity:0; }
	10% { opacity:0; -webkit-transform:translateY(-20%);}
	25% { opacity:1; -webkit-transform:translateY(0%);}
	70% {opacity:1; -webkit-transform:translateY(0%);}
	80% {opacity:0; -webkit-transform:translateY(100%);}
	100% {opacity:0; -webkit-transform:translateY(100%);}
}

/* ---------Arrow buttons ------- */   
/* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */ 
/* Usually the ninja-slider.js will create the arrow buttons and pager(nav dots) automatically, unless you have added their markup manually to the HTML as this demo did.
   This demo has put them inside a DIV.navWrapper. 
*/  

#ninja-slider-prev, #ninja-slider-next
{
    position: absolute;
    display:inline-block;
    width:50px;
    height:50px;
    line-height:52px;
    margin:0;
    border:2px solid white;
    backface-visibility:hidden;
    color:white;
    overflow:hidden;
    -webkit-user-select: none;
    user-select:none;
    font-family:sans-serif;
    font-size:14px;
    transition:all 0.5s;
    cursor:pointer;
}

#ninja-slider-prev {
    left:auto; right:50%;
	margin-right:-2px;
}

#ninja-slider-next {
    left:50%; right:auto;
}

#ninja-slider-prev:hover, #ninja-slider-next:hover {width:80px;background-color:rgba(0,0,0,0.6);}

/*pagination within the prev/next buttons*/
#ninja-slider-prev div, #ninja-slider-next div {white-space:nowrap;opacity:0;position:absolute;}
#ninja-slider-prev div {left:6px;}
#ninja-slider-next div {right:6px;}
#ninja-slider-prev:hover div, #ninja-slider-next:hover div {opacity:1;}
#ninja-slider-prev:hover.disabled, #ninja-slider-next:hover.disabled {opacity:0.1;cursor:default;}

/* arrows */
#ninja-slider-prev::before, #ninja-slider-next::before {
    position: absolute;
    top: 17px;
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    border-left: 4px solid white;
    border-top: 4px solid white;
    backface-visibility:hidden;
}

#ninja-slider-prev::before {
    -ms-transform:rotate(-45deg);/*IE 9*/
    -webkit-transform:rotate(-45deg);
    transform: rotate(-45deg);
    right:15px;
}

#ninja-slider-next::before {
    -ms-transform:rotate(135deg);/*IE 9*/
    -webkit-transform:rotate(135deg);
    transform: rotate(135deg);
    left:15px;
}


/*------ pager(nav bullets) ------*/      
/* The pager id should be: slider id + "-pager" */
#ninja-slider-pager, #ninja-slider-pause-play { display:none;} 
		
				




#ninja-slider {
    width:100%;
    background:#FFF;
    padding: 0!important;
    margin:0 auto;
    overflow:hidden;
    box-sizing:border-box;
	position: relative;
    bottom: 116px;
    z-index: -1;
}

#ninja-slider .slider-inner {
    /*max-width:720px;*/
    margin:0 auto;/*center-aligned */
    font-size:0px;
    position:relative;
    box-sizing:border-box;
}

#ninja-slider ul {
    position:relative;
    list-style:none;
    padding:0;
    box-sizing:border-box;
    background:black;
}

#ninja-slider li {    
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
    font-size:12px;
    list-style:none;
    margin:0;
    padding:0;
    opacity:0;
    overflow:hidden;
    box-sizing:border-box;
}


#ninja-slider li.ns-show {
    opacity:1;
}


/* --------- slider image ------- */  
#ninja-slider .ns-img {
    background-color:rgba(0,0,0,0.8);
    background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/

    /*box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);*/
    border-radius:4px;

    cursor:default;
    display:block;
    position: absolute;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
}


/*---------- Captions -------------------*/

#ninja-slider .caption {
    font-size:3.75em;
    font-family: 'Bree Serif', sans-serif;
    position:absolute;
    width:100%;
    text-align:center;
    color:#fff;
    bottom:20%;
	font-weight:bold;
	text-transform:uppercase;
}
#ninja-slider li.ns-show .caption {
    /* 5s = (delay + transitionSpeed) set in the ninja-slider.js */
    -webkit-animation: titleAnimation 5s linear both;
    animation: titleAnimation 8s linear both;
}

#ninja-slider li.sl-0 .caption { 
    /*delay caption animation for the initial slide*/
    -webkit-animation: none;
    animation: none;
    display:none;
}

@keyframes titleAnimation { 
	0% { opacity:0; }
	10% { opacity:0;transform: translateY(-20%);}
	20% { opacity:1;transform: translateY(0%);}
	70% {opacity:1;transform: translateY(0%);}
	80% {opacity:0;transform: translateY(100%);}
	100% {opacity:0;transform: translateY(100%);}
}

@-webkit-keyframes titleAnimation { 
	0% { opacity:0; }
	10% { opacity:0; -webkit-transform:translateY(-20%);}
	25% { opacity:1; -webkit-transform:translateY(0%);}
	70% {opacity:1; -webkit-transform:translateY(0%);}
	80% {opacity:0; -webkit-transform:translateY(100%);}
	100% {opacity:0; -webkit-transform:translateY(100%);}
}

/* ---------Arrow buttons ------- */   
/* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */ 
/* Usually the ninja-slider.js will create the arrow buttons and pager(nav dots) automatically, unless you have added their markup manually to the HTML as this demo did.
   This demo has put them inside a DIV.navWrapper. 
*/  

div.navsWrapper {
    position:absolute;
    width:100px;
    height:50px;
    right:90px;
    bottom:9%;
    z-index:10;
}
 
#ninja-slider-prev, #ninja-slider-next
{
    position: absolute;
    display:inline-block;
    width:50px;
    height:50px;
    line-height:52px;
    margin:0;
    border:2px solid white;
    backface-visibility:hidden;
    color:white;
    overflow:hidden;
    -webkit-user-select: none;
    user-select:none;
    font-family:sans-serif;
    font-size:14px;
    transition:all 0.5s;
    cursor:pointer;
}

#ninja-slider-prev {
    left:auto; right:50%;
	margin-right:-2px;
}

#ninja-slider-next {
    left:50%; right:auto;
}

#ninja-slider-prev:hover, #ninja-slider-next:hover {width:80px;background-color:rgba(0,0,0,0.6);}

/*pagination within the prev/next buttons*/
#ninja-slider-prev div, #ninja-slider-next div {white-space:nowrap;opacity:0;position:absolute;}
#ninja-slider-prev div {left:6px;}
#ninja-slider-next div {right:6px;}
#ninja-slider-prev:hover div, #ninja-slider-next:hover div {opacity:1;}
#ninja-slider-prev:hover.disabled, #ninja-slider-next:hover.disabled {opacity:0.1;cursor:default;}

/* arrows */
#ninja-slider-prev::before, #ninja-slider-next::before {
    position: absolute;
    top: 17px;
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    border-left: 4px solid white;
    border-top: 4px solid white;
    backface-visibility:hidden;
}

#ninja-slider-prev::before {
    -ms-transform:rotate(-45deg);/*IE 9*/
    -webkit-transform:rotate(-45deg);
    transform: rotate(-45deg);
    right:15px;
}

#ninja-slider-next::before {
    -ms-transform:rotate(135deg);/*IE 9*/
    -webkit-transform:rotate(135deg);
    transform: rotate(135deg);
    left:15px;
}


/*------ pager(nav bullets) ------*/      
/* The pager id should be: slider id + "-pager" */
#ninja-slider-pager, #ninja-slider-pause-play { display:none;} 

.main .containt-wrapper{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	position: relative;
    bottom: 75px;
	display:block;
	}
	.main .containt-wrapper .intro-wrapper{
		width:1100px;
		margin:0px auto;
		padding:0px;
		}
		.main .containt-wrapper .intro-wrapper .intro{
			text-align:center;
			font-size:36px;
			margin:0px;
			padding:30px 0px 15px;
			color:#359ac8;
			font-weight:300;
			letter-spacing:1px;
			line-height: 1.14;
			font-family:Arial, Helvetica, sans-serif;
			}
			.main .containt-wrapper .intro-wrapper h4{
				text-align:center;
				margin:0px;
				padding:0px 0px 28px;
				color:#2E333B;
                font-size: 24px;
				font-weight:100;
				line-height:1.2;
				letter-spacing:1px;
				font-family:Arial, Helvetica, sans-serif;
				}
.main .feature-container{
	width:100%;
	margin:0px;
	padding:0px 0px 10px;
	background:url(../img/features.png) no-repeat center;
	float:left;
	position: relative;
    bottom: 65px;
	}
   .main .feature-container .right-fwrapper{
		float:right;
		width:28%;
		margin:0px;
		padding:0px;
		}
		.main .feature-container .right-fwrapper .right-fwrapper-description{
			display:block;
			margin:40px 0px 0px;
			padding:0px;
			float:left;
			width:100%;
			}
			.main .feature-container .right-fwrapper .right-fwrapper-description li{
			display:inline-block;
			margin:0px;
			padding:0px 6px;
			font-size:17px;
			color:#4f98b4;
			text-align:left;
			text-transform:uppercase;
			letter-spacing:1px;
			word-spacing:1px;
			}
			.main .feature-container .right-fwrapper .right-fwrapper-description li:last-child{
				float:left;} 
			.main .feature-container .right-fwrapper .right-fwrapper-description p{
				font: 10px helvetica;
                margin: 0px 40px;
                padding: 0px;
                text-align: left;
                width: 78%;
				}
			.main .feature-container .right-fwrapper .right-fwrapper-description a{
					text-decoration:none;
					margin:0px;
					padding:0px;
					}
					.main .feature-container .right-fwrapper .right-fwrapper-description a p{
						background: #1c84a7;
                        padding: 2px;
                        border-radius: 10px;
                        color: #fff;
                        width:20%;
                        text-align: center;
                        float: left;
                        margin: 10px 42px;
						}
			       .main .feature-container .right-fwrapper .right-fwrapper-description a p:hover{
							background: #333;
							}
	.main .feature-container .left-fwrapper{
		float:left;
		width:28%;
		margin:0px;
		padding:0px;
		}
		 .main .feature-container .left-fwrapper .left-fwrapper-description{
			display:block;
			margin:40px 0px 0px;
			padding:0px;
			float:left;
			width:100%;
			}
			.main .feature-container .left-fwrapper .left-fwrapper-description li{
			display:inline-block;
			margin:0px;
			padding:0px 6px;
			font-size:17px;
			color:#4f98b4;
			text-align:right;
			text-transform:uppercase;
			letter-spacing:1px;
			word-spacing:1px;
			}
			.main .feature-container .left-fwrapper .left-fwrapper-description li:first-child{
				float: left;
                width: 91%;
				}
			.main .feature-container .left-fwrapper .left-fwrapper-description li:last-child{
				float:right;} 
				.main .feature-container .left-fwrapper .left-fwrapper-description p{
				font: 10px helvetica;
                margin: 0px 40px;
                padding: 0px;
                text-align: right;
                width: 78%;
				}
				.main .feature-container .left-fwrapper .left-fwrapper-description a{
					text-decoration:none;
					margin:0px;
					padding:0px;
					}
					.main .feature-container .left-fwrapper .left-fwrapper-description a p{
						background: #1c84a7;
                        padding: 2px;
                        border-radius: 10px;
                        color: #fff;
                        width:20%;
                        text-align: center;
                        float: right;
                        margin: 10px 42px;
						}
						.main .feature-container .left-fwrapper .left-fwrapper-description a p:hover{
							background: #333;
							}

.main .goals-container{
	width:100%;
	margin:0px 0px;
	padding:50px 0px;
	float:left;
	border-bottom: 5px solid #359ac8;
	border-top: 5px solid #359ac8;
	}
	.main .goals-wrapper{
		width:80%;
		margin:25px auto;
		padding:0px;
		}
	.main .goals-container .goals-wrapper .goals-container-leftcontaint{
		width: 50%;
        margin: 0px;
		padding:0px;
		float:left;
		display:inline-block;
		}
		.main .goals-container .goals-wrapper .goals-container-leftcontaint p{
			font:40px helvetica;
			color:#359ac8;
			text-transform:uppercase;
			text-align:left;
			font-weight:lighter;
			}
			.main .goals-container .goals-wrapper .goals-container-leftcontaint p span{
			font:70px helvetica;
			color:#359ac8;
			text-transform:uppercase;
			text-align:left;
			font-weight:bold;
			} 
			
				.main .goals-container .goals-wrapper .goals-container-leftcontaint li{
					display:inline-block;
					margin:0px;
					padding:5px 3px;
					width:auto;
					}
					.main .goals-container .goals-wrapper .goals-container-leftcontaint li i{
						color:#359ac8;}
					.main .goals-container .goals-wrapper .goals-container-leftcontaint li p{
						font:12px Arial, Helvetica, sans-serif;
						color:#000;
						}
		.main .goals-container .goals-wrapper .goals-container-rightcontaint{
				float:left;
				width:40%;
				margin:0px 50px;
				padding:0px;
				}
			.main .goals-container .goals-wrapper .goals-container-rightcontaint img{
				width:100%;
				margin:0px;
				padding:0px;
				}				
						
.main .clients-logos{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	}
	.main .clients-logos .slide-holder{
		width:90%;
		margin:0px auto;
		padding:10px 0px 20px;
		}
		.main .clients-logos .slide-holder .client-heading {
		    text-align:center;
			margin:0px;
			padding:0px;
			font:35px helvetica;
			font-weight:bold;
			color:#359ac8;
		}
		.main .clients-logos .slide-holder .image-holder{
			margin:0px;
			padding:10px 0px;
			}
			.main .clients-logos .slide-holder .image-holder img{
				padding:0px 3px;}						
						
						
						
.main .client-side{
	width:100%;
	margin:0px;
	padding:30px 0px;
	float:left;
	background-color:#f2f2f2;
	}
	.main .client-side .client-review{
		width: 1040px;
        margin: 0px auto;
        padding: 0px 0px;
		}
		.main .client-side .client-review .client-heading{
			text-align:center;
			margin:0px;
			padding:0px;
			font:35px helvetica;
			font-weight:bold;
			color:#359ac8;
			}
			.main .client-side .client-review p{
				font:18px helvetica;
				text-align:center;
				color:#232121;
				word-spacing:3px;
				margin:0px;
				padding:0px 0px 10px;
				font-weight:bold;
				}
		.main .client-side .client-review .client-description{
			width:520px;
			display:inline-block;
			margin:0px;
			padding:0px;
			float:left;
			}
			.main .client-side .client-review .client-description .client-pics{
				display:inline;
				margin:15px 15px;
				padding:0px;
				width:140px;
				float:left;
				
				}
				.main .client-side .client-review .client-description .client-pics img{
					width:100%;
					margin:0px;
					padding:0px;
					}
					.main .client-side .client-review .client-description .quote{
						width: 340px;
                        margin: 0px 0px 20px;
                        padding: 0px;
                        background: #fff;
                        height: auto;
                        display: inline;
                        position: relative;
                        top: 15px;
                        float: left;
						height:250px;
						}
						.main .client-side .client-review .client-description .quote p{
							margin:5px 10px;
							padding:0px 15px;
							width:auto;
							font:12px helvetica;
							line-height: 20px;
                            text-align: justify;
							border-left: 5px solid;
							word-spacing: 1px;
							}
							.main .client-side .client-review .client-description .quote span{ width:98%; margin:0px; padding:0px; float:right;}
							.main .client-side .client-review .client-description .quote .fbar{margin:37px 0px 0px;}
								.main .client-side .client-review .client-description .quote .parag{margin:18px 0px 0px;}
							.main .client-side .client-review .client-description .quote span p{border:none;}
							.main .client-side .client-review .client-description .quote span p strong{
								border:none;
								font:12px Georgia, "Times New Roman", Times, serif;
								text-transform:uppercase;
								font-weight:bold;}
.main .last-containt{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	border-bottom: 5px solid #359ac8;
	}
	.main .last-containt .last-containt-wrapper{
		width:90%;
		margin:0px auto;
		padding:30px 0px;
		}
		.main .last-containt .last-containt-wrapper h1{
			text-align:center;
			font-size:35px;
			margin:0px;
			padding:0px;
			font-weight:bold;
			color:#359ac8;
			text-transform:uppercase;
			} 
			.main .last-containt .last-containt-wrapper table{
				width:100%;
				margin:0px;
				padding:10px 0px;
				}
				.main .last-containt .last-containt-wrapper table tr{
					margin:0px;
					padding:10px 0px;
					}
					.main .last-containt .last-containt-wrapper table tr td{
						margin:0px;
						padding:10px 0px;
						}
						.main .last-containt .last-containt-wrapper .mobile-table{display:none;}

footer{
	width:100%;
	margin:0px;
	padding:0px;
	background:url(../img/footer.png) center no-repeat;
	background-size:cover;
	float:left;
	}
	footer .footer-container{
		width:100%;
		margin:15px auto;
		padding:0px;
		}
		footer .footer-container .marketing-description-left{
			width: 455px;
            float: left;
            margin: 0px;
            padding: 0px 80px 6px;
		}	
		footer .footer-container .marketing-description-left h1{
			width:80%;
			margin:0px;
			padding:5px 0px;
			font:15px helvetica;
			font-weight:bold;
			border-bottom:2px solid #fff;
			text-transform:uppercase;
			text-align:left;
			color:#fff;
			float:left;
			}
			footer .footer-container .marketing-description-left p{
				text-align:justify;
				font:12px helvetica;
				color:#fff;
				padding:10px 0px;
				float:left;
				}
				footer .footer-container .marketing-description-left .social-foot{
					float:left;
					margin:0px;
					padding:0px;
					width:auto;
					}
					footer .footer-container .marketing-description-left .social-foot li{
						display:inline-block;
						margin:0px;
						padding:0px 2px;
						width:25px;
						}
						footer .footer-container .marketing-description-left .social-foot li a{
							text-decoration:none;
							margin:0px;
							padding:0px;
							}footer .footer-container .marketing-description-left .social-foot li a img{
								width:100%;
								margin:0px;
								padding:0px;
								}
		footer .footer-container .facebook-conatiner{
			width:340px;
			margin:0px 30px;
			padding:0px 25px;
			float:left;
			display:inline-block
			}						
		footer .footer-container .marketing-description-right{
			width: 298px;
            float: left;
            margin: 0px 80px;
            padding: 0px 5px;
		}	
		  footer .footer-container .marketing-description-right h1{
			width:60%;
			margin:0px;
			padding:0px 0px;
			font:15px helvetica;
			font-weight:bold;
			border-bottom:2px solid #fff;
			text-transform:uppercase;
			text-align:left;
			color:#fff;
			float:left;
			}
			footer .footer-container .marketing-description-right h2{
			width:60%;
			margin:0px;
			padding:10px 0px 0px;
			font:13px helvetica;
			font-weight:bold;
			text-transform:uppercase;
			text-align:left;
			color:#fff;
			float:left;
				}
				footer .footer-container .marketing-description-right p{
				text-align:left;
				font:12px helvetica;
				color:#fff;
				padding:3px 0px 0px;
				float: left;
                width: 75%;
					}
		footer .sitemap{
			width:100%;
			margin:13px auto;
			padding:0px;
			background:#333;
			height:50px;
			float:left;
			opacity:0.7;
			}
			footer .sitemap .sitemap-wrapper{
				width:80%;
				margin:0px auto;
				padding:0px;
				}
			footer .sitemap p{
				margin:0px;
				padding:18px 0px;
				text-align:center;
				color:#fff;
				font:12px helvetica;	
				}
/*-----------------------------------------------------------------------content-management-page------------------------------------------*/
  .main .management-wrapper{
	  width:100%;
	  margin:0px;
	  padding:0px;
	  float:left;
	  }
	  .main .management-wrapper .image-wrapper{
		  width:600px;
		  margin:0px auto;
		  padding:0px;
		  }
	  .main .management-wrapper .image-wrapper img{
		  width:100%;
		  margin:0px;
		  padding:0px 0px 15px;
		  text-align:center;
		  }
		  .main .management-wrapper h1{
			  font:22px helvetica;
			  color:#1b83a6;
			  text-align:center;
			  margin:0px;
			  padding:0px 0px 15px;
			  font-weight:bold;
			  text-transform:uppercase;
			  }
			  .main .management-wrapper p{
				  text-align:center;
				  margin:0px;
				  padding:0px 0px 70px;
				  }
/*-----------------------------------------------------------------------mobile-marketing-page------------------------------------------*/
.main .management-wrapper .mobmarket-wrapper{
		  width:300px;
		  margin:0px auto;
		  padding:0px;
		  }
	  .main .management-wrapper .mobmarket-wrapper img{
		  width:100%;
		  margin:0px;
		  padding:0px 0px 15px;
		  text-align:center;
		  }
/*-----------------------------------------------------------------------orm-page------------------------------------------*/		  
.main .management-wrapper .orm-wrapper{
		  width:480px;
		  margin:0px auto;
		  padding:0px 0px 40px;
		  }
	  .main .management-wrapper .orm-wrapper img{
		  width:100%;
		  margin:0px;
		  padding:0px 0px 15px;
		  text-align:center;
		  }
/*-----------------------------------------------------------------------sem-page------------------------------------------*/	
		.main .management-wrapper .sem-wrapper{
		  width:370px;
		  margin:0px auto;
		  padding:0px 0px 50px 0px;
		  }	
		  .main .management-wrapper .sem-wrapper img{ width:100%;}
/*-----------------------------------------------------------------------seo-page------------------------------------------*/	
		.main .management-wrapper .seo-wrapper{
		  width:400px;
		  margin:0px auto;
		  padding:0px 0px 50px 0px;
		  }	
/*-----------------------------------------------------------------------socialmarket-page------------------------------------------*/	
		  .main .management-wrapper .socialmarket-wrapper{
		  width:520px;
		  margin:0px auto;
		  padding:0px 0px 50px 0px;
		  }	
		  .main .management-wrapper .socialmarket-wrapper img{ width:100%;}
/*------------------------------------------------------------------------work-----------------------------------------------*/	
.main .work-spotlight{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	
	}
	.main .work-spotlight .logo{
		float:left;
		margin:15px 50px;
		padding:0px;
		width:170px;
		}
		.main .work-spotlight .logo a{
			text-decoration:none;
			margin:0px;
			padding:0px;
			}
		.main .work-spotlight .logo a img{
			width:100%;
			margin:0px;
			padding:0px;
			} 	  
.main .work-container{
	width:100%;
	margin:0px;
	padding:0px;
	float:left
	}
	
	.main .work-container h1{
		 font:16px helvetica;
		 color:#1b83a6;
		 text-align:center;
		 margin:0px ;
		 padding:30px 0px 0px 0px;
		 text-transform:uppercase;
		 font-weight:bold;
		 }
		 .main .work-container .work-wrapper{
		width:100%;
		margin:20px 0px;
		padding:0px;
		float:left;
		}
		 .main .work-container .work-wrapper li{
			 display: inline-block;
             margin: 0px 2px;
             padding: 4px 4px;
             width: 33%;
             float: left;
			 }
			 .main .work-container .work-wrapper li a{
				 text-decoration:none;
				 margin:0px;
				 padding:0px;
				 }	
				 .main .work-container .work-wrapper li a img{
					 width:100%;
					 margin:0px;
					 padding:0px;
					 }				
/*------------------------------------------------------------------------contact-page-----------------------------------------------*/	
.main .contact-spotlight{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	
	}
	.main .contact-spotlight .logo{
		float:left;
		margin:15px 50px;
		padding:0px;
		width:170px;
		}
		.main .contact-spotlight .logo a{
			text-decoration:none;
			margin:0px;
			padding:0px;
			}
		.main .contact-spotlight .logo a img{
			width:100%;
			margin:0px;
			padding:0px;
			} 	
.main .contact-container{
	width:100%;
	margin:30px 0px;
	padding:0px;
	float:left;
	}
	.main .contact-container .contact-wrapper{
		width:45%;
		margin:0px;
		padding:0px;
		float:left;
		}
		.main .contact-container .contact-wrapper .contact-form{
			width:64%;
			float:right;
			margin:50px 0px;
			padding:0px;
			background:#474747;
			border-radius:8px;
			}
			.main .contact-container .contact-wrapper .contact-form p{
				font: 26px helvetica;
                color: #fff;
                margin: 30px 90px 0px;
                padding: 0px 0px 2px;
                text-align: center;
                border-bottom: 1px solid #359ac8;
		    }
			.main .contact-container .contact-wrapper .contact-form h1{
				text-align:center;
				margin:0px;
				padding:0px;
				font:22px helvetica;
				color:#fff;
				}
			.main .contact-container .contact-wrapper .contact-form input{
				width: 340px;
                height: 45px;
                margin: 2px 28px 20px;
                padding: 0px 5px;
				border-radius: 11px;
                border: none;
			  }
				.main .contact-container .contact-wrapper .contact-form textarea{
					width: 340px;
                height: 112px;
                margin: 20px 28px;
                padding: 20px 10px;
				border-radius: 38px;
                border: none;
					}
				.main .contact-container .contact-wrapper .contact-form .send-button{
						width:100px;
						height:25px;
						margin: 4px 145px;
                                                padding: 0px;

						}
				.main .contact-container .contact-wrapper .contact-form .checkbox-dec{
					text-align:center;
					font:15px helvetica;
					color:#fff;
					border:none;
					margin:0px;
					padding:0px;
					}	
				.main .contact-container .contact-wrapper .contact-form select{
					width:335px;
					height:40px;
					margin:0px 30px;
					padding:0px;
					border:none;
					border-radius:3px;
					}
					.main .contact-container .contact-image-wrapper{
						width:42%;
						margin:60px 52px;
						padding:0px;
						float:left;
						}
						.main .contact-container .contact-image-wrapper  img{
						width:100%;
						margin:0px;
						padding:0px;
						}
						.main .contact-container .contact-image-wrapper .map-container{
							width:100%;
							height:400px;
							margin:120px 0px;
							padding:0px;
							}
  #spot-image{
	  width:100%;
	  margin:0px;
	  padding:0px;
	  float:left;
	  }
	  #spot-image .light-image{
		  width:600px;
		  margin:0px auto;
		  padding:0px;
		  }	
	  	#spot-image .light-image > img{
			width:100%;
			margin:0px;
			padding:0px;
			text-align:center;
			}		
/*------------------------------------------------------------------------about-page-----------------------------------------------*/	
.main .about-spotlight{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	
	}
	.main .about-spotlight .logo{
		float:left;
		margin:15px 50px;
		padding:0px;
		width:170px;
		}
		.main .about-spotlight .logo a{
			text-decoration:none;
			margin:0px;
			padding:0px;
			}
		.main .about-spotlight .logo a img{
			width:100%;
			margin:0px;
			padding:0px;
			} 				
.main .about-container{
	width:100%;
	margin:20px 0px; 
	padding:0px;
	float:left;
	}
	.main .about-container p{
		text-align:center;
		margin:50px 0px;
		padding:0px;
		font:20px helvetica;
		color:#262626;
		letter-spacing:1px;
		word-spacing:1px;
		line-height:40px;
		}			  
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 1710px) and (max-width: 2500px) {
	body{
		background:#fff;	
		overflow-x:hidden;
	}
	.main .feature-container .left-fwrapper .left-fwrapper-description p{
	    margin: 0px 60px;
	}
	.main .feature-container .left-fwrapper .left-fwrapper-description a p{
		    width: 14%; margin:10px 55px;}
			.main .feature-container .right-fwrapper .right-fwrapper-description a p{width: 14%;}
			footer .footer-container .facebook-conatiner{
				    margin: 0px 80px; padding: 0px 0px;}
		.main .contact-container .contact-wrapper .contact-form textarea{
			    width: 440px;
                height: 130px;
                margin: 20px 28px;
                padding: 20px 10px;
				border-radius: 38px;
                border: none;
					}
		.main .contact-container .contact-wrapper .contact-form input{
				width: 440px;
                height: 45px;
                margin: 2px 28px 20px;
                padding: 0px 5px;
				border-radius: 11px;
                border: none;
			  }	
			  .main .contact-container .contact-wrapper .contact-form {
    width: 60%;
    float: right;
    margin: 50px 0px;
    padding: 0px;
    background: #474747;
    border-radius: 8px;
}
		
						
}

@media only screen and (min-width: 1510px) and (max-width: 1700px) {
	body{
		background:#fff;	
	}
	.main .feature-container .left-fwrapper .left-fwrapper-description p{
	    margin: 0px 50px;
	}
	.main .feature-container .left-fwrapper .left-fwrapper-description a p{
		    width: 14%; margin:10px 48px;}
			.main .feature-container .right-fwrapper .right-fwrapper-description a p{width: 14%;}	
}	
@media only screen and (min-width: 1440px) and (max-width: 1500px) {
	body{
		background:#fff;	
	}	
	.main .feature-container .left-fwrapper .left-fwrapper-description p{
	    margin: 0px 45px;
	}	
}

@media only screen and (max-width: 1280px) {
	body{
		background:#fff;	
		overflow-x:hidden;
	}
	.main .goals-container .goals-wrapper .goals-container-leftcontaint{ width:46%; margin: 0px 0px 0px 2px;}
	.main .goals-container .goals-wrapper .goals-container-rightcontaint{width: 40%; margin: 0px 50px; padding: 0px;}
	footer .footer-container .facebook-conatiner {margin: 0px 3px; padding: 0px 0px;}
	footer .footer-container .marketing-description-left{width: 309px; padding:0px 16px 6px; margin:0px;}
	footer .footer-container .marketing-description-right{width: 298px; margin: 0px 14px; padding: 0px 5px;}
   .main .contact-container .contact-wrapper{width: 87%; margin: 0px 50px;}
	.main .contact-container .contact-wrapper .contact-form{ width:100%; text-align:center;}
	.main .contact-container .contact-image-wrapper{ width:100%; margin: 0px 85px;}
	.main .contact-container .contact-image-wrapper .map-container{margin:0px;}
	.main .contact-container .contact-wrapper .contact-form input{ width:500px;}
	.main .contact-container .contact-wrapper .contact-form textarea{ width:500px;}
	.main .work-container .work-wrapper li{ width:32%;}
	#line-chart{
		position:relative;
		bottom:40px;}
	}
	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	body{
		background-x:#fff;
		overflow-x:hidden;	
	}	
	.main .spotlight .logo {float:left; margin: 0px 8px; padding: 0px; width: 141px;}
	#nav{width: 75%; float: left; margin: 45px 0px 0px 30px; padding: 0px;}
	.main .containt-wrapper .intro-wrapper{ width:100%;}
	.main .feature-container .left-fwrapper .left-fwrapper-description li:first-child{ width:85%;}
	.main .feature-container .left-fwrapper .left-fwrapper-description a p{ width:28%; }
	.main .feature-container .left-fwrapper .left-fwrapper-description p{width:65%;}
	.main .feature-container .right-fwrapper .right-fwrapper-description li{ width:14%;}
	.main .feature-container .right-fwrapper .right-fwrapper-description a p{ width:28%;}
	.main .goals-wrapper{ width:100%;}
	.main .goals-container .goals-wrapper .goals-container-leftcontaint{ width:46%; margin: 0px 0px 0px 2px;}
	.main .goals-container .goals-wrapper .goals-container-rightcontaint{ width:50%; margin: 0px 0px 0px 28px;}
	.main .client-side .client-review{ width:100%;}
	.main .client-side .client-review .client-description{width: 383px;}
	.main .client-side .client-review .client-description .client-pics{margin: 20px 15px 0px;}
	.main .last-containt .last-containt-wrapper{ width:100%;}
	footer .footer-container .facebook-conatiner{margin: 0px 20px;}
	footer .footer-container .marketing-description-left{width: 390px; padding: 9px 48px 6px;}
	footer .footer-container .marketing-description-right{margin: 15px 14px;}
	/* about-page */
	.main .about-spotlight .logo{float:left; margin: 0px 8px; padding: 0px; width: 141px;}
	/* conract-page */
	.main .contact-spotlight .logo{float:left; margin: 0px 8px; padding: 0px; width: 141px;}
	.main .contact-container .contact-wrapper{width: 87%; margin: 0px 50px;}
	.main .contact-container .contact-wrapper .contact-form{ width:100%; text-align:center;}
	.main .contact-container .contact-image-wrapper{ width:100%; margin: 0px 85px;}
	.main .contact-container .contact-image-wrapper .map-container{margin:0px;}
	.main .work-spotlight .logo{float:left; margin: 0px 8px; padding: 0px; width: 141px;}
	.main .work-container .work-wrapper li{ width:32%;}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	body{
		background:#adadad;	
	}	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	body{
		background:#807d7e;	
	}	
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	body{
		background:#ffffff;	
		overflow-x:hidden;
	}
	.container{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	}
    #nav
    {
        position: relative;
		width:70%;
		float:left;
		margin:0px 5px;
		padding:0px;
		z-index:1;
		bottom:55px;
    }
        #nav > a
        {
        }
        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type
        {
            display: block;
        }
 
    /* first level */
 
    #nav > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		background:#fff;
		z-index:1;
    }
        #nav:target > ul
        {
            display: block;
        }
        #nav > ul > li
        {
            width: 100%;
            float: none;
			padding: 10px 10px;
        }
 
    /* second level */
 
    #nav li ul
    {
        position: static;
		z-index:1;
		height:265px;
    }	
	.main .intro-header .contact-detail { margin:12px 0px;}
	.main .intro-header .social-wrraper{ float:left; margin:12px 0px 12px 35px; width:40%;}
	.main .spotlight .logo{width:107px; float:right; margin:13px 10px;}
	.main .containt-wrapper .intro-wrapper{ width:100%;}
	.main .containt-wrapper .intro-wrapper .intro{ font-size:23px; padding: 30px 0px 1px;}
.main .containt-wrapper .intro-wrapper h4 { font-size:15px;}
.main .feature-container { width: 100%; margin: 0px;padding: 12px 0px 10px; float: left; position: relative; bottom: 45px; background: none;}
.main .feature-container .left-fwrapper {float: left; width: 50%; margin:3px 0px; padding: 0px; display: inline;}
.main .feature-container .left-fwrapper .left-fwrapper-description {display: block; margin: 0px 0px 13px; padding: 0px; float: left; width: 100%;}
.main .feature-container .left-fwrapper .left-fwrapper-description li:first-child { float: left; width: 70%; font-size: 12px; display: block;}
.main .feature-container .left-fwrapper .left-fwrapper-description li {text-align: right; margin:0px; padding:0px;}
.main .feature-container .left-fwrapper .left-fwrapper-description li:last-child {float: left; width: 19%;}
.main .feature-container .left-fwrapper .left-fwrapper-description p{font: 10px helvetica; margin: 0px 11px; padding: 0px; text-align:right;     width:66%;}
.main .feature-container .left-fwrapper .left-fwrapper-description a p{width: 40%; float:right; margin:6px 32px 10px; padding:0px;}
#line-chart {position: relative; bottom: 0px;}
.main .feature-container .right-fwrapper{float: left; width: 50%; margin: 0px; padding: 0px; position: relative; display: inline-block;}
.main .feature-container .right-fwrapper .right-fwrapper-description {display: block; margin:0px 0px 15px; padding: 0px; float: left; width: 87%;}
.main .feature-container .right-fwrapper .right-fwrapper-description li{width: 64%; float: right; font-size: 13px; margin:0px; padding:0px;}
.main .feature-container .right-fwrapper .right-fwrapper-description li:last-child { float: right; width: 30px; font-size: 20px;padding: 0px;}
.main .feature-container .right-fwrapper .right-fwrapper-description p {font: 10px helvetica; margin: 0px 58px; padding: 0px; text-align: left; width: 85%;}
.main .feature-container .right-fwrapper .right-fwrapper-description a p {width: 49%; float: left; margin: 6px 40px; padding:0px;}
.main .goals-container .goals-wrapper .goals-container-leftcontaint p span{font-size:55px;}
.main .goals-container .goals-wrapper .goals-container-leftcontaint p {font:32px helvetica;}
.main .goals-container .goals-wrapper .goals-container-leftcontaint { width: 100%}
.main .goals-container .goals-wrapper .goals-container-leftcontaint li { display: inline-block; margin: 0px; padding: 0px 3px; width: 100%;}
.main .goals-container .goals-wrapper .goals-container-rightcontaint {float: left; width: 100%; margin: 5px auto; padding: 0px;}	
.main .client-side .client-review .client-description{ width:100%; margin:0px 0px 5px;}
.main .client-side .client-review .client-description .quote{width:100%; margin: 0px 0px 16px; height:220px; position:relative; top:0;}
.main .client-side .client-review .client-description .quote p{ width:100%;}
.main .client-side .client-review .client-description .client-pics{ margin:0px 1px;}
.main .client-side .client-review .client-description .quote .fbar{ margin:10px 0px 0px;}
.main .client-side .client-review{ width:100%;}
.main .client-side .client-review .client-heading{ padding:0px 0px 10px; font-size:30px;}
footer .footer-container .facebook-conatiner{ width:320px; margin:10px 30px; padding:0px;}
footer .footer-container .marketing-description-left {width: 100%; float: left; margin: 0px; padding: 0px 52px 6px;}
footer .footer-container .marketing-description-left p{ width:100%;}
footer .footer-container .marketing-description-right {width: 100%; float: left; margin: 0px 46px; padding: 0px 5px;}
.main .last-containt .last-containt-wrapper table{display:none;}
.main .last-containt .last-containt-wrapper .mobile-table{display:block;}
.main .last-containt .last-containt-wrapper .mobile-table tr td{ width:310px; display:block;}
#spot-image .light-image{ width:100%;}
.main .about-spotlight .logo{width:107px; float:right; margin:13px 10px;}
.main .contact-spotlight .logo{float: right; margin: 0px 8px; padding: 0px; width: 63px; display:inline-block;}
	.main .contact-container .contact-wrapper{ width:100%;}
	.main .contact-container .contact-wrapper .contact-form input{ width:300px;}
	.main .contact-container .contact-wrapper .contact-form textarea{ width:300px;}
	.main .contact-container .contact-wrapper{ margin:0px;}
	.main .contact-container .contact-image-wrapper{ margin:0px}
	.main .work-spotlight .logo{float: right; margin: 0px 8px; padding: 0px; width: 63px; display:inline-block;}
	.main .management-wrapper .image-wrapper{ width:100%;}
	.main .management-wrapper .socialmarket-wrapper{ width:100%;}
	.main .management-wrapper .orm-wrapper{ width:100%;}

		}
		
		@media only screen and ( max-width:360px ) /* 668 */
{
	body{ background:#fff; overflow-x:hidden;}	
	#ninja-slider{ position:relative; bottom:33px;}
.main .intro-header .contact-detail {float: left; margin: 12px 0px; padding: 0px; width: 50%;}
.main .intro-header .social-wrraper {float: right; margin: 8px 0px; padding: 0px; width: auto;}
.main .spotlight .logo { float: right; margin: 0px 8px; padding: 0px; width: 63px; display:inline-block;}
.main .intro-header .social-wrraper a {margin: 14px 0px 0;}
.main .containt-wrapper{position: relative; bottom: 40px;}
.main .containt-wrapper .intro-wrapper { width:100%;}
.main .containt-wrapper .intro-wrapper .intro{ font-size:23px; padding: 30px 0px 1px;}
.main .containt-wrapper .intro-wrapper h4 { font-size:15px;}
.main .feature-container { width: 100%; margin: 0px;padding: 12px 0px 10px; float: left; position: relative; bottom: 45px; background: none;}
.main .feature-container .left-fwrapper {float: left; width: 50%; margin:3px 0px; padding: 0px; display: inline;}
.main .feature-container .left-fwrapper .left-fwrapper-description {display: block; margin: 0px 0px 0px; padding: 0px; float: left; width: 100%;}
.main .feature-container .left-fwrapper .left-fwrapper-description li:first-child { float: left; width: 70%; font-size: 12px; display: block;}
.main .feature-container .left-fwrapper .left-fwrapper-description li {text-align: right; margin:0px; padding:0px;}
.main .feature-container .left-fwrapper .left-fwrapper-description li:last-child {float: left; width: 19%;}
.main .feature-container .left-fwrapper .left-fwrapper-description p{font: 10px helvetica; margin: 0px 9px; padding: 0px; text-align:right;     width:70%;}
.main .feature-container .left-fwrapper .left-fwrapper-description a p{width: 40%; float:right; margin:6px 32px 10px; padding:0px;}
#line-chart {position: relative; bottom: 0px;}
.main .feature-container .right-fwrapper{float: left; width: 50%; margin: 0px; padding: 0px; position: relative; display: inline-block;}
.main .feature-container .right-fwrapper .right-fwrapper-description {display: block; margin: 0px; padding: 0px; float: left; width: 87%;}
.main .feature-container .right-fwrapper .right-fwrapper-description li{width: 64%; float: right; font-size: 13px; margin:0px; padding:0px;}
.main .feature-container .right-fwrapper .right-fwrapper-description li:last-child { float: right; width: 30px; font-size: 20px;padding: 0px;}
.main .feature-container .right-fwrapper .right-fwrapper-description p {font: 10px helvetica; margin: 0px 57px; padding: 0px; text-align: left; width: 73%;}
.main .feature-container .right-fwrapper .right-fwrapper-description a p {width: 49%; float: left; margin: 6px 40px; padding:0px;}
.main .goals-container .goals-wrapper .goals-container-leftcontaint p span{font-size:55px;}
.main .goals-container .goals-wrapper .goals-container-leftcontaint p {font:32px helvetica;}
.main .goals-container .goals-wrapper .goals-container-leftcontaint { width: 100%}
.main .goals-container .goals-wrapper .goals-container-leftcontaint li { display: inline-block; margin: 0px; padding: 0px 3px; width: 100%;}
.main .goals-container .goals-wrapper .goals-container-rightcontaint {float: left; width: 100%; margin: 5px auto; padding: 0px;}	
.main .client-side .client-review .client-description{ width:100%; margin:0px 0px 5px;}
.main .client-side .client-review .client-description .quote{width:100%; margin: 0px 0px 16px; height:220px; position:relative; top:0;}
.main .client-side .client-review .client-description .quote p{ width:100%;}
.main .client-side .client-review .client-description .client-pics{ margin:0px 1px;}
.main .client-side .client-review .client-description .quote .fbar{ margin:10px 0px 0px;}
.main .client-side .client-review{ width:100%;}
.main .client-side .client-review .client-heading{ padding:0px 0px 10px; font-size:30px;}
footer .footer-container .facebook-conatiner{ width:320px; margin:4px 0px; padding:0px;}
footer .footer-container .marketing-description-left {width: 328px; float: left; margin: 0px; padding: 0px 3px 6px;}
footer .footer-container .marketing-description-left p{ width:100%;}
footer .footer-container .marketing-description-right {width: 298px; float: left; margin: 0px 2px; padding: 0px 5px;}
.main .last-containt .last-containt-wrapper table{display:none;}
.main .last-containt .last-containt-wrapper .mobile-table{display:block;}
.main .last-containt .last-containt-wrapper .mobile-table tr td{ width:260px; display:block;}

	.container{
	width:100%;
	margin:0px;
	padding:0px;
	float:left;
	}
    #nav
    {
        position: relative;
		width:70%;
		float:left;
		margin:0px 5px;
		padding:0px;
		z-index:1;
		top:0px;
    }
        #nav > a
        {
        }
        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type
        {
            display: block;
        }
 
    /* first level */
 
    #nav > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		background:#fff;
		z-index:1;
    }
        #nav:target > ul
        {
            display: block;
        }
        #nav > ul > li
        {
            width: 100%;
            float: none;
			padding: 10px 10px;
        }
 
    /* second level */
 
    #nav li ul
    {
        position: static;
    }
	.main .management-wrapper .seo-wrapper{ width:100%;}
	.main .management-wrapper .seo-wrapper img{ width:100%;}
	.main .management-wrapper .socialmarket-wrapper{ width:100%;}
	.main .management-wrapper .mobmarket-wrapper{ width:100%;}
	.main .management-wrapper .sem-wrapper{ width:100%;}
	.main .management-wrapper .orm-wrapper{ width:100%;}
	#spot-image .light-image{ width:100%;}
	.main .work-spotlight .logo{float: right; margin: 0px 8px; padding: 0px; width: 63px; display:inline-block;}
	.main .contact-spotlight .logo{float: right; margin: 0px 8px; padding: 0px; width: 63px; display:inline-block;}
	.main .contact-container .contact-wrapper{ width:100%;}
	.main .contact-container .contact-wrapper .contact-form input{ width:300px; margin: 2px 10px 20px;}
	.main .contact-container .contact-wrapper .contact-form textarea{ width:300px; margin: 20px 10px;}
	.main .contact-container .contact-wrapper{ margin:0px;}
	.main .contact-container .contact-image-wrapper{ margin:0px}
	.main .contact-container .contact-wrapper .contact-form p{margin: 30px 54px 0px;}
	.main .about-spotlight .logo{float: right; margin: 0px 8px; padding: 0px; width: 63px; display:inline-block;}
	.main .management-wrapper .image-wrapper{width: 100%;}
}
@media only screen and (max-width:500px){

    #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager {
        display:none;
    }
}

@media only screen and (max-width:1100px){    
    #ninja-slider .caption {
        font-size:30px;
    }
}

@media only screen and (max-width:700px){    
    #ninja-slider .caption {
        font-size:15px;
    }
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

<!--------------------------------------------------------------------slick-css----------------------------------------------------------->
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 57px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 62px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -43px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '<';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -30px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '>';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1280px) 
  and (orientation: portrait)  {
  .slick-next
{
    right: -39px;
}
  
  }
  
  @media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1280px) 
  and (orientation: landscape){	
   .slick-next
{
    right: -42px;
}
  
  }
  
  
  

  
  
  /* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}



  /*Big Slider */
  
  
  /* Slicebox Style */



.sb-slider {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	width: 55%;
	list-style-type: none;
	padding: 0;
	height:15%;
}

.sb-slider li {
	margin: 0;
	padding: 0;
	display: none;
}

.sb-slider li > a {
	outline: none;
}

.sb-slider li > a img {
	border: none;
}

.sb-slider img {
	max-width: 100%;
	display: block;
}

.sb-description {
	padding: 20px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	z-index: 1000;
	position: absolute;
	background: #CBBFAE;
	background: rgba(190,176,155, 0.4);
	border-left: 4px solid rgba(255,255,255,0.7);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);	
	opacity: 0;
	color: #fff;

	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-o-transition: all 200ms;
	-ms-transition: all 200ms;
	transition: all 200ms;
}

.sb-slider li.sb-current .sb-description {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);	
	opacity: 1;
}

.sb-slider li.sb-current .sb-description:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);	
	background: rgba(190,176,155, 0.7);
}

.sb-perspective {
	position: relative;
}

.sb-perspective > div {
	position: absolute;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-backface-visibility : hidden;
	-moz-backface-visibility : hidden;
	-o-backface-visibility : hidden;
	-ms-backface-visibility : hidden;
	backface-visibility : hidden;
}

.sb-side {
	margin: 0;
	display: block;
	position: absolute;

	-moz-backface-visibility : hidden;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
@media only screen and (max-width: 767px) {
.sb-slider {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	width: 100%;
	list-style-type: none;
	padding: 0;
	height:15%;
}
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1280px) 
  and (orientation: portrait)  {
  
  .sb-slider {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	width: 90%;
	list-style-type: none;
	padding: 0;
	height:15%;
}
 }
  @media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1280px) 
  and (orientation: landscape){	
   .sb-slider {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	width: 75%;
	list-style-type: none;
	padding: 0;
	height:15%;
}
  }
 

@font-face {
    font-family: 'ralewayextralight';
    src: url('raleway-extralight-webfont.woff2') format('woff2'),
         url('raleway-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'ralewaylight';
    src: url('raleway-light-webfont.woff2') format('woff2'),
         url('raleway-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}