/*=========================================*/
            /*Base Elements Style*/
/*=========================================*/
    

    * {
        box-sizing: border-box;
    }

    body,
    article {
        text-align: center;
        width: 100%;
    }



    input,
    textarea {
        margin: 20px auto;
        text-align: center;
        font-size: 20px;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .admission {
        font-size: 40px;
        background-color: #222;
        opacity: 0.6;
    }

    #video-background {
      position: fixed;
      right: 0; 
      bottom: 0;
      min-width: 100%; 
      min-height: 100%;
      width: auto; 
      height: auto;
      z-index: -100;
    }

    /*FONTS*/

    .main-nav a,
    .main-banner h1,
    p,
    h2,
    h3 {
        font-family: 'Raleway', sans-serif;
    }

    .admission {
        font-family: 'Acme', sans-serif;
        color: #1DE6BB;
    }

    .main-header h1,
    #main-banner p,
    #main-banner h1 {
        font-family: 'Acme', sans-serif;
    }




    /*HEADER*/

    .main-header {
        background-color: #222;
        height: 655px;
        padding-top: 1px;
        animation-delay: 1.5s;
    }

    .main-nav a {
        text-decoration: none;
        color: #F5F5F5;
    }

    .main-nav a:hover {
        text-decoration: underline;
    }

    .main-nav {
        display: block;
        font-size: 40px;
        text-transform: uppercase;
    }

    .main-nav .active {
        color: #1DE6BB;
    }

    .main-header h1 {
        font-size: 48px;
        margin: 0 10px;
    }

    .main-nav li {
        margin-top: 65px;
    }

    .name a {
        color: #1DE6BB;
        text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
        text-decoration: none;
    }

    .bg-black {

        background-color: #222;
        opacity: 1;
    }


    /*BANNER*/

    #main-banner {
        height: 400px;
    }

    #main-banner h1 {
        font-size: 40px;
        color: #F5F5F5;
        text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
    }

    #main-banner p {
        font-size: 25px;
    }

    #main-banner p,
    #main-banner h1 {
        color: #F5F5F5;
        text-shadow:    0 -3px 0 #333,
                        0 6px 8px rgba(0,0,0,.4),
                        0 9px 10px rgba(0,0,0,.15),
                        0 30px 10px rgba(0,0,0,.18),
                        0 15px 10px rgba(0,0,0,.21);
}

    /*ABOUT*/

    #about {
        height: 955px;
    }

    #about p {
        margin-bottom: 50px;
        font-size: 20px;
        color: #F5F5F5;
    }

    /* ----------------------> myPhoto <-----------------------*/

            .myphoto {
                border-radius: 0px 76px 73px 0px;
            }

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

            .box-shadow::before {
                content: "";
                position: absolute;
                z-index: -1;
                bottom: 50px;;
                height: 12%;
                top: 69%;
                width: 70%;
                left: 108px;
                box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
                transform:skew(50deg);
                transform-origin: 0 100%
            }
    /*-----------------------------------------------------*/

    /*SKILLS*/

    #skills {
        height: 2850px;
    }

    #skills h2 {
        color: #fff;
        font-size: 30px;
        text-shadow:    0 -3px 0 #333,
                        0 6px 8px rgba(0,0,0,.4),
                        0 9px 10px rgba(0,0,0,.15),
                        0 30px 10px rgba(0,0,0,.18),
                        0 15px 10px rgba(0,0,0,.21);
    }

    #skills p {
        font-size: 23px;
        color: #F5F5F5;
    }

    /*PROJECTS*/

    #projects {
        color: #F5F5F5;
        height: 2850px;
    }

    #projects h2 {
        font-size: 30px;
        text-shadow:    0 -3px 0 #333,
                        0 6px 8px rgba(0,0,0,.4),
                        0 9px 10px rgba(0,0,0,.15),
                        0 30px 10px rgba(0,0,0,.18),
                        0 15px 10px rgba(0,0,0,.21);
    }

    #projects p {
        font-size: 23px;
    }

    #projects img {
        border-radius: 10px 10px 10px 10px;
}

    /*CONTACT*/

    #contact h2 {
        text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
        color: #F5F5F5;
        font-size: 27px;
    }

    #contact h3 {
        color: #1DE6BB;
        font-size: 20px;
    }

    #contact p {
        color: #F5F5F5;
        font-size: 24px;
    }

    #contact img {
        margin-left: 15px;
        border-radius: 50%;
    }

    /*-------------------------> FORM <-------------------------*/

            #contact form {
                margin:0 20px;
            }

            #contact textarea {
                width: 330px;
                height: 200px;
                resize: none;
            }

            #contact button {
                width: 330px;
                height: 80px;
            }
                
            #contact button p {
                text-align: center;
                font-size: 25px;
                margin: 0;
            }

            #contact input[type="text"],
            #contact input[type="email"] {
                width: 330px;
                height: 50px;
            }

            #contact textarea[placeholder] {
                text-align: center;
            }

            #contact input[type="text"],
            #contact input[type="email"],
            #contact textarea,
            #contact button[type="submit"] {
                font-family: 'Open Sans', sans-serif;
                font-weight: 600;
                border-radius: 5px;
            }

            #contact fieldset {
                border: medium none !important;
                margin: 0 0 10px;
                padding: 0;
            }

            #contact input[type="text"],
            #contact input[type="email"],
            #contact textarea {
                width:100%;
                border:1px solid #EBF4F7;
                background:#2474A6;
                margin:0 0 5px;
                padding:10px;
            }

            #contact input[type="text"]:hover,
            #contact input[type="email"]:hover,
            #contact textarea:hover {
                -webkit-transition:border-color 0.3s ease-in-out;
                -moz-transition:border-color 0.3s ease-in-out;
                transition:border-color 0.3s ease-in-out;
                border:3px solid #1DE6BB;
            }

            #contact button[type="submit"] {
                cursor:pointer;
                width:100%;
                border:none;
                background: #2474A6;
                color:#FFF;
                margin:0 0 5px;
                padding:10px;
                font-size:15px;
            }

            #contact button[type="submit"]:hover {
                background:#E00B27;
                -webkit-transition:background 0.3s ease-in-out;
                -moz-transition:background 0.3s ease-in-out;
                transition:background-color 0.3s ease-in-out;
            }

            #contact button[type="submit"]:active {
                box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5);
            }

            ::-webkit-input-placeholder {
             color:#EBF4F7;
            }
            :-moz-placeholder {
             color:#EBF4F7;
            }
            ::-moz-placeholder {
             color:#EBF4F7;
            }
            :-ms-input-placeholder {
             color:#EBF4F7;
            }


