/*Under the Ping Pong Table*/
/*Cortney Leigh Cox*/
/*Site Layout: Grid*/
/*Content Layout: Nested Flexbox*/
/*CSS*/

/*Standard Site Styles--------------------------------------------------------*/
/*border box style------------------------------*/
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
/*overall styles, header, footer---------------*/
.general_layout_wrapper {
    width: 55%;
    margin: 0 auto;
    background-color: white;
}
.background_image {
    object-fit: cover;
}
body {
color: #58585a;
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
background-color: white; 
}
header {
    padding-bottom: 0em;
}
img.header_logo {
    /*width: 2218px;
    height: 414px;*/
    width: 550px;
    padding-top: .5em;
}
main {
    padding: 0em 1em 1em 1em;
}
/*Background images --------------------------*/
body.artifacts {
   background-image: url("images/background_images/home_background_artifacts.jpeg");
    /*from http://wallpaper-gallery.net/gallery/free-background-images.html*/
}
body.gallery_2d {
    background-image: url("images/background_images/2d_background_canvas.jpeg");

}
body.gallery_3d {
    background-image: url("images/background_images/3d_background_wall.jpeg");

}
body.about {
    background-color: #bdd6c0;
}
body.contact {
    background-image: url("images/background_images/mailing_list_contact_background_envelopes.jpeg");
}
body.blog {
    background-image: url("images/background_images/blog_background_legos.jpeg");
}
body.blog_page {
    background-image: url(images/background_images/blog_page_background_polyfill_clouds.jpeg)
}
h1.blog p.blog {
    float: right;
}
/*Nav Menu---------------------------------------*/
nav {
    padding: 0em 0em 0em .6em;
}
li {
    display: inline;
    padding: 1.5em;
}
nav > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: right;    
}
ul.nav_menu {
    padding-top: 1.3em;
    font-size: 1.3em;
    padding-right: 0em;
}
nav a {
    text-decoration: none;
    color: #464648;
}
/*Drop Down Nav---------------------*/
/*The dropdown container needed to position the dropdown content*/
.dropdown {
float: left;
overflow: hidden;
}
/*style the dropdown button to fit inside the topnav*/
.dropdown .dropbtn {
  font-size: 1.12em;
  border: none;
  outline: none;
  color: #58585a;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  padding: 0; 
}
button.dropbtn {
   padding-bottom: 1.3em;   
}
.navbar a:hover, .dropdown:hover .dropbtn {
  font-weight: bold;
  color: black;
}
/*style the dropdown content (hidden by default)*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: .25em;
  z-index: 1;
  padding: .5em 0em 0em 0em;
}
/*style the links inside the dropdown*/
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/*style dropdown hover content*/
.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown:hover .dropdown-content {
  display: block;
}
/*For Mobile Menu Toggle--------------*/
.topnav {
  /*background-color: #333;*/
  overflow: hidden;
}
/*hide the link and icon that open and closes the topnav on small screens*/
/*styles in Mobile Media Query show content for Mobile only*/
.topnav .icon {
  display: none;
  
}
/*personal adjustment to icon size*/
a.icon {
   font-size: 3em;  
    padding: .3em .7em 0em 0em;
    color: #58585a;
    position: absolute;
    right: 0;
    top: 0;
}
/*footer----------------------------------------*/
footer {
    background-color: #949494;
} 
img.footer_logo {
    max-width: 15em;
    opacity: 0.8;
}
img.instagram_logo {
    width: 2em;
}
/*Grid Layout Styles--------------------------------------------------------------*/
/*home,2d,3d,oddities,about,contact/mailing list,blog single page*/
.grid_container_layout {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'main main main main main main'
    'footer footer footer footer footer footer';
  grid-gap: 10px;
} 
.grid_item_header { 
    grid-area: header;
}
.grid_item_main { 
    grid-area: main;
}
.grid_item_footer { 
    grid-area: footer;
}
/*2d/3d Gallery single pages, blog------------------------*/
.grid_container_single_page_layout {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'main main main main main aside'
        'footer footer footer footer footer footer';
    grid-gap: 10px;    
}
.grid_main_single_page { 
    grid-area: main;
    padding: 0em;
}
.grid_aside_single_page { 
    grid-area: aside;
    padding: 1.5em .5em 0em 0em;
}
h1.single_page {
    font-size: 1.3em;
    font-weight: bold;
}
img.single_page {
    width: 100%;
    height: 100%;
    padding: 0em;
    margin: 0em;
}
img.portait_thumb {
    width: 30%;
    height: 30%;
}
a.back {
    font-size: 1em;
    float: right;
    padding: .25em .25em 25em 0em;
    margin: 0em 0em 1em .5em;
    color: #4f7d55;
}
a.back:hover {
    color: #2D4831;
}
.fa-chevron-left {
    font-size: 1em;
    font-weight: 50;
    float: right;
    padding: .35em 0em 0em 0em;
    color: #518157;
}
/*page styles----------------------------------------------------------------*/
/*home--------------------------*/
img.homepage {
    display: block;
    max-height: 100%;
    max-width: 100%;
}
button.home_project {
    font-size: 1.3em;
    float: right;
    padding: .5em;
    margin: 0em 0em 1em 1em; 
    /*mobile styles don't match desktop*/
    border-radius: 2px;
    border-color: #58585a;
    border-width: .5px;
    color: #58585a; 
    background-color: #f1f1f1;
}
h1 {
    color: #58585a;
    font-size: 2.3em;
    font-weight: bold;
    display: inline;
}
div.homepage {
    padding-top: 1em;
}
button.home_project:hover {
    background-color: #ddd;
}
/*read about the artifacts-----------------------------*/
.general_layout_wrapper_read_artifacts {
    width: 65%;
    margin: 0 auto;
    background-color: white;
}
.grid_container_read_artifacts_layout {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'main main main main main aside'
        'footer footer footer footer footer footer';
    grid-gap: 0px;    
}
.grid_main_read_artifacts { 
    grid-area: main;
    padding: 3em;
}
.grid_aside_read_artifacts { 
    grid-area: aside;
    padding: 0em 1em 0em 0em;
}
div.intro_read_artifacts {
    padding: 0em 0em 1em.5em;
    
}
p.read_artifacts {
   max-width: 38em; 
}
blockquote.read_artifacts {
    padding-top: 2em;
    margin-left: 0em;
}
/*flexbox-----------------*/
.flexbox_container_read_artifacts {
    display: flex;
    flex-wrap: wrap;
}
img.read_artifacts {
    width: 40%;
    height: 40%;
    padding: 1em;
}
div.read_artifacts {
    width: 50%;
}
/*about------------------------------------------------*/
div.about_text {
    padding: 1em;
}
p.intro_about {
    font-size: 1.1em;
    max-width: 38em;
}
/*contact-----------------------------------------*/
.flexbox_container_contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.contact {
    margin-left: auto;
    margin-right: auto;
    display: inline;
}
h1.form {
    padding-bottom: 1em;
    font-size: 1.7em;
}
form {
    padding: 2em 0em 2em 0em;
}
fieldset {
    margin-bottom: 2em;
    background-color: #ebf5f0;
}
legend {
    font-weight: bold;
    font-size: 1.5em;
    padding: 0em .5em .5em .5em;  
}
label {
    display: block;
    margin: 0em 0em 1em 1em;
    font-size: 1.1em;
}
label.first {
    padding-top: 2em;
}
label.last {
    padding-bottom: 2em;
}
label.comment {
    vertical-align: top;
}
input.checkbox {
    width: 25px;
    height: 25px;
    margin: .5em;
}
textarea {
    margin-top: 1em;
}
#submit_contact {
    float: right;
    font-size: 1.5em;
    padding: .5em;
    margin: 0em 0em 1em 1em; 
    color: #58585a;
    /*mobile styles don't match desktop*/
    border-radius: 2px;
    border-color: #58585a;
    border-width: .5px;
}
#submit_contact:hover {
    background-color: #bdd6c0;
}
/*mailing list--------------------------------------*/
.flexbox_container_mailing_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.mailing_list {
    margin-left: auto;
    margin-right: auto;
    display: inline;
}
#submit_mailing_list {
    float: right;
    font-size: 1.5em;
    padding: .5em;
    margin: 0em 0em 1em 1em; 
    color: #58585a;
    /*mobile styles don't match desktop*/
    border-radius: 2px;
    border-color: #58585a;
    border-width: .5px;
}
#submit_mailing_list:hover {
    background-color: #bdd6c0;
}
div.mailing_list {
    margin-left: auto;
    margin-right: auto;
    display: inline;
}
label.mailing_list {
    display: inline;
}
button.mailing_list {
    display: inline;
}
/*blog ---------------------------------------------*/
.grid_container_blog_layout {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'main main main main main aside'
        'footer footer footer footer footer footer';
    grid-gap: 10px;    
}
.grid_main_blog { 
    grid-area: main;
    padding: 0em;
}
.grid_aside_blog { 
    grid-area: aside;
    padding: 1em .5em 0em 0em;
}
.flexbox_container_blog {
    display: flex;
    flex-wrap: wrap;
}
.blog_post {
    border-style: double;
    margin: auto;
    width: 75%;
}
.blog_image {
    width: 80%;
    display: block;
    margin: auto;
    
}
section.blog_thumb {
    width: 33%;
    padding: 1em 0em 2em 0em;
}
article.post_text {
    width: 66%;
    padding: 1em 0em 2em 0em;
}
h2.blog {
    color: #58585a;
    font-size: 1.3em;
    font-weight: bold;
    display: inline;
}
h2.blog:hover {
    color: black;   
}
/*filtering--------------------------------*/
.container {
  margin-top: 20px;
  overflow: hidden;
}
.filterDiv {
  float: left;
  /* Hidden by default */
  display: none;
}
/* The "show" class is added to the filtered elements */
.show {
  display: block;
}
/*Buttons-----------------------------*/
/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: .5em;
  margin: .5em;
  cursor: pointer;
  color: #58585a;
}
/*button colors-------------*/
    /*Lego background image colors:  
        yellow: #e3eb79
        blue:  #5665e7
        teal:  #76e7eb
        red:  #d44647
        floor: #e7f1f6       */
    /*text color: #58585a*/
