/* Border box declaration
https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
  box-sizing: border-box;
  background-color: #C2C2C2; /* Aquamarine */
}
/* inherit border-box on all elements in the universe and before and after
 */
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
	font-family: Arial, Geneva, sans-serif;
  color: #3B3B3B;
}
footer {
  margin: 20px auto 20px auto;
  font: normal normal bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: silver;
}
ol {
  text-align: left;
}

article {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}
article:hover {
    background-color: #BFFFA5; !important;
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-10px);
    color: #000000;
}
p {
  text-align: left;
}

/* Links */
a {
	color: #3B3B3B;
  font-weight: bold;
}
a:hover { color: #fd6350; text-decoration: none; }
a.button { transition: all 0.2s ease; }
a.button:hover {
    background-color: #fd6350; !important;
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-10px);
}

.wrapper {
    display: grid;
    grid-gap: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #C2C2C2;
}

div img {
	width: 100%;
	max-width: 225px;
}
img:hover { color: #fd6350; text-decoration: none; }
img:transparent {
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

/* grid system -- mobile first! */
/* flex contatiner */
/*
.row {
    display: flex;
    flex-flow: row wrap;
    padding: 20px;
}*/

/* attribute selector to give some margin between columns and apply styles to flex items */

/*
[class*="col-"] {
	margin-left: 4%;
	flex: 0 0 92%;
}*/


/* CSS Animations*/
@keyframes fade-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.fade1 { animation: 1s 1 fade-in;}
.fade2 { animation: 2s 1 fade-in; }
.fade3 { animation: 10s 1 fade-in; }

/* Interactive Elements*/
/* Hide inputs*/
input { display:none; }
/* Make label look clickable*/
label { cursor: pointer; }
/* Hide Slides*/
.slide { display: none; }
/* Show the cecked slides*/
#slide1:checked ~ .slide1,
#slide2:checked ~ .slide2,
#slide3:checked ~ .slide3 {
    display: block;
}

#circle {
  background: blue;
  width:50px;
  height:50px;
  border-radius:50%;
}

/* Add background colors to see how much space each column is taking */
.col-header,
.col-1r1c1,
.col-2r2c1,
.col-3r3c1,
.article-video {
	background-color: #EAEAEA; /* Deep Cyan*/
}

/* Moblie Screen Sizes */
@media only screen and (min-width: 480px)  {
    .col-header{
        grid-row: 1 / 2;
    }
    .col-1r1c1 {
        grid-row: 2 / 3;
    }
    .article-video {
        grid-row: 3 / 4;
    }
    .col-2r2c1 {
        grid-row: 4 / 5;
    }
    .col-3r3c1 {
        grid-row: 5 / 6;
    }
}


/* Tablet Landscape Screen Sizes */
@media only screen and (min-width: 768px) {
    .col-header{
        grid-row: 1 / 2;
    }
    .col-1r1c1 {
        grid-row: 2 / 3;
    }
    .article-video {
        grid-row: 3 / 4;
    }
    .col-2r2c1 {
        grid-row: 4 / 5;
    }
    .col-3r3c1 {
        grid-row: 5 / 6;
    }
}

/* Desktop screen Sizes */
@media only screen and (min-width: 1024px) {
    .col-header{
        grid-row: 1 / 2;
    }
    .col-1r1c1 {
        grid-row: 2 / 3;
    }
    .article-video {
        grid-row: 3 / 4;
    }
    .col-2r2c1 {
        grid-row: 4 / 5;
    }
    .col-3r3c1 {
        grid-row: 5 / 6;
    }
}