/* Document  for Screens */ 
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,700,700italic);

body { font-family: 'Open Sans', sans-serif; font-size; 16px; font-weight; 300; color: #555; margin: 0; padding: 0; }

/* text */

h1 { margin: 0 0 1em 0; font-size: 2.8em; font-weight: 700; }
h2 { margin: 0 0 .5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; }
h3 { margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700; }
h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; }

p { margin: 0 0 1em 0; line-height: 180%; }

/* links */

a { color: #007eff; text-decoration: none; }
a:visited { color: #65b1ff }
a:hover {text-decoration: underline;}
/* page limit */

#page { max-width: 1200px; margin: 0 auto; position: relative; }

/* header */



#header-wrapper
{
	overflow: hidden;
	height: 700px;
	background: #FFF url('../images/header.jpg') no-repeat top center;
	background-size: cover;
}

 #header-app-wrap
{
	overflow: hidden;
	height: 700px;
	background: #FFF url('../images/blk_board.001.jpeg') no-repeat top center;
	background-size: cover;
}

 header div.app hero { position: absolute; width: 80%; top: 700px;  }
 header div.app hero  h1 { line-height: 1em; margin: 0 0 30px 0; color: #fff; } 
 
/* header hero */

 header div.hero { position: absolute; width: 42%; top: 400px; left: 55%; }
 header div.hero  h1 { line-height: 1em; margin: 0 0 30px 0; color: #fff; }
 
 
	
 /* anchor links */ 
 
 a.btn { font-size: 1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; 	padding: 4px 15px; transition: background-color .5s; }
 a.btn:hover { background-color: rgba(0,0,0,.3); }
 
  /* Section - All */
 
 section { padding: 0 30px; }
 section::after { content:""; display: block; clear: both; }
 
 /* Section - Main */ 
 
 section.main { margin-top: 20px; margin-bottom: 30px; padding: 0; }
 section.main aside { width: 33%; float: left; text-align: center; }
 
 section.main aside h3 a { color: #000; text-decoration: none; }
 section.main aside h3 a:hover { text-decoration: underline; }
 
 section.main aside .content.illustration { background-image: url(../images/web-icons-01.svg); }
 section.main aside .content.photo-retouching { background-image: url(../images/web-icons-02.svg); }        		  
 section.main aside .content.publishing { background-image: url(../images/web-icons-03.svg); }
 
 section.main .content{ margin: 15px; background: no-repeat center top; background-size: 75px 75px; padding-top: 85px; }
 
 section.main h3 { text-transform: uppercase; }
 
 /* section display */
 
 section .heading { text-align: center; }
 
 section .heading .byline { font-size: 1.3em; }
 
 section .heading h2 { font-size: 3em; }
 
 section .heading
	{
		overflow: hidden;
		margin-bottom: 3em;
		padding-bottom: 1.5em;
	}
 
 

/* section core - two colom */

section.core { background-color: #E0E0E0; position: relative; }

section.core aside { width: 47%; float: left; margin-right: 10px; }

section.core aside .content { padding: 30px 30px 20px 0; }

section.core aside .content img { display: block; margin-bottom: 15px; width: 100%; }

/* navigation */ 



nav {
	background-color: rgba(0,0,0,.65);
	position: absolute;
	top: 0px; left: 0px;
	padding: 50px 0 0 0;
	width: 100%;
}

nav ul { list-style: none; margin: 0; padding: 0px; }


nav ul li a {
	display: inline-block; 
	color: #fff;
	padding: .6em 1em;
	text-decoration: none;
	width: 125px;
	position: relative;
	text-transform: uppercase;
	
}

nav ul li a:visited { color: #fff; }

.menu li a:hover {
	background: #0084A5;
	border-radius: 5px;
	text-decoration: none;
}

nav .current a { background: #000; border-radius: 5px; }


.single-nav ul {
        display: flex;
        flex-wrap: wrap;
      
    }
    
    .single-nav li {
        flex: 1 0 auto;
        text-align: center;
    }
    
}

/* info-box */

 #info-box
	{
		height:300px;
		width: 350px;
	}
	
	
	#info-box .info
	{
		margin-top: 50px;
		margin-top: 30px;
	}

	
 /* form */ 
 
form {
    display:block;
    margin-top:20px;
    letter-spacing:2px;
    padding-right: 10px;
}
form {
    margin:0 auto;
    width:459px;
}

input {
	width:430px;
	height:27px;
	background:#efefef;
	border:1px solid #dedede;
	padding:10px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 0.9em;
	color: #3a3a3a;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
	
textarea {
	width:430px;
	height:210px;
	background:#efefef;
	border:1px solid #dedede;
	padding:10px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 0.9em;
	color: #3a3a3a;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

#submit {
    width:127px;
    height:38px;
    margin-top:20px;
    cursor:pointer;
}

#submit:hover {
	background: #0084A5;
	color: #fff;
}


/* Services */ 

.service {
	margin-bottom: 20px;
}

.service .title {
	height: 41px;
	padding: 7px 0px 10px 30px;
	
}

.service .title a {
	color: #333333;
	border: none;
}

.service .meta {
	margin-bottom: 30px;
	padding: 0px 30px 0px 30px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	font-style: italic;
}



.service .meta .sample {
	float: right;
}

.service .meta a {
}

.service .detail {
	padding: 0px 30px 20px 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid #B3B3B3;
	text-align: justify;
}
/* Top-Level */


nav > ul { padding-left: 200px; }
	
/* Footer */

	footer
	{
		overflow: hidden;
		padding: 3em 0em;
	}
	
	footer p
	{
		letter-spacing: 0.20em;
		text-align: center;
		text-transform: uppercase;
		font-size: 0.80em;
		color: #6F6F6F;
	}
	
	


@media screen and (max-width: 1000px) {
	
	h1 {font-size: 2.4em; }
	
	/* header */
	
	header div.hero { left: 56%; }
	header div.hero h1 { margin-bottom: 20px; }
	
}

@media screen and (max-width: 825px) { 

	h1 { font-size: 2.2em; }
	
	#header-wrapper { height: 500px}
	header div.hero { top: 300px; left: 50%; }
}

@media screen and (max-width: 760px) {

	h1 { font-size: 1.8em; }
	h2 { font-size: 1.4em; }
	h3 { font-size: 1.1em; }
	a.btn { font-size: 1em; }
	
	header div.hero { top: 275px; left: 48%; }
	
	section.main { margin-top: 10px; margin-bottom: 10px; }
	section.main aside div.content { background-size: 55px 55px; padding-top: 60px; }
}



@media screen and ( max-width: 625px) {

	h1 { font-size: 1em; }
	h3 { margin-bottom: 0px; }
	a.btn { font-size: .9em; }
	
	header div.hero { width: 300px; top: 100px; left: 130px; }
	header div.hero h1 { margin-bottom: 10px; }
	
	section.main aside { width: 100%; float: none; text-align: left; }
	
	section.main aside div.content {
		margin: 8px 20px 8px 0;
		padding: 5px 0px 10px 85px;
		background-size: 50px 50px;
		background-position: 20px 5px;
	
	}
	
	section.core aside { width: 100%; foat: none; margin: 0; position: relative; }
	section.core aside div.content { padding: 20px 20px 20px 10px; }
	section.core aside div.content p { font-size: .9em; }
	section.core aside div.content img {
		display: inline-block; 
		width: 70%;
		position: auto;

	}
	
	section .heading .byline { font-size: 1.2em; }
	section .heading  h2 { font-size: 2em; }
	
	 #header-app-wrap
{
	overflow: hidden;
	height: 700px;
	background: #FFF url('../images/app_promo.001.jpeg') no-repeat top center;
	background-size: cover;
}

	
	/* navigation */
	nav { position: static; width: auto; padding: 20px 15px; background-color: #082984}
	section.menu-section { padding: 0 0; }
	nav ul { position: static; }
	
	nav ul li a { width: 75%; padding: 8px 15px; margin: 8px 10px }
	nav ul li:hover { background: none; }
	
	nav > ul { padding-left: 0px; }
	
	.single-nav ul { 
		
		flex-direction: column;
		align-content: flex-start;
		
	}
	
	.single-nav li {
        flex: 1 0 auto;
        text-align: left;
    }

	
	div.hero h1 {font-size: 1.4em; }
	#header-wrapper { height: 200px}
	
	/* footer */
	#copyright { display: block; margin-top: 10px; }
	
	footer p
	{
		font-size: 0.50em;	
	}
	
}
	/* end 625 */
	
	
@media screen and (max-width: 425px; ) {



}