/*
 * Author 	: Guimaraes Marcos
 * Email 		: mazwebContact@gmail.com
 * Website	:	https://www.mazweb.yo.fr
 */

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);

 /*
  * Basic CSS starts 
  */
 
 body {
     font-family: 'Open Sans', Sans Sarif;
     color: #787878;
     -webkit-font-smoothing: antialiased;
     background-color: black;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Open Sans', Sans Sarif;
     font-weight: 600;
 }
 
 p {
     margin: 0;
     padding: 0;
     line-height: 24px;
     font-size: 14px;
 }
 
 a {
     text-decoration: none;
 }
 
 
 /* NAVBAR */
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Lato', sans-serif;
     font-family: 'Oswald', sans-serif;
 }
 
 .wrapper2 {
     position: fixed;
     top: 0;
     /*left: -100%;*/
     right: -100%;
     height: 100%;
     width: 100%;
     background: black;
     /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
     /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
     /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
     transition: all 0.6s ease-in-out;
 }
 
 #active:checked~.wrapper2 {
     /*left: 0;*/
     right: 0;
 }
 
 .menu-btn {
     position: absolute;
     z-index: 2;
     right: 70%;
     /*left: 20px; */
     top: 20px;
     height: 200px;
     width: 150px;
     text-align: center;
     line-height: 50px;
     border-radius: 50%;
     font-size: 20px;
     cursor: pointer;
     /*color: #fff;*/
     /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
     /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
     /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
     transition: all 0.3s ease-in-out;
 }
 
 .menu-btn span,
 .menu-btn:before,
 .menu-btn:after {
     content: "";
     position: absolute;
     top: calc(50% - 1px);
     left: 40%;
     width: 30%;
     border-bottom: 2px solid rgb(255, 255, 255);
     transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 .menu-btn:before {
     transform: translateY(-8px);
 }
 
 .menu-btn:after {
     transform: translateY(8px);
 }
 
 .close {
     z-index: 1;
     width: 100%;
     height: 100%;
     pointer-events: none;
     transition: background .6s;
 }
 
 
 /* closing animation */
 
 #active:checked+.menu-btn span {
     transform: scaleX(0);
 }
 
 #active:checked+.menu-btn:before {
     transform: rotate(45deg);
     border-color: #fff;
 }
 
 #active:checked+.menu-btn:after {
     transform: rotate(-45deg);
     border-color: #fff;
 }
 
 .wrapper2 ul {
     position: absolute;
     top: 60%;
     left: 50%;
     height: 90%;
     transform: translate(-50%, -50%);
     list-style: none;
     text-align: center;
 }
 
 .wrapper2 ul li {
     height: 10%;
     margin: 15px 0;
 }
 
 .wrapper2 ul li a {
     text-decoration: none;
     font-size: 30px;
     font-weight: 500;
     padding: 5px 30px;
     color: #fff;
     border-radius: 50px;
     position: absolute;
     line-height: 50px;
     margin: 5px 30px;
     opacity: 0;
     transition: all 0.3s ease;
     transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 .wrapper2 ul li a:after {
     position: absolute;
     content: "";
     background: #b6206d;
     /*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
     /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     border-radius: 50px;
     transform: scaleY(0);
     z-index: -1;
     transition: transform 0.3s ease;
 }
 
 .wrapper2 ul li a:hover:after {
     transform: scaleY(1);
 }
 
 .wrapper2 ul li a:hover {
     color: black;
 }
 
 input[type="checkbox"] {
     display: none;
 }
 
 .content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: -1;
     text-align: center;
     width: 100%;
     color: #202020;
 }
 
 .content .title {
     font-size: 40px;
     font-weight: 700;
 }
 
 .content p {
     font-size: 35px;
     font-weight: 600;
 }
 
 #active:checked~.wrapper2 ul li a {
     opacity: 1;
 }
 
 .wrapper2 ul li a {
     transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
     transform: translateX(100px);
 }
 
 #active:checked~.wrapper2 ul li a {
     transform: none;
     transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
     /* easeOutBackを緩めた感じ */
     transition-delay: .6s;
     transform: translateX(-100px);
 }
 
 
 /* NAVBAR */
 
 a:hover {
     text-decoration: none;
 }
 
 a:hover,
 a:active,
 a:focus {
     outline: 0 !important;
 }
 
 :focus {
     outline: none;
 }
 
 ::-moz-focus-inner {
     border: 0;
 }
 
 .color {
     background: #b6206d;
 }
 
 .color-hover {
     background: #b6206d;
 }
 
 
 /* 
  * Basic CSS ends 
  */
 
 .banner {
     border-top: 8px solid black;
     background: #fff url('../img/banner.jpg');
     object-fit: cover;
 }
 
 .banner .container {
     max-width: 800px;
 }
 
 .banner .banner-content {
     padding: 150px 0;
 }
 
 .banner .banner-content p {
     margin-top: 10px;
     margin-bottom: 15px;
     font-size: 20px;
     text-transform: capitalize;
     letter-spacing: 0.1em;
     color: #fff;
 }
 
 .banner .banner-content .btn {
     border-radius: 3px;
 }
 
 .feature {
     padding-top: 60px;
     padding-bottom: 100px;
 }
 
 .feature .feature-item {
     max-width: 360px;
     margin: 0 auto;
     margin-top: 40px;
     text-align: center;
 }
 
 .feature .feature-item i {
     display: block;
     width: 90px;
     height: 90px;
     line-height: 89px;
     margin: 0 auto;
     font-size: 40px;
     color: #b6206d;
     margin-bottom: 30px;
     border: 1px solid #b6206d;
     border-radius: 50%;
     -webkit-transition: all 0.3s linear;
     -moz-transition: all 0.3s linear;
     -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
     transition: all 0.3s linear;
 }
 
 .feature .feature-item:hover i {
     background: #b6206d;
     color: #fff;
 }
 
 .feature .feature-item h4 {
     margin-top: 0;
     margin-bottom: 20px;
     font-size: 22px;
 }
 
 .feature .feature-item p {
     line-height: 25px;
     letter-spacing: 0.035em;
 }
 
 .subscribe {
     padding: 0 0;
     background: #b6206d;
 }
 
 .subscribe .sub-message h3 {
     margin-top: 0;
     font-size: 25px;
 }
 
 .subscribe .sub-message p {
     line-height: 33px;
     letter-spacing: 0.025em;
 }
 
 .subscribe .sub-message form {
     margin-top: 20px;
 }
 
 .subscribe .sub-message form .form-control {
     box-shadow: none;
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
 }
 
 .subscribe .sub-message form .btn {
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
 }
 
 .subscribe .embed-responsive {
     background: #fff;
 }
 
 .footer-above {
     padding: 50px;
     text-align: center;
     color: white;
 }
 
 .footer-above .post {
     max-width: 750px;
     margin: 0 auto;
     font-size: 16px;
     font-style: italic;
 }
 
 .footer-above h4 {
     margin-top: 0px;
     margin-bottom: 30px;
     font-size: 300%;
     border-bottom: solid 1px #b6206d;
     color: white;
 }
 
 .footer-above .social .icons {
     display: inline-block;
     width: 45px;
     height: 45px;
     line-height: 45px;
     margin: 3px 1px;
     font-size: 19px;
     background: #b6206d;
     color: white;
     border-radius: 50%;
     -webkit-transition: background 0.3s linear;
     -moz-transition: background 0.3s linear;
     -ms-transition: background 0.3s linear;
     -o-transition: background 0.3s linear;
     transition: background 0.3s linear;
 }
 
 .footer-above .social a:hover {
     background: black;
 }
 
 
 /*
  * personal CSS !important 
  */
 
 .color-theme-text {
     color: white;
     font-size: 400%;
     font: "Comic Sans MS";
 }
 
 .color-tarif-white {
     color: white;
     font-size: 200%;
 }
 
 .color-tarif-black {
     color: black;
     font-size: 200%;
 }
 
 .tarif-underline-text {
     border-bottom: solid 2px black;
     font-size: 300%;
 }
 
 .tel {
     text-decoration: none;
     color: white;
     font-size: 140%;
 }
 
 .contact-icons-text-size {
     font-size: 140%;
     color: #b6206d;
 }
 
 .tel:hover {
     text-decoration: none;
     color: #b6206d;
 }
 
 .btn-theme {
     background-color: #b6206d;
     border: solid 1px #b6206d;
     color: white;
     -webkit-transition: background 0.3s linear;
     -moz-transition: background 0.3s linear;
     -ms-transition: background 0.3s linear;
     -o-transition: background 0.3s linear;
     transition: background 0.3s linear;
 }
 
 .btn-theme:hover {
     background-color: black;
     color: #b6206d;
 }
 
 .copy-font {
     text-decoration: none;
     color: #b6206d;
     -webkit-transition: background 0.3s linear;
     -moz-transition: background 0.3s linear;
     -ms-transition: background 0.3s linear;
     -o-transition: background 0.3s linear;
     transition: background 0.3s linear;
 }
 
 .copy-font:hover {
     color: white;
     border: solid 1px #b6206d;
     border-radius: 10%;
 }
 
 .copy-right {
     font-size: 75%;
 }

 hr {
    border-top: 2px solid black;
 }
 
 .main-logo {
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-top: 60px;
     width: 55%;
 }
 
 .main-links {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 
 .link-android {
     margin-top: -17px;
     width: 350px;
 
 }
 
 .link-apple {
     width: 410px;
 }
 
 .links-container {
     padding: 0px;
     margin: 0px;
     background-color: #b6206d;
     width: 100%;
 }
 
 
 /*
  * hts -> cards 
  */
 
 .card {
     position: relative;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-color: black;
     background-clip: border-box;
     border: 0px solid rgba(0, 0, 0, 0.125);
     border-radius: 0.3rem;
 }
 
 .card-body {
     -ms-flex: 1 1 auto;
     flex: 1 1 auto;
     padding: 1.25rem;
 }
 
 .card-title {
     margin-bottom: 0.75rem;
     color: #b6206d
 }
 
 .mb-0,
 .my-0 {
     margin-bottom: 0 !important;
 }
 
 .pt-4,
 .py-4 {
     padding-top: 1.5rem !important;
 }
 
 .font-weight-medium {
     font-weight: 600;
 }
 
 .mt-2,
 .my-2 {
     margin-top: 0.5rem !important;
 }
 
 .row {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin-right: -15px;
     margin-left: -15px;
   }
 
   .pt-5,
 .py-5 {
   padding-top: 3rem !important;
 }
 
 /*Pricing tables*/
 .pricing-table .pricing-list {
     margin-bottom: 3rem;
     margin-top: 2rem;
   }
   
   .pricing-table .pricing-list li {
     margin-bottom: 1rem;
     font-size: 1.05rem;
     font-weight: 500;
   }
   
   .pricing-table .card {
     transition: all .25s ease-out;
     text-align: center;
   }
   
   .pricing-table .card .card-body {
     padding: 2.25rem 2rem;
   }
   
   .pricing-table .card.active {
     color: white;
     background-color: transparent;
   }
   
   .pricing-table .card.active h2,
   .pricing-table .card.active h3 {
     color: #ffffff;
   }
 
   .col-12 {
     position: relative;
     width: 100%;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;
   }
 
   .mx-auto {
     margin-right: auto !important;
     margin-left: auto !important;
   }
 
   .card-deck {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
   }
   
   .card-deck .card {
     margin-bottom: 15px;
   }
   
   @media (min-width: 576px) {
     .card-deck {
       -ms-flex-flow: row wrap;
       flex-flow: row wrap;
       margin-right: -15px;
       margin-left: -15px;
     }
   
     .card-deck .card {
       display: -ms-flexbox;
       display: flex;
       -ms-flex: 1 0 0%;
       flex: 1 0 0%;
       -ms-flex-direction: column;
       flex-direction: column;
       margin-right: 15px;
       margin-bottom: 0;
       margin-left: 15px;
     }
   }
 
   .mt-6,
 .my-6 {
   margin-top: 6rem !important;
 }
 
 
 /*
  * footer 
  */
 
  .footer-container {
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
  }
   
   @media (min-width: 576px) {
     .footer-container {
       max-width: 540px;
     }
   }
   
   @media (min-width: 768px) {
     .footer-container {
       max-width: 720px;
     }
   }
   
   @media (min-width: 992px) {
     .footer-container {
       max-width: 960px;
     }
   }
   
   @media (min-width: 1200px) {
     .footer-container {
       max-width: 1140px;
     }
   }
   
   .footer-container-fluid {
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
   }
 
  .pt-6,
 .py-6 {
   padding-top: 6rem !important;
 }
 
 .pr-6,
 .px-6 {
   padding-right: 6rem !important;
 }
 
 .pb-6,
 .py-6 {
   padding-bottom: 6rem !important;
 }
 
 .col-sm-5 {
     position: relative;
     width: 100%;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
   }
 
   .mr-auto {
   margin-right: auto !important;
 }
 
 .list-inline {
     color: #b6206d;
     padding-left: 0;
     list-style: none;
   }
   
   .list-inline-item {
     color: #b6206d;
 
     display: inline-block;
   }
   
   .list-inline-item:not(:last-child) {
     margin-right: 0.5rem;
   }
 
   .social a {
     width: 45px;
     height: 45px;
     background: transparent;
     display: block;
     text-align: center;
     color: gray-100;
     border-radius: 4px;
     font-size: 18px;
     line-height: 45px;
   }
   
   .social a:hover {
     background: #fb9403;
     color: #3a73c2;
     transition: all .4s ease-in-out;
   }
   
   .social.social-sm a {
     width: 35px;
     height: 35px;
     font-size: 16px;
     line-height: 35px;
   }
   
   .social.social-rounded a {
     border-radius: 50%;
   }
 
   .col-sm-2 {
 
     position: relative;
     width: 100%;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
 
   }
 
   .list-unstyled {
     padding-left: 0;
     color: white;
   }
 
   .mt-5,
 .my-5 {
   margin-top: 3rem !important;
 }
 
 /*
  * Responsive CSS 
  */
 
 
 /*
  * Mobile phones 
  */
 
 @media (max-width: 480px) {
     .img-position {
         float: none;
     }
 }
 
 
 /*
  * Tablets 
  */
 
 @media (max-width: 767px) {
     .banner .banner-content {
         text-align: center;
     }
 
     .banner .banner-content img {
         max-width: 180px;
         margin: 0 auto;
     }
 
     .subscribe .sub-content {
         max-width: 360px;
         margin: 0 auto;
     }
 
     .subscribe .sub-message form {
         margin-bottom: 25px;
     }
 
     .img-position {}
 }
 
 
 /*
  * Desktop 
  */
 
 @media (max-width: 2000px) {
     .princip-logo {
         width: 25%;
         height: 20%;
     }
 }