@import url('https://use.fontawesome.com/releases/v5.4.2/css/all.css');

* {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

 body {
    font-size:14px;
    font-family: “Roboto“,sans-serif;
}


header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/milling.jpg) ;
    background-size: cover;
    color: white;
    text-align: center;
       }



nav {
    text-align: right;
    position: relative;
  
}

nav ul, .divaddress {
    position: relative;
    text-align: center;
    font-size:18px;
}

nav ul li,.address {
    display: inline-block;
    padding: 20px 10px ;
}
nav ul li a { color:white;
    text-decoration: none;
}
 .divaddress ul li a {
    color: #FA6A2E;
    text-decoration: none;
    }
nav ul li a:hover {
    color: #FA6A2E;
}
.divaddress ul li a:hover {
    color:white;
}

a:visited {
    color: blue;
}

nav li:first-child {
   margin-right: 800px;
 }


section.activity{

    margin: 150px 0 50px 0;
}

.div-urge {
    max-width: 90%;
    display: inline-block;
}

p.urge {
    font-size: 2.5em;


}

article>h1 {
    text-align: center;
    Margin-top:30px;

}

article>h2 {
    text-align: center;
    text-transform: uppercase;
    padding-bottom:30px;

}

header article {
    display: inline-block;
    max-width: 20rem;
    text-align: left;
    position: relative;
    font-size: 0.9em;
    vertical-align: top;
    min-height: 130px;
    box-sizing: border-box;
    padding-right:30px;
    padding-bottom:20px;
    margin-bottom:20px;

   }

header> article>h1 {
    padding-bottom: 30px;

}

main {
    text-align: center;


}
.opinion-section {
    display: inline-block;
    margin:30px auto;
    width:90%;
    position: relative;

}
main article {
    display: inline-block;
    max-width: 20rem;
    text-align: left;
    position: relative;
    font-size: 0.9em;
    vertical-align: top;
    min-height: 130px;
    box-sizing: border-box;
    padding-right:30px;
}
p.sentiment {
    font-size: 1.9em;
    font-weight: 600;
    margin: 30px auto;
    text-align:center;
}

p.sentiment-autor, p.apart{
    text-align:center;
    line-height: 1.8em;
   font-size: 16px;
}

.opinion-text {
    margin: auto 10px;
    min-width: 350px;
}
 hr {
     margin: 30px auto;
 }

.opinion-text-main {
    margin:30px auto;
}
.opinion-text-main-bold {
    font-weight: bold;
}

.special-events {
color: white;
    background: #3C3E4A;
    text-align: center;
    min-height: 350px;
    padding:20px;
}

.div-special-events {
    border: 1px solid #D6D6DE;
    width:85%;
    margin: 50px auto;
    text-align: center;
}

.div-special-events h1{
    text-transform: uppercase;
    padding-top: 60px ;
    padding-bottom:20px;
    font-size: 1.7em;

}

.div-special-events .apart {
    width: 80%;
    margin: 30px auto;

}

.divaddress{ margin-bottom:20px;}


footer {
    background: #292A2F;
    color: #77787D;
    height: 50px;
    text-align:center;
    }

@media all and (max-width: 1150px) {
    nav li:first-child {
        margin-right: 0;
    }
    .div-special-events {
                width:99%;
    }
}

@media all and (max-width: 950px){
    header article, .opinions {
        padding:0 10px;
    }
}

@media all and (max-width: 830px) {
header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/milling-tablet.jpg)no-repeat;
    background-size: cover;

}
}
@media all and (max-width: 660px) {
    header {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/milling-tablet.jpg),url(img/justfon.jpg) ;
        background-repeat:no-repeat,no-repeat, no-repeat; ;
        background-size: cover, contain, cover;
        background-attachment:fixed;
        height:100%;
    }
}
@media all and (max-width: 500px) {
    header {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/milling-mobile.jpg), url(img/justfon.jpg) ;
        background-repeat:no-repeat, no-repeat, repeat;
        background-size: cover, contain, cover;
        background-attachment:fixed;
        height:100%;
           }
    section.activity{

    margin-top: 50px;
}       
           
    p.urge {
        font-size: 2.2em;
    }
}

@media all and (max-width: 400px)
{
    nav ul li {
        display:block;
        padding:10px;
    }
}