@import url('https://fonts.googleapis.com/css?family=PT+Sans');

/* */
:root{
	--primary-color:#b90415;
	--primary-color-hover:#d3071b;
	--secondary-color:#103063;
	--secondary-color-hover:#143f85;
	--light-color:#f4f4f4;
}

body{
	font-family:'PT Sans', sans-serif;
	background-color:#252529;
	margin:0;
	color:#fff;
	line-height:1.6;
}
img{
	width: 100%;
}
a {
	text-decoration: none;
	color:#ccc;
}
nav{
	height:50px;
	width:100%;
	background-color:#333;
	color:#eee;
	position:fixed;
}
nav ul{
	padding: 0;
	margin: 0;
}
nav li{
	display: inline;
	float: left;
}
nav a{
	display:inline-block;
	width:100px;
	text-align:center;
	text-decoration: none;
	padding: 10px 0;
	color:#eee;
	text-decoration:none;
}
nav li:hover{
	background-color:#444;
}
nav a#openup{
	display: none;
}
.btn{
	padding:1rem;
	color:#fff;
	display:inline-block;
}
.btn-primary{
	background: var(--primary-color);
}
.btn-primary:hover{
	background: var(--primary-color-hover);
}
.btn-secondary{
	background: var(--secondary-color);
}
.btn-secondary:hover{
	background: var(--secondary-color-hover);
}
.text-primary{
	color:var(--primary-color);
}
.text-secondary{
	color:var(--secondary-color);
}
.text-light{
	color:var(--light-color);
}
.bg-light{
	background: var(--light-color);
	color:#333;
}
.section{
	padding: 2rem 0;
}
.section-head{
	font-size:2.5rem;
	margin: 0;
}
.section h3{
	font-size: 2rem;
}
.pil{
	display:grid;
	grid-gap: 20px;
	grid-template-columns: 1fr 1fr;

}
#pilsook p{
	padding: 0;
	margin: 0;
	font-size: 20px;
	font-weight: bold;
}
#pilsook h4{
	padding-top: 0;
}
.text-center{
	text-align:center;
}
#showcase{
	margin:0;
	padding:0;
	background:url('../img/back6.jpg') no-repeat center/cover;
	width: 100%;
	height:85vh;
	position: relative;
	overflow-y: hidden;
}
#showcase .container1{
	margin-top: 25vh;
	margin-left:20%;

	color:#252529;
}
#showcase h1{
	font-size: 4rem;
	margin-bottom: 0;
}
#showcase h2{
	font-size: 2rem;
	
}


/* Footer  */
footer .footer-cols{
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	padding: 2rem;
	text-align: left;
	font-size: 14px;
}
footer .footer-cols ul{
	list-style: none;
}
footer .footer-cols ul li:first-child{
	font-size: 1.2rem;
	padding-bottom: 0.5rem;
	border-bottom: #444 solid 1px;
	margin-bottom: 1rem;
}
footer .footer-bottom {
	background:#333;
	padding: 1rem;
}

/* Utility          */
.container{
	max-width:1180px;
text-align: center;
	margin:0 auto;
	padding: 0  3rem;
}
.lead{
	font-size: 1.3rem;
}
.mb{
	margin-bottom: 1rem;
}
.mt{
	margin-top: 1rem;
}
section#database{
		margin:0;
	padding:0;
background:url(../img/database.jpg) no-repeat bottom/cover;
padding: 10rem 0;
	width: 100%;
	height:85vh;

	overflow-y: hidden;
	color:#333;
}
.content1 {
  position: relative;
  z-index: 1;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:70px;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #F6F;
  width: 100%;

}
.column{
float: left;
  z-index: 2;

  width: 45%;
  padding-left:30px;
  padding-right:30px;

}
.column.side {

  z-index: 2;

  width: 43%;

}
video {
  border: 7px solid #333333;
  z-index: 3;
}
.side1 {
width: 70%;
  display: block;
  margin-left: auto;
  margin-right: auto;

}

section#java1{
		margin:0;
	width: 100%;
	overflow-y: hidden;
	background:#CD1672;
	vertical-align:central;


}
@media screen and (max-width:580px){
	.hide-on-small{
		display:none;
	}
	#showcase{
		background:url('../img/back6.jpg') no-repeat;
		background-size:contain,cover;
		background-size: 100% 350px;
		height:45vh;
		margin-top:0;

	}
	#showcase .container1{
		margin-top:15vh;
		margin-left:5%;
		text-align: left;
	}
	#showcase h1{
		
		font-size: 2rem;
	}
	#showcase h2{
		font-size: 1rem;

	}


	section#database{
		background:#FF99CC;
		height:50vh;
	}

	section#java1{

    display: none;
  
padding: 0px;
		background:url('../img/tripBACK.jpg') no-repeat;
		background-size:contain,cover;
		background-size: 100% 400px;
		height:70vh;
		margin-top:0;

	}

	.content1 {

		padding: 5px;
	}
	.content1 h2{
		
		font-size: 2rem;
	}
	.content1 h3{
		font-size: 1.5rem;

	}

  nav {
    height: auto;
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav li {
    width: 100%;
    float: left;
    position: relative;
  }
  nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
    background: #333;
    border-bottom: 1px solid #555;
  }
		nav a:hover{
			background: #444;
		}
		nav a#openup:after{
		content: "|||";
	   	 transform: rotate(-90deg);
	    -ms-transform: rotate(-90deg);
	    /* IE 9 */
	    -webkit-transform: rotate(-90deg);
	    /* Safari and Chrome */
	    width: 30px;
	    height: 30px;
	    display: inline-block;
	    position: absolute;
	    right: 5px;
	    top: 20px;

		}
	  nav a#openup {
    display: block;
    background-color: #333;
    width: 100%;
    position: relative;
  }
}
.cf:before, .cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}

.cf {
  zoom: 1;
}
@media screen and (max-width:780px){
	.pilsook{
		grid-template-columns: 1fr;
	}
	footer .footer-cols{
		display: none;
	}

.column{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.column.side {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;

}

.side1 {
width: 100%;
}
	}

@media screen and (min-width: 400px) {
	  .row, .navbar {   
    flex-direction: column;
  }
}