:root {  
  --mainOrange:#d63e0f;
  --mainWhite: white;
  --highlightOrange:#F1560E;
}

::selection{
    background: var(--highlightOrange);    
}

.overlay {
   width:100%;
   height:100%;
   position:absolute; 
   z-index:3;
   background-color: rgba(0,0,0,0.4)
}

.slides-navigation{
    z-index: 6;
}
.slides-navigation .next, .slides-navigation .prev{
    width:50px;
    height:50px;
    background-size: cover;
    background-repeat: no-repeat;
}

.slides-navigation a.next{
    right:20px;
    background-image: url("../images/icons/next.png");

}

.slides-navigation a.prev{
    left:20px;
    background-image: url("../images/icons/previous.png");
}

.titleMessage {
    position: absolute;
    width:100%;
    height:250px;
    top:50%;
    z-index:5;
    text-align: center;
    margin-top: -125px;    
}

.titleMessage .heading p {
    color:#fff;
    text-shadow: 2px 2px 5px rgb(104, 102, 102);
    font-weight:100;
    letter-spacing: 5px;
    
}

.titleMessage .heading .main{
    font-size: 48px;
    font-weight: 500;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.titleMessage .heading .sub{
    font-size: 24px;
}

.section {
    padding: 100px 0;
}

.section-title-orange{
    font-size:36px;
    color:var(--mainOrange);        
    font-weight: 500;
}

.section-title-white{
    font-size:36px;
    color:var(--mainWhite);     
    font-weight: 500; 
}

.section-background-white{
    background-color:var(--mainWhite);   
}

.section-background-white p::selection{
    background: var(--highlightOrange);    
    color:var(--mainWhite);
    
    
}

.section-background-orange{
    background-color:var(--mainOrange);    
    color:var(--mainWhite);
}

.profilePic{
    border-radius: 50%;  
    width:200px;
    height:200px;     
}

.section{
    min-height: 100vh;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;  
}

.buttonToHome{    
    z-index: 10;
    position: absolute;
    bottom:10%;
    left: 50%;    
}

.fas{
    right:10px;
    position: relative;
}

.fa-arrow-circle-down{
    color:var(--mainWhite);
    color:white;
    size:7;
}

.fa-arrow-circle-down:hover{
    color:var(--mainOrange);
}

.skill{
    text-align: center;
    margin-left: 10px;
}

.chart{
    position: relative;
    width:152px;
    height:152px;
    display:inline-block;
    
    text-align:center;
}

.chart canvas{
    position: absolute;
    left: 0;
    top: 0
}

.chart .percent {
    color:var(--mainWhite);
    line-height:152px;
    display:inline-block;
    font-size:35px;    
}

.chart .percent:after{
    content:'%';
}

/*TIMELINE*/

.timeline ul {
  
  padding: 50px 0;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: black;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: var(--mainOrange);
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div { left: 45px; }

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent var(--mainOrange) transparent transparent;
}

.timeline ul li:nth-child(even) div { left: -439px; }

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent var(--mainOrange);
}

time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.timeline ul li::after { transition: background .5s ease-in-out; }

.timeline ul li.in-view::after { background: var(--mainOrange); }

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div { transform: translate3d(200px, 0, 0); }

.timeline ul li:nth-child(even) div { transform: translate3d(-200px, 0, 0); }

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}



@media screen and (max-width: 900px) {

    .timeline ul li div { width: 250px; }

    .timeline ul li:nth-child(even) div { left: -289px; /*250+45-6*/
    }
}

@media screen and (max-width: 600px) {

    .timeline ul li { margin-left: 20px; }

    .timeline ul li div { width: calc(100vw - 91px); }

    .timeline ul li:nth-child(even) div { left: 45px; }

    .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent var(--mainOrange) transparent transparent;
    }
}

.timeline-content{
    color:white
}

.timeline img{
    width:64px;
    height:64px;
}

.contactButton{
    color:var(--mainWhite);
    padding:15px 20px;
    display: inline-block;
    margin-top:20px;
    border: 1px solid var(--mainWhite);
    border-radius: 10px;
}

.contactButton:hover{
    text-decoration: none;
    color: var(--mainOrange);
    background-color: var(--mainWhite);
}

.submitContactForm{
    background-color: var(--mainOrange);
    color:var(--mainWhite);
    padding:15px 20px;
    display: inline-block;
    margin-top:20px;
    border: 1px solid var(--mainWhite);
    border-radius: 10px;
}

