/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
    .navbar-brand .logoM { display: none }
    .navbar-brand .logo { display: block }
}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
    .navbar-brand .logoM { display: none }
    .navbar-brand .logo { display: block }

    main .bolum1 p { font-size: 2.3em }

    main .bolum2 { height: 30em; background-size: cover }
        main .bolum2 div { font-size: 1.1em; line-height: 1.2em; }
            main .bolum2 div h5 { font-size: 1.1em }
    main .bolum3 { height: 38.6em; background-size: cover }
        main .bolum3 div ul { font-size: 1.9em; }
            main .bolum3 div ul li { text-align: center; line-height: 2em }
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
    header .navbar-toggler { border-radius: 0 }
    header .navbar-nav { text-align: right; background-color: #fff; margin-top: -80px; z-index: 999 !important }
        header .navbar-nav ul { border: 1px solid rgba(0, 0, 0, 0.1); margin-right: 8px; }
            header .navbar-nav ul li { margin-right: 15px; margin-top: 5px }

    .navbar-brand .logoM { display: none }
    .navbar-brand .logo { display: block }
    main .bolum1, main .contact { height: 30em }
        main .bolum1 p { font-size: 2em }
    main .bolum2 { height: 30em; background-size: cover }
        main .bolum2 div { font-size: 1em; line-height: 1.3em; }
            main .bolum2 div h5 { font-size: 1em }

    main .bolum3 { height: 29em; background-size: cover }
        main .bolum3 div ul { font-size: 1.5em; }
            main .bolum3 div ul li { text-align: center; line-height: 1.7em }

    main .contact { height: 42em }
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    header .navbar-toggler { border-radius: 0 }
    header .navbar-nav { text-align: right; background-color: #fff; margin-top: -80px; z-index: 999 !important }
        header .navbar-nav ul { border: 1px solid rgba(0, 0, 0, 0.1); margin-right: 8px; }
            header .navbar-nav ul li { margin-right: 15px; margin-top: 5px }

    .navbar-brand .logoM { display: none }
    .navbar-brand .logo { display: block }
}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
    header .navbar-toggler { border-radius: 0 }
    header .navbar-nav { text-align: right; background-color: #fff; margin-top: -32px; z-index: 999 !important }
        header .navbar-nav ul { border: 1px solid rgba(0, 0, 0, 0.1); margin-right: 8px; }
            header .navbar-nav ul li { margin-right: 15px; margin-top: 5px }

    .navbar-brand .logo { display: none }
    .navbar-brand .logoM { display: block }
    main .bolum1, main .contact { height: 20em }
        main .bolum1 p { font-size: 1.5em }
    main .bolum2 { height: 22em; background-size: cover }
        main .bolum2 div { font-size: 0.9em; line-height: 1.2em; width: 60% }
            main .bolum2 div h5 { font-size: 0.9em }

    main .bolum3 { height: 21.7em; background-size: cover }
        main .bolum3 div ul { font-size: 1.2em; }
            main .bolum3 div ul li { text-align: center; line-height: 1.5em }

    main .contact { height: 39em; }
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
    header .navbar-toggler { border-radius: 0 }
    header .navbar-nav { text-align: right; background-color: #fff; margin-top: -32px; z-index: 999 !important }
        header .navbar-nav ul { border: 1px solid rgba(0, 0, 0, 0.1); margin-right: 8px; }
            header .navbar-nav ul li { margin-right: 15px; margin-top: 5px }

    .navbar-brand .logo { display: none }
    .navbar-brand .logoM { display: block }
    main .bolum1, main .contact { height: 15em; }
        main .bolum1 p { font-size: 1em; top: 55%; left: 10%; }
    main .bolum2 { height: 13em; background-size: cover }
        main .bolum2 div { font-size: 1em; line-height: 1.1em; width: 60% }
            main .bolum2 div h5 { font-size: 0.9em; margin-top: 3em }
            main .bolum2 div p { display: none; }

    main .bolum3 { height: 12.8em; background-size: cover }
        main .bolum3 div { left: 30%; }
            main .bolum3 div ul { font-size: 0.98em; left: 10px }
                main .bolum3 div ul li { text-align: center; line-height: 1.2em }

    main .contact { height: 40em; }
}