/********************************* Global **********************************/
body{
	line-height: 1,5;
	padding: 0;
	margin: 0;
  color: #444;
}

a{
	text-decoration: none;
}

/********************************** Header / main image **********************************/

/* background setup */
#background {
	/*background-image:url('../img/main_img.jpg');*/
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%\9 !important;
}

/* fullscreen setup */
html, body {
    /* give this to all tags from html to .fullscreen */
    height:100%;
}
.fullscreen {
    width:100%;
    height:100%;
    overflow:hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.fullscreen.overflow {
    height:auto;
    min-height:100%;
}

nav ul {
  padding: 0 30px 0 100%;
  margin: 0;
  display: flex;
  list-style: none;
  position: relative;
  float: right;
  background: #7a7a7a;
}
nav li {
  transition: background 0.3s;
  transform: skew(-20deg); /* SKEW */
}

nav li a {
  display: block; /* block or inline-block is needed */
  text-decoration: none;
  padding: 7px 10px;
  font: 17px/1 sans-serif;
  transform: skew(20deg); /* UNSKEW */
  color: inherit;
}

nav li#first{
  background: #f07e6e;
  color: #fff;
}

nav li#second{
  background: #b0b0b0;
  color: #fff;
}

nav li#first:hover,
nav li#second:hover {
  background: #000;
  color: #fff;
}

#content_upper{
  text-align: center;
}

#content_upper {
  font-family: Arial;
  font-size: 5em;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.header_box1{
  background-color: #42c58a;
  width: 70%;
  padding: 60px 0;
  position: absolute;
  top:35vh;
}

.header_box2{
  background-color: #4ec7f3;
  width: 70%;
  padding: 60px 0;
  position: absolute;
  right: 0;
  top:52vh;
}

#content_upper #title1 {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  top:36vh;
 /* width: 40%;*/
}

#content_upper #title2 {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  /*width: 40%;*/
  top:53vh;
}

.xheader_box1, .xheader_box2 {
  text-align: center;
  border: 5px solid green;
  position: relative;
  width: 70%;
  top:40vh;
}


/********************************** Main container **********************************/
.main{
	margin: 0 auto;
	text-align: center;
  font-family: Montserrat,Arial,helvetica,sans-serif;
  color: #000;
  font-size: 1.1em;
  line-height: 1.5;
}

.main h2{
  font-size: 30px;
  font-weight: 700;
}

.text-grid {
  list-style: none;
  padding: 20px 0;
  margin: 0 auto;
  text-align: center;
  width: 50%;
}

.main .paragraph{
  text-align: left;
  padding: 50px 0 90px 30px;
  font-size: 17px;
  font-weight: 500;
}

.main .paragraph .list{
  list-style: disc;
}

#contact{
  padding: 100px 0;
}

.text-grid li > a,
.text-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
}


/********************************* Image mid section **********************************/
#section2{
  width:100%;
  height:50%;
  height: 50vh;
  overflow:hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*#section2 .inner{
  position: relative;
  top: 40%;
  text-align: center;
}

#section2 .inner h2{
  position: relative;
  top: -10vh;
  background-color: #4ec7f3;
  margin: 50px 0;
}*/

/********************************** Footer **********************************/
footer{
	background-color: #1e1d1b;
	padding: 25px 0;
	text-align: center;
  font-family: Montserrat,Arial,helvetica,sans-serif;
}

footer #email, #pipe, #copy_date{
	display: inline;
	position: relative;
	padding: 0 10px 0 0;
	color: #c2c2c2;
	font-size: 13px;
}

footer #copy, #date{
	display: inline;
	position: relative;
	color: #c2c2c2;
	font-size: 13px;
}

footer a{
  color:#42c58a;
}

footer a:hover {
  color: hotpink;
}

/******************************* Media Queries ******************************/
@media(max-width: 1500px){
  .header_box1{
    width: 80%;
  }
}

@media(max-width: 1300px){
  .header_box2{
    width: 80%;
  }
}

@media(max-width: 1100px){
  .header_box1{
    width: 90%;
  }
}

@media(max-width: 900px){
  .header_box1{
    width: 100%;
  }
  .header_box2{
    width: 100%;
  }

  .text-grid {
    padding: 20px 0;
    width: 60%;
  }

  .main .paragraph{
    padding: 50px 0 90px 0;
  }
}

@media(max-width: 700px){
  #content_upper {
    font-size: 4em;
  }

  .header_box1{
    padding: 50px 0;
    top:35vh;
  }

  .header_box2{
    padding: 50px 0;
    top:52vh;
  }

  .text-grid {
    padding: 20px 0;
    width: 80%;
  }
}

@media(max-width: 500px){
  #content_upper {
    font-size: 3em;
  }

  .header_box1{
    padding: 40px 0;
    top:35vh;
  }

  .header_box2{
    padding: 40px 0;
    top:52vh;
  }

  footer #email, #copy_date{
    display: block;
    position: relative;
    padding: 0 10px 0 0;
    color: #c2c2c2;
    font-size: 13px;
  }

  footer #pipe{
    visibility: hidden;
  }
}

@media(max-height: 800px){
  #content_upper {
    font-size: 3em;
  }

  .header_box1{
    padding: 40px 0;
    top:34vh;
  }

  .header_box2{
    padding: 40px 0;
    top:51vh;
  }
}