@font-face {
    font-family: avenir;
    src: url(../font/AvenirNext-UltraLight.ttf);
}

@font-face {
    font-family: avenirBold;
    src: url(../font/Avenir_Next.ttc);
}

html, body{
    background-color: #001b2d;
    background-image: url("../img/mymind_brains.png");
    background-size: 94%;
    background-position: center;
    background-repeat: no-repeat;
    background-position-y: -91px;
    background-position-x: 98px;
}




.container-fluid{
    width:100%;
}

.hei{
    height: 217px;
}

.hei2{
    height: 217px;
}

.hei3{
    height: 200px;
}

.pro{
    color: white;
    font-family: avenir;
    margin-left: 134px;
   
}

#txt{
    /* font-size: 81px;
    width: 800px; */
}

.fosi{
   font-weight: bold;
   font-family:  avenirBold;
 
}

.fosi1{
 font-weight: bold;
}

.imgsize1{
    width: 23em;
    padding-top: 66px;
    padding-left: 60px;
}


.imgsize{
    width: 10em;
    position: absolute;
    left: 629px;
    top: 83px;
}

.imgsize {
 /*    height: 200px;
    width: 200px; */
    -webkit-transition: all 2s ease;
       -moz-transition: all 2s ease;
        -ms-transition: all 2s ease;
            transition: all 2s ease;
  }
  .imgsize:hover {
    width: 50px;
    height: 50px;
  }


.nav{
    font-weight: bold;
    position: fixed;
    padding-left: 290px;
}

.nav-link{
    color: white !important;

}

.logout{
    display:none;
}


.nav-item :hover{
    color: rgb(104, 13, 99) !important;
}


@media screen and (min-width : 1024px){

    html, body{
        background-color: #001b2d;
        background-image: url("../img/mymind_brains.png");
        background-size: 94%;
        background-position: center;
        background-repeat: no-repeat;
        background-position-y: -91px;
        background-position-x: 98px;
    }


    #txt{
        font-size: 77px;
        width: 800px; 
    }

    .fosi1{
        font-weight: bold;
       }
   
       .logout{
        display:none;
    }
    
}


@media screen and (max-width : 768px){


    html, body{
        background-color: #001b2d;
        background-image: url("../img/mymind_brains.png");
        background-size: 243%;
        background-position: center;
        background-repeat: no-repeat;
        background-position-y: 107px;
    }

    .container-fluid{
        width:100%;
    }
    
    .hei{
        height: 171px;
    }
    
    .hei2{
        height: 217px;
    }
    
    .hei3{
        height: 200px;
    }
    
    .pro{
        color: white;
        font-family: avenir;
        margin-left: -7px
    }
    
    #txt{
     
    }
    
    .fosi{
       font-weight: bold;
       font-family:  avenirBold;
     
    }
    
    .fosi1{
     font-weight: bold;
    }

    #fontsiz{
        font-size: 16px;
    }
    
    .imgsize1{
         width: 14em;
         padding-top: 35px;
         padding-left: 68px;
    }
    
    
    .imgsize{
        position: absolute;
        left: 89px;
        top: 23px;
    }
    
    .nav{
        display: none;
        font-weight: bold;
        position: fixed;
        padding-left: 305px;
    }
    
    .nav-link{
        color: white !important;
    
    }
    
    .nav-item :hover{
        color: rgb(104, 13, 99) !important;
    }
    







        /*=================================================================================================================*/
        /*dropdown menu
        /*=================================================================================================================*/ 
        .dropbtn {
            background-color: transparent;
            color: #00FFC6;
            border: none;
            cursor: pointer;
            z-index: 35;
        }
        
        .dropbtn:hover, .dropbtn:focus {
            color: #001B2D;
            outline: none;
        }
        
        .dropd {
            position: relative;
            display: inline-block;
        }
        
        .dropd-content {
            display: none;
            position: absolute;
            /* background-color: #f1f1f1; */
            background-color: white;
            width: 360px;
            left: -324px;
            top: -123px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 28;
            height: 305px;
        }
        
        .dropd-content a {
            color: #001B2D;
            padding: 5px 14px;
            text-decoration: none;
            display: block;
            position: relative !important;
            top: 54px !important;
            text-align: center !important;
            font-family: inherit;
            font-weight: bold;
            font-size: 21px;
        }
        
        .dropd a:hover {background-color: #ddd;}
        
        .show {display: block}
       
        #imglog{
            width: 103px;
            position: relative;
            top: 32px;
            left: 129px;
        }
       
        .logout{
            display: block;
            position: absolute;
            right: 10%;
            bottom: 51px;
            font-size: 28px;
            font-weight: bold;
        }
  
        /*=================================================================================================================*/
        /*dropdown menu
        /*=================================================================================================================*/ 
  




}