@charset "utf-8";
/* CSS Document */

@media screen and (max-width:48em) and (min-width:30em){
/*Header
--------------------------------------------------------------*/
.menu-moblile {
	display:block;
}
header {width:100%; height:68px; margin:auto; position:fixed; background:#000; z-index:9999; border-bottom:1px #f05435 solid;}

.tab-header {width:310px; right:0px; position:fixed; text-align:right;  margin-top:265px; z-index:5555; display:none;}
.tab-header div {padding-bottom:15px; }

.block-logo {width:100%; height:68px; float:non; text-align:center;}

.main-block-1 .block-logo, .breton-stripe-1 .block-logo, .maritime-signalling-flags-1 .block-logo {float:right; padding:25px 0 0 0; width:100%; height:auto;}

/*Socail*/
.block-socail-top {display:none;}


/*Meun*/
.block-menu-top {display:none;}


/*Language*/
.block-language {width:235px; float:left; padding:20px 0; display:none;}

/*Footer 
--------------------------------------------------------------*/
footer {width:100%; min-width:100%; height:auto; background:#000; display:block; border-top:2px #f05435 solid; border-bottom:2px #f05435 solid; padding-bottom:5%;}

.main-footer {width:90%; padding:5%; margin:auto;}

.block-logo-footer { display:none;}

.block-socail-footer {display:none;}

/*.block-menu-footer {width:100%; float:none; padding-top:0;}
.group-menu-footer {width:100%; float:none; font-size:13px; font-weight:600; list-style:none;}
.group-menu-footer ul {list-style:none;}
.group-menu-footer li { border:1px solid #646464; width:45%; margin:2%; float:left; text-align:center;}
.group-menu-footer li a {display:block; padding:2% 0; color:#646464; text-decoration:none;}
.group-menu-footer li a:hover {color:#f05435; text-decoration:none; background:#FFFFFF;}*/

.block-menu-footer {width:100%; float:none; padding-top:0;}
.group-menu-footer {width:100%; float:none; font-size:13px; font-weight:600; list-style:none;}
.group-menu-footer ul {list-style:none;}
.group-menu-footer li { border:none; margin:0; text-align:center; float:left; width:50%;}
.group-menu-footer li a {display:block; padding:1% 0; color:#646464;  text-decoration:none;}
.group-menu-footer li a:hover {color:#f05435; text-decoration:none; background:none;}

.block-language-footer {display:none;}

.icon-uk {background:url(../images/en.jpg) no-repeat left ;}
.icon-fr {background:url(../images/fr.jpg) no-repeat left ;}	



/*Container
--------------------------------------------------------------*/
.wapper {width:100%; overflow:hidden;}
.container {width:100%; min-width:100%; height:auto; margin-top:68px;} 

/*Block 1*/
.main-block-1 { width:100%; min-width:100%; background:url(../images/top-block-1-mobile.jpg) no-repeat center top; height:947px;}

/*Block 2*/
.main-block-2 { padding:0; width:100%; min-width:100%; background:url(../images/top-block-2-moible.jpg) no-repeat #000000; height: auto; }
.main-block-2 img {opacity:0.8;}
.tiele-our-story { padding:10% 5%; width:90%; float:none; text-align:center;}
.tiele-our-story img {width:50%;}
.block-text-our-story { width:90%; border:none; padding:5%; margin-top:30%; float:none; }
.block-text-our-story h2 {color:#FFFFFF; font-weight:bold;}
.block-text-our-story p {padding-top:5%; color:#FFFFFF;}

/*Block 3*/
.main-block-3 { padding:5% 0 5% 0; width:100%; min-width:100%; background:#000000; height:auto; }
.main-block-3 img {width:100%;}
.tiele-varsatile {width:90%; float:none; padding:5%; text-align:center;}
.tiele-varsatile img {width:50%}
.block-text-varsatile {background:none; height:auto; margin-right:0; width:90%; padding:0 5%; float:right; margin-top:0; color:#FFF; text-align: left; line-height:1.5em}


/*Title List
--------------------------------------------------------------*/
.title-s-1 {font-size:33px; font-style:normal; font-weight:normal; padding-bottom:20px;}
.title-b-1 {font-size:30px; font-style:normal; font-weight:normal; padding-bottom:3%; }
.title-d-1 {font-size:30px; font-style:normal; font-weight:normal; padding-bottom:3%; color:#fff; text-align:center;}
.title-d-2 {font-size:30px; font-style:normal; font-weight:normal; padding-bottom:3%; color:#fff; text-align:center;}
.title-d-3 {font-size:30px; font-style:normal; font-weight:normal; padding-bottom:3%; color:#fff; text-align:center;}

.list-detail {}
.list-detail ul {list-style:none;}
.list-detail li {display:block; float:left; margin:0 2% 3% 2%; width:46%;}
.list-detail li img { width:100%; height:auto;}
.list-detail li p { font-size:14px; text-align:center; height:10%;}
.list-detail li a:hover {opacity:0.5; color:#000;}


/*Breton Dtripe 
--------------------------------------------------------------*/
.breton-stripe-img {padding-left:0; width:100%; height: auto; float:none;}
.breton-stripe-detail {width:90%; float:none; padding:5%;}
.breton-stripe-detail p {color:#FFF;}


.breton-stripe-1 { width:100%; min-width:100%; background: url(../images/breton-stripe/breton-stripe-1/breton-stripe-1-tablet.jpg)no-repeat #000000; height: auto;}
.breton-stripe-1-block-text {width:90%; padding:5%; color:#000000; line-height:1.5em; margin-top:70%; color:#FFFFFF;}

.breton-stripe-2 img, .breton-stripe-3 img, .breton-stripe-4 img, .breton-stripe-5 img, .breton-stripe-6 img, .breton-stripe-7 img {width:100%;}


.breton-stripe-2 { width:100%; min-width:100%; background: url(../images/breton-stripe/breton-stripe-2/breton-stripe-2-mobile.jpg) no-repeat #000000; height: auto;}

.breton-stripe-3 { width:100%; min-width:100%; background: url(../images/breton-stripe/breton-stripe-3/breton-stripe-3-mobile.jpg) no-repeat #000000; height:auto;}

.breton-stripe-4 { width:100%; min-width:100%; background: url(../images/breton-stripe/breton-stripe-4/breton-stripe-4-mobile.jpg) no-repeat #000000; height:auto;}

.breton-stripe-5 { width:100%; min-width:100%; background: url(../images/breton-stripe/breton-stripe-5/breton-stripe-5-mobile.jpg) no-repeat #000000; height:auto;}

.breton-stripe-6 { width:100%; min-width:100%; background: url(../images/breton-stripe/breton-stripe-6/breton-stripe-6-mobile.jpg) no-repeat #000000; height:auto;}

.breton-stripe-7 { width:100%; min-width:100%; background: url(../images/breton-stripe/breton-stripe-7/breton-stripe-7-mobile.jpg) no-repeat #000000; height:auto;}


/*Martitme
--------------------------------------------------------------*/
.maritime-signalling-flags-img {padding-left:0; width:100%; height:auto; float:none;}
.maritime-signalling-flags-detail {width:100%; float:none; padding:0;}


.maritime-signalling-flags-1 {width:100%; min-width:100%; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-1/maritime-signalling-flags-1-tablet.jpg) no-repeat #000000; height: auto;}
.maritime-signalling-flags-1-block-text  {width:90%; padding:5%; margin-top:65%; color:#FFF;}

.maritime-signalling-flags-2 img, .maritime-signalling-flags-3 img, .maritime-signalling-flags-4 img, .maritime-signalling-flags-5 img, .maritime-signalling-flags-6 img ,.maritime-signalling-flags-7 img {width:100%}

.maritime-signalling-flags-2 {width:100%; min-width:100%; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-2/maritime-signalling-flags-2-mobile.jpg) no-repeat #000000; height: auto;}
.icon-six { padding:0 0 0 186px; color:#000; background:url(../images/maritime-signalling-flags/maritime-signalling-flags-2/Voyager_Maritime_signalling_Flags_06.png) no-repeat left;}
.icon-six h2 { font-size:30px; font-style:normal; font-weight:normal; padding:0 0 10px 0; margin:0;}
.icon-six p { font-size:20px; font-weight:bold; font-style:normal; padding:0; margin:0;}


.maritime-signalling-flags-3 {width:100%; min-width:100%; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-3/maritime-signalling-flags-3-mobile.jpg) no-repeat #000000; height: auto;}
.icon-eight { padding:0 0 0 189px; color:#df2029; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-3/Voyager_Maritime_signalling_Flags_26.png) no-repeat left;}
.icon-eight h2 { font-size:30px; font-style:normal; font-weight:normal; padding:0 0 10px 0; margin:0;}
.icon-eight p { font-size:20px; font-weight:bold; font-style:normal; padding:0; margin:0;}

.maritime-signalling-flags-4 {width:100%; min-width:100%; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-4/maritime-signalling-flags-4-mobile.jpg)no-repeat #000000; height: auto;}
.icon-bravo { padding:0 0 0 110px; color:#df2029; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-4/Voyager_Maritime_signalling_Flags_43.png) no-repeat left;}
.icon-bravo h2 { font-size:30px; font-style:normal; font-weight:normal; padding:0 0 10px 0; margin:0;}
.icon-bravo p { font-size:20px; font-weight:bold; font-style:normal; padding:0; margin:0;}

.maritime-signalling-flags-5 {width:100%; min-width:100%; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-5/maritime-signalling-flags-5-mobile.jpg) no-repeat #000000; height: auto;}
.icon-alfa { padding:0 0 0 110px; color:#142267; background:url(../images/maritime-signalling-flags/maritime-signalling-flags-5/Voyager_Maritime_signalling_Flags_60.png) no-repeat left;}
.icon-alfa h2 { font-size:30px; font-style:normal; font-weight:normal; padding:0 0 10px 0; margin:0;}
.icon-alfa p { font-size:20px; font-weight:bold; font-style:normal; padding:0; margin:0;}

.maritime-signalling-flags-6 {width:100%; min-width:100%; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-6/maritime-signalling-flags-6-mobile.jpg) no-repeat #000000; height: auto;}
.icon-substitute { padding:0 0 0 124px; color:#0e1b5a; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-6/Voyager_Maritime_signalling_Flags_78.png) no-repeat left;}
.icon-substitute h2 { font-size:30px; font-style:normal; font-weight:normal; padding:0 0 10px 0; margin:0;}
.icon-substitute p { font-size:20px; font-weight:bold; font-style:normal; padding:0; margin:0;}

.maritime-signalling-flags-7 {width:100%; min-width:100%; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-7/maritime-signalling-flags-7-mobile.jpg) no-repeat #000000; height: auto;}
.icon-oscar { padding:0 0 0 111px; color:#f0df32; background: url(../images/maritime-signalling-flags/maritime-signalling-flags-7/Voyager_Maritime_signalling_Flags_93.png) no-repeat left;}
.icon-oscar h2 { font-size:30px; font-style:normal; font-weight:normal; padding:0 0 10px 0; margin:0;}
.icon-oscar p { font-size:20px; font-weight:bold; font-style:normal; padding:0; margin:0;}

.block-mobile-tablet {display:block;}
.block-desktop {display:none;}

}