
/* 
	Стъпка 3
	Добавяне на глобални стилове
*/

* {
    font-size: : 12px;
    box-sizing: border-box;
}

body {
    font-family: Arial;
    padding: 10px;
    background-color: #9e9e9e30;
}

/* 
	Стъпка 4
	Стилизиране на заглавна част на страницата 
*/
.header {
    width: 80%;
    margin: 10px auto;
    padding: 1em;
    text-align: center;
    background-color: #00bcd4;
}

.header h1 {
    font-size: 3em;
}


/* 
	Стъпка 5
	Стилизиране на навигация 
*/

/* 
	Стилизиране на контейнер и хипервръзки на навигация 
*/
.nav{
    width: 80%;
    margin: 10px auto;
    padding: 1em;
    text-align: center;
    background-color: #4caf50;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(51, 51, 51, 0.3);
}

.nav ul li {
    float: left;
}

.nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 1.25em;
    text-decoration: none;
}

.nav ul li a:hover {
 	background-color: rgba(51, 51, 51, 0.5);
}


/* 
	Стъпка 6
	Стилизиране на главен контейнер на основно съдържание
*/
.main-container{
	background-color: #009688;
	width: 80%;
	margin: 10px auto;
}

/* 
	Премахване на флот ефекта преди и след виртуален ред
*/
.clearfix:before, .clearfix:after{
    content: " ";
    display: table;
    clear: both;
}

/* 
	Създаване на контейнер за колона, която се флотва от ляво на дясно
*/
.leftcolumn {   
    float: left;
    width: 20%;
}

.adv{
    background-color: #03a9f4;
    padding: 1.125em;
}

.img {
    background-color: #9e9e9e;
    width: 100%;
    padding: 1.5em;
}

.leftcolumn .adv + .adv, .rightcolumn .adv + .adv {
  margin-top: 0.5em;
}

/* 
	Стъпка 7
	Стилизиране на главен контейнер на основно съдържание

/* 
	Създаване на контейнер за централна колона, 
	която се флотва от ляво на дясно*/
.centercontent {   
    float: left;
    width: 60%;
    padding-left: 1em;
}

.cont {
    background-color: white;
    padding: 1.5em;
    height: 800px;
}

/* 
	Създаване на контейнер за дясна колона, 
	която се флотва от дясно на ляво
*/
.rightcolumn {
    float: right;
    width: 20%;
    padding-left: 1em;
}

/* 
	Стъпка 
	Стилизиране на главен контейнер на подзаглавна част - футър
*/ 

.footer {
    padding: 2.5em;
    text-align: center;
   	background-color: #f44336;
    width: 80%;
    margin: 10px auto;
}

.footer h1 {
    font-size: 2em;
}

.d1d3c5{
    animation-duration: 1s;
    animation-delay: 3s;
    animation-iteration-count: 5;
}

