/* AUTHOR : YASSINE BAHI */
/* THEME NAME : REMY THEME */
/* THEME URL : Www.remytheme.com */
/* DESCRIPTION :HTML RESPONSIVE TEMPLATE */
/* DATE : December 2024 */

html {
    box-sizing: border-box
}

*,*:before,*:after {
    box-sizing: inherit
}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    color: #000 !important;
    background-color: #f1f1f1 !important;
    margin: 0
}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section {
    display: block
}

summary {
    display: list-item
}

audio,canvas,progress,video {
    display: inline-block
}

progress {
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}


/** Starting Css **/


.rem-padding-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}
.rem-center {
    text-align: center !important;
}
.rem-container, .rem-panel {
    padding: 0.01em 16px;
}
figcaption, figure, footer, header, main, menu, nav, section {
    display: block;
}
.rem-light-grey, .rem-hover-light-grey:hover, .rem-light-gray, .rem-hover-light-gray:hover {
    color: #000 !important;
    background-color: #f1f1f1 !important;
}
body, h1, h2, h3, h4, h5 {
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

/** Content Css **/

.rem-light-grey, .rem-hover-light-grey:hover, .rem-light-gray, .rem-hover-light-gray:hover {
    color: #000 !important;
    background-color: #f1f1f1 !important;
}
.rem-container:after, .rem-container:before, .rem-panel:after, .rem-panel:before, .rem-row:after, .rem-row:before, .rem-row-padding:after, .rem-row-padding:before, .rem-cell-row:before, .rem-cell-row:after, .rem-clear:after, .rem-clear:before, .rem-bar:before, .rem-bar:after {
    content: "";
    display: table;
    clear: both;
}
.rem-container:after, .rem-container:before, .rem-panel:after, .rem-panel:before, .rem-row:after, .rem-row:before, .rem-row-padding:after, .rem-row-padding:before, .rem-cell-row:before, .rem-cell-row:after, .rem-clear:after, .rem-clear:before, .rem-bar:before, .rem-bar:after {
    content: "";
    display: table;
    clear: both;
}


/** Nav Menu Css **/

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  margin-bottom: 50px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #b8713b;
  color: white;
  width: 27%;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
      
  }
    .topnav a.active { 
       width: auto;
    }
    
    
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
      
  }
}
a.icon {
    display: none;
}



/** Articles Css **/


@media (min-width: 993px) {
    .rem-col.l8 {
        width: 66.66666%;
    }
}
h3.article-title {
    font-size: 17px;
}
.rem-col, .rem-half, .rem-third, .rem-twothird, .rem-threequarter, .rem-quarter {
    float: left;
    width: 100%;
}
.rem-light-grey, .rem-hover-light-grey:hover, .rem-light-gray, .rem-hover-light-gray:hover {
    color: #000 !important;
    background-color: #f1f1f1 !important;
}
.rem-white, .rem-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important;
}
.rem-margin {
    margin: 16px !important;
}
.rem-card-4, .rem-hover-shadow:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
img {
    vertical-align: middle;
}
.rem-container, .rem-panel {
    padding: 0.01em 16px;
}
.rem-container:after, .rem-container:before, .rem-panel:after, .rem-panel:before, .rem-row:after, .rem-row:before, .rem-row-padding:after, .rem-row-padding:before, .rem-cell-row:before, .rem-cell-row:after, .rem-clear:after, .rem-clear:before, .rem-bar:before, .rem-bar:after {
    content: "";
    display: table;
    clear: both;
}
b, strong {
    font-weight: bolder;
}
.rem-opacity, .rem-hover-opacity:hover {
    opacity: 0.60;
}
.rem-container:after, .rem-container:before, .rem-panel:after, .rem-panel:before, .rem-row:after, .rem-row:before, .rem-row-padding:after, .rem-row-padding:before, .rem-cell-row:before, .rem-cell-row:after, .rem-clear:after, .rem-clear:before, .rem-bar:before, .rem-bar:after {
    content: "";
    display: table;
    clear: both;
}
.rem-white, .rem-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important;
}
@media (min-width: 601px) {
    .rem-col.m8, .rem-twothird {
        width: 66.66666%;
    }
}
.rem-container:after, .rem-container:before, .rem-panel:after, .rem-panel:before, .rem-row:after, .rem-row:before, .rem-row-padding:after, .rem-row-padding:before, .rem-cell-row:before, .rem-cell-row:after, .rem-clear:after, .rem-clear:before, .rem-bar:before, .rem-bar:after {
    content: "";
    display: table;
    clear: both;
}

.rem-col, .rem-half, .rem-third, .rem-twothird, .rem-threequarter, .rem-quarter {
    float: left;
    width: 100%;
}
@media (min-width: 601px) {
    .rem-col.m4, .rem-third {
        width: 33.33333%;
    }
}
.rem-right {
    float: right !important;
    margin-top:inherit;
}

@media (max-width: 601px) {
.rem-right {
   
    display: none;
}
    }


.rem-border {
    border: 1px solid #ccc !important;
}
.rem-btn, .rem-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.rem-btn, .rem-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}
button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
}
button, select {
    text-transform: none;
}
.rem-white, .rem-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important;
}
button, input, select, textarea, optgroup {
    font: inherit;
    margin: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
}

*, *:before, *:after {
    box-sizing: inherit;
}
.rem-white, .rem-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important;
}
.rem-card-4, .rem-hover-shadow:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .rem-card-4.rem-margin.rem-white:not(:first-child) 
  .topnav a.icon {
    float: right;
    display: block;
  }
}



/** END ARTICLES Css **/

/** SideBars Css **/

@media (min-width: 993px) {
    .rem-col.l4 {
        width: 33.33333%;
    }
}

/** Card SideBar Css **/

.rem-margin-top {
    margin-top: 16px !important;
}
.rem-margin {
    margin: 16px !important;
}
.rem-card, .rem-card-2 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

/** Post SideBar Css **/

.rem-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.rem-ul li {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd;
}
.rem-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.rem-ul li:last-child {
    border-bottom: none;
}
.rem-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.rem-left {
    float: left !important;
}

/** Tags SideBar Css **/


.rem-badge, .rem-tag {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
}
.rem-small {
    font-size: 12px !important;
}
.rem-margin-bottom {
    margin-bottom: 16px !important;
}

.rem-large {
    font-size: 18px !important;
}

.rem-ul li {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd;
}
.rem-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.rem-left {
    float: left !important;
}
.rem-margin-right {
    margin-right: 16px !important;
}
/** Footer Css **/

.rem-dark-grey, .rem-hover-dark-grey:hover, .rem-dark-gray, .rem-hover-dark-gray:hover {
    color: #fff !important;
    background-color: #616161 !important;
}
.rem-padding-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}
.rem-margin-top {
    margin-top: 16px !important;
}
.rem-black, .rem-hover-black:hover {
    color: #fff !important;
    background-color: #000 !important;
}

.rem-disabled, .rem-btn:disabled, .rem-button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}
a {
    color: inherit;
}
a {
    background-color: transparent;
}
hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0;
}




/** Display content by flex Css **/
@media (min-width: 993px) {
.rem-card-4.rem-margin.rem-white {
    display: flex;
    padding: 10px;
}
}
.article-img  {
width : 100%;
    
    }
/** Display content by flex Css **/
@media (min-width: 993px) {
.article-img  {
width : 40%;
    
    }
}