/*my first attempt at flexboxes...I think I'm starting to get it*/

*{
  box-sizing: border-box;
}
html {
  font-family: sans-serif;
}
.row{
  display:flex;
  flex-flow: row;
  flex:1;
  /*height:200px;*/
}
/*starting to grasp the object orientedness of css*/

.col{
  display:flex;
  flex-flow:column;
  flex: 1;
  /*align-items: center;
  justify-content: center;*/
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"]{
  display:flex;
  padding: 15px;

  flex:auto;
}


.header{
  display:flex;
  align-items: center;
  justify-content: center;
  height:300px;
  width: 100%;
  flex:auto;
  background-image: url(../dailyplanet32.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color: lightblue;
}
.navimg{
justify-content: center;
height: 80px;
width: 130px;

}
.navcenter{
  align-items: center;
  justify-content: center;
}
.nav{
  display:flex;
  background-color: #86d0a7;
}

.article{
  background: mediumseagreen;
  border: 5px solid seagrean;
  color: white;
  margin: 10px;
  padding: 20px;
  flex:auto;
  box-shadow: 5px 7px 20px 3px black;
}

iframe{
  display:flex;
  height: 700px;
  width: 100%;
  box-shadow: -5px 13px 20px 2px black;
}


.adbox{
  background: url(../amd.png), url(bigg.jpg);
  box-shadow: -6px 9px 20px 3px black;
}

.footer{
  background-image:url(http://bestanimations.com/Earth&Space/Earth/earth-spinning-rotating-animation-14.gif);
  background-repeat: no-repeat;
  background-position: center;
  display:flex;
  flex:auto;
  align-content: center;
  width: auto;
  height:300px;
}
.column {
  background: #eee;
  border: 5px solid #ccc;
  flex: 1;
  padding: 20px;

}
/*Media Queries*/
@media only screen and (max-width: 700px) {
.header{
  background-image: url(../daily.jpg);
}
}

@media only screen and (max-width: 400px) {
  .navimg{
    height: 55px;
    width: 65px;
  }
  /*.nav{
    display:block;*/

  iframe{

    height: 400px;

    }
  .col-8{
    height: 430px;
    width: 100%;
  }
  .col-4{
    width: 33%;
    height: 149px;
  }
.adbox{
  width: 295px;
  height: 200px;
  text-align: left;
  justify-content: center;
}
  .article{
    display:block;
  }
}