/*
=====================================================================
*   Ceevee v1.0 Layout Stylesheet
*   url: styleshout.com
*   03-18-2014
=====================================================================

   TOC:
   a. General Styles
   b. Header Styles
   c. About Section
   d. Resume Section
   e. Projects Section
   f. Call To Action Section
   g. Testimonials Section
   h. Contact Section
   i. Footer

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. General Styles
/* ------------------------------------------------------------------ */

body { background: #0f0f0f; }

/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   position: relative;
   height: 700px;
   min-height: 700px;
   width: 100%;
   background: #161415 url(../images/header-option1.jpg) no-repeat top center;
   background-size: cover !important;
   -webkit-background-size: cover !important;
   background-attachment: fixed;
   text-align: center;
   overflow: hidden;
}

/* vertically center banner section */
header:before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   height: 100%;
}
header .banner {
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
   width: 85%;
   padding-bottom: 30px;
   text-align: center;
}

header .banner-text { width: 100%; }
header .banner-text h1 {
   font: 90px/1.1em 'opensans-bold', sans-serif;
   color: #fff;
   letter-spacing: -2px;
   margin: 0 auto 18px auto;
   text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}
header .banner-text h3 {
   font: 18px/1.9em 'opensans-regular', serif;
   letter-spacing: 1px;
   color: #d7d7d7;
   margin: 0 auto;
   width: 70%;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
}
header .banner-text h3 .highlight {
   color: rgb(240, 167, 8);
}
header .banner-text h3 a {
   color: #fff;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
}
header .banner-text h4 {
   font: 14px/1.9em 'opensans-regular', serif;
   letter-spacing: 1px;
   color: #d7d7d7;
   text-align: left;
   margin: 0 auto;
   width: 70%;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
}
header .banner-text h4 .highlight {
   color: rgb(240, 167, 8);
}
header .banner-text h4 a {
   color: rgb(240, 167, 8);
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
}
header .banner-text hr {
   width: 60%;
   margin: 18px auto 24px auto;
   border-color: #2F2D2E;
   border-color: rgba(150, 150, 150, .1);
}

/* header social links */
header .social {
   margin: 24px 0;
   padding: 0;
   font-size: 30px;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .8);
}
header .social li {
   display: inline-block;
   margin: 0 15px;
   padding: 0;
}
header .social li a { color: #fff; }
header .social li a:hover { color: #07ebfc; }

/* scrolldown link */
header .scrolldown a {
   position: absolute;
   bottom: 30px;
   left: 50%;
   margin-left: -29px;
   color: #fff;
   display: block;
   height: 42px;
   width: 42px;
   font-size: 42px;
   line-height: 42px;
   color: #fff;
   border-radius: 100%;

   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}
header .scrolldown a:hover { color: #07ebfc; }

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 3px;
   height: 25px;
}

/* nav-wrap */
#nav-wrap {
   font: 16px 'opensans-semibold', sans-serif;
   width: 100%;
   letter-spacing: 1px;
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
}
.opaque { background-color: #333; }

/* hide toggle button */
#nav-wrap > a.mobile-btn { display: none; }

ul#nav {
   width: auto;
   text-align: center;
}
ul#nav li {
   position: relative;
   list-style: none;
   display: inline-block;
}

/* Links */
ul#nav li a {
   display: inline-block;
	text-decoration: none;
   text-align: left;
   color: #fff;

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #f09308; }




/* ------------------------------------------------------------------ */
/* e. projects Section
/* ------------------------------------------------------------------ */

#projects {
   /* background: rgb(205, 205, 205); */
   background: rgb(235, 235, 235);
   padding-top: 60px;
   padding-bottom: 60px;
}
#projects h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   text-align: center;
   /* margin-bottom: 48px; */
   color: #1e1e1eb3;
}

