* {
	font-family: 'Oswald', sans-serif;
}
.logo {
	height: 100px;
	width: 125px;
	margin-top: 20px;
}

header {
	background: #D50101;
	color: #fff;
	display: inline-flex;
	position: fixed;
	z-index: 2;
	width: 1170px;


}

.headsub {
	margin-top: 0;
}
.phone-number {
	color: #fff;
	text-decoration: none;
	font-size: 30px;
}
.icon {
	width: 50px;
	float: right;
}

.phone {
	margin-top: 10px;
}

.social {
	display: inline;
	list-style: none;
	margin-left: 30px;
}
nav {
	width: 1170px;
	position: fixed;
	z-index: 1;
	margin-top: 120px;
	background: #000;
	height: 70px;
		}

.container {
	margin:auto;

}

.carousel {
	margin-top: 180px;
    width: 1170px;
    height: 400px;
}


.info {
	background: gray;
	height: 810px;
}

footer {
	background: #000;
	width: 100%;
	color: #fff;
	margin-left: 0px;
	height: 70px;
	font-size: 16px;
	clear: both;
	width: 1200px;
	padding: 0px;
}

.halogo {
	width: 200px;
	margin-left: 70px;
}
article {
	font-size: 20px;
}
.red {
	color: maroon;
	font-size: 24px;
}
.item {
	height: 400px;
}

.bottompic {
	height: 300px;
	margin: auto;
}
.about {
	margin-top: 200px;
}
.services {
	height: 100px;
	color: #fff;
	background: rgba(0, 0, 0, 0.63);
	width: 1170px;
	margin-top: 180px;
}
.headerpic {
	display: inline-flex;
	width: 300px;
	height: 300px;
	outline: 2px, solid, black;
	margin: 33px;
	box-shadow:10px 10px 5px #888;
	border: 2px solid black;
}
.serv {
	margin-top: 20px;
}
.sidepic {
	float-right;
	margin-left: 100px;
}
.mainart {
	display: inline-block;
	font-size: 20px;
}
.contact {
	margin-top: 180px;
}
.contacts {
	background: #000;
	color: #fff;
	margin-top: 180px;
}

.mainport {
	margin-top: 180px;
}

#thumbwrap {
	position:relative;
	top: 185px;
	margin:75px auto;
	width:1170px; height:1000px;
	display: inline-flex;
	}
.thumb img { 
	border:1px solid #000;
	margin:5px;
	float:left;
	box-shadow:10px 10px 5px #888;
	width: 200px;
	height: 200px;
}
.thumb span { 
	position:absolute;
	visibility:hidden;
}
.thumb:hover, .thumb:hover span { 
	visibility:visible;
	top:0; left:250px; 
	z-index:1;
	width: 300px;
	height: 300px;
}
form {
  /* Just to center the form on the page */
  margin: 0 auto;
  width: 400px;

  /* To see the limits of the form */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

div + div {
  margin-top: 1em;
}

label {
  /* To make sure that all label have the same size and are properly align */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* To make sure that all text field have the same font settings
     By default, textarea are set with a monospace font */
  font: 1em sans-serif;

  /* To give the same size to all text field */
  width: 300px;

  -moz-box-sizing: border-box;
       box-sizing: border-box;

  /* To harmonize the look & feel of text field border */
  border: 1px solid #999;
}

input:focus, textarea:focus {
  /* To give a little highligh on active elements */
  border-color: #000;
}

textarea {
  /* To properly align multiline text field with their label */
  vertical-align: top;

  /* To give enough room to type some text */
  height: 5em;

  /* To allow users to resize any textarea vertically
     It works only on Chrome, Firefox and Safari */
  resize: vertical;
}

.dropdown {
  position: relative;
  cursor: pointer;
  }

.dropdown-menu {
  border-radius:0px; 
  box-shadow:none; 
  border:none;
  min-width: 200px;
  max-width: 200px;
  height: 200px;
  top: 32px;
  background-color: rgba(0,0,0,0.8);
}

.dropdown-menu li a {
  color: #fff;
  font-size: 16px;
  padding: 5px 15px;
  
}

.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra magin represent the same space as the space between
     the labels and their text fields */
  margin-left: .5em;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

nav li {
    display: inline;
    float: left;
    width: 120px;
}
nav a {
    color: #fff;
    display: inline-block;
    width: 140px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
     margin: auto;
     font-size: 17px;
     margin-top: 30px;
}

nav li a {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    text-decoration: none;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #8c99a4;
}
nav a#pull {
    display: none;
}  
@media screen and (max-width: 800px) {
    nav { 
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
        font-size: 17px;
    }
    nav li a {
        
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}  
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #283744;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 100%;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

.access {
	border-radius: 15px;
	background-color: red;
	height: 340px;
	}



@media only screen and (max-width : 320px) {
    nav li {
        display: block;
        float: none;
        width: 120px;

    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}