@import url('https://fonts.googleapis.com/css?family=Ubuntu');
/* CSS Document */
/*******************************************
Theme Name: PMP Group
Theme URI: www.pmpgroup.co.in/
Author: Suman Sarkar
License: Registered by Yahoo India
******************************************/

* {
	margin: 0;
	padding: 0;
}

html,body {
	height: 100%;
	overflow:hidden;
	background-color: #fefefe;
	font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
	color: #fff;
}

#cubeTransition {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-perspective: 1200px;
	perspective: 1200px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#cubeTransition div {
	min-height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	font-size: 5em;
	color: #fff;
	visibility: hidden;
	transition:opacity 5ms;
}

#cubeTransition h2 {
	position: relative;
	top: 200px;
	font-size: 1.5em;
	text-align: center;
	text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1 );
}

.page1 {
	background:url(../img/nusratBanner.jpg);
	background-size:cover;
	background-position:center;
}
@media screen and (max-width: 768px){
	.page1 {
		background:url(../img/nusratBannerTab.jpg);
		background-size:cover;
		background-position:center;
	}
}
@media screen and (max-width: 500px){
	.page1 {
		background:url(../img/nusratBannerMobile.jpg);
		background-size:cover;
		background-position:center;
	}
}
.page2 {
	background:url(../img/nusratBanner.jpg);
	background-size:cover;
	background-position:center;
}
@media screen and (max-width: 768px){
	.page2 {
		background:url(../img/nusratBannerTab.jpg);
		background-size:cover;
		background-position:center;
	}
}
@media screen and (max-width: 500px){
	.page2 {
		background:url(../img/nusratBannerMobile.jpg);
		background-size:cover;
		background-position:center;
	}
}

.page3 {
	background:url(../img/nusratBanner.jpg);
	background-size:cover;
	background-position:center;
}
@media screen and (max-width: 768px){
	.page3 {
		background:url(../img/nusratBannerTab.jpg);
		background-size:cover;
		background-position:center;
	}
}
@media screen and (max-width: 500px){
	.page3 {
		background:url(../img/nusratBannerMobile.jpg);
		background-size:cover;
		background-position:center;
	}
}

.page1 h2{
	font-size:60px !important;
	margin-top:100px !important;
}
.page2 h2{
	font-size:60px !important;
	margin-top:100px !important;
}
.page3 h2{
	font-size:60px !important;
	margin-top:100px !important;
}
@media screen and (max-width:768px){
	.page1 h2{
		font-size:40px !important;
	}
	.page2 h2{
		font-size:40px !important;
	}
	.page3 h2{
		font-size:40px !important;
	}
}
.visible{
	visibility: visible !important;
}

.rotateCubeTopOut {
	transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	animation: rotateCubeTopOut .6s both ease-in;
	-webkit-animation: rotateCubeTopOut .6s both ease-in;
}

.rotateCubeTopIn {
	transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%;
	animation: rotateCubeTopIn .6s both ease-in;
	-webkit-animation: rotateCubeTopIn .6s both ease-in;
}

.rotateCubeBottomOut {
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-animation: rotateCubeBottomOut .6s both ease-in;
	animation: rotateCubeBottomOut .6s both ease-in;
}

.rotateCubeBottomIn {
	transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotateCubeBottomIn .6s both ease-in;
	animation: rotateCubeBottomIn .6s both ease-in;
}

@keyframes rotateCubeTopOut {
	50% {
		animation-timing-function: ease-out;
		transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
	}

	100% {
		opacity: .3;
		transform: translateY(-100%) rotateX(90deg);
	}

}

@-webkit-keyframes rotateCubeTopOut {
	50% {
		-webkit-animation-timing-function: ease-out;
		-webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
	}

	100% {
		opacity: .3;
		-webkit-transform: translateY(-100%) rotateX(90deg);
	}

}

@keyframes rotateCubeTopIn {
	0% {
		opacity: .3;
		transform: translateY(100%) rotateX(-90deg);
	}

	50% {
		animation-timing-function: ease-out;
		transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
	}
}

@-webkit-keyframes rotateCubeTopIn {
	0% {
		opacity: .3;
		-webkit-transform: translateY(100%) rotateX(-90deg);
	}

	50% {
		-webkit-animation-timing-function: ease-out;
		-webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
	}
}

@keyframes rotateCubeBottomOut {
	50% {
		animation-timing-function: ease-out;
		transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
	}

	100% {
		opacity: .3;
		transform: translateY(100%) rotateX(-90deg);
	}
}

@-webkit-keyframes rotateCubeBottomOut {
	50% {
		-webkit-animation-timing-function: ease-out;
		-webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
	}

	100% {
		opacity: .3;
		-webkit-transform: translateY(100%) rotateX(-90deg);
	}
}

