@font-face{
	font-family:'brady_bunch';
	src:url('./font/brady_bunch/Brady Bunch Remastered.eot')format('eot');
	src:url('./font/brady_bunch/Brady Bunch Remastered.ttf')format('truetype');
	src:url('./font/brady_bunch/Brady Bunch Remastered.woff')format('woff');
}

@font-face{
	font-family:'berlin_sans_fb';
	src:url('./font/berlin_sans_fb/BRLNSR.eot')format('eot');
	src:url('./font/berlin_sans_fb/BRLNSR.ttf')format('truetype');
	src:url('./font/berlin_sans_fb/BRLNSR.woff')format('woff');
}

@font-face{
	font-family:'ever_after';
	src:url('./font/ever_after/ever_after.eot')format('eot');
	src:url('./font/ever_after/ever_after.ttf')format('truetype');
	src:url('./font/ever_after/ever_after.woff')format('woff');
}

/*GLOBAL*/

p
{
	font-family: 'berlin_sans_fb';
}

h1
{
	font-family: 'brady_bunch';
	text-transform: uppercase;
	font-weight: normal;
	font-size: 4vh;
	margin:0;
}

/*MENU*/
header
{
	height: 30px;
	width: 100%;
	display: flex;
	flex-direction: row;

	position: fixed;
	z-index: 10;
}

#imgTealRocks
{
	width: 350px;
	background-color: #FAA94E;
	display: flex;
	justify-content: center;
	align-items: center;
}

#imgTealRocks img
{
	width: 70%;
	margin: 0;
}

#fb, #twt, #ytb
{
	width: 40px;
}

#fb img, #twt img, #ytb img
{
	width: 28px;
	margin: 0;
}

@media all and (max-width: 1024px)
{
	header
	{
		height: 100px;
	}

	#fb, #twt, #ytb
	{
		width: 70px;
	}

	#fb img, #twt img, #ytb img
	{
		width: 65px;
	}
}

#emptyBetween
{
	width: 30px;
	background-color: #0B5556;
}

nav
{
	display: flex;
	flex-direction: row;
    justify-content: flex-start;

	width: 100%;
	background-color: #0B5556;
}

nav div
{
	height: 100%;
}

header a
{
	font-family: 'ever_after';
	text-transform: uppercase;
	text-decoration: none;
	height: 100%;
	background-color: #0B5556;
	color: white;
	padding-left: 20px;
	padding-right: 20px;

	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 1.5em;
}

header a:hover
{
	background-color: #FAA94E;
}

#leftMenu
{
	margin: 0;
	display: flex;
	flex-direction: row;
    justify-content: flex-end;
}

/*CONTENT*/
#bodyIndex
{
	margin: 0px;
	background:url('images/index/main_banner.jpg');
	background-position: top;
	background-attachment: fixed;
    background-repeat: repeat;
    background-size: auto;
	z-index: 0;
	width: 100%;
}

p,h1,section
{
	/*border: 1px black solid;*/
    /*overflow: auto;*/
}

