.backtotop {
    z-index: 50;
    line-height: 5px;
    background-color: #337AB7;
    border-radius: 0px 5px 5px 0px;
    display: block;
    position: fixed;
    top: 20%;
    left: -20px;
    height: 170px;
    width: 50px;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,.2);
    transition: all 0.3s ease-in-out;
}

.backtotop i {
    font-size: 2em;
    clear: both;
    display: block;
    top: 0;
    right: 0;
    height: 30px;
    width: 30px;
    margin: 7px 2px 2px 29px;
}

.backtotop a {
    text-decoration: none;
}

.backtotop a:hover {
    text-decoration: none;
}

.backtotop:hover {
    background-color: #0A4D81;
    left: 0;
}

.backtotop:hover a {
    color: #fff;
    text-decoration: none;
}

.backtotop:hover a:hover {
    color: #fff;
    text-decoration: none;
}

.backtotop span {
    margin: 2px 2px 2px 29px;
    font-size: 0.8em;
    font-weight: bold;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    text-orientation: upright;
    -webkit-font-feature-settings: "vkrn", "vpal";
    font-feature-settings: "vkrn", "vpal";
    cursor: pointer;
}

iframe {
    margin-top: 70px;
}
.navbar-default {
    border-color:transparent; 
}
.navbar-default .navbar-toggle .icon-bar{
	background-color: #fff;
}
.navbar-default .navbar-toggle{
	border-color: transparent;
}
.navbar-static-top{
	margin-top:20px;
}
.navbar-default .navbar-brand,.navbar-default .navbar-nav > li > a {
	color:#fff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a,.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus{
	color:#fff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    background-color: #0C507F;
	 border-radius: 0px;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: transparent;
}
.nav ul {
    padding: 5px;
}

.nav > li {
    /*padding: 5px;*/
}

.nav > li > a:hover,
.nav > li > a:focus {
    transition: all 0.3s ease-in-out;
    background-color: #D9534F;
    border-radius: 5px;
}
.bounce-up {
	opacity: 0;
	-moz-transition: all 700ms ease-out;
	-webkit-transition: all 700ms ease-out;
	-o-transition: all 700ms ease-out;
	transition: all 700ms ease-out;
	-moz-transform: translate3d(0px, 200px, 0px);
	-webkit-transform: translate3d(0px, 200px, 0px);
	-o-transform: translate(0px, 200px);
	-ms-transform: translate(0px, 200px);
	transform: translate3d(0px, 200, 0px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.bounce-up.in-view {
	opacity: 1;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
}
.my1 {
    background-color: #F7F553;
}

.my2 {
	background:url(images/rail_2.png) #67C4E5 no-repeat left bottom;
}

.my3 {
    background-color: #6FB9E6;
}

.my4 {
	background:url(images/rail_1.png) #117BC7 no-repeat right bottom;
}

.my5 {
	background:url(images/rail_1.png) #0C5084 no-repeat right bottom;
}

.my6 {
    background-color: #D9534F;
}


.carousel-item {
    height: 100vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
	top: 60%;
}
video {
object-fit: fill;
background-color:rgba(0,0,0,0.2);
}

/* * Based on Cover by https://twitter.com/mdo"  @mdo
* added cover image and background color to match (green)
*
* Globals */
/* Links */
a,
a:focus,
a:hover {
    color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
    color: #333;
    text-shadow: none;

    /* Prevent inheritence from `body` */
    background-color: #fff;
    border: 1px solid #fff;
}

/* * Base structure */
html,
body {
    /* css for full size background image */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
    display: table;
    width: 100%;
    height: 100%;
	transition: all 0.3s ease-in-out;
	opacity: 1;
    transition: 3s opacity;
    /* For at least Firefox */
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}

.site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
}

.cover-container {
    margin-right: auto;
    margin-left: auto;
}

/* Padding for spacing */
.inner {
    padding: 30px;
}

/* * Header */
.masthead-brand {
    margin-top: 10px;
    margin-bottom: 10px;
}

.masthead-nav > li {
    display: inline-block;
}

.masthead-nav > li + li {
    margin-left: 20px;
}

.masthead-nav > li > a {
    padding-right: 0;
    padding-left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;

    /* IE8 proofing */
    color: rgba(255,255,255,.95);
    border-bottom: 2px solid transparent;
}

.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
    background-color: transparent;
    border-bottom-color: #a9a9a9;
    border-bottom-color: rgba(255,255,255,.25);
}

.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
    color: #fff;
    border-bottom-color: #fff;
}

