/*
Theme Name: Simple Parallax Website
Description: Simple Parallax Scrolling Effect
Author: Samuel Dalusung
*/

/*= GENERAL STYLING
--------------------------------------------------------*/
/*@font-face{
    font-family: Gothicc;
    src: url(css/GOTHIC.eot);    
}
@font-face{
    font-family: Gothicc;
    src: url(css/GOTHIC.ttf);    
}*/

@font-face{font-family: "Gothicc";src:url(./GOTHIC.eot)}
@font-face{font-family: "Gothicc";src:url(./GOTHIC.ttf)}
@font-face{font-family: "Gothicc_B";src:url(./GOTHICB.ttf)}
@font-face{font-family: "Helvetica";src:url(./helvetica.ttf)}
@font-face{font-family: "Helvetica_LT";src:url(./helvetica_lt_regular.ttf)}

body,html {
        background-color: #e6e7e8;
	margin: 0;
	padding: 0;
	width: 100%;
        height: 100%;        
}

h1 { 
    font-family: Gothicc;
	font-weight:normal;
	font-size: 20%;
	text-align: center;
	color: #00588b;
	margin: 0;
	padding: 0;
}

h2 {
   font-family: Gothicc;
   font-weight: normal;
   font-size: 13%;
   text-align: center;
   color: #00588b;
   margin: 0;
   padding: 0;
}

h3 {
    font-family: Oswald;
    font-weight: normal;
    font-size: 16px;
    text-align: center;
    margin: 5px 0;
    padding: 0;
    z-index: 1;
    position: relative;
}
table{ 
        font-family: Gothicc;
	font-weight:normal;
	font-size: 12px;
	text-align: justify;
	color: #3a7eb0;
	margin: 0;
	padding: 0;
}


.center { margin: 0 auto; }
.content{ 
    margin: 0 auto; 
    height:100%; 
    width: 100%; 
}
.clear { clear: both; }

a.lpanel { float: left; color: #3a7eb0; font-size: 12px; font-family:"Gothicc"; text-decoration: none; margin: 7px 11px; }
a.rpanel { float: right; color: #3a7eb0;  font-size: 12px; font-family:"Gothicc"; text-decoration: none; margin: 7px 11px; }

a.lpanel:hover{ color: #e6e7e8; }
a.rpanel:hover{ color: #e6e7e8; }

/*= HEADER & MENU
---------------t-----------------------------------------*/

#header { 
	width: 100%; 
	/*=background: url('../img/header-bg.png');*/ 
        /*background-color: #e6e7e8;*/
        background-color: transparent;
	height: 5%; 	
	position: fixed;
	margin-top: 0px;
        
}

#nav { 
    width: 47.7%; 
    height: 100%; 
    position: left;    
    margin: 0 auto; 
    transition: height 0.3s linear 0s, padding 0.3s linear0s;
    transform: translate(35%, -3%);
    /*transform: translateY(-3px);*/
    display: none;
/*    padding 15px 32px;*/
}
#logo a { 
    color: #fff; 
    text-decoration: none; 
    float: left; 
    font-size: 30px; 
    margin-top: 20px; 
    color: #fff; 
    font-family:"Gothicc"; 
    font-weight: bold; 
}
#nav ul{
	list-style: none;
	display: inline-block;
	margin: 7px auto;
        text-align: center;
        
}
 
#nav li{
	margin: 0px auto;	
	float: left;
        display: contents;
        color: #00588b;
        font-size: 23px;
        font-family: 'Helvetica';
/*	padding-top: 3px;*/
        width: 29px;
        height: 29px;
        border: 1px solid #3a7eb0;
        border-radius: 29px;
/*      padding: 0px 0px;*/
        transform: translate(-3px);
        
}
#nav li a { 
        color: #00588b; 
        opacity:0.6; 
        font-size: 30px; 
        text-decoration: none; 
        font-family: 'Helvetica_LT';
/*        border-right: 1px solid #3a7eb0; CONTROLA LAS LINEAS DE SEPARACIÓN 
        border-left: 1px solid #3a7eb0;*/        
        display: inline-block;
        padding: 7px 7px;
        
}
#nav li a.active { 
    color: #e6e7e8; 
    opacity:1; 
/*    border-bottom: 0px solid #fff; */
    background: #00588b;
/*    padding: 7px 5px;*/
    display: inline-block;
    width: 35px;
    Height: 35px;
    border-radius: 35px;
   
}
#nav li a:hover { 
    color: #e6e7e8; 
    opacity:1; 
    background: #3a7eb0;
/*    padding: 7px 5px;*/
    width: 35px;
    Height: 35px;
    display: inline-block;
    border-radius: 35px;
}




