Baseline viewport

Options
 Convert borders?
 Convert PX units?
 Convert CM units?
 Convert MM units?
 Convert in units?
 Convert PT units?
 Convert PC units?

 
CKEDITOR.addCss('.cke_editable img { max-width: 100% !important; height: auto !important; }');

 *{
     text-align: justify;
     text-justify: inter-word;
     font-size:1.2em;
     box-sizing: content-box;
	 transform: scale(1.1, 1.1)
}

 body {
     font-size:1.2em;
     width: 100%;
	 min-height:540px; 
     height:auto;
}

 #center {
     margin: 0 auto;
     width: 70%;
}

 .zoom:hover {
     -ms-transform: scale(1);
    /* IE 9 */
     -webkit-transform: scale(1);
    /* Safari 3-8 */
     transform: scale(1);
}

 .navbar-toggler-icon:focus {
     border-color: #28a745;
     box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

 .fit {
     width: 100%;
     height: 100%;
}

 .photo > img {
     object-fit: cover;
     width: 100%;
     max-height: 100%;
}

	
.img-fluid{
	
	cursor: pointer;
}

/*.gallery:hover {
  transform: scale(1.125); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
/*}*/


 h1{
     text-align:center;
     font:bold;
     top:0;
     margin-top:0px !important;
     padding:10px !important;
     background-color: #F8F8F8;
     width:100%;
     color:#006633;
     font-size:24px !important;
}

 h2{
     text-align:center;
     padding-top:20px !important;
     margin-bottom:20px !important;
     color:#006633;
     font-size:18.72px !important;
}

 h3{
     text-align:center;
     font:bold;
     top:0;
     margin-top:0px !important;
     padding:30px;
     background-color: #F8F8F8;
     width:100%;
     color:#006633;
}

 p{
     font-size:1em;
}

 form{
     margin: 0 auto;
     width:70%;
}

 #invisible{
     visibility: hidden;
}

 #logo{
     width: 5em;
     height: auto;
}

 #cent_ans{
     width: 2em;
     height: auto;
}

 table{
     background-color: #fff;
     color: #006633;
     padding:0px;
}

 dropdown-item{
     color:gray;
     margin-bottom: 0px;
}

 nav-item{
    /*font-size:0.8vw;
    */
     margin-top: 0px;
     color:gray;
     text-align:right;
}

