.carousel-indicators li {
    border: 1px solid black;
}

.carousel-indicators .active {
    background-color: black;
}

.image {
    width: 320px;
}

.imageParent {
    width: 420px;
}

.carousel-control.right {
 background-image: none   
}

.carousel-control.left {
 background-image: none   
}

.carousel-control {
    color: black
}

.carousel-control:focus, .carousel-control:hover {
    color: black;
}

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}

.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

.loaderParent {
    z-index: 1000;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: black;
    opacity: 0.5
}

.loader {
    border: 15px solid lightgray;
    border-radius: 50%;
    border-top: 15px solid green;
    width: 100px;
    height: 100px;
    margin-left: 42%;
    margin-top: 17%;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.btn-primary {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

/*---------------------- override  btn-primary for alert pop-up consistancy -----------------------*/

  .btn-primary.focus, .btn-primary:focus {
        color: #333;
        background-color: #e6e6e6;
        border-color: #8c8c8c;
    }

    .btn-primary:hover {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

    .btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

        .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
            color: #333;
            background-color: #d4d4d4;
            border-color: #8c8c8c;
        }

    .btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
        background-image: none;
    }

    .btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
        background-color: #fff;
        border-color: #ccc;
    }

    .btn-primary .badge {
        color: #fff;
        background-color: #333;
    }

/*---------------------- media query at bottom -----------------------*/

@media only screen and (min-width: 1024px) and (max-width: 1199px) and (orientation: landscape) {
  
    /* ipad mini landscape mode */

      .loader {
        margin-top: 21%;        
        margin-left: 40%; 
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait){
  
    /* ipad mini potrait mode */
    
      .loader {
        margin-top: 43%;
        margin-left: 38%; 
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {

    /* iPhone 5 and 6  in landscape mode */

    .loader {
        margin-top: 13%;        
    }

    .btn-block {
        width: 100px;
        float: right;
    }
}

@media only screen and (min-width: 0px) and (max-width: 479px)  {

    /* iPhone 5 and 6  in potrail mode */
    .loader {
        
        margin-left: 35%;        
        margin-top: 53%;
    }

    .btn-block {
        width: 100px;
        float: right;
    }

    .image {
        width: 260px !important;
    }

    .imageParent {
        width: 320px !important;
    }

   
}