/*TRAILER*/
#banner
{
	height: 1000px;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#banner img
{
	width: 100%;
}

#trailer
{
	/*position: relative;*/
}

li
{
	list-style-type:none;
}

.content
{
	min-width: 768px;
	max-width: 1280px;
	margin: auto;

	background:url('images/background_repeat.jpg');
	background-position: center;
    background-size: contain;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.separator
{
	margin: auto;
	background:url('images/separator.jpg');
	width: 100%;
	height: 11px;
	background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

footer
{
	margin: auto;
	margin-top: 20px;
	background:url('images/background_footer.jpg');
	width: 100%;
	height: 230px;
	background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    color:white;
}

footer #contactTealRocks
{
	margin:auto;
	width: 90%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	margin-top: 30px;
}

footer #contactTealRocks #logoFooter
{
	height: 100%;
	margin:10px;
}

footer #allRights
{
	width: 90%;
	margin:auto;
	text-align: center;
}

/*PITCH*/
#pitch
{
	width: 80%;
	margin: auto;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	text-align: center;
	margin-bottom: 10px;
	margin-top: 10px;
}

#pitch p, img
{
	margin-top: 10px;
}

/*SELLER POINTS*/
#sellerPoints_Tweeter
{
	width: 100%;
	background:url('images/index/background_sellerpoint.jpg');
    background-size: cover;
	background-position: center;

    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#sellerPoints_TweeterIn
{
	width: 90%;

	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;

	height: 700px;
}

#sellerPoints_TweeterIn article
{
	/*border: 1px blue solid;*/
	margin-top: 40px;
	margin-right: 20px;
	margin-bottom: 40px;
	margin-left: 20px;

    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#sellerPoints
{
	height: 91.5%;
	width: 60%;
}

#tweeter
{
	padding: 5px;
	height: 90%;
	width: 40%;
	background-color: rgba(0,0,0, 0.5);
}

.sellerPoints
{
	height: 33.3%;
	width: 100%;
	background-color: rgba(0,0,0, 0.5);

	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 5px;
	padding: 5px;
}

.txt_sellerPoints
{
	width: 70%;
	height: 100%;

	padding-left: 30px;
	padding-right: 30px;
	text-align: left;
	overflow: hidden;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

.txt_sellerPoints_title
{
	font-family: 'brady_bunch';
	text-transform: uppercase;
	margin:0;
	/*font-size: 2.5em;*/
	font-size: 4vh;
	color: #fdb304;
}

.txt_sellerPoints_p
{
	font-size: 2vh;
	color: white;
	margin: 0;
}

@media all and (max-width: 1024px)
{
	.txt_sellerPoints_title
	{
		font-size: 2em;
	}

	.txt_sellerPoints_p
	{
		font-size: 1.5em;
	}
}

.img_sellerPoints
{
	/*border: 1px red solid;*/
	width: 30%;
	height: 90%;
	margin: 10px;
	padding-left: 25px;
	padding-right: 15px;
}

#sellerPoints .sellerPoints div p,h1
{
	/*border: 1px red solid;*/
}

/*MEDIA*/
#media
{
	/*border: 1px red solid;*/
	margin-top: 20px;
	width: 100%;
}

#screenshots
{
	/*border: 1px red solid;*/
	width: 90%;
	margin: auto;
}

#screenshotsMin
{
	height: 162px;
	/*width: 100%;*/
	margin: 0;
	padding: 10px;
	border: 1px #FAA94E solid;
	border-radius: 3px;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	overflow: hidden;
}

#screenshotsMin img
{
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 5px;
}

.linkMore
{
	color: #FAA94E;
	text-decoration: none;
	font-family: 'berlin_sans_fb';
}

.linkMore:hover
{
	color: #0B5556;	
}

#otherMedia
{
	/*border: 1px red solid;*/
	width: 90%;
	margin: auto;
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#otherMedia #artworks
{
	/*border: 1px red solid;*/
	width: 53%;
	/*margin-right: 20px;*/
}

#otherMedia #artworks img
{
	margin: 0;
	width: 100%;
}

#otherMedia #otherMediaRight
{
	/*border: 1px blue solid;*/
	width: 44%;
	display: flex;
	flex-direction: column;
}

#otherMediaRight #videos
{
	height: 70%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#otherMediaRight #videos iframe
{
	height: 100%;
	width: 100%;
}

#otherMediaRight .buttonClic
{
	height: 30%;
	width: 100%;
	/*border: 1px green solid;*/
	display: flex;
	justify-content: center;
	align-items: center;
}

.buttonClic a
{
	/*border: 1px red solid;*/
	width: 80%;
	height: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	font-family: 'brady_bunch';
	text-transform: uppercase;
	background-color: #0B5556;
	font-weight: normal;
	font-size: 3.5vh;
	overflow: hidden;
	text-decoration: none;
}

.buttonClic a:hover
{
	background-color: #FAA94E;
}

@media all and (max-width: 1024px)
{
	.buttonClic a
	{
		font-size: 2em;
	}
}

/*PRESS & FORM*/

#pressAndContactAndTitle
{
	margin-top: 20px;
	width: 100%;
	margin-bottom: 20px;
}

#moreActu
{
	width: 90%;
}

#title
{
	width: 90%;
	margin: auto;
}

#pressAndContact
{
	height: 500px;
	width: 90%;
	margin: auto;
	margin-top: 0px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#press
{
	height: 96%;
	width: 52%;
}

#press .sellerPoints
{
	background-color: #0B5556;
}

#press .txt_sellerPoints_title
{
	color: black;
	background-color: #FAA94E;
	width: 70%;
	font-size: 2.5vh;
	overflow: hidden;
	padding-left: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}

@media all and (max-width: 1024px)
{
	#press .txt_sellerPoints_title
	{
		font-size: 2.5em;
	}

	#press .txt_sellerPoints_title
	{
		font-size: 1.5em;
	}

	#contact h1
	{
		font-size: 2.5em;
	}
}

#press a:hover
{
	color: white;
}

#press .img_sellerPoints
{
	width: 100px;
	height: 140px;
}

#contact
{
	height: 100%;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	background-color: #FAA94E;
	width: 40%;
}

#contact form
{
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.errorField
{
	margin: 0;
	border: 1px red solid;
}

.valideField
{
	margin: 0;
}

#contact input
{
	font-family: 'berlin_sans_fb';
	width: 100%;

	border: none;

	margin-bottom: 10px;

	padding-top: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	font-size: 2vh;
}

#contact textarea
{
	font-family: 'berlin_sans_fb';
	height: 160px;
	width: 99%;
	border: none;
	margin-bottom: 10px;
	padding-top: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	font-size: 2vh;
}

#contact #buttonSend
{
	width: 100%;
	height: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	font-family: 'brady_bunch';
	text-transform: uppercase;
	background-color: #126ead;
	font-weight: normal;
	font-size: 3.5vh;
	overflow: hidden;
	text-decoration: none;

	padding-top: 5px;
}

#contact #buttonSend:hover
{
	background-color: #0B5556;
}