/**
*
* ---------------------------------------------------------------------------
*
* Template : Blue - A One-Page HTML Portfolio/Business Template
* Author : Muhammad Morshd
* Author URI : http://morsheds.com
*
* --------------------------------------------------------------------------- 
*
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300,800);
/* =================================== */
/*	Basic Style 
/* =================================== */
html, body { overflow-x:hidden; }
body {
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    line-height: 24px;
	text-align:justify;
}
hr {
  background: transparent none repeat scroll 0 0;
  border-top: 1px solid #cad5d9;
  margin: 0 auto;
  width: 100%;
  padding: 0;
  clear:both;
  display:block;
}
figure, p, address {
    margin: 0;
}

p {
    line-height: 25px;
	font-size:16px;
}

iframe {
    border: 0;
}

a {color:#666;
    -webkit-transition: all 0.3s ease-out 0s;
       -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
         -o-transition: all 0.3s ease-out 0s;
            transition: all 0.3s ease-out 0s;
}

a, a:hover, a:focus, .btn:focus {
    text-decoration: none;
    outline: none;
}
a:hover, a:focus {
  color: #c10120;
}
h1, h2, h4, h5, h6,
.h1, .h2, .h4, .h5, .h6 {
	font-weight:700;
    color: #3c5b6f;
	font-family: 'Open Sans', sans-serif;
	text-align:center;
}
h2{
color:#666;
text-transform:uppercase;
margin:0;
font-size:30px;	
}

h3{
	font-weight:300;
	color:#666;
	font-size:30px;
	text-transform:none;
	margin:0 0 20px 0;
	padding:0;
	
}
h4{
	font-weight:600;
	color:#f7a324;
	font-size:20px;
	text-transform:none;
	margin:0 0 5px 0;
	padding:0;
	text-align:left;
	
}
main > section {
    padding: 70px 0;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0; overflow: hidden;
}

.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} 
/*BOUTONS PRIMAIRE */
.btn-primary,
form.contact input.btn-primary {
background: #f5a400  none repeat scroll 0 0;
border: medium none;
border-radius: 10px;
color: #fff;
display: table;
font-family: "Open Sans",sans-serif;
font-size: 16px;
font-weight: 700;
margin: 10px auto;
padding: 10px 30px;
position: relative;
text-transform: uppercase;
width: auto;
}
.btn-primary:hover,
form.contact input.btn-primary:hover {
	background: #333;
	border:none;
	color: #fff ;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
  background-color: #333;
  border-color: #333;
  color: #fff;
}
form.contact input.btn-primary {
	float: none !important;
	height: 45px;
	padding: 0 20px;
	text-indent: 0;
}

/* BOUTON SECONDAIRE */
form.contact input.btn-default,
.btn-default{
background: #333 none repeat scroll 0 0;
border-radius: 5px;
color: #fff;
display: inline-block;
font-family: "Open Sans",sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 23px;
margin: 10px auto;
padding: 10px 20px;
position: relative;
text-indent: 0;
text-transform: uppercase;
width: auto;
}
form.contact input.btn-default:hover,
.btn-default:hover {
  color: #fff ;
  background:#f5a400;
}
/**/
.full{
	width:100%;	
}

a span.presents{
	font-size:12px;
	color:#fff;
	font-weight:normal;
	text-transform:uppercase;
	line-height:2px; 
	margin:0 15px;
	text-decoration:none;
}
h1:hover a span.presents,
span.presents:hover{
	text-decoration:none !important;
}

.sec-title {
    margin-bottom: 50px;
}

.sec-title.white {
    color: #fff;
}

.sec-title h2 {
    font-size: 36px;
    margin: 0 0 30px;
    padding-bottom: 30px;
    position: relative;
    text-transform: uppercase;
}

.sec-title.white h2 {
    color: #fff;
}

.sec-title h2:after {
    border-bottom: 1px solid #fff;
    content: "";
    display: block;
    left: 45%;
    bottom: 0;
    position: absolute;
    width: 115px;
}

.sec-title.white h2:after {
    border-bottom: 1px solid #fff;
}

.parallax {
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}


/**
/*	Preloader
/* ==========================================*/

#preloader {
    background-color: #fff;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

/*Battery*/
.loder-box {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 1px;
  height: 100px;
  left: 50%;
  margin-left: -64px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
  width: 128px;
}

.battery{
    width: 60px;
    height: 25px;
    top: 35%;
    border: 1px #2E2E2E solid;
    border-radius: 2px;
    position: relative;
    -webkit-animation: charge 5s linear infinite;
       -moz-animation: charge 5s linear infinite;
            animation: charge 5s linear infinite;
    margin: 0 auto;
}

