@import url(style.css);



/*SMARTFONS Landscape */

@media  (min-width : 320px) and (max-width: 767px) {
    
        .sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 500;
    }
    
    
    .burger-nav {
        display: block;
        height: 40px;
        background: url(../img/menu.png) no-repeat right;
        background-size: contain;
        background-color: #222;
        cursor: pointer;
    }
    
    .main-header {
        height: auto;
        opacity: 0.9;
    }
    
    .main-header h1 {
        font-size: 30px;
        text-align: center;
    }
    
    .main-nav {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        font-size: 20px;
        width: 100%;
        background-color: #222;
        overflow: hidden;
        height: 0;
    }
    
    .main-nav.open {
        height: auto;
    }
    
    .main-nav li {
        margin: 20px 50px 20px auto; 
    }
    
        .bg-black {
        opacity: 0.65;
    }
    
    #main-banner {
        height: auto;
        margin: 150px auto;
    }
    
    #about {
        height: auto;
    }
    
    
                /*---------------> myPhoto <-------------------*/
                .myphoto {
                    height: 270px;
                    width: 200px;
                }

                .box-shadow {
                    position: relative;
                    display: inline-block;
                    height: 330px;
                    width: 260px;
                    margin-left: 30px;
                }

            /*----------------------------------------------*/
}




/* iPads (portrait and landscape) ----------- */


@media (min-width: 768px) {
    
        /*BASIC*/
    
    .sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 500;
    }
    
    .main-header,
    .main-nav,
    .main-about,
    .main-skills,
    .main-projects,
    .main-contact {
        display: flex;
    }
    
    
    /*HEADER*/
    
    .main-nav {
        font-size: 25px;
    }
    
    .main-nav li {
        margin-right: 30px;
        margin-left: 30px;
        margin-top: 10px;
    }
    
    .main-header {
        flex-direction: column;
        align-items: center;
        height: 120px;
    }
    
    .bg-black {
        opacity: 0.65;
    }
    
    /*BANNER*/
    
    #main-banner {
        height: 600px;
    }
    
    #main-banner h1 {
        margin-top: 350px;
        font-size: 80px;
    }
    
    #main-banner p {
        font-size: 45px;
    }
    
    /*ABOUT*/
    
    
    .main-about .col {
        margin-left: 30px;
        margin-right: 30px;
        padding: 0;
        flex: 1 40%;
    }
    
    .main-about {
        margin-top: 100px;
        flex-wrap: wrap;
    }
    
    #about p {
        font-size: 27px;
    }
    
    .myphoto {
        margin-top: 70px;
    }
    
    .box-shadow::before {
        top: 87%;
    }
    
    /*SKILLS*/
    
    #skills {
        height: 1600px;
    }
    
    .main-skills {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .main-skills .col {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 40px;
        flex: 1 33%;
    }
    
    /*PROJECTS*/
    
    #projects {
        height: 1700px;
    }
    
    .main-projects {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 100px;
    }
    
    .main-projects .col {
        margin-top: 50px;
        margin-left: 13px;
        margin-right: 13px;
        flex: 1 33%;
    }
    
    /*CONTACT*/
    
    #contact {
        height: 970px;
    } 
    
    .main-contact .col {
        margin-top: 40px;
        margin-left: 13px;
        margin-right: 13px;
        flex: 1 33%;
    }
}

/* Desktops and laptops ----------- */

@media (min-width : 1224px) {
    
    /*BASIC*/
    
    .sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 500;
    }
    
    .admission {
        font-size: 55px;
    }
    
    /*HEADER*/
    
    .main-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 45px;  
        align-items: center;
        padding: 0 20px;
    }
    
    .main-header h1 {
        font-size: 25px;
    }
    
        .main-nav a {
        font-size: 20px;
    }
    
    .main-nav {
        display: flex;

    }
    
    .main-nav li {
        align-items: center;
        margin: 0 20px;
        font-size: 30px;
    }
    
    /*BANNER*/
    
    #main-banner h1 {
        font-size: 90px;
    }
    
    #main-banner p {
        font-size: 80px;
    }
    