/* projects Content */
#projects-wrapper { 
   margin-bottom: 40px;
   padding: 0px;
   height: 100%;
   width: 100%;
}
.projects-item .item-wrap {
   overflow: hidden;
   width: 30vw;
   height: 35vh;
   max-width: 400px;
   max-height: 276px;
   /* background-color: #05a4af; */
   padding: 1%;
   margin: 0 auto;
}
.projects-item .item-wrap a {
   display: block;
   cursor: pointer;
   /* background-color: #333; */
   height: 100%;
   width: 100%;
   padding: 1%;
}
.projects-item .item-wrap .cover{
   width: 100%;
   height: 100%;
   object-fit: contain;
   filter: drop-shadow(0 -2px 0 rgba(5, 164, 175, 0.8))
          drop-shadow(0 2px 0 rgba(5, 164, 175, 0.8))
          drop-shadow(-2px 0 0 rgba(5, 164, 175, 0.8))
          drop-shadow(2px 0 0 rgba(5, 164, 175, 0.8));
}
/* overlay */
.projects-item .item-wrap .overlay {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;

	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

   background: url(../images/overlay-bg.png);
}
.projects-item .item-wrap .link-icon {
   display: block;
   color: #fff;
   height: 30px;
   width: 30px;
   font-size: 18px;
   line-height: 30px;
   /* text-align: center; */

   opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}
.projects-item .item-wrap img {
   vertical-align: bottom;
}
.projects-item .projects-item-meta { padding: 18px }
.projects-item .projects-item-meta h5 {
   font: 14px/21px 'opensans-bold', sans-serif;
   color: #fff;
}
.projects-item .projects-item-meta p {
   font: 12px/18px 'opensans-light', sans-serif;
   color: #c6c7c7;
   margin-bottom: 0;
}

/* on hover */
.item-wrap:hover .overlay {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}
.item-wrap:hover .link-icon {
   opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

/* scrollup link */
#projects .scrolldown a {
   position: absolute;
   /* bottom: 30px; */
   left: 50%;
   margin-left: -29px;
   color: #1e1e1e;
   display: block;
   height: 42px;
   width: 42px;
   font-size: 42px;
   line-height: 42px;
   border-radius: 100%;

   /* -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out; */
}
#projects .scrolldown a:hover { color: #07ebfc; }

/* popup modal */
.popup-modal {
   /* max-width: 550px; */
	background: rgb(255, 255, 255);
	position: relative;
   margin: 0 auto;
   width: 75vw;
   height: 100vh;
}
.popup-modal .description-title {
   /* padding: 120px 36px 18px 36px; */
   margin-top: 3%;
   /* margin-bottom: 5%; */
   margin-left: 3%;
   width: 60%;
   /* height: 10%; */
   float: left;
}
.popup-modal .description-title h4 {
   font: 20px/28px 'opensans-bold', sans-serif;
   color: #111;
   /* padding-left: 10px; */
}
.popup-modal .scale-with-grid {
   height: 30%;
   max-width: 50%;
   position: relative;
}
.popup-modal .description-box { 
   /* padding: 12px 36px 18px 36px;  */
   padding: 5px 3% 18px 3%;
   overflow-y: scroll;   
   margin-bottom: 0px;
   /* margin-left: 3%; */
   height: 60%;
}
.popup-modal .description-box p {
	font: 14px/24px 'opensans-regular', sans-serif;
   color: #646464;   
   text-align: justify;
   margin-bottom: 1.5em;
   margin-top: 0.1em;
}
.popup-modal .description-box ul {
   font: 14px/24px 'opensans-regular', sans-serif;
   color: #646464;   
   text-align: justify;
   margin-bottom: 1em;
   list-style-type: circle; 
   margin-left: 3%; 
   margin-top: 0px; 
   padding-top: 0px;
}
.popup-modal .description-box li {
   font: 14px/24px 'opensans-regular', sans-serif;
   color: #646464;   
   text-align: justify;
   margin-bottom: 1em;
}
.popup-modal .description-box .technical-specifics li {
   font: 14px/24px 'opensans-regular', sans-serif;
   color: #646464;   
   text-align: justify;
   margin-bottom: 1em;
   list-style-type: circle; 
   margin-top: 0em;
   margin-bottom: 0em;
}
.popup-modal .description-box .technical-specifics u {
   margin-left: -3%;
}
.popup-modal .description-box .categories {
   font: 11px/21px 'opensans-light', sans-serif;
   color: #A1A1A1;
   text-transform: uppercase;
   letter-spacing: 2px;
   display: block;
   text-align: left;
}
.popup-modal .description-box .categories i {
   margin-right: 8px;
}
.popup-modal .link-box {
   padding: 18px 36px;
   background: #111;
   text-align: left;
   height: 10%;
}
.popup-modal .link-box a {
   color: #fff;
	font: 11px/21px 'opensans-bold', sans-serif;
	text-transform: uppercase;
   letter-spacing: 3px;
   cursor: pointer;
}
.popup-modal .back-arrow {
   /* padding: 18px 36px; */
   padding-bottom: 10%;
   padding-left: 0px;
   margin-left: -4%;
   background: #fff;
   text-align: left;
   /* height: 10%; */
}
.popup-modal .back-arrow a {
   /* color: #fff; */
	font: 36px/24px 'opensans-bold', sans-serif;
   letter-spacing: 3px;
   color: #111;
   /* padding-left: 0px; */
   cursor: pointer;
   margin-left: 0px;
}
.popup-modal .back-arrow a:hover {   
   color: #05a4af;
}

