/* ======================================== ARILLO - REAL ESTATE TEMPLATE ======================================== @author : @avriqq @version : v1.1 @date-create : 07/14/2014 @last-update : 07/17/2014 @file-name : responsive */ @media screen and ( max-height: 400px ){ .dropdown-menu{ max-height:200px; overflow:scroll; } } @media screen and (min-width: 993px) { #btnCloseConn img { padding-right: 29px; } .signup{ margin-bottom: -1px; margin-left: -15px; } #dropdown-menu-connexion{ margin-right: 14px; } .content-collapse-top{ padding-top: 35px; } .title-1, .title-1-footer { font-size: 24px; font-size: 2.4rem; } .title-2, .title-2-footer { font-size: 2.0rem; font-size: 20px; } #navbar-accueil-top > .navbar-nav{ min-height: 100%; /* Fallback for vh unit */ /* min-height: 100vh;*/ min-height: 100%; /* You might also want to use 'height' property instead. Note that for percentage values of 'height' or 'min-height' properties, the 'height' of the parent element should be specified explicitly. In this case the parent of '.vertical-center' is the element */ /* Make it a flex container */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Align the bootstrap's container vertically */ -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; /* In legacy web browsers such as Firefox 9 we need to specify the width of the flex container */ /*width: 100%;*/ /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers hence the bootstrap's container won't be aligned to the center anymore. Therefore, we should use the following declarations to get it centered again */ -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-box-orient: horizontal; } #dynamic-content > .row{ margin-left:-8px; } } @media screen and (min-width: 768px) and (max-width: 992px){ #btnCloseConn img { padding-right: 29px; } #footer{ font-size:1.2rem; font-size:12px; } .heading-title h2 { border-left: none; border-right: none; border-bottom: none; } .title-1, .title-1-footer { font-size: 20px; font-size: 2rem; } .title-2, .title-2-footer { font-size: 1.7rem; font-size: 17px; } .purple-locataire, .blue-bailleur, .activeSideBarMenuLocataire, .activeSideBarMenuBailleur { margin-left: 5%; } } @media screen and (min-width: 768px){ .presentation-arrow{ z-index: 1; opacity: 1; position: absolute; bottom: 5%; /* Firefox */ left: -moz-calc(50% - 31px); /* WebKit */ left: -webkit-calc(50% - 31px); /* Opera */ left: -o-calc(50% - 31px); /* Standard */ left: calc(50% - 31px); } .border-top-presentation { border-top: 2px solid lightgray; } .border-bottom { border-bottom: 2px solid lightgray; } /*Bordure et marge*/ .border-left-presentation { border-left: 2px solid lightgray; } #footer{ font-size:1.3rem; font-size:13px; } #footer .section { min-height: 100px; } /*Marge pour le bloc de loyer et date*/ .content-loyer-date{ padding-bottom: 45px; } h1{ font-size: 23px; font-size: 2.3rem !important; } h3,.title-3, .title-3-footer { font-size: 16px; font-size: 1.6rem; } .adresse-complete{ width: 90.66666667%; } #page-central, .presentation, .sujet, .section-header>div { /*margin-top: 6%;*/ margin-top: 40px; } #btn-bailleur-aside, #btn-locataire-aside { /* Firefox */ height: -moz-calc(50% - 49px); /* WebKit */ height: -webkit-calc(50% - 49px); /* Opera */ height: -o-calc(50% - 49px); /* Standard */ height: calc(50% - 49px); min-height: 0px; } .navbar-connecte-top .identite{ padding-top: 10px; float: right; } .btn-white-arrow-right { padding-left: 40px; padding-right: 40px; } .marge-complete{ margin-right: 100% !important; } .static-menu-left{ position:fixed; z-index: 1040; padding:0px; margin:0px; top:0; height:100%; } .static-menu-left > .purple-locataire, .static-menu-left > .blue-bailleur, .static-menu-left > .activeSideBarMenuLocataire, .static-menu-left > .activeSideBarMenuBailleur { padding:0px; margin:0px; } } @media (max-width: 991px) { .menuCateg{ height: 99px; border: none; background-color: whitesmoke; text-align:center; } .presentation{ margin-bottom:30px; } .left { position: absolute; left: -4%; color: white; } .border-left-footer{ border-top: 1px solid coral; padding-top: 14px; } #footer .icone-reseaux-sociaux img { margin-bottom: 0; } #btnCloseConn img { padding-right: 0px; } .container-header{ padding-right: 0px; } .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; /*margin: 7.5px -15px;*/ } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .navbar-text { float: none; margin: 15px 0; } .navbar-collapse.collapse.in { display: block!important; } .collapsing { overflow: hidden!important; } .sujet .sub-title-3 { margin-left: 1%; width: 105%; font-size: 16px !important; font-size: 1.6rem !important; line-height: 1.5; } #dynamic-content > .row{ margin-left:-10px; } } @media screen and (max-width: 767px){ .presentation-arrow{ display:none; } .suivant .visible-xs{ display:inline !important; } #locataire-contrat-demande .section-header >div, #bailleur-liste-contrat .section-header >div{ margin-top: 15px; margin-bottom: 15px; } #bailleur-liste-contrat .sujet{ margin-top: 40px; } .border-top{ border-top: 2px solid lightgray; } #footer{ font-size:1.1rem; font-size:11px; } .title-1, .title-1-footer { font-size: 1.7rem; font-size: 17px; } .title-2, .title-2-footer { font-size: 1.5rem; font-size: 15px; } .sujet{ margin-top: 0px; } h1{ font-size: 1.8rem !important; font-size: 18px; } h3,.title-3, .title-3-footer { font-size: 13px; font-size: 1.3rem; } .btn-white-arrow-right { padding-left: 10px; padding-right: 10px; } #btn-bailleur-aside, #btn-locataire-aside { min-height: 171px; } .navbar-connecte-top .identite{ float: left; padding-top: 10px; } .topbar-nav{ font-size: 12px; float: none; display: table; margin-left: auto; margin-right: auto; text-align: center; } .navbar{ min-height: 80px; } .navbar-default .navbar-toggle{ margin-top: 22px; } .navbar-header{ min-height: 80px; } .navbar-collapse{ border-top-color: #f6bb42 !important; } .navbar-default .navbar-toggle .icon-bar{ background-color: #888; } .navbar-default .navbar-nav > li > a{ padding-top: 12px; padding-bottom: 12px; padding-left: 15px; } .navbar-default .navbar-nav > .active > a::after{ content: ""; display: none; } .navbar-default .navbar-nav li.dropdown.open > a, .navbar-default .navbar-nav li.dropdown.open > a:hover{ color: #fff; background-color: #f6bb42; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #fff; background-color: #f6bb42; } .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #898ba2; padding-top: 12px; padding-bottom: 12px; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color: #fff; background-color: #f6bb42; } .dropdown-menu > li > a{ display: block; padding-top: 12px; padding-bottom: 12px; padding-left: 25px; } /*.signup{*/ /*margin-left: 0;*/ /*}*/ .signup:hover, .signup:focus, .signup:active{ -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } #header{ width: 100%; min-height: 350px; /*padding-top: 40px;*/ padding-bottom: 40px; -webkit-background-size: cover !important; -moz-background-size: cover !important; -ms-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; background-attachment: fixed; background-position: center 0; background-repeat: no-repeat; } .sidebar{ margin-bottom: 20px; margin-top: 20px; } .blog-title, .blog-text, .blog-meta, .blog-paged, .blog-comment, .blog-comment-form{ padding-left: 10%; padding-right: 10%; } .blog-comment ul.comments ul{ margin-left: 0; } .copyright{ position: relative; margin-top: 60px; padding: 40px 0; border-top: 1px solid #2c3e50; text-align: center; } #droit-devoir{ margin-left: 15px; margin-right: 15px; } .etape>div>img{ width:80px; height:84px; margin-right:11px; } .static-menu-left{ padding:0px; margin:0px; } } @media screen and (max-width: 480px){ .heading-title h2{ padding: 10px 14px; font-size: 18px; line-height: 24px; } .property-image-list { position: relative; width: 100%; display: block; vertical-align: top; } .property-text { position: relative; width: 100%; display: block; padding: 10px 15px; vertical-align: top; } .testimony-image{ float: none; display: block; margin-left: auto; margin-right: auto; } .testimony-content{ display: block; margin-left: 0; text-align: center; } #testislider .carousel-control.left { z-index: 3; left: 15px; right: auto; } #testislider .carousel-control.right { z-index: 3; right: 15px; left: auto; } #subscribe h3{ display: block; text-align: center; } #slider-property .carousel-indicators{ display: none; } .btn-down img{ width: 66%; } .accueil-purple-bloc>div>img, .accueil-blue-bloc>div>img, #btn-locataire-aside img, #btn-bailleur-aside img{ width: 96px; } .accueil-purple-bloc>div>a>img,.accueil-blue-bloc>div>a>img, .etape>span>img{ width: 34px; } .content-bloc { height: 70px; } .btn-arrow { width: 243px; height:53px; background-position: center; font-size:16px; } .etape>img { width: 129px; } .etape>div>img{ width:80px; height:84px; margin-right:11px; } .etape pull-left { width: 39px; } .btn-purple { background: url("../../icons/background-btn-purple-mobile.png") no-repeat; } .btn-blue { background: url("../../icons/background-btn-blue-mobile.png") no-repeat; } .btn-white { background: url("../../icons/background-btn-white-mobile.png") no-repeat; } .btn-white:hover { background: url("../../icons/background-btn-white-mobile-hover.png") no-repeat; } .btn-purple:hover { background: url("../../icons/background-btn-purple-mobile-hover.png") no-repeat; } .btn-blue:hover { background: url("../../icons/background-btn-blue-mobile-hover.png") no-repeat; } #espace-perso-btn-cnx{ padding-right:0px !important;; } #btnCloseConn img { width:30px; } .menuCateg{ height: 99px; border: none; background-color: whitesmoke; text-align:center; } .presentation{ margin-bottom:30px; } .border-left-footer{ border-top: 1px solid coral; } .logo-visale { width: 126px; height: 75px; } .sujet .sub-title-3 { margin-left: -1%; width: 101%; font-size: 13px !important; font-size: 1.3rem !important; line-height: 1.3; } #accueil-presentation { margin-top: -26px; } #dynamic-content-accueil { padding-top: 26px; } .depli-header h4, #list-bloc-contents .title-3 { margin-top: 5px !important; font-size: 14px !important; line-height: 1.4 !important; } #accordion,#principe-dbCol { margin-left: 0px; margin-right: 0px; } p{ font-size:13px; } #bailleur-table-fonctionnement{ margin :0; } } @media screen and (max-width: 767px) and (orientation:portrait) { .carousel-inner-visale .item .col-xs-4{ width: 100%; } /*********Carousel*********/ .carousel-inner-visale { position: relative; overflow: hidden; width: 100%; } .carousel-inner-visale > .item { display: none; position: relative; -webkit-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left; } .carousel-inner-visale > .item > img, .carousel-inner-visale > .item > a > img { line-height: 1; } .carousel-inner-visale > .active, .carousel-inner-visale > .next, .carousel-inner-visale > .prev { display: block; } .carousel-inner-visale > .active { left: 0; } .carousel-inner-visale > .next, .carousel-inner-visale > .prev { position: absolute; top: 0; width: 100%; } .carousel-inner-visale > .next { left: 100%; } .carousel-inner-visale > .prev { left: -100%; } .carousel-inner-visale > .next.left, .carousel-inner-visale > .prev.right { left: 0; } .carousel-inner-visale > .active.left { left: -100%; } .carousel-inner-visale > .active.right { left: 100%; } .carousel-control { position: absolute; top: 0; left: 0; bottom: 0; width: 15%; opacity: .5; filter: alpha(opacity=50); font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .carousel-control:hover, .carousel-control:focus { outline: none; color: #fff; text-decoration: none; opacity: .9; filter: alpha(opacity=90); } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; } .carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left { left: 24%; } .carousel-control .icon-next, .carousel-control .glyphicon-chevron-right { right: 16%; } .carousel-control .icon-prev.orange{ left: 45%; top: 41%; } .carousel-control .icon-next.orange { right: 38%; top: 41%; } .carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; margin-top: -10px; margin-left: -14px; font-family: serif; } .carousel-control .icon-prev:before { content: '\2039'; content: url("../../icons/carousel-left-icons.png")!important; } .carousel-control .icon-next:before { content: '\203a'; content: url("../../icons/carousel-right-icons.png")!important; } .carousel-control .icon-next.orange:before { content: '\203a'; content: url("../../icons/carousel-right-icons-orange.png")!important; } .carousel-control .icon-prev.orange:before { content: '\2039'; content: url("../../icons/carousel-left-icons-orange.png")!important; } #carousel-visale .carousel-indicators,#carousel-menu .carousel-indicators { position: absolute; bottom: 10px; margin-bottom: -10px; left: 50%; z-index: 15; width: 60%; margin-left: -30%; padding-left: 0; list-style: none; text-align: center; } #carousel-visale .carousel-indicators li,#carousel-menu .carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; border: 1px solid #fff; border-radius: 10px; cursor: pointer; background-color: #000 \9; background-color: rgba(0, 0, 0, 0); } #carousel-visale .carousel-indicators .active,#carousel-menu .carousel-indicators .active { margin: 0; width: 12px; height: 12px; background-color: #ffffff; } .carousel-caption { position: absolute; left: 15%; right: 15%; bottom: 20px; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .carousel-caption .btn { text-shadow: none; } .carousel-control.visible-xs { background-image: none; } .menuCateg{ height: 99px; border: none; background-color: whitesmoke; text-align:center; } #dynamic-content-accueil { padding-top: 26px; } #accueil-presentation { margin-top: -26px; } .sujet .sub-title-3 { margin-top: 13px; margin-left: 4%; width: 91%; font-size: 15px !important; font-size: 1.5rem !important; line-height: 1.4; } .depli-header h4, #list-bloc-contents .title-3 { margin-top: 5px !important; font-size: 14px !important; line-height: 1.4 !important; } #accordion,#principe-dbCol { margin-left: 15px; margin-right: 15px; } p{ font-size:13px; } .etape{ margin-right: 20px; margin-left: 20px; } /****************************/ }