.navbar button {
    outline: none !important;
}

 .navbar a {
    /*font-family: 'Tangerine';
    */
     font-size:0.7em;
     margin-bottom: 0px;
     font-weight: bold;
     color: #006633 !important;
}

 .navbar {
     background-color:#FFF;
     background-image: none;
}

 .dropdown-item.active, .dropdown-item:active {
     color: #fff;
     background-color: #fff;
}

 .fa-2x {
     vertical-align: middle;
     margin-right: 8px;
}

 .nav-link{
     font-size: 0.5em;
}

 .slogan{
     position: absolute;
     bottom: 80px;
     left: 80px;
     text-align:left;
     font:bold;
     margin-top:40px;
     font-size:4vw;
     color: white;
     text-shadow: black 0.5em 0.5em 0.6vw;
}

 .container_slogan {
     position: relative;
     text-align:left ;
     color: white;
}

 .container_footer{
     display: flex;
     width: 100%;
     height:auto;
     margin-top:auto;
     margin-bottom:auto;
     background-color: #000000;
     text-align:left;
}

 .contenu_footer{
     text-align:left;
     height: 50%;
     margin: auto;
    /* Magic! */
     width: 20%;
     background-color: #000000;
}

 .text_home{
     font-size:1.5em;
     width:80%;
     margin:auto;
     margin-top:40px;
     margin-bottom:40px;
}

 input{
     text-align: left;
}

 input button{
     background: green;
}

 .btn-success{
     background-color: #006633;
}

 .top_image{
     margin-top:60px;
     background-color: #fff;
     align-content: ;
     width:100%;
	 cursor: auto;
}

 .titre_home{
     margin-top:20px;
     margin-bottom:20px;
     font-weight: bold;
     color:#006633;
	 cursor: pointer;
}

 .form-control:focus {
     border-color: #28a745;
     box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

 .navbar-nav li:hover>.dropdown-menu {
     display: block;
     margin: 0px;
}

 .dropdown-toggle::after {
     display:none;
     margin-bottom: 0px;
}

 .description{
    /*font-family: 'Tangerine';
    */
     font-size:0.7em;
     padding:40px;
     margin:20px;
     height:auto;
    /*text-justify: inter-word;
    */
     color:#000;
}

 .btn_details{
    /*font-family: 'Tangerine';
    */
     padding:10px;
     padding-top:0px;
     margin-right:20px;
     color:#006633;
     font-weight: bold;
     height:auto;
     text.color:1em;
     text-align: right;
}

 .btn_editer{
    /*font-family: 'Tangerine';
    */
     padding:10px;
     color:#006633;
     font-weight: bold;
     text-align: right;
}

 .btn_option{
    /*font-family: 'Tangerine';
    */
     padding:10px;
     color:#006633;
     font-weight: bold;
     text-align: right;
}

 .date{
    /*font-family: 'Tangerine';
    */
     color:#000;
     font-weight: bold;
     text-align: left;
     margin-left: 20px;
}

 .background-gray{
     background-color:#F8F8F8;
}

 .background-white{
     background-color:#FFFFFF;
}

 .contenu_horaire{
     width: 30%;
     height:auto;
     padding:5%;
     margin-top:100px ;
     margin-bottom:100px;
    /* Magic! */
     text-align:center;
     background-color: #F8F8F8;
}

 .container_horaire{
     width:50%;
     margin-left:auto;
     margin-right:auto;
}

 .card-header{
     color:#006633;
     text-decoration: none;
}

 .btn-link{
     color:#006633;
}

/* unvisited link */
 .btn-link:link {
     color:#006633;
     text-decoration: none;
}

/* visited link */
 .btn-link:visited {
     color:#006633;
     text-decoration: none;
}

/* mouse over link */
 .btn-link:hover {
     color:#006633;
     text-decoration: none;
}
/* selected link */
 .btn-link:active {
     color:#006633;
     text-decoration: none;
}

 .card-header{
     color:#006633;
     text-decoration: none;
}
/* unvisited link */
 .card-header:link {
     color:#006633;
     text-decoration: none;
}

/* visited link */
 .card-header:visited {
     color:#006633;
     text-decoration: none;
}

/* mouse over link */
 .card-header:hover {
     color:#006633;
     text-decoration: none;
}

/* selected link */
 .card-header:active {
     color:#006633;
     text-decoration: none;
}

 .card-body{
     text-decoration: none;
}

/* unvisited link */
 .card-body:link {
     text-decoration: none;
}

/* visited link */
 .card-body:visited {
     text-decoration: none;
}

/* mouse over link */
 .card-body:hover {
     text-decoration: none;
}

/* selected link */
 .card-body:active {
     text-decoration: none;
}

 .contenu_list_details{
     width: 80%;
     word-break: break-word;
     height:auto;
     padding:40px;
     margin:auto;
     text-align: justify;
     text-justify: inter-word;
     background-color: #F8F8F8;
}

 button{
     border: 0;
     background: none;
     box-shadow: none;
     border-radius: 0px;
     background-color: #fff;
}

 a{
     color:inherit;
     text-decoration: none;
}

 a:hover{
     color:inherit;
     text-decoration: none;
}

 input[type="submit"] 
/* Or better yet try giving an ID or class if possible*/
 {
     border: 0;
     background: none;
     box-shadow: none;
     border-radius: 0px;
}

 input[type="button"] 
/* Or better yet try giving an ID or class if possible*/
 {
     border: 0;
     background: none;
     box-shadow: none;
     border-radius: 0px;
}

 input[type="date"]::before {
     color: #999999;
     content: attr(placeholder);
}

 input[type="date"] {
     color: #ffffff;
}

 input[type="date"]:focus, input[type="date"]:valid {
     color: #666666;
}

 input[type="date"]:focus::before, input[type="date"]:valid::before {
     content: "" !important;
}

 footer{
     display:flex;
     flex-wrap: wrap;
     width:100%;
     padding:5%;
     text-align:center;
     min-height:80px;
     background-color: #222;
    /* This color gets inverted color or you can add navbar inverse class in html */
     color: #fff;
}

 .footer_elements{
     text-align:left;
     height:50%;
}

 .fab1 {
     width: 70px;
     height: 70px;
     border-radius: 70%;
     background-image: url("../images/add.jpg")!important;
     background-repeat: no-repeat;
     color: #fff !important;
     text-align:center ;
     padding-top:15px;
     font-size:30px;
     background-color:green;
     position: fixed;
     right: 50px;
     bottom: 50px;
}

 .mySlides {
    display:none;
}

 #map{
     margin-top: 40px;
}

 #success_message{
     display: none;
}

 #myImg {
     border-radius: 5px;
     cursor: pointer;
     transition: 0.3s;
     width: 4.5em;
     height: auto;
}

 #myImg:hover {
    opacity: 0.7;
}