.submitContactForm:hover{
    background-color: var(--mainWhite);
    color:var(--mainOrange);
}

.contact-form{
    width:50%;
    margin:auto;   
}

.contact-input{
   margin:10px;
   color:var(--mainOrange);
    
}

.contact-input::placeholder{
    color:var(--mainOrange);
}

.contact-input:focus{
    color:var(--mainOrange);
    outline:none;
}

.contact-input::selection{
    color:var(--mainWhite);
}

.filter a{
    color:var(--mainOrange);
    border:1px solid var(--mainOrange);
    padding:10px 18px; 
    display:block;
    margin:5px;
}

.filter li {
    display: inline-block;
}

.filter .current {
    background-color: var(--mainOrange);
    color:var(--mainWhite);
}

.filter {
    text-align:center;
    width:100%;
}

.items li {
    display:inline-block;
    padding:10px;

}

.itemsContainer {
    width:100%;
}

.items li img {
    width: 100%;
    -webkit-transition: all 0.2s linear, 1s;
    -moz-transition: all 0.2s linear, 1s;
    -o-transition: all 0.2s linear, 1s;
    -ms-transition: all 0.2s linear, 1s;
    -transition: all 0.2s linear, 1s;
}

.items .item {
    position: relative;
    display: block;
    overflow: hidden;
}

.items .icons {
    position: absolute;
    width: 90px;
    height: 40px;
    left: 50%;
    top:50%;
    margin: -20px auto 0 -47px;
    text-align: center;
    z-index: 3;
}

.items .icons i {
    color:var(--mainWhite);
    font-size: 20px;
    margin-top: 9px;
}

.items a {
    width: 40px;
    height: 40px;
    background-color: var(--mainOrange);
    position: relative;
    display: inline-block;
    -webkit-transition: all 0.2s linear, 0.2s;
    -moz-transition: all 0.2s linear,  0.2s;
    -o-transition: all 0.2s linear,  0.2s;
    -ms-transition: all 0.2s linear,  0.2s;
    -transition: all 0.2s linear,  0.2s;
}

.items .imageOverlay{
    width:100%;
    height:100%;
    background-color: rgb(0,0,0,0.5);
    position: absolute;
    left:0px;
    top:0px;
    opacity: 0;

    -webkit-transition: all 0.2s linear, 1s;
    -moz-transition: all 0.2s linear, 1s;
    -o-transition: all 0.2s linear, 1s;
    -ms-transition: all 0.2s linear, 1s;
    -transition: all 0.2s linear, 1s;
}

.items .item:hover .imageOverlay{
    opacity:1;
}

.items .openButton {
    float:left;
    left:-200px;    
}

.items .projectLink {
    float:right;
    right:-200px;
}

.items .item:hover .openButton{
    left:0px;
}

.items .item:hover .projectLink{
    right:0px;
}

.items .item:hover img{
    -webkit-transform: scale(1.05,1.05);
    -moz-transform: scale(1.05,1.05);
    -o-transform: scale(1.05,1.05);
    -ms-transform: scale(1.05,1.05);
    -transform: scale(1.05,1.05);
}

.items{
    padding:0;
}

.project-description{
    margin-bottom: 10px;
}

.copyrightSection{
    background-color: black;
    color:white;
    padding:30px 5px;
}

.copyrightSection p {
    margin: 0;
}

#navigation{
    background-color: var(--mainOrange);
    padding:20px 10px;
    z-index:100;      
    position: sticky;
    position: -webkit-sticky;
    top:0;     
}

#navigation li{
    padding:0 10px;    
}

#navigation li a{
    color: var(--mainWhite);
    font-family: Arial, Helvetica, sans-serif;
    
}

.navbar-brand,
.navbar-brand:hover{
    color:var(--mainWhite);
}

.navbar-toggler-icon{
    background:url(../images/icons/menu.png);
    background-size:100%;
}

.loader {
    width:100%;
    height:100%;
    background-color:white;
    position: fixed;
    top:0px;
    left:0px;
    z-index:1000;    
}

.loader .inner{
    width:100%;
    height:100%;
    background: url(../images/icons/loading.gif) center center no-repeat;
}

.viewResume{
    margin:auto;
}

.ResumeLink{
    padding:15px 20px;
    display: inline-block;
    margin-top:10px;
    border: 1px solid var(--mainWhite);
    border-radius: 10px;
    color:var(--mainWhite);
}

.ResumeLink:hover{
    text-decoration: none;
    color:var(--mainOrange);
    background-color: var(--mainWhite);
}