/*
	Project Name: Konsultants
	Author Name: Aneesh Bhatnagar
	Author Website: www.aneeshbhatnagar.in

*/

/* FONTS */
@font-face {
	font-family: 'Opificio';
	src: url('../fonts/opificio.ttf')  format('truetype');
}

@font-face {
	font-family: 'OpificioBold';
	src: url('../fonts/opificio_bold.ttf')  format('truetype');
}


@font-face {
	font-family: 'ArialNarrow';
	src: url('../fonts/arial.ttf')  format('truetype');
}
@font-face{
	font-family: 'CalibriBold';
	src: url('../fonts/calibri.ttf')  format('truetype');
}

h1,h2,h3{
	font-family:'Opificio';
}

/* GLOBAL CLASSES */
*{
	margin:0;
	padding:0;
	border:0;
}

a{
	color:inherit;
	text-decoration:none;
}

div{
	display:block;
}

body{
	background:#000000;
	color:#FFFFFF;
}

body#white{
	background:#FFFFFF;
	color:#000000;
}

.float-l{
	float:left;
}

.float-r{
	float:right;
}

.clrfix{
	clear:both;
}

/* HEADER STYLING */

header#top-head{
	position:fixed;
	z-index:99999;
	top:0;
	left:0;
	background:#ffc20f;
	width:100%;
	height:90px;
}

header#top-head:after{
	clear:both;
}

#logo{
	margin-left:120px;
	width:auto;
	height:130px;
	display:inline-block;
	position:relative;
	z-index:999999;
}

.hire-link{
	width:120px;
	display:inline-block;
	position:relative;
	top:10px;
	left:25px;
	text-indent:-9999px;
	height:50px;
	background-position:0 0;
	background:url(../images/hire-us.png) no-repeat;
}

#top-nav{
	float:right;
	position:fixed;
	top:10px;
	right:60px;
	display:inline-block;
	list-style:none;
}

#top-nav li{
	display:inline;
}

.nav-link{
	width:52px;
	height:70px;
	margin-right:3px;
	display:inline-block;
	text-indent:-9999px;
	background-position:0 0;
	transition:all ease-in-out 0.3s;
}

.nav-link:hover, .hire-link:hover, .current-nav{
	background-position:0 -70px !important;
}

.home-link{
	background:url(../images/home.png) no-repeat;
}

.about-link{
	background:url(../images/about.png) no-repeat;
}

.clients-link{
	background:url(../images/clients.png) no-repeat;
}

.gallery-link{
	background:url(../images/gallery.png) no-repeat;
}

.services-link{
	background:url(../images/services.png) no-repeat;
}

/* Social Icons styling */

.social-icons{
	position:fixed;
	top:190px;
	left:-1px;
	z-index:99999;
}

.social{
	display:block;
	width:40px;
	height:100px;
	cursor:pointer;
}

.social-box{
	position:fixed;
	z-index:99999;
	left:45px;
	width:300px;
	height:auto;
	padding:20px 10px;
	background:rgba(0,0,0,0.9);
	text-align:center;
	font-family:'Opificio';
}

#call, #mail, #write{
	display:none;
}

.social-heading{
	color:#ffc20f;
	padding-bottom:5px;
	margin-bottom:10px;
	border-bottom:1px solid rgba(255,255,255,0.4);
}

.telephone{
	top:215px;
}

.call-detail{
	width:65%;
	margin:25px auto 0 auto;
	padding-bottom:10px;
	border-bottom:1px solid rgba(0,0,0,0.3);
	font-size:0.8em;
}

.call-detail h4{
	font-family:'CalibriBold';
	font-size:1.3em;
}
.mail{
	top:250px;
}

.write{
	top:250px;
}

#form1 input[type="text"], #form1 input[type="email"]{
	background:rgba(0,0,0,0.5);
	color:#888;
	padding:5px;
	margin-bottom:10px;
	width:70%;
}

