/* CSS Document */

* {
    margin: 0;
    padding: 0;   
 

}

/* BODY */

body {
  
    width: 90%;
    margin: auto;
    max-width: 100%; 
    font-size: 1.5em;
    font-family: Verdana, sans-serif;
    color: rgb(81, 11, 53);      
    
    background-color: rgb(252, 244, 238); 
    background-image: ;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: auto; 
}

.logo_eosinofilo {
    display: grid;
    grid-template-columns: 1.5fr 4fr;
   
}

/* LINKS BEHAVIOR */

a {text-decoration: none; color: rgb(81, 11, 53); }

.move {color: rgb(234, 214, 225); font-size: 0.7em;}
.move:hover {font-size: 0.9em; color: rgb(239, 198, 220);}

.linkletters {color: rgb(160, 89, 128);}
.linkwhite {color: white;}

.purple {color: rgb(81,11,53);}
 
 


/* WRAPPER */

.wrapper {
    width:100%; max-width: 100%; margin: 0 auto; float: right; 
}


/* TOP MENU */

#topmenu {
    position: fixed;
    top: 0; 
    z-index: 20;
    width: 90%; height: ; margin: auto; 
    background-color: rgb(81, 11, 53); 
    outline: 0px ridge rgb(239, 95, 181);
    
    overflow-x: hidden; overflow-y: auto;
    
}

.spacer
{
    width: 100%;
    height: 70px;
}

#logo {float: left; margin-top: 10px; margin-bottom: 10px; width: ; 
  
}

#flags {float: right; margin-top: 40px; height: 65px; padding-left: 25px; padding-right: 5px;}

.zoomed {transform: scale(1.5);}
.flagzoom:hover {transform: scale(1.5);}
img {margin-left: ; margin-right: ; max-width: 100%; 
   width: auto\9; /* IE8 */}


.containertop {
    display: grid;
    grid-template-columns: 4fr 1fr;
   
}



.navibar {
    padding-left: 5px; padding-right: 5px; padding-bottom: 10px;
    
}





.spacerbottom
{
    width: 9%;
    height: 180px;
}

/* BODY BOX */
.container {
    float: center;
    line-height: 10px 5px;
    border-radius: 2px;
    
    color: rgb(81, 11, 53); background-color: rgb(252, 244, 238); box-shado: 0px 4px 10px 0px rgb(81,11,53);
 
    padding: 5%;
    margin-top: 70px;
    margin-bottom: 70px;
    margin-left: 5%;
    width: 90%;
    max-width: 100%;
    
    
} 





/* MIDDLE CONTENT WITH ACTUAL FORM */
h1 {text-shadow: none; font-family: verdana, sans-serif; font-size: 2em; color: rgb(81, 11, 53);}
h2 {font-size: 1.3em; font-style: italic; text-align: left !important; line-height: 1.5; color: rgb(81, 11, 53);}
h3 {font-variant: small-caps; text-align: left; font-size: 1.1em; color: rgb(81, 11, 53)}
h4 {font-style: italic; font-weight: 100; text-decoration: underline; font-size: 1em; text-align: left; color: rgb(81, 11, 53);}
h5 {font-variant: small-caps; text-align: left; font-weight: 100; color: rgb(123, 35, 87);}

.indent {text-indent: 2em;}
.paragraph {text-align: justify; font-size: 1em; line-height: 1.5; } 
.literature {font-size: 0.7em; text-align: justify; display: inline-block; margin-left: 4em; margin-right: 4em;}

/* TABLES */
td:nth-child(2) {width: 80%;}
table, th, td {}
.subitem {padding-left: 40px;}





/* IMAGES */
figure {width: 45%; margin: 20px;}
figcaption {font-size: 0.8em; font-style: italic; text-align: left; color: rgb(81, 11, 53);}
.nomargin {width: 80%; margin: auto;}
.textwrapleft {float: left; }
.textwrapright {float: right; }
.textwrapcenter {display: block; margin-left: auto; margin-right: auto; }
.wide {width:100%; margin: 2px;}