.battery:after {
  background-color: #2E2E2E;
  border-radius: 0 1px 1px 0;
  content: "";
  height: 10px;
  position: absolute;
  right: -5px;
  top: 7px;
  width: 3px;
}

@-webkit-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
    100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}

@-moz-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
    100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}

@keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
    100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}


footer {
    background-color: #242424;
    color: #707070;
    padding: 20px 0;
}

footer a{
    color: #f7a324;
}

footer a:hover{
    color: #c77b07;
}


footer .ft-left {
    float: left;
    margin-left: 50px;
    padding-top: 20px;
}

footer .ft-right {
    float: right;
}

footer .telephone {
    color: #fff;
    font-size: 30px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 42px;
    margin-left: 20px;
    text-decoration: underline;
}

#usastamp {
    position: absolute;
    top: 10%;
    right: -2%;
    width: 250px;
    height: 250px;
    -ms-transform: rotate(16deg);
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
    z-index: 1;
}


@media (max-width: 1200px) {
    #usastamp {
        width: 180px;
        height: 180px;
        right: 5%;
    }
}

@media (max-width: 768px) {
    #usastamp {
        display: none;
    }

    footer .ft-right, footer .ft-left {
        float:left;
        clear: both;
        max-width: 100%;
        margin: 20px 50px;
    }
    footer .telephone, footer .callUs {
        float: left;
        clear: both;
    }

    footer .telephone {
        font-size: 30px;
        line-height: 30px;
        text-align: left;
    }
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}


/**
/*	Header
/* ==========================================*/

#navigation {
    -webkit-transition: all 0.8s ease 0s;
       -moz-transition: all 0.8s ease 0s;
        -ms-transition: all 0.8s ease 0s;
         -o-transition: all 0.8s ease 0s;
            transition: all 0.8s ease 0s;

    background-color: rgba(0,0,0, 0.7);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    padding: 5px 0;
}

#navigation.animated-header {
    padding: 20px 0;
	background-color:rgba(0,0,0, 0.5);
}

h1.navbar-brand {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 0 10px;
	padding:0;
    text-transform: uppercase;
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
	text-align:center;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
  background-color: transparent;
  color: #f7a324;
}

header h2 {
    color: #DA9101;
    font-size: 22px;
    text-transform: inherit;
}

/*=================================================================
	SECTION 1 // Home Slider et Form
==================================================================*/
#home-slider {

background: rgba(0, 0, 0, 0) url("../img/slider/banner.jpg") repeat fixed 0 0 / cover ;
height: auto !important;
padding: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b0f9+0,003348+100 */
/*background: #00b0f9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
/*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYjBmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDMzNDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #00b0f9 0%, #003348 100%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(left,  #00b0f9 0%,#003348 100%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to right,  #00b0f9 0%,#003348 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b0f9', endColorstr='#003348',GradientType=1 ); /* IE6-8 */
}
#home-slider .overlay {
 /* background: rgba(255, 255, 255, 0.2);*/
background-image: url("../img/overlay-top.png");
padding: 0 0 120px;
background-attachment: fixed;
}
#home-slider {
    position: relative;
    padding: 0;
	text-align:center;
}
#home-slider h1 {
color: #fff;
font-family: "Open Sans",sans serif;
font-size: 35px;
font-weight: 700;
margin: 0 auto;
/*max-width: 670px;*/
text-align: center;
text-transform: uppercase;
}
#home-slider h1 span{
	color: #d9f3fe;
display: inline;
}
#home-slider h2 {
color: #fff;
font-family: "Open Sans",sans serif;
font-size: 35px;
font-weight: 300;
margin: 0 auto;
max-width: 670px;
text-transform:none;
}
#home-slider h2::before,
#home-slider h2::after{
display:none;
}
#home-slider p {
color:#fff;
margin: 0 0 15px 0;
font-size:20px;
text-align: center;
line-height: 27px;
}
#home-slider span {
	display: block;
	margin-bottom: 10px;
	margin-top: 50px;
	text-align: center;
}

form.contact {
	color: #fff;
	font-size: 14px;
	margin-top: 50px;
}
form.contact .input-field {
    margin-bottom: 10px;
}

form.contact input {
	background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 0;
	box-shadow: none;
	color: #000;
	font-size: 14px;
	height: 35px;
	margin-bottom: 10px;
	text-indent: 10px;
	width: 100%;
}