.popup-modal a:hover {	color: #07ebfc; }
.popup-modal a.popup-modal-dismiss { margin-left: 24px; }


/* fadein/fadeout effect for modal popup
/* ------------------------------------------------------------------ */

/* content at start */
.mfp-fade.mfp-wrap .mfp-content .popup-modal {
   opacity: 0;
   -webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
   transition: all 200ms ease-in-out;
}
/* content fadein */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-modal {
   opacity: 1;
}
/* content fadeout */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-modal {
   opacity: 0;
}

/* ------------------------------------------------------------------ */
/* d. Resume Section
/* ------------------------------------------------------------------ */

#resume {
   /* background: #f7d9cf1a; */
   background: #1e1e1e;
   /* background: #0e0e13; */
   padding-top: 60px;
   padding-bottom: 60px;
   overflow: hidden;
}

#resume h1 {
   font: 24px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   padding-bottom: 10px;
   /* color: rgb(241, 236, 236); */
   /* color: #dad6dd; */
   color: rgb(200, 205, 240);
}
#resume h1 span {
   border-bottom: 3px solid rgb(240, 147, 8);
   padding-bottom: 6px;
}
#resume h2 {
   font: 18px/24px 'opensans-semibold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   text-align: center;
   margin-bottom: 40px;
   margin-top: 0px;
   color: #cbcece;
}
#resume h3 {
   font: 24px/24px 'opensans-bold', sans-serif;
   padding-top: 10px;
   /* color: rgba(247, 200, 131, 0.8); */
   color: rgb(98, 151, 116);
   /* color: rgb(241, 236, 236); */
}

#resume .header-col { 
   padding-top: 9px; 
   padding-bottom: 20px;
   text-align: center;
}