/* The Modal (background) */
 .modal {
     display: none;
    /* Hidden by default */
     position: fixed;
    /* Stay in place */
     z-index: 1;
    /* Sit on top */
     padding-top: 100px;
    /* Location of the box */
     left: 0;
     top: 0;
     width: 100%;
    /* Full width */
     height: 100%;
    /* Full height */
     overflow: auto;
    /* Enable scroll if needed */
     background-color: rgb(255,255,255);
    /* Fallback color */
     background-color: rgba(255,255,255,1);
    /* Black w/ opacity */
}

/* Modal Content (image) */
 .modal-content {
     margin: auto;
     display: block;
     width: 60%;
     max-width: 700px;
}

/* Caption of Modal Image */
 #caption {
     margin: auto;
     display: block;
     width: 80%;
     max-width: 700px;
     text-align: center;
     color: #ccc;
     padding: 10px 0;
     height: auto;
}

/* Add Animation */
 .modal-content, #caption {
     -webkit-animation-name: zoom;
     -webkit-animation-duration: 0.6s;
     animation-name: zoom;
     animation-duration: 0.6s;
}

 @-webkit-keyframes zoom {
     from {
        -webkit-transform:scale(0)
    }
     to {
        -webkit-transform:scale(1)
    }
}

 @keyframes zoom {
     from {
        transform:scale(0)
    }
     to {
        transform:scale(1)
    }
}

/* The Close Button */
 .close {
     position: absolute;
     top: 15px;
     right: 35px;
     color: #f1f1f1;
     font-size: 40px;
     font-weight: bold;
     transition: 0.3s;
}

 .close:hover, .close:focus {
     color: #bbb;
     text-decoration: none;
     cursor: pointer;
}

 .top_image{
     background-color: #fff;
}

 footer{
}

 #copyright{
     text-align:Left;
     margin:1em;
}

 #designed{
     text-align:left;
     margin:1em;
}

 .btn_details_home{
    /*font-family: 'Tangerine';
    */
}

 textarea{
     padding: 0.303em;
     width:100%;
     height: auto;
}

 .mySlides {
    display:none;
};

 #map{
     margin-top: 2.424em;
}

 #success_message{
     display: none;
}

 #myImg {
     border-radius: 0.303em;
     cursor: pointer;
     transition: 0.3s;
}

 #myImg:hover {
    opacity: 0.7;
}

/* The Modal (background) */
 .modal {
     display: none;
    /* Hidden by default */
     position: fixed;
    /* Stay in place */
     z-index: 1;
    /* Sit on top */
     padding-top: 6.061em;
    /* Location of the box */
     left: 0;
     top: 0;
     width: 100%;
    /* Full width */
     height: 100%;
    /* Full height */
     overflow: auto;
    /* Enable scroll if needed */
     background-color: rgb(255,255,255);
    /* Fallback color */
     background-color: rgba(255,255,255,1);
    /* Black w/ opacity */
}

/* Modal Content (image) */
 .modal-content {
     margin: auto;
     display: block;
     width: 60%;
     max-width: 42.424em;
}

/* Caption of Modal Image */
 #caption {
     margin: auto;
     display: block;
     width: 80%;
     max-width: 42.424em;
     text-align: center;
     color: #ccc;
     padding: 0.606vw 0;
     height: auto;
}

