/* main css styles */

/*************************************/
/*	Non Revised CSS for              */
/*	studio machine.net               */
/*                                   */
/*  21 nov 2016                      */
/*********************************** **/


@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body{
	margin: 0;
	min-width: 980px;
	padding: 0;
	text-rendering: optimizelegibility;
	-moz-osx-font-smoothing: grayscale;
}

@media screen and (pointer:coarse) {
	body {min-width: 100%;}
}

.no-copy p {
  -webkit-user-select: none;  /* Chrome all / Safari all */  /*shit look un used but probably still shit */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */     
}

#lineBreaker {
	height: 20px;
	width: 354px;
	margin-left: auto;
	margin-right: auto;
}

#lineBreakerLong {
	width: 959px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (pointer:coarse)  {
	#lineBreakerLong {
		display: none;}
}

.container {
	margin: 0;
	min-width: 980px;
	padding: 0;
}

@media screen and (pointer:coarse)  {
	.container {min-width: 100%}
}


#anchors {						/* CLEAN  cause not used */
	position: absolute;
	top: -45px;
	z-index: -98;
}

#sectionTitle {
	width: 900px;
	height: 110px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 120px;	/*	was 120px */
	margin-bottom: 30px;
	/*background: url(../images/section_title_bg.png)*/
}
#sectionTitleStudio {
	width: 900px;
	height: 56px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 50px;
}

@media screen and (pointer:coarse)  {
	#sectionTitle {
		height: auto;
		width: 100%;}
	
	#sectionTitleStudio {
		width: 100%;
		height: auto;

	}
}


/*@media screen and (pointer:coarse)  {
	#sectionTitleStudio{width: 100%}
}*/


#sectionTitle h1,
#sectionTitleStudio h1,
#sectionTitleLeft h1 {
	text-align: center;
	font-family: lato, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 80px;
}




/* Top image */

#CoverContainer{
	padding-top: 30px; /* WAS 100px */
	height: 700px;	/* WAS 720px */
	background: #EDEDED;
}

#CoverContainerStudio{
	padding-top: 10px; /* WAS 100px */
	height: 600px;	/* WAS 650px */
	background: #EDEDED;
}

#CoverPic {
	background: url(../images/hero_A.jpg) no-repeat center;
	width: 100%; /*   WAS 93%  */
	height: 700px;	/* WAS 500px */
	margin-left: auto;
	margin-right: auto;
}

#CoverPicStudio {
	background: url(../images/reel_to_reel_cover.jpg) no-repeat center;
	width: 100%; /*   WAS 93%  */
	height: 600px;	/* WAS 550px */
	margin-left: auto;
	margin-right: auto;
}


#CoverPicTextBox h1 {
	font-size: 60px; 
	font-weight: 400; 
	padding-bottom: 15px;	
	letter-spacing: 8px;
}

#CoverPicTextBoxStudio {
	padding-top: 200px;
	font-weight: 400; 
	padding-bottom: 15px;	
	
}

#studioSectionTitle {
	width: 255px;
	height: 56px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 120px;
	margin-bottom: 50px;
	background: url(../images/section_title_bg.png)
}

#studioSectionTitle h1 {
	text-align: center;
	padding-top: 16px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 26px;
	color: white;
}

#CoverPicTextBox {
	padding-top: 15%;
	width: auto;
	background: none;
	margin-left: auto;
	margin-right: auto;
	overflow: visible;
	z-index: 999;
}

#CoverPic img{
	display: block;
	margin-left:auto;
	margin-right: auto;
	padding-bottom: 10px;
}

@media screen and (pointer:coarse)  {
	#CoverPic img{
		width: 60%}
	
	#CoverPicTextBox{
		padding-top: 40%;
	}
}


#CoverPicTextBox h1, 
#CoverPicTextBox h2 {
	font-family: lato, "Helvetica", 'Source Sans Pro', sans-serif;	 
	text-align: center;
	color: white;
	margin: 0 0 10px 0;
	font-weight:700;
}

#CoverPicTextBox h1 {
	font-size: 60px; 
	font-weight: 400; 
	padding-bottom: 15px;	
	letter-spacing: 8px;
}

#CoverPicTextBox h2 {
	font-size: 22px; 
	font-weight:lighter; 
	padding-top: 10px;
	padding-bottom: 0px;	
}

