/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 9/05/2017, 11:56:28 PM
    Author     : RonalR
*/
/*
@font-face {
    font-family: "Scriptin";
    src: url("../../fonts/SCRIPTIN.ttf") format('truetype')
}
@font-face {
    font-family: "Walkaway";
    src: url("../../fonts/Walkway rounded.ttf") format('truetype')
}
@font-face {
    font-family: "riesling";
    src: url("../../fonts/riesling.ttf") format('truetype')
}
@font-face {
    font-family: "JacksFont";
    src: url("../../fonts/JacksFont.ttf") format('truetype')
}
@font-face {
    font-family: "Jellyka_Estrya_Handwriting";
    src: url("../../fonts/Jellyka_Estrya_Handwriting.ttf") format('truetype')
}
*/
@font-face {
    font-family: "Hestina";
    src: url("../../fonts/Hestina.otf") format('truetype')
}
h1{
    font-family: "Hestina" ;
    font-size: 3.2em;

}
h2{
    font-family: "Hestina" ;
    font-size: 3em;
    font-stretch: expanded;
   
}
h3{
    font-family: "Hestina" ;
    font-size: 2.8em;  
}
h4{
    font-family: "Hestina";
    font-size: 2.6em;
}
h5{
    /*
    font-family: "JacksFont", cursive;
    font-size: 1.6em;
    font-style: italic;
    */
    font-family: "Hestina";
    font-size: 2.4em;   
}

h6{
    font-family: "Hestina";
    font-size: 2.2em;
}


img{
    border-radius: 0.2em;
    border-style: solid;
    border: #000 solid thin;
}

@media screen and (min-width:1024px){
    .tablaPh {width: 800px;
    margin: 0 auto;
       text-align: left;}
    .p1-1  { width: 500px; height: 333px; }
    .p1-2  { width: 222px; height: 333px; }
    .p1-34 { width: 250px; height: 166px; }
    .p2-12 { width: 485px; height: 333px; }
    .p3-14 { width: 311px; height: 465px; }
    .p3-23 { width: 349px; height: 232px; }
    .p4-1  { width: 370px; height: 555px; }
    .p4-25 { width: 415px; height: 276px; }
    .p4-34 { width: 185px; height: 277px; }
    .p5-13 { width: 228px; height: 342px; }
    .p5-2  { width: 513px; height: 342px; }
    .p6-1  { width: 645px; height: 430px; }
    .p6-23 { width: 322px; height: 215px; }
    .p8    { width: 322px; height: 215px; }
    .p9-1  { width: 298px; height: 446px; }
    .p9-2  { width: 668px; height: 446px; }
    .p11-1 { width: 498px; height: 332px; }
    .p11-23{ width: 249px; height: 166px; }
    .p11-4 { width: 221px; height: 332px; }
    .p12-13{ width: 336px; height: 224px; }
    .p12-24{ width: 149px; height: 224px; }
    .p13   { width: 970px; height: 646px; }
	.p14   { width: 970px; height:1455px; }
	.p15   { width: 485px; height: 728px; }
	.p16   { width: 323px; height: 485px; }	
}

