@font-face {
	font-family: "flBold";
	src: url("../fonts/Florencesans-Bold.otf") format("opentype");
}

/*------------------------------------portfolio-----------------------------------------*/

#entryPage-port{
	position:relative;
	width:100vw;
	height:3780px;
	top:80px;
	opacity:0;
	background-color:rgba(0,0,0,0.0);
}

#portContainer{
	position:absolute;
	width:80vw;
	height:auto;
	top:120px;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
}

.portRow{
	position:relative;
	width:100%;
	height:auto;
	background-color:rgba(0,0,0,0.0);
	opacity:0;
}

.portImgContainer{
	position:relative;
	width:520px;
	height:320px;
	margin:10px 20px 10px 0px;
	left:0;
	display:inline-block;
	background-color:rgba(0,0,0,0.04);
	overflow:hidden;
}

.portImg{
	position:absolute;
	width:100%;
	height:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.tallImg{
	width:auto;
	height:100%;
}

#bottomScrollerContainer{
	display:none;
}

/*--------------901px-1360px------------------------*/


@media (min-width:1141px) and (max-width:1360px) {

#entryPage-port{
	height:3200px;
}

.portImgContainer{
	width:420px;
	height:260px;
}

}

@media (min-width:961px) and (max-width:1140px) {

#entryPage-port{
	height:2820px;
}

.portImgContainer{
	width:360px;
	height:222px;
}

}


@media (min-width:701px) and (max-width:960px) {

#entryPage-port{
	height:8850px;
}

#portContainer{
	width:600px;
}

.portImgContainer{
	width:600px;
	height:400px;
}


}

@media (min-width:401px) and (max-width:700px) {

#entryPage-port{
	height:5190px;
}


#portContainer{
	width:360px;
	height:auto;
	bottom:auto;
}

#portPageHeader{
	font-size:64px;
	letter-spacing:-5px;
}

#portHeaderWrapper{
	height:85px;
}

.portImgContainer{
	width:360px;
	height:222px;
}


}

@media (min-width:1px) and (max-width:400px) {

#entryPage-port{
	height:4550px;
}

#portContainer{
	width:320px;
	height:auto;
	bottom:auto;
}

#portPageHeader{
	font-size:64px;
	letter-spacing:-5px;
}

#portHeaderWrapper{
	height:85px;
}

.portImgContainer{
	width:320px;
	height:190px;
}


}


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


#entryPage-conP{
	position:relative;
	width:100vw;
	height:1360px;
	top:80px;
	opacity:0;
	background-color:rgba(0,0,0,0.0);
	
}


#conPContainer{
	position:absolute;
	width:60%;
	height:1165px;
	top:100px;
	left:10%;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
}

.conSubSect{
	position:relative;
	width:36%;
	height:290px;
	margin:40px 30px 50px 0px;
	opacity:0;
	background-color:rgba(0,0,0,0.0);
	display:inline-block;
	vertical-align:top;
}

.c-infoContainer{
	position:relative;
	margin:15px 0px;
	background-color: rgba(255,255,255,0.0);
}


a{
	color:rgba(0,0,0,1.0);
	text-decoration:none;
	transition:100ms;
}

a:hover{
	color:var(--main-color, rgba(0,109,182,1.0));
}

.c-infoHeader{
	font-family: "flBold";
	font-size:14px;
	letter-spacing:0px;
	margin:0px 0px 2px 0px;
	color:rgba(0,0,0,1.0);
}

.c-infoDetail{
	font-family:"athelas", Georgia, Times, "Times New Roman", serif;
	font-size:12px;
	font-weight:400;
	font-style:italic;
	margin:0;
	color:rgba(0,0,0,1.0);
}	

input[type=text] {
    padding: 12px 20px;
    margin: 10px 20px 10px 0px;
    display: inline-block;
    border: 4px solid #000000;
    box-sizing: border-box;
    transition:200ms;
}



input[type=text]:focus {
	outline:0;
    padding: 12px 20px;
    margin: 10px 20px 10px 0px;
    display: inline-block;
    border: 4px solid var(--main-color, rgba(0,109,182,1.0));
    color:rgba(0,0,0,1.0);
    box-sizing: border-box;
}

.conItem{
	top:20px;
	opacity:0;
}

#fname{
	 width: 43%;
}

#lname{
	 width: 43%;
}

#email{
	 width: 53%;
}

#phone{
	 width: 33%;
}

#comment{
	padding:12px 20px 300px 20px;
	margin-bottom:20px;
	width:89%;
}

input {
	font-family: "flBold";
	font-size: 16px;
	font-weight:bold;
	color:rgba(0,0,0,1.0);
	opacity:1;
	
}

input::placeholder {
	font-family: "flBold";
	font-size: 16px;
	font-weight:bold;
	color:rgba(0,0,0,0.33);
	transition:200ms;
}


input[type=button], input[type=submit]{
	position:absolute;
	width:100%;
	height:100%;
	border: none;
    color: black;
    text-decoration: none;
	background-color:rgba(255,255,255,0.0);
    cursor: pointer;
    font-family: "flBold";
	font-size: 24px;
	transition:300ms;
}

input[type=submit]:hover{
	transform:translateX(5px);
}




@media (min-width:1001px) and (max-width:1200px) {

#conHeader{
	font-size:110px;
}

}


@media (min-width:801px) and (max-width:1000px) {

#entryPage-conP{
	height:1740px;
}

#conHeaderWrapper{
	height:90px;
}

#conHeader{
	font-size:80px;
}

.conSubSect{
	width:180px;
	display:block;
}

#fname{
	 width: 100%;
}

#lname{
	 width: 100%;
}

#email{
	 width: 100%;
}

#phone{
	 width: 100%;
}

#comment{
	width:100%;
}

}



@media (min-width:601px) and (max-width:800px) {

#entryPage-conP{
	height:1740px;
}

#conHeaderWrapper{
	height:90px;
}

#conHeader{
	font-size:80px;
}

.conSubSect{
	width:180px;
	display:block;
}

#fname{
	 width: 100%;
}

#lname{
	 width: 100%;
}

#email{
	 width: 100%;
}

#phone{
	 width: 100%;
}

#comment{
	width:100%;
}

}


@media (min-width:1px) and (max-width:600px) {

#entryPage-conP{
	height:1740px;
}

#conPContainer {
    width: 79%;
    }

#conHeaderWrapper{
	height:70px;
}

#conHeader{
	font-size:56px;
}

.conSubSect{
	width:100%;
	display:block;
}

#sendUsText{
	 width: 100%;
}

#fname{
	 width: 100%;
}

#lname{
	 width: 100%;
}

#email{
	 width: 100%;
}

#phone{
	 width: 100%;
}

#comment{
	width:100%;
}

}


/*------------------------------------careers-----------------------------------------*/


#entryPage-car{
	position:relative;
	width:100vw;
	height:100vh;
	top:80px;
	opacity:0;
	background-color:rgba(0,0,0,0.0);
}


#carContainer{
	position:absolute;
	width:60%;
	min-width:340px;
	height:400px;
	top:100px;
	left:10%;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
}

.carSubSect{
	position:relative;
	width:75%;
	height:290px;
	margin:20px 30px 50px 0px;
	opacity:0;
	background-color:rgba(0,0,0,0.0);
	display:inline-block;
	vertical-align:top;
}

.carSubSect a{
	font-weight:bold;
}



@media (min-width:1px) and (max-width:600px) {

#carHeader{
	font-size:64px;
}

#carHeaderWrapper{
	height:85px;
}

#conHeaderWrapper{
	width: 108%;
}

}