body {
    margin: 0;
    font-family: 'Lato', sans-serif;
}
#index{
	background:#ffce1a;
}

.navbar-default {
    background-color: transparent;
    border-color: transparent;
}
.navbar-brand>img {
    display: block;
    width: 210px;
}

.modal-dialog {width: 95%;}
.modal-content {background-color: #ffffff;}
.modal-header {
    min-height: 16.43px;
    padding: 4px;
    border-bottom: 0px solid #e5e5e5;
}
.modal-body {padding: 2px;}
#myModal .col-md-12{padding:0px;}
#myModal .col-md-4{padding: 6px;}
#myModal .col-md-4 img{margin-top: 12px;}
.modal-footer {border-top: 0px solid red;}
.modal-title {color: #80fc2a;font-size: 38px;}

.btn-gallery {
    position: fixed;
    z-index: 55;
    left: -4%;
    border: 1px solid #80fc2a;
    background-color: #80fc2a !important;
    color: #1a1a1a;
    padding: 13px;
    border-radius: 0px;
    border-bottom: 0px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 18px;
    transition:0.5s all;
    top: 45%;
    transform: rotate(-90deg);
}

.btn-gallery:hover {
    padding-top: 30px;
}

.cup-1,.cup-2{width: 280px;position:absolute;}
.cup-1{left: 188px;margin-top: -24%;}
.cup-2{left: 1px;top: 5%;}


   .laptop{position: absolute;width: 42%;right: 17%;margin-top: -32%;}
   .compus{position: absolute;width: 5.5%;right: 15%;margin-top: -3%;}
   .pencil{position: absolute;width: 1.4%;right: 7%;margin-top: -11%;}
   .eraser{position: absolute;width: 4.2%;right: 10%;margin-top: 1.8%;}
.sharpener{position: absolute;width: 4.3%;right: 10%;margin-top: -5%;}
    .ruler{position: absolute;width: 5%;right: 1%;margin-top: -15.5%;}


       .diary{position: absolute;width: 19%;right: 36.5%;margin-top: 11%;}
.color-pencil{position: absolute;width: 8%;right: 28%;margin-top: 13%;}
      .mobile{position: absolute;width: 12%;right: 16%;margin-top: 12%;}
        .calc{position: absolute;width: 17%;right: 1%;margin-top: 11.5%;}
		
.ex-1{position: absolute;width: 8%;left: 1%;margin-top: -28.5%;}
.ex-2{position: absolute;width: 8%;left: 10%;margin-top: -25.5%;}
.ex-3{position: absolute;width: 17%;left: 17%;margin-top: -5.8%;}
.ex-4{position: absolute;width: 17%;left: 31%;margin-top: -14.3%;}

.ex-5{position: absolute;width: 13%;left: -2%;margin-top: 6.5%;}
.ex-6{position: absolute;width: 8%;left: 11%;margin-top: 6.5%;}
.ex-7{position: absolute;width: 17%;left: 21%;margin-top: 12.5%;}
.ex-8{position: absolute;width: 11%;left: 40%;margin-top: 15.5%;}

.key {position: absolute;width: 20%;right: 20%;margin-top: -20.5%;}

#section0 .container,#section1 .container,#section2 .container,#section3 .container,#section4 .container{width:90%;padding-right:5%;}

#section0 h1,#section1 h1,#section2 h1,#section3 h1,#section4 h1{
	font-weight:900;
	color:#80fc2a;
	font-size:90px;
	position:relative;
	overflow: hidden; /* Ensures the content is not revealed until the animation */
	border-right: 0.15em solid #ccc; /* The type writer cursor */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	line-height: 115px;
	margin: 0px;
	animation: typing2 3.5s steps(40, end), blink-caret2 .75s step-end infinite;
	padding: 0px;
}

#section0 h1 {position:absolute;top:100px;right:0px;}
#section1 h1 {position:absolute;top:100px;left:0px;}
#section2 h1 {position:absolute;top:100px;right:0px;}
#section3 h1 {position:absolute;top:100px;}

#section4 {color: #ccc;font-size: 22px;}
#section4 a{color:#ccc;}
#section4 a:hover{color:#80fc2a;}

/* The typing effect */
@keyframes typing2 {
  from { width: 0 }
  to { width: 100% }  
}

/* The typewriter cursor effect */
@keyframes blink-caret2 {
  from, to { border-color: transparent }
  50% { border-color: #ccc; }
}


.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #fff;
    display: block;
    transition: 0.4s;
}

.overlay a:hover, .overlay a:focus {
    border-bottom:6px solid #F44336;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
#right-circles{position:fixed;z-index:1;right:2%;top:40%;list-style-type:none;}
#right-circles li{font-size:20px;border:4px solid #424242;height:15px;width:15px;margin-top:10px;border-radius:50%}
#right-circles li:hover{border:none;background:#424242;}
#right-circles li>a{text-decoration:none;text-transform:none;}
#menu-icon{color:#424242;font-size:40px;cursor:pointer;position:fixed;top:2%;left:2%;z-index:1;transition:0.6s all;}
#menu-icon:hover{
	color:#fff;
	-webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
.closebtn:hover{
	color:#fff;
	-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
#search-span {
    top: 68%;
    left: 78%;
    position: absolute;
    z-index: 1;
	animation:blink-search 2.5s step-end infinite;
}
#search-span :hover{cursor:pointer;animation:none;}

.right-section  p{text-align:left}
.right-section .bold-heading{font-size:70px;color: white;font-weight:100;line-height:53px;}
.right-section .bold-heading span{font-size:70px;font-weight:900;color: white}

.right-section .subtitle{ overflow: hidden;margin-top:50px;font-size:14px;border-left:4px solid white; color: white; padding-left:10px;animation: 
    typing 3.5s steps(40, end),
    blink-caret .55s step-end infinite;}




@keyframes blink-search {
  from, to { opacity:0.5 }
  20% { opacity: 1; }
}

.btn{background-color:transparent}
.btn-srill{transition:0.5s all;margin-top:30px;border:1px solid #424242;border-left:30px solid #424242;padding-left:20px;padding-right:40px;border-radius:5px;font-weight:900;border-top-right-radius:0px;border-bottom-right-radius:0px;}
.btn-srill:hover{border-right:30px solid #424242;border-left:1px solid #424242;border-radius:0px;padding-left:40px;padding-right:20px;border-top-right-radius:5px;border-bottom-right-radius:5px;}


.overlay form{margin-top:25px;}
.overlay .form-control{border: 1px solid #5f5d5d;height:45px;font-size:18px;color:#ffce1a;background-color:transparent;border-radius:0px;-webkit-box-shadow: none;box-shadow: none;-webkit-transition: none;-o-transition: none;transition: none;}
.overlay label{display:none}
.overlay .btn-srill{margin-top:5px;border:1px solid #ffce1a;border-left:30px solid #ffce1a;color:#fff}
.overlay heading{color:#ffce1a;font-size:34px;font-weight:bold;padding-left:30px;border-left:10px solid #ffce1a;border-left:10px solid #ffce1a;}

.video-overlay{background-image:url('../images/dotted-overlay.png');width:100%;position:absolute;top:0px;left:0px;}


.footer
{
	height: 60px;
	background-color: #0c0c0ccc;
	margin-bottom: 0px;
	margin-top: 200px;
	color: white;
}
.navbar-right2 {background-color: rgba(0, 0, 0, 0); color: white;}

.copy-right-text
{
	color: white;
	font-size: 14px;
	padding-top: 15px;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
    color: #d0d0d0;
    background-color: transparent;
}


@media screen and (max-width: 980px) {
    .navbar-brand>img {width: 400px;}
    #section0 h1, #section1 h1, #section2 h1, #section3 h1, #section4 h1 {margin-top: 240px;}
    .btn-gallery {left:-8%;font-size:20px;}
}