.education, .work, .certification {
   margin-bottom: 48px;
   padding-bottom: 24px;
   border-bottom: 1px solid rgba(232, 234, 245, 0.2);
}
#resume a {
   color: rgb(240, 167, 8);
}
#resume .highlight {
   color: rgb(240, 167, 8);
}
#resume p {
   color: rgba(241, 236, 236, 0.9);
   /* margin-bottom: 4em; */
}
#resume .info {
   font: 16px/16px 'opensans-italic', sans-serif;
   /* color: #6E7881; */
   /* color: rgba(245, 214, 167, 0.9); */
   color: rgb(241, 236, 236);
   margin-bottom: 12px;
   margin-top: 9px;
}
#resume .info span {
   margin-right: 5px;
   margin-left: 5px;
}
#resume .date {
   font: 15px/15px 'opensans-regular', sans-serif;
   margin-top: 6px;
}
 
 input[type="checkbox"] {
   display: none;
 }
 .wrap-collapsible {
   margin: 1.2rem 0;
 }
 .lbl-toggle {
   font: 16px/16px 'opensans-italic', sans-serif;
   color: rgb(241, 236, 236);
   cursor: pointer;
   border-radius: 7px;
   transition: all 0.25s ease-out;
 }
 .lbl-toggle:hover {
   color:rgba(241, 236, 236, 0.5);
 }
 .lbl-toggle::before {
   content: "";
   display: inline-block;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   border-left: 5px solid currentColor;
   vertical-align: middle;
   margin-right: 0.7rem;
   transform: translateY(-2px);
   transition: transform 0.4s ease-out;
 }
 .toggle:checked + .lbl-toggle::before {
   transform: rotate(90deg) translateX(-3px);
 }
 .collapsible-content {
   max-height: 0px;
   overflow: hidden;
   transition: max-height 1s ease-out;
 }
 .toggle:checked + .lbl-toggle + .collapsible-content {
   max-height: 600px;
 }
 /* .toggle:checked + .lbl-toggle {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 } */
 .collapsible-content .content-inner {
   /* background: rgba(0, 105, 255, 0.2); */
   /* background: #fff; */
   border-bottom: 1px solid rgba(240, 147, 8, 0.3);
   border-bottom-left-radius: 7px;
   border-bottom-right-radius: 7px;
   padding-bottom: 1%;
   /* padding: 1rem; */
 }
 .collapsible-content p {
   margin-bottom: 0;
 }
 

/*----------------------------------------------*/
/*	Skill Bars
/*----------------------------------------------*/

.bars {
	width: 100%;
	float: left;
   padding-left: 10%;
   padding-right: 10%;
   text-align: left;
   margin-top: 2em;
}
.bars .skills {
   margin-top: 25px;
   list-style: none;
}
.bars li {
   position: relative;
  	margin-bottom: 45px;
  	background: rgba(241, 236, 236, 0.8);
  	height: 10px;
   border-radius: 3px;
}
.bars li em {
	font: 15px 'opensans-bold', sans-serif;
   color: rgb(241, 236, 236);
	text-transform: capitalize;
   letter-spacing: 2px;
	font-weight: normal;
   position: relative;
	top: -23px;
}
.bar-expand {
   position: absolute;
   left: 0;
   top: 0;
   margin: 0;
  	background: rgb(60, 65, 97);
   display: inline-table;
  	height: 10px;
   line-height: 10px;
   border-radius: 3px 0 0 3px;
}

:root {
   --python-amount: 95%;
   --java-amount: 90%;
   --cpp-amount: 90%;
   --javascript-amount: 82%;
   --android-amount: 80%;
   --htmlcss-amount: 70%;
   --linux-amount: 85%;
}

.python {
  	width: var(--python-amount);
  	-moz-animation: python 2s ease;
  	-webkit-animation: python 2s ease;
}
.java {
  	width: var(--java-amount);
  	-moz-animation: java 2s ease;
  	-webkit-animation: java 2s ease;
}
.cpp {
   width: var(--cpp-amount);
   -moz-animation: cpp 2s ease;
   -webkit-animation: cpp 2s ease;
}
.javascript {
   width: var(--javascript-amount);
   -moz-animation: javascript 2s ease;
   -webkit-animation: javascript 2s ease;
}
.android {
   width: var(--android-amount);
   -moz-animation: android 2s ease;
   -webkit-animation: android 2s ease;
}
.htmlcss {
   width: var(--htmlcss-amount);
   -moz-animation: htmlcss 2s ease;
   -webkit-animation: htmlcss 2s ease;
}
.linux {
   width: var(--linux-amount);
   -moz-animation: linux 2s ease;
   -webkit-animation: linux 2s ease;
}