@keyframes rotateCubeBottomIn {
	0% {
		opacity: .3;
		transform: translateY(-100%) rotateX(90deg);
	}

	50% {
		animation-timing-function: ease-out;
		transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
	}
}
@-webkit-keyframes rotateCubeBottomIn {
	0% {
		opacity: .3;
		-webkit-transform: translateY(-100%) rotateX(90deg);
	}

	50% {
		-webkit-animation-timing-function: ease-out;
		-webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
	}
}

#bullets {
	position: absolute;
	width: 100%;
	bottom: 20px;
	padding: 0;
	margin: 0;
	text-align: center;
}

#bullets li {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin: 0 3px;
	background: rgba( 255, 255, 255, 0.5 );
	box-shadow: 0px 0px 4px rgba( 0, 0, 0, 0.2 );
	cursor: pointer;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}

#bullets li:hover {
	background: rgba( 255, 255, 255, 0.8 );
}

#bullets li.active {
	cursor: default;
	background: #fff;
}

.credit {
	position: absolute;
	bottom: 24px;
	right: 24px;
	margin: 0;
	z-index: 1;
	font-size: 0.9em;
}

.credit a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

@media screen and (max-width: 500px) {
	body {
		font-size: 10px;
	}

	#cubeTransition h2 {
		font-size: 1em;
	}

	.bullets li {
		margin: 0 6px;
	}

	.credit {
		bottom: initial;
		top: 10px;
		right: 10px;
	}

	.share,
	.github-ribbon {
		display: none;
	}
}



