body {font-family: 'Roboto', sans-serif; font-size:14px; color: #6c6c6c; background: #fff/*rgba(255,0,0,0.08); no-repeat center 970px*/; height: auto;}
body.inner{padding-top:95px; background-position:center 150px;}
div.message.error{text-align:center; padding: 20px; position:absolute;z-index:9999; top:20%;left:50%;width:400px; margin-left:-220px; background: #333; color:#fff; font-size:18px;}
div.message.success{display:none;}
.error-message{color:#f00;}
a:link,a:hover,a:active,a:visited{color:inherit}

.container{ width: 1200px; margin: 0 auto;}
.yt { text-align: center;}
.yt iframe {width: 80%; height: 600px;}
.pr-title{text-align: center; font-size:55px; width: 100%; float: left; position: relative;}
.pr-list{width: 100%; float: left; text-align: center; margin: auto; margin-top:5%;}

.pr-box {width:47%; box-sizing: border-box; padding:1%; background: #f2f2f2; display: inline-block; margin-left:1%; margin-right: 1%; margin-bottom:2%; transition: 0.3s; border: solid 1px #f2f2f2; min-height: 280px;}
.pr-box:hover{border: solid 1px #C3C3C3; box-shadow: 10px 10px 5px #888888;}
.pr-img{width:100%; float: left;}
.pr-img img{max-width:100%;}
.pr-box-left, .pr-box-right{width:50%; float: left;}
.pr-desc, .pr-price, .pr-add, .pr-title {width: 100%; float: left;}
.pr-desc {text-align: left;}
.pr-title-box{font-size: 16px; padding-bottom: 3%; text-align: left;}
.pr-price {padding-top: 1%; padding-bottom: 1%;}
.pr-price {text-align: left;}
.add-button {border:solid 1px #6c6c6c; padding: 1%; border-radius: 3px; transition: 0.5s; position: absolute;   margin: auto;    top: 10px;    left: 0;    right: 0;     width: 50%;}
.add-button:hover{background: #ffffff;}
footer{ width: 100%; float: left; position: relative;}
.footer_bottom{ width: 100%; float: left; background: #cc1807; /*linear-gradient(#f00, #a00);*/ box-shadow: 0 0 14px #f00; height: 86px; z-index: 10;}
.footer_top{ width: 100%; float: left; }
.footer_top img {width: 100%; max-width: 100%; max-height: 150px; object-fit: cover; display: block;}
.pr-add {position: relative; margin-top: -35px;}

.single-product{width: 100%; float: left;}
.single-box {width: 100%; float: left;}
.single-left {width: 40%; float: left; margin-top:2%;}
.single-right{width: 60%; float: left; margin-top:2%;}
.single-title, .single-desc, .single-price, .add-tt-c {width: 100%; float: left;}
 .single-desc {font-size:16px; box-sizing: border-box; padding-left: 1%;}
.add-button-s {border:solid 1px #6c6c6c; padding: 1%; border-radius: 3px; transition: 0.5s;    margin: auto;    top: 10px;    left: 0;    right: 0;     width: 50%;}
.add-button-s:hover{background: #6c6c6c; color: white;}
.add-tt-c{ margin-bottom: 5%; text-align: center; position: relative;}
.single-price {text-align: left; font-size: 30px; margin-bottom: 3%; margin-top: 3%; padding-left: 1%;}
.livarasion {font-size: 18px;}

ul.pagination {width:100%; padding: 0;}
ul.pagination li {display: inline-block;}
ul.pagination li.prev {list-style-type: none;}
ul.pagination li.next {list-style-type: none;}

.pr-add input{border:solid 1px #6c6c6c; padding: 1%; border-radius: 3px; transition: 0.5s; position: absolute;   margin: auto;    top: 100px;    left: 0;    right: 0;     width: 50%; color: #6c6c6c;}
.pr-add form{margin: 0;}
.pr-add input:hover{background: #6c6c6c; color: #ffffff;}

.details{border:solid 1px blue; padding: 1%; border-radius: 3px; transition: 0.5s; position: absolute;   margin: auto;    top: 50px;    left: 0;    right: 0;     width: 48%; color: blue;}
.details:hover {color: #ffffff; background: blue;}
.add-tt-c input{border:solid 1px #6c6c6c; padding: 1%; border-radius: 3px; transition: 0.5s; display: inline-block;   margin: auto;    top: 10px;    left: 0;    right: 0;     width: 20%; color: #6c6c6c;}
.add-tt-c form{margin: 0; text-align: left; padding-left: 1%;}
.add-tt-c input:hover{background: #6c6c6c; color: #ffffff;}
.pr-title form{margin: 0;}

.footer_bottom_left{ width: 50%; float: left; padding-top:35px;color:#fff;}
.footer_bottom_left p{ margin: 70px 0 0; color:inherit; float: left; width: 100%;}
.single-title {text-align: center; text-transform: uppercase; font-size: 55px; ; }
.footer_bottom_right{ width: 50%; float: left; text-align: right; margin: 17px 0 0 0;}
.footer_bottom_right p{ width: 92%; float: left; color: #fff; margin: 0;}
.single-left img {max-width: 100%;}
.pr-title input {border: none; background: none; font-size: 16px; position: absolute; top:0; right: 0;}

.title_footer{ width: 70%; margin: 90px 15% 0; padding: 10px 0; float: left; font-size: 30px; text-align: center; text-transform: uppercase; color: #000; background: rgba(242,199,219,0.7);} 
.title_detail{ width: 100%; float: left; text-align: center; margin: 5px 0 0;}

.social_line{margin:0 0 10px;}

.form_footer{ width: 100%; float: left;}
.order form{margin-top:20px;}
form{ width: 100%; float: left; margin: 60px 0;}
.input input{ width: 30%; float: left; box-shadow: 0 0 1px 1px #cc0; padding: 10px 1%; color: #3d3d3d; font-size: 21px; text-align: left; margin: 0 3% 0 15%; border: none; border-radius: 5px;}
.input input.margin1{ margin: 0 15% 0 3% }
.submit{ width: 30%; float: left; margin: 40px 35% 0; padding: 10px 0; font-size: 21px; border: none;}
textarea.warning,.input input.warning{box-shadow: 0 0 2px 2px #f00;}
textarea{box-shadow: 0 0 1px 1px #cc0;border:0;}
.input textarea {border-radius: 5px; font-size: 21px}

.contact_element{text-align:center;}
.contact_element .textarea,.contact_element .input{width:100%; float:left; margin:5px 0;}
.contact_element .textarea textarea,.contact_element .input input{width:98%; padding: 2px 1%; background: #eee; margin:0;}
.contact_element form{width:400px; display:inline-block; float:none;}
.col_50 .contact_element form{width:100%;}
#cboxCurrent{display:none !important;}

#main{ position: relative;}
.actualite_bg{ width: 100%; float: left;}

.title_actualite{ width: 100%; float: left; font-size: 30px; text-align: center; text-transform: uppercase; color: #2c2c2c; margin: 30px 0 0;}

.actualite_all{ width: 50%; float: left; margin: 0 0 40px; min-height: 300px;}

.actualite_all .actualite_1{margin:0;}
.actualite_left{ width: 48%; float: left; margin: 30px 2% 0 0;}
.actualite_left a{display:inline-block;}
.actualite_left .thumb{max-height:100px;margin-right:5px;}
.act_left img,.actualite_left img{ max-width: 100%; max-height:250px;}
.actualite_right{ width: 50%; float: left; margin: 30px 0 0 0;}
.actualite_1{ width: 100%; float: left; font-size: 30px; margin: 0 0 10px;}
.act_text{ width: 95%; float: left; font-size: 18px; line-height: 25px; text-align: justify; margin: 10px 0 30px;}

.entries  .actualite_all{width:100%;min-height:1px; margin:0 0 40px;}

 .line_data{font-size:18px; margin-bottom:4px;}

.left_button{ width: 40%; float: left;}
.left_button a{ width: 98%; padding: 10px 0; font-size: 21px; float: left; text-align: center;}

.right_button{ width: 58%; float: left; margin: 0 0 0 2%;}
.right_button a{ width: 99%; float: left; padding: 10px 0; font-size: 21px; text-align: center; transition: all 0.5s ease-in;}

.hex_bg{ width: 100%; float: left; background: rgba(236,236,236,0.6);}
.hex_title{ width: 100%; float: left; font-size: 30px; text-align: center; text-transform: uppercase; color: #2c2c2c; margin: 30px 0 0;}
.hex_all{ width: 100%; float: left; margin: 30px 0;}
.hex1{ width: 16%; float: left;}
.hex1 figcaption{background-color:transparent; padding:0;}

.bg{ float: left; width: 100%; text-align: center;}
.bg img{ max-width: 100%;}


[class^='imghvr-'],
[class*=' imghvr-'] {
 background-color:transparent; text-align: center;
}

.dots{width: 5%; float: left; margin: 103px 0;}
.dots{margin:103px 3%; width:6%}
.dots img{width:100%;}

.about{ width: 100%; float: left;}
#main .about_title{ width: 100%; float: left; font-size: 30px; text-align: center; text-transform: uppercase; color: #2c2c2c; margin: 30px 0 0;}
.about_all{ width: 100%; float: left; margin: 30px 0;font-size: 18px; line-height: 25px; text-align: justify;}
.about_left{ width: 48%; float: left;}

.about_right{ width: 50%; float: left;}
.about_text{ width: 100%; float: left; margin: 70px 0 30px;}

.about_button{ width: 100%; float: left;}
.about_button a{ width: 60%; margin: 0 20%; float: left; padding: 10px 0; font-size: 21px; text-align: center;}

/* COLORS colors */
.actualite_all .actualite_1,.act_title{color:#ca4000;}
.slidetext a,.act_button a, .submit, .left_button a, .right_button a, .about_button a{background: #efce00;color: #000;transition: all 0.3s ease-in;}
.slidetext a{background: rgba(242,202,191,0.5);}
.slidetext a:hover,.act_button a:hover, .submit:hover, .left_button a:hover, .right_button a:hover, .about_button a:hover{ color: #fff; background: #cc1807; transform:scale(1.1);}

.white_stripe{ width: 100%; float: left; background: url('../img/top_bg.png') no-repeat center center; height: 884px; position: absolute; z-index: 500; top: 497px;}

.slideshow{ width: 100%; float: left; height: auto; position: relative; margin-top: 86px;}
.slider{width:50%;float:left;height:auto;position:relative;margin-top:86px;}
.slide{ height: 500px;float: left; width: 100%;background: url('../img/toile_1.jpg') no-repeat center center;}
.slide_left .slide0{background-image:url('../img/toile_1.jpg');}
.slide_left .slide1{background-image:url('../img/toile_2.jpg');}
.slide_left .slide2{background-image:url('../img/toile_3.jpg');}
.slide_right .slide0{background-image:url('../img/aqua_1.jpg');}
.slide_right .slide1{background-image:url('../img/aqua_2.jpg');}
.slide_right .slide2{background-image:url('../img/aqua_3.jpg');}
  
.transparent_bg{ width: 100%; float: left;}
.slidetext{ width:100%; height: 100%; float: left; text-align: center; font-size: 50px; color: #fff; /*text-shadow: 1px 1px 8px #000;*/}
.slidetext a{position:absolute;left:0;top:0;right:0;bottom:0;margin: auto; padding:20px 40px;height:50px;line-height:50px; width: auto;}

header{ width: 100%; float: left; height: 86px; position: fixed; z-index:999; background: #cc1807;/*linear-gradient(#a00, #f00);*/ box-shadow: 0 0 14px #f00; top:0;left:0;}
.header_all{ width: 100%; float: left;}
.header_left{ width: 20%; float: left; text-shadow: 0px 1px #cc0; letter-spacing: 1px; padding-top:22px; color:#fff; font-family: 'Pathway Gothic One'; font-size:32px;}

.navigation{ width: 70%; float: left;}
.navigation ul{ width: 100%; float: left; list-style-type: none; margin: 0; padding: 0; text-align: right;}
.navigation ul li{ display: inline-block; width: auto; margin: 30px 0; position:relative;}
.navigation ul ul{margin:0;padding:36px 0 0; position:absolute; left:37px;top:20px; display:none;border-bottom:1px solid #466785; cursor:pointer;}
.navigation ul li:hover ul{display:block;}
.navigation ul ul li{float:left; width:100%; margin:0;padding:0;}
.navigation ul ul li a{display:block; padding: 5px; border:1px solid #466785; background:#fff; margin:0; text-align:left;text-transform:none;}
.navigation ul ul li.active a,.navigation ul ul li a:hover{background:#466785; color:#fff; }
.navigation ul li a{ font-size: 17px; color: #fff; text-transform: uppercase; margin: 0 10px; transition: all 0.5s ease-out;}
.navigation ul li.active a,.navigation ul li:hover a{ color: #ccc;}

.facebook{ width: auto; float: left; border-left: 2px solid #3d3d3d; margin: 26px 0 0;}
.facebook a{ color:#fff;width:28px; height:28px;margin-top:1px; display:block;float: left; text-align: right; line-height:28px; font-size:16px;border-radius:50%;border: 2px solid #3d3d3d; text-align:center; margin-left:15px; transition: color 0.5s, border 0.5s, background 0.5s;}
.facebook a:hover{border-color: #cc0; background:#cc0; color:#fff;} 

header.sticky{position: fixed; z-index: 999;}

.apropos_all{ width: 100%; float: left; margin: 50px 0 30px;}
.apropos_left{ width: 45%; float: left;}
.apropos_left img,.apropos_left video{max-width:100%;}
.apropos_left video{width:auto; height:auto;}
.image_apropos1{ width: 100%; float: left;}
.image_apropos2{ width: 100%; float: left; margin: 15px 0 0;}

.apropos_right{ width: 50%; float: right; margin: 0 0 0 2%;}
.apropos_right_title{ width: 100%; float: left; font-size: 30px; color: #3D3D3D; text-transform: uppercase;}

.name{ width: 100%; float: left; text-align: right; margin: 15px 0 0 0;}

#main p{font-size: 18px; color: #3d3d3d;  line-height: 25px;}

.actualites_title{ width: 100%; float: left; color: #2c2c2c; font-size: 30px; text-align: center; text-transform: uppercase;}

.actualite_box{ width: 100%; float: left; margin: 30px 0; border-bottom: 5px solid #466785;}
.act_left{ width: 30%; float: left;}
.act_right{ width: 69%; float: right;}
.act_title{ width: 100%; float: left; text-align: left; font-size: 25px; text-transform: uppercase;}
.act_button{ width: 100%; float: left; margin: 0 0 30px;}
.act_button a{ width: 50%; margin: 0 0 0 50%; float: left; padding: 10px 0; font-size: 21px; text-align: center;}

.per{ width: 100%; float: left;}
#main .per_title{ width: 100%; float: left; font-size: 30px; color: #2C2C2C; text-align: center; text-transform: uppercase; margin-bottom: 30px;}

.section1{ width: 100%; float: left; margin: 30px 0;}
.section_left{ width: 49%; float: left;}



#mobile_menu{width:0;overflow:hidden;height:0;}
.only_mobile{ display: none;}
.only_desktop{ display: block;}
#wrap_whole_website{float:left;width:100%;transition: margin 0.5s; overflow: hidden;}

@media (max-width: 1500px) {
	.slide {
		height: 350px;
	}
}

@media (max-width: 1000px) {
#main .about_title{line-height:40px;margin:10px 0 0;}
.about_all{margin:0;}
.only_mobile{ display: block;}
.only_desktop{ display: none;}	

.container{ width: 100%;}

#open_mobile_menu{ position: absolute; z-index: 99999; top: -2px; left: 0; padding: 5px; font-size: 30px; text-align: center; width: 16px; border-radius: 50%;}
.fa-2x{ color: #000;}
#open_mobile_menu:focus{ outline: none;}

#mobile_menu.mobile_size{ width: 75%;}
#wrap_whole_website.mobile_margin{margin-left: 75%;}
#wrap_whole_website{overflow: hidden;}
.pr-box{width: 99%;}

#mobile_menu{z-index:100;position:absolute;width:0;height:auto; float:left; overflow: hidden; background: #466785; transition: width 0.5s; top:86px;}
#mobile_menu ul{ width: 100%; float: left; margin: 0; padding:0; list-style-type: none; font-size: 18px; text-align: center; border-top: 0; }
#mobile_menu ul li{ width: 100%; float: left; text-align: center;}
#mobile_menu ul li a{ color: #fff; text-align: left; text-transform: uppercase;padding: 10px; display:block; font-size:16px;}
#mobile_menu ul li a:focus{ outline: none;}
#mobile_menu ul li.toggle_dropdown{ background: url('../img/tr2.png') no-repeat center 90%;}
#mobile_menu ul li.open{ background: none;}
#mobile_menu ul ul{ background: #0075bf; margin: 15px 0 0;}

.fa-bars{ color: #143A6F;}

.footer_bottom_left{ width: 100%; margin: 15px 0 0; padding-top:0;}
.footer_bottom_left p{ margin: 10px 0; text-align: center;}
.footer_bottom_right{ width: 50%; text-align: center; margin: 0 25%;}
.footer_bottom_right p{ width: auto; text-align: right;}

.footer_top{ background: #ababab; height: 456px;}
.title_footer{ text-align: center;}
form{ width: 96%; margin: 20px 2%;}
.input input{ width: 98%; margin: 0 0 10px;}
.submit{ width: 100%; margin: 10px 0;}
.footer_bottom{ top: 350px;}

#main,.actualite_bg{ width: 96%; margin: 0 2%;}
#main{margin-top:100px;}
.actualite_left{ width: 100%; text-align: center;margin:0;}

.actualite_right{ width: 100%;}
.act_text{ width: 100%; }

.actualite_1{ text-align: center;}
.left_button{ width: 49%;}
.right_button{ width: 49%; margin: 0 0 0 2%;}
.left_button a{ width: 99%;}

.hex_bg{ width: 96%; padding: 0 2%;}
.dots{ display: none;}

.hex_all{ float: none; display: inline-block; text-align: center; }
.hex1{ float: none; display: inline-block; margin: 0 10px; width: auto;}

.white_stripe{ display: none;}

.about{ width: 96%; margin: 100px 2% 0;}
.about_left{ width: 100%; float: left; text-align: center;}
.about_left img{ max-width: 100%;}

.about_right{ width: 100%; }
.about_text{ width: 100%; margin: 20px 0 0;}
.about_button{ margin: 15px 0 0;}
.about_button a{ width: 99%; margin: 0;}

.slider,.slideshow{ display: none;}

.facebook{ display: none;}

.header_left{ width: 100%; text-align: center;}

.apropos_all{ width: 96%; margin: 0 2%;}
.apropos_left{ width: 100%;}

.image_apropos1{ text-align: center;}
.image_apropos2{ text-align: center;}
.image_apropos1 img{ max-width: 100%;}
.image_apropos2 img{ max-width: 100%;}

.apropos_right{ width: 100%; margin: 0;}
.apropos_right_title{ text-align: center;}


.actualite_box{ width: 96%; margin: 30px 2% 30px;}
.act_left{ width: 100%; float: left; text-align: center;}

.act_right{ width: 100%; float: left;}
.act_title{ text-align: center;}
.act_button a{ width: 100%; margin: 0;}
.add-tt-c{margin-bottom: 10%;}
.add-tt-c input {width: 30%;}
.pr-box {min-height: 315px;}
}


@media (max-width: 600px) {
.left_button{ width: 100%;}
.right_button{ width: 100%; margin: 10px 0 0 0;}
.input input.margin1{margin:0;}
.pr-box {min-height: 600px;}
.pr-box-left {width: 100%;}
.pr-box-right {width:100%;}
.add-button {position: inherit;}
.pr-add {padding-bottom: 30px; padding-top: 10px;}
.single-title{font-size: 24px;}
.single-left {width: 100%;}
.single-right {width: 100%;}
.add-tt-c{margin-bottom: 15%;}
.add-tt-c input {width: 50%;}
}