/* Add Animation */
 .modal-content, #caption {
     -webkit-animation-name: zoom;
     -webkit-animation-duration: 0.6s;
     animation-name: zoom;
     animation-duration: 0.6s;
}

 @-webkit-keyframes zoom {
     from {
        -webkit-transform:scale(0)
    }
     to {
        -webkit-transform:scale(1)
    }
}

 @keyframes zoom {
     from {
        transform:scale(0)
    }
     to {
        transform:scale(1)
    }
}

/* The Close Button */
 .close {
     position: absolute;
     top: 0.909em;
     right: 2.121em;
     color: #f1f1f1;
     font-size: 2.424em;
     font-weight: bold;
     transition: 0.3s;
}

 .close:hover, .close:focus {
     color: #bbb;
     text-decoration: none;
     cursor: pointer;
}

 .snack-wrap {
     display:block;
     position:fixed;
     width:100%;
     bottom:0px;
     left:10px;
     padding:0px;
}

 .snack-wrap {
     display:block;
     position:fixed;
     width:100%;
     bottom:0px;
     left:10px;
     padding:0px;
     text-align:center;
}

 .snackbar {
     display:block;
     background:#222;
     border:#f2f2f2;
     padding:10px 40px 10px 20px;
     color:#fff;
     font-family:Arial;
     position:relative;
     left:0px;
     bottom:-70px;
     transition: bottom 0.5s ease-in-out;
     z-index:9;
     text-align:center;
}

 .snackclose, label {
     bottom:0px;
     position:absolute;
     border:0;
     height:0%;
     visibility:none;
     text-align:center;
}

 .snackclose {
     display:none;
     visibility:hidden;
     z-index:10;
     text-align:center;
}

 label {
     z-index:11;
     display:block;
     width:100%;
     height:100%;
     color:rgba(255,255,255,0.8);
     cursor:pointer;
     text-align:center;
}

 .animated {
     animation-name: snackbar-show;
     animation-duration: 2s;
     animation-direction: forwards;
     animation-timing-function: ease-in-out;
     animation-delay:1s;
     animation-fill-mode: forwards;
}

 .snackclose:checked~.snackbar, .snackclose:checked, .snackclose:checked+label {
     animation-name: snackbar-hide;
     animation-delay:2s;
     height:0%;
     visibility:hidden;
}

 @keyframes snackbar-show {
     text-align:center;
     0%{
         bottom:-70px;
    }
     90%, 95% {
        bottom:15px;
    }
     92.5%, 100% {
        bottom:10px;
    }
}

 @keyframes snackbar-hide {
     text-align:center;
     visibility:hidden;
     0%, 0% {
        bottom:0px;
    }
     0%,0% {
        bottom:5px;
    }
     0% {
        bottom:0px;
    }
}

 .titre{
     color:#006633;
     margin-top:20px;
     margin-bottom:20px;
	 cursor: pointer;
}

 .service{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     color: white;
	 cursor: pointer;
}

 .gallery{
     padding:2px;
}

 .center-small {
     display: block;
     margin-top:20px;
     margin-left: auto;
     margin-right: auto;
     width: 50%;
}

 .center-big {
     display: block;
     margin-top:20px;
     margin-left: auto;
     margin-right: auto;
     width: 90%;
}

 .footer-space{
     margin-top:20px;
}

}

@media (max-width:320px) {
/* smartphones, iPhone, portrait 480x320 phones */
 
 .body{
     background-color:black;
}

 .center-big {
     width: 100%;
}

 p{
     font-size:1em;
}

 .dropdown-menu {
     font-size: 1em;
}

 .navbar-nav {
     font-size: 1.4em;
     flex-grow: 1;
     text-align:left;
     margin-left:2em;
}

 .dropdown-menu a {
    /*font-family: 'Tangerine';
    */
     font-size:1.5em;
}

 #logo{
     width: 6em;
     height: auto;
}

 #cent_ans{
     width: 5em;
     height: auto;
}

 .service{
     position: relative;
     height:auto;
     top: 2em;
     transform: translateY(0%);
     color: white;
}

 .description{
     font-size:2em;
}

 form{
     margin: 0 auto;
     width:90%;
}

 .container_footer{
     display: flex;
     width: 100%;
     height:auto;
     margin-top:auto;
     margin-bottom:auto;
     background-color: #000000;
     text-align:left;
     margin-top:10px;
}

 .contenu_footer{
     text-align:left;
     height: 50%;
     margin: auto;
    /* Magic! */
     width: 20%;
     background-color: #000000;
     margin-top:10px;
}

}