@media screen and (max-width:2048px) and (min-width:1366px){
    .tablaPh {width: 1200px;
    margin: 0 auto;
       text-align: left;}
    .p1-1  { width: 750px; height: 499px; }
    .p1-2  { width: 333px; height: 499px; }
    .p1-34 { width: 375px; height: 249px; }
    .p2-12 { width: 727px; height: 499px; }
    .p3-14 { width: 466px; height: 697px; }
    .p3-23 { width: 523px; height: 348px; }
    .p4-1  { width: 555px; height: 832px; }
    .p4-25 { width: 622px; height: 414px; }
    .p4-34 { width: 277px; height: 415px; }
    .p5-13 { width: 342px; height: 513px; }
    .p5-2  { width: 769px; height: 513px; }
    .p6-1  { width: 967px; height: 645px; }
    .p6-23 { width: 483px; height: 322px; }
    .p8    { width: 483px; height: 322px; }
    .p9-1  { width: 447px; height: 669px; }
    .p9-2  { width: 1002px; height: 669px; }
    .p11-1 { width: 747px; height: 498px; }
    .p11-23{ width: 373px; height: 249px; }
    .p11-4 { width: 331px; height: 498px; }
    .p12-13{ width: 504px; height: 336px; }
    .p12-24{ width: 223px; height: 336px; }
    .p13   { width: 1455px; height: 969px; }
	.p14   { width: 1455px; height:2182px; }
	.p15   { width: 727px; height: 1092px; }
	.p16   { width: 484px; height: 727px; }	
}
@media screen and (max-width:1366px) and (min-width:768px){
    .tablaPh {width: 777px;
        margin: 0 auto;
       text-align: left;}
    .p1-1  { width: 400px; height: 266px; }
    .p1-2  { width: 177px; height: 266px; }
    .p1-34 { width: 200px; height: 133px; }
    .p2-12 { width: 388px; height: 258px; }
    .p3-14 { width: 248px; height: 372px; }
    .p3-23 { width: 280px; height: 186px; }
    .p4-1  { width: 297px; height: 446px; }
    .p4-25 { width: 334px; height: 223px; }
    .p4-34 { width: 148px; height: 223px; }
    .p5-13 { width: 183px; height: 275px; }
    .p5-2  { width: 412px; height: 275px; }
    .p6-1  { width: 520px; height: 346px; }
    .p6-23 { width: 260px; height: 173px; }
    .p8    { width: 260px; height: 173px; }
    .p9-1  { width: 240px; height: 360px; }
    .p9-2  { width: 540px; height: 360px; }
    .p11-1 { width: 420px; height: 270px; }
    .p11-23{ width: 202px; height: 135px; }
    .p11-4 { width: 160px; height: 270px; }
    .p12-13{ width: 270px; height: 180px; }
    .p12-24{ width: 120px; height: 180px; }
    .p13   { width: 780px; height: 520px; }
	.p14   { width: 780px; height: 1170px; }
	.p15   { width: 390px; height: 585px; }
	.p16   { width: 260px; height: 390px; }
}
@media screen and (max-width:768px) and (min-width:600px){
    .tablaPh {width: 400px;margin: 0 auto;
       text-align: left;}
    .p1-1  { width: 300px; height: 200px; }
    .p1-2  { width: 133px; height: 200px; }
    .p1-34 { width: 150px; height: 100px; }
    .p2-12 { width: 290px; height: 193px; }
    .p3-14 { width: 186px; height: 279px; }
    .p3-23 { width: 210px; height: 140px; }
    .p4-1  { width: 220px; height: 330px; }
    .p4-25 { width: 247px; height: 165px; }
    .p4-34 { width: 113px; height: 165px; }
    .p5-13 { width: 136px; height: 204px; }
    .p5-2  { width: 306px; height: 204px; }
    .p6-1  { width: 384px; height: 256px; }
    .p6-23 { width: 192px; height: 128px; }
    .p8    { width: 192px; height: 128px; }
    .p9-1  { width: 177px; height: 265px; }
    .p9-2  { width: 397px; height: 265px; }
    .p11-1 { width: 296px; height: 197px; }
    .p11-23{ width: 148px; height:  98px; }
    .p11-4 { width: 131px; height: 197px; }
    .p12-13{ width: 200px; height: 133px; }
    .p12-24{ width:  88px; height: 133px; }
    .p13   { width: 576px; height: 384px; }
	.p14   { width: 576px; height: 864px; }
	.p15   { width: 288px; height: 432px; }
	.p16   { width: 192px; height: 288px; }
}
@media screen and (max-width:600px){
    .tablaPh td {display: table-row }
    .p1-1 { max-width: 100%; height: auto; display: block; left: 0}
    .p1-2 { max-width: 100%; height: auto; display: block; left: 0}
    .p1-34{ max-width: 100%; height: auto; display: block; left: 0}
    .p2-12{ max-width: 100%; height: auto; display: block; left: 0}
    .p3-14{ max-width: 100%; height: auto; display: block; left: 0}
    .p3-23{ max-width: 100%; height: auto; display: block; left: 0}
    .p4-1 { max-width: 100%; height: auto; display: block; left: 0}
    .p4-25{ max-width: 100%; height: auto; display: block; left: 0}
    .p4-34{ max-width: 100%; height: auto; display: block; left: 0}
    .p5-13{ max-width: 100%; height: auto; display: block; left: 0}
    .p5-2 { max-width: 100%; height: auto; display: block; left: 0}
    .p6-1 { max-width: 100%; height: auto; display: block; left: 0}
    .p6-23{ max-width: 100%; height: auto; display: block; left: 0}
    .p8   { max-width: 100%; height: auto; display: block; left: 0}
    .p9-1 { max-width: 100%; height: auto; display: block; left: 0}
    .p9-2 { max-width: 100%; height: auto; display: block; left: 0}
    .p11-1{ max-width: 100%; height: auto; display: block; left: 0}
    .p11-23{ max-width: 100%; height: auto; display: block; left: 0}
    .p11-4 { max-width: 100%; height: auto; display: block; left: 0}
    .p12-13{ max-width: 100%; height: auto; display: block; left: 0}
    .p12-24{ max-width: 100%; height: auto; display: block; left: 0}
    .p13   { max-width: 100%; height: auto; display: block; left: 0}
	.p14   { max-width: 100%; height: auto; display: block; left: 0 }
	.p15   { max-width: 100%; height: auto; display: block; left: 0 }
	.p16   { max-width: 100%; height: auto; display: block; left: 0 }
}

