/*
	Main Styles.
	By: Edwin Fajardo
	Date-Time: 2019-06-03 22:51
	All rights reserved.
*/

/*	Element */
#container
{
	/*max-width: 1200px;*/
	margin: 0px auto;
	/*background-color: #ffffff;
	box-shadow:0px 0px 20px #a0a0a0;*/
	padding: 0px;
}

#contact_p
{
	text-align:center;
}

#contact_p span
{
	display: inline-block;
	padding: 10px 0px;
	vertical-align: top;
	font-size: 15pt;
}

#name
{
	font-size: 40pt;
	color:#666666;
	display: block;
	margin: 40px 0px 20px 0px;
	transition: all 1s;
	transform: translateY(-30px) scale(0.5, 0.5);
}

#description
{
	/*font-size: 14pt;*/
	color: #999999;
	display:block;
	margin:20px 0px;
	transition:all 1s;
	transform:scaleX(1.5);
}

#phrase
{
	font-size:35pt;
	font-family: 'Coronet';
	font-weight: normal;
	margin: 50px 0px;
	display: block;
	padding: 40px 20px;
	border-radius:3px;
	color: #000000;
	transition:all 1s;
}

#phrase:hover
{
	transform: none;
}

#social_icons
{
	margin: 20px 0px;
	position: absolute;
	bottom: 0px;
}

#left_header, #right_header
{
	width: auto;
}

.dividing_line
{
	width: 50%;
}

.icon
{
	width: 40px;
	border: 0px;
}

.small_icon
{
	width: 20px;
	border: 0px;
}

.large_icon
{
	width: 70px;
}

.full_image
{
	max-width: 100%;
	width: 250px;
}

.site_preview
{
	width: 100%;
}

.site_link
{
	display: block;
	padding: 5px;
	overflow: hidden;
	text-decoration: none;
}

.site_link:hover
{
	background-color: #d9e0ff;
}

.site_link img
{
	float: left;
	margin: 0px 10px 20px 0px;
}

.site_name
{
	display: block;
}

.site_description
{
	color: #666666;
	font-size: 10pt;
}

#social_icons a
{
	text-decoration: none;
	display: inline-block;
	padding: 3px;
	transition:all 1s ease-out 2s;
	transform: translateX(300px);
}

#social_icons a:hover
{
	background-color: #d9d9d9;
	transform: scale(1.5, 1.5);
}

#about
{
	color: #ffffff;
	background-color: #3c3c87;
	transition: all 1s ease-out 1s;
	transform: rotateX(-90deg);
	background-image: url('../images/entre_rios.jpg');
	background-size: cover;
	padding: 50px 10px 0px 10px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
}

#about_photo
{
	overflow: hidden;
}

#about_photo img
{
	width: 100%;
	margin: 0px 0px -10px 0px;
	visibility: hidden;
}

#about_text
{
	background-color: rgba(0,0,0,0.5);
	padding: 10px;
	border-radius: 5px;
	width: 400px;
	margin-bottom: 10px;
}

.p_text
{
	text-align:justify;
	line-height: 150%;
}

.photo_container
{
	overflow: hidden;
	height:600px;
	width: 420px;
	margin: 0px auto;
}

.hide
{
	transform: translateY(10px);
	transition: transform 1s;
}

#top_header
{
	display: none;
}

.art_section
{
	background-color: #b7e6ff;
}
/*	Classes */
.a_tooltip
{
	color: inherit;
}

.a_tooltip:hover
{
	text-decoration: none;
}

.table
{
	display: table;
	width:100%;
}

.table_cell
{
	display: table-cell;
	vertical-align:top;
	padding: 10px 10px 0px 10px;
	width: 50%;
	position: relative;
}

.left_column
{
	border-right: 1px solid #99ccff;
	width: 50%;
}

.col_40
{
	width: calc(100% - 400px);
}

.col_60
{
	width: 400px;
}

.p_icon
{
	text-align: center;
}

.item img
{
	max-width:250px;
	max-height:100px;
}

.item
{
	margin: 10px 0px;
	border-top: 1px solid #d9d9d9;
}

.item a
{
	text-decoration: none;
	color: #666688;
}

.services_section
{
	background-color: #d3eaff;
}

.service_link
{
	width: calc(33% - 20px);
	display: inline-block;
	padding: 5px;
	background-color: #ffffff;
	border-radius: 5px;
	margin: 5px;
	transform: translateY(20px);
	transition: transform 1s 1s;
}

.service_link:hover
{
	background-color: #d9d9d9;
}

.service_link img
{
	filter: grayscale(1);
}

.service_link .service_name
{
	display: inline-block;
	position: absolute;
	padding: 15px;
}

.subsection
{
	color: #666666;
	text-align: center;
}

.item a:hover
{
	text-decoration: underline;
}

.photo_container img
{
	width: 100%;
	transition:all 1s 1s;
	transform:translateX(100px) scale(0.5);
	opacity: 0.5;
}

