/* CSS para o website Anselmo Coelho */
            /* Cores para o Site
    
    #E07043     Butões seleccionados
    #F2F0ED     Fundo da página
    #ADADAD     Títulos
    #B2B1AF     Texto
    #B8B8B8     Barra e butões de navegação
    #C7C7C1     Indicação da página seleccionada 
    #D9D9D2     Indicação de butão com o rato por cima
*/
            
@font-face {
    font-family: 'Glyphs';
    src:  url('font/Glyphs.eot?gcir1y');
    src:  url('font/Glyphs.eot?gcir1y#iefix') format('embedded-opentype'),
    url('font/Glyphs.ttf?gcir1y') format('truetype'),
    url('font/Glyphs.woff?gcir1y') format('woff'),
    url('font/Glyphs.svg?gcir1y#Glyphs') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Tipo 55';
    src: url('font/tipo-regular-webfont.eot');
    src: url('font/tipo-regular-webfont.eot?#iefix') format('embedded-opentype'), url('font/tipo-regular-webfont.woff') format('woff'), url('font/tipo-regular-webfont.ttf') format('truetype'), url('font/tipo-regular-webfont.svg#tipo_55regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Tipo 55';
    src: url('font/tipo-italic-webfont.eot');
    src: url('font/tipo-italic-webfont.eot?#iefix') format('embedded-opentype'), url('font/tipo-italic-webfont.woff') format('woff'), url('font/tipo-italic-webfont.ttf') format('truetype'), url('font/tipo-italic-webfont.svg#tipo_55italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Tipo 55';
    src: url('font/tipo-bold-webfont.eot');
    src: url('font/tipo-bold-webfont.eot?#iefix') format('embedded-opentype'), url('font/tipo-bold-webfont.woff') format('woff'), url('font/tipo-bold-webfont.ttf') format('truetype'), url('font/tipo-bold-webfont.svg#tipo_55bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
/* Reiniciação do CSS */

html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

main,
article,
aside,
figure,
footer,
header,
nav,
section,
details,
summary,
address {
    display: block;
}
/* CSS para computadores */

html {
    background-color: #F2F0ED;
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    width: 700px;
    height: 100%;
    margin: 0 auto;
    font: 1em "Tipo 55", sans-serif;
}

a {
    text-decoration: none;
}

.sitename {
    position: fixed;
    top: 0px;
    width: 700px;
    height: auto;
    z-index: 1;
    background-color: #F2F0ED;
}

.sitename h1 {
    position: relative;
    width: 330px;
    padding: 20px 10px 0px
}

.sitename h1 a {
    color: #FF807A;
    font-size: 2.1em;
    letter-spacing: .04em;
    transition: color 200ms ease;
}

.sitename h1 a:hover,
.sitename h1 a:focus,
.sitename h1 a:active {
    color: #E0E0E0;
}

.main_menu {
    position: relative;
/*    width: 100%;*/
}

.sitename .main_menu > ul {
	position: relative;
    padding: 0px 10px;
    width: 320px;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sitename .main_menu > ul > li {
    list-style-type: none;
    font-size: .8em;
    width: 100%;
}

.sitename .main_menu > ul > li:last-child {
    -ms-flex-negative: 2;
    flex-shrink: 2;
}

.sitename .main_menu > ul > li > a {
    display: inline-block;
    padding: 4px 0px 6px;
    color: #C2C2C2;
    transition: color 200ms ease;
}

.sitename .main_menu > ul > li:hover > a,
.sitename .main_menu > ul > li:focus a,
.sitename .main_menu > ul > li:active a {
    color: #FF807A;
}

.sub_menu {
    position: absolute;
    display: none;
    left: 0px;
    width: 100%;
    padding-top: 6px;
    background-color: #F2F0ED;
}

.sub_menu li {
    font-size: 1em;
    list-style-type: none;
}

.sub_menu li a {
    display: block;
    width: 320px;
    line-height: 2em;
    padding: 0px 10px;
    color: #C2C2C2;
    transition: color 200ms ease;
}

.main_menu > ul > li:hover .sub_menu,
.main_menu > ul > li:focus .sub_menu,
.main_menu > ul > li:active .sub_menu {
    display: block;
    
}

.sub_menu li:hover a,
.sub_menu li:focus a,
.sub_menu li:active a {
    background-color: #FF807A;
    color: #F2F0ED;
}

#current {
    background: transparent 0px 13px;
    color: #7A7A7A;
    cursor: default;
}

.lang {
    position: relative;
    float: right;
    font-size: .7em;
    color: #C2C2C2;
    z-index: 1;
}

.lang a {
    color: #C2C2C2;
    display: inline-block;
    padding: 4px;
    transition: color 200ms ease;
}

.lang a:first-child {
    margin-right: -4px;
}

.lang a:last-child {
    margin-left: -4px;
}

.lang a:hover,
.lang a:focus,
.lang a:active {
    color: #FF807A;
}

.lang a.selected {
    color: #7A7A7A; 
}

main {
    position: relative;
    margin-top: 82px;
}

.welcome {
    word-wrap: break-word;
    width: 330px;
    padding-top: 200px;
    padding-left: 10px;
    color: #F2F0ED;
}

.welcome h2 {
    font-size: 5.7em;
    line-height: .7em;
}

.welcome p {
    line-height: 1.4em;
    font-size: 1em;
    text-align: justify;
    text-indent: 20px;
    margin-top: 22px;
    padding: 0px 10px; 
}

.news {
    margin-top: 40px;
}

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

.main_page a:hover,
.main_page a:active {
    color: #FF807A;
}

.slideshow {
    position: relative;
    display: block;
    overflow: hidden;
    clear: both;
}

figure {
    position: absolute;
    display: none;
    width: 700px;
    height: 100%;
}

figure.show {
    display: block;
    position: static;
}

figure img {
    max-width: 100%;
    max-height: 500px;
    animation-duration: 100ms;
    animation: slide 200ms ease-in backwards;

}

figcaption {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 20px;
}

figcaption .description {
    position: relative;
    width: 330px;
    padding-bottom: 10px;
}

figcaption .description dl dt,
figcaption .description h2 {
    color: #A3A3A3;
    line-height: 1.3em;
    letter-spacing: .05em;
    font-size: .8em;
    margin-bottom: .5em;
}

figcaption .description h2 {
	text-align: right;
}

figcaption .description dl dt {
    font-weight: bold;
}

figcaption .description h2 a {
    color: #C2C2C2;
    padding-right: 10px;
    transition: color 200ms ease;
}

figcaption .description h2 a:hover,
figcaption .description h2 a:focus,
figcaption .description h2 a:active {
    color: #FF807A;
}

figcaption .description ul {
    text-align: right;
    color: #ADADAD;
    list-style: none;
    line-height: 1em;
}

figcaption .description ul li {
    font-size: .7em;
}

figcaption .description dl dd {
    text-align: justify;
    font-size: .8em;
    color: #ADADAD;
}

figcaption .description dl dd sup {
    vertical-align: super;
    font-size: .8em;
}

figcaption .description ul li .sold {
    font-size: 1.2em;
    color: #FF6F69;
}

.images_nav {
    position: absolute;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    top: 40%;
    left: 0;
    width: 700px;
    opacity: 0;
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
    transform: translateY(-40%);
    transition: opacity 300ms ease-out;
}

.images_nav #box {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.images_nav #box a {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .9em;
    width: 80px;
    height: 80px;
    color: #F2F0ED;
    background-color: #FF807A;
    transition: color 200ms ease;
}

.images_nav #box .next {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

.images_nav #box #count {
    word-spacing: -12px;
    font-size: 5em;
    font-weight: bold;
    color: #FF807A;
}

.images_nav #box a:hover,
.images_nav #box a:focus,
.images_nav #box a:active {
    color: #7A7A7A;
}

.images_nav:hover,
.images_nav:focus,
.images_nav:active {
    opacity: 1;
}


.main_page {
    position: relative;
    margin-top: 18px;
    font-size: .8em;
    color: #B8B8B8;
}

.main_page a {
    display: inline-block;
    padding: 4px 8px 6px;
    color: #ADADAD;
    background-color: #E5E5E5;
}

.aulas {
    position: relative;
    width: 420px;
    padding-top: 20px;
}

.aulas #aulas_titulo h2 {
    color: #A3A3A3;
    line-height: .8em;
    font-size: 5.6em;
}