/*show all is default grey*/
.legoYellow {
    background-color: #f1f5b7;
}
.legoRed {
    background-color: #f7dee0;
}
.legoTeal {
    background-color: #c1f5f6;
}
.legoBlue {
    background-color: #eeeefb;
}
.legoFloor {
    background-color: #e7f1f6;
}
.defaultGrey:hover {
    background-color: #ddd;
}
.legoYellow:hover {
    background-color: #e3eb79;
}
.legoRed:hover {
    background-color: #ed9c9e;
}
.legoTeal:hover {
    background-color: #76e7eb;
}
.legoBlue:hover{
    background-color: #cEcef8;
}
.legoFloor:hover{
    background-color: #b2d6e6;
}
/* Add a dark background to the active button */
.btn.active {
  background-color: #666;
  color: white;
}
/*blog single page------------------------------------------------------*/
.flexbox_container_blog_page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
/*blog video page formating----------------*/
article.blog_page {
    margin-left: auto;
    margin-right: auto;
    display: inline;
}
div.blog_page_video {
    padding-top: 1em;
    padding-bottom: 2em;
}
h1.blog_page {
    font-size: 2.3em;
}
/*blog image page formating--------------*/
img.blog_page_image {
    width: 100%;
    padding-bottom: 2em;
}
.image_text {
    width: 60%;
    margin: auto;
}
/*blog animations page formating---------*/
.grid_container_animation_layout {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'main main main main aside aside'
        'footer footer footer footer footer footer';
    grid-gap: 0px;    
}
.flexbox_container_animation_page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
h1.animation {
    padding-left: 1em;
}
img.animation {
    width: 100%;
    /*height: 100%;*/
    padding: 2.9em 0em 0em 0em;
    margin: 0em;
}
#sketch_holder {
    padding: 2em;
}
div.animation_container {
    width: 100%;
}
/*#title_art {
  display: inline;
  padding: 2em;
  width: 100%;
}*/
.animation_layout_wrapper {
    width: 70%;
    margin: 0 auto;
    background-color: white;
}
div.legend {
    margin-left: 2.5em;
    margin-right: 25em;
    padding: .5em 1em .5em 1em;
    outline: 2px solid;  
}
p.legend {
    line-height: .3em;
}
blockquote.animation {
    padding: .5em 0em .5em 0em;
}

