/* Main CSS */

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'Comfortaa-Bold';
  src: 	url('fonts/Comfortaa-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Comfortaa-Light';
  src: 	url('fonts/Comfortaa-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Comfortaa-Regular';
  src: 	url('fonts/Comfortaa-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'FormulaCondensed-Bold';
  src: 	url('fonts/FormulaCondensed-Bold.otf') format('truetype');
}
@font-face {
  font-family: 'FormulaCondensed-Light';
  src: 	url('fonts/FormulaCondensed-Light.otf') format('truetype');
}

/*	0.  Reset & Clearfix (http://meyerweb.com/eric/tools/css/reset/)
/* ------------------------------------------------------------------------------- */
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{margin:0;padding:0;outline:0;border:0;background:transparent;vertical-align:baseline;font-size:100%;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}del{text-decoration:line-through;}hr{clear:both;margin:0;padding:0;height:1px;border:0;background:transparent;color:transparent;}mark{background-color:#ffffb3;font-style:italic;}input,select{vertical-align:middle;}ins{background-color:red;color:#fff;text-decoration:none;}ol,ul{list-style:none;}table{border-collapse:collapse;border-spacing:0;}
	.clear{clear:both;display:block;visibility:hidden;overflow:hidden;width:0;height:0;}.clearfix:after{clear:both;display:block;visibility:hidden;width:0;height:0;content:' ';font-size:0;line-height:0;}* html .clearfix,:first-child+html .clearfix{zoom:1;}

/*	1.  Document Setup
/* ------------------------------------------------------------------------------- */
html {
	min-height: 100%;
	width: 100%;
	overflow-x: hidden;
}
body {
	min-height: 100%;
	width: 100%;
	background: rgb(160,172,182);
	color: #333;
	font: normal 16px 'Open Sans',Helvetica,Arial;
	overflow-x: hidden;
}
p {
    font: normal normal 400 14.5px/normal 'Open Sans',Helvetica,Arial;
}

/*	2.  Content - Logo, Title, Subscribe, Social icons
/* ------------------------------------------------------------------------------- */
.content-wrapper {
    background: url(../images/bg.jpg) 50% 50% no-repeat;
    width: 100%;
    height: 100vh;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
#logo {
    position: fixed;
    top: 0;
    right: 0;
}
#logo img {
	max-width: 100%;
	max-height: 100%;
}
#left_side {
    background: #09234f;
    float: left;
    z-index: 1;
    padding: 2%;
    width: 30%;
    text-align: center;
    height: 100%;
}
.main-title {
    font-family: FormulaCondensed-Light;
    color: #fff;
    font-size: 60px;
    text-align: left;
    font-weight: lighter;
    padding-left: 25px;
}
.main-title span {
    font-size: 80px;
}
.row {
    float: left;
    width: 100%;
    margin: 2% 0;
}
.row .col {
    color: #ffffff;
    width: 40%;
    float: left;
    text-align: left;
}
.row .col.txt {
	text-align: left;
    width: 60%;
}
.row .col img {
    max-width: 180px;
}
.row .col .title {
    width: max-content;
}
.row .col h4 {
    font-family: 'Comfortaa-Light';
    font-size: 12px;
    margin-bottom: 3px;
}
.row .col h1 {
    font-family: 'Comfortaa-Bold';
    display: block;
    padding: 5px;
    margin-bottom: 15px;
}
.row .col .title.magenta h4 {
    color: #d75d96;
}
.row .col .title.magenta h1 {
    background: #d75d96;
}
.row .col .title.jaune h4 {
    color: #f6d147;
}
.row .col .title.jaune h1 {
    background: #f6d147;
}
.row .col .title.cyan h4 {
    color: #7ac4ed;
}
.row .col .title.cyan h1 {
    background: #7ac4ed;
}

.row .col ul {
    list-style: disc;
    padding-left: 15px;
}
.row .col ul li {
    margin: 10px 0;
    font-family: 'Comfortaa-Light';
}
#right_side {
    float: left;
    height: 92%;
    width: 62%;
    padding: 2%;
    position: relative;
    z-index: 1;
}
#right_side .main-title {
    position: absolute;
    bottom: 20%;
    background: #fff;
    padding: 10px 25px 0;
    color: #09234f;
}
#bg_image{
    
}
/*	6.  Footer
/* ------------------------------------------------------------------------------- */
.footer {
    color: #fff;
    font-size: 12px;
    text-align: left;
    position: absolute;
    z-index: 1;
    padding: 5px;
    left: 1%;
    bottom: 1%;
    background: #09234f;
}
/*	7.  Media Queries
/* ------------------------------------------------------------------------------- */
/* Smaller than 480px (devices and browsers) */
@media (min-width: 721px){
	#content {
		margin-left: 0px;
		width: 600px;
	}
	#logo img {
		max-width: 320px;
		max-height: inherit;
	}
}
/* Smaller than 720px (devices and browsers) */
@media screen and (max-width: 720px){
	#logo img {
		max-width: 200px;
		max-height: inherit;
	}
	#content {
		width: 55%;
	}
	.main-title {
		font-size: 30px;
	}
	.main-title span {
		font-size: 45px;
	}
	.row .col {
		width: 100%;
		text-align: center;
	}
	.row .col.txt {
		width: 100%;
	}
	.row .col ul li {
		font-size: 14px;
	}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	
}