*{
    margin: 0;
}
body{
    font-family: "Open Sans", serif;
    margin: 0;
}
.navbar{
    background-color: #6dd47e;
    overflow: hidden;
    width: 100%;
    position: fixed;
    max-height: 100%;
    z-index: 100;
}
.navbar a{
    display: inline-block;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 2.4em;
    font-weight: bolder;
}
.h1{
    display: inline;
}

@media  (max-width: 700px) {
    .navbar a:not(:first-child) {display: none;}
    .navbar a.icon {
        float: right;
        display: block;
    }
    .navbar a{
        color: black;
    }
}

@media  (max-width: 700px) {
    nav {
        font-size: 28px;
        padding: 2px;
    }

}



/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media  (max-width: 700px) {
    .navbar.responsive {position: relative;}
    .navbar.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .navbar.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}
/*.topnav {*/
/*    background-color: #6dd47e;*/
/*    overflow: hidden;*/
/*    width: 100%;*/
/*    position: fixed;*/
/*    max-height: 100%;*/
/*}*/

/*!* Style the links inside the navigation bar *!*/
/*.topnav a {*/
/*    display: inline-block;*/
/*    text-align: center;*/
/*    padding: 10px 16px;*/
/*    text-decoration: none;*/
/*    font-size: 2.4em;*/
/*    font-weight: bolder;*/

/*}*/
.navbar a:before , .topnav a:after{
    box-sizing: content-box;
}


/* Change the color of links on hover */
.navbar a:hover {
    color: yellow;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
.side-button{
    float: left;
    font-size: 2.4em;
    color: yellow;
    background-color: inherit;
    border: none;
    height: inherit;
    cursor: pointer;
    margin-top: 0.25em;
}
.side-button:hover{
    color: yellow;
}
.fa {
    height: 1.5em;
    text-align: center;
    text-decoration: none;
    float: right;
    position: relative;




}



/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
    background: #3B5998;
    color: white;
}
.fa-instagram {
    background: #125688;
    color: white;
}
.vertical {
    border-left: 3px solid white;
    height: 4.85em;
    display: inline-block;
    position: relative;
    float: right;
    top: 10%;
}
@media  (max-width: 600px) {
    .fa{

        float: right;
        width: 50px;

    }

    }

/* (A) FIXED WRAPPER */
.hwrap {
    overflow: hidden; /* HIDE SCROLL BAR */
    background: yellow;
    position: absolute;
    top: 4.8em;
    width: 100%;
    z-index: 500;
}

/* (B) MOVING TICKER WRAPPER */
.hmove { display: flex;
width: 100%}

/* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
.hitem {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    color:white;
    font-weight: bold;
    font-size: 20px;

}

/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
    0% { transform: translate3d(100%, 0, 0); }
    100% { transform: translate3d(-400%, 0, 0); }
}
.hmove { animation: tickerh linear 40s infinite; }
.hmove:hover { animation-play-state: paused; }
.sm{
    display: inline-block;
    float: right;
}
@media  (max-width: 600px) {
    .hwrap {
        display: none;

    }
}
    @media  (min-width: 200px) {
        .hwrap{
            z-index: 2;

        }

}

nav span{
    display:inline; font-family: sans-serif;font-size: 60px;font-weight: 900;
}


@media (max-width:325px) and (min-width:310px) {
    nav span{
        font-size:90%;
        padding:0.90px;
        
        
    }
   
}
@media (max-width:365px) and (min-width:355px) {
    nav span{
        font-size: 45%;
        
        
    }
   
}

@media (max-width:385px) and (min-width:365px) {
    nav span{
        font-size: 50%;
        
        
    }
   
}

@media (max-width:391px) and (min-width:380px) {
    nav span{
        font-size: 55%;
        
        
    }
   
}
@media (max-width:415px) and (min-width:410px) {
    nav span{
        font-size: 85%;
        
        
    }
   
}
@media (max-width:420px) and (min-width:413px) {
    nav span{
        font-size: 65%;
        
        
    }
   
}

@media (max-width:430px) and (min-width:425px) {
    nav span{
        font-size: 70%;
        
        
    }
   
}






   






















@media (max-width:1000px) and (orientation: landscape){
    nav span{
        font-size: 2.6em;
    }
}

.fa-instagram::before{
    font-size: 25px;
}
.fa-facebook::before{
    font-size: 25px;
}

@media (max-width:400px){
    .fa{
        padding-bottom: 8px;
        
    }
}
.fa-instagram {

    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );

}
.fa {
    text-align: center;
    text-decoration: none;
    padding: 10px;
    padding-bottom: 35px;

}

/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
    background: #3B5998;


}