/*  CSS designed for macatalina.com - October 2018 */

/* ******************************* */
/*            CONTENTS             */
/* ******************************* */
/*                                 */
/*   Partial custom reset          */
/*   General                       */
/*   Links                         */
/*   Responsive menu               */
/*   Columns                       */
/*   Images                        */
/*   Overlay effects               */
/*                                 */
/* ******************************* */

/* ******************************* */
/*     Partial custom reset        */
/* ******************************* */

body,div,header,footer,nav,section,ul,li,a,form,label,input,select,h1,h2,h3 {
margin:0;
padding:0;
font-weight:300;
font-size:1em;
font-family:inherit;
list-style-type:none;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;   
}

/* ******************************* */
/*             General             */
/* ******************************* */

html {overflow-x: hidden;}
@media screen and (max-width: 840px) {
html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}}

/* loading fonts */

@font-face {
    font-family: 'OPTILegende-Uncial';
    src:url('font/OPTILegende-Uncial.ttf.woff') format('woff'),
        url('font/OPTILegende-Uncial.ttf.svg#OPTILegende-Uncial') format('svg'),
        url('font/OPTILegende-Uncial.ttf.eot'),
        url('font/OPTILegende-Uncial.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

body {
  margin: auto; 
  font-family: "Roboto", sans-serif; 
  width:100%; 
  color:white; 
  background-color:#2F2E33; 
}

h1 { 
font-family: 'OPTILegende-Uncial';
font-size:9em;
padding: .2em 0 0 0;
line-height: .9em;
text-align:left; 
color:rgb(17, 159, 211);
display:inline-block;
}

@media screen and (max-width: 840px){
h1 {      
  font-size: 6em;
  line-height: .9em;
}}
@media screen and (max-width: 480px){
h1 {      
  font-size: 4em;
  line-height: .9em;
}}

h2 {
font-family: 'OPTILegende-Uncial';
font-size: 3em;
color:rgb(17, 159, 211);
text-align:center;}

h3 {
border: 1px solid black;
border-radius: 5px 20px;
background-color:#2F2E33;
padding: 10px 15px;
margin-bottom: 10px;
padding-left: 2em;
font-size: 16px;
color:white;
margin-top: 1em;
text-align:left;}
h3:hover {background-color:black;}
@media screen and (max-width: 840px){
h3 {
border: none;
border-radius: 0;
text-align:center;}}

header {
  padding: 0 5% 0 15%;   
}

section {
  min-height: 75vh;     
  height:auto;  
  padding: 20px 15%;         
}
@media screen and (max-width: 840px){
section {
  padding: 20px 0;         
}}

footer {    
padding:1em 15%;      
box-sizing:border-box;   
}

#greyline {
background-color:dimgray;
height:5px;
}

/* ******************************* */
/*             Links               */
/* ******************************* */
    
a:link { 
    color: inherit;        
    text-decoration: none;
}
a:visited {
    color: inherit;
    text-decoration: none;
}
a:hover {
    color: rgb(17, 159, 211);    
    text-decoration: none;
}
a:active {
    color: rgb(17, 159, 211);    
    text-decoration: none;
}

/* ************************* */
/*      Responsive menu      */
/* ************************* */
nav {  
  padding: 1em 15% 0 15%;  
  font-size:1.2em;
}

ul.menu {           
    text-align:right;          
}
ul.menu li {   
   display:inline-block;
   padding:.2em 1em 1em 1em;     
}

@media screen and (max-width:840px){
ul.menu { 
padding-bottom:1em;
}
ul.menu li {    
   padding:.2em 1em .2em 1em;    
}
}

ul.menu li.icon {display: none;}

/* For small screens we hide most part of the menu */

@media screen and (max-width:840px) {
  ul.menu li {display: none;}
  ul.menu li.icon {display: inline-block;}  
}

@media screen and (max-width:840px) {
  ul.menu.responsive {position: relative;}  
  ul.menu.responsive li.icon {
    position: absolute;
    right: 0;
    top: -6px;
  }
  ul.menu.responsive li {    
    display: block;
    text-align: left;
  } 
}

/* menu icon */

.barmenuicon {
    width: 30px;
    height: 2px;
    background-color: white;
    margin: 5px 0;
}
.containermenuicon {
    display:inline-block;
    margin-bottom:-4px; 
    font-size:11px;   
}
.containermenuicon:hover .barmenuicon {
background-color: rgb(17, 159, 211);
}

/* ******************************* */
/*           Slideshow             */
/* ******************************* */

.carousel {font-size:0; text-align:center;}

.tncon {
display:inline-block;
box-sizing:border-box;
border:5px solid black;
background-color:black;
width:200px;
height:200px;
overflow:hidden;
text-align:center;
margin-right:15px;
margin-bottom:15px;
}
@media screen and (max-width: 840px) {
.tncon {
width:50vw;
height:50vw;
margin: 0;
}}

.thumbnail {
height:100%;
width:auto;
}

.title {
font-size:1.2em;
color:white;}

.separator {height: 100px; }
@media screen and (max-width: 840px) {
.separator {display: none; }}