@import url("Dolce_Vita_Light/stylesheet.css");
@import url("MyriadSetPro_UltraLight/stylesheet.css");
@import url("MyriadSetPro_Thin/stylesheet.css");


/*  Credit: Adam Khoury

	1. CSS resets
	2. Universal styles
	3. CSS3 animations
	4. Media queries
--------------------------------------*/
/*  All code referenced from Open source Coding:
Adam Khoury www.adamkhoury.com
    All code edited and formatted by Rolando Pereira on:
	1. Index.html, about.html, Gallery-2.html, Contact.html
	2. Fonts gathered from Fontsquirrel (Alexis Molnar) and 1001freefonts.com
	3. Images open source Free use www.unsplash.com and thereof other entities
	and images also free use.
	4. All code edited and powered by Adobe Dreamweaver Licensed to SUU "Southern Utah University" in computer labs as part of CSIS2000 Web Development Project
	in Relation to Professor Dezhi Wu and for educational purposes only. Also used Adobe Photoshop  Licensed to SUU "Southern Utah University" in computer labs as part of CSIS2000 Web Development Project. Software also used Komodo Editor free open source program for educational purposes only
	 and in Relation to Professor Dezhi Wu and for educational purposes only.
	5. Any and all works and or images in Gallery and Slider Query belong to 
	and is with expressed consent of Carrie Trenholm|Fused Glass Designs and 
	further info can be emailed to trenholmglass@gmail.com.
	6. The referenced .CSS and .JS files that reference Templatemo, modernizr all open source files used for educational purposes only.
	7. The flexslider.css as well as any code referenced from www.woothemes.com
	code provided by and from the site as open source provided user know how to apply code for free use. 
--------------------------------------*/
/* 1. CSS resets 
--------------------------------------*/
p {	margin: 0; }
ul { padding: 0; }
li { list-style: none; }
a { text-decoration: none; }

/*  2. Universal styles edited by Rolando Pereira
--------------------------------------*/

* {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: medium;
}
body { background-color: #313030; }

h1 {
	font-size: 30px;
	line-height: 1.5;
	text-shadow: 1px 1px 1px rgba(167, 221, 255, 0.5);
	margin: 0 0 10px 0;
}

h2 { color: #EBEBEB; }

h1, h2, h3 { font-weight: 300; }

h2, h3, footer i { font-size: 18px; }

p, form, ul { font-size: 14px; }
                    

.subtitle { font-weight: bold; color: #909090; }

.portfolio-group .detail p { font-size: 12px; }

footer p, address {	font-size: 14px; }

#templatemo_timeline .time_line_paragraph h1 { font-size: 24px; }
/*   Credit Adam Khoury
--------------------------------------*/
#cpBtn{
	position: fixed;
	right: 20px;
	width: 20px;
	height: 24px;
	background: linear-gradient(#FFF,#DDD);
	border: #AAA 1px solid;
	border-radius: 2px;
	padding: 2px 5px;
	cursor: pointer;
	transition: border 0.3s linear 0s;
}
#cpBtn:hover{
	border: #06F 1px solid;
}
#cpBtn:hover div{
	background: #FF0000;
}
#cpBtn > div{
	width: 20px;
	height: 4px;
	background: #333;
	margin-top: 3px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 3px;
	border-radius: 4px;
	transition: background 0.3s linear 0s;
}
#cp{
	position: fixed;
	right: -260px;
	top: 50px;
	width: 260px;
	height: 400px;
	background: #DDD;
	opacity: 0;
	transition: opacity 0.3s linear 0s, right 0s linear 0s;
	cursor: pointer;
	border-bottom-left-radius: 25px 25px;
	border-top-left-radius: 25px 25px;
}
/*  Credit Adam Khoury
--------------------------------------*/
.flashit{
	-webkit-animation: flash linear 1s infinite;
	animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}


#logo a {
	color: #2A2A2A;
	margin-left: 15px;
	margin-right: 15px;
	font-size: 86px;
	font-style: normal;
	font-weight: 100;
	line-height: 96px;
	text-decoration: none;
	text-shadow: 3px 2px 4px #00B0E5;
	margin-bottom: 0px;
	font-family: "Dolce Vita Light";
}
#logo, #templatemo_timeline i {	font-size: 50px; }

