/*
 * Globals
 */

/* Fonts*/ 
 @font-face {
    font-family: Poppins;
	src: url("../fonts/Poppins.eot"); /* IE9 Compat Modes */
    src: url("../fonts/Poppins.otf") format("opentype"); /* Modern Browsers */
	src: url("../fonts/Poppins.woff") format("woff"); /* Modern Browsers */
	src: url("../fonts/Poppins.ttf") format("truetype"); /* Safari, Android, iOS */
}

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}
/*
 * Base structure
 */
html,
body {
  height: 100%;
  background-color: #333; /* For browsers that do not support gradients */
  background-image: linear-gradient(#333, #454343); /* Standard syntax (must be last) */
}
body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  font-family: 'Poppins', sans-serif !important;
}
.cover-container {
  max-width: 85em;
}
/*
 * Header
 */
.masthead {
  margin-bottom: 2rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: none;
	margin-bottom: 50px;
	
  }
  .nav-masthead {
    float: right;
  }
}

/*
 * Cover
 */
.cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}

/*
 * Footer
 */
.mastfoot {
  color: rgba(255, 255, 255, .5);
  margin-top: 35px !important;
}

.mb-auto, .my-auto {margin-bottom: initial !important;}

/* Menu start */
input[type=checkbox], input[type=radio] {display: none !important;}

 .themenu{
	text-decoration:none;	
	background:#545959;
	background:-o-linear-gradient(90deg, #545959, #383a3b);
	background:-moz-linear-gradient( center top, #545959 5%, #383a3b 100% );
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #545959), color-stop(1, #383a3b) );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#545959', endColorstr='#383a3b');
	background:-webkit-linear-gradient(#545959, #383a3b);
	background:-ms-linear-gradient(#545959, #383a3b);
	background:linear-gradient(#545959, #383a3b);
	text-indent:0px;
	line-height:4px;	
	text-align:center;
	vertical-align:middle;
	display:inline-block;
	font-size:12px;
	width:100px;
	height: 30px;
	color:#ffffff;	
	padding:13px;
	border-color:#bcc3c4;
	border-width:1px;
	border-style:solid;
	}
.themenu:hover {
	cursor: pointer; 
	background:#383a3b;
	background:-o-linear-gradient(90deg, #383a3b, #545959);
	background:-moz-linear-gradient( center top, #383a3b 5%, #545959 100% );
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #383a3b), color-stop(1, #545959) );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#383a3b', endColorstr='#545959');
	background:-webkit-linear-gradient(#383a3b, #545959);
	background:-ms-linear-gradient(#383a3b, #545959);
	background:linear-gradient(#383a3b, #545959);
	color: #d3d3d3;
}
/* Menu end */

/* The Cube start */
.divider-top, .divider-bottom {
  margin-top: 70px;
}
.thecube {
  perspective: 1500px;
  width: 550px;
  height: 550px;
  text-align: center;
  display: inline-block; 
}
.thebox {
  display: inline-block;
  transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
}
.face {
  overflow: inherit;
  position: absolute;
  border: 1px solid #888;
  background: #fff;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
  color: #fff;
  opacity: 0.95; /* REMOVE IT FOR OPAQUE FACES */
}
.face-front {
  width: 550px;
  height: 550px;
  transform: translate3d(0, 0, 275px);
}
.face-top {
  width: 550px;
  height: 550px;
  transform: rotateX(90deg) translate3d(0, 0, 275px);
}
.face-bottom {
  width: 550px;
  height: 550px;
  transform: rotateX(-90deg) translate3d(0, 0, 275px);
}
.face-left {
  width: 550px;
  height: 550px;
  left: 50%;
  margin-left: -275px;
  transform: rotateY(-90deg) translate3d(0, 0, 275px);
}
.face-right {
  width: 550px;
  height: 550px;
  left: 50%;
  margin-left: -275px;
  transform: rotateY(90deg) translate3d(0, 0, 275px);
}
.face-back {
  width: 550px;
  height: 550px;
  transform: rotateY(180deg) translate3d(0, 0, 275px);
}
#left:checked ~ .thecube .thebox {
  transform: rotateY(90deg);
}
#right:checked ~ .thecube .thebox {
  transform: rotateY(-90deg);
}
#bottom:checked ~ .thecube .thebox {
  transform: rotateX(90deg);
}
#top:checked ~ .thecube .thebox {
  transform: rotateX(-90deg);
}
#back:checked ~ .thecube .thebox {
  transform: rotateY(180deg);
}

/* Background images start */
/* First face Hello*/
.face-front {
  background: url(../images/faces/hello.jpg);
  background-size: cover;
}
/* Second face About*/
.face-left {
  background: url(../images/faces/about.jpg);
  background-size: cover;
}
/* Third face Services*/
.face-right {
  background: url(../images/faces/services.jpg);
  background-size: cover;
}
/* Forth face Skills*/
.face-top {
  background: url(../images/faces/skills.jpg);
  background-size: cover;
}
/* Fifth face Projects*/
.face-bottom {
  background: url(../images/faces/projects.jpg);
  background-size: cover;
}
/* Sixth face Contact*/
.face-back {
  background: url(../images/faces/contact.jpg);
  background-size: cover;
}
/* Background images end */

/* Overlay texture over background images start */
.face-front:before, .face-top:before, .face-left:before, .face-right:before, .face-bottom:before, .face-back:before  {
content: "";
background: url('../images/overlay.jpg') repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1; 
opacity: 1; /* SET 1 WITHOUT BACKROUND IMAGES */
}
/* Overlay texture over background images end */
/* The Cube end */

/* The faces text & images start */
 .faces-title {
	 font-size: 1.25em;
	 margin-top: 10px;
	 margin-bottom: -10px;
	 color: #fb8c04;	 
 }
  .faces-subtitle {
	 font-size: 0.75em;
	 padding-top: 10px;
 }
   .faces-text {
	 font-size: 1em;
	 padding: 5px 25px 5px 25px;
 } 
    .faces-image {
	max-width: 200px;
	border-radius: 5px;
 } 
/* The faces text & images end */
 
/* Services list start */
.list-group {
	padding-left: 50px;
	padding-right: 50px;}
.list-group-item {
	padding: .5rem 1.25rem;
	background-color: transparent;
	border: 1px solid rgba(0,0,0,.5);
}
.list-group-item:first-child  {	
	border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 	
}
.list-group-item:last-child {	
	border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px;	
}
/* Services list end */  
  
/* Miscellaneous start */ 
  .lists-text {
	  text-align: left;
	  padding:25px;
}
  .checklist-title {
	  padding-left:5px;
	  font-weight: bold;
}
  .far, .fas, .fab, .fa {
	  color: #fb8c04;
}
  .badge-primary {
	  background-color: #fb8c04;
}
  .badge-pill {
	  border-radius: 0px;
}
  .badge {
	  padding: .5em .4em;
}
  .skills-text {
	  color:#696969;
	  text-shadow: none !important;
	  font-size: 1em;
	  padding-left: 10px;
}
  .skills-row {
	  margin-top: 50px;
}
  .skills-column2 {
	  margin-top: 25px;
}
  .progress {
	  margin-bottom: 10px;
}
  .bg-warning {
	  background-color: #fb8c04!important;
}
  .bg-dark {
	  background-color: transparent !important;
}
  .card-body {
	  padding: 1rem !important;
	  margin-left: 5px !important;
	  margin-right: 5px !important;
}
  .card {
	  background: rgba(0,0,0,0.25) !important;
}
  #contact .col-4:hover {
	  opacity: 0.75;
}
.mobiletext {display: none;}
/* Miscellaneous end */ 
 
/* Call me button start */ 
 .callme {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;  
}
.callme .tooltiptext {
  visibility: hidden;
  width: 150px;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  background: #fb8c04;
}
.callme .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.callme:hover .tooltiptext {
  visibility: visible;
}
.callmebutton {
	background: #fb8c04;
	color: #ffffff;
}
 a:hover {
	 text-decoration: none !important;
} 
/* Call me button end */ 
   
/* Scrollable text start */  
div.scrollable-home {  
  width: 100%;
  height: 300px;
  overflow: auto;
   margin-bottom: 5px;
} 
div.scrollable-about {  
  width: 100%;
  height: 150px;
  overflow: auto;
} 
div.scrollable-services {  
  width: 100%;
  height: 325px;
  overflow: auto;
  margin-bottom: 15px;
} 
div.scrollable-skills {  
  width: 100%;
  height: 200px;
  overflow: auto; 
} 
div.scrollable-projects {  
  width: 100%;
  height: 100px;
  overflow: auto;
  margin-bottom: 15px; 
} 
div.scrollable-contact {  
  width: 100%;
  height: 100px;
  overflow: auto;
  margin-bottom: 15px; 
} 
/* Scrollable text end */ 
 
/* Custom scrollbar supported only by Chrome start */
::-webkit-scrollbar {
  width: 0.5em;
} 
/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(to top, #fb8c04, #812B1E);
  border-radius: 15px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to top, #812B1E, #fb8c04);
}
body::-webkit-scrollbar-track {
  background: black;
}
/* Custom scrollbar supported only by Chrome end */
   
/* Gallery start */    
#gallery img {
  max-height: 225px !important;height: 225px !important; margin-top: 50px;
  object-fit: cover;
}   
.gallery-container {
	max-height: 225px !important;
	margin: auto !important;
}   
#gallery img:hover {
	opacity: 0.75 !important;
	cursor: pointer;
}
/* Gallery end */ 

/* Lightbox start */
 @media (min-width: 576px) {
  .modal-dialog {margin: 1em auto !important;}
}
.carousel-item img {
  height: 60vw;
  object-fit: cover;
}
@media (min-width: 576px) {
  .carousel-item img {
    height: 350px;
  }
}
.modal-backdrop.show {
	z-index: -1 !important;
}	
/* Lightbox end */ 
 
/* Contact start */ 
  .card-body {
	  margin-left: 20px !important;
	  margin-right: 15px !important;
	  margin-top: 20px !important;
}
  .card-body:hover {
	  opacity: 0.75;
}
  div.card-body:hover h5, div.card-body:hover span{
	 color: #fb8c04 !important; 
}
/* Contact end */ 
 
 
/* Responsive media queries start */

@media only screen and (max-width: 981px) {
	
		/* Scrollable text start */  
div.scrollable-home {  
  width: 100%;
  height: 90px;
   margin-bottom: 10px;
} 
div.scrollable-about {  
  width: 100%;
  height: 93px;
  overflow-y:scroll;
} 
div.scrollable-services {  
  width: 100%;
  height: 112px;
  margin-bottom: 15px;
   overflow-y:scroll;
} 
div.scrollable-skills {  
  width: 100%;
  height: 125px;
  overflow-y:scroll;
  margin-top:5px;
} 
.skillz {
	padding-left:35px !important;
}

div.scrollable-projects {  
  width: 100%;
  height: 73px;
  overflow-y:scroll;
  margin-bottom: 15px; 
} 
div.scrollable-contact {  
  width: 100%;
  height: 75px;
   overflow-y:scroll;
  margin-bottom: 15px; 
} 
/* Scrollable text end */  
	
	
/* The Cube start */
.thecube {
  perspective: 1000px;
  width: 300px;
  height: 300px;
  text-align: center;
  display: inline-block;
}
.thebox {
  display: inline-block;
  transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
}
.face {
  
  position: absolute;
  border: 1px solid #888;
  background: #FFF;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
  color: #333;
  opacity: 0.95; /* REMOVE IT FOR OPAQUE FACES */
}
.face-front {
  width: 300px;
  height: 300px;
  transform: translate3d(0, 0, 150px);
}
.face-top {
  width: 300px;
  height: 300px;
  transform: rotateX(90deg) translate3d(0, 0, 150px);
}
.face-bottom {
  width: 300px;
  height: 300px;
  transform: rotateX(-90deg) translate3d(0, 0, 150px);
}
.face-left {
  width: 300px;
  height: 300px;
  left: 50%;
  margin-left: -150px;
  transform: rotateY(-90deg) translate3d(0, 0, 150px);
}
.face-right {
  width: 300px;
  height: 300px;
  left: 50%;
  margin-left: -150px;
  transform: rotateY(90deg) translate3d(0, 0, 150px);
}
.face-back {
  width: 300px;
  height: 300px;
  transform: rotateY(180deg) translate3d(0, 0, 150px);
}
#left:checked ~ .thecube .thebox {
  transform: rotateY(90deg); 
}
#right:checked ~ .thecube .thebox {
  transform: rotateY(-90deg);
}
#bottom:checked ~ .thecube .thebox {
  transform: rotateX(90deg);
}
#top:checked ~ .thecube .thebox {
  transform: rotateX(-90deg);
}
#back:checked ~ .thecube .thebox {
  transform: rotateY(180deg);
}
/* The Cube end */
	