/*-----------------------------------------------------------*/



/*------------------------> PRELOADER <---------------------------*/

            #ud_preloader { 
                position:fixed; 
                top:0;
                left:0;
                right:0;
                bottom:0;
                width:100%;
                height:100%;
                z-index:10000;
            }

            #ud_preloader .ud_pre_half {
                background:#111;
                width:50%;
                height:100%;
                position:absolute;
                top:0;
                bottom:0;
            }

            #ud_preloader #ud_bg_left {
                left:0;
            }

            #ud_preloader #ud_bg_right {
                right:0;
            }
            #ud_preloader #ud_dots {
                z-index:10001;
                width:150px;
                position:absolute;
                top:50%;
                left:50%;
                transform:translateX(-50%) translateY(-50%);
            }

            #ud_preloader #ud_dots p {
                width:100%;
                margin:0 0 30px 0;
                color:#fff;
                font-size:12px;
                text-align:center;
            }

            #ud_preloader #ud_dots .ud_dot {
                animation: infinite 500ms ease-in-out;
                border-radius:30px;
                width:30px;
                height:30px;
                background:#fff;
                float:left;
                margin:0 10px 0 0;
            }

            #ud_preloader #ud_dots .ud_dot:last-child {
                margin:0 0 0 0;
            }

                @keyframes ud_preloader_1 {
                    0% { background:#fff; transform:translateY(0);}
                    25% { background:#ff6600; transform:translateY(-5px);}
                    50% { background:#fff; transform:translateY(0);}
                }

                @keyframes ud_preloader_2 {
                    25% { background:#fff; transform:translateY(0);}
                    50% { background:#ff6600; transform:translateY(-5px);}
                    75% { background:#fff; transform:translateY(0);}
                }

                @keyframes ud_preloader_3 {
                    50% { background:#fff; transform:translateY(0);}
                    75% { background:#ff6600; transform:translateY(-5px);}
                    100% { background:#fff; transform:translateY(0);}
                }

                @keyframes ud_preloader_4 {
                    75% { background:#fff; transform:translateY(0);}
                    100% { background:#ff6600; transform:translateY(-5px);}
                    25% { background:#fff; transform:translateY(0);}
                }

/*---------------------------------------------------*/