/*= QUOTES AND SOME ELEMENTS
--------------------------------------------------------*/
.vym{
    font-family: 'Amatic SC', cursive;
    font-weight: normal;
    font-size: 15px;
    text-align: center;
    margin: 0px auto;
}
.quotes {   
 font-family: 'Pathway Gothic One', serif;
   font-weight: normal;
   font-size: 15px;
  text-align: center;
  margin: 0px auto;
}
.transbox{
   
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */

}
.logo_apg_vec { 
  background-image: url('../vec/logo_apg.svg'); 
  width: 600px; 
  height: 247px; 
  margin: 0 auto; 
  position: relative; 
  bottom: 0px; 
  z-index: 1000;
}
.form_email {
    position: relative;
    display: inline-block;
    cursor: pointer;
    float: left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
}
.form_email .content_form_email {
  visibility: hidden;
  width: 480px;
  background-color: #e6e7e8;
  font-family: 'Helvetica';
  color: #00588b;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
.form_email .content_form_email::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #3a7eb0 transparent transparent transparent;
}
.form_email .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.box_message {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
}
.box_message .content_box_message {
  visibility: hidden;
  width: 240px;
  background-color: #e6e7e8;
  font-family: 'Helvetica';
  color: #00588b;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 2;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
.box_message .content_box_message::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #3a7eb0 transparent transparent transparent;
}
.box_message .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.textbox_in{
    width: 300px;
    border: 1px solid #988787;
    bottom: 0;
    box-shadow: 0.1em 0.1em 0.2em #D3D3E3;
    color: #222;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-left: 3px;
}


@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


 .author_name_white { font-family:"Muli";  margin: 70px 0 0 75px; color: #fff; font-size: 20px; }  
 .author_name_gray { font-family:"Muli";  margin: 70px 0 0 75px; color: #94a4a4; font-size: 20px; }  
 .quotes_container { width: 800px; margin: 0 auto; }

.container { overflow:hidden }
.pusher { margin-top:-100%; transition:margin-top .5s ease; }
.open .pusher { margin-top:0%; }
 
#id_apg { background: url('../vec/logo_apg.svg')no-repeat; width: 3rem; height: 1.5rem; margin: -0.1rem 0px 0 0.1rem; float: left; bottom: 0px; display: block; transition: height 0.3s linear 0s;}
#mini_apg { 
    background: url('../img/logo_apg.png') no-repeat;
    background-size: contain;
    width: 35%; 
    height: 100%; 
    margin: 0px 0px 0 0; 
    float: left; 
    bottom: 0px; 
    display: none; /* inicial none*/
    transition: height 0.3s linear 0s; 
    cursor: pointer; 
    transform: translate(11%) 
}
#header_apg { background: url('../img/header_apg.png')no-repeat; width: 641px; height: 116px; margin: 0 auto; position: relative; bottom: 0px; transition: height 0.3s linear 0s; }
#header_skip { 
    background: url('../img/header_bskip.png') no-repeat; 
    background-size: contain;
    background-position: center;
    background-color: #e6e7e8; 
    width: 16%; 
    height: 100%; 
    margin: 0px 0px 0 0; 
    float: right;    
    bottom: 0px; 
    display: table-cell; 
    transition: height 0.3s linear 0s; 
    cursor: pointer; 
    transform: translate(-11%) 
}

#screen_vid { 
    background-color: #00588b; 
    width: 90%; 
    height: 30%; 
    margin: 0 auto; 
    position: relative; 
    bottom: 0px; 
    transition: height 0.3s linear 0s; 
}

#asesoria_1{ background: url('../img/asesoria_1.jpg')no-repeat; width: 300px; height: 260px; margin: 0 auto; position: inherit ; bottom: 0px; }
#divider { background: url('../img/divider.png')no-repeat; width: 300px; height: 35px; margin: 0px auto 27px auto; }
#ribbon { background: url('../img/ribbon.png')no-repeat; width: 251px; height: 48px; margin: 0 auto;  display: block; position: relative; top: -38px; }

#pbx{font-family:"Gothicc_B"; font-size: 16px; color: #00588b; margin: 0 auto;  display: block; position: relative; bottom: -3px; left: 430px; }

#icon_fb { background: url('../img/icon_fb.png')no-repeat; width: 21px; height: 21px; margin: 0 auto;  display: table-cell; position: static; bottom: 0px; left: 0px; cursor: pointer;}
#icon_tw { background: url('../img/icon_tw.png')no-repeat; width: 21px; height: 21px; margin: 0 auto;  display: table-cell; position: static; bottom: 0px; left: 0px; cursor: pointer;}

#icon_mg { background: url('../img/icon_mg.png')no-repeat; width: 17px; height: 15px; margin: 0 auto;  display: block; position: relative; bottom: 42px; left: 285px; }

#txt_auto { font-family:"Gothicc"; font-size: 8px; color: #00588b; margin: 0 auto;  display: block; position: relative; bottom: 90px; left: 475px; }