/* Background images start */

/* First face Hello */
.face-front {
  background: url(../images/faces/hello.jpg);
  background-size: cover;
}
/* Second face About */
.face-left {
  background: url(../images/faces/about.jpg);
  background-size: cover;
}
/* Third face Services */
.face-right {
  background: url(../images/faces/services.jpg);
  background-size: cover;
}
/* Forth face Skills*/
.face-top {
  background: url(../images/faces/skills.jpg);
  background-size: cover;
}
/* Fifth face Projects*/
.face-bottom {
  background: url(../images/faces/projects.jpg);
  background-size: cover;
}
/* Sixth face Contact*/
.face-back {
  background: url(../images/faces/contact.jpg);
  background-size: cover;
}
/* Background images end */	 
 
/* The faces text & images start */  
.faces-title {
	 font-size: 1em;
	 margin-top: 5px;
	 margin-bottom: -10px;
	 color: #fb8c04;	 
}
.faces-subtitle {
	 font-size: 0.6rem;
	 padding-top: 10px;
	 color: #fff !important; 
 }
.faces-text {
	 font-size: 0.65em;
	 padding: 0px 15px 0px 15px;
	 color: #fff !important; 
} 
.lists-text {
	padding-top: 20px !important;
} 
.faces-image {
	max-width: 175px;
	border-radius: 5px;
}
/* The faces text & images end */  

