*, *:before, *:after    {
	                    -moz-box-sizing: border-box;
	                    -webkit-box-sizing: border-box;
	                    box-sizing: border-box;}
html, body      {
                width: 100%;
                height: 100%;

                user-select: none;
                -moz-user-select: none;
                -webkit-user-drag: none;
                -webkit-user-select: none;
                -ms-user-select: none;
    
                margin: 0;
                padding: 0;}
img             {
                user-select: none;
                -moz-user-select: none;
                -webkit-user-drag: none;
                -webkit-user-select: none;
                -ms-user-select: none;}
/* Import fonts! */
@font-face	{
    font-family: opensans-bold;
    src: url(font/opensansbold.ttf);}
@font-face	{
    font-family: opensans-semi-bold;
    src: url(font/opensanssemibold.ttf);}
@font-face  {
    font-family: socialicoplus;
    src: url(font/socialicoplus.ttf);}
/* End import fonts! */

.border         {
                border: 1px solid red;}

.mainframe      {
                width: 100%;
                height: 100%;}

.header         {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex; 
    
                /*flex-direction: row;*/    /* See responsive settings below  */
                justify-content: center; /* align items in Main Axis */
                align-items: stretch; /* align items in Cross Axis */
                align-content: stretch; /* Extra space in Cross Axis */}
    .logo  {
                font-family: opensans-bold; 
                font-weight: normal; 
                text-decoration: none;}
    .logo a, :hover, :active, ::after     {
                font-family: opensans-bold; 
                font-weight: normal; 
                text-decoration: none;
                color: black;}

    .menu       {
                font-family: opensans-semi-bold; 
                font-weight: none; 
                text-decoration: none;
                color: black;
                cursor: pointer;}

.content        {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                flex-flow: row wrap;
                justify-content: space-between; /* align items in Main Axis */
                align-items: flex-start; /* align items in Cross Axis */
                align-content: flex-start; /* Extra space in Cross Axis */
                margin: 0 -0.3em;
                
                overflow: auto; 
                bottom: 20px;   /* Height of the footer */}
    .carousel   {
                width: 100%;
                height: 80vh;
                justify-content: center;
                align-items: center;
                align-content: center;
                text-align: center;}
    .tumbnail   {
                margin: 0.2em 0.3em;}
    .contact    {                
                width: 100%;

                font-family: opensans-semi-bold;
                font-weight: none;
                text-decoration: none;
                color: black;}

.footer             {
                    height: 20px;
                    width: 100%;
                    position: fixed;
                    bottom: 0;                
                    background-color: rgba(250, 250, 250, 0.4);}
    .footer-flex    {
                    display: -webkit-box;
                    display: -moz-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;

                    flex-direction: row;
                    justify-content: center; /* align items in Main Axis */
                    align-items: stretch; /* align items in Cross Axis */
                    align-content: stretch; /* Extra space in Cross Axis */}                          
        .social     {
                    padding: 0.08em 0 0 0;
                    justify-content: center; /* align items in Main Axis */
                    align-items: center; /* align items in Cross Axis */
                    align-content: center; /* Extra space in Cross Axis */
                    text-align: center;}
        .social a   {
                    font-family: socialicoplus;
                    text-decoration: none;
                    color: black;}
        .copyright  {
                    font-family: opensans-semi-bold;
                    font-weight: none;
                    text-decoration: none;
                    color: black;}




/* Style big screen! */
@media only screen and (min-width: 750px) {
.header         {
                height: 10vh;
                min-height: 80px;
                max-height: 80px;
                flex-direction: row;}
    .logo   {
                width: 50%;
                text-align: left;
                padding: 30px 0 0 6em;
            
                font-size: 1.15em;
                letter-spacing: 0.12em;}
    .logo a     {
                font-size: 1em;
                letter-spacing: 0.05em;}
    .menu       {
                width: 50%;
                text-align: right;
                padding: 35px 5em 0 0;
            
                font-size: 0.75em;
                letter-spacing: 0.05em;
                word-spacing: 3.5em;}
    .menu a:hover   {
                    text-decoration: underline;}

.content        {
                height: auto;
                width: 100%;}
    .tumbnail   {
                max-height: 225px;}
    .contact    {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                flex-flow: row wrap;

                height: 100%;
                max-height: 80vh;
                justify-content: center;
                align-content: center;
                align-items: center;
                text-align: center;
                align-self: center;

                font-size: 0.6em;
                letter-spacing: 0.05em;}        
        .contact-image   {
                width: 50%;
                justify-content: right;
                align-content: right;
                align-items: right;
                text-align: right;
                align-self: center;
                padding: 0 1em 0 0;}               
            .contact-image img {
                max-width: 400px;
                height: auto;}              
        .contact-text   {
                width: 50%;
                justify-content: left;
                align-content: left;
                align-items: left;
                text-align: left;
                align-self: center;
                padding: 0 0 0 1em;}

    .disclaimer {
                order: 1;
                display: visible;
                width: 33.3%;
                text-align: left;}
    .social     {
                order: 2;
                width: 33.3%;}
    .copyright  {
                order: 3;
                display: visible;
                width: 33.3%;
                text-align: right;
            
                padding: 0.4em 1.8em 0em 0em;
                font-size: 0.5em;
                letter-spacing: 0.1em;}
}
/* End style big screen! */


/* Style small screen! */
@media only screen and (max-width: 749px) {
.header         {
                height: 10vh;
                min-height: 40px;
                max-height: 80px;
                flex-direction: column;}
    .logo       {
                width: 100%;
                text-align: center;
                padding: 0;
            
                font-size: 0.8em;
                letter-spacing: 0.05em;}
    .logo a     {
                font-size: 0.8em;
                letter-spacing: 0.05em;
            
                pointer-events: none; /* NOT clickable anymore*/
                cursor: default;}
    .menu       {
                width: 100%;
                text-align: center;
                padding: 0;
            
                font-size: 0.5em;
                letter-spacing: 0.04em;
                word-spacing: 1.5em}
    .menu a:hover   {
                    text-decoration: underline;}

.content        {
                height: 90vh;}
    .tumbnail   {
                width: 45%;
                height: auto;
                max-width: 45vw;}
    .contact    {
                font-size: 0.5em;
                letter-spacing: 0.05em;} 
        .contact-image   {
                display: none;
                width: 0%;}
        .contact-text   {
                display: visible;
                width: 100%;
                justify-content: center;
                align-content: center;
                align-items: center;
                text-align: center;
                align-self: center;}

    .disclaimer {
                order: 1;
                display: none;}
    .social     {
                order: 2;
                width: 100%;}
    .copyright  {
                order: 3;
                display: none;}
}
/* End style small screen! */