.b1,.b5,.b7{
  display:none;
}
.b1, .b3, .b5, .b7, .b9{
  background-color: whitesmoke;
  color:#092749;
}
.b2,.b4,.b6,.b8,.b10,.b12{
  color:whitesmoke;
}
.b2{
  background-color:#4682b4;
}
.b4{
  background-color:#008081;
}
.b6{
  background-color: #81d8d0;
  background-color: #6AB1AB;
}
.b8{
  background-color:#69B4D0;
}

body{
  background-color:#242424;
}
@media screen and (max-width: 640px){
  html,body{
    height:auto;
    min-height:100vh !important;
  }
  
  main,#home-page{
    height:auto;
  }
  .b2,.b3,.b4, .b6, .b8,.b9{
    flex-grow:1;
  }
}
@media screen and (max-width: 800px){
}

@media screen and (min-width: 640px){
  html,body{
    height:auto;
    min-height:100vh !important;
  }
  .flex-home{
    flex-direction:row;
  }
  .b8{
    background-color:whitesmoke;
  }
  .b9{
    background-color:#7ef9ff;
  }
  .box{
    width:50%;
    height:calc( calc(100vh - 60px ) / 3);
    min-height:280px;
  }/* 
  .contactL{
    width:50%;
  }
  .contactR{
    width:50%;
  } */

}

@media screen and (max-height: 650px){
  body,html,main,#home-page{
    height:auto;
  }
}

@media screen and (min-width: 800px){
 /*  #contact-me-page{
    flex-direction:row;
  }
  #about-me-page{
    flex-direction:row;
  } */
  html,body{
    height:100%;
  }
  .flex-home{
    flex-direction:row;
  }
  .b1,.b5,.b7{
    display:flex;
  }

  .b2{
    background-color:#f7cac9;
  }

  .b3{
    background-color:#92a8d1;
    color:black;
  }
  .b4{
    background-color:#39015a;
    background-color:#AF7CAE;
    color:#f7cac9;
    /* background-image: url('../../img/wedding.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover; */
  }

  .b5{
    background-color:#f7786b;
  }

  .b5{
    background-image: url('../../img/polaroidsquare.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -ms-background-size: contain;
    -o-background-size:contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
  }

  .b7{
    background-color:#f7786b
  }

  .b10{
    background-color:#39015a;
    background-color:#AF7CAE;
  }
   .b12{
     background-color:#f7cac9;
   }

  .box{
    width:calc(100% / 3);
    height:calc(100% / 3);
    min-height:240px;
  }
   .b1, .b3, .b5, .b7, .b9, .b11{
    background-color:#294f7a;
    background-color:#17416f;
    background-color:#37538a;
    background-color:#23446a;
    background-color:#0e3663;
    background-color:#e6e1c5;
    background-color:#ede9da;
    background-color:#f9f3de;
    background-color:#fdf0d3;
    background-color: #ffffed;
    background-color: #fff8f2;
    background-color: #3C555D;
    background-color: #94accd;
    background-color: #E3FBF6;
    background-color: #fff8f2;
    background-color: whitesmoke;
    color:#092749;
  }
  .b2,.b4,.b6,.b8,.b10,.b12{
    
    background-color:#0e3663;
    background-color:#092749;
    background-color:#466d58;
    background-color:#ACEBD2;
    background-color:#219091;
    background-color:#092749;
    color:whitesmoke;

  }
  .b1{

  }
  .b3{
    
  }
  .b5{
    
  }
  .b7{
    
  }
  .b9{
    
  }


  .b2{
    background-color:#4682b4;
  }
  .b4{
    background-color:#008081;
  }
  .b6{
    background-color: #81d8d0;
    background-color: #6AB1AB;
  }
  .b8{
    background-color:#69B4D0;
  }
  

}

@media screen and (max-height: 810px) and (min-width: 800px){
  body,html,main,#home-page{
    height:auto;
  }
}