. The number of columns inside a row should always add up to 12: */ .row { display: flex; flex-wrap: wrap; width: 100%; height: auto; display: -ms-flexbox; /*IE10*/ display: -webkit-flex; /* Safari */ flex-wrap: wrap; -ms-flex-wrap: wrap; /*IE10*/ justify-content: space-around; align-content: ; padding: 0 5px; border: 2px solid darkgoldenrod; } /* W3Schools - Create two equal columns tht sit next to each other */ /* Trying this for Photo Gallery page - it works */ .column { -ms-flex: 50%; /* IE 10 */ flex: 50%; max-width: 50%; padding: 0 4px; } .column img { width: 100%; margin-top: 8px; vertical-align: middle; border: black .5em solid; } /* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 800px) { .column { flex: 50%; max-width: 50%; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { flex: 100%; max-width: 100%; } } /* The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow: */ .row::after { content: ""; clear: both; display: table; /* was block */ } p { line-height: 1.6rem; padding: 0.4em 0 0.4em 0; } .indent { text-indent: 15px; } .justify { text-align: justify; } /* THIS KEEPS THE FROM APPLYING THE

INDENT */ span { text-indent: 0px; } h1 { } h2 { font-size: 110%; } h3 { font-size: 120%; padding: 10px; background-color: black; color: red; } h3a { padding: 10px; color: orange; } /* USED AS TITLE FOR ALL PAGES */ h4 { font-family: 'Berkshire Swash', cambria, garamond; color: darkcyan; font-size: 200%; paddding: 10px; font-weight: 500; text-decoration: none; } a:hover h4 { color: gold; font-weight: 300; background-color: gray; padding: 2px; } h4a { font-family: 'Berkshire Swash', cambria, garamond; color: aqua; font-size: 200%; font-weight: 500; text-decoration: none; } h4b { font-family: 'Berkshire Swash', cambria, garamond; color: firebrick; font-size: 200%; font-weight: 500; text-decoration: none; } h5 { color: red; font-size: 120%; font-family: ; line-height: 1.5em; font-weight: lighter; } h6 { font-family: 'tangerine', cursive, cambria; /* font weight is controlled via google fonts link */ font-size: 40px; text-shadow: 4px 4px 4px #aaa; color: darkcyan; } .by { font-size: 100%; color: #C2185B; } a:link { color: #00ACC1; /*was aqua */ text-decoration: none; } a:visited {color: aqua;} a:hover {color: red;} a:active {color: aqua;} .active {color: red;} a:link .kids-link { text-align: center; color: deeppink; background: black; } a:hover .kids-link { color: gold; } ol { line-height: 1.5em; } ol, ul { list-style-type: disc; list-style-position: inside; padding-left: 15px; } li.mem { list-style-type: none; line-height: 1.2em; padding-top: 10px; } ul.square { list-style-type: square; padding-left: 20px; /* this indents the li */ } li.out { list-style-position: outside; } ul .familytree { list-style-type: circle; } ul > li { list-style-position: inside; line-height: 1.6em; padding-left: 0px; } /* ASSIGN GRID INSTRUCTIONS TO OUR PARENT GRID CONTAINER, MOBILE-FIRST (hide the sidenav) */ .grid-container { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; /* 'was 1fr 1fr 1fr'- auto refers to the height of header / footer area */ grid-template-areas: 'header' 'main' 'footer'; height: auto; /* was 100vh */ grid-auto-flow: dense; border: red 0px solid; } .menu-icon { position: fixed; /* Needs to stay visible for all mobile scrolling */ display: flex; top: 5px; left: 10px; align-items: center; justify-content: center; background: linear-gradient(lime,turquoise,aqua); /* was #DADAE3 */ border-radius: 50%; z-index: 1; cursor: pointer; padding: 12px; } /* GIVE EVERY CHILD ELEMENT IT'S GRID NAME */ .header { grid-area: header; grid-auto-rows: minmax(125px, auto); display: fle; /*was flex*/ margin: 10px; max-width: 100%; align-items: center; justify-content: center; /* was - space-between; */ align-content: center; padding: 0 16px; background: ; /* was #000 linear-gradient(black,red) */ border: 3px whitesmoke outset; } /* MAKE ROOM FOR THE MENU ICON ON MOBILE */ .header__search { margin-left: 20px; /* was margin-left: 42px */ margin-right: auto; padding-right: 2px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; /* was center */ justify-content: space around; /*was space-between */ } @media only screen and (max-width: 900px) { .header__search { flex-wrap: wrap; margin-right: 20px; } .header {background: ;} } .sidenav { grid-area: sidenav; display: flex; flex-direction: column; height: 100%; width: 240px; position: fixed; overflow-y: auto; transform: translateX(-245px); transition: all .6s ease-in-out; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08); z-index: 2; /* Needs to sit above the hamburger menu icon */ background-color: #000; } .sidenav.active { transform: translateX(0); } .sidenav__close-icon { position: absolute; visibility: visible; top: 8px; right: 12px; cursor: pointer; font-size: 25px; color: #ddd; } .sidenav__list { padding: 0; margin-top: 55px; list-style-type: none; overflow-y: auto; /* added 7/15/20 */ } .sidenav__list-item { padding: 10px 10px 10px 10px; /* this is spacing between/around links */ color: #ddd; font-size: 100%; } .sidenav__list-item:hover { background-color: rgba(255, 255, 255, 0.2); cursor: pointer; } /* Sticky menu that floats on the left side */ .icon-bar { position: fixed; top: 50%; background-color: black; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); margin-left: -20px; padding: 0 5px; z-index: 9; /*this keeps the menu on top of the side navigation */ } .icon-bar a { display: block; text-align: center; padding: 2px; transition: all 0.3s ease; color: white; font-size: 14px; } .icon-bar a:hover { background-color: darkcyan; } .avatar { vertical-align: middle; opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ width: 75px; height: 105px; border-radius: 50%; } /* Mobile styles, 750px breakpoint */ @media only screen and (max-width: 46.875em) { /* Hide the the menu icon when the hamberger icon is visible */ .icon-bar { visibility: hidden; } } .main { grid-area: main; background-color: #000; border: 0.5em tan solid; } .main-header { display: flex; justify-content: ; align-items: ; margin: 20px; padding: 10px; /*was 20px */ max-width: ; height: auto; background-color: #f6f6f6; /* was #e3e4e6 */ color: slategray; border: 2px silver solid; } /* IMAGE SIZE WILL SCALE DOWN BUT NOT UP */ img { display: inline-flex; /* was inline-block 8/12/2025 */ margin: 0; padding: 10px; max-width: 100%; /* using width: 100% makes the image take up the whole space in its container */ height: auto; } .img-left { float: left; } .img-right { float: right; padding: 0; } .clearfix { overflow: auto; } .clear { clear: both; } .main-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); min-height: 0; min-width: 0; /* needed for firefox */ grid-auto-rows: auto; /* was 94px */ grid-gap: 20px; margin: 20px; background-color: whitesmoke; /* was gray */ } .overviewcard { display: flex; align-items: center; justify-content: space-around; /*was space-around */ padding: 10px; gap: 1rem; margin-bottom: 5px; background-color: #f2f2f2; border: 1px green solid; } .overviewcard__icon { width: 20%; border: 1px green solid; float: left; } .overviewcard__info { width: 70%; border: 1px red solid; float: right; } .overviewcard__memorial { background: url(backgrounds/white-lace-edge3.png) repeat-y; background-color: #e1e1e1; padding: 25px 25px 35px 65px; margin 0; color: darkred; font-size: 14px; max-width: 75%; border: 10px solid; border-image-slice: 1; border-width: 15px; border-image-source: linear-gradient(to left, #ae8625, #f7ef8a, #d2ac47, #edc967); } /* USED ON FAMILY PAGE AND SERVICE PAGE TO KEEP FROM MAKING TWO COLUMNS */ .overviewcard__familytree { width: 95%; margin: 0 auto; padding: 20px; } /* ENLARGE THE SIZE FOR SMALLER SCREENS */ @media (max-width: 1000px) { .overviewcard__memorial { max-width: 100%; } } .main-cards { column-count: 1; grid-template-columns: ; justify-content: start; column-gap: 20px; margin: 20px; border: 1px solid purple; } .card { display: flex; flex-direction: column; align-items: center; width: 100%; background-color: ; /* #82bef6 */ margin-bottom: 20px; -webkit-column-break-inside: avoid; padding: 24px; box-sizing: border-box; } .shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* was 10px 10px 5px #ccc */ -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color: gainsboro; border: 1px solid whitesmoke; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; } /* FORCE VARYING HEIGHTS TO SIMULATE DYNAMIC CONTENT */ .card:first-child { height: auto; } .card:nth-child(2) { height: auto; } .card:nth-child(3) { height: auto; } .card_info { width: 70%; border: 0px red solid; } .card_icon { width: 20%; } .footer { grid-area: footer; display: flex; grid-auto-rows: auto; /* was minmax(125px, auto) */ align-items: ; justify-content: ; padding: 10px; margin: 10px; font-size: small; background-color: #cccccc; color: darkcyan; border-top: 0.3em ridge darkcyan; } .footer a:link { color: red; font-weight: 500; } .footer a:hover { color: gold; background-color: black; } /* NON-MOBILE STYLES, 750px BREAKPOINT */ @media only screen and (min-width: 46.875em) { /* Show the sidenav */ .grid-container { grid-template-columns: 240px 1fr; grid-template-areas: "sidenav header" "sidenav main" "sidenav footer"; } .sidenav { position: relative; transform: translateX(0); } .sidenav__close-icon { visibility: hidden; } .menu {display: inline;} } /* MEDIUM SCREENS BREAKPOINT (1050px) */ /* was 65.625em */ @media only screen and (min-width: 1050px) { /* Break out main cards into two columns */ .main-cards { column-count: 2; } } /*BEGIN SPECIFIC TO THIS SITE DESIGN */ /* this pertains to HOME PAGE */ .bg-img { background: url(backgrounds/tree-bg.gif) repeat-x; background-color: #f6f6f6; /* for some reason this controls the header background color too */ } .img-house { width: 50%; /* if not 50% the img is huge */ max-width: 50%; height: auto; } .home-photo-details { display: grid; grid-template-columns: 1fr 50%; /* this keeps the image inside the grid */ grid-auto-rows: auto; grid-gap: 0.75em; grid-template-areas: "description home-photo"; width: 100%; margin: 0 auto; padding: 5px; border: 0px gray solid; background-color: ; } @media screen and (max-width: 1000px) { .home-photo-details { grid-template-columns: 100%; grid-template-areas: "home-photo" "description"; background-color: white; object-fit: ; } } .home-photo { grid-area: home-photo; overflow: hidden; background-color: ; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7); object-fit: ; /* was contain */ } .home-photo img { display: block; max-width: 100%; height: auto; border: 2px silver solid; border-radius: 25px; /* this makes 4 corners rounded */ } .description { grid-area: description; justify-self: center; /* aligns content along row axis */ align-self: center; /* aligns content along column axis */ margin: 0 auto; padding: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7); background-color: gray; color: white; } /* END HOME PAGE */ /* THIS AREA IS FROM W3SCHOOLS RESPONSIVE IMAGE GALLERY */ div.gallery { border: 0px solid red; vertical-align: top; margin: 0 auto; padding: 0px; } div.gallery:hover { border: 0px solid #777; } div.gallery img { display: block; /* these two lines center the image in the gallery */ max-width: 100%; height: auto; padding: 10px; } div.desc { padding: 5px; text-align: center; line-height: 1.2em; color: red; font-size: small; font-weight: bold; } .responsive { min-width: 100%; /* these two lines added 4/28/20 */ max-width: 100%; /* used on club pages */ height: auto; padding: 4px; } .responsive img { float: left; /* this wraps text around image */ } @media only screen and (min-width: 960px) and (max-width: 1024) { .responsive { max-width: 100%; height: auto; margin: 0px 6px; } .header {background: ;} } @media only screen and (min-width: 700px) and (max-width: 960px) { .responsive { width: 49.99999%; margin: 6px 0; } .header {background: ;} } @media only screen and (min-width: 501px) and max-width: 700px) { .responsive { width: 49.999%; margin: 6px 0; } .header {background: ;} } @media only screen and (min-width: 401px) and (max-width: 500px) { .responsive { width: 35.99999%; } .header {background: ;} } @media only screen and (max-width: 400px) { .responsive { width: 35.9999%; } .header {background: ;} } .clearfix:after { content: ""; display: table; clear: both; } /* End w3schools responsive image gallery */ /* RESPONSIVE TABLE */ table { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; width: 100%; } table tr { background-color: #f2f3f4; /* was f8f8f8 */ color: gray; border: 1px solid #ddd; padding: .35em; } table th, table td { padding: .625em; text-align: center; } table th { background-color: gray; color: white; } tfoot td { background-color: black; color: white; } @media screen and (max-width: 600px) { table thead, { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /*am using this because the format above doesn't hide the header when resized */ table thead { display: none; } table tr { border-bottom: 3px solid #ddd; display: block; } table td { border-bottom: 1px solid #ddd; display: block; text-align: right; } table td::before { content: attr(data-label); float: left; } table td:nth-child(1) { background-color: silver; color: darkred; } table tfoot td:nth-last-of-type(1) { background-color: black; color: white; } } /* END RESPONSIVE TABLE */ /* three column responsive grid */ /* Family Tree page */ .col_3 { max-width: 100%; margin: 10px; padding: 0 20px; width: 100%; display: grid; /* Define Auto Row size */ grid-auto-rows: auto; /*Define our columns */ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 0.6em; } article { border-radius: 10px; padding: 20px; color: #fff; } article:nth-child(odd) { background-color: darkcyan; /*was #55BBE9*/ } article:nth-child(even) { background-color: #afbe29; /* was #afbe29 */ } /* ***** END FAMILYTREE Page ***** */ /* **** FLEX-GRID-COLUMNS **** */ /* from: https://jsfiddle.net/moshequ/nyr6rtbh/ */ .flex-grid { display: flex; flex-flow: wrap; } .flex-grid > div { height: auto; } .flex-grid img { max-width: 100%; height: auto; } .col-1 {flex: 0 0 8.3333%} .col-2 {flex: 0 0 16.6666%} .col-3 {flex: 0 0 25%} .col-4 {flex: 0 0 33.3333%} .col-5 {flex: 0 0 41.6666%} .col-6 {flex: 0 0 50%} .col-7 {flex: 0 0 58.3333%} .col-8 {flex: 0 0 66.6666%} .col-9 {flex: 0 0 75%} .col-10 {flex: 0 0 83.3333%} .col-11 {flex: 0 0 91.6666%} .col-12 {flex: 0 0 100%} [class*="col-"] { margin: 0 0 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media only screen and (max-width: 1100px) { .flex-grid { display: block; } .flex-grid img { max-width: 100%; height: auto; margin: auto; } } /* ******* End Grid Columns ******** */ /* MISC FORMATS */ figure { padding: 4px; margin: 5px; } figcaption { margin: 5px; } .center { text-align: center; } .center img { margin: 0 auto; } .center-div { display: flex; flex-wrap: wrap; justify-content: center; align-content: space-between; align-items: center ; border: 0px blue solid; } /* used on Reunions page */ .reunion-bg { display: flex; background-image: url(backgrounds/the_whole_gang-1983a.jpg); background-size: cover; background-repeat: no-repeat; background-position: ; justify-content: center; align-items: flex-end; height: 200px; } /* this allows image to fill space */ @media screen and (max-width: 1000px) { .reunion-bg { background-size: contain; } } .hide { display: none; } .lace-bg { background: url(backgrounds/lace-natural.jpg) repeat; background-color: red; } .invite-area { display: grid; grid-template-columns: 1fr 60% 1fr; grid-template-rows: auto; grid-template-areas: "icons invite tshirts"; grid-gap: 6px; justify-content: enter; margin: 0px; border: 2px silver ridge; width: 95%; background-color: whitesmoke; } /* these are the pics on the reunion page */ .icons { grid-area: icons; justify-self: end; /* aligns content along row axis */ border: 0px pink solid; } .icons > img { display: block; max-width: 100%; height: auto; } .invite { grid-area: invite; background-color: ; justify-self: center; /* aligns content along row axis */ align-self: center; /* aligns content along column axis */ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7); border: 0px red solid; } .invite > img { max-width: 100%; height: auto; } /* this used around reunion invitation */ .border-gradient { border: 12px solid; border-image: linear-gradient(to bottom right, red,white,green,white,royalblue,white,yellow,white,white,midnightblue 100%); -moz-border-image: -moz-linear-gradient(top left, red 0%,green,royalblue,yellow, white,midnightblue 100%); -webkit-border-image: -webkit-linear-gradient(top left, red 0%,green,royalblue,yellow, white,midnightblue 100%); border-image-slice: 1; } .tshirts { grid-area: tshirts; justify-self: start; /* aligns content along row axis */ border: 0px silver solid; } .tshirts > img { max-width: 100%; height: auto; } @media screen and (max-width: 1000px) { .invite-area { grid-template-columns: 1fr; grid-template-areas: "tshirts" "invite" "icons"; } .icons { display: flex; flex-wrap: wrap; justify-content: center; } .tshirts { display: flex; flex-wrap: wrap; justify-content: center; } } /* following used on familytree page */ .buried { color: #068696; text-indent: 20px; } .married { color: tan; font-weight: normal; } /* used on familytree page */ .wrapper { margin: 0 auto; padding: 20px; width: 95%; background-color: #e8e8e8; border-radius: 15px; font-size: 100%; color: ; } .child, .child-step { text-indent: 10px; } .child { color: #00796B; /*was 3333ff lightseagreen*/ } .grand, .grand-step { text-indent: 30px; line-height:; } .grand { color: #0033ff; /* was cc3300 steelblue*/ } .great, .great-step { text-indent: 50px; line-height: ; } .great { color: firebrick; /* was 008800 */ } .greatgreat, .greatgreat-step { text-indent: 70px; white-space: ; } .greatgreat { color: darkviolet; /* was a366a3 */ } .greatgreatgreat, .greatgreatgreat-step { text-indent: 90px; white-space: ; } .greatgreatgreat { color: #D7Ad00; /*golden glaze*/ } .cutegirl { background-image: url(images/girl_cute200.gif); background-repeat: no-repeat; background-position: center top; color: maroon; } .cuteboy { background-image: url(images/boy_cute200.gif); background-repeat: no-repeat; background-position: center top; color: #ff4d4d; /*steelblue or salmon or orangered */ } /* END familytree */ /* HISTORY page */ .history-bg { background: url("backgrounds/grayshadow.gif") repeat; color: #615F81; } /* END History */ /* POEMS */ .poems-bg { background: url("backgrounds/grayshadow2.gif") repeat; color: #615F81; } .pajamas-bg { background: url("backgrounds/polkadot-pajamas.gif") repeat-y; color: #3F51B5; /* was #5E35B1 */ } .dolly-bg { background: url("backgrounds/raggety.gif") repeat-y; color: #8B0000; font-weight: ; } .phoebe-bg { display: flex; background: url("backgrounds/blackberries.jpg") repeat; justify-content: space-around; border: 0px blue solid; } .transparent-box { width: 100%; margin: 1.5em; padding: 0.9em; text-align: center; background-color: white; color: darkmagenta; font-weight: bold; opacity: 0.7; } .border-left { border-left: 2px white solid; } /* this make image more transparent on smaller screens */ @media screen and (max-width: 1000px) { .pajamas-bg { font-weight: bold; } .dolly-bg { background: url("backgrounds/raggety2.gif") repeat-y; font-weight: 500; color: #8B0000; } .transparent-box { margin: 0 auto; padding: 0.9em; width: 100%; } } /* END POEMS */ /* RECIPIES */ .recipies-bg { background: url("backgrounds/baking2c.png") no-repeat; background-size: cover; color: ; } .grits-bg { background: url("backgrounds/cheese-grits2.png") no-repeat; background-color: goldenrod; color: darkred; } .mushroom-bg { background: url("backgrounds/stuffed-mushroom.png") no-repeat; background-color: darksalmon; color: white; } .hashbrown-bg { background: url("backgrounds/cheesy-potato-casserole.png") no-repeat; background-color: lightblue; color: darkblue; } .fruitcake-bg { background: url("backgrounds/fruitcake.png") no-repeat; background-color: indianred; color: darkred; } /* END RECIPIES */ /* following used on SERVICE page */ .service-bg { background-image: linear-gradient(red, blue); background-repeat: no-repeat; background-size: contain; background-position: left; color: #615F81; } .service-b { display: flex; /* was flex */ max-width: 100%; height: auto; background: url(service/eagle-flag.jpg); background-repeat: no-repeat, no-repeat; background-size: contain; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: left; min-width: auto ; /* was auto */ min-height: auto; /*was auto */ justify-content: center; border: 2px red solid; } .serve-head-bg { background: url(service/eagle-flag-banner.jpg); background-repeat: repeat; background-size: 100%; } .serve-card-bg { background-color: blue; } /* END SERVICE AREA */ .bold { font-weight: 600; } .italic { font-style: italic; } .gold { color: gold; } .turquoise { color: turquoise; } .blue { color: cornflowerblue; } .blue-bg { background-color: cornflowerblue; } .navy { color: navy; } .white { color: white; } .red { color: red; } .darkred { color: darkred; } .orange { color: orange; } .sienna { color: sienna; } .green { color: green; } .lightpink { color: lightpink; font-family: cursive; } .hotpink { color: hotpink; } .deeppink { color: deeppink; } .boy { color: cornflowerblue; font-weight: 500; } .girl { color: hotpink; font-weight: 500; } .gray-bg { background-color: gray; } .black-bg { padding: 5px; background-color: black; color: white; } .golden-bg { background-color: goldenrod; color: oldlace; } .alice-bg { background-color: red; color: black; } .onalee-bg { background-color: green; color: white; } .cathy-bg { background-color: lightblue; color: black; } .joe-bg { background-color: yellow; color: black; } .ernestine-bg { background-color: #fff; color: black; } .georgia-bg { background-color: black; color: white; } .right { float: right; } .left { float: left; } /* following code for image modal to view larger cousin chart */ /* CURRENTLY NOT BEING USED */ #modal-img1 { border-radius: 5px; cursor: pointer; transition: 0.3s; } #modal-img1: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: 80%; max-width: 700px; } /* 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; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } /*End Image Modal area */ /* USED on Cousin-Chart.htm */ .cousin { display: block; padding: 15px; margin: 20px; max-width: 736px; line-height: 1.5em; }