@font-face {
    font-family: 'Arvo-Regular';
    src: url('../fonts/Arvo-Regular.eot');
    src: url('../fonts/Arvo-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Arvo-Regular.woff') format('woff'),
         url('../fonts/Arvo-Regular.ttf') format('truetype'),
         url('../fonts/Arvo-Regular.svg#capsuularegular') format('svg');
    font-style: normal;
}



body, html{
 display : block;
 position : relative;
 width : 100% !important;
 font-family: 'Raleway' !important;
 font-weight: 600;
 margin : 0 !important;
 overflow-x: hidden;
 background: #1a1819;
}


body{
 background: #1a1819 ! important;
}

/*-- bootstrap row --*/

p{
    color : #878787;
}
/*-- content container --*/
.content-container{
 display : block;
 position : relative;
 width : 86%;
 margin : 0 auto;
}

/*-- clear-fix, clearing all floats --*/
.clearfix{
 clear : both;
}


/*-- navigation --*/
#nav{
    display: block;
    position: fixed;
    width: 100%;
    z-index: 2;
    min-height: 57px;
    transition: all ease-in-out 0.5s;
}


.black-nav{
    background: rgba(0,0,0,0.4);
    padding: 10px 50px;
    transition: all ease-in-out 0.5s;
}


#nav ul {
    margin-top: 17px;
    margin-bottom: 10px;
}

#nav ul li{
    list-style: none;
    float: right;
    display: inline-block;
    margin-right: 7%;

}


#nav ul li a{
 position: relative;
 font-size: 13px;
 text-transform : uppercase;
 color: white;
 padding-top: 14px;
 padding-bottom: 5px;
 padding: 0px 5px 5px 5px;
 border-bottom: 3px solid transparent;
}

#nav ul li a:focus, a:visited{
    color: #efefef;
}
nav ul li a:hover{
 top:  2px;
 padding-bottom: 6px;
 color: #efefef;
 text-decoration: none;
 border-bottom: 3px solid #bd032a;
 transition: 0.5s ease-in-out all;
}

@media (max-width : 449px){
   .black-nav {
    padding: 10px 0px; 
    }
}

@media (max-width : 348px){
    .content-container{
       width : 94%; 
    }
    
}
/*-- End! - navigation  --*/

/*-- header --*/
header{
 display : block;
 position : relative;
 width : 100%; 
 min-height : 100vh;
 background : url(../images/background2.jpg) no-repeat;
 background-size:  cover;
 background-attachment:  fixed;
}



.logo{
    margin-top : 37px;
    font-size : 31px;
    padding-right : 0px;
    float : left;
}

.logo span{
    color : #f26522;
    font-weight : bold;
}


.intro{
    font-size: 53px;
    font-family: 'Raleway', sans-serif !important;
     text-shadow: 1px 3px 2px black;
     margin-top: 4px;
    text-transform: uppercase;
    font-weight: 300;
    margin-top: 15%;
    opacity: 0;
    position: relative;
    color: white;
    width: 100%;
    margin-bottom: 0px;
    padding-left: 9%;
}

.intro span{
    font-weight: 500;
}


.intro-line {
    margin-top: 1%;
    margin-bottom: 0px;
    display: block;
    opacity: 0;
    margin-left: 9%;
    position: relative;
    width: 77px;
    border-top: 3px solid #eee;
}




.intro-line2 {
    top: 26px;
    margin-bottom: 0px;
    display: block;
    opacity: 0;
    margin-left: 42%;
    position: relative;
    width: 77px;
    box-shadow: 1px -1px 7px black;
    border-top: 6px solid #eee;
}

.desc{
    font-size: 35px;
    font-family: 'Kaushan Script', cursive !important;
    position: relative;
    text-shadow: 2px 2px 0px black;
    /*--text-shadow: 2px -3px 1px black;--*/
    color: rgb(189,3,42);
    margin-top: 1px;
    opacity: 1;
    text-align: left;
}

.profile{
    width: 47%;
    display: block;
    margin-top: 21px;
    opacity: 0;
    padding-left: 9%;
    position: relative;
    float: left;
}

.info{
    font-size: 20px;
    color: white;
    display: inline-block;
    opacity: 0;
    text-shadow: 1px 3px 2px black;
    font-weight: 400;
    font-family: Raleway;
    position: relative;
    text-align: left;
}


@media (max-width : 879px){
   
    .intro{
       margin-top : 38%; 
    }
    
    .profile{
    width: 70%;
    }
    
}

@media (max-width : 506px){
   
    .intro{
       font-size : 43px;
    }
    
    .profile{
    width: 91%;
    }
    
     .intro-line2 {
      margin-left : 72%;   
    }
    
}


@media (max-width : 386px){
   
    .intro{
       font-size : 33px;
    }   
    .info {
    font-size: 18px;
    }
    
    .desc {
    font-size: 29px;
    }
    
}

.scroll-down-btn{
    background: url(../images/arrow.png) no-repeat;
    left: 50%;
    margin-left: -32px;
    background-size: 66px;
    margin-top:  0px;
    opacity: 0.4;
    padding: 33px;
    position: absolute;
    bottom: 4%;
}

header .divide {
    height: 14px;
    width: 100%;
    position: absolute;
    bottom: -14px;
    z-index: 4;
    /* border-top: 1px solid #efeeee; */
    background: url(../images/divide.png) no-repeat;
    background-position: center;
    background-size: contain;
}
/*-- End! of header  --*/


/*-- main-content --*/
main{
 display : block;
 position : relative;
 width : 100%;
}


/*---- Projects----*/


#Projects{
 display: block;
 padding:  93px 0px 93px 0px;

}



#Projects h1{
    text-align: center;
    color: #bd032a;
    font-family: 'Raleway', sans-serif !important;
    font-weight:  300;
    font-size: 55px;
    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 70px;
}

#Projects h1 span{
    font-family: 'Kaushan Script', cursive !important;
}

 .swiper-container {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px !important;
      height: 380px !important;
      overflow: hidden;
    }
    
    .img-info {
    background: #fefefe;
    color: #080808;
    padding: 10px 20px;
    height: 100%;
    width: 100%;
}
    
#Projects .websites{
 /*perspective: 600px;*/
 margin-bottom: 85px;
}

/*---- Projects----*/


#Contact-Me{
 display: block;
 padding: 93px 0px 93px 0px;
 

}

#Contact-Me .divide{
    height: 14px;
    width: 100%;
    position: absolute;
    top: 0;
    background: url(../images/divide.png) no-repeat;
    background-position: top 0 center;
}

#Contact-Me h1{
    text-align: center;
    color: #bd032a;
    font-family: 'Raleway', sans-serif !important;
    font-weight:  300;
    font-size: 55px;
    margin-top: 0px;
    margin-bottom: 70px;
}

#Contact-Me h1 span{
    font-family: 'Kaushan Script', cursive !important;
}

#Contact-Me img{
   width: 100%;
   height:  auto;
}

#Contact-Me .contact-info{
 line-height: 30px;
}

#Contact-Me .contact-info span{
 font-family: 'Kaushan Script', cursive !important;
 font-size:  19px;
 color: #bd032a;
}

#Contact-Me .contact-info a{
 color: white;
}




/*-- End! of main-content  --*/

/*-- side bar --*/
aside{
 display : block;
 position : relative;
 width : 100%;
}

/*-- End! of side-bar  --*/

/*-- footer --*/


/*-- End! of Footer  --*/

/* -- media query - */
@media(max-width : 506px){
   #Contact-Me .websites{
     display : none;  
    }
    
}