.normal_link
{
	text-decoration:none;
}

.normal_link:hover
{
	text-decoration:underline;
}

.contact_icons
{
	text-align: center;
}

.contact_icons span
{
	display: inline-block;
	font-size: 20pt;
	color: #999900;
	padding: 10px;
	vertical-align: top;
}

#contact_form .entry
{
	text-align: center;
	padding: 10px;
}

#contact_form
{
	width: 100%;
	max-width: 600px;
	margin: 50px auto 20px auto;
}

#contact_form input, #contact_form textarea
{
	resize: none;
	width: 100%;
	font-size: 12pt;
	padding: 5px;
	outline: 0px;
	border: 1px solid #d9d9d9;
	font-family:Verdana, Geneva, Sans-Serif;
}

#contact_form button
{
	font-size: 12pt;
	padding: 10px;
	width: 200px;
	background: -webkit-linear-gradient(top, #666666 0%, #000000 20%, #000000 80%, #888888 100%);
	background: -moz-linear-gradient(top, #666666 0%, #000000 20%, #000000 80%, #888888 100%);
	background: linear-gradient(top, #666666 0%, #000000 20%, #000000 80%, #888888 100%);
	color: #ffffff;
	border: 0px;
	box-shadow: 0px 0px 2px 2px #999999;
	font-family:Verdana, Geneva, Sans-Serif;
}

#contact_form button:hover
{
	background: -webkit-linear-gradient(top, #666666 0%, #333333 20%, #333333 80%, #888888 100%);
	background: -moz-linear-gradient(top, #666666 0%, #333333 20%, #333333 80%, #888888 100%);
	background: linear-gradient(top, #666666 0%, #333333 20%, #333333 80%, #888888 100%);
	cursor: pointer;
}

.dl_container
{
	text-align: center;
}

.loading, .loaded, .fail
{
	display: none;
	text-align: center;
}

.loading span, .loaded span, .fail span
{
	display: inline-block;
	vertical-align: top;
	padding: 20px;
}

.loading
{
	color: #999999;
}

.loaded
{
	color: #009900;
}

.fail
{
	color: #ff0000;
}

.list li:before
{
	content: '';
	display: inline-block;
	height: 20px;
	width: 20px;
	background-image: url('../images/checked.png');
	background-size: contain;
	background-repeat: no-repeat;
	margin: 20px 10px 0px -20px;
}

.list
{
	list-style: none;
}

/*	Tags */
body
{
	font-family: Verdana, Geneva, Sans-Serif;
	/*background-color: #e0e0ff;*/
	padding: 0px;
	margin: 0px;
}

hr
{
	border: 2px solid #3333ff;
}

section
{
	border-top:1px solid #d9d9d9;
	padding: 50px 10px;
}

footer
{
	background-color: #666666;
	color: #ffffff;
	padding: 10px;
}

footer a
{
	text-decoration: none;
	color: #e0e0e0;
}

footer a:hover
{
	text-decoration: underline;
}

@media screen and (max-width: 1024px)
{
	.photo_container
	{
		width: 400px;
		height: 490px;
	}

	#phrase
	{
		font-size:28pt;
		margin: 30px 0px;
	}
	.col_40
	{
		width: calc(100% - 315px);
	}
	
	.col_60
	{
		width: 315px;
	}

	#about_text
	{
		width: 315px;
	}
}

@media screen and (max-width: 700px)
{
	#about
	{
		background-image: none;
		padding: 0px;
	}

	#about_photo
	{
		background-image: url('../images/lago_coatepeque.jpg');
		background-size: cover;
		padding: 20px 0px 0px 0px;
	}

	#about_photo img
	{
		visibility: visible;
	}

	#about_text
	{
		border-radius: 5px;
		position: relative;
		background-color: transparent;
		width: auto;
	}
	#container
	{
		box-shadow:0px 0px 10px #a0a0a0;
	}

	#name
	{
		font-size: 24pt;
		margin: 10px 0px 20px 0px;
	}

	#description
	{
		font-size: 12pt;
		margin:10px 0px;
		text-align: center;
	}

	#phrase
	{
		font-size:20pt;
		margin: 30px 0px;
		transform: none;
	}

	#social_icons
	{
		text-align: center;
		position: relative;
	}

	#right_header
	{
		display: none;
	}

	#top_header
	{
		display: block;
	}

	.col_40, .col_60
	{
		width: 100%;
	}

	.table
	{
		display: block;
	}

	.table_cell
	{
		display: block;
		width: 100%;
		padding: 0px;
	}

	.photo_container
	{
		width: 100%;
		height: 300px;
	}

	.left_column
	{
		border: 0px;
		width: 100%;
	}

	h1, h3
	{
		text-align: center;
	}
	
	.service_link
	{
		width: calc(100% - 10px);
		display: block;
		padding: 5px;
		background-color: #ffffff;
		border-radius: 5px;
		margin: 5px 0px;
	}
}