.main-container { 
	max-width: 1200px;
	margin: 0 auto;	
	background: #6B6B6B;
	box-shadow: 0 0 5px rgba(107, 110, 112, 0.4); 
}

.content-container {
	box-sizing: border-box;
	max-width: 1170px;
	width: 100%;
	margin: 0 auto;
	padding: 15px;
	-webkit-box-shadow: 0px 0px 0px 0px;
	box-shadow: 0px 0px 0px 0px;
}
.content { padding-top: 15px; }

.main-nav { border-bottom: #DDDDDD 1px solid; }

.main-nav li {
	margin-right: 5px;
	background-color: rgba(176,176,176,1.00);
	box-shadow: 1px 1px 1px rgba(80, 80, 80, 0.4);
}

.main-nav li a {
	display: block;
	padding-top: 6px;
	padding-right: 6px;
	padding-left: 6px;
	padding-bottom: 6px;
}

.main-nav li.active { background-color: #A7DDFF; padding: 12px 24px; }

.main-nav li a:hover { background-color: #A7DDFF; }

nav {
	overflow: hidden;
	padding: 27px 45px 20px 20px;
}

ul.nav {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

ul.nav li {	cursor: pointer; display: inline-block; }
ul.nav li.active {	cursor: default; }
ul.nav li, .portfolio-group .detail h3, .templatemo_form button {
	text-transform: uppercase;
}

p {
	line-height: 1.8em;
	font-size: 16px;
}

a {
	color: #363636;
	font-family: "MyriadSetPro Thin";
	font-size: large;
	-webkit-box-shadow: 0px 0px 0px 0px;
	-moz-box-shadow: 0px 0px 0px 0px;
	box-shadow: 0px 0px 0px 0px;
	font-style: normal;
	font-variant: normal;
	text-indent: 2px;
	font-weight: 700;
}

i {	color: #909090; }

footer {
	margin-top: 20px;
	padding: 15px 20px 10px 20px;
	overflow: hidden;
	background-color: rgba(237, 237, 237, 0.4);
	clear: both;
}

footer p {
	float: left;
	margin-top: 20px;
	margin-right: 40px;
	margin-left: 40px;
	margin-bottom: 20px;
	color: #909090;
	font-family: "MyriadSetPro UltraLight";
}

footer i {	
	display: inline-block;
	padding: 20px; 
}

footer i:hover, footer i:active { color: #A7DDFF; }

ul.checkmark li:before { /*http://astronautweb.co/snippet/font-awesome/*/
	font-family: 'FontAwesome'; 
	content: '\f058'; 
	margin:0 5px 0 -15px; 
	color: #929292; 
}
 
ul.pad-left {	
	overflow: auto;	
	padding-left: 30px;	
	line-height: 1.8em; 
}

img.shadow { box-shadow: 5px 10px 10px -5px rgba(0,0,0,0.5); }

p.justify {
	text-align: justify;
	font-size: 16px;
}

.templatemo-detail img { 
	max-width: 250px; 
	width: 100%; 
	height: auto;
	margin-right: 15px;	
	margin-bottom: 15px; 
}

.fa { margin: 6px; }

.left {
	float: left;
}

.right {
	float: right;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	margin-right: 73px;
}
.center-text {
	text-align: center;
	color: #1A1A1A;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

/* 3. Portfolio styles
-----------------------------------------*/
#portfolio-content {
	margin:  0 auto;
	display:-webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
#portfolio-content img { 
	width: 250px; 
	height: 250px; 
}
.portfolio-group {
	display: inline-block;
	width: 250px;
	height: 250px;
	position: relative;
	margin: 15px 10px;
}
.portfolio-group img {
	width:100%;
	height:100%;
	position:absolute;
	display:block;
	box-shadow: 5px 10px 10px -5px rgba(0,0,0,0.5);
}
.portfolio-group .detail {
	display:block;
	width:100%;
	height:100%;	
	position:absolute;
	background-color: rgba(255, 255, 255, 0.7);
	box-shadow: 5px 10px 10px -5px rgba(0,0,0,0.5);
}
.portfolio-group .detail h3 {
	padding: 15px 10px 0 10px;
}
.portfolio-group .detail p {
	padding: 10px;
	line-height: 1.8em;
	text-align: center;
}
.portfolio-item { 
	display:block; 
	width:100%; 
	height:100%; 
}
.portfolio-item .btn {
	width: 80px;
	height: 30px;
	border: 1px solid rgba(0, 0, 0, 0.09);
	background-color: rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.44);
	-webkit-box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.44);
	-ms-box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.44);
	box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.44);
}
.portfolio-item .btn:hover { background-color: #ddd; }
.pagination { width: 100%; }
.pagination li {
	width: 30px;
	height: 30px;
	line-height: 30px;	
	background-color: white;
	-moz-box-shadow: 1px 1px 1px rgba(51,51,51,0.4);
	-webkit-box-shadow: 1px 1px 1px rgba(51,51,51,0.4);
	-ms-box-shadow: 1px 1px 1px rgba(51,51,51,0.4);
	box-shadow: 1px 1px 1px rgba(51,51,51,0.4);
	margin-right: 10px;
	border: 1px solid rgba(44, 44, 44, 0.1);
}
.pagination li:last-child {	margin-right: 0; }
.pagination li.active, .pagination li:hover { background-color: #A7DDFF; }

/*  4. CSS3 flip
Credits	http://stackoverflow.com/questions/13474210/css3-3d-flip-animation-ie10-transform-origin-preserve-3d-workaround
	http://www.cssplay.co.uk/menu/css3-3d-card.html
	http://cssdeck.com/labs/gddxuzki
-------------------------------------------------------------------------------------*/
.portfolio-group .portfolio-item img,  .portfolio-group .portfolio-item .detail {
	-ms-transition:0.5s ease-in-out;
	-webkit-transition:0.5s ease-in-out;
	-moz-transition:0.5s ease-in-out;
	transition:0.5s ease-in-out;
}
.portfolio-group .detail {
	-ms-transform:perspective(800px) rotateY(180deg);
	-moz-transform:perspective(800px) rotateY(180deg);
	-webkit-transform:perspective(800px) rotateY(180deg);
	transform:perspective(800px) rotateY(180deg);
}
.portfolio-group img {
	-ms-transform:perspective(800px) rotateY(0deg);
	-moz-transform:perspective(800px) rotateY(0deg);
	-webkit-transform:perspective(800px) rotateY(0deg);
	transform:perspective(800px) rotateY(0deg);
}
.portfolio-item:hover > .detail {
	-ms-transform:perspective(800px) rotateY(0);
	-moz-transform:perspective(800px) rotateY(0);
	-webkit-transform:perspective(800px) rotateY(0);
	transform:perspective(800px) rotateY(0);	
}
.portfolio-item:hover > img {
	-ms-transform:perspective(800px) rotateY(-179.9deg);
	-webkit-transform:perspective(800px) rotateY(-179.9deg);
	-moz-transform:perspective(800px) rotateY(-179.9deg);
	transform:perspective(800px) rotateY(-179.9deg);	
}
.portfolio-group img, .portfolio-group .detail {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* 5. Timeline styles
--------------------------------------------------------------*/
#templatemo_timeline { background: #fff; }
#templatemo_timeline .container-fluid {
    background: url("../images/time_line_bg.jpg") repeat-y center top;
}
#templatemo_timeline .time_line_caption {
    background: #f15556;
    padding: 10px 20px 10px 20px ;
    border-radius: 5px;
    line-height: 40px;
    clear: both;
    color: #fff; 
}
#templatemo_timeline .time_line_paragraph {
    background: #e6e6e6;
    border-radius: 5px;
    margin-top: 50px;
    overflow: hidden;
}
#templatemo_timeline {	margin-top: -50px; }
#templatemo_timeline .time_line_paragraph a {
    color: #000;
    text-decoration: underline;
}
#templatemo_timeline .time_line_paragraph h1 {
    text-align: left;
    margin: 0;    
    line-height: 30px;
    color: #000;
    padding: 20px 20px 20px 20px;
    clear: both;
}
#templatemo_timeline .time_line_paragraph p {
    padding: 0px 20px 20px 20px;
    text-align: left;
    margin: 0;
    line-height: 2em;
    color: #000;
}
#templatemo_timeline i { padding: 20px 20px 0 0; }

