/* Define mobile styles */
@media screen and (max-width: 40em) { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
    .hero h1 {
        color: white;
        font-size: 1.5rem;
        text-align: center;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); 
        font-family: 'Raleway',sans-serif;
        text-transform: uppercase;
        font-weight: 800;
        background: none;
    }
    .hero h2 {
        color: #FFA100;
        background:none;
        font-size: 1.2rem;
        text-align: center;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); 
        font-family: 'Raleway',sans-serif;
        font-weight: 800;
    }
} 


@media only screen and (min-width: 40.063em) and (max-width: 64em) { /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
    .hero h1 {
        color: white;
        font-size: 3rem;
        text-align: center;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); 
        font-family: 'Raleway',sans-serif;
        text-transform: uppercase;
        font-weight: 800;
        background: none;
    }
    .hero h2 {
        color: #FFA100;
        background:none;
        font-size: 2rem;
        text-align: center;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); 
        font-family: 'Raleway',sans-serif;
        font-weight: 800;
    }
} 

@media only screen and (min-width: 64em){  /* Large screen min-width 1024px */ 
    .hero h1 {
        color: white;
        font-size: 3rem;
        text-align: center;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); 
        font-family: 'Raleway',sans-serif;
        text-transform: uppercase;
        font-weight: 800;
        background: none;
    }
    .hero h2 {
        color: #FFA100;
        background:none;
        font-size: 2rem;
        text-align: center;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); 
        font-family: 'Raleway',sans-serif;
        font-weight: 800;
    }
} 

img.logo{
    height:50px;
    margin:0;
    padding:0;
    padding-right:0.5em;
}

img.flag{
    height:20px;
    margin:0;
    padding:0;
    padding-right:0.5em;
}

.hero {
    position: relative;
    z-index: 5;
    background: url("../img/playa.jpg") no-repeat center center;
    background-size: cover;
    height: 50vh;
    overflow: hidden; 
}


.menu-europsy {
    position: relative;
    z-index: 5;
    background-color: #014f42;
    background: #014f42;
    text-align: center;
    font-size: 1.2rem;
}
.menu-europsy p.slogan {
    color: #8d9093;
    font-size: 1.2rem;
    margin: 0 0 1rem; 
}
.menu-europsy .links a {
    list-style: none;
    font-weight: bold;
    color: #ffffff;
    padding: 3rem 0 2rem;
    margin: 0; 
}
.menu-europsy .links a:hover {
    list-style: none;
    font-weight: bold;
    color: #FFA100;
    padding: 3rem 0 2rem;
    margin: 0; 
}
.menu-europsy .links a::after {
    content: "•";
    padding: 0 0.4rem 0 0.8rem; 
    color: #0066FF;
}
.menu-europsy .links a:last-child::after {
  content: "";
  padding: 0 0.4rem 0 0.8rem; 
}

#svg-background {
	position: fixed;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.row, column{
    position: relative;
    z-index: 5;
}
.blc{
    background-color: white;
    opacity: 1;
}

.rd{
    border-radius: 0.35em;
}
h1{
    background-color: #FFA100;
    margin:0;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding:0;
    padding-left:0.5em;
    border-radius: 0.35em;
    font-family: 'Raleway',sans-serif;
    font-weight: bold;
    font-size: 1.75rem;
    color:#023936;
}
h2.deadline{
    background-color: #014f42;
    margin:0;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding:0;
    padding-left:0.5em;
    border-radius: 0.35em;
    font-family: 'Raleway',sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    text-align:center;
    color:white;
    padding-bottom: 0.5em;
}

h2{
    background-color: #014f42;
    margin:0;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding:0;
    padding-left:0.5em;
    border-radius: 0.35em;
    font-family: 'Raleway',sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    text-align:left;
    color:white;
}

h3{
    background-color: #FF6633;
    margin:0;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding:0;
    padding-left:0.5em;
    border-radius: 0.35em;
    font-family: 'Raleway',sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    text-align:left;
    color:white;
}
p{
    margin-top:0.5em;
}
.spacer{
    clear:both;
    line-height:1em;
    margin-top:1em;
}
.spacerDouble{
    clear:both;
    line-height:2em;
    margin-top:2em;
}

li.europsy{
    list-style: none; 
    line-height: 2em;
    margin-left:1.5em;
}     

li.europsy:before { 
    content:''; 
    display:inline-block; 
    height:1em; 
    width:1em; 
    background-image:url('../img/svg/puce.svg'); 
    background-size:contain; 
    background-repeat:no-repeat; 
    margin-top: 1em;
    margin-left:-2em;
    padding-left:1.5em;
}

a{
    color:#014f42;
    font-weight:bold;
}

a:hover{
    color:#00aabe;
}

table thead{
    background-color: #014f42;
    color:white;
}

.txt-color-table{
    color:#014f42;
    font-weight: bold;
}

.button.europsy {
    background: #FFA100;
    color: #FFF; 
}
.button.europsy:hover, .button.europsy:focus {
    background: #FCCB51;
    color: #333; 
}

.hippocampe {
    position: relative;
    z-index: 2;
    background: url("../img/svg/hippocampe.svg") no-repeat bottom center;
    width:217px;
    height:407px;
    top: -30em;
    margin-left: 100rem;
}

.fondmer {
    position: relative;
    z-index: 2;
    background: url("../img/bg.png") no-repeat bottom center;
    background-size: cover;
    height: 70vh;
    overflow: hidden;   
    top: -60vh;
    margin-bottom: -60vh;
}

img.left{
    margin-left: -0.75em;
    padding-left: 0px;
}

img.right{
    margin-left: 0.75em;
    padding-left: 0px;
}
.copyright{
    color: white;    
}

li.typo{
   list-style: none;
}

li.typo:before { 
   background-image: none;
}

.typo i{
    color:#FF6633;
    margin-right:0.5em;
}

.typo i{
    font-size: 2rem;
}
p{
    padding-left: 1em;
}

P.MailOk{
    background-color: #17EF00;
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    color: #014f42;
    border-radius: 2rem;
}

.title-bar{
    background: none;
    border-bottom: 1px dotted white;
}

.top-bar, .top-bar ul {
    background: none;
}

.top-bar ul a{
    color:white;
}

.top-bar ul a:hover{
    color:#FFA100;
}


@media screen and (min-width: 40em) {
    .top-bar ul a{
        border-right: 1px dotted white;
    }
    
    .top-bar ul li:last-child a {
        border-right: none;
    }    
}