#txt_a { font-family:"Gothicc"; font-size: 11px; color: #00588b; margin: 0 auto;  display: block; position: relative; bottom: -12px; left: 260px; }
#txt_p { font-family:"Gothicc"; font-size: 11px; color: #00588b; margin: 0 auto;  display: block; position: relative; bottom: -31px; left: 284px; }
#txt_g { font-family:"Gothicc"; font-size: 11px; color: #00588b; margin: 0 auto;  display: block; position: relative; bottom: -27px; left: 371px; }

#flag { width: 15px; height: 15px; box-sizing: content-box; padding-top: 2px; position: inherit; background: #e1e1e1; color: #00588b; font-size: 15px; letter-spacing: 0.2em; display: none; text-align: center; text-transform: uppercase; } 
#flag:after { content: ""; position: inherit; left: 0; bottom: 0; width: 0; height: 0; border-bottom: 5px solid #eee; border-left: 50px solid transparent; border-right: 50px solid transparent; }

#snowflakes1 { background: url('../img/snowflakes.png')no-repeat; width: 24px; height: 21px; margin: 0 auto;  display: block; position: relative; bottom: -54px; left: -102px; }
#snowflakes2 { background: url('../img/snowflakes.png')no-repeat; width: 24px; height: 21px; margin: 0 auto;  display: block; position: relative; bottom: -33px;  right: -100px; }



/*= BUTTONS
--------------------------------------------------------*/

button.btn-know { 
	padding: 10px 45px; 
	margin: 5px 1%;
	text-align: center;
	border: 2px solid #3a7eb0; 
	color: #00588b; 
	background: #fff; 
	font-size: 13px;
	cursor: pointer;
	text-shadow: -1px 1px 0px rgba(90, 90, 90, 0.56);
	-webkit-border-radius: 7px;
	border-radius: 5px;
        
        
}



.btn-know:hover { background: #3a7eb0; color: #e6e7e8; }
ul.built { list-style: none; margin: 0 auto; width: 730px; }
.built li img{ float: left; padding-right: 34px; }




/*= SLIDES STYLING
--------------------------------------------------------*/
#slide1{
        background-color: #e6e7e8;
        background-size: cover;
/*	opacity: 0.3;
        z-index: -1;*/
        color: #333333;
	height: 100%;
	margin: 0;
        
/*	padding: 7% 0 0 15%;*/
	
        position: inherit;
}
#slide2{
        background-color: #e6e7e8;
        background-size: cover;
/*	opacity: 0.3;
        z-index: -1;*/
        color: #333333;
	height: 100%;
	margin: 0;
/*	padding: 5rem 0 0 1rem;*/
	background-size: cover;
        position: inherit;
        display: none;
}
#slide3, #slide4{ 
    height: 100%;
    width: 100%; }
#slide3{
	background:url('../img/slide1.png') 50% 0 no-repeat fixed transparent;
        background-color: #fff;
/*	opacity: 0.3;
        z-index: -1;*/
        color: #333333;

	margin: 0;
	padding: 7rem 0 0 1rem;
	background-size: cover;
        position: inherit;
}


#slide4{
	background: url('../img/slide2.jpg') 10% 0 no-repeat fixed;
/*        opacity: .4;
        z-index: -1;*/
/*        background-color: #fff;*/
        background-color: rgba(230,231,232,0.7);
	color: #333333;
	
	margin: 0 auto;
	overflow: hidden;
	padding: 100px 0 160px 0;
        background-size: cover;
}

#slide5{
	background: url(../img/slide3.jpg) 50% 0 no-repeat fixed;
	color: #fff;
	height: 100%;
        width: 100%;
	padding: 6rem 0rem 0rem 0rem;
	background-size: cover;
}

#slide6{
	background: url(../img/slide4.jpg) 50% 0 no-repeat fixed;
        background-color: #fff;
	color: #fff;
	height: 100%;
        width: 100%;
	padding: 0px 0 0px 0;
        background-size: cover;
}

#slide7{
	background: url(../img/slide5.jpg) 50% 0 no-repeat fixed;
	height: 100%;
        width: 100%;
	margin: 0 auto;
	padding: 50px 0 80px 0;
	color: #fff;
	background-size: cover;
}
#slide8{
	background: url(../img/slide6.jpg) 50% 0 no-repeat fixed;
        background-color: #fff;
	color: #fff;
	height: 100%;
        width: 100%;
	padding: 0px 0 0px 0;
        background-size: cover;
}
#slide9{
	background: url(../img/slide7.jpg) 50% 0 no-repeat fixed;
        background-color: #fff;
	color: #fff;
	height: 100%;
        width: 100%;
	padding: 100px 0 160px 0;
        background-size: cover;
}


/*= FOOTER 
--------------------------------------------------------*/

#copyright  { color: #fff; font-family:"Gothic";  font-size: 14px; margin-top: 100px; text-align: center;  }
#copyright  a { text-decoration: none; color: #fff;  }