@import  "http://fonts.googleapis.com/css?family=Lato:300,400,700";
@import url("thumbnail-gallery.css");

/* For top menu and general styles */
@font-face {
    font-family: 'codropsicons';
    src: url(../fonts/codropsicons/codropsicons.eot);
    src: url(../fonts/codropsicons/codropsicons.eot?#iefix) format("embedded-opentype"),url(../fonts/codropsicons/codropsicons.woff) format("woff"),url(../fonts/codropsicons/codropsicons.ttf) format("truetype"),url(../fonts/codropsicons/codropsicons.svg#codropsicons) format("svg");
    font-weight: 400;
    font-style: normal;
}

*,:after,:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

html {
    font-size: 15px;
    padding: 0;
    margin: 0;
background-image : url(../images/bottom.jpg); 
background-repeat: no-repeat; 
background-position: left bottom;
}

body {
    font-family: 'Lato',Calibri,Arial,sans-serif;
    color: #89867e;
    font-size: 15px;
    padding: 0;
    margin: 0;
    background: #F9F9FB url(../images/top.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 100%;
}

#hm-intro {
	font-family: 'Fjalla One', sans-serif;
    color: #666666;
    font-size: 40px;
	text-align:center;
	padding-bottom:30px;
	padding-top:30px;
}

#hm-intro2 {
	font-family: 'Fjalla One', sans-serif;
    color: #C40062;
    font-size: 40px;
	text-align:center;
	padding-bottom:30px;
	padding-top:30px;
}

	
	#footer-contact {
	font-family: 'Fjalla One', sans-serif;
    color: #ffffff;
    font-size: 25px;
	text-align:center;
	padding-bottom:33px;
	padding-top:33px; }
	
	#services-header {
	font-family: 'Fjalla One', sans-serif;
    color: #000048;
    font-size: 65px;
	text-align:center;
	padding-bottom:33px;
	padding-top:33px; }

	
	#footer-links {
font-family: 'Abel', sans-serif;
    color: #999999;
    font-size: 14px;
	text-align:center;
	padding-bottom:14px;
	padding-top:14px;
	text-decoration:none;
}
#listen-think {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
    font-size: 40px;
	text-align:center;

}	

.btn-primary{
	font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
    font-size: 18px;
	text-align:center;
	padding-right:40px;
	padding-left:40px; }

#listen-think-sml {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
    font-size: 22px;
	text-align:center;
}	

#header-font {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #C40062;
    font-size: 30px;
	padding-bottom:40px;
	padding-top:40px;
}

#header-font-2 {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #666666;
    font-size: 30px;
	padding-bottom:40px;
	padding-top:40px;
}

#header-font-3 {
font-family: 'Abel', sans-serif;
    color: #222222;
    font-size: 25px;
	padding-bottom:40px;
	padding-top:40px;
	font-weight: 600;
}

#header-font-4 {
font-family: 'Abel', sans-serif;
    color: #CCCCCC;
    font-size: 25px;
	padding-bottom:40px;
	padding-top:40px;
	font-weight: 600;
}
#header-font-portfolio {
font-family: 'Abel', sans-serif;
    color: #00698C;
    font-size: 25px;
	padding-bottom:40px;
	padding-top:40px;
	font-weight: 600;
}




#why-choose-header{

    text-decoration: none;
    border-bottom: 1px solid #F58D3A;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:5px;
	padding-top:10px;
	text-align:center;}
	
#services-blue-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #3886D2;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}
#services-orange-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #F58D3A;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}
#services-green-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #0AA946;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}
#services-mink-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #BA8CA8;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}
#services-red-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #EB3C3F;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}
#services-brown-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #705C42;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}

#services-yellow-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #FDC51A;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}

#services-pink-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #F15E70;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}
#services-greyblue-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #7C98B0;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}
#services-teal-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #77CAC0;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}
#services-purple-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #7B83C1;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}
#services-lime-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #9CC73A;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}
#services-gold-header{	 
	  display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #C2B49A;
    margin-bottom: -1px;
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 25px;
	padding-bottom:2px;
	padding-top:10px;
}




	#services-description {
font-family: 'Abel', sans-serif;
    color: #999999;
    font-size: 17px;
	padding-top:14px;
}



#portfolio-font {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #333333;
    font-size: 20px;
	padding-bottom:10px;
	padding-top:10px;
	text-align:center;

}

#general-font {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #999999;
    font-size: 22px;
	padding-bottom:10px;
	padding-top:10px;
}	

#header-container {
    background: #f3f3f3 url('../images/top banner.png');
    background-repeat: no-repeat;
    background-position: center top;
    height: 100%;
}

#body-grey-container {
    background: #eeeeee url('../images/grid.png');
}
#body-light-grey-container {
    background: #eeeeee;
}
#body-blue-container {
    background: #9DD1EA url('../images/grid.png');
}

#body-dark-container {
    background: #333333 url('../images/grid.png');
}



#body-white-container {
    background: #ffffff;
}

.img-center {
    margin: auto;
    display: block;
    padding-top: 4px;
}

#no-padding {
    padding: 0;
}

#top-container {
    padding: 0;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #fff;
}

.main,.container > header {
    width: 100%;
    margin: 0 auto;
    padding: 2em;
}

.main {
    max-width: 82.667em;
}

.container > header {
    text-align: center;
    font-size: 16px;
    padding: 4em 2em 3em;
    background: rgba(0,0,0,0.01);
}

