/******************************************************** CSS pour le site de la journée de l'emploi de Saint-Hyacinthe Création du css : Martin Durette Date : Janvier 2018 Une réalisation de Conceptö ********************************************************/ /******************************************************** HTML ********************************************************/ body{font-family: 'Lato', sans-serif; font-size:16px; font-weight:400; padding-top:75px;} .wow {visibility: hidden;} h1,h2,h3,h4,h5,h6{font-family: 'Raleway', sans-serif; font-weight:700; text-transform:none; } h1{font-size:1.4rem; margin:0 0 1rem 0;} h2{font-size:1.3rem; margin:0 0 1rem 0;} h3{font-size:1.2rem; margin:1rem 0;} h4{font-size:1.1rem; margin:1rem 0;} h5{font-size:1rem; margin:1rem 0;} h6{font-size:1rem; margin:1rem 0;} p, td{font-size:1rem; margin:1rem 0; line-height:150%; color:#000} ul,ol{margin-left:0; padding-left:1rem} li{font-size:1rem; color:#000} a{color:#000} a:hover{color:#000;} strong, b{font-weight:700;} .bg-gris{background:#d0d0d0} .bg-orange{background:#e94e1b} .bg-stripe{background:#ededed} .Overflow{overflow:hidden} #rposte::-webkit-input-placeholder { font-style: italic; } #rposte:-moz-placeholder { font-style: italic; } #rposte::-moz-placeholder { font-style: italic; } #rposte:-ms-input-placeholder { font-style: italic; } .kiosqueTop{position:absolute; top:5px; left:5px; color:#fff} .kiosqueBottom{color:#fff} /******************************************************** Responsive ********************************************************/ /* Navbar */ .navbar-jesth {background-color: #1d71b8;} .navbar-jesth .navbar-brand,.navbar-jesth .navbar-text {color: rgba(255,255,255,.8);} .navbar-jesth .nav-link {color:#ffffff;} .navbar-jesth .nav-item.active .nav-link,.navbar-jesth .nav-item:hover .nav-link {color: #ffffff;} .navbar-jesth .navbar-brand img{height:50px} .navbar-jesth .navbar-toggler{color:#1393cf; border-color:#1393cf} .nav-link-top{background:#e94e1b; text-transform:uppercase} .nav-link-top:hover{background:#333;} /* Postes */ .block-poste{background:#1d71b8; color:#fff; transition:all 0.3s; cursor:pointer} .block-poste:hover{background:#e94e1b; color:#fff;} .block-poste .card-text{color:#fff; font-size: 0.9rem;} .block-poste .card-title{color:#fff; font-size: 1.2rem; font-weight:bold; border-top:1px solid #fff;} .block-icon{position:absolute; top:0px; right:10px; font-size: 2rem;} /* Infolettre */ #infolettre h3{color:#fff} #infolettre p{color:#fff} /* Modal Info */ #ModalInfo #FilAriane{background:#1d71b8} #ModalInfo #FilAriane a{color:#fff} #ModalInfo #FilAriane a:hover{color:#000} #ModalInfo .modal-body{padding:0 15px} #ModalInfo .modal-dialog{max-width:800px} #ModalInfo .ModalTitre{background:#e94e1b} #ModalInfo .ModalTitre h3{color:#fff; font-weight: normal; font-size: 1rem;} #ModalInfo .ModalTitre h2{color:#fff; text-transform:uppercase; font-size:1.3rem} #ModalInfo .ModalTitre p{font-size:0.9rem} #ModalInfo .gris-0{position:relative; background-color:#BCBEC0; text-transform:uppercase; font-size: 0.9rem; font-weight:bold; line-height: 120%} #ModalInfo .gris-1{position:relative; background-color:#BCBEC0; text-transform:uppercase; font-size: 0.9rem; font-weight:bold; line-height: 120%} #ModalInfo .gris-1 a{color:#222;} #ModalInfo .gris-1:hover{background-color:#1d71b8;} #ModalInfo .gris-1:hover a{color:#fff; text-decoration:none} #ModalInfo .block-icon{position:absolute; top:10px; right:10px; font-size: 1.2rem; color:#fff} #ModalInfo .gris-2{position:relative; background-color:#444; text-transform:uppercase; font-size: 0.9rem; font-weight:bold; line-height: 120%} #ModalInfo .gris-2 a{color:#fff;} #ModalInfo .gris-2:hover{background-color:#1d71b8;} #ModalInfo .gris-2:hover a{color:#fff; text-decoration:none} #ModalInfo .modal-footer-info{background:#1d71b8} #ModalInfo .modal-footer-info p{color:#fff;} #ModalInfo .modal-footer-info a{color:#fff; text-decoration:underline} #ModalInfo .modal-footer-info img{width:180px} #ModalInfo .sharethis-inline-share-buttons{margin-top:10px;} /* Checkbox */ .checkbox label:after, .radio label:after {content: ''; display: table; clear: both;} .checkbox .cr,.radio .cr {position: relative; display: inline-block; border: 1px solid #a9a9a9; border-radius: .25em; width: 1.3em; height: 1.3em; float: left; margin-right: .5em; background:#fff} .radio .cr {border-radius: 50%;} .checkbox .cr .cr-icon,.radio .cr .cr-icon {position: absolute; font-size: .8em; line-height: 0; top: 50%; left: 20%;} .radio .cr .cr-icon {margin-left: 0.04em;} .checkbox label input[type="checkbox"], .radio label input[type="radio"] {display: none;} .checkbox label input[type="checkbox"] + .cr > .cr-icon,.radio label input[type="radio"] + .cr > .cr-icon {transform: scale(3) rotateZ(-20deg); opacity: 0; transition: all .3s ease-in;} .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,.radio label input[type="radio"]:checked + .cr > .cr-icon {transform: scale(1) rotateZ(0deg); opacity: 1;} .checkbox label input[type="checkbox"]:disabled + .cr,.radio label input[type="radio"]:disabled + .cr {opacity: .5;} .checkbox em{font-size:0.9rem; font-style: normal; white-space: nowrap; display: inline-block; vertical-align:top; margin-top:0.5rem; font-weight:bold;} .btn-orange{background:#e94e1b; color:#fff; padding:1rem; border-color:#e94e1b} .btn-bleu{background:#1d71b8; color:#fff; padding:1rem; border-color:#1d71b8} /* Breadcrumb */ .breadcrumb{background:none; padding-left:0; color:#fff} .breadcrumb-item+.breadcrumb-item:before{color:#fff} .breadcrumb a{color:#fff; text-decoration:none} .breadcrumb a:hover{color:#4fc0ed; text-decoration:underline} .breadcrumb-item.active{color:#fff} /* Footer */ #footer{background:#1d71b8} #footer h4{color:#fff; text-transform:uppercase; margin-bottom:0.5rem; font-size: 1rem;} #footer p{color:#fff; line-height: 150%; margin:0.5rem 0; padding:0; font-size: 0.9rem;} #footer li{font-size: 0.9rem;} #footer a{color:#fff} #footer a:hover{color:#1393cf; text-decoration:none} #copyright{background:#252726; border-top:3px solid #fff} #copyright p{color:#fff;} #copyright a{color:#fff;} #copyright a:hover{color:#1393cf; text-decoration:none} /* Contact */ #GoogleMap{position:relative; width:100%} #GoogleMap p{margin:0} #GoogleMap iframe{width:100%; max-width:100%; height:300px; filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+ */filter: gray; /* IE6-9 */ -webkit-filter: grayscale(99%); /* Chrome 19+ & Safari 6+ */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */} #Contact-Wrap textarea{height:180px;} #Contact-Wrap p{font-size:0.9em;} #Contact-Wrap .input-group{padding-top:5px; padding-bottom:5px;} #Contact-Wrap .section-contact .fa{width:20px; text-align:center} #Contact-Wrap .fa{min-width:30px; text-align:center} #Contact-Wrap a{color:#00aeef} #Contact-Wrap a:hover{text-decoration:none; color:#000} @media only screen and (max-width : 767px) { body{padding-top:10px} .navbar-jesth .navbar-toggler{color:#fff; border-color:#fff} .checkbox em{white-space:normal; display: block; line-height: 1; margin-top:5px} } /* BootStrap : SM */ @media only screen and (min-width : 768px) { body{padding:0} } /* BootStrap : MD */ @media only screen and (min-width : 992px) { } /* BootStrap : LG */ @media only screen and (min-width : 1024px) { } /* BootStrap : XL */ @media only screen and (min-width : 1200px) { }