#presentationContainer {
	background-color: #fff;
	height: auto;
}

#presentationTextBox {
	padding-top: 100px;
	padding-bottom: 90px; /* TEMPO BEFORE PLACING LOGOS */
	width: 900px;
	background: none;
	margin-left: auto;
	margin-right: auto;
	overflow: visible;
}

@media screen and (pointer:coarse)  {
	#presentationTextBox {width: 90%}}

#presentationContainer h1 {
	/*font-family: museo-sans, sans-serif;*/
	font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	text-align: center;
	color: #1F1F1F;
	font-size: 40px;
}

#presentationContainer p {
	font-family: Helvetica, Arial, sans-serif; 
	font-size: 18px; 
	color: #333;
	line-height: 140%;
	text-align: center;
	padding-top: 10px;
}

#portfolio {
	/*background: #E1E1E1;*/
	background: #fff;
	height: 530px; /* TO CHANGE TO AUTO WHEN GRID EXISTS */
}

#portfolioGrid {
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	height: 300px; /*	WAS 600px    */
	/* background: #F4F4F4; /* WAS #EEEEEE */
}



#grid {
    width: 900px;
    height: auto; /*	WAS 300px    */
}

#cell { 			
	width: 130px;	/* 3 grid @ 270px */
	height: 130px;
	margin: 25px;
    float: left;
	background: white;
}

#cell img {
	width: 130px;
	height: 130px;
}

@media screen and (pointer:coarse)  {
	#portfolioGrid {
		width: 100%}
	#grid {width: 100%}
	
	#cell{
		width: 30%;
		height: 30%;
		margin-left: 10%;
		margin-right: 10%}
	#cell img {
		width: 100%;
		height: 100%;
	}
}

#footer{
	height: 90px;
	background: white;
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (pointer:coarse)  {
	#footer{width: 222px}
}

#socialMedia {
	float: left;
	height: 40px;
	width: auto;
	margin-left: 25px;
	background: nonw;
	margin-top: 7px;
	
}

#socialMedia img {
	width: 30px;
	height: 30px;
	padding-left: 6px;
}

#copyright {
	top: 20px;
	float: right;
	height: 20px;
	padding-right: 25px;
}

#copyright p {							/* allo toi */
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #222;
	padding-bottom: 00px;
}

@media screen and (pointer:coarse)  {
	#copyright p {	
		font-size: 10px;}}

#designer {
	position: relative;
	float: right;
	height: 20px;
	padding-top: 0px;
}

#designer p {
	margin-top: 0px;
	font-family: Arial, sans-serif;
	font-size: 11px;
	color: #555;
}

#equipe {
	padding-top: 60px;
}

#equipeGrid {
	width:920px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 40px;
	padding-top: 60px;
}

	
@media screen and (pointer:coarse)  {
	#equipeGrid {width: 100%;}
  
} 




/**********/
/* DIV Grid framework */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}



.col {					/*  COLUMN SETUP  */
	display: block;
	float:left;
	padding: 0px;
	margin: 1% 0 1% 1.6%;
}
@media screen and (pointer:coarse)  {
	.col {padding-left: auto;
	padding-right: auto;}
}


.col:first-child {
	margin-left: 0;
}

.colPic {					/*  studio bottom pic grid to center  */
	display: block;
	float:left;
	padding: 0px;
	margin: 1% 7px 1% 7px;
}

.colPic:first-child {
	
}


/*  GROUPING  */
.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}


.span_1_of_3 {
	width: 32.2%;
}
@media screen and (pointer:coarse)  {
	.span_1_of_3 {
		width: 80%;
		padding-left:  10%;
		padding-right: 10%;
		/*background: red;*/}
	}

.span_1_of_2 {
	width: 436px; 
} 

@media screen and (pointer:coarse)  {
	.span_1_of_2 {
		width: 80%;
	
		/*background: red;*/}
	}


.span_1_of_3 p {
	text-align: center;
	margin:0;
	padding:0;
}

#staffSelfie {
	height: 235px; /* file APPX 265px */
	width: 235px;
	
	margin-left: auto;
	margin-right: auto;
	
}



#staffSelfie img {
	width: 100%;
	height: 100%;
	
}

#staffSelfie img {
}

@media screen and (pointer:coarse)  {
	#staffSelfie {
		height: 85%;
		width: 85%;
		
	}
}

