/* --- --- Stylesheet --- ---*/

        *{
			box-sizing: border-box;
		}
        html{
			font-family: "Lucida Sans", sans-serif;
		}
		header, section, footer, aside, nav, main, article, figure{
			display: block;
		}
        h1{
			font-size: 32px;
			font-family: "Bradley Hand", cursive;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			font-stretch: normal;
			color: black;
		}
		h2{
			font-size: 24px;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			font-stretch: normal;
			color: black;
		}
		h3{
			font-size: 19px;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			font-stretch: normal;
			color: black;
		}
        a{
        }
		p{
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			font-stretch: normal;
			color: black;
		}
		img{
			width: 100%;
			height: auto;
		}
		video{
			width: 100%;
			height: auto;
		}
/* --- HEADER --- */
		header{
		background-color: #f1f1f1;
		color: #ffffff;
		text-align: center;
		padding: 20px;
		}
/* --- NAV --- */
		nav{
            background-color: red;
            text-align: center;
            padding: 0 0;
            margin: 0 0;
		}
        nav a{
            float: left;
			display: block;
			border: 1px solid #f1f1f1;
			text-align: center;
            text-decoration: none;
			color: #f1f1f1;
            background-color: #666;
			padding-top: 14px;
			padding-bottom: 14px;
        }
        nav a:hover:not(.active){
            background-color: #111;
        }
        nav a.active{
            background-color: cornflowerblue;
        }
        nav:after{
            content: "";
			display: table;
			clear: both;
        }
/* --- MAIN --- */
		main{
            width: 100%;
            text-align: center;
            background-color: #ffffff;
            
            padding-top: 0;
			padding-bottom: 0;
            padding-right: 0;
            padding-left:0 ;
            
			margin-top: 0;
            margin-bottom: 0;
            margin-right: 0;
            margin-left: 0;
		}
        main:after{
            content: "";
			display: table;
			clear: both;
        }
/* --- ARTICLE --- */
		article{
            width: 100%;
            text-align: left;
            border-radius: 25px;
            background-color: #ffffff;
            
            padding-top: 10px;
			padding-bottom: 10px;
            padding-right: 10px;
            padding-left: 10px;
            
			margin-top: 10px;
            margin-bottom: 10px;
            margin-right: 0;
            margin-left: 0;
		}
        article:after{
            content: "";
			display: table;
			clear: both;
        }
/* --- SECTION --- */
		section{
            width: 100%;
            text-align: left;
            border: 7px solid #ffffff;
            border-radius: 25px;
            background-color: #f1f1f1;
            
            padding-top: 10px;
			padding-bottom: 10px;
            padding-right: 14px;
            padding-left: 14px;
            
			margin-top: 0;
            margin-bottom: 0;
            margin-right: 0;
            margin-left: 0;
        }
        section:after{
            content: "";
			display: table;
			clear: both;
        }
/* --- FOOTER --- */
		footer{
		background-color: #f1f1f1;
		color: #ffffff;
		text-align: center;
		padding: 20px;
		}
/* ---  --- */
        .row:after{
			content: "";
			display: table;
			clear: both;
		}
/* ---  --- */
        [class*="col-"]{
			float: left;
		}
/* --- Responsive --- */
/* Extra small devices (phones) */
		[class*="col-"]{
			width: 100%;
		}
/* Small devices (portrait tablel and large phones) */
		@media only screen and (min-width: 600px){
			.col-a-1 {width: 8.33%;}
			.col-a-2 {width: 16.66%;}
			.col-a-3 {width: 25.00%;}
			.col-a-4 {width: 33.33%;}
			.col-a-5 {width: 41.66%;}
			.col-a-6 {width: 50.00%;}
			.col-a-7 {width: 58.33%;}
			.col-a-8 {width: 66.66%;}
			.col-a-9 {width: 75.00%;}
			.col-a-10 {width: 83.33%;}
			.col-a-11 {width: 91.66%;}
			.col-a-12 {width: 100.00%;}
		}
/* Medium devices (landscape tablets) */
		@media only screen and (min-width: 768px){
			.col-b-1 {width: 8.33%;}
			.col-b-2 {width: 16.66%;}
			.col-b-3 {width: 25.00%;}
			.col-b-4 {width: 33.33%;}
			.col-b-5 {width: 41.66%;}
			.col-b-6 {width: 50.00%;}
			.col-b-7 {width: 58.33%;}
			.col-b-8 {width: 66.66%;}
			.col-b-9 {width: 75.00%;}
			.col-b-10 {width: 83.33%;}
			.col-b-11 {width: 91.66%;}
			.col-b-12 {width: 100.00%;}
		}
/* Large devices (desktops) */
		@media only screen and (min-width: 992px){
            .col-c-1 {width: 8.33%;}
			.col-c-2 {width: 16.66%;}
			.col-c-3 {width: 25.00%;}
			.col-c-4 {width: 33.33%;}
			.col-c-5 {width: 41.66%;}
			.col-c-6 {width: 50.00%;}
			.col-c-7 {width: 58.33%;}
			.col-c-8 {width: 66.66%;}
			.col-c-9 {width: 75.00%;}
			.col-c-10 {width: 83.33%;}
			.col-c-11 {width: 91.66%;}
			.col-c-12 {width: 100.00%;}
		}
/* Extra large devices (large desktops) */
		@media only screen and (min-width: 1200px){
            .col-d-1 {width: 8.33%;}
			.col-d-2 {width: 16.66%;}
			.col-d-3 {width: 25.00%;}
			.col-d-4 {width: 33.33%;}
			.col-d-5 {width: 41.66%;}
			.col-d-6 {width: 50.00%;}
			.col-d-7 {width: 58.33%;}
			.col-d-8 {width: 66.66%;}
			.col-d-9 {width: 75.00%;}
			.col-d-10 {width: 83.33%;}
			.col-d-11 {width: 91.66%;}
			.col-d-12 {width: 100.00%;}
		}