/******************************************************

	Glassero Par Patrick Roux : http://www.kicoe.net
	One Page Responsive HTML Template

	Theme : Retro

	Sections of stylesheet:
		$INDEX0 - COULEURS UTILISEES
		$INDEX1 - GENERAL
		$INDEX3 - MENU COMMON
		$INDEX5 - HEADER STANDARD REDUIT
		$INDEX6 - HEADER MOBILE
		$INDEX7 - MAIN CONTENT
		$INDEX8 - PORTFOLIO
		$INDEX9 - THE TEAM
		$INDEX10 - CONTACT
		$INDEX11 - MEDIA QUERIES : TABLETS
		$INDEX12 - MEDIA QUERIES : SMARTPHONES

******************************************************/






/******************************************************

	$INDEX0 - COULEURS UTILISEES

******************************************************/

/*

	#F6F6F6
	#E46C51
	#F0F0F0
	#rgba(30, 30, 30, 0.6)
	#222222

*/





/******************************************************

	$INDEX1 - GENERAL

******************************************************/



body {
    color: #F6F6F6;
}


header{
	background: transparent;
}

::selection{
	background: transparent;
}
::-moz-selection{
	background: transparent;
}
::-webkit-selection{
	background: transparent;
}

a{
	color: #F0F0F0;
}

a:hover {
	color: #000;
}

h1, h2, h3{
	color: #F6F6F6;
	border-color: ##c5bdb6;
}

hr{
	border-color: #F6F6F6;
}



/******************************************************

	$INDEX3 - MENU COMMON

******************************************************/




nav a{
	color: #F0F0F0;
}

nav a.current, nav a:hover{
	/*background: #F0F0F0;*/
	color: #51190c;
	text-decoration: none;
}

#filter a{
	color: #dc6b08;
}

#filter a.current, #filter a:hover{
	/*background: #F0F0F0;*/
	color: #51190c;
	text-decoration: none;

}

/* Dropdown Button */
.dropbtn {
    background-color: transparent;
    color: #F0F0F0;
    padding: 16px;
    font-size: 1.3em;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: transparent;
    color: #51190c;
    border: none;
    outline: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    font-weight: 700;
    color: #F0F0F0;

}

.dropdown:focus {
   border: none;
   outline: none;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: fixed;
    background-color: #c5bdb6;
    /*min-width: 160px;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #F0F0F0;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    line-height: 20px;
    font-weight: 400;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {color: #51190c}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
.expand {height:170px;}
/******************************************************

	$INDEX5 - HEADER STANDARD REDUIT

******************************************************/

@keyframes appear {
    from {opacity: 0;}
    to {opacity: 100;}
}


.headerstandard.headerstandard-shrink h1 {
	/*background: transparent url('images/icone.png') center left no-repeat;*/
	text-indent: 60px;
	display: block;
	animation-name: appear;
    animation-duration: 4s;
}




/******************************************************

	$INDEX6 - HEADER MOBILE

******************************************************/





header.headermobile button {
	background: transparent url('images/nav-icon.png') center center no-repeat;
}

header.headermobile h1, nav{
	color: #51190c;
}




/******************************************************

	$INDEX7 - MAIN CONTENT

******************************************************/


.section1-visible{ background: #f0f0f0; min-height: 600px; }
.section2-visible{ background: #f0f0f0; }
.section3-visible{ background: #f0f0f0; }
.section4-visible{ background: #f0f0f0; }
.section5-visible{ background: #f0f0f0; }


#main .home h1{
	/*background: transparent url('images/logo.png') center center no-repeat;*/
}


.quote{
	background: rgba(30, 30, 30, 0.35) url('images/quote.png') 15px 15px no-repeat;
	padding: 20px 20px 20px 80px;
}

.scroll {
    background: url("images/scroll.png") no-repeat scroll center top transparent;
}
.scroll:hover{
	background: url("images/scroll.png") bottom center no-repeat;
}

.progress {
	background: #F0F0F0;
}

.progress .bar {
    background: #E46C51;
}

.scroll {
    background: url("images/scroll.png") no-repeat scroll center top transparent;
}

.scroll:hover{
	background: url("images/scroll.png") bottom center no-repeat;
}




/******************************************************

	$INDEX8 - PORTFOLIO

******************************************************/




.grid figcaption {
	background: transparent;
	z-index: 10;
	color: #F0F0F0;
}

.grid figcaption a {
	background: #F0F0F0;
	color: #dc6b08;
	margin-top: 8px;
	opacity: 0.9;
}

a:focus {
	outline-style:none;
	box-shadow:none;
	border-color:transparent;
}

.grid figcaption h3 {
	color: #fff;
	margin-top: -10px;
}

#div-dessin{
display:none;
}

#div-photo{
display:none;
}

#triptyque {
		width: 720px;
	}

#diptyque {
		width: 480px;
	}


/******************************************************

	$INDEX9 - THE TEAM

******************************************************/


#team li{
	background: transparent;
}