/*-------------------> SCROLL <---------------------*/
    
                :after,
                .scroll-down:before {
                  box-sizing: border-box;
                  margin: 0;
                  padding: 0;
                }

                    .scroll-down {
                  opacity: 1;
                  -webkit-transition: all .5s ease-in 3s;
                  transition: all .5s ease-in 3s;
                }

                    .scroll-down {
                  position: absolute;
                  top: 93%;
                  bottom: 20px;
                  left: 50%;
                  margin-left: -16px;
                  display: block;
                  width: 32px;
                  height: 32px;
                  border: 2px solid #FFF;
                  background-size: 14px auto;
                  border-radius: 50%;
                  z-index: 2;
                  -webkit-animation: bounce 2s infinite 2s;
                  animation: bounce 2s infinite 2s;
                  -webkit-transition: all .2s ease-in;
                  transition: all .2s ease-in;
                  transform: scale(1);
                }

                .scroll-down:before {
                    position: absolute;
                    top: calc(50% - 8px);
                    left: calc(50% - 6px);
                    transform: rotate(-46deg);
                    display: block;
                    width: 13px;
                    height: 13px;
                    content: "";
                    border: 2px solid white;
                    border-width: 0px 0 2px 2px;
                }

                @keyframes bounce {
                  0%,
                  100%,
                  20%,
                  50%,
                  80% {
                    -webkit-transform: translateY(0);
                    -ms-transform: translateY(0);
                    transform: translateY(0);
                  }
                  40% {
                    -webkit-transform: translateY(-10px);
                    -ms-transform: translateY(-10px);
                    transform: translateY(-10px);
                  }
                  60% {
                    -webkit-transform: translateY(-5px);
                    -ms-transform: translateY(-5px);
                    transform: translateY(-5px);
                  }
                }
    
    
    
    
    
/*----------------------------------------------------*/
    
        /*ABOUT*/
    
    #about {
        height: 100%;
    }
    
    #about p {
        font-size: 30px;
    }
    
    .main-about {
        display:flex;
        align-items: center;
        margin: 200px 20px;
    }
    
    .main-about .col {
        flex: 1 20%;
        margin-left: 35px;
    }
    
    
    /*SKILLS*/
    
    #skills {
        height: 1000px; 
    }
    
    #skills h2 {
        font-size: 40px;
    }
    
    #skills p {
        font-size: 25px;
        color: #F5F5F5;
    }
    
    .main-skills {
        margin: 0 20px;
        display: flex;
        align-items: flex-start;
        flex-wrap:wrap;
        flex-direction: row;
    }
    
    .main-skills .col {
        margin: 30px auto;
        flex: 1 24%;
    }
    
    
    /*PROJECTS*/
    
    #projects {
        height: 1300px; 
    }
    
    #projects h2 {
        font-size: 40px;
    }
    
    #projects p {
        font-size: 25px;
        color: #F5F5F5;
    }
    
    .main-projects {
        margin: 0;
        display: flex;
        align-items: flex-start;
        flex-wrap:wrap;
        flex-direction: row;
    }
    
    .main-projects .col {
        margin: 30px auto;
        flex: 1 30%;
    }
    
    /*CONTACT*/
    
    .main-contact {
        display: flex;
    }
    
    .main-contact .col {
        margin: 30px;
        flex: 1 33%;
    }
    
    #contact h2 {
        font-size: 45px;
    }
    
    #contact p {
        font-size: 25px;
    }
    
    #contact img {
        height: 50px;
        width: 50px;
    }
    
    #contact h3 {
        font-size: 25px;
    }
}
    
/* Large screens ----------- */
    
@media (min-width : 1824px) {
        
    /*HEADER*/
    .main-header {
        height: 65px;
    }
    .main-nav a {
        font-size: 25px;
    }

    .name a {
        font-size: 35px;
    }

    /*BANNER*/

    #main-banner {
        height: 700px;
    }
        
        /*---------------> SCROOL <-------------------*/
        
                .scroll-down {
                    width: 60px;
                    height: 60px;
                }

        /*----------------------------------------------*/
        
        
    /*ABOUT*/

    #about {
        height: 950px;
    }
    
    #about img {
        height: 440px;
        width: 340px;
    }
    
    #about p {
        font-size: 35px;
    }
        /*---------------> myPhoto <-------------------*/
                .box-shadow {
                    height: 515px;
                    width: 413px;
                }
        
        /*----------------------------------------------*/
        
    /*SKILLS*/
    
    #skills {
        height: 950px; 
    }
    
    #skills .col {
        margin: 5px;
    }
    
    #skills h2 {
        font-size: 43px;
    }
    
    #skills p {
        font-size: 28px;
    }
    
    /*PROJECTS*/
    
    #projects h2 {
        font-size: 43px;
    }
    
    #projects p {
        font-size: 28px;
    }
    
    /*CONTACT*/
    
    #contact {
        height: 1010px;
    }
    
    #contact h2 {
        font-size: 60px;
    }
    
    #contact h3 {
        font-size: 40px;
    }
    
    #contact p {
        margin: 50px auto;
        font-size: 35px;
    }
    
    #contact img {
        height: 70px;
        width: 70px;
    }
    
            /*---------------> Form <-------------------*/
                    
                #contact textarea {
                    height: 200px;
                }
                
                #contact input[type="text"],
                #contact input[type="email"] {
                    height: 70px;
                }
    
                #contact input[type="text"],
                #contact input[type="email"],
                #contact textarea,
                #contact button[type="submit"] {
                    font-size: 25px;
                }

            /*----------------------------------------------*/
}