@charset "UTF-8";
/* CSS Document */

/*-------------------- default ---------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	vertical-align: baseline;
}

/* html5 elements */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}


/* changing or setting defaults */
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

/* general, reusable styles */
.clear {
	clear: both;
}
.left {
	float: left;
	margin: 0 20px 20px 0;
}

.right {
	float: right;
	margin: 0 20px 20px 0;
}

#container {
	background-color: #f4f4f3;
	width: 100%;
	max-width: 1750px;
	min-width: 280px;
	margin: 0 auto;
}

ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

a {
	text-decoration: none;	
	color: #f69d70;
	transition-duration: .5s;
}



#container .backto a {
	text-decoration: none;	
	color: #fff;
	transition-duration: .5s;
}

#container .backto a:hover {
	color: #f9d44c;	
}


/*--------------------general styles------------*/
.wrapper {
	max-width: 1260px;
}
#about .wrapper,
#portfolio .wrapper,
#contact .wrapper {
	background: #231f20;
	position: relative;
	top: 0px;
	padding: 40px 15% 30px 15%;
	border-bottom: 1px solid #fff;
}

h3, h4 {
	font-size: 35px;
	text-align: center;
	color: #FFF;
	font-family: 'Amita', cursive;
}
p {
	
	font-size: 16px;
	color: #FFF;
	font-family: 'Amethysta', serif;
}
p a:hover{
	color: #f9d44c;
}

/*--------------------header-----------------*/

header {
	height: 56px;
	position: reletive;
	top:0;
	background-color: #1083c9;
	text-align: right;
	}
	
	


/*------mobile nav styles------*/
#menuMain {
	height: 56px;
	color: #1083c9;
	background: url(../images/icon-menu.png) no-repeat right;
	text-indent:-9999px;
	text-align: left;
	cursor: pointer;
	clear: both;

}
#last {
	margin-bottom: 50px;
}

.submenu {
	position: relative;
	display: none;
	width: 100%;
	border-top: 1px solid #fff;
	text-align: center;
	z-index: 2;
}
.submenu a {
	display: inline-block;
	width: 100%;
	background-color: #f6ae51;
	color: #fff;
	padding: 7px 0;	
}
.submenu a:hover {
	background-color: #f1bb24;
}
	


/*------------------- billboard---------------------*/
 .billboard {
	background: url(../images/billboard-device2.png) no-repeat center top;
	background-size: cover;
	height: 355px;
	position: reletive;
	top: 0px;
	
}

.billboard .wrapper{
	border: 0;
	background: #231f20;
}

h1 {
	font-size: 14px;
	text-align: center;
	position: relative;
	top: 104px;
	
}

h2 {
	font-size: 52.5px;
	text-align: center;
	position: relative;
	top: 88px;
	font-family: 'Grand Hotel', cursive;
	line-height: 100%;
	z-index: 1;
}



/*------------------- About ---------------------*/
#about .wrapper {
	
}
h4 { 
	padding: 50px 0 25px 0;
}

p {
	padding-bottom: 20px;
}
/*------------------- portfolio ---------------------*/

.center-text {
	text-align: center;
	padding-bottom: 30px;
	
}

.sub-title {
	font-size: 21px;
	padding-bottom: 30px;
	
}

.center {
	text-align: center;
	float: center;
	display: block;
  	width: 200 px;
  	margin: auto;
  	padding-bottom: 50px;
}

#portfolio .wrapper {
	background-color: #4e4e50;
}
#portfolio a {
	color: #fff;
}
h3 { 
	padding: 30px 0 50px 0;
}



/*-------- gallery styles-------*/
.gallery-list {
	list-style: none;
}
.gallery-list li {
	margin: 0 15px 30px 15px;
	float: center;
	width: 200px;
	display: inline-table;
}

ol .gallery-list {
	list-style: none;
	display: table;
}

aside img, .map, .gallery-list img {
	width: 94%;
	margin-bottom: 12px;
	border: 3px solid #f0ebeb;
	-webkit-box-shadow: 1px 1px 7px 0 #626060;
	box-shadow: 1px 1px 8px 0 #626060;
	
}