.container > header h1 {
    font-size: 2.625em;
    line-height: 1.3;
    margin: 0;
    font-weight: 300;
}

.container > header span {
    display: block;
    font-size: 60%;
    color: #ceccc6;
    padding: 0 0 .6em .1em;
}

/* Header Style */
.codrops-top {
    background: #fff;
    background: rgba(255,255,255,0.4);
    text-transform: uppercase;
    position: relative;
    width: 100%;
    font-size: .7em;
    line-height: 2.2;
}

.codrops-top a {
    padding: 0 1em;
    letter-spacing: .1em;
    color: #888;
    display: inline-block;
}

.codrops-top a:hover {
    background: rgba(255,255,255,0.9);
}

.codrops-top span.right {
    float: right;
}

.codrops-top span.right a {
    float: left;
    display: block;
}

.codrops-icon:before {
    font-family: 'codropsicons';
    margin: 0 4px;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
    content: "\e001";
}

.codrops-icon-prev:before {
    content: "\e004";
}

.codrops-icon-archive:before {
    content: "\e002";
}

.codrops-icon-next:before {
    content: "\e000";
}

.codrops-icon-about:before {
    content: "\e003";
}

@media screen and (max-width: 25em) {
    .codrops-icon span {
        display: none;
    }

    .container > header {
        font-size: 75%;
    }
}

/* The "tablet" and "mobile" version */
@media (max-width: 49.938em) {



}

/* CSS specific to the 2x3 columns version */
@media (min-width:32.5em) and (max-width: 49.938em) {
 
#hm-intro {
	font-family: 'Fjalla One', sans-serif;
    color: #999999;
    font-size: 30px;
	text-align:center;
	padding-bottom:20px;
	padding-top:20px;
}
#listen-think {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
    font-size: 38px;
	text-align:center;
	padding-bottom:30px;
	padding-top:30px;
}	

 #listen-think-sml {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
    font-size: 22px;
	text-align:center;
}
}

/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) {

 #hm-intro {
	font-family: 'Fjalla One', sans-serif;
    color: #999999;
    font-size: 25px;
	text-align:center;
	padding-bottom:15px;
	padding-top:15px;
}
#listen-think {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
    font-size: 35px;
	text-align:center;
	padding-bottom:30px;
	padding-top:30px;
}	
#listen-think-sml {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
    font-size: 20px;
	text-align:center;
}	


}


@media (max-width: 32.438em) {
  #hm-intro {
	font-family: 'Fjalla One', sans-serif;
    color: #999999;
    font-size: 22px;
	text-align:center;
	padding-bottom:10px;
	padding-top:10px;
}
#listen-think {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
    font-size: 25px;
	text-align:center;
	padding-bottom:30px;
	padding-top:30px;
}	
#listen-think-sml {
	font-family: 'Open Sans Condensed', sans-serif;
    color: #ffffff;
    font-size: 15px;
	text-align:center;
}	

}

/* Smooth Scrolling */
.scrolltop {
	display:none;
	width:100%;
	margin:0 auto;
	position:fixed;
	bottom:20px;
	right:10px;	
z-index: 1;
}

.scroll {
	position:absolute;
	right:20px;
	bottom:20px;
	background:#D06503;
	padding:0px;
	text-align: center;
	margin: 0 0 0 0;
	cursor:pointer;
	
}
.scroll:hover {
	background:#000000;
}
.scroll:hover .fa {
	padding-top:-10px;
}
.scroll .fa {
	font-size:1px;
	margin-top:-5px;
	margin-left:1px;
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s; 

}

/* End Smooth Scrolling */

#column-borders{
	border:1px solid #cecece;
	padding:30px;
}

#column-no-borders{
	border:0;
	padding:30px;
}#column-no-borders {
}

/* Form Styling */
#input {
	border: 2px solid #E0E0E0;
	height: 46px;
	margin: 10px 0 0 0;
	padding: 1%;
	font-size: 1.2em;
	line-height: 1.5em;
	color: #666666;
	letter-spacing: .01em;
	font-style: normal;
	font-weight: 300;
	width:95%;

}
#querybox {
	border: 2px solid #E0E0E0;

	margin: 10px 0 0 0;
	padding: 1%;
	font-size: 1.2em;
	line-height: 1.5em;
	color: #666666;
	letter-spacing: .01em;
	font-style: normal;
	font-weight: 300;
	width:97%;

}
#submit {
	display: block;
	border: 0;
	width: 25%;
	height: 60px;
	margin: 30px auto 0;
	background: #fff;
	color: #333;
	text-align: center;
	transition: background, color, .5s ease 0;
	border: 0;
	font-size: 1.2em;
	line-height: 1.5em;
	color: #333333;
	letter-spacing: .01em;
	font-style: normal;
	font-weight: 300;

}

#submit:hover {
	background: #DADADA;
	border: 1px #DADADA;
	color: #333333;
}
/* End Form Styling */


.fourth-effect .mask {
   position:absolute; /* Center the mask */
   top:50px;
   left:100px;
   cursor:pointer;
   border-radius: 50px;
   border-width: 50px;
   display: inline-block;
   height: 100px;
   width: 100px;
   border: 50px solid rgba(0, 0, 0, 0.7);
   box-sizing:border-box;
   opacity:1;
   visibility:visible;
   transform:scale(4);
   transition:all 0.3s ease-in-out;
}

.fourth-effect:hover .mask {
   opacity: 0;
   border:0px solid rgba(0,0,0,0.7);
   visibility:hidden;
}