@media (max-width: 767px) 
{
	.carousel .item {
		padding-top: 25%;
	}
	video {
	max-width:80%;
	height:auto;
	}
	body{
		background: #F7F553; background-image: url('images/fond_min_m.jpg'); background-position: right top; background-repeat: no-repeat;
		background-size: cover;
	}
    .site-wrapper {
		background-image: url('./images/habillage_final_m.png');
		background-position: center bottom; background-size: cover; background-repeat: no-repeat;
	} 
	.begin{
		margin-top:160px;
		border:0px;
	}
	.logo{
		 position:absolute;
		 top:110px;
		 left:50%;
		 transform: translate(-50%, -50%);
		 background:url(./images/logo_web_Guadeloupe.png) no-repeat;
		 width:200px;
		 height:107px;
		 display:block;
	}
	.my1 ,
	.my2,
	.my3,
	.my4 ,
	.my5 ,
	.my6 {
		
		padding: 60px 30px;
	}
}
@media (max-height: 800px){
	.site-wrapper {
		 background-image: url('./images/habillage_final.png');
		 background-position: center bottom; background-size: cover; background-repeat: no-repeat;
	 }
}
@media (min-width: 1400px) 
{
	video {
	max-width:80%;
	height:auto;
	}
	.site-wrapper {
		 background-image: url('./images/habillage_final.png');
		 background-position: center bottom; background-size: contain; background-repeat: no-repeat;
	 }
	 .begin{
		 position:absolute;
		 bottom:30%;
		 left:20%;
		 border:0px;
	}
	.logo{
		 position:absolute;
		 bottom:27%;
		 right:20%;
		 background:url(./images/logo_web_Guadeloupe.png) no-repeat;
		 width:200px;
		 height:107px;
		 display:block;
	}
}
@media (min-width: 1074px) and (max-width: 1399px)
{
	video {
	max-width:80%;
	height:auto;
	}
	.site-wrapper {
		 background-image: url('./images/habillage_final.png');
		 background-position: center bottom; background-size: cover; background-repeat: no-repeat;
	 }
	 .begin{
		 position:absolute;
		 bottom:30%;
		 left:20%;
		 border:0px;
	}
	.logo{
		 position:absolute;
		 bottom:27%;
		 right:20%;
		 background:url(./images/logo_web_Guadeloupe.png) no-repeat;
		 width:200px;
		 height:107px;
		 display:block;
	}
}
@media (min-width: 768px) and (max-width: 1073px)
{
	.carousel .item {
		padding-top: 15%;
	}
	video {
	max-width:80%;
	height:auto;
	}
	 .site-wrapper {
		 background-image: url('./images/habillage_final.png');
		 background-position: center bottom; background-size: cover; background-repeat: no-repeat;
	 }
	 .begin{
		 position:absolute;
		 bottom:30%;
		 left:5%;
		 border:0px;
	}
	.logo{
		 position:absolute;
		 bottom:27%;
		 right:5%;
		 background:url(./images/logo_web_Guadeloupe.png) no-repeat;
		 width:200px;
		 height:107px;
		 display:block;
	}
}
@media (min-width: 768px) 
{
	 body{
		 background: #F7F553; background-image: url('images/fond_min.jpg'); background-position: right top; background-repeat: no-repeat;
		 background-size: cover;
	 }
	.my1 ,
	.my2,
	.my3,
	.my4 ,
	.my5 ,
	.my6 {
		
		padding: 40px;
	}
	.my5  {
		
		min-height: 900px;
	}
    
	.masthead-brand {
        float: left;
    }

    .masthead-nav {
        float: right;
    }

 ;
}

/* * Cover */
.cover {
    padding: 0 20px;
}

.cover .btn-lg {
    padding: 10px 20px;
    font-weight: bold;
}

/* * Footer */
footer{
	padding-top:50%;
	height:250px;
	color:#0C507F;
	background:url(images/rail_3.png) top left no-repeat;
}
footer a,
footer a:hover,
footer a:visited,
footer a:active
{
	color:#0C507F;
}
.mastfoot {
    color: #999;

    /* IE8 proofing */
    color: rgba(255,255,255,.5);
}

/* * Affix and center */
@media (min-width: 768px) 
{
    /* Pull out the header and footer */
    .masthead {
        position: fixed;
        top: 0;
    }

    .mastfoot {
        position: fixed;
        bottom: 0;
    }

    /* Start the vertical centering */
    /*.site-wrapper-inner {
        vertical-align: middle;
        background-image: url('images/habillage-web_low.jpg');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #F7F553;
    }*/

    /* Handle the widths */
    .masthead,
    .mastfoot,
    .cover-container {
        width: 100%;

        /* Must be percentage or pixels for horizontal alignment */
    }

 ;
}

@media (min-width: 992px) 
{
    .masthead,
    .mastfoot,
    .cover-container {
        width: 1000px;
    }

 ;
}