/*Flexbox for Footer---------------------------------------------*/
.flexbox_container_footer {
    display: flex;
    padding: 2em;
    /*to mainain space between 2 flex containers and adjust space accordingly*/
    justify-content: space-between;  
}
/*Flexbox for Galleries-----------------*/
.flexbox_container_gallery {
    display: flex;
    flex-wrap: wrap;
}
img.gallery {
    width: 30%;
    height: 30%;
    padding: 1em;
}
article.intro {
    padding-left: 1em;
    color: #58585a;
}
h1.intro {
    font-size: 1.7em;
}
p.intro {
    font-size: 1.1em;
    max-width: 38em;
}
/*Functions on Gallery pages-----------------------------*/
/*Modal box--------------------*/
/*enlarges an image*/
#myImg {
  cursor: pointer;
  transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 1280px;
/*portrait*/
  /*height: 100%;
  max-height: 854px;*/
}
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}
@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/*Tabbed Gallery --------------*/
/*more than one image for a piece, thumbnail images click to view*/
/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
  text-align: center; 
}
/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}
.column img:hover {
  opacity: 1;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* The expanding image container */
.tab_gallery_main_image_container {
  position: relative;
  display: block;
}
#expandedImg {
  /*changing width:100%; to width:auto fixes Safari stretching portrait image but squishes aside*/
  width: 100%;
  max-width: 1280px;
  height:100%;
  max-height: 854px;
  padding: .6em;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.flexbox_container_individual_gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
/*Media Queries----------------------------------------------------------------------------*/
/*Largest Monitor/bigger than 20.5"/default styles 
  apply to devices 2055px and larger
  Styles we look at in Media Queries
        .general_layout_wrapper {
            width: 60%;
        }   
        ul.nav_menu {
            padding-top: .7em;
            font-size: 1.3em;
        }
        li {
            padding: 2em;
        }
        img.header_logo {
            width: 550px;
            /width: 2218px;
            height: 414px;/
            padding-top: .5em;
        }*/

/*Large Monitors----------------------------------------------------*/
/*2175 and smaller for Blog image pages*/
/*no need for adjustments on blog video page as text always matches video width*/
@media only screen and (max-width: 2175px) {
    .image_text {
    width: 80%;
    margin: auto;
    } 
}
/*apply to devices 2054 and smaller*/
@media only screen and (max-width: 2054px)  {
   img.header_logo {
    width: 490px;
    }
    li {
    padding: 1em;
    }
    .animation_layout_wrapper {
        width: 90%;
    }
}
/*Medium Monitor/20.5"--------------------------------------------- */ 
/*apply to devices 1800px and smaller*/
@media only screen and (max-width: 1800px) {
    .general_layout_wrapper, .general_layout_wrapper_read_artifacts {
        width: 70%;
    } 
}
/*SmallMmonitor ---------------------------------------------------*/
/*apply to devices 1491px and smaller*/
@media only screen and (max-width: 1491px) {
    ul.nav_menu {
        padding-top: .8em;
        }
    img.header_logo {
        width: 400px;
    }
    li {
        padding: 1em;
    }
    /*animation page resize*/
    .grid_container_animation_layout {
    grid-template-areas:
        'header header header header header header'
        'main main main main main main'
        'aside aside aside aside aside aside'
        'footer footer footer footer footer footer';
    }
    .flexbox_container_animation_page {
        justify-content: flex-start;
    }
    aside.animation {
        padding-left: 3.75em;
    }
}
/*Laptop 13" ---------------------------------------------------*/
/*apply to devices 1275px and smaller*/
@media only screen and (max-width: 1275px) {
       .general_layout_wrapper, .general_layout_wrapper_read_artifacts {
            width: 80%;
        }
        .blog_wrapper{
            width: 90%;
        }
       ul.nav_menu {
            font-size: 1.2em; 
            padding-top: 1.1em;
            }
        img.header_logo {
            width: 370px;
        }
        li {
            padding: .7em;
        }
        h1.homepage {
            font-size: 2em;
        }
        button.home_project {
            font-size: 1em;
            padding: .5em;
            margin: 0em 0em 1em 1em;  
        }
        /* Tabbed Gallery Responsive Adjustment for Portrait images*/
        #expandedImg {
          width: 100%;
          max-width: 764.95px;
          height:100%;
          max-height: 516.75px;
        }
 }