::-webkit-input-placeholder{
    color: rgba(00,00,00,.7);
}

form.contact textarea {
    width: 100%;
    height: 125px;
	background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
	border: 1px solid rgba(255, 255, 255, 0.8);
	color:#000;
	padding-left:10px;
	font-size: 14px;

}
form.contact input[type=checkbox]{
	clear: both;
	display: inline-block;
	float: left;
	height: auto;
	margin: 2px 0 0;
	width: auto;
	border-color:#5a7588;
}
form.contact legend{
	border: medium none;
	display: inline-block;
	float: left;
	font-size: 14px;
	line-height: 18px;
	margin: 0 0 10px 10px;
	width: auto;
	color:#5a7588;
}
form.contact hr{
	border-color:#cad5d9;
	margin:10px 0;	
}
form.contact input:focus,
form.contact textarea:focus{
	border-color:#fff;
	box-shadow:0 0 8px rgba(0, 0, 0, 0.6);
}
form.contact input.btn-effect:hover {
  background: #393a40;
  color:#FFF;
}

.thankyou p{
margin-left: 0;
margin-top: 80px !important;
}
.thankyou p strong{
font-size: 25px;
font-weight: 500;
}
.thankyou p .fa{
color:#999;
font-size:25px;
}

/*=================================================================
	Section 2 // product
==================================================================*/
.bgvideo{
background:#ddd url("../img/diagonale_clair.png") repeat scroll 0 center;	
text-align:center;
padding:70px 0 0 0;

}
#product{
padding:70px 0 0 0;	
}
#product .btn-primary{
margin:0;	
}
#product h2{
text-align:left;
margin-top:50px;	
}

/*=================================================================
	Section 3 // About
==================================================================*/
#about{
background:url("../img/diagonale.png") 0 center repeat #555555;

}
#about .btn-primary{
margin:15px auto;
clear:both;	
}
#about p{
text-align:center;
color:#fff;	
}
#about h2{
text-align:center;
color:#fff;
}
#about h3{
color: #ddd;
font-size: 25px;
text-align: center;
margin: 30px 0 5px;
}
/*=================================================================
	Timeline
==================================================================*/
#solution{
padding:35px 0 0;
}
#solution h3{
text-align:center;	
}
.bgvideo{
margin-top:70px;	
}
#solution .btn-primary{
margin:0 auto;	
}
.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
	margin:0;
}
.timeline h4{
color: #f7a324;
margin: 0;
}
    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: #f7a324;
        left: 50%;
        margin-left: -1.5px;
    }

    .timeline > li {
        margin-bottom: 20px;
        position: relative;
    }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li > .timeline-panel {
            width: 46%;
            float: left;
            border: 1px solid #d4d4d4;
            border-radius: 2px;
            padding: 20px;
            position: relative;
            -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
        }

            .timeline > li > .timeline-panel:before {
                position: absolute;
                top: 26px;
                right: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 15px solid #ccc;
                border-right: 0 solid #ccc;
                border-bottom: 15px solid transparent;
                content: " ";
            }

            .timeline > li > .timeline-panel:after {
                position: absolute;
                top: 27px;
                right: -14px;
                display: inline-block;
                border-top: 14px solid transparent;
                border-left: 14px solid #fff;
                border-right: 0 solid #fff;
                border-bottom: 14px solid transparent;
                content: " ";
            }

        .timeline > li > .timeline-badge {
            color: #fff;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size:20px;
			font-weight:700;
            text-align: center;
            position: absolute;
            top: 16px;
            left: 50%;
            margin-left: -25px;
            background-color: #999999;
            z-index: 100;
            border-top-right-radius: 50%;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .timeline > li.timeline-inverted > .timeline-panel {
            float: right;
        }

            .timeline > li.timeline-inverted > .timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }

            .timeline > li.timeline-inverted > .timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }
/*
.timeline-badge.un {
    background-color: #fce2bb !important;
}
.timeline-badge.deux {
    background-color: #fcd79e !important;
}

.timeline-badge.trois {
    background-color: #fcc97c !important;
}

.timeline-badge.quatre {
    background-color: #febf60 !important;
}

.timeline-badge.cinq {
    background-color: #fcb140 !important;
}

.timeline-badge.six {
    background-color: #f7a324 !important;
}

.timeline-badge.un {
    background-color: #999794 !important;
}
.timeline-badge.deux {
    background-color: #81807d !important;
}

.timeline-badge.trois {
    background-color: #6f6e6c !important;
}

.timeline-badge.quatre {
    background-color: #5b5a58 !important;
}

.timeline-badge.cinq {
    background-color: #424140 !important;
}

.timeline-badge.six {
    background-color: #282726 !important;
}*/
.page-header{
margin:0;	
}
.timeline-badge{
    background-color: #f7a324 !important;
}
.timeline-title {
    margin-top: 0;
    color: inherit;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
}

    .timeline-body > p + p {
        margin-top: 5px;
    }