.menu-open_btn{
	position:fixed;
	top:50px;
	left:50px;
	z-index:100;
	font-size:22px;
	border:5px solid #fff;
	padding:20px 10px;
	color:#fff;
	-webkit-animation-name: example3;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes example3 {
    from { margin-left: -200px; opacity:0;}
    to { margin-left : 0px; opacity:1;}
}
.menu-close_btn{
	position:fixed;
	top:50px;
	left:50px;
	z-index:100;
	font-size:22px;
	border:5px solid #fff;
	padding:20px 10px;
	color:#fff;
	display:none;
	-webkit-animation-name: example5;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes example5 {
    from { margin-left: -200px; opacity:0;}
    to { margin-left : 0px; opacity:1;}
}
.menu-open_btn:focus{
	color:#fff;
	text-decoration:none;
}
.menu-open_btn:hover{
	color:#fff;
	text-decoration:none;
}
.menu-close_btn:focus{
	color:#fff;
	text-decoration:none;
}
.menu-close_btn:hover{
	color:#fff;
	text-decoration:none;
}
.menu-open_btn:hover{
	cursor: pointer;
}
.menu-close_btn:hover{
	cursor: pointer;
}
.menu{
	height:100%;
	width:100%;
	background-color:rgba(0,0,0,0.8);
	position:fixed;
	top:0px;
	left:0px;
	z-index:150;
	-webkit-transform:scale(0,0);
	-webkit-transition:.3s all;
}
.menu-open{
	-webkit-transform:scale(1,1);
}
.menu-left{
	padding:100px 200px;
	display:none;
}
.menu-left ul{
	list-style:none;
	margin-top:50px;
}
.menu-left ul li a{
	color:#fff;
	font-size:46px;
	font-family: 'Ubuntu', sans-serif;
}
.menu-left ul li a:hover{
	text-decoration:none;
}
.left-ul{
	-webkit-animation-name: example;
    -webkit-animation-duration: 1s;
}

@-webkit-keyframes example {
    from { margin-top: 200px; opacity:0;}
    to { margin-top: : 0px; opacity:1;}
}

.menu-right{
	padding:30px;
	display:none;
}
.menu-right ul{
	list-style:none;
	margin-top:50px;
}
.menu-right ul li a{
	color:#fff;
	font-size:40px;
	font-family: 'Ubuntu', sans-serif;
}
.menu-right ul li a:hover{
	text-decoration:none;
}
.menu-right ul li a:focus{
	text-decoration:none;
}
.right-ul{
	-webkit-animation-name: example1;
    -webkit-animation-duration: 1s;
}

@-webkit-keyframes example1 {
    from { margin-top: -200px; opacity:0;}
    to { margin-top: : 0px; opacity:1;}
}


.cool-link {
    display: inline-block;
    color: #000;
    text-decoration: none;
}

.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 5px;
    background: #fff;
    transition: width .3s;
}

.cool-link:hover::after {
    width: 100%;
    //transition: width .3s;
}
.menu-clange1{
	background:url(../img/wet-dates.jpg) fixed;
	background-position:center;
	background-size:cover;
	-webkit-animation-name: background-anim-1;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes background-anim-1{
    from { opacity:0;}
    to { opacity:1;}
}
.menu-clange2{
	background:url(../img/inshellalmonds.jpg) fixed;
	background-position:center;
	background-size:cover;
	-webkit-animation-name: background-anim-2;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes background-anim-2{
    from { opacity:0;}
    to { opacity:1;}
}
.menu-clange3{
	background:url(../img/dryprunes.jpg) fixed;
	background-position:center;
	background-size:cover;
	-webkit-animation-name: background-anim-3;
    -webkit-animation-duration: 1;
}
@-webkit-keyframes background-anim-3{
    from { opacity:0;}
    to { opacity:1;}
}
.menu-clange4{
	background:url(../img/greenRaisin.jpg) fixed;
	background-position:center;
	background-size:cover;
	-webkit-animation-name: background-anim-4;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes background-anim-4{
    from { opacity:0;}
    to { opacity:1;}
}
.menu-clange5{
	background:url(../img/splitcassia.jpg) fixed;
	background-position:center;
	background-size:cover;
	-webkit-animation-name: background-anim-5;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes background-anim-5{
    from { opacity:0;}
    to { opacity:1;}
}
.menu-clange6{
	background:url(../img/mangojelly.jpg) fixed;
	background-position:center;
	background-size:cover;
	-webkit-animation-name: background-anim-6;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes background-anim-6{
    from { opacity:0;}
    to { opacity:1;}
}
.menu-clange7{
	background:url(../img/poppyseeds.jpg) fixed;
	background-position:center;
	background-size:cover;
	-webkit-animation-name: background-anim-7;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes background-anim-7{
    from { opacity:0;}
    to { opacity:1;}
}
.menu-clange8{
	background:url(../img/cloves.jpg) fixed;
	background-position:center;
	background-size:cover;
	-webkit-animation-name: background-anim-8;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes background-anim-8{
    from { opacity:0;}
    to { opacity:1;}
}
.menu-clange9{
	background:url(../img/cashew.jpg) fixed;
	background-position:center;
	background-size:cover;
	-webkit-animation-name: background-anim-9;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes background-anim-9{
    from { opacity:0;}
    to { opacity:1;}
}
.main-logo{
	position:fixed;
	z-index:200;
	top:30px;
	right:50px;
	-webkit-animation-name: example-logo-anim-0;
    -webkit-animation-duration: 1s;
}
.main-logo img{
	width: 200px;
}
@-webkit-keyframes example-logo-anim-0 {
    from { margin-right: -200px; opacity:0;}
    to { margin-right : 0px; opacity:1;}
}
.main-logo-c-1{
	-webkit-animation-name: example-logo-anim-1;
    -webkit-animation-duration: 1s;
}
.main-logo-c-2{
	-webkit-animation-name: example-logo-anim-2;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes example-logo-anim-1 {
    from { margin-right: -200px; opacity:0;}
    to { margin-right : 0px; opacity:1;}
}
@-webkit-keyframes example-logo-anim-2 {
    from { margin-right: -200px; opacity:0;}
    to { margin-right : 0px; opacity:1;}
}
.banner-heading{
	-webkit-animation-name: example2;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes example2 {
    from { opacity:0;}
    to { opacity:1;}
}
@media screen and (max-width: 1140px){
	.menu-left{
		padding-top:100px;
		padding-left: 150px;
	}
	.menu-left ul li a{
		font-size:32px;
	}
	.menu-right{
		padding-top:100px;
		padding-left: 0px;
	}
	.menu-right ul li a{
		font-size:30px;
	}
}
@media screen and (max-width: 768px){
	.menu-left{
		padding-top:100px;
		padding-left: 50px;
	}
	.menu-left ul li a{
		font-size:30px;
	}
	.menu-right{
		padding-top:100px;
		padding-left: 0px;
	}
	.menu-right ul li a{
		font-size:30px;
	}
}
@media screen and (max-width: 550px){
	.menu-left{
		padding-top:150px;
		padding-left: 50px;
		padding-right: 0px;
	}
	.menu-left ul li a{
		font-size:24px;
	}
	.menu-right{
		padding-top:150px;
		padding-left: 0px;
		padding-right: 0px;
	}
	.menu-right ul li a{
		font-size:24px;
	}
	.main-logo{
		position:fixed;
		z-index:200;
		top:27px;
		right:125px;
		width: 120px;
	}
}
@media screen and (max-width: 400px){
	.menu-left{
		padding-top:100px;
		padding-left: 20px;
		padding-right: 0px;
	}
	.menu-left ul li a{
		font-size:16px;
	}
	.menu-right{
		padding-top:100px;
		padding-left: 0px;
		padding-right: 0px;
        margin-left: -20px;
	}
	.menu-right ul li a{
		font-size:18px;
	}
	.main-logo{
		position:fixed;
		z-index:200;
		top:27px;
		right:40px;
		width: 120px;
	}
    .main-logo img{
        width: 150px;
    }
    .menu-open_btn{
        position:fixed;
        top:43px;
        left:20px;
        z-index:100;
        font-size:18px;
        border:3px solid #fff;
        padding:12px 7px;
    }
    .menu-close_btn{
        position:fixed;
        top:43px;
        left:20px;
        z-index:100;
        font-size:18px;
        border:3px solid #fff;
        padding:12px 7px;
        display:none;
    }
}