@-moz-keyframes python {
  0%   { width: 0px;  }
  100% { width: var(--python-amount);  }
}
@-moz-keyframes java {
  0%   { width: 0px;  }
  100% { width: var(--java-amount);  }
}
@-moz-keyframes cpp {
   0%   { width: 0px;  }
   100% { width: var(--cpp-amount);  }
 }
 @-moz-keyframes javascript {
   0%   { width: 0px;  }
   100% { width: var(--javascript-amount);  }
 }
 @-moz-keyframes android {
   0%   { width: 0px;  }
   100% { width: var(--android-amount);  }
 }
 @-moz-keyframes htmlcss {
   0%   { width: 0px;  }
   100% { width: var(--htmlcss-amount);  }
 }
 @-moz-keyframes linux {
   0%   { width: 0px;  }
   100% { width: var(--linux-amount);  }
 }

@-webkit-keyframes python {
  0%   { width: 0px;  }
  100% { width: var(--python-amount);  }
}
@-webkit-keyframes java {
  0%   { width: 0px;  }
  100% { width: var(--java-amount);  }
}
@-webkit-keyframes cpp {
   0%   { width: 0px;  }
   100% { width: var(--cpp-amount);  }
 }
 @-webkit-keyframes javascript {
   0%   { width: 0px;  }
   100% { width: var(--javascript-amount);  }
 }
 @-webkit-keyframes android {
   0%   { width: 0px;  }
   100% { width: var(--android-amount);  }
 }
 @-webkit-keyframes htmlcss {
   0%   { width: 0px;  }
   100% { width: var(--htmlcss-amount);  }
 }
 @-webkit-keyframes linux {
   0%   { width: 0px;  }
   100% { width: var(--linux-amount);  }
 }

/* ------------------------------------------------------------------ */
/* i. Contact
/* ------------------------------------------------------------------ */
#contact {
   background: rgb(235, 235, 235);
   padding-top: 60px;
   padding-bottom: 60px;
}
#contact h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   text-align: center;
   color: #1e1e1eb3;
}
#contact .contactInput:onclick {
   background: rgb(98, 151, 116);
}


/* ------------------------------------------------------------------ */
/* j. Footer
/* ------------------------------------------------------------------ */

footer {
   padding-top: 20px;
   background: #1F1F1F url(../images/header-option1.jpg) no-repeat center center;
   background-size: cover !important;
	-webkit-background-size: cover !important;
   background-attachment: fixed;
   font-size: 14px;
   text-align: center;
   position: relative;
   height: 230px;
}

/* scrollup link */
footer .scrollup a {
   position: absolute;
   /* bottom: 30px; */
   left: 50%;
   margin-left: -29px;
   color: #fff;
   display: block;
   height: 42px;
   width: 42px;
   font-size: 42px;
   line-height: 42px;
   border-radius: 100%;

   /* -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out; */
}
footer .scrollup a:hover { color: #07ebfc; }

/* social links */
footer .social-links {
   /* margin: 18px 0 30px 0; */
   padding-top: 70px;
   font-size: 30px;
}
footer .social-links li a { color: #fff; }
footer .social-links li a:hover { color: #07ebfc; }
footer .social-links li {
   display: inline-block;
   margin: 0 15px;
   padding: 0;
   color: #fff;
}

/* copyright */
footer .copyright {
   margin: 0;
   padding: 0;
   text-align: center;
   color: #fff;
 }
footer .copyright li {
   margin: 0;
   padding: 0;
   color: #fff;
}
footer .copyright a { 
   color: #fff; 
   text-decoration: underline;
}
footer .copyright a:hover {color: #07ebfc; }