@media (max-width: 767px) {
    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: 16px;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }

        ul.timeline > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
        }

        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }
}

/*=================================================================
	Portfolio
==================================================================*/

.project-wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.project-wrapper li {
    display: inline-block;
}

.portfolio-item {
    cursor: pointer;
    margin: 0 1% 1% 0;
    overflow: hidden;
    position: relative;
    width: 23%;
}
.portfolio-item > p {
  color: #fff;
  min-height: 100%;
  padding: 15px;
  position: absolute;
  vertical-align: middle;
}
.portfolio-item > .btn-default {
color: #fff;
font-size: 18px;
left: 0;
padding: 15px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 27%;
width: 100%;
background:transparent;
font-weight:400;
}
#pumps-usages .portfolio-item > .btn-default {
top: 15%;
}
.portfolio-item > .btn-default::before {
content:"\f086";
font-family:FontAwesome;
color:#fff;
font-size:25px;
text-align:center;
display:block;
}
.portfolio-item.clic:hover img{
	opacity: 0.6; /*  CSS3  */
   filter(opacity=60);  /*  Pour IE  */
}
.portfolio-item.clic:hover{
	background-color:#000;	
}
figcaption.mask {
    background-color: rgba(0, 51, 72, 0.79);
    bottom: -126px;
    color: #fff;
    padding: 15px;
    position: absolute;
    width: 100%;
    text-align: left;
    
    -webkit-transition: all 0.4s ease 0s;
       -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
         -o-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}

.portfolio-item:hover figcaption.mask {
    bottom: 0;
}

figcaption.mask p {
    font-size:13px;
	text-align:center;
}

ul.external {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: -47px;
    
    -webkit-transition: all 0.4s ease 0s;
       -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
         -o-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}

ul.external li {
    display: inline-block;
}

ul.external li a {
    background-color: rgba(255, 255, 255, 0.9);
    color: #818181;
    display: block;
    padding: 10px 18px 13px;
    
    -webkit-transition: all 0.5s ease 0s;
       -moz-transition: all 0.5s ease 0s;
        -ms-transition: all 0.5s ease 0s;
         -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
}

ul.external li a:hover {
    background-color: #f5822b;
    color: #fff;
}

.portfolio-item:hover ul.external {
    top: 0;
}

.fancybox-skin {
    border-radius: 0;
}

.fancybox-title.fancybox-title-inside-wrap {
    padding: 15px;
}

.fancybox-title h3 {
    margin: 0 0 15px;
}

.fancybox-title p {
    color: #818181;
    font-size: 16px;
    line-height: 22px;
}

.fancybox-title-inside-wrap {
    padding-top: 0;
}


/*=================================================================
	Section Contact
==================================================================*/

#contact {
background-color:#bf077f;	
  text-align: center;
}


#contact h2 {
color: #fff;
font-size: 25px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
}
#contact h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 0px 0px;
  text-align: center;
}
#contact p {
color: #fff !important;
display: block;
font-size: 14px;
font-weight: 400;
margin: 0 0 15px 0px;
  text-align: center;
}
#contact h2::after{
	height: 1px;
    display: block;
    width: 50px;
    background:rgba(255,255,255,0.5);
    border-right: 1px rgba(255,255,255,0.5);
    content: '';
	margin:15px auto;
	
}



/*============================================================ 
	Responsive Styles
 ============================================================*/

/*============================================================
	For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

/*about*/
    #about .welcome-block img {
        margin-bottom: 30px;
    }

/* portfolio */
    figcaption.mask {
        bottom: -151px;
    }

    .testimonial-item > div:after {
        bottom: -40px;
    }
}


/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {

/* home slider  */
    .caption-content h2 {
        font-size: 40px;
    }

    .caption-content p {
        font-size: 25px;
    }

    .caption-content strong {
        font-size: 45px;
    }

/* about */
    .recent-works {
        margin-bottom: 50px;
    }

    .service-item {
        margin-bottom: 50px;
    }

/* portfolio */
    .portfolio-item {
        width: 48%;
    }

/* testimonial */
    .testimonial-item {
        width: 100%;
    }

    .testimonial-item {
        width: 80%;
    }

    .testimonial-item > div:after {
        bottom: -35px;
    }

/* price */
    .price-table {
        margin-bottom: 50px;
    }

/* contact form */
    .contact-form {
        margin-bottom: 50px;
    }
}


