
<!--header -->
<style>
    body, html {
        height: 100%;
        margin: 0;

        background: url('assets/image/home/layout1/backp.jpg');
        height: 100%; background-repeat: no-repeat; background-size: cover;background-position: absolute;
        z-index: -2;
        }
        
/*        @media only screen and (max-width: 740px) and (min-width: 568px) and (orientation: landscape){
            .mobilecover{
                margin-top: 115px !important;
            }
            .mobilelogo{
                width: 31% !important;
            }
        }*/
        
        @media only screen and (min-width: 360px) and (orientation: portrait){
            .mobilelogo_portrait{
                display: block;
            }
            .mobilelogo_landscape{
                display: none;;
            }
        }
        
        @media only screen and (min-width: 568px) and (orientation: landscape){
            .mobilelogo_portrait{
                display: none;
            }
            .mobilelogo_landscape{
                display: block;;
            }
            .mobilelogo{
                margin-top: -27px !important;;
            }
        }
  
        
        @media only screen and (max-width: 900px) and (min-width: 800px){
            .desktopcover{
                margin-top: 138px !important;
            }
            .desktoplogo{
                width: 60% !important;
            }
        }

    </style>
    <header  id="home" style=" height: 100%; background-repeat: no-repeat; background-size: cover;background-position: absolute;background: rgba(188,30,45,.8);  overflow: hidden !important;">
        <div class="row">
            <!---Desktop devices Lg Md Sm -->
            <div class="container" style="position:relative;">
                <div class="col-lg-12 col-md-12 col-sm-12 hidden-xs">

                    <div class="col-sm-12 desktopcover" style=" height: 100%; background-repeat: no-repeat;  background-size: cover;background-position: center; margin-top: 220px; animation: alternate, 0.2;">
                        <div class="row">

                            <div class="container desktoplogo" style="width:60%; height:100%;">
                                <div class="row" style="position:relative; margin-top: 20%;" >
                                    <div class="col-md-1 col-sm-1 "></div>
                                    <div class="col-md-4 col-sm-4 " >
                                        <a style="cursor:pointer;" href="<?php echo base_url('women-salon'); ?>"><img  class="img-responsive" src="assets/image/home/layout1/womenp-d.png"> </a>
                                    </div>
                                    <div class="col-md-2 col-sm-2 "></div>
                                    <div class="col-md-4 col-sm-4 ">
                                        <a style="cursor:pointer; "  href="<?php echo base_url('men-salon'); ?>"> <img class="img-responsive" src="assets/image/home/layout1/menp-d.png"> </a>
                                    </div>
                                    <div class="col-md-1 col-sm-1 "></div>   
                                </div>

                            </div> 


                        </div>

                    </div>

                </div>
            </div>
            <!---Mobile device Xs -->
            <div class="col-xs-12 hidden-sm hidden-md hidden-lg">


                <div class="container" style="position:relative;">

                    <div class="col-md-6 mobilecover" style=" height: 100%; background-repeat: no-repeat;  background-size: cover;background-position: center; margin-top: 220px; animation: alternate, 0.2;">
                        <div class="row">

                            <div class="container mobilelogo mobilelogo_portrait" style="width:50%; height:100%;">
                                <div class="col-sm-5 col-xs-12" >
                                    <a style="cursor:pointer;" href="<?php echo base_url('men-salon'); ?>"> <img class="img-responsive" src="assets/image/home/layout1/menp.png"> </a>
                                </div>
                                <div class="col-sm-2 col-xs-12" style="margin-top: 60px;"></div>
                                <div class=" col-sm-5 col-xs-12">
                                    <a style="cursor:pointer;" href="<?php echo base_url('women-salon'); ?>"><img  class="img-responsive" src="assets/image/home/layout1/womenp.png"> </a>
                                </div>


                            </div>
                            
                            <div class="container mobilelogo mobilelogo_landscape" style="width:50%; height:100%;">
                                <div class="col-sm-5 col-xs-6" >
                                    <a style="cursor:pointer;" href="<?php echo base_url('men-salon'); ?>"> <img class="img-responsive" src="assets/image/home/layout1/menp.png"> </a>
                                </div>
                                
                                <div class=" col-sm-5 col-xs-6">
                                    <a style="cursor:pointer;" href="<?php echo base_url('women-salon'); ?>"><img  class="img-responsive" src="assets/image/home/layout1/womenp.png"> </a>
                                </div>


                            </div>

                        </div> 


                    </div>

                </div>
                <div class="col-md-3"></div>
            </div>
        </div>
    </header>
