:root
{
    --mylightorange: #e88017;
    --myorange: #e74717; 
    --myverylightgray: #f4f4f4;
    --mylightgray: #959595;
    --mydarkgray: #636363; 
    --mylightyellow:#FDFFBA;
    --myyellow:#F3F5AE;

    --myfontsizeveryverybig:5.5vmin;
    --myfontsizeverybig:5vmin;
    --myfontsizetitle:4vmin;
    --myfontsizesmalltitle:3.3vmin;
    --myfontsizeverysmalltitle:2.5vmin;
    --myfontsizebase:1.9vmin;
    --myfontsizesmall:1.7vmin;
    --myfontsizeverysmall:1.2vmin;
}

html,body
{  
    font-family:raleway;
    background-color: white; 
    margin:0px;
}

/*SYSTEM*/
#horizontallinesystem{
    top:10%;
    left: 35%;
    width:30%;
    position:absolute;
}

/*Main*/
.mainpg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    text-align: center;
}

/*Language chooser*/

.language{
    position: absolute;
    top: 0px;
    right: 4%;
    width: 4%;
    text-align: right;
}
.languagebutton
{
    background-color:white;
    margin: 8px;
    width: 100%;

    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    transition: all 500ms ease-in; 
}
.languagebutton:hover{
    margin-right: 20px;
}

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

/*Navigator*/
.navigatormenu
{
    position: absolute;
    text-align: center;
    top:10%; 
    left:20%;
    width:60%;
    height: 15%;
}

.menuitem
{
    float: left;
    vertical-align: top;
    font-weight: bold;
    font-size: var(--myfontsizeverysmalltitle);
    margin-left: 4%;
    padding-bottom: 10px;
    line-height: 1em;
    color:var(--mydarkgray);
    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    transition: all 300ms ease-in; 
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border: solid 1px white;
}

.menuitem:hover
{
    border: solid 1px var(--myyellow);
    background-color: var(--mylightyellow); 
}

.menusubitem
{

    color:var(--mylightgray);
    font-weight: normal;
    font-style: oblique;
    font-size: var(--myfontsizesmall);
    margin-left: 15px;
}

a.menuitemlink:link,a.menuitemlink:visited,a.menuitemlink:active {
    color : var(--mydarkgray);;
    text-decoration:none;
}
a.menuitemlink:hover {
    color : var(--lightgray);
    text-decoration:none;
}

a.menuitemlink.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

/*Contact nav bar*/
.contact{
    position: absolute;
    top: 50%;
    left: 2%;
    width: 12%;
    text-align: right;
}

.contactbutton
{
    background-color:white;
    margin: 8px;
    width: 100%;

    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    transition: all 500ms ease-in; 
}

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

/*link*/
a:link,a:visited,a:active {
    color : var(--mylightgray);
    text-decoration:none;
}
a:hover {
    color : var(--myorange);
    text-decoration:none;
}

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

/*header*/

.myheader
{
    width: 100%;
    height: 8%;
    top: 1%;
    position:absolute;
    /*border-bottom: 1px solid black;*/
}

#marchio
{
    width: 100%;
    height: 100%;
    position: absolute;
    left:0%;
    top:2%;
    font-size: var(--myfontsizeveryverybig);
    color:var(--myorange);
    text-align: center;
}

.mainimage{
    width: 30%;
    height: 30%;
    background:url("../images/001.jpg") center no-repeat;
    background-size: contain;
    top: 25%;
    left:35%;   
    position:absolute;
    overflow: hidden;
}

/*Contents*/
.mycontents
{
    width: 100%;
    height: 90%;
    position:absolute;
    text-align: center;
    top:60%;
}

.contentstext
{
    width: 60%;
    height: auto;
    position:absolute;
    top:5%;
    left:20%;
    font-size: var(--myfontsizesmalltitle);
    color: var(--mydarkgray);
    text-align: justify;
    text-justify: inter-word;
}

#horizontallinemainpage
{
    width:50%;
    left:25%;
}


/*Generic*/
.horizontalline
{   
    height:0px;

    border-right-style:none;
    border-left-style:none;
    border-top-style:solid;
    border-bottom-style:none;
    color:var(--mylightgray) ;
    border-top-width: 1px;
    margin-top: 8px;
    position:absolute;
}

#horizontallineheader{
    top:80%;
    width:100%;
}

/* Social */
.socialindex{
    width: 24%;
    height: 20%;
    background-color: white;
    top: 35%;
    left:38%;   
    position:absolute;
}
.socialindextext
{
    width: 100%;
    height: auto;
    position:float;
    font-size: var(--myfontsizebase);
    color: var(--mydarkgray);
    text-align: center;
    text-justify: inter-word;
}

.socialinstagram{
    width: 100%;
    height: 40%;
    background:url("../images/instagram.png") center no-repeat;
    background-size: contain;

    position:float;
    overflow: hidden;
}

.socialfacebook{
    width: 100%;
    height: 40%;
    background:url("../images/facebook.png") center no-repeat;
    background-size: contain;
 
    text-align: center;
    position:float;
    overflow: hidden;
}

/*footer*/
.footer{
    width: 100%;
    height: 2%;
    bottom: 0%;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: var(--mylightgray);
    background-color: var(--myverylightgray);
    position: fixed;
    text-align: center;
}

.footertext{

    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: var(--mylightgray);
}

/*contact*/

#contactcontact
{
    position: absolute;   
    top:55%;
    left:15%;   
}

#location
{
    position: absolute;   
    top:10%;
    left:15%;  
}

.contacttitle
{
    font-size: var(--myfontsizesmalltitle);
    color:var(--myorange);    
}

#contactmap
{
    border: solid 1px var(--mylightgray);
    position: absolute;   
    top:10%;
    left:50%;   
    width: 33%;
    height: 80%;
}

.contacttext
{
    font-size: var(--myfontsizebase);
    color: var(--mydarkgray);;
}

.contacts
{
    position: absolute;   
    top:27%;
    left:0%;   
    width: 100%;
    height: 40%;
    border-bottom: solid 1px var(--mylightgray);
    border-top: solid 1px var(--mylightgray);
    background-color: var(--myverylightgray);
}

/*beta*/

#beta
{
    position: absolute;
    left: 20%;
    top:30%;
    width: 60%;
    height: 60%;
    position:absolute;
}

#betamaintitle
{
    position: absolute;   
    top:0%;
    left:0%;
    font-size: 1.5vw;
    font-weight: bold;
    color:var(--mydarkgray);;   
}

#betatext
{
    position: absolute;   
    top:10%;
    left:0%;
    width: 100%;
    font-size: var(--myfontsizesmalltitle);
    color: var(--mydarkgray);
    text-align: justify;
}