@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'ralewaylight';
    src: url('fonts/raleway-webfont.eot');
    src: url('fonts/raleway-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-webfont.woff2') format('woff2'),
         url('fonts/raleway-webfont.woff') format('woff'),
         url('fonts/raleway-webfont.ttf') format('truetype'),
         url('fonts/raleway-webfont.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaysemibold';
    src: url('fonts/raleway_semibold-webfont.eot');
    src: url('fonts/raleway_semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway_semibold-webfont.woff2') format('woff2'),
         url('fonts/raleway_semibold-webfont.woff') format('woff'),
         url('fonts/raleway_semibold-webfont.ttf') format('truetype'),
         url('fonts/raleway_semibold-webfont.svg#ralewaysemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Cinzel-Regular';
  src: url('fonts/Cinzel-Regular.eot?#iefix') format('embedded-opentype'),  url('fonts/Cinzel-Regular.otf')  format('opentype'),
	     url('fonts/Cinzel-Regular.woff') format('woff'), url('fonts/Cinzel-Regular.ttf')  format('truetype'), url('fonts/Cinzel-Regular.svg#Cinzel-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

*{
	box-sizing: border-box;	
}

body, html
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: ralewaylight;
	font-weight: normal;
	overflow-x: hidden;
}

*
{
	box-sizing: border-box;	
}

.container
{
	width: 90%;
	margin: 0 auto;
	padding: 0 20px;
}

.sep1
{
	border-bottom: 1.5px solid rgba(247,247,247,0.2);
}

#pattern1
{
	width: 100%;
	min-height: 400px;
	background: url('../images/pattern1.png');
	background-repeat: repeat;
	position: relative;
	top:0;
	left: 0;
	z-index: 100;
}

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

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: #c8ac48; /* or whatever color you prefer */
}

.graph
{
	max-width: 100%;
	height: auto;
}

header
{
	width: 100%;
	position: absolute;
	top:0;
	left: 0;
	z-index: 99;
}

#pattern1 #bg
{
	opacity: 0.07;
}

nav
{
	padding: 20px 0;
	display: table;
	min-width: 100%;
}

#logo_cont
{
	display: block;
	float: none;
	text-align: center;
	padding: 5px 0;
}

#menu_cont
{
	display: block;
	float: none;
	padding: 5px 0;
	text-align: center;
	vertical-align: middle;
}

.menu_item
{
	display: inline-block;
	padding: 0 20px;
}

.menu_item:last-child
{
	padding: 0 0px;
}

.menu_item a
{
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

#intro
{

	width: 100%;
	text-align: center;
}

#intro_txt
{
	padding-top: 7vw;
	overflow: hidden;
}

#intro_txt2
{
	padding-top: 0%;
	overflow: hidden;
}

#intro_txt h2
{
	font-family: Cinzel-Regular;
	font-size: 3vw;
	color: #FFF;
	font-weight: normal;
}

#intro_txt2 h2
{
	font-family: Cinzel-Regular;
	font-size: 3vw;
	color: #FFF;
	font-weight: normal;
}

#intro_txt p
{
	font-family: ralewaylight;
	font-size: 20px;
	color: #908F94;
	font-weight: normal;
}

#intro_txt2 p
{
	font-family: ralewaylight;
	font-size: 20px;
	color: #908F94;
	font-weight: normal;
}

.divider1
{
	width: 90px;
	height: 4px;
	background-color: #c8ac48;
	border: none;
}

#bio
{
	width: 100%;
	background: url(../images/pattern2.png);
	background-repeat: repeat;
}

#bio #a
{
	width: 90%;
	margin-right: 10px;
	margin-left: auto;
	display: table;
	padding-top: 60px;
	padding-bottom: 65px;
	line-height: 27px;
	color: #68676C;
	font-size: 16px;
}

#bio #a h2
{
	font-family: Cinzel-Regular;
	font-size: 38px;
	color: #c8ac48;
	line-height: 55px;
}

#bio #b
{
	width: 585px;
	height: 100%;
	margin-right: auto;
	margin-left: 10px;
	display: table;
	position: relative;
}

#bio #photo
{
	display: none;
}

#bio #b_bg
{
	background: url(../images/about_bg.jpg);
	background-size: cover;
	background-position: left center;
	position: absolute;
	left: 44%;
	height: 100%;
	width: calc(100vw / 2 - 45.7%);
	z-index: 1;
	display: table-cell;
}

#cont
{
	position: absolute;
	width: 100%;
	top: 0;
}

.two_cols
{
	height: 50%;
	display: inline-block;
	vertical-align: top;
}

.three_cols
{
	width: 50%;
	height: 100%;
	display: inline-block;
	padding: 30px 20px;
	vertical-align: top;
}

#servicios
{
	width: 100%;
	padding-top: 60px;
	padding-bottom: 40px;
	background: url(../images/services_bg.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
	display: table;
	z-index: 0;
}
#servicios h2
{
	font-family: Cinzel-Regular;
	font-size: 38px;
	color: #FFF;
	line-height: 55px;
	text-align: center;
}

#servicios p
{
	color: #908F94;
	font-size: 20px;
	text-align: center;
}

#servicios li
{
	color: #C4C4C4;
	font-size: 16px;
	line-height: 27px;
}

#servicios2
{
	width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
	background: url(../images/services2_bg.jpg);
	background-repeat: no-repeat;
}

#servicios2 h2
{
	font-family: Cinzel-Regular;
	font-size: 38px;
	color: #FFF;
	line-height: 55px;
	text-align: center;
}

#servicios2 p
{
	color: #908F94;
	font-size: 20px;
	text-align: center;
}

#servicios2 li
{
	color: #FFF;
	font-size: 16px;
	line-height: 27px;
}

#servicios2 li::before {
  content: "• ";
  color: #FFF; /* or whatever color you prefer */
}

#online
{
	background: url(../images/pattern1.png);
	background-repeat: repeat;
}

#online #c
{
	width: 70%;
	padding-top: 60px;
	padding-bottom: 25px;
	padding-left: 50px;
	padding-right: 5px;
}

#online #c h2
{
	font-family: Cinzel-Regular;
	font-size: 38px;
	color: #c8ac48;
	line-height: 55px;
	text-align: left;
}

#online #c p
{
	color: #908F94;
	font-size: 20px;
	text-align: left;
}

#online #c p.m
{
	color: #908F94;
	font-size: 17px;
	text-align: left;
}

.textbox
{
	background: none;
	border: none;
	height: 30px;
	width: 400px;
	border-bottom: 2px solid #c8ac48;
	color: #FFF;
	font-size: 16px;
	padding-bottom: 10px;
	font-family: ralewaylight;
}

.textarea
{
	background: none;
	border: none;
	height: 143px;
	width: 400px;
	border-bottom: 2px solid #c8ac48;
	color: #FFF;
	font-size: 16px;
	padding-bottom: 10px;
	resize: none;
	font-family: ralewaylight;
}

.btn
{
	background: #c8ac48;
	border-color: #c8ac48;
	color: #FFF;
	font-size: 18px;
	padding: 10px 35px;
	font-family: ralewaylight;
	font-weight: bold;
}

#videos
{
	width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
	background: url(../images/services2_bg.jpg);
	background-repeat: no-repeat;
}

#videos h2
{
	font-family: Cinzel-Regular;
	font-size: 38px;
	color: #FFF;
	line-height: 27px;
	text-align: center;
}

#contactos
{
	background: url(../images/pattern2.png);
	background-repeat: repeat;
	padding-top: 65px;
	padding-bottom: 60px;
}

#contactos h2
{
	font-family: Cinzel-Regular;
	font-size: 38px;
	color: #c8ac48;
	line-height: 0px;
	text-align: left;
}

#contactos p
{
	color: #908F94;
	font-size: 16px;
	text-align: left;
	font-family: ralewaylight;
}

i
{
	vertical-align: middle;
	margin-right: 15px;
}

#copyr
{
	height: 57px;
	background-color: #c8ac48;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	font-size: 13px;
	line-height: 57px;
}

#alertBoxBg
{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,0.5);
	z-index:99999;
}

#alertBoxContent
{
	background:#FFF;
	width:30%;
	margin:0 auto;
	border-radius:7px;
	padding:10px;
	margin-top:115px;
	position:relative;
	text-align:center;
	font-family: 'ralewaylight';
}

.cliente
{
	text-align: right;
	margin: 10px 0;
	display: block;
	width: 60%;
	float: right;
	font-size: 16px;
	color: #FFF;
}

.abogado
{
	text-align: left;
	margin: 10px 0;
	display: block;
	width: 60%;
	float: left;
	color: #3DB57F;
	font-size: 16px;
}

.timestamp
{
	font-size: 12px;
	color: #9B9B9B;
}