@media (max-width:481px) {
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
 
 .body{
     background-color:purple;
}

 .center-big {
     width: 100%;
}

 p{
     font-size:1em;
}

 .dropdown-menu {
     font-size: 1em;
}

 .navbar-nav {
     font-size: 1.4em;
     flex-grow: 1;
     text-align:left;
     margin-left:2em;
}

 #logo{
     width: 6em;
     height: auto;
}

 #cent_ans{
     width: 5em;
     height: auto;
}

 .service{
     position: relative;
     height:auto;
     top: 2em;
     transform: translateY(0%);
     color: white;
}

 .description{
     font-size:2em;
}

 form{
     margin: 0 auto;
     width:90%;
}

}

@media (max-width:641px) {
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
 
 .body{
     background-color:gray;
}

 p{
     font-size:1em;
}

 .dropdown-menu {
     font-size: 1em;
}

 .navbar-nav {
     font-size: 1.5em;
     flex-grow: 1;
     text-align:left;
     margin-left:2em;
}

 #logo{
     width: 6em;
     height: auto;
}

 #cent_ans{
     width: 5em;
     height: auto;
}

 .service{
     position: relative;
     height:auto;
     top: 2em;
     transform: translateY(0%);
     color: white;
}

 .description{
     font-size:2em;
}

 form{
     margin: 0 auto;
     width:90%;
}

}

@media (max-width:961px) {
/* tablet, landscape iPad, lo-res laptops ands desktops */
 
 .body{
     background-color:green;
}

 p{
     font-size:1em;
}

 .dropdown-menu {
     font-size: 1em;
}

 .navbar-nav {
     font-size: 1.5em;
     flex-grow: 1;
     text-align:left;
     margin-left:2em;
}

 #logo{
     width: 6em;
     height: auto;
}

 #cent_ans{
     width: 5em;
     height: auto;
}

 .service{
     position: relative;
     height:auto;
     top: 2em;
     transform: translateY(0%);
     color: white;
}

 .description{
     font-size:2em;
}

 form{
     margin: 0 auto;
     width:90%;
}

}

@media(max-width:1025px) {
 
 .body{
     background-color:blue;
}

 p{
     font-size:1em;
}

 .dropdown-menu {
     font-size: 1em;
}

 .navbar-nav {
     font-size: 1.5em;
     flex-grow: 1;
     text-align:left;
     margin-left:2em;
}

 #logo{
     width: 5.5em;
     height: auto;
}

 #cent_ans{
     width: 2.5em;
     height: auto;
}

 .description{
}

 .service{
     position: relative;
     height:auto;
     top: 2em;
     transform: translateY(0%);
     color: white;
}

}

@media(max-width:1200px) {
 
 .body{
     background-color:blue;
}

 p{
     font-size:1em;
}

 .dropdown-menu {
     font-size: 1em;
}

 .navbar-nav {
     font-size: 1.5em;
}

 #logo{
     width: 4.5em;
     height: auto;
}

 #cent_ans{
     width: 1.5em;
     height: auto;
}

 .description{
     font-size:1.4em;
}

 .service{
     position: relative;
     height:auto;
     top: 2em;
     transform: translateY(0%);
     color: white;
}

}

@media (max-width: 1300px) {
 
 .navbar a {
    /*font-family: 'Tangerine';
    */
     font-size:0.68em;
}

 p{
     font-size:1em;
}

 #logo{
     width: 4.5em;
     height: auto;
}

 #cent_ans{
     width: 1.5em;
     height: auto;
}

}

@media only screen and (max-width: 2000px) {
 
 .body{
     background-color:yellow;
}

 .content-body {
     max-width: 1920px;
     margin: auto;
}

 .titre_home{
}

}