.gallery-list img .center {
	width: 200px;
	display: block;
    margin: 0 auto;
}

/*------------------- contact ---------------------*/

#contact-form {
	display: block;
    justify-content: center;
    content: "\A";
    display: flow;
}
}
.form-row{
    margin-bottom: 10px;
    text-align: center
    display: block;

     
}
.form-row::after{
    content: "\A";
    white-space: pre;
    display: block;

}

.form-row label{
   color: #fff;
    display: block;
}

.form-row::after input{
	content: "\A";
   white-space: pre;
 
    display: inline;
}

.form-row::after label{
   content: "\A";
   white-space: pre;
   display: block;
}

.form-input {
    display: block;
}

.form-error {
    color: red;
}

#contact a {
	color: #fff;

}
 #contact p a{
	 line-height: 70px;
 }
 
#contact .email a{
	color: #f69d70;
}

#contact .email a:hover{
	color: #f9d44c;
}
.email {
	text-align: center;
}





/*------------------- footer ---------------------*/

footer {
	Position: reletive;
	text-color: #fff;
	background-color: #231f20;
	padding: 20px 5px 20px 5%;
}


/*------------------- media queries ---------------------*/


@media screen and (min-width: 175px) {/*175 and above*/

ol {
    list-style-position: inside;    
    text-align: center;
}

#contact .wrapper {
	padding: 0 10%;
}
 #logo {
	max-width: 225px;
	

}

@media screen and (min-width: 315px) {/*315 and above*/

ol {
    list-style-position: inside;    
    text-align: center;
}

#contact .wrapper {
	padding: 0 10%;
}
 #logo {
	max-width: 275px;
	

}

@media screen and (min-width: 350px) {/*350 and above*/

ol {
    list-style-position: inside;    
    text-align: center;
}

#contact .wrapper {
	padding: 0 10%;
}
 #logo {
	max-width: 275px;
	

}
@media screen and (min-width: 437.5px) {/437.5 and above*/

#contact .wrapper {
	padding: 0 17%;
}
#logo {
	max-width: 400px;
	width: 100%;
 }
}
@media screen and (min-width: 538px) {/*538 and above*/

#logo {
	max-width: 375px;
    width: 100%;

 }

.billboard {
	background: url(../images/billboard-devices3.png) no-repeat center top;
	height: 500px;
	background-size: cover;
}

h2 {
	font-size: 59.5px;
	position: relative;
	top: 130px;
	
}
h1 {
	font-size: 17.5px;
	position: relative;
	top: 155px;
	
}

#contact .wrapper {
	padding: 0 25%;
}

}
@media screen and (min-width: 656.25px) {/*656.25 and above*/

#contact .wrapper {
	padding: 0 30%;
}



/*------nav styles---------*/

.mainNav {
	padding: 60px 20px 0 0;
}

#menuMain {
	display: none;
}

.submenu {
	display: block;
	border-top: 0;
	width: inherit;
	text-align: right;
}

.submenu a {
	width: inherit;
	background-color: transparent;
	color: #fff;
	padding: 0;
	font-size: 17.5px;
}

.submenu a:hover {
	background-color: transparent;
	color: #f9d44c;
}
}

@media screen and (min-width: 875px) {/*875 and above*/ 

.billboard {
	height: 730px;
}
h2 {
	font-size: 91px;
	position: relative;
	top: 200px;
}

h1 {
	font-size: 26.6px;
	position: relative;
	top: 240px;
}
#contact .wrapper {
	padding: 0 40%;
}
p {
	padding: 0 20%;


}

/*------nav styles---------*/ 
 
 header {
	 text-align: center;
 }
 
 .mainNav {
	 padding-top: 16px;
 }
 
 .submenu {
	  display: inline;
 }
 .submenu a {
	 color: #fff;
	 font-size: 21px;
	 padding: 0 50px;
	 text-transform: uppercase;
 }
 }
 
 @media screen and (min-width: 1312.5px) {/*1312.5 and above*/
 
 .billboard {
	height: 900px;
}


h2 {
	font-size: 112px;
	position: relative;
	top: 210px;
}

h1 {
	font-size: 31.5px;
	position: relative;
	top: 260px;
 }
 }