{% load static %}
 html, body {
     height: 100%;
}
 body {
     font-family: "lora-regular", serif;
     font-size: 1.7rem;
     line-height: 3rem;
     color: #6e6e6e;
}
 .row {
     margin:auto;
}
 footer, section{
     display: block;
}
/* some stuff for webpage scrollbar */
 ::-webkit-scrollbar {
     width: 0.5em;
     background-color:#000;
}
 ::-webkit-scrollbar-thumb{
     background:#fff;

}
 ::-webkit-scrollbar-track {
     -box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
     background-color: transparent;
     width:2em;
}
.loading-img{
  position: absolute;

  left: 49.8%;
  top: 49.1%;
  width: 153px;
  height: 156px;
  margin: -30px 0 0 -50px;
  padding: 0;
}
@media screen and (max-width:400px){
  .loading-img{
    position: absolute;
    left: 45%;
    top: 45%;
    width: 150px;
    height: 150px;
    margin: -30px 0 0 -50px;
    padding: 0;
  }
}
@media screen and (max-width:600px){
  .loading-img{
    position: absolute;
    left: 45.5%;
    top: 45.5%;
    width: 150px;
    height: 150px;
    margin: -30px 0 0 -50px;
    padding: 0;
  }
}

 #preloader{
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #151515;
     z-index: 800;
     height: 100%;
     width: 100%;
}
 .no-js #preloder, .oldie #preloader{
     display: none;
}
 #loader{
     position: absolute;
     left: 50%;
     top: 50%;
     width: 100px;
     height: 100px;
     margin: -30px 0 0 -50px;
     padding: 0;
}
@media screen and (max-width: 400px){
  #loader{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100px;
      height: 100px;
      margin: -60px 0 0 -65px;
      padding: 0;
 }
}
@media screen and (max-width: 600px){
  #loader{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100px;
      height: 100px;
      margin: -60px 0 0 -65px;
      padding: 0;
 }
}
 #loader:before{
     content: "";
     border-top: 12px solid rgb(255, 255, 255);
     border-right: 12px solid rgb(255, 255, 255, 0.1);
     border-bottom: 12px solid rgb(255, 255, 255, 0.1);
     border-left: 12px solid  #000;
     -webkit-animation: load 1.1s infinite linear;
     animation: load 1.1s infinite linear;
     display: block;
     border-radius: 50%;
     width: 150px;
     height:150px;
}
 @-webkit-keyframe load{
     0%{
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
    }
     100%{
         -wbekit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 @keyframes load{
     0%{
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
    }
     100%{
         -wbekit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
/*--------------- * small mobile device */
 @media (max-width: 450px){
     #loader{
         width: 100px;
         height: 100px;
    }
     #loader:before{
         content: "";

         width: 150px;
         height:150px;
    }
}
/* Icon 1 */
 .animated-icon1, .animated-icon2, .animated-icon3 {
     width: 30px;
     height: 20px;
     position: relative;
     margin: 0px;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: 1.5s ease-in-out;
     -moz-transition: 1.5s ease-in-out;
     -o-transition: 1.5s ease-in-out;
     transition: 1.5s ease-in-out;
     cursor: pointer;
}
@media (max-width: 450px){
  .animated-icon1, .animated-icon2, .animated-icon3 {
      width: 26px;
      height: 25px;
}
}

 .animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
     display: block;
     position: absolute;
     height: 3px;
     width: 100%;
     border-radius: 9px;
     opacity: 1;
     left: 0;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: 1.25s ease-in-out;
     -moz-transition: 1.25s ease-in-out;
     -o-transition: 1.25s ease-in-out;
     transition: 1.25s ease-in-out;
}
 .animated-icon1 span {
     background: #23174d;
}
 .animated-icon2 span {
     background: #0d0c0d;
}
 .animated-icon3 span {
     background: #0d0c0d;
}
 .animated-icon1 span:nth-child(1) {
     top: 0px;
}
 .animated-icon1 span:nth-child(2) {
     top: 10px;
}
 .animated-icon1 span:nth-child(3) {
     top: 20px;
}
 .animated-icon1.open span:nth-child(1) {
     top: 11px;
     -webkit-transform: rotate(135deg);
     -moz-transform: rotate(135deg);
     -o-transform: rotate(135deg);
     transform: rotate(135deg);
}
 .animated-icon1.open span:nth-child(2) {
     opacity: 0;
     left: -60px;
}
 .animated-icon1.open span:nth-child(3) {
     top: 11px;
     -webkit-transform: rotate(-135deg);
     -moz-transform: rotate(-135deg);
     -o-transform: rotate(-135deg);
     transform: rotate(-135deg);
}
 .button{
     display:inline-block;
     padding:0.38em 1.3em;
     border:3px solid #808080;
     border-radius:5px;
     box-sizing: border-box;
     text-decoration:none;

     font-family:"Georgia", serif;
     background:transparent;
     text-align:center;
     transition: all 0.2s;
     box-shadow:0px 6px 10px 1px rgba(0,0,0,.8);
     font-size: 1.8rem
}
 .button:hover{
     color:#fff;
     background-color:transparent;
     text-decoration:none;
     border:3px solid #111860;
}
/*-----------------------------------*/
/*-----------main stuff ---- ----------------------------*/
 header {
     position: absolute;
    /*background:yellow;
    */
     width: 100%;
    /* min-height:20px;
    */
     z-index: 600;
}
 .logo_left {
     float: left;
     margin-left: 20px;
     margin-right: 50px;
     top: 20px;
     position: absolute;
}
 .logo_left a {
     border-radius: 237px;
     display: block;
     margin: 0;
     padding: 0;
     border: none;
     font: 0/0 a;
     text-shadow: none;
     color: transparent;
     width: 100px;
     height: 100px;
     background: url("../img/logo-chetouani.png") no-repeat center;
     background-size: 100% 100%;
     background-color:transparent;
}
 .navbar-wrapper{
     position: fixed;
     margin-left: 45%;
     margin-right: 0%;
     top : 25px;
     right: 0;
     left: 0;
     z-index: 20;
     border-radius: 207px;


}

 .navbar-default .navbar-collapse, .navbar-default .navbar-form{
     border: none;
}
 .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover .navbar-default .navbar-nav > .active > a:focus{
     color: #0a78d5;
     background-color: #00000012;
}
 .navbar-wrapper .navbar ul li a{

     color:#ffffff;

}
 .navbar-wrapper .navbar{
     position: absolute;
     top: -2rem;
     border: 0;
     border-radius: 0px;
     padding-right: 15px;
     pading-left: 15px;
     font-family: 'Roboto', sans-serif;
     font-weight: inherit;
     text-decoration:none;
     text-transform:uppercase;
     font-size:18px;
     background:#000c;

}
@media screen and (max-width: 1430px){
.navbar-wrapper .navbar{
    position: absolute;
    top: -2rem;
    border: 0;
    border-radius: 0px;
    padding-right: 15px;
    pading-left: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: inherit;
    text-decoration:none;
    text-transform:uppercase;
    font-size:15px;
    background:#000c;
    left: -5rem;
}}

 @media screen and (max-width: 812px){
     .navbar-wrapper{
         position: fixed;
         margin-left: 15%;
         margin-right:0%;
         top : 25px;
         right: 0px;
         left: 0;
         border-radius: 25px;
    }
     .navbar-wrapper .navbar{
         background:#100e17;
         border-radius:25px;
         padding-right: 0px;
         pading-left: 0px;
         padding-bottom:0px;
    }
     .navbar-wrapper .nav-button{
         margin:0%;
         float:left;
         width:5rem;
         height:5rem;
         border-radius:25px;



    }

     .navbar-wrapper .navbar ul li a{
         color:#f7f2f2;


    }
     .logo_left {
         display:none;
    }
}
 #footer{
     background:#100e17;
     height: 40rem;
     width: 100%;
     position: relative;
     text-align:center;
}
 .footer-content{
     position:relative;
     text-align: center;
     height:90%;
     display: block;
}
 .footer-content::before {
     content:"";
     background: -webkit-linear-gradient(left, rgba(250, 0, 1, 1) 0%, rgba(200,200,200,0.938813025210084) 0%, rgba(200,200,200,1) 100%);
     display: block;
     height:5px;
     width: 88%;
     bottom: 0;
     margin:auto;
     border-radius:20px;
}
 .footer-content h1 {
     position:relative;
     top: 5rem;
     color: #FFFFFF;
     font-family: "poppins-medium", sans-serif;
     font-size: 3.0rem;
     line-height: 1.071;
     max-width: 900px;
     margin-top: 0;
     margin-bottom: .4rem;
     margin-left: auto;
     margin-right:auto;
     text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
 .footer-content .copyright{
     top: 15rem;
     position: relative;
     color: #FFFFFF;
     font-family: "poppins-medium", sans-serif;
     font-size: 1.0rem;
     line-height: 1.071;
     max-width: 900px;
     margin-top: 0;
     margin-bottom: .4rem;
     margin-left: auto;
     margin-right: auto;
     text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
 .footer-content .intro-social{
     top: 17rem;
     text-align:right;
     display:inline-block;
     position:relative;
}
 .footer-content .intro-social li{
     display:inline-block;
     margin: 0 12px;
     padding:0;
}
 .footer-content .intro-social li a{
     color: #FFFFFF;
     font-size:36px;
}
 #go-top{
     position: fixed;
     bottom: 3rem;
     right: 3rem;
     z-index: 600;
     display: none;
}
 #go-top a {
     border: 0 none;
     display: block;
     height: 4rem;
     width: 4rem;
     background:transparent;
     color: #096cb1;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     -webkit-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
 #go-top a i {
     font-size: 4rem;
}
 #go-top a:hover{
     color:#fff;
     animation:3s infinite beatbox;
}
 @keyframes beatbox{
     0%{
         transform:scale(1);
    }
     25%{
         transform:scale(1.2);
    }
     40%{
         transform:scale(1);
    }
     60%{
         transform:scale(1.2);
    }
     100%{
         transform:scale(1);
    }
}
 @media screen and (max-width: 812px){
     #footer{
         height: 20rem;
    }
     .footer-content h1 {
         font-size: 2.0rem;
    }
     .footer-content .copyright{
         top: 7rem;
    }
     .footer-content .intro-social{
         top: 9rem;
    }
     .footer-content .intro-social li{
         margin: 0 2px;
    }
     .footer-content .intro-social li a{
         color: #FFFFFF;
         font-size:2rem;
    }
}
 @media screen and (max-width: 450px){
     .footer-content h1 {
         font-size: 2.0rem;
    }
     .footer-content .copyright{
         top: 7rem;
    }
     .footer-content .intro-social{
         top: 9rem;
    }
     .footer-content .intro-social li{
         margin: 0 2px;
    }
     .footer-content .intro-social li a{
         color: #FFFFFF;
         font-size:2rem;
    }
}
.separator{
  margin-left:10%;
  width: 80%;
}
.wtsp-contact-button{
    margin: 0%;
    float: left;
    width: 5rem;
    height: 5rem;
    border-radius: 25px;
}