body {
            background-color: rgb(123, 188, 209);
            font-family: Arial, sans-serif;
            color: rgb(255, 255, 255);
            margin: 0;
            padding: 0;
        }
        header {
            background-color: black;
            background-image: url("images/‪+27\ 82\ 300\ 3107‬\ 20170925_111930.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            height: 400px;
            text-align: center;
            
        }
       
        header .mobile {
            display: none;
        }
        header a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            text-transform: uppercase;
            margin-top: 40px;
        }
        header .logo a{
           background-image:url("images/Gabriel\ Level\ 3\ 20170916_184812.jpg");
           background-size: 300px ; 
           background-repeat: no-repeat; 
           position: relative;
           top: -30px;
           width: 300px;
           height: 80px;
           text-indent: -9999px;
           display: inline-block;
            
        } 
        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;  
        }
        nav li {
            display: inline-block;
            margin-right: 20px;
            color: rgb(255, 255, 255);
        }

        /* responsive */
        @media screen and (max-width: 650px) {
            header {
                height: 250px;
                background-position: 0 -40px;
            }
            header .mobile {
                display: inline-block;
            }
            header .desktop {
                display: none;
            }
        } @media screen and (max-width: 400px) {
           header {
                height: 200px;
                background-position: 0 -0px;
            } 
        }
        .features {
            background:white;
            color:gray;
            padding: 20px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            
        }
        .features figure {
            margin: auto;
            text-align: center;
            text-transform: uppercase;
            width: 200px; 
        }
        .features figure img { 
            border: 1px solid black;
            width: 200px;
            box-shadow: black 0px 0px 10px;
            border-radius: 50% ;
        }
        
        /* responsive 
        @media screen and (max-width: 650px) {
            .features {
                display: block;
            }
            
        }*/
        
        footer {
            background:black;
            color: gray;
            font-size: 12px;
            padding: 20px 20px;
            text-align: center;
            text-transform: uppercase;
            font-weight:bold ;
            
        }
        @media screen and (min-width: 600px) {
            .features {
                background: red;
               
            }
        }
        @media screen and (min-width: 800px) {
            .features {
                background: pink;
               
            }
        }