/* General Demo Style */

@font-face {
	font-family: 'Memphis';
	src: url('webfonts/288B14_0_0.eot');
	src: url('webfonts/288B14_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/288B14_0_0.woff') format('woff'), url('webfonts/288B14_0_0.ttf') format('truetype');
	font-weight: 500;
}
@font-face {
	font-family: 'Memphis';
	src: url('webfonts/288B14_1_0.eot');
	src: url('webfonts/288B14_1_0.eot?#iefix') format('embedded-opentype'), url('webfonts/288B14_1_0.woff') format('woff'), url('webfonts/288B14_1_0.ttf') format('truetype');
	font-weight: 700;
}
@font-face {
	font-family: 'Memphis';
	src: url('webfonts/288B14_2_0.eot');
	src: url('webfonts/288B14_2_0.eot?#iefix') format('embedded-opentype'), url('webfonts/288B14_2_0.woff') format('woff'), url('webfonts/288B14_2_0.ttf') format('truetype');
	font-weight: 300;
}
@font-face {
	font-family: 'Memphis';
	src: url('webfonts/288B14_3_0.eot');
	src: url('webfonts/288B14_3_0.eot?#iefix') format('embedded-opentype'), url('webfonts/288B14_3_0.woff') format('woff'), url('webfonts/288B14_3_0.ttf') format('truetype');
	font-weight: 100;
}


*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; overflow: hidden; scroll:no;
margin_bottom:0;
  padding:0;
	background-color: #192e4b;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {

    font-family: 'Roboto',Calibri,Arial,sans-serif;
    overflow: hidden; scroll:no;
	
}

a {
		color: #333;

	text-decoration: none;
	-webkit-transition: all 150ms;
	-moz-transition: all 150ms;
	-ms-transition: all 150ms;
	-o-transition: all 150ms;
	transition: all 150ms;
}

a:hover,
a:active {
	color: #E2001A;
}




/* Header Style */
.main,
.container > header {
	margin: 0 auto;
}
/*.logo {
	   bottom: 10px;
    position: fixed;
    right: 16px;
	
	
	}*/
.container > header {
   /*background-image: url("../images/header.jpg");
   background-repeat: no-repeat;*/
	float: left;
    position: absolute;
    top: 0;
    width: 100%;*/
	  -webkit-box-shadow: 0px 0px 29px rgba(0,0,0,0.19);  
    -moz-box-shadow:    0px 0px 29px rgba(0,0,0,0.19);  
    box-shadow:         0px 0px  29px rgba(0,0,0,0.19); 
}

.container > header h1 {
font-family: 'Roboto', Calibri, Arial, sans-serif;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
 color:#FFF;

}

.container > header span {
	display: block;
	font-size: 60%;
	opacity: 0.7;
	padding: 0 0 0.6em 0.1em;
}

/* Main Content */
.main {
    float: right;
    height: 100%;
    position: absolute;
    right: 0;
    width: 76%;
    z-index: -1;}

.column {
	
	width: 100%;
	padding: auto;
	margin:auto;
	min-height: 300px;
	position: relative;
	text-align:center;
}

.column:nth-child(2) {
	box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}

.column p {
	font-weight: 300;
	font-size: 2em;
	padding: 0;
	margin: 0;
	text-align: right;
	line-height: 1.5;
}

/* To Navigation Style */
.codrops-top {
	background: #fff;
	background: rgba(255, 255, 255, 0.2);
	text-transform: uppercase;
	width: 100%;
	font-size: 0.69em;
	line-height: 2.2;
	   padding: 10px 10px 0 0;
}

.codrops-top a {
	padding: 0 1em;
	letter-spacing: 0.1em;
	display: inline-block;
}

.codrops-top a:hover {
	color: #000;
	background: rgba(255,255,255,0.6);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}




button {
	border: none;
	padding: 0.6em 1.2em;
	color: #fff;
	font-family: 'Roboto', Calibri, Arial, sans-serif;
	font-size: 1em;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	width:auto;
	margin: 3px 2px;
	border-radius: 2px;
	background-color: rgba(0,0,0,1);
}

button img{
	   vertical-align: -3px;
}
button:hover {

	background-color:rgba(0,0,0,0.35);
}

/*drag and drop*/

#boxdemo{
   height: 117px;
    left: 136px;
    padding: 10px;
    position: inherit;
    top: 114px;
    width: 326px;
	background-color:rgba(1,167,227,0.71);
	-webkit-box-shadow: 0px 0px 35px rgba(0,0,0,0.3);  
    -moz-box-shadow:    0px 0px 35px rgba(0,0,0,0.3);  
    box-shadow:         0px 0px  35px rgba(0,0,0,0.3);  
}
 
 
 #boxdemo p{
	    width: 46%;
	 
	 }
	 
/** style for droppable content **/
.droppable {
/*    width: 150px;
    height: 100px;
    float: left;
    border:solid 1px gray;
    margin-left:150px;*/
}
 
/** style for draggable content **/
.draggable{
	background-image: url(../images/googleglass+cercle.png);
	background-size: cover;
	background-repeat: no-repeat;
	display: table-cell;
top:-99px;
	width: 100px;
	height: 100px;
	float: right;
	cursor:pointer;
	-webkit-transition: width 150ms ease 0s, margin-top 150ms, height 150ms ease 0s, margin-left 150ms;
	-moz-transition: width 150ms ease 0s, margin-top 150ms, height 150ms ease 0s, margin-left 150ms;
	-ms-transition: width 150ms ease 0s, margin-top 150ms, height 150ms ease 0s, margin-left 150ms;
	-o-transition: width 150ms ease 0s, margin-top 150ms, height 150ms ease 0s, margin-left 150ms;
	transition: width 150ms ease 0s, margin-top 150ms, height 150ms ease 0s, margin-left 150ms;
}
 
/** style when an object is moving hover **/
.hoverClass{
/*	background-image:url(../images/googleglass+cercle_over.png); 
*/   
   /* background-size: 58px auto;*/
   	width: 50px;
	height: 50px;
	 margin-top: 25px;
	  margin-left: 25px;
}
 
/** style for droppable when the moveable object is dropped **/
.dropClass{
/*    background:#55d532;*/
}
 
/** clear the float used by other draggable and moveable objects **/
.clear{
    clear:both;
}

/*fin de drag and drop*/


@media screen and (max-width: 46.0625em) {
	.column {
		width: 100%;
		min-width: auto;
		min-height: auto;
		padding: 1em; 
	}

	.column p {
		text-align: left;
		font-size: 1.5em;
	}

	.column:nth-child(2) {
		box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
	}
}

@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}