/*Start Global*/

*
{
  margin: 0px;
  padding: 0px;
}

body
{
  color: white;
  background-color: #222831;
}

.main-header , .articles , footer , nav
{
  width: 1000px;
  margin: 0px auto;
}
 nav div , .title , .search ,.blog , .quick-links , .contact , .social
, .head-libero div , .boating , .boating-text , .art2 section
{display: inline-block;}

a{text-decoration: none;}

.clear-fix{clear: both;}

/*End Global*/


/*Start Header*/
/*End Header*/

.menue
{
  padding: 20px;
  text-align: right;
  background-color: black;
}

.menue a
{
  color: grey;
}

.head-nav
{
  padding: 20px 10px;
  background: #303841;
}

nav a , .head-title-search
{
  color: grey;
}


.head-title-search{margin-bottom: 40px;}

.head-title-search .title h1{font-size: 50px;}
.head-title-search .search
{
  float: right;
  margin-top: 30px;
}

.head-title-search .search input[type="search"]
{
  background-color: #393E46;
  color: white;
  width: 300px;
  padding: 8px 10px;
}


/*Start Nav*/

nav
{
  width: 950px;
  background-color: #393E46;
  margin: 20px auto;
  border: 1px solid grey;
}

nav div
{
  padding: 20px
}

nav div:hover , nav a:hover
{
  background-color: black;
  color: white;
}

/*End Nav*/


/*Start Article*/

.articles{background-color: black;}

.art1 {border-bottom: 3px solid #393E46;}

.boating
{
  width: 960px;
  background-image: url("/images/2e54ee8930fdde31d80c147045f51a0be5bdbe50/sea.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 40px 20px;
}

.boating-text
{
  background-color: black;
  opacity: 0.8;
  width: 240px;
  padding: 10px 20px 20px;
}

.boating-text p , .boating-text span , .boating-text a{opacity: 1;}

.boating-text span
{
  display: inline-block;
  font-size: 50px;
  margin-right: 10px;
  font-weight: bold;
}

.boating-text h2{margin: 20px 0px;font-size: 30px;}

.boating-text p
{
  line-height: 25px;
}

.boating-text a
{
  display: block;
  float: right;
  color: white;
}

.boating-text a:hover , .boating-text span:hover{opacity: 0.7; cursor: pointer;}


.art2
{
  text-align: center;
  margin-top: 30px;
  padding-bottom: 30px;
}

.art2 img
{
  width: 300px;
  height: 150px;
  margin: 0px 10px;
}

.art2 h3
{
  margin: 0px 10px;
  padding: 10px 0px;
  width: 300px;
  background-color: #222831;
}




/*End Article*/


/*Start Footer*/
footer h1
{
  background-color: #393E46;
  margin-bottom: 20px;
  padding: 10px 20px;
}

.footer{padding-bottom: 30px;}

footer p{line-height: 20px;}

.contact,.social{bottom: 7px;}

.blog , .quick-links  , .social
{
  width: 240px;
}

.contact{width: 160px;}

footer h3
{
  margin-bottom: 30px;
}

footer p , footer span , footer h4{color: darkgrey;}

footer a{color: white;}

.blog p{margin-bottom: 7px; line-height: 24px;}

.posted{font-size: 14px;}

.blog a
{
  display: block;
  text-align: right;
  margin-top: 15px;
}


.quick-links p ,.social div
{

  border-bottom: 1px dashed #CCC;
  padding-bottom: 8px;
  margin-bottom: 13px;
}

.social img
{
  width: 44px;
  height: 44px;
  border-radius: 100%;
}

.social span
{
  display: inline-block;
  position: relative;
  bottom: 15px;
}

.copyright
{
  text-align: center;
  padding: 20px 0px;
  color: grey;
}


.left , .blog , .contact{float: left;}

.right , .quick-links , .social{float: right;}

.left{width: 520px;}

.right{width: 440px;}

/*End Footer*/