#team li figcaption.contactme{
	background: #222222;
}


#team li figcaption.member{
	background: transparent;
}

#team li figcaption.contactme span:hover,
#team li:hover figcaption.contactme span:hover{
	background-color: #E46C51;
}

#team li figcaption.contactme span.facebook{
	background: url('images/facebook.png') center center no-repeat;
}
#team li figcaption.contactme span.twitter{
	background: url('images/twitter.png') center center no-repeat;
}

#parallax, #parallax3 {
		float: left;
		margin-top: 200px;
	}

#parallax2 {
		float: right;
		margin-top: 200px;
	}

/******************************************************

	$INDEX10 - CONTACT

******************************************************/





#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea {
    background:#FFF;
	box-shadow:inset 0 1px 2px #F6F6F6, 0 1px 0 #FFF;
	-webkit-box-shadow:inset 0 1px 2px #F6F6F6, 0 1px 0 #FFF;
	-moz-box-shadow:inset 0 1px 2px #F6F6F6, 0 1px 0 #FFF;
}

#contact-form label {
    color: #e46c51;
    font-size: larger;
    font-weight: 300;
    display: block;
}

#contact-form button[type="submit"] {
    background:#E46C51;
    color:#F6F6F6;
    font-size: larger;
}
#contact-form button[type="submit"]:hover {
    background:#F6F6F6;
    color:#E46C51;
    font-size: larger;
}


#friend li{
	background: transparent;
}

#friend li figcaption.contactme{
	background: #222222;
}


#friend li figcaption.member{
	background: transparent;
}

#friend li figcaption.contactme span:hover,
#friend li:hover figcaption.contactme span:hover{
	background-color: #E46C51;
}


/******************************************************

	$INDEX11 - MEDIA QUERIES : TABLETS

******************************************************/




/* TABLETS */
@media screen and (max-width: 1020px ) {



	#main .home h1{
		/*background: transparent url('images/logo-medium.png') center center no-repeat;*/
		opacity: 0;
	}

	#footshare {

		color: #e46c51;
	}
	
	#footshare a {

		color: #51190c;
	}
	#footshare a:hover{

		color: #e46c51;
	}

}





/******************************************************

	$INDEX12 - MEDIA QUERIES : SMARTPHONES

******************************************************/






/* SMARTPHONES */
@media screen and (max-width: 767px ) {




	#main .home h1 {
		opacity: 0;
		/*background: transparent url('images/logo-small.png') center center no-repeat;*/
		color: #51190c;
		margin-left: 50px;
		/*display: none;*/
	}

	header{
	background: #c5bdb6;
	}

	nav a {
		color: #51190c;
	}

	nav a:hover {
		color: #dc6b08;
	}
	.scroll {
		background-image: url('images/scroll-small.png');
	}
	.scroll:hover {
		background-image: url('images/scroll-small.png');
	}

    #triptyque {
		display: none;
	}

	#diptyque {
		width: 240px;
	}

	#apropos {
		display: block;
	}

	#parallax, #parallax2, #parallax3 {
		float: none;
		margin-top: 0px;
	}

	#footshare {

		color: #e46c51;
	}

	#footshare a {

		color: #51190c;
	}
	#footshare a:hover{

		color: #e46c51;
	}

	

}