*{
    margin:0px;
    padding:0px;
    font-family: myfont;
}
html{
    overflow-x:hidden;
}
body{
    overflow-x:hidden;
}
.contacts{
    position:fixed;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.8);
    z-index: 2;
    display:none;
}
.contacts>img{
    padding:30px;
    width:100px;
    cursor: pointer;
}
.contacts>div{
    display:flex;
    width:100%;
}
.contacts>section{
    margin: 90px;
    color:#fff;
    line-height: 60px;
    text-align: center;
}
.contacts>div>section{
    flex:1;
    display:inline-flex;
    color:#fff;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    line-height: 60px;
    font-size: 30px;
    padding:10px;
}
.ahmed{
    border-left: 2px solid gold;
}
.intro{
    background:#00b894;
    height:100vh;
    width:100%;
    display:inline-flex;
    align-items: center;
    justify-content: center;
}
header{
    height:150px;
    width:100%;
    background:url("imgs/header.png");
    background-size: 100% 100%;
    transform: translateY(-80px);
    transition:all 1s ease ;
    position:absolute;
    z-index: 1;
    text-align: center;
}
header>ul{
    display:inline-flex;
    font-size:30px;
    list-style: none;
    color:gold;
}
header li{
    margin:20px;
    padding:10px;
    cursor: pointer;
}
header>section{
    display:block;
    text-align: left;
}
header img{
    margin:10px;
    padding-bottom: 60px;
    cursor: pointer;
}
header:hover{
    transform: translateY(0px);
}
.container{
    position:relative;
    display: contents;
}
.w{
    position:absolute;
    font-size: 60px;
}
.Up{
    animation:Up 3s ease forwards;
    color:#fff;
}
.Down{
    animation:Down 4s ease forwards;
    color:#fdcb6e;
}
.about{
    
    font-size: 50px;
    text-align: center;
    color:#0984e3;
    padding-top:60px;
}
.about>div{
    display:flex;
    justify-content: center;
    align-items: center;
}
.about section{
    flex:1;
    padding:60px;
    padding-top:220px;
}

.gallery{
    background:#e17055;
    margin-top:60px;
    text-align: center;
    font-size:80px;
    color:gold;
}
.gallery>header{
    height:60px;
    width:100%;
    background:url("imgs/about_footer.png");
    background-size: 100% 100%;
    transform: translateY(0px);
    transition:all 1s ease ;
    position: unset;
    margin-bottom:60px;
    z-index: 1;
}
.photo{
    width:100%;
    transform:translateX(-550px);
    opacity:0;
    transition:all 1.5s ease;
    z-index: 1;
    margin-top:100px;
}
.photo>img{
    box-shadow:0px 0px 3px 3px #000;
}
.right{
    opacity: 1;
    direction: rtl;
    transform:translateX(120%);
}
.myfooter{
    background:url("imgs/myfooter.png");
    background-size:100% 100%;
    height:600px;
    width:100%;
}
@keyframes Up{
    0%{
        opacity:0%;
        letter-spacing: 15px;

    }
    100%{
        opacity: 100%;
        letter-spacing: 0px;
    }
}
@keyframes Down{
    0%{
        opacity:0%;
    }
    50%{
        opacity: 0%;
        transform:translateY(100px);
    }
    100%{
        opacity: 100%;
        transform:translateY(160px);
    }
}
#gallery2{
    display:none;
}
@font-face{
    font-family: myfont;
    src:url("BalsamiqSans-Bold.ttf");
}
@media screen and (max-width:767px){

    *{
        font-size: 10px;
        line-height:20px;
    }
    h1{
        font-size: 30px;
    }
    .about section{
        flex:1;
        padding:10px;
    }
    #gallery1{
        display:none;
    }
    #gallery2{
        display:block;
    }
    .myfooter{
        height:200px;
    }
    .contacts *{
        font-size:9px;
    }
}