/* HTML 5 Reset
 * ========================================================================== */
/* Baseline Normalize - normalize.css v3.0.1 | MIT License | git.io/normalize */

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:visible}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

html {
    width: 100%;
    margin: 0;
}

:root {
    --colorpart2: #0b99bc;
  }
  

header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    top: 0;
    height: 100px;
    width: 100%;
    background-color: var(--colorpart2);
    position: relative;
}


.brand {
    flex: 1 1 70%;
}

.brand img {
    position: relative;
    margin-left: 50px;
    height: 65px;
    width: auto;
}

.nav {
    flex: 1 1 20%;
    width: 20%;
}

.top-nav {
    display: none;
    flex-direction: row;
    justify-content: space-around;    
    align-items: center;
    position: relative;
    color: white;
    list-style-type: none;
    list-style-position:outside;
    text-indent: -30px;
    padding:0;
    margin-right: 45px;
}

.top-nav a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    text-align-last: justify;
    font-size: 20px;
    margin: 0 25px;
    padding: 0;
    vertical-align: middle;
}

.mobile-icon {
    display: flex;
    flex-direction: column;
    margin-right: 30px;
    padding-inline-start: 20px;
}

.icon-bar {
    width: 20px;
    height: 4px;
    background-color: white;
    margin: 3px 0;
}

.mob-menu {
    position: fixed;
    display: flex;
    justify-content: space-around;
    top: 80px;
    right: 0;
    width: 60%; 
    height: 25%;
    flex-direction: column;
    background-color: var(--colorpart2);
    padding: 2px 2px;
    border: outset 2px lightgrey;
    list-style-type: none;
  }
  
  .mob-menu li:before {
    content: '';
  }
  
  .mob-menu a {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 5vw;
    padding: 3vh 3vw;
    text-transform: uppercase;
    text-decoration: none;
  }

  .mob-menu li {
      margin-left: 0px;
  }
  
  .mob-menu a:active {
    transform: translateY(4px);
  }
  
  .toto {
    font-family: 'Cabin', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 4.5vw;
  }
  

h1, h2, h3, h4 {
    font-family: 'Ubuntu', sans-serif;
}


p, li {
    font-family: 'Cabin', sans-serif;
    margin: 5px 5px 0 30px;
}

h1 {
    text-align: center;
    font-size: 45px;
    font-weight: 700;
    margin: 50px 0 30px 0;
}

h2 {
    font-weight: 500;
    font-size: 30px;
    margin: 30px 5px 15px 30px;
}

h3 {
    font-weight: 500;
    font-size: 22px;
    margin: 20px 5px 10px 60px;
}

h4 {
    font-weight: 500;
    font-size: 17px;
    margin: 10px 5px 8px 80px;
}

main ul {
    list-style-position: outside;
    /* text-indent: -30px; */
}

main li, li p {
    margin-left: 0;
}

footer {
    margin-top: 80px;
    background-color: #32384d;
    color: white;
    text-align: center;
    padding: 10px 5px;
}

    

@media all and (min-width: 450px) {

    .icon-bar {
        width: 30px;
        height: 4px;
        background-color: white;
        margin: 3px 0;
    }

    .brand img {
        position: relative;
        margin-left: 50px;
        height: 75px;
        width: auto;
    }

    .mob-menu {
        width: 50%;
    }

    .mob-menu a {
    font-size: 4vw;
    }

}

@media all and (min-width: 625px) {

    .icon-bar {
        width: 40px;
        height: 5px;
        background-color: white;
        margin: 5px 0;
    }

    .brand img {
        position: relative;
        margin-left: 50px;
        height: 90px;
        width: auto;
    }
    
    .mob-menu {
        width: 45%;
    }

    .mob-menu a {
        font-size: 3.2vw;
    }
    
}

@media all and (min-width: 768px) {

    header {
        height: 100px;
    }

    .brand {
        flex: 1 1 30%;
    }
    

    .brand img {
        height: 95px;
    }

    .nav {
        flex: 1 1 50%;
        height: 80%;
    }

    .top-nav {
        display: flex;
        text-indent: -30px;
        margin-right: 0px;
    }

    /* .top-nav li {
        flex: 1 1 33%;
    } */
    
    .top-nav a {
        font-size: 20px;
        margin: 0 25px;
    }

    .mobile-icon {
        display: none;
    }
    
}