.aulas .aulas_info {
    position: relative;
    height: 210px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.aulas .aulas_info h3 {
    color: #A3A3A3;
    padding-bottom: 28px;
}

.aulas .aulas_info > ul li {
    list-style-type: none;
    margin: .2em 0px;
    font-size: .8em;
    color: #ADADAD; 
}

.aulas .aulas_info #tecnicas {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 120px;
    height: 100%;
    background-color: #FF807A;
}

.aulas .aulas_info #tecnicas ul {
    text-align: right;
    padding: 10px;
    background-color: #F2F0ED;
}

.aulas .aulas_info #tecnicas ul li {
    list-style-type: none;
    font-size: 1.1em;
    color: #FF807A;
}

.aulas_contacto {
    font-style: normal;
    margin-top: 20px;
    text-align: right;
}

.aulas_contacto p {
    font-size: .8em;
    line-height: 1.8em;
    color: #ADADAD;
}

.aulas_contacto dl dt {
    color: #ADADAD;
    line-height: 1.4em;
    font-size: .8em;
}

.aulas_contacto dl dt:first-child {
    font-size: 1.1em;
    color: #A3A3A3;
}

.aulas_contacto dl dd {
    font-size: .9em;
    margin-bottom: .3em;
    color: #ADADAD;
}

.aulas_contacto dl dd a {
    color: #C2C2C2;
}

