@charset "UTF-8";

/* ==========================================================================
   Memo:

      
   ========================================================================== */



/* BASE ===================================================================== */

html{font-size: 62.5%;}

body {
	font-size: 13px; /* IE8- */
	font-size: 1.3rem;
	background-color: #555;
	font-family: 'open_sans';
	color: #aaa;
	box-sizing: border-box;
}
::-moz-selection { background: #000; color: #fff;}
::selection { background: #000; color: #fff;}


	 
a {text-decoration: none; color: #fff; border-bottom: dotted 1px #fff;
}
a:link { }
a:visited {}
a:hover {border: none;
}
a, a:focus, :focus {}

img {vertical-align: middle;} /*Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */

h1 {font-size:1.8em}
h2 {font-size:1.6em}
h3 {font-size:1.4em}
h4 {font-size:1em; font-weight: bold; margin-bottom: 5px;}
h1,h2,h3 {margin:1em 0;}

h1,h2,h3,h4,h5,h6 {}


abbr,acronym { border-bottom:1px dotted #000; cursor:help;} 
em {font-style: italic;}
strong { font-weight: bold;}
blockquote,ul,ol,dl {}
ol,ul,dl {}
ol li {list-style: decimal inside;}
ul li {list-style: disc inside;}

dl dd {margin-left:1em;}
th,td {border:0; padding:.5em;}
th {font-weight:bold; text-align:center;}
caption { margin-bottom:.5em; text-align:center;}
p,fieldset,table {margin-bottom:1em;}
textarea { resize: vertical;}/* Allow only vertical resizing of textareas.*/
hr {
	height: 1px;
  margin: 20px 0;
  padding: 0;
  color: #F00;
  background-color: #e8e8e8;
  border: 0;
  clear: both;
}

.floatLeft{float:left}
.floatRight{float:right}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}
.posBottom {position: absolute; bottom: 0;}
.posRight {position: absolute; right: 0;}
.underline {text-decoration: underline;}

img.autoscale { max-width:100%; max-height:100%;}


/* CLEARFIX  http://nicolasgallagher.com/micro-clearfix-hack/ */
 
/* For modern browsers */
.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    *zoom:1;
}




/* PROJETO ===================================================================== */



@font-face {
    font-family: 'open_sans';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: 400;
    font-style: normal;
}
/* bold */
@font-face {
    font-family: 'open_sans';
    src: url('../fonts/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: 700;
    font-style: normal;
}

/* italic */
@font-face {
    font-family: 'open_sans';
    src: url('../fonts/OpenSans-Italic-webfont.eot');
    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: 400;
    font-style: italic;

}

/* light */
@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/OpenSans-Light-webfont.eot');
    src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* fix para Chrome (melhor antialiasing) */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
	font-family: 'open_sans_condensedbold';
	src: url('../fonts/OpenSans-CondBold-webfont.svg#open_sans_condensedbold') format('svg');
	}
	@font-face {
	font-family: 'FontAwesome';
	src: url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
	}
}

a {
	color: #eee!important;
}
#logo { display: table; vertical-align: middle; text-align: center; height: 100%; background-color: #fdo; width: 100%;}
#logo img{ width: 80%; max-width: 1080px; margin-top: 7%;}
h1{ display: none; }
#presentation, #galerie{ width: 80%; max-width: 800px; color: #fff; margin: 70px auto; text-align: justify;}

.smaller{font-size: 70%;}


ul {
	margin: 0; padding: 0;
}
ul li{
	list-style: none;
}



.panel .panel__relative { position: relative; }
.panel .panel__static { position: static; }
.panel .panel__static.panel__relative {  position: relative; }

.panel.panel .projet, .panel.panel .photo {top: 0; }
        
.wrapper-projets { position: relative;  z-index: 10; }


.projet h2{margin-top: 50px; margin-bottom: 0;}

.projet a{color: inherit; border-color: inherit;}


.projet{position: relative; clear: both; min-height: 230px; }
.projet .image{display: table-cell; width: 40%; float: left;}
.projet .image img{width: 100%;}
.projet .description{ width: 56%; padding-left: 3%; padding-right: 1%; position: absolute; top: 0; bottom: 0; left: 40%; }



.echos, .echos .description {background-color: #a5c8d1; color: #36969b;}

.paysage {background-color: #c7b44b;}
.paysage .image {background-color: #a5c8d1;}
.paysage .description{background-color: #c7b44b; color: #50640b;}

.quality {background-color: #fff;}
.quality .image {background-color: #c7b44b;}
.quality .description{background-color: #fff; color: #683200;}

.zephyr{background-color: #00baf2;}
.zephyr .image {background-color: #fff;}
.zephyr .description{background-color: #00baf2; color: #004668;}



.iframe-container {  position: relative;  padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; background-color: #000;}
.iframe-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%;}

#galerie .wraper-images {margin-top: 50px;}
#galerie h2{margin-top: 50px; margin-bottom: 0;}
.photo {position: relative; clear: both;}
.photo img{width: 100%;}


footer{width: 80%; max-width: 800px; color: #fff; margin: 40px auto; text-align: justify;}

/* SHARE BAR ===================================================================== */
div#share { background-image: none; margin-top: 50px; text-align: right; }
div#share span{ display: inline-block; margin-bottom: 2px;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   ========================================================================== */
@media screen and ( max-width: 479px ) {
	/* até 479px, aplica-se os estilos acima */
}

/* a partir de 480px  */
@media screen and (min-width: 480px) {
#presentation, #galerie{ width: 65%;}
}

/* a partir de 768px  */
@media only screen and ( min-width: 768px ) {
	
}

/* tablet (iPad portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	

}

/* tablet (iPad landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
}

/* a partir de 1024px */
@media only screen and (min-width : 1024px) {

}
/* acima de 1024 */
@media only screen and (min-width : 1025px) {
.panel .panel__fixed { position: fixed; left: 0; right: 0;  top: 0;}
#galerie .panel .panel__fixed { position: fixed; left: 0; right: 0;  top: 0; width: 800px; margin: 0 auto;
}
 
/*.paysage.fixed,
.quality.fixed,
.zephyr.fixed,
.fixed .image {background-color: transparent!important;}*/
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Estilos para ecrãs de alta resolução */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}