/*Tablet ---------------------------------------------------*/
/*apply to devices 921px and smaller*/
@media only screen and (max-width: 921px) {
        .general_layout_wrapper, .general_layout_wrapper_read_artifacts {
            width: 95%;
        }
        img.gallery {
            width: 100%;
            height: 100%;
            padding: 1em;
        }
        .grid_container_read_artifacts_layout {
            display: grid;
            grid-template-areas:
                'header header header header header header'
                'main main main main main main'
                'aside aside aside aside aside aside'
                'footer footer footer footer footer footer';
            grid-gap: 0px;    
        }
        blockquote.read_artifacts {
            margin-left: 2.5em;
        }
 }
/*Smaller Tablet -------------------------------------------*/
/*apply to devices 774 and smaller*/
/*hide nav links except logo with home link(first-child), show the hamburger icon/link that opens and closes mobile nav----------*/
@media screen and (max-width: 774px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;  
    }
    .topnav a.icon {
        float: right;
        display: block;
        }
     ul.nav_menu {
           float: none;
           text-align: center; 
            }
}
/*responsive class is added to topnav with js when user clicks hamburger icon.This class adjusts nav to display vert rather than horiz--*/
@media screen and (max-width: 774px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
    padding: .3em .3em 0em 0em;
    position: absolute;
    right: 0;
    top: 0;   
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
    a.icon {
         
    }
    .header_logo.active {
        float: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
    }
}
/*other styles---------------------------------------*/
@media screen and (max-width: 774px) {
    h1 {
        display: block;
    }
    h1.blog_page {
        font-size: 1.7em;
    }
    /*change the single page grid layout to stack for small screens*/
    .grid_container_single_page_layout {
        grid-template-areas:
            'header header header header header header'
            'main main main main main main'
            'aside aside aside aside aside aside'
            'footer footer footer footer footer footer';
    }
    article {
        padding-left: .5em;
    }
    /*contact and mailing list buttons*/
    #submit_contact {
        background-color: #bdd6c0;
    }
    #submit_mailing_list {
        background-color: #bdd6c0;
    }
    /*change blog to stack filters and posts for smaller screens*/
    .grid_container_blog_layout {
        display: grid;
        grid-template-areas:
            'header header header header header header'
            'aside aside aside aside aside aside'
            'main main main main main main'
            'footer footer footer footer footer footer';
        grid-gap: 10px;    
    }
    div.blog_filters {
        padding-left: 1em;
    }
    /*increase text div on blog image page*/
    /*no need for adjustments on blog video page as text always matches video width*/
        .image_text {
            width: 90%;
            margin: auto;
    } 
    /*for modal-------------------*/
    .modal-content {
    width: 100%;
    }
    .dropdown-content {
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
    background-color: #e0e0e0;
    padding: .5em 0em .5em 0em;
    }
    .dropdown-content a:hover {
    background-color: white;
    }
    /*mailing list form-----------*/
    label.mailing_list {
        display: block;
    }
    button.mailing_list {
        display: block;
    }
    /*read about artifacts--------*/
    img.read_artifacts {
        width: 100%;
        height: 100%;
        padding: 1em;
    }
    div.read_artifacts {
        width: 100%;
    }
    blockquote.read_artifacts {
    margin-left: 4em;
}
}
/*background image for everything but mobile------*/
@media screen and (max-width: 525px) {
    .general_layout_wrapper, general_layout_wrapper_read_artifacts {
       width: 100%; 
    }
    body {
       background-image: none;      
    }   
/*shrink logo to provide space for hamburger menu icon------*/
    img.header_logo {
        width: 300px;
    }  
/*fixes form breaking out of container on phone*/
    textarea {
        width: 100%;     
    }
}

/*Credits-----------------------------------------------------------*/
/*Responsive Navbar with Dropdown: https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
  Modal Images: https://www.w3schools.com/howto/howto_css_modal_images.asp
  Tab Gallery: https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp
  Filter Elements: https://www.w3schools.com/howto/howto_js_filter_elements.asp

 Helpful Resources:

 Center an Image Vertically and Horizonally with CSS:
 https://www.freecodecamp.org/news/how-to-center-an-image-in-css/

 Troubleshooting:
 stackoverflow.com

 Icons:
 https://www.w3schools.com/icons/fontawesome_icons_intro.asp

 Vimeo embed code settings: 
 https://www.youtube.com/watch?v=hzA_6jhJbmA