.aulas_contacto dl dd a:hover,
.aulas_contacto dl dd a:active {
    color: #FF807A;
}

#curriculum h2 {
    text-align: center;
    color: #A3A3A3;
    font-size: 1.2em;
    margin-bottom: 30px;
}

.curriculum_info {
    position: relative;
    width: 700px;
    margin-bottom: 40px;
}

.curriculum_info h3 {
    width: 100%;
    font-size: 1em;
    margin-bottom: .8em;
    color: #A3A3A3;
}

.curriculum_info dl dt,
.curriculum_info dl dd {
    color: #ADADAD;
    font-size: .9em;
    line-height: 1.3em;
    padding: 6px 0px;
}

.curriculum_info dl dt {
    width: 200px;
    float: left;
    text-align: right;
    margin-right: 20px;
}

.curriculum_info dl dd {
    margin-left: 230px;
}

.curriculum_info dl dd p {
    text-indent: 1.4em;
    margin-bottom: 8px;
}

.curriculum_info dl dd #fix {
    position: relative;
    display: block;
    line-height: 2.6em;
}

.curriculum_info dl dd ul li {
    list-style-type: none;
    margin-bottom: .2em;
}

#curriculum a {
    color: #FF807A;
    padding: 4px 26px 4px 6px;
    font-size: .9em;
    background: url(imagens/sprites/pdficon_small.png) no-repeat right;
    transition: color 200ms ease;
}

#curriculum a:hover,
#curriculum a:focus,
#curriculum a:active {
    color: #E0E0E0;
}

footer {
    position: relative;
    width: 700px;
    height: 150px;
    margin: 40px 0px;
    clear: right;
}

.lang_mobile {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    font-size: .9em;
    color: #C2C2C2;
    z-index: 1;
}

.lang_mobile a {
    color: #C2C2C2;
    display: inline-block;
    padding: 6px;
}

.lang_mobile a:first-child {
    margin-right: -6px;
}

.lang_mobile a:last-child {
    margin-left: -6px;
}

.lang_mobile a:hover,
.lang_mobile a:active {
    color: #FF807A;
}

.lang_mobile a.selected {
    color: #7A7A7A;
    cursor: default;
}

.contact {
    position: relative;
    text-align: right;
    line-height: 1.2em;
    font-style: normal;
}

.contact dl {
    font-size: 1em;
    color: #A3A3A3;
}

.contact dl dd a {
    color: #C2C2C2;
    font-size: 1em;
    transition: color 200ms ease;
}

.contact dl dt {
    font-weight: bold;
}

.contact dl dt:first-child {
    font-size: 1.5em;
    color: #A3A3A3;
    line-height: 1.2em;
}

.contact dl dd {
    color: #ADADAD;
    font-size: .8em;
}

.contact dl dd a {
    padding: 4px 0 4px 6px;
    line-height: 1.4em;
}

.contact dl dd:last-child a {
    font-family: "Glyphs", sans-serif;
    font-size: 1.3em;
    background: none;
}

.contact dl dd a:hover,
.contact dl dd a:active {
    color: #FF807A;
}


@keyframes slide {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 1;
	}
}


@media only screen and (min-width:1280px) {
    body,
    .sitename,
    figure,
    .images_nav,
    footer {
        width: 800px;
    }
    
    figure img {
        max-height: 600px;
    }
}


@media only screen and (max-width:800px) {
    body,
    .sitename {
        width: 90%;
    }
    
    figure,
    .images_nav,
    .curriculum_info,
    footer {
        width: 100%;
    }
    
    .images_nav #box a {
	    font-size: .8em;
	    width: 68px;
	    height: 68px;
    }
    
    .images_nav #box #count {
	    font-size: 4.2em;
    }
}


@media only screen and (max-width:480px) {
     body,
    .sitename {
        width: 94%;
    }
    
    .sitename h1,
    .main_menu > ul,
    .sub_menu li a {
        width: 280px;
    }

    .sitename h1 a {
        font-size: 1.88em;
        letter-spacing: .02em;
    }
    
    .lang {
        display: none;
    }
    
    .lang_mobile {
        display: block;
    }
    
    .welcome {
        width: 300px;
        padding-top: 160px;
        padding-left: 0px;
    }
    
    .welcome h2 {
        font-size: 5.2em;
    }
    
    .welcome p {
        padding: 0px 0px;
    }
    
    figcaption {
        margin-top: 8px;
    }
    
    figcaption .description,
    .images_nav > span {
        width: 300px;
    }
    
    .images_nav #box a {
        width: 56px;
        height: 56px;
    }
    
    .images_nav #box #count {
	    font-size: 3.4em;
    }
    
    .aulas {
        width: 300px;
        padding-top: 14px;
    }
    
    .aulas #aulas_titulo h2 {
        font-size: 3.98em;
    }
    
    .aulas .aulas_info {
        margin-top: 14px;
    }
    
    footer {
        margin: 30px 0px;
    }
}