body,
html {margin: 0; padding: 0;}

body {font-family: dinosaur, sans-serif; font-size: 1rem; line-height: 1.55rem; color: #474747; background: #F2EEE8;}
h1, h2, h3, p, div, a {color: #435670;}

/* FORMAT */
   
a {text-decoration: none;}   

h1 {}
h2 {font-size: 2.4rem; font-weight: 300; margin-bottom: 40px; line-height: 3rem;}

p {font-size: 1.3rem; line-height: 2rem; font-weight: 300;}
  
 /* LAYOUT */ 
  
.flex {display: flex; justify-content: space-between; flex-wrap: wrap;}  
.fullwidth {width: 100%;}

 /* COLORS */

.gray {background: rgb(244, 247, 255);}
.white {background: #FFF;}  
 .blue {background: #4C60F9;} 
 	 .blue p,  .blue div,  .blue h1,  .blue h2 {color: #FFF;}
    

/* ELEMENTS */
 
header {padding: 30px 0 0; position: fixed; background: transparent; top: 0; width: 100%; z-index: 2;}       
    header nav {margin: 0 auto;}

.main-nav ul {padding: 0; }
	.main-nav li {display: inline; vertical-align: middle; padding: 0 0.6rem;}
        .main-nav li img {padding: 0 0.8rem;}
		.main-nav li a {display: inline-block; padding: .5em 1.5em; text-transform: uppercase;}
        .main-nav li a:link, .main-nav li a:visited {color: #435670; font-size: 1.1rem; font-weight: 400; letter-spacing: 0.8px;}
        
section {padding: 20px;     border: 20px solid #FFF;}    
	section div {box-sizing: border-box; padding: 150px 10vw;}
    section div.img img {box-shadow: 0 0 20px rgb(255 255 255); border: 10px solid #FFF;}
    section div.img img.one  {width: 456%; position: relative; top: -23px; right: 200px; transform: rotate(349deg);}
    section div.img img.two {width: 360%; position: relative; top: -60px; right: 150px; transform: rotate(11deg);}
     

	section.first {padding-top: 150px; text-align: center; height: 40vw; position: relative; z-index: 1; border: none;}
		section.first div {padding: 30px 10vw 40px;}
       
    section.banderole {height: auto; text-align: center; position: relative;}
        section.banderole div {padding: 50px 20vw 40px;}        
        section.banderole img {width: 100px;}

    section.second {background: #eb9b94; background-image: url(/img/sectionFirst.svg), linear-gradient(14deg , #eb9b94 0%, #F8EBEA 100%); background-repeat: no-repeat; background-size: 100%;}
    
    section.third {background: #8CA5B0; background: #8CA5B0 url(/img/sectionFirst.svg) 0 0 no-repeat;}
    
    section.forth {background: #4B6072; background: #4B6072 url(/img/sectionFirst.svg) 0 0 no-repeat;}

	section .blue {border-radius: 10px; color: #FFF; box-shadow: 0 0 10px rgba(51, 87, 255, 0.4);}
    
    .two {width: 20%;}
    .three {width: 30%;}
    .five {width: 50%;}
    .six {width: 60%;}
    .seven {width: 70%;}
    .eight {width: 80%;}

    .box {display: block; background: #FFF; width: 300px; height: 300px;}
    .box.right {float: right;}
    .box.left {float: left;}


footer {padding: 80px 10vw; background: rgb(54, 73, 98);}
	footer div {color: #FFF;}

	footer .copyright {color: rgba(255, 255, 255, 0.4);}

/* MODEL VIEWER */

model-viewer {width: 100%; height: 800px; border-radius: 10px; position: absolute; z-index: 0; z-index: 0; background: transparent url(/img/sectionFirst.svg) 0 0 no-repeat;}
main model-viewer :not(:defined) > * {display: none;}



#share {width: 70%; padding: 0 15%; margin: 50px auto; text-align: center;}
    #share i {position: absolute; top: 11px; left: 13px;}
    #share p {margin-bottom: 15px;}
    #share a {padding-left: 40px; width: 90px; text-align: left;}

#share a, #share .button:link, #share .button:visited {width: 110px; height: 30px; display: inline-block; margin: 8px; border-radius: 3px; font-size: 1rem; color: #fff; transition: all 0.15s linear; background: #3e3a5f; text-decoration: none; padding: 7px 6px 2px 12px; border: 1px solid #3e3a5f; box-shadow: 0 0 10px rgb(62 58 95 / 30%); position: relative;}


section .button {    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: #47556E;
    color: rgb(255, 255, 255);
    font-family: inherit;
    border: 0px;
    transition: all 0.4s ease 0s;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px;
    padding: 0 0 2px 15px;
    font-size: 20px;
    line-height: 28px;
    position: relative;
    outline: none;
    text-decoration: none;
}

section .button span {    display: block;
    background: #47556E url(/img/icons/arrow.svg) 0 0px no-repeat;
    background-size: 50px;
width: 55px;
height: 50px;
padding: 0 0 0 0;
border-radius: 0 4px 4px 0;}

section img.partner {width: 140px;}    


.umfragebuttons h3 {    width: 100%;
    font-size: 1.3rem;
    line-height: 2rem;
    margin-top: -40px;}
.umfragebuttons a:link, .umfragebuttons a:visited  {background: #43567015; padding: 7px 12px 10px; text-align: Center; border-radius: 5px; width: 18%; margin-bottom: 20px;}
.umfragebuttons a:hover {background: #DDD;}

.copyright {flex-basis: 100%; font-size: 0.85rem; margin: 100px 0 0 0; text-align: left; color: #fff; text-align: center; color: rgba(255, 255, 255, 0.4);}
    .copyright img {width: 250px; display: block; margin: 30px auto;}
    .copyright a:link, .copyright a:visited {color: rgba(255, 255, 255, 0.5); transition: all 0.3s ease; font-size: 0.8rem;}



@media screen and (max-width: 900px) { 
	
 .main-nav li img {with: 100px;}   
    
.two,
.three,
.four,
.five,
.six,
.seven,
.eight {width: 100%;}
	
#share {width: 100%; padding: 0;}    
    
    section div {padding: 150px 5vw;}
    
section.banderole div {padding: 50px 5vw 40px;}
    
}


Z