/* Type Scale: Perfect Fourth

3.157em
2.369em
1.777em
1.333em
1em
.75em
.563em
.422em

*/

/* Colors

#ffffff
#F0F0F0
#E6E6FF
#DFF8BC
#C8EEAD
#B0E16B
#3BB18E
#3D3C3C

*/

/* Mobile First Styling for 300px Width */

/* MEDIA QUERY 1 */

/* Style tab links */
.tablink {
    background-color: #555;
    color: #fff;
    border: none;
    border-radius: 20px 0px 0px;
    outline: none;
    cursor: pointer;
    padding: 14px;
    font-size: 17px;
    width: 25%;
}

#defaultOpen{
    background-color:  red; 
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
   color: #fff;
   display: none;
   padding: 100px 20px;
   height: 100%;
}

input {
    display: none;
}

.tabs-Full{
    display: none;
}

#tabContent {
  display:none;
}

.tabs label {
    width: 25%;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: 'alegreya_sans_scbold', georgia, sans-serif;
    color: #3D3C3C;
    text-align: center;
    background-color: rgba(191,191,191,1);
    border-radius: 25px 0px 0px 0px;
    cursor: pointer;
    transition: .2s;
    float: left;
    z-index: 2;
}

.tabs label:hover {
    opacity: .5;
}

#fiction:checked ~ .tabs [for='fiction'],
#nonfiction:checked ~ .tabs [for='nonfiction']{
  color: #EA0029;
  background-color: #F0F0F0;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(161,160,160,1);
    -moz-box-shadow: 0px 0px 4px 0px rgba(161,160,160,1);
    box-shadow: 0px 0px 4px 0px rgba(161,160,160,1);
    opacity: 1;
}

#fiction:checked ~ .uno,
#nonfiction:checked ~ .dos{
    display: inline-block;
    width: 100%;
    background-color: #F0F0F0;
    color: #3D3C3C;
}

.introContainer {
    margin-top: 50px;
    padding: 20px;
}

.introContainer span{
    color: #EA0029;
}

.introContainer h1{
    margin-bottom: 20px;
    text-align: center;
}

.introContainer p{
    text-align: center;
}

.portfolioContainer{
    max-width: 2100px;
    margin: auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
}

.portfolioContainer figure{
    margin: 0 auto;
    max-width: 200px;
    padding: 20px;
}

.portfolioContainer img{
    width: 100%;
    box-shadow: 8px 5px 10px #888;
}

/* MEDIA QUERY 2 */
@media screen and (min-width: 400px) and (max-width: 770px){

    

}

/* Type Scale: Perfect Fourth

3.157em
2.369em
1.777em
1.333em
1em
.75em
.563em
.422em

*/

/* Colors

#ffffff
#F0F0F0
#E6E6FF
#DFF8BC
#C8EEAD
#B0E16B
#3BB18E
#3D3C3C

*/

/* MEDIA QUERY 3 */
@media screen and (min-width: 770px){
    
    .portfolioContainer figure{
        max-width: 200px;
    }
    
}


/* MEDIA QUERY 4 */
/* Mobile First Styling for 1050px Width */

@media screen and (min-width: 1400px){
    
    
}


/* ALL LINK EFFECTS */

/* Type Scale: Perfect Fourth

3.157em
2.369em
1.777em
1.333em
1em
.75em
.563em
.422em

*/

/* Colors

#ffffff
#F0F0F0
#E6E6FF
#DFF8BC
#C8EEAD
#B0E16B
#3BB18E
#3D3C3C

*/


/* Links

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

*/

/* ALL LINK EFFECTS */