/* adapted from basic flexbox navigation https://codepen.io/jorgemb76/pen/gNZqjm
and flexbox responsive website https://coder-coder.com/build-flexbox-website-layout/
*/
/* GLOBAL STYLES */

* {
    box-sizing: border-box;
 }
 
 body {
    font-family: 'Fira Sans', sans-serif;
    margin: 0;
 }

.navigation a {
   color: white;
   font-weight: 300;
   letter-spacing: 2px;
   text-decoration: none;
   background: #343536;
   /*background: rgb(238, 13, 13);*/
   padding: 20px 5px;
   display: inline-block;
   width: 100%;
   text-align: center;
   margin : 0;
}

.navigation a:hover {
    border-radius: 25px;
   background : #747576;
   /*background: rgba(238, 13, 13, 0.75);*/
}

.main {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 3em 1.5em;
}

.navigation ul {
   border: 1px solid #232526;
   /*border: 1px solid rgb(212, 20, 20);*/
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
}

.navigation li {
   flex: 3;    
}

.navigation .user {
   flex: 1;
}

@media all and (max-width: 1000px) {
   .navigation ul {
      flex-wrap: wrap;
   }
   
   .navigation li {
      flex: 1 1 50%;
   }

   .navigation .user {
      flex: 1 1 33.33%;
   }
}

@media all and (max-width: 480px) {
   .navigation li {
      flex-basis: 100%;
   }

   .navigation .user {
      flex-basis: 50%;
   }
}

*,:after,:before{box-sizing:border-box}

html
    {
        font-size:100%
    }

body
    {
        margin:0;
        /* padding:20px; */
        font-family:Arial,Helvetica,sans-serif;
        font-size:1.3rem;
        /*color:#fff*/
        padding : 0;
        color: #000000;
    }

.wrapper
    {
        margin:auto;
        /*max-width:75rem*/
    }
    
.flex-container 
    {
        height: 100%;
        width: 100%;
        /*background : pink;*/
        /*margin : 40px;*/
        /*border:4px solid #EE8;*/
        /*border:40px solid pink;*/
    }



/*aside,footer,header,main,section*/
aside,header,section
    {
        display:block;
        margin:0;
        /*margin :10px;*/
        padding:1.25rem;
        /*border:1px solid #000;*/
        /*color:#fff*/
    }
    
.wrapper, html, body {
    height: 100%;
    margin: 0;
}
    
.wrapper
    {
        height: 100%;
        width: 100%;
        /*background : pink;*/
        /*margin : 20px;*/
        /*border:2px solid #CC6;*/
        /*border:20px solid yellow;*/
        display: flex;
        flex :1 1 auto;
        /*flex-direction: column;*/
        align-items: stretch;
        
    }

main
    {
        /*background:#000;*/
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

.header
    {
        /*background:#03a9f4*/
        /*background : #FFFFFF;*/
        background: #343536;
    }

.advert
    {
        /*background:#d22b1f*/
        background : #FFFFFF;
    }

@media screen and (min-width:640px)

    {
        .flex-container
            {
                display:flex;
                align-items: stretch;
            }
    }
    
.divider {
  align-self: stretch;
  /* border-left:1px solid #0d2c4a; */
}

.content
    {
        /*flex:1;*/
        /*flex:1 70%;*/
        /* height: 100%; */
        width: 70%;
        /*width: 100%;*/
        /*width: 800px;*/
        display: flex; 
        /*background:#129a22;*/
        align-items: stretch;
        min-height: 100%;/* chrome needed it a question time , not anymore */
        flex-grow: 1;
        flex-direction: column;
    }

.sidebar
    {
        /*flex:0 1 300px;*/
        /*flex:0 1 30%;*/
        /* height: 100%; */
        width: 30%;
        /*width: 100%;*/
        /*width: 300px;*/
        display: flex; 
        /*background:#673ab7;*/
        align-items: stretch;
        min-height: 100%;/* chrome needed it a question time , not anymore */
        flex-grow: 1;
        flex-direction: column;
        background : #EEEEEE;
        border-radius: 25px;
        margin : 20px 20px 20px 20px;
    }
    
.contentHeading
    {
        
        font-weight : 900;
    }
    
    
.contentTitle
    {
        font-size:2rem;
    }
    
h2
    {
        margin: 0;
        padding: 0;
    }
    
label, .formSearchInput, .formSearchSubmit
    {
        font-weight : 900;
        font-size:2rem;
        padding : 2px;
        margin : 2px;
        /*background : pink;*/
    }
    
    
    
.formSearchInput
    {
         /*background : blue;*/
         font-size:2rem;
         padding : 20px;
        margin : 2px;
    }

.formSearchSubmit
    {
         /*background : green;*/
         font-size:2rem;
         padding : 20px;
        margin : 2px;

        border:20px;

    }
    
        .formSearchSubmit:input[type=text] {
            padding:5px; 
            border:2px solid #ccc; 
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }

        .formSearchSubmit:input[type=text]:focus {
            border-color:#333;
        }

        .formSearchSubmit:input[type=submit] {
            padding:50px 150px; 
        background:#ccc; 
        border:10 none;
        cursor:pointer;
        -webkit-border-radius: 25px;
         border-radius: 25px; 
        }
        
        input[type=text] {
            padding:25px; 
            border:5px solid #ccc; 
            -webkit-border-radius: 5px;
            border-radius: 5px;
             font-weight : 900;
        font-size:1rem;
        }
    
        input[type=submit] {
            padding:10px 20px; 
        background: green; 
        color : white;
        font-weight : 900;
        font-size:2rem;
        border:10 none;
        cursor:pointer;
        -webkit-border-radius: 25px;
         border-radius: 25px; 
        }
    
.contentTitle {
            font-weight : 900;
        font-size:2rem;
}

.contentContainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.footer,.sidebar
    {
        /*border:1px solid #000*/
        /*background: #FFFFFF;*/
        border:1px solid #121315;
    }
    
.footer
    {
        /*background:#616161*/
        /* background: #ECECEC; */
        align-items : center;
        justify-content : center;
        text-align : center;
        background: #343536;
        color : #FFFFFF;
    }