/*	6. Contact Styles 
--------------------------------------------------------------*/
.templatemo_contactmap {
	float: left;
	width: 60%; 
	height: auto; 
	max-width: 680px; 
	max-height: 400px; 
	padding-right: 15px;
	margin-bottom: 30px;
	box-sizing: border-box;
}
#templatemo_map { 
	width: 100%; 
	height: 400px; 
}
form {
	float: right;
	font-weight: 400;	
  	max-width: 470px;
  	width: 40%;
}
address {
	margin: 15px 0px;
}
span.btn {
	display: block;
	font-size: 12px;
	line-height: 30px;
	margin: 0 auto;
	text-transform: uppercase;
	border: none; 
	cursor: pointer; 
}
.templatemo_form button {
	width: 160px;
	line-height: 34px;
	color: #ffffff;
	border-radius: 17px;
	background: #a2c044;
	border: none;
	margin-top: 10px;
}
.templatemo_form input {
	height: 34px;	
	margin-bottom: 5px;
}
.templatemo_form textarea {
  	height: 130px;
}
.templatemo_form input, .templatemo_form textarea {
	font-family: 'Open Sans', sans-serif; /* for Firefox */
	font-size: 14px; 
	padding: 6px 2%;
	width: 95%;
	border: 1px solid #e5e5e5;
}
.main-nav #logo h2 {
}
.right {
	float: right;
}