#header {
    background: rgba(240, 220, 200, 0.5);
    box-shadow: 10 0 0.25em 0 rgba(10, 0, 0, 0.7);
    cursor: default;
    height: 3em;
    left: 0;
    line-height: 3.5em;
    position: fixed;
    top: 0em;
    width: 100%;
    z-index: 100;
}
#header h1 {
    position: relative;
    left: 1em;
    top: 0;
    height: 3em;
    line-height: 3em;
    cursor: default;
}
#header h1 a {
    font-size: 1.25em;
}
#header nav {
    position: absolute;
    color: #500;
    font-size: 16px;
    font-weight: bold;
    left: 25%;
}
#header nav ul {
    margin: 0;
}
#header nav ul li {
    display: inline-block;
    margin-left: 1em;
}
#header nav ul li a, #header nav ul li span {
    border: 0;
    color: inherit;
    display: inline-block;
    height: inherit;
    line-height: inherit;
    outline: 0;
}
#header nav ul li a.button, #header nav ul li span.button {
    height: 2em;
    line-height: 2em;
    padding: 0 1.25em;
}
#header nav ul li a:not(.button):before, #header nav ul li span:not(.button):before {
    margin-right: 0.5em;
}
#header nav ul li.active > a, #header nav ul li.active > span {
    color: #e44c65;
}
#header nav ul li > ul {
    display: none;
}

.topnav {
    background: rgba(240, 220, 200, 0.5);
    box-shadow: 10 0 0.25em 0 rgba(10, 0, 0, 0.7);
    line-height: 3em;
    height: 3em;
}
.topnav a {
    font-weight: bold;
    left:50em;
    float: left;
    display: block;
    padding: 0 16px;
    color: #500;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    
    background: rgba(240, 220, 200, 0.5);
    box-shadow: 10 0 0.25em 0 rgba(10, 0, 0, 0.7);

}
.topnav a:hover {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}
.topnav .active {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}
.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
@media screen and (max-width: 736px) {
   
    #header {
        
        height: 2.5em;
        line-height: 2.5em;
    }
    #header h1 {
        text-align: center;
        position: absolute;
        height: 2.5em;
        line-height: 2.5em;
    }
    #header h1 a {
        font-size: 1em;
    }
    #header nav {
        
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        display: block;
        height: 44px;
        left: 0;
        position: absolute;
        top: 0;
        width: 25%;
        z-index: 10001;
        background: rgba(240, 220, 200, 0.5);
        color: white;
        box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
    }
    #header nav .toggle {
        text-decoration: none;
        height: 60px;
        left: 0;
        position: absolute;
        top: 0;
        width: 90px;
        outline: 0;
        border: 0;
    }
}

/* Footer */
.copyright {
    font-family: "Hestina";
    font-size: 1.6rem;
    padding: 28px;
    margin-top: 55px;
    background-color: #202020; 
}
.copyright span,
    .copyright a {
        color: #878787;
        -webkit-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear; }
.copyright a:hover {
    color:#007bff; }

.copyright-menu ul {
text-align: right;
margin: 0; }

.copyright-menu li {
display: inline-block;
padding-left: 20px; }

.navbar {
    font-family: "Hestina";
    font-size: 1.7rem;
}