@font-face {
    font-family: futuraBook;
    src: url("../fonts/Futura.otf") format("opentype");
}

:root{
    --header-height:57px;
    scroll-padding-top: calc(var(--header-height) + 30px);
    scroll-behavior: smooth;
    
}

body{
    text-align: center;
    font-family: futuraBook;
}


main{
    width: 80%;
    margin: auto;
    margin-top: calc(var(--header-height) + 20px)
    
}

.orange{
    height: 100%;
    border-radius: 16px;
    padding: 3em;
}

img{
    border-radius: 16px;
}



.mesImages{
    margin: auto;
    width: 100%;
    border-style: solid;
    border-color: white;
}

.imagetop{
    flex: 1 0 100%;
    width: 100%;
}

.row {
    display: flex; /* equal height of the children */
    max-width: 100%;
    margin: auto;
    padding-top: 3em;
  }

.myhover{
   margin: auto;
    width: 20em;
    max-width: 100%;
}

@media screen and (max-width: 480px) {
    .imgleft{
        display: none;
    }
    .myhover {
         width: 15em;
    }
    .main{
        width: 90%;
    }
    .orange{
        padding: 0.5em;
    }
    h1{
        font-size: 1.5em;
    }
    .orange h1{
        padding: 0;
    }
    h2{
        font-size: 1.4em;
    }
    h3{
        font-size: 1.2em;    
    }

    a h3{
        font-size: 0.9em;
    }
    .col{
        padding: 0em;
    }
    .col-6{
        padding: 0;
    }
    
    
}
@media screen and (min-width: 480px) {

    .imgleft-phone{
        display: none;
    }
}

.myhover figure {
	position: relative;
    overflow: hidden;
}
.myhover figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.myhover figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

.logo{
    width: 7em;
    margin: 1em;
    -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.logo:hover{
    -webkit-transform: scale(0.9);
	transform: scale(0.9);
}
h1,h2,h3{
    text-transform: uppercase;
    color: #ff4800 ;
}

a h3{
    color: #035d7b ;
}

h1{
    margin-top: 1em;;
    margin-bottom: 1em;;
}

h2{
    margin-bottom: 0.5em;
}


h3{
    font-size: 1.3rem;
}
p{
    color:#1d1d1b;
}

.orange {
    background-color: #035d7b;
}
.orange div{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.orange p{
    color: white;
}
.orange li{
    list-style-position: inside;
    color: white;
}

.orange h2{
    color: white;
}

.orange h3{
    color: white;
}

.contentBox{
    margin-bottom: 2em;
    padding-top: 1em;
    padding-bottom: 1em ;
}

.imageOrdi {display:block;}
.imageTel {display:none}

@media all and (max-width: 499px) {
    .imageOrdi {display: none;}
    .imageTel {display: block;}
}


.button{
    background-color: #ff4800;
    box-shadow: none;
    text-transform: uppercase;
    margin-top: 2em;
    color: white;
    padding:1em;
}