/* TEXT HIGHLIGHT */
mark {background-color: rgba(133, 191, 234, 0.83)}



 /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 50%; /* Full width */
    font-size: 0.6em;
    padding: 10px; /* Some padding */ 
    border: none;
    border-bottom: 1px solid white); /* white border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 12px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    margin-left: 20px;
    resize: vertical;} 
            
    /* Allow the user to vertically resize the textarea (not horizontally) */
            
    textarea {
    width: 50%; /* Full width */
    font-size: 0.6em;
    padding: 10px; /* Some padding */ 
    border: none;
    border: 1px solid white; /* White border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 12px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    margin-left: 20px;
        resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}


/* FORMATING FOR ASTERISKS (INSIDE SPANs) */
.requiredfields {color: rgb(133, 177, 179); 
}

 .highlighted {color: rgb(77,175,105);}



/* Style the submit button with a specific background color etc */


input[type=submit] {
    background-image: linear-gradient(to bottom, rgb(237, 172, 208) 0%, rgb(237, 172, 208) 40%, rgb(144, 33, 94) 50%, rgb(222, 129, 185) 90%, rgb(237, 172, 208) 100%)
    !important;    
       color: rgb(234, 214, 225);
    border-width: 5px;
    border-color: rgba(81, 11, 53, 1);
    box-shadow: 0px 0px 20px 10px rgb(81, 11, 53) inset;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    margin: center;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker color */
input[type=submit]:hover {
    background-image: linear-gradient(to bottom, rgb(81, 11, 53) 0%, rgb(235, 189, 239) 10%, rgb(229, 214, 234) 50%, rgb(235, 189, 239) 90%, rgb(81, 11, 53) 100%) !important;
       color: rgb(81, 11, 53);
    border-width: 10px;
    border-color: rgb(204, 185, 206);
    box-shadow: 0px 0px 20px 10px rgb(199, 163, 209) inset;
}



/* BLOCKQUOTING REFERENCES */
blockquote {
font-family: Georgia, serif;
font-style: italic;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position:relative;
    width:;
color: rgb(81, 11, 53);
}

blockquote:before {

padding-left: 30px;
content: "\201C";
font-size: 80px;
position:relative;
left: -5px;
top: -20px;
color: rgb(209, 66, 66);
}

blockquote cite {
color: rgb(209, 66, 66);
font-size: 14px;
display: block;
margin-top: 5px;
}
 
blockquote cite:before {
content: "\2014 \2009";
}





/* MIDDLE CONTENT WITH BUTTON */
#body {width: 90%; height: 100%; z-index: 0;  text-align: center;}

.emphasis {letter-spacing: +6px; }

/* REQUEST QUOTE BUTTON */

button {
    
    float: left;
    margin-top: 30px; margin-bottom: 30px; 
    
    padding: 40px 60px;    
    border: none 2px; border-color: ;
    color: rgb(81, 11, 53); 
    border-radius: 40px 20px;    
    background-color: rgb(234, 214, 225); /*Background of the fields saying "languages" and "areas of expertise"*/
    
}



button:hover {
    transform: scale(1.05);
    transition: ease-in all 0.2s;
    cursor:default;    
    
    
   
}

/*formatting the request a quote button*/
.button3 {
    color: rgba(81, 11, 53,1); /*Font of Request a Quote*/
    cursor: pointer !important; 
    background-image: linear-gradient(to bottom, rgb(rgb(131, 0, 78)) 0%, rgb(222, 129, 185) 10%, rgb(237, 172, 208) 50%, rgb(222, 129, 185) 90%, rgb(131, 0, 78) 100%) !important; 
    box-shadow: 0px 0px 20px 10px rgb(81, 11, 53) inset;
}

.button3:hover { }

.extrabutton {float: center; margin-left: 25%; margin-bottom: 20%; cursor: pointer !important;}


 /* DROPDOWN LANGUAGES AND AREAS OF EXPERTISE */
.flexing {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } /* space both dropdown elements evenly in row */


.dropbtn1 {
   
    
    font-size: 1.2em; font-weight: 500; color: rgb(81, 11, 53); text-shadow: none;
    margin-top:25px;  
    
    box-sizing: border-box;    
    border: none; border-left-style:dotted;
    
    
}

.dropbtn2 {
    
    
    font-size: 1.2em; font-weight: 500; color: rgb(81, 11, 53); text-shadow: none;
     margin-bottom: 25px; 
    
    box-sizing:border-box;
    border: none; border-right-style:dotted;
    
    
}

/* This one's for the request button */

.dropbtn3 {
    
    
    font-size: 1.2em; font-weight: 500; color: rgb(81, 11, 53); text-shadow: none;
     margin-bottom: 25px; 
    
    cursor: pointer !important; 
    
    box-sizing:border-box;
    border: none; border-right-style:dotted; border-left-style:dotted;
    
    }

.dropbtn3:hover { }




/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    float: left;
    margin: left; 
    
    
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
   
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;    
    display: none;
    position: absolute;
    border-radius: 20px;
    
    
    
    
    min-width: 160px;
    
    z-index: 21;
    
}

/* Dropdown font */
li {font-size: 1.2em; font-weight: 100; color: rgb(81, 11, 53); text-shadow: none; line-height: 1.5;}
ul {width: auto; text-align-last: left; justify-content: center; padding: 10px 20px; 
    display: -ms-flexbox;           /* IE 10 */
    display: -webkit-flex;          /* Safari 6.1+. iOS 7.1+ */
    display: flex;
    -webkit-flex-flow: wrap column; /* Safari 6.1+ */
    flex-flow: wrap column;
    max-height: 500px; overflow: auto;
}

.list1 {width: 200px;}
.list2 {width: 600px; }

/* Links inside the dropdown */
.dropdown-content p {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display:table-element;
    width:300px;
    overflow:auto;
}


/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display:flow-root;   
     
   
    box-sizing:border-box;
    border-bottom: solid; border-color: white; border-width: 1px;  background-color: rgb(41,108,114); } 



/* Make menu-links within page leave some space upwards - isn't working well, so I put it in this invisible menu: 

#translation, #editing, #aoe, #languages, #general, #sidenote, #pricing, #terms, #method {
    padding-top: 180px;
    margin-top: -180px;
}

#me, #scientific, #1, #2, #3, #4, #5, #6, #7, #8, #9, #10 {
    padding-top: 180px;
    margin-top: -180px;
}    */



/* Stuff that has become redundant */

/* BOTTOM MENU BAR */

#bottommenu {
    position: fixed;    
    top: 18%;
    z-index: 19;
    padding-top: 3px;
    height: 6%; text-align: center;
    width: 90%;  margin: auto; 
    overflow-x: hidden; overflow-y: auto;
    
    
    background-color: rgb(81, 11, 53); 
    outline: 0px ridge rgb(106, 14, 69);
}