body{font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 15px; margin:0; padding:0;
background-image: url("../images/img-home-bg.jpg"); background-color: #243542; background-size: cover; background-attachment: fixed; background-position: left center;}

.logo { top: 0px; left: 0px; text-align: center; background-color: #006bad; padding-top: 35px;}
.pg-txt{padding-top:0px!important; padding-bottom:0px!important; color: #fff; font-size:28px}

/*SOCIAL ICON*/
.fa {padding: 10px;  width: 15px; text-align: center; text-decoration: none; margin: 0px 4px 35px 4px; border-radius: 50%;}
.fa:hover {/*opacity: 0.5;*/ color: #00395C; border: 2px solid #00395C;}
.fa-youtube {border: 2px solid #fff; color: #fff;}
.fa-envelope {border: 2px solid #fff; color: #fff;}
.fa-linkedin {border: 2px solid #fff; color: #fff;}
.fa-github {border: 2px solid #fff; color: #fff;}

/* SIDE NAVIGATION START */
.sidenav {width: 340px; position: fixed; z-index: 1; top: 330px; left: 0; overflow-x: hidden; padding-top: 50px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 400;}
.sidenav a {padding: 10px 0px 10px 80px; text-align: left; text-decoration: none; font-size: 20px; color: #fff; display: block; background: url("../images/sep-main-menu.png"); background-position: bottom; background-repeat: no-repeat; }
.sidenav a:hover {color: #000;}
.copyright { position: fixed; color: #fff; width: 340px; text-align: center;  top:95%; font-size: 16px; font-weight: 400;}
.pg-sidebar{height:100%; width:100px; position:fixed!important; z-index:1; overflow:auto}
.pg-white, .pg-hover-white:hover{color:#fff!important;background-color:#006bad!important}
.h2{font-size: 45px; font-weight: bold; letter-spacing: 2px; line-height: 10px; margin-left: 50px; margin-top: 55vh; color: #fff; text-wrap: nowrap;}
/* SIDE NAVIGATION END */



.pg-main,#main{/* transition:margin-left .4s;  height:100vh; */}

/* TYPING CSS START */
.warpper{display: flex; position: fixed;}
.static-txt{line-height: 10px; height: 0px; margin-left: 50px; text-wrap: nowrap;}
.warpper .static-txt{color: #fff; font-size: 30px; font-weight: 300; }
.warpper .dynamic-txt{margin-left: -30px; line-height: 90px; height: 90px; overflow: hidden; margin-top: -40px; text-wrap: nowrap;}
.dynamic-txt li{list-style: none; color: #00ccff; font-size: 30px; font-weight: 500; top: 0; position: relative; animation: slide 12s steps(4) infinite;}
@keyframes slide{ 100%{top: -360px;}}
.dynamic-txt li{position: relative;}
.dynamic-txt li ::after{content: ""; position: absolute; left: 0; top:20px; height: 45px; width: 100%; background-color: #243542; border-left: 4px solid #00ccff; animation: typing 3s steps(10) infinite; }
@keyframes typing{
    40%, 60% {left: calc(100% + 30px);}
    100%{left: 0;}
}
/* TYPING CSS END */

.pg-right{float:right!important; margin-right: 35px;}
.pg-btn,.pg-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}


.pg-top,.pg-bottom{position:fixed;width:100%;z-index:1}
.pg-top{top:0}.pg-bottom{bottom:0}
.pg-top{top:0}.pg-bottom{bottom:0}
.pg-container,.pg-panel{padding:0.01em 16px}
.pg-panel{margin-top:16px;margin-bottom:16px}
.pg-center{text-align:center!important}
.pg-xlarge{font-size:24px!important}
.pg-padding{padding:8px 16px!important}
.pg-padding-16{padding-top:16px!important;padding-bottom:16px!important}
.pg-left{float:left!important}


@media (min-width:601px){}
@media (min-width:993px){}
@media (max-width:1205px){}
@media (max-width:600px){}
@media (max-width:768px){}
@media (min-width:993px){.pg-hide-large{display:none!important}	}
@media (max-width:992px) and (min-width:601px){.pg-hide-medium{display:none!important}}
@media (max-width:992px){
.pg-sidebar.pg-collapse{display:none} .pg-main{margin-left:0!important;margin-right:0!important} .pg-auto{max-width:100%}

.h2{font-size: 40px; font-weight: bold; letter-spacing: 2px; line-height: 10px; margin-left: 40px; margin-top: 50vh; color: #fff; text-wrap: nowrap;}

.static-txt{line-height: 10px; height: 0px; margin-left: 40px; text-wrap: nowrap;}
.warpper .static-txt{color: #fff; font-size: 20px; font-weight: 300; }
/*.warpper .dynamic-txt{margin-left: -30px; line-height: 90px; height: 90px; overflow: hidden; margin-top: -40px; text-wrap: nowrap;}*/

.dynamic-txt li{list-style: none; color: #00ccff; font-size: 20px; font-weight: 500; top: 0; position: relative; animation: slide 12s steps(4) infinite;}


}