/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 767px) {

    body {
        font-size: 14px;
    }

    .parallax {
        background-position: centet tip !important;
    }

    .sec-title h2 {
        font-size: 25px;
    }

    .sec-title h2:after {
        left: 30%;
    }

/*navigation*/
    .navbar-inverse .navbar-toggle {
        border-color: #fff;
    }

    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
        background-color: transparent;
    }

/* slider */
    .caption-content h2 {
        font-size: 18px;
    }

    .caption-content > span {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .caption-content p {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .caption-content strong {
        font-size: 22px;
    }

/* about */
    .recent-works {
        margin-bottom: 85px;
    }

    #about .owl-buttons {
        margin-top: 20px;
    }

    #about .message-body {
        margin-bottom: 45px;
    }

    #about .welcome-block img {
        margin: 0 25px 15px 0;
    }

/* service */
    .service-item {
        width: 100%;
    }

/*portfolio*/
    .portfolio-item,
	.portfolio-item.double-left,
	.portfolio-item.double-right {
        margin: 0 auto 10px !important;
        font-size: 14px;
        width: 380px;
    }

    figcaption.mask {
        bottom: -187px;
        color: #fff;
        padding: 15px;
    }

/* lightbox */
    .fancybox-title h3 {
        font-size: 20px;
    }

    .fancybox-title p {
        font-size: 14px;
    }

/* testimonial */
    .testimonial-item {
        width: 95%;
    }

    .testimonial-item > div:before,
    .testimonial-item > div:after {
        background-image: none;
    }

    .testimonial-item > div > span {
        margin: 30px 0 20px;
    }

/* price */
    .price-table {
        margin-bottom: 50px;
    }

/* follow us */
    .social-button li:nth-child(2) {
        margin: 0 25px;
    }

    .social-button li a {
        height: 65px;
        line-height: 71px;
        width: 65px;
    }

/* contact form */
    .contact-form {
        margin-bottom: 50px;
    }

/* footer */
    .footer-content {
        width: 100%;
    }

    .footer-social ul li {
        margin: 0 7px;
    }
}


/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 320px) and (max-width: 767px) {
.thankyou p{
margin-top:20px !important;	
		text-align:center;
		margin-left:0px !important;
}
    .sec-title h2:after {
        left: 38%;
    }

/* home slider */
#home-slider span img {
        max-width:300px;
		height:auto;
    }
#home-slider h1 {
        font-size: 35px;
		text-align:center;
		margin-left:0px;
    }

#home-slider h2 {
        font-size: 25px;
		text-align:center;
		margin-left:0px;
    }
#home-slider p {
		text-align:center;
		margin-left:0px;
    }
#home-slider .link{
	display: table;
	float: none;
	margin: 15px auto;
	text-align: center;
	font-size: 18px;
}
form.contact input.envoyer, .btn-color{
width:100%;	
}

/*about*/
	.videoWrapper{
	margin-top:20px;	
	}
    #about .welcome-block h3 {
        margin: 0 0 35px;
    }

    .service-item {
        margin: 0 auto 50px;
        width: 55%;
    }
.thankyou{
color: #222222;
font-size: 14px;
line-height:16px;
margin-top: 50px;
text-align:center;
}
/* portfolio */
    .portfolio-item {
        max-width: 300px;
    }
	.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
	  display: block;
	  height: 100% !important;
	  text-align: center;
	  max-width:auto !important;
	}
	.portfolio-item.double-left{
	margin: 0 0 10px 0 !important;
	width: 381px;
    }
	.portfolio-item.double-right{
	margin: 0 0 10px 0 !important;
    width: 381px;
    }

    figcaption.mask {
        bottom: -182px;
    }

/* testimonial */
    .testimonial-item {
        width: 80%;
    }

    .testimonial-item > div:before {
        bottom: 160px;
    }

/* social */
    .social-button li:nth-child(2) {
        margin: 0 50px;
    }

    .social-button li a {
        height: 90px;
        line-height: 96px;
        width: 90px;
    }

/* price */
    .price-table {
        margin-bottom: 50px;
    }

/* contact form */
    .contact-form {
        margin-bottom: 50px;
    }

/* footer */
    .footer-content {
        width: 380px;
    }
}
<title>Hyco</title>