﻿@import url('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('http://fonts.googleapis.com/css?family=Lato:100,300,400');



body {
margin: 0 0 0 0;
font-family:'Open Sans',sans-serif;
font-size:16px;
line-height:1.5em;
color:#333;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
background-color:#fff;
}

a:hover
{
    text-decoration: underline;
}

.menu
{
    text-align: right;
    font-size: 14px; 
    font-weight: bold; 
    line-height: 18px; 
    padding: 5px;
    background-color: black;
}
.menu a, 
.menu a:visited, 
.menu a:link,
.menu a:active
{
   color: #fff;
   text-decoration: none;
}

.menu a:hover
{
    text-decoration: underline;
}

.menuI
{
    text-align: right;
    font-size: 14px; 
    font-weight: bold; 
    line-height: 18px; 
    padding-top: 5px;
}
.menuI a, 
.menuI a:visited, 
.menuI a:link,
.menuI a:active
{
   color: #FF9999;
   text-decoration: none;
}

.menuI a:hover
{
    text-decoration: underline;
}

.boldy
{
     color: #DE4343;
}

.ariane
{
    font-size: 10pt;
    font-weight: 100;  
}

.bandeau1
{
    background-color: #F78684;
    width: 100%;

}

.bandeau2
{
    background-color: #FFF;
    width: 100%;
}

.bandeau3
{
    background-color: #FBB7B5;
    width: 100%;
}

.bandeauBlack
{
    background-color: #000;
    width: 100%;
}

.bandeauBlack a, 
.bandeauBlack a:visited, 
.bandeauBlack a:link,
.bandeauBlack a:active
{
   color: #fff;
   text-decoration: none;
}

.bandeauBlack a:hover
{
    text-decoration: underline;
}

.bandeau1 a, 
.bandeau1 a:visited, 
.bandeau1 a:link,
.bandeau1 a:active
{
   color: #fff;
   text-decoration: none;
}

.bandeau2 a, 
.bandeau2 a:visited, 
.bandeau2 a:link,
.bandeau2 a:active
{
   color: #DE4343;
   text-decoration: none;
   font-weight: bold;
}


.bandeau2 a:hover
{
    text-decoration: underline;
}

.bandeau3 a, 
.bandeau3 a:visited, 
.bandeau3 a:link,
.bandeau3 a:active
{
   color: #DE4343;
   text-decoration: none;
   font-weight: bold;
}


.bandeau3 a:hover
{
    text-decoration: underline;
}

h1
{
font-family: 'Lato', sans-serif;
font-size: 42px; 
margin-bottom:0; 
font-weight: 300;
line-height: 44px;
}

h2
{
font-family: 'Lato', sans-serif;
font-size: 42px; 
margin-bottom:0; 
margin-top: 0px;
font-weight: 300;
line-height: 42px;
}

h3
{
font-family: 'Lato', sans-serif;
font-size: 28px; 
margin-bottom:0; 
margin-top: 0px;
font-weight: 300;
line-height: 42px;
color: #DE4343;
}

.thePrice
{
color: #DE4343;
font-size: 28px; 
font-weight: 300;
}
.priceDiv
{
    text-align: center;
}

.corpus
{
margin-top: 10px;
font-size: 16px; 
font-weight: normal; 
line-height: 1.5em;   
}

.corpus2
{
margin-top: 10px;
font-size: 16px; 
font-weight: normal; 
}

.newsdate
{
font-size: 12px; 
}

.textetabl
{
font-size: 16px; 

}

.normalButton 
{
    font-family: Arial;
	font-weight: 300;
	font-size: 20px;
    display: inline-block;
    padding: 8px 8px 8px 8px;	
    margin: 10px 5px 10px 0px;	
    background-color: #DE4343;
    color: White;
    border: 0;
    }

.bandeau1 h1
{
    color: #fff; 
}

.bandeau1 .corpus2
{
    color: #fff; 
}


.bandeau2 h1
{
    color: #333; 
}
.bandeau2 h2
{
    color: #DE4343; 
}
.bandeau2 .corpus
{
    color: #333;
}

.bandeau3 h1
{
    color: #DE4343; 
}

.bandeau3 .corpus
{
    color: #DE4343;
}

.bandeauBlack .corpus
{
    color: #fff;
}

.normalButton:hover 
{
    text-decoration: underline;
    cursor: pointer;
}

.inputMCl
{
    font-size: 18px;
}
.inputCl
{
    font-size: 18px;
}

.iconeBandeau
{
    width: 200px;
    margin: 0 auto;
    padding: 30px;
    display: inline-block;
    vertical-align: top;
}
/* ------------- depends en device -------------- */

.topBan {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 350px;
	width: 100%;
	right: 0px;
    background-image: url(../images/banTopITW.jpg);       
}
.logoTb
{
    margin-left: 40px;
    margin-top: 40px;
}

.topBanInside {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 100px;
	width: 100%;
	right: 0px;
    background-image: url(../images/banTopITWDrk.jpg);      
}
.logoTbInside
{
    margin-left: 20px;
    margin-top: 20px;
    width: 60px;
    height: 60px;   
}



/* ------ Smartphone portrait ------ */
@media screen and (max-width: 400px) { 
.menu
{
    font-size: 12px; 
}

.LCLeft 
{
    width: 100%;
    height: 200px;
    left: 0;
    top: 0;
	text-align:center; 
}
.LCImg
{
    width: 100%;
    height: 200px;
    background-image: url(../images/logoITW.png);
    background-color: #DE4343;
    background-position: center;
    background-repeat: no-repeat;
}

.LCRight 
{
    width: 100%;
    background-color: #fff;
    text-align: center;
}
.LCRight h1
{
    color: #DE4343;
    font-size: 32px;
    line-height: 36px;
    padding-left: 10px;
}    

.compITW
{
    display: none;
    
}

#simplicity
{
    display: none;
}
.inBandeau
{
    padding: 20px;
}

.inBHalf
{
}
.imgHeader
{
    width: 90%;
}
.imgCentral
{
    width: 90%;
}

.imgCenter
{
    width: 90%;
    margin: 0 auto;    
}
.imgCenter2
{
    margin: 0 auto;    
}

.formulaire 
{
    line-height: 24px;
    padding: 15px;
}

.textetabl
{
}
.inputtabl
{
}
.inputMCl
{
    width: 100%;
}
.inputCl
{
    width: 100%;
    padding: 10px 5px 10px 5px;
}
.video
{
    width: 100%;
}
.videopap1
{
    width: 300px;
}
.videopap2
{
    width: 300px;
}

}

/* ------ Smartphone landscape ------ */
@media screen and (min-width: 400px) and (max-width: 760px)  { 
.LCLeft 
{
    position absolute;
    width: 50%;
    height: 300px;
    float: left;
    left: 0;
    top: 0;
    background-color: #DE4343;
	text-align:center; 
}
.LCImg
{
    width: 140px;
    height: 140px;
    background-image: url(../images/logoITW.png);
	margin: 80px auto 0 25%;
	z-index: 100;
}

.LCRight 
{

    width: 50%;
    background-color: #fff;
    padding-top: 80px;
    float: right;
}
.LCRight h1
{
    color: #DE4343;
    font-size: 32px;
    line-height: 36px;
    padding-left: 10px;
}    

.compITW
{
    display: none;
    
}


#simplicity
{
    display: none;
}

.inBandeau
{
    padding: 20px;
}

.inBHalf
{
}
.imgHeader
{
    width: 90%;
}
.imgCentralDiv
{
    width: 390px;
    margin: 0 auto;    
}

.imgCentral
{
    margin: 0 auto;    
}

.imgCenter
{
    margin: 0 auto;    
}
.imgCenter2
{
    margin: 0 auto;    
}

.formulaire 
{
    line-height: 24px;
    padding: 15px;
}

.textetabl
{
}
.inputtabl
{
}
.inputMCl
{
    width: 100%;
}
.inputCl
{
    width: 100%;
    padding: 10px 5px 10px 5px;
}
.video
{
    width: 100%;
    height: 300px;
}

.videopap1
{
    width: 300px;
}
.videopap2
{
    width: 300px;
}

}


/* ------ tablette portrait ----- */
@media screen and (max-width: 1020px) and  (min-width: 760px)  { 
.LCLeft 
{
    position absolute;
    width: 50%;
    height: 300px;
    float: left;
    left: 0;
    top: 0;
    background-color: #DE4343;
	text-align:center; 
}
.LCImg
{
    width: 140px;
    height: 140px;
    background-image: url(../images/logoITW.png);
	margin: 80px auto 0 25%;
	z-index: 100;
}

.LCRight 
{

    width: 50%;
    background-color: #fff;
    padding-top: 80px;
    float: right;
}
.LCRight h1
{
    color: #DE4343;
    font-size: 32px;
    line-height: 36px;
    padding-left: 33%;
}    

.compITW
{
    width: 176px;
    height: 108px;
    position: absolute;
    top: 0;
    margin-left: -88px;
    left: 50%;
    top: 96px;
    background-image: url(../images/header_comp.png);   
    background-position: center;
    background-repeat: no-repeat;
	z-index: 90;
    
}

.inBandeau
{
    padding: 20px;
}

.inBHalf
{
    width: 50%;
    float: left;
}
.imgHeader
{
    width: 90%;
}
.imgCentral
{
    float: left;
    width: 90%;
}

.imgCenter
{
    margin: 0 auto;    
}
.imgCenter2
{
    margin: 0 auto;    
}

.formulaire 
{
    line-height: 24px;
    padding: 15px;
}

.textetabl
{
}
.inputtabl
{
}
.inputMCl
{
    width: 100%;
}
.inputCl
{
    width: 100%;
    padding: 10px 5px 10px 5px;
}
.video
{
    width: 640px;
    height: 480px;
}

.videoDiv 
{
    width: 640px;
    height: 480px;
    margin: 0 auto;
}
.videopap1
{
    width: 400px;
}
.videopap2
{
    width: 375px;
}

}


/* --- tablette landscape and PC ------ */ 

@media screen and (min-width: 1020px)  
{
.LCLeft 
{
    position absolute;
    width: 50%;
    height: 300px;
    float: left;
    left: 0;
    top: 0;
    background-color: #DE4343;
	text-align:center; 
}
.LCImg
{
    width: 140px;
    height: 140px;
    background-image: url(../images/logoITW.png);
	margin: 80px auto 0 25%;
	z-index: 100;
}

.LCRight 
{

    width: 50%;
    background-color: #fff;
    padding-top: 80px;
    float: right;
}
.LCRight h1
{
    color: #DE4343;
    font-size: 32px;
    line-height: 36px;
    padding-left: 33%;
}    

.compITW
{
    width: 176px;
    height: 108px;
    position: absolute;
    top: 0;
    margin-left: -88px;
    left: 50%;
    top: 96px;
    background-image: url(../images/header_comp.png);   
    background-position: center;
    background-repeat: no-repeat;
	z-index: 90;
    
}
    
.inBandeau
{
    width: 997px;
    margin: 0 auto;
    padding: 20px;
}

.inBHalf
{
    width: 50%;
    float: left; 
}

.imgCentral
{
    float: left;
}

.imgCenter
{
    margin: 0 auto;    
}
.imgCenter2
{
    margin: 0 auto;    
}

.formulaire 
{
    line-height: 35px;
}
.textetabl
{
    width: 15%;
    display: inline-block;
    vertical-align: top;
}

.inputtabl
{
    width: 80%;
    display: inline-block;
}
.inputMCl
{
    width: 550px;
}
.inputCl
{
    padding: 5px;
}

.video
{
    width: 640px;
    height: 480px;
}

.videoDiv 
{
    width: 640px;
    height: 480px;
    margin: 0 auto;
}

.videopap1
{
    width: 500px;
}
.videopap2
{
    width: 375px;
}


}


/* ----------------------------------------- */