/* 7. Media queries 
-----------------------------------------------------*/
@media screen and (max-width: 980px) {
	.templatemo_contactmap { 
		width: 100%; 
		max-width: 600px; 
		margin-left: auto; 
		margin-right: auto;
		padding: 0;
		float: none;
	}
	form {	
		float: none;
		max-width: 600px; 
		width: 100%;
		margin: 15px auto;
	}
}
@media screen and (max-width: 806px) and (min-width: 701px) {
	#logo {
		float: none;
		text-align: center;
	}
	.main-nav ul { float: none;	}
}
@media screen and (max-width: 700px) {
	#logo {
	float: none;
	text-align: center;
	font-size: 24px;
	color: #726969;
	}
	.main-nav ul {
	display: block;
	float: none;
	padding-top: 13px;
	padding-right: 13px;
	padding-left: 13px;
	padding-bottom: 13px;
	margin-left: 60px;
	opacity: 1;
	}
	.main-nav ul.nav li {
		width: 96%;

	}
	.main-nav ul.nav li a { padding: 2%; }
	.main-nav ul.nav li.active { padding: 0; padding: 2% 0; }
	.main-nav ul.nav li a:hover {
	padding: 2%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

	header {
		padding-top: 0;
		padding-bottom: 0;
	}
	h1 {
	margin-top: 0;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 24px;
}
	h2 { margin-bottom: 20px; }
	form {
		width: 100%;
	}
}
@media screen and (max-width: 600px) {
	.about-detail ul { padding-left: 20px;	}
	img.left {
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	footer p {
		float: right;
		margin-bottom: 15px;
	}
	.social { clear: both; }
}
@media screen and (max-width:480px) {
	.main-nav li { 
		margin-left: 0; 
		margin-right: 0;	
	}
	.main-nav ul.nav li.active { padding: 0; padding: 2% 0; }
}
@media screen and (max-width:400px) {
	.main-nav li {
		width: 80px;
	    margin-left: 0;
	    margin-right: 0;
	    font-size: 12px;
	    text-align: center;
	    line-height: 30px;
	}
	.main-nav ul.nav li a { padding: 2%; }
	.main-nav ul.nav li.active { padding: 0; padding: 2% 0; }
	.main-nav ul.nav li a:hover { padding: 2%; }
}
.png {
	margin-right: 45px;
	margin-left: 38px;
	border-top-right-radius: 0px 20px;
	border-bottom-right-radius: 0px 0px;
	padding-right: 1px;
	-webkit-box-shadow: 0px 0px 0px 0px;
	box-shadow: 0px 0px 0px 0px;
	}