#form1 textarea{
	background:rgba(0,0,0,0.5);
	color:#888;
	padding:5px;
	margin-bottom:10px;
	width:70%;
	height:90px;
}

#form1 input[type="button"]{
	width:30%;
	padding:5px;
	background:#ffc20f;
	font-weight:bold;
	float:right;
	margin-right:15%;
}

/* Content Styling */

.content{
	width:100%;
	height:calc(100% - 90px);
	display:block;
	background:#000000;
	position:absolute;
}

.home{
	top:90px;
}

.about{
	top:100%;
	background:#FFFFFF url(../images/about-page.jpg) no-repeat center center fixed;
	background-size:cover;
}

.services{
	top:calc(200% - 90px);
}

.filler1{
	top:calc(300% - 180px);
	background:#FFFFFF url(../images/filler1.jpg) no-repeat center center fixed;
	background-size:cover;
}

.gallery{
	background:#FFFFFF;
	top:calc(400% - 270px);
}

.filler2{
	top:calc(500% - 360px);
	background:url(../images/filler2.jpg) no-repeat center center fixed;
	background-size:cover;
}


.clients{
	background:#FFFFFF;
	top:calc(600% - 450px);
}


.contact{
	top:calc(700% - 540px);
}

/* FILLER PAGE STYLING */
.filler-image{
	width:30%;
	height:auto;
	position:absolute;
	bottom:15px;
	right:25px;
}
/* Homepage Styling */
.homepage{
	width:70%;
	height:auto;
	position:absolute;
	top:80px;
	left:20%;
	margin:0 auto;
	transition:width linear 0.3s;
}

.small-size{
	width:45%;
	top:20%;
	left:6%;
	height:auto;
	margin:0;
}

#one-r-content, #two-r-content, #three-r-content, #four-r-content, #five-r-content, #six-r-content, #seven-r-content, #eight-r-content{
	display:none;
}

.home-content{
	position:absolute;
	top:0;
	right:0;
	width:45%;
	height:100%;
	background:#0f1012;
	color:#767779;
}

.home-content h1{
	margin:10% 0 0 10%;
	color:#fcc40f;
	font-family:'Opificio';
}

.content-scroller{
	margin:2% 0 0 5%;
	padding:5%;
	overflow-y:scroll;
	width:70%;
	font-family:'Arial';
	height:50%;
}

.dots{
	display:block;
	width:60px;
	height:auto;
	margin:10px auto;
	position:relative;
	left:-40px;
}

.cross-button{
	width:30px;
	height:auto;
	position:relative;
	left:80%;
	z-index:99999;
	margin-top:10px;
}
.content-scroller::-webkit-scrollbar {
      width: 8px;
}

.content-scroller::-webkit-scrollbar-track {
      background-color:#ccc;
}

.content-scroller::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.5);
}

.content-scroller::-webkit-scrollbar-button {
      background-color: #ccc;
}

.home-icons{
	width:22%;
	display:inline-block;
	opacity:1;
	margin:0.5%;
    position:relative;
	transition:all linear .2s;
}

.home-icons img{
    width:100%;
    height:100%;
	z-index:99;
	cursor:pointer;
}

.home-icons .rimage{
    position:absolute;
    top:0;
    right:0;
	width:0;
}

.home-icons .limage{
    position:absolute;
    top:0;
	right:0;
	width:0;
}
.home-icons .lrimage{
    position:absolute;
    top:0;
	left:0;
	width:0;
}

.home-icons .timage{
    position:absolute;
	top:0;
	height:0;
    right:0;
}

.home-icons .bimage{
    position:absolute;
    bottom:0;
	left:0;
    height:0;
}

.home-icons:hover,.selected-home{
	opacity:1 !important;
}

.one{
	background-position:0px 0px;
}

.two{
	background-position:-203px 2px;
}

.three{
	background-position:-408px -1px;
}

.four{
	background-position:-612px 0px;
}

.five{
	background-position:0px 0px;
}