/* Miscellaneous start */
.divider-top, .divider-bottom {
  margin-top: 75px;
}	
.list-group {
	padding-left: 5px !important; 
	padding-right: 5px !important;
	font-size: 0.75em !important;
}
.callme .btn {
	padding: 0px !important;
}	
.skills-row {
	margin-top: 0px !important;
}	
.skills-column2 {
	margin-top: 0px !important;
}
.progress {
	margin-bottom: 5px !important;
}
.skills-text {
	color:#696969;
	text-shadow: none !important;
	font-size: 0.65em;
	padding-left: 2px;
	text-align: left !important;
	padding-top: 3px;
	word-break: break-all !important;
}
.sm .btn {
	padding: 5px !important; 
}
.sm {
	margin-bottom: -35px;
	margin-top: 0px !important;
}


.container-fluid .col-3 {z-index: -1;}
/* Miscellaneous end */		

.navbar-nav label {margin: .2rem !important;}
  

/* Gallery start */   
#gallery img {
  max-height: 100px !important;
  height: 100px !important;
  margin-top: 50px;
  object-fit: cover;
}   
.gallery-container {
	max-height: 100px !important;
	margin: auto !important;
}
/* Gallery end */	
	
/* Lightbox start */	
.modal-dialog {
	margin: 1em auto !important;
}
.carousel-item img {
    height: 140px;
}
.modal-backdrop.show {
	z-index: -1 !important;
}
/* Lightbox end */ 
 
/* Contact elements start */ 
.card-body {   
	padding: 0px !important;
    margin-left: 10px !important;
    margin-bottom: 0px !important;
    margin-top: 4px !important;
    margin-right: 10px !important;
}
.fa-2x {
	font-size: 0.75em !important;
}
#contact h5 {
	font-size: 0.65em !important;
	margin-bottom: 0px !important;
}  
#contact .mb-3 {
	margin-bottom: 0px !important;
}
/* Contact elements end */ 
    
/* Services list start */  
.list-group {
	padding-left: 50px;
	padding-right: 50px;	
	margin-bottom: 10px;
}
.list-group-item {
	padding: 0.1rem 0.2rem;
	background-color: transparent;
	border: 1px solid rgba(0,0,0,.5);
	color: #ffffff !important;
}
.list-group-item:first-child  {	
	border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
}
.list-group-item:last-child {	
	border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px;	
}
/* Services list end */ 
  	
} 
/* Responsive media queries end */