@media screen and (pointer:coarse)  {
	#staffMail {
		padding-bottom: 110px;}
}


#staffName p {
	font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 24px;
	color: #1F1F1F;
	font-weight: 700;
	padding-top: 50px;
}

#staffJob p {
	font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #333333;
	font-style: italic;
	padding-top: 5px;
}

#staffBio p{
	font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #333333;
	/*text-align: justify;*/
	text-align: justify;
	padding-top: 50px;
	line-height: 155%;	
	margin-left: 10px;
	margin-right: 10px;
}

#staffMail p,
#staffMail a {
	font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #333333;
	font-style: italic;
	font-weight: bold;
	margin-top: 25px;
	margin-bottom: 0px;
	padding: 4px;
	line-height: 150%;
}	

#staffMail a {
	text-decoration: none;
}

#staffMail a:hover {
	background-color: #FF4D4D;
}
	

/**********/
/* Nous joindre */

#map {
	float: right;
}

	
#contactInfo,
#ailleurWeb {
	padding-left: 60px; /* WAS 120px */
	padding-bottom: 7px;
}

#contactInfo a:hover,
#ailleurWeb a:hover {
	background-color: #FF4D4D;

}

#contactInfo h1,
#ailleurWeb h1 {
	font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 24px;
	color: #1F1F1F;
	font-weight: 700;
}

#contactInfo p,
#ailleurWeb p,
#ailleurWeb a {
	font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #333333;
	text-align: justify;
	line-height: 155%;
	text-decoration: none;
}

#ailleurWeb a {
	font-style: italic;
}






/**********/
/* Le Studio */

#studioDescription {
	padding-top: 0px;
	padding-bottom: 30px; /* TEMPO BEFORE PLACING LOGOS */
	width: 800px;
	background: none;
	margin-left: auto;
	margin-right: auto;
	overflow: visible;
}

@media screen and (pointer:coarse)  {
	#studioDescription {
		width: 85%;
		top: auto;}
	
}



#studioDescription p {
	font-family: 'Roboto', sans-serif;
	font-size: 18px; 
	color: #333;
	line-height: 140%;
	text-align: center;
	padding-top: 20px;
}

#gearList h1,
#gearList p {
	padding-left: 30px;
}

@media screen and (pointer:coarse)  {
	#gearList h1,
	#gearList p {
		text-align: center;
		padding-left: 15%;
	}
	
}

#gearList h1 {
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	text-align: left;
	font-size: 16px;
	color: #000;
}

#gearList p {
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	text-align: left;
	font-size: 14px;
	color: #333;
	margin-left: 3px;
	line-height: 1.4;
}
	
#gearListPic {
	width: 1100px; /* was 97% */
	height: auto;
	padding-top: 7px;
	padding-bottom: 14px;
	margin-left: auto;
	margin-right: auto;
	overflow:hidden;
	/*background: #F4F4F4;*/
}

#GearPicCell {
	width: 32%; /* 310 px */ /* 2 col 48% */ /* 3 col 32% */ 
	height: auto;
	margin: 5px;
    float: left;
	background: none;
}
#GearPicCell img {
	width: 100%;
	height: 100%;
}

@media screen and (pointer:coarse)  {
	#gearListPic{width: 100%}
	#GearPicCell{
		width: 46%;
		margin: 1%;
		}
}


.span_1_of_2 img {
	/*width: 100%;*/
	width: 420px;
	height: auto;
	padding-bottom: 15px; /* WAS 30px */	
}

#gearListPic img {
	width: 100%;
	height: auto;
	padding-bottom: 0px;
}

/**********/
/* Media Stream */

#mediaStream {
	height: auto;
	background-color: #eee;
	padding-top: 50px; /* WAS 20px */
	padding-bottom: 5px;
	margin-bottom: 25px;
}

#instaWraper {
	height: auto;
	width: 1000px; /* probably smaller */
	/* background: blue; */
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

#socialMediaTitle {
	width: 1000px;
	padding-left: 20px;
	height: 42px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 0px;
}

#socialMediaTitle h1 {
	font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 30px;
	color: #1F1F1F;
	font-weight: bolder;
	font-style: italic;
	padding-left: 20px;
}

#socialMediaTitle span {
	font-size: 38px;
	padding-right: 2px;
}