.six{
	background-position:0px 0px;
}
.seven{
	background-position:0px 0px;
}
.eight{
	background-position:0px 0px;
}

/* Contact Page Styling */

.contactpage{
	width:55%;
	margin:55px auto 0 auto;
	text-align:center;
	position:relative;
}

#contact-details{
	height:auto;
	width:60%;
	margin:0 auto;
}

/* Services Page */
.servicespage{
	position:relative;
	width:35%;
	height:auto;
	margin:150px auto 0px auto;
	transition:all linear 0.5s;
}
.services-icon{
	display:inline;
	width:30%;
	height:auto;
	margin-right:2%;
}

.servicespage-small{
	top:160px;
	left:100px;
	margin:0;
}

.services-content{
	width:40%;
	height:100%;
	float:right;
	position:absolute;
	top:0;
	right:7%;
	display:inline-block;
	background:#FFFFFF;
}

.services-content h1{
	margin:10% 0 0 10%;
	color:#fcc40f;
	font-family:'Opificio';
}

.services-scroll{
	width:75%;
	height:55%;
	overflow:hidden;
	margin:3% 0 0 10%;
	color:#000000;
	font-family:'Arial';
}

#marketing-cont,#public-cont,#event-cont{
	display:none;
}

.cross-service{
	width:30px;
	height:auto;
	position:relative;
	left:90%;
	z-index:99999;
	margin-top:10px;
}

/* About Page Styling */
.aboutpage{
	width:85%;
	position:relative;
	height:auto;
	top:15%;
	left:10%;
}
.about-align{
	width:40%;
	background:rgba(0,0,0,0.5);
	height:100%;
	position:relative;
	left:150px;
	padding-top:7%;
}

.about-text{
	display:block;
	width:70%;
	margin:0 auto;
}

.about-text h1{
	margin-bottom:20px;
	color:#ffc20f;
	font-family:'Opificio';
}

.about-text p{
	width:80%;
	color:#FFFFFF;
	margin-bottom:20px;
	font-family:'Arial';
}

.about-image{
	display:inline;
	float:left;
	width:57%;
	position:relative;
}

.aboutpage:after{
	clear:both;
}

/* Clients Page Styling */

.clientspage{
	position:relative;
	height:auto;
	width:60%;
	margin:70px auto 0 auto;
	color:#ffc20f;
}

.clientspage h1{
	margin-bottom:0px;
}

.clients-image{
	display:block;
	margin:0 auto;
	width:83%;
	height:auto;
}

/* GALLERY STYLING */
.gallery-content{
	width:80%;
	height:100%;
	position:relative;
	margin:70px auto 0 auto;
}

.gallery-content h1{
	color:#ffc20f;
	margin-top:20px;
	margin-bottom:30px;
}

.gallery-slide{
	width:85%;
	height:65%;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}

.gallery-slide img{
	width:22%;
	margin-right:2.5%;
	display:inline-block;
}

/* TESTING */

.home-div-icons{
	list-style:none;
	display:inline-block;
}

.home-div-i{
	width:198px;
	text-indent:-99999px;
	height:200px;
	display:inline-block;
	background-position:0 0;
	transition:all ease-in-out 0.8s;
	background-size:198px 200px;
}

.home-div-i:hover{
	background-position:-200px 0 !important;
}

.home-div-icons li{
	display:inline;
	list-style:none;
}

.one-i{
	background:url(../images/home-icons2/1.png) no-repeat;
}

.two-i{
	background:url(../images/home-icons2/2.png) no-repeat;
}

.three-i{
	background:url(../images/home-icons2/3.png) no-repeat;
}

.four-i{
	background:url(../images/home-icons2/4.png) no-repeat;
}

.five-i{
	background:url(../images/home-icons2/5.png) no-repeat;
}

.six-i{
	background:url(../images/home-icons2/6.png) no-repeat;
}

.seven-i{
	background:url(../images/home-icons2/7.png) no-repeat;
}

.eight-i{
	background:url(../images/home-icons2/8.png) no-repeat;
}