@charset "utf-8";
/* CSS Document */
/*************************************************
**************************************************

Website Name: SySop
Website URL: sysop.com.mx
Author: Bernie (Bernardo Camarillo Beivide)
Copyright 2015. All Rights Reserved.

Color Guide
***************
FFFFFF - White
757575 - Gray
e1e1e1 - Light Gray
a3a3a4 - Mid Gray
8a8a8a - Gray
*************************************************/

/************************************************
*************************************************
1. Web Fonts -------------------- All
2. Structure Styles -------------------- All
3. Titles and text Styles ---------------------- All
4. Images Styles -------------------- All
5. Bottons Styles -------------------- All
6. Mediaquerys Styles -------------------- All
*************************************************
************************************************/

/*----------------------------------------------
------------------------------------------------
1. Web Fonts
------------------------------------------------
----------------------------------------------*/
@font-face {
    font-family: 'bebas_neueregular';
    src: url('../fonts/bebasneue-webfont.eot');
    src: url('../fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebasneue-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue-webfont.woff') format('woff'),
         url('../fonts/bebasneue-webfont.ttf') format('truetype'),
         url('../fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'walkway_ultraboldregular';
    src: url('../fonts/walkway_ultrabold-webfont.eot');
    src: url('../fonts/walkway_ultrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/walkway_ultrabold-webfont.woff2') format('woff2'),
         url('../fonts/walkway_ultrabold-webfont.woff') format('woff'),
         url('../fonts/walkway_ultrabold-webfont.ttf') format('truetype'),
         url('../fonts/walkway_ultrabold-webfont.svg#walkway_ultraboldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'walkway_semiboldregular';
    src: url('../fonts/walkway_semibold-webfont.eot');
    src: url('../fonts/walkway_semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/walkway_semibold-webfont.woff2') format('woff2'),
         url('../fonts/walkway_semibold-webfont.woff') format('woff'),
         url('../fonts/walkway_semibold-webfont.ttf') format('truetype'),
         url('../fonts/walkway_semibold-webfont.svg#walkway_semiboldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'walkway_oblique_ultraboldRg';
    src: url('../fonts/walkway_oblique_ultrabold-webfont.eot');
    src: url('../fonts/walkway_oblique_ultrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/walkway_oblique_ultrabold-webfont.woff2') format('woff2'),
         url('../fonts/walkway_oblique_ultrabold-webfont.woff') format('woff'),
         url('../fonts/walkway_oblique_ultrabold-webfont.ttf') format('truetype'),
         url('../fonts/walkway_oblique_ultrabold-webfont.svg#walkway_oblique_ultraboldRg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: '../fonts/walkway_oblique_boldregular';
    src: url('../fonts/walkway_oblique_bold-webfont.eot');
    src: url('../fonts/walkway_oblique_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/walkway_oblique_bold-webfont.woff2') format('woff2'),
         url('../fonts/walkway_oblique_bold-webfont.woff') format('woff'),
         url('../fonts/walkway_oblique_bold-webfont.ttf') format('truetype'),
         url('../fonts/walkway_oblique_bold-webfont.svg#walkway_oblique_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'walkway_oblique_blackregular';
    src: url('../fonts/walkway_oblique_black-webfont.eot');
    src: url('../fonts/walkway_oblique_black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/walkway_oblique_black-webfont.woff2') format('woff2'),
         url('../fonts/walkway_oblique_black-webfont.woff') format('woff'),
         url('../fonts/walkway_oblique_black-webfont.ttf') format('truetype'),
         url('../fonts/walkway_oblique_black-webfont.svg#walkway_oblique_blackregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'walkway_oblique_semiboldRg';
    src: url('../fonts/walkway_oblique_semibold-webfont.eot');
    src: url('../fonts/walkway_oblique_semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/walkway_oblique_semibold-webfont.woff2') format('woff2'),
         url('../fonts/walkway_oblique_semibold-webfont.woff') format('woff'),
         url('../fonts/walkway_oblique_semibold-webfont.ttf') format('truetype'),
         url('../fonts/walkway_oblique_semibold-webfont.svg#walkway_oblique_semiboldRg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'walkway_obliqueregular';
    src: url('../fonts/walkway_oblique-webfont.eot');
    src: url('../fonts/walkway_oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/walkway_oblique-webfont.woff2') format('woff2'),
         url('../fonts/walkway_oblique-webfont.woff') format('woff'),
         url('../fonts/walkway_oblique-webfont.ttf') format('truetype'),
         url('../fonts/walkway_oblique-webfont.svg#walkway_obliqueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'walkway_blackregular';
    src: url('../fonts/walkway_black-webfont.eot');
    src: url('../fonts/walkway_black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/walkway_black-webfont.woff2') format('woff2'),
         url('../fonts/walkway_black-webfont.woff') format('woff'),
         url('../fonts/walkway_black-webfont.ttf') format('truetype'),
         url('../fonts/walkway_black-webfont.svg#walkway_blackregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'walkway_boldregular';
    src: url('../fonts/walkway_bold-webfont.eot');
    src: url('../fonts/walkway_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/walkway_bold-webfont.woff2') format('woff2'),
         url('../fonts/walkway_bold-webfont.woff') format('woff'),
         url('../fonts/walkway_bold-webfont.ttf') format('truetype'),
         url('../fonts/walkway_bold-webfont.svg#walkway_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*----------------------------------------------
------------------------------------------------
2. Estructure Styles
------------------------------------------------
----------------------------------------------*/
body, html{	background-color: #b2d9ca; overflow-x: hidden;}
.margin-top{margin-top: 5%;}
/*----------------------------------------------
------------------------------------------------
3. Titles and text Styles
------------------------------------------------
----------------------------------------------*/
.title-1{
    color: #FFFFFF;
    font-family: 'bebas_neueregular';
    font-size: 2.0em;
    position: relative;
    padding-top: 2%;
    padding-left: 2%;
    padding-bottom: 2%;
    background-color: #009fb2;
    width: 100%;
    margin-top: 0%;
    margin-bottom: 10%;
}
h1 {
	text-align: center;
	font: bold italic 2.5em/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-transform: rotate(-4deg);
  transform: rotate(-4deg);
	}
a {
	text-decoration:none;
	border-bottom: .075em #3B312A;
	color: #3B312A;
	}

.title-2{
    color: #009fb2;
    font-family: 'bebas_neueregular';
    font-size: 2.0em;
    position: relative;
    padding-top: 2%;
    padding-left: 2%;
    padding-bottom: 2%;
    width: 100%;
    margin-top: 0%;
}
.color, {
	color: #B04242;
	}
a:hover, a:active, a:focus {
	color: #3B312A;
	text-decoration: none;
	}
.highlight {
	font-size: 1.5em;
	line-height: 1.5;
	color: #009FB2;
	}
.embriage-area {
  padding: 1.5em 0 1.0em;
	border-top: 0.1875em double #3B312A;
	border-bottom: 0.1875em double #3B312A;
	margin-top: 15%;
	margin-bottom: 5%;
	}
.generated:first-letter {
	font-size: 1.25em;
	line-height: 1.2;
	}
.txt-footer{
	margin-top: 10%;
}
/*----------------------------------------------
------------------------------------------------
4. Images Styles
------------------------------------------------
----------------------------------------------*/
.image{	width: 100%;}
/*----------------------------------------------
------------------------------------------------
5. Bottons Styles
------------------------------------------------
----------------------------------------------*/
/*-Botones normales-*/
.btn:not(a) {border:0;border-bottom:0;border-left:0;font-weight:'900';font-family:'Ubuntu', sans-serif;box-shadow: inset 0 -3.2px rgba(0, 0, 0, 0.12),inset 2px 0 rgba(0, 0, 0, 0.1);outline:none;-webkit-outline:none;-o-outline:none;-moz-outline:none;}
.btn:active:not(a), .btn.active {outline:none;-moz-outline:none;background-image: none;-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;position: relative;box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;top: 1px;left:-1px;}
.btn:focus:not(a) {outline:none;-webkit-outline:none;-moz-outline:none;}
.btn-sm {padding-top:1.5px;}

.azul{
  background: #ECDF61;
  box-shadow: 0px 5px 0px 0px #ECDF61;
}

.azul:hover{
  background: #F9ED7B;
}

.azul:active{
  box-shadow: 0px 2px 0px 0px #F9ED7B;
}
/*----------------------------------------------
------------------------------------------------
6. Mediaquery Styles
------------------------------------------------
----------------------------------------------*/
@media screen and (max-width: 768px) {
    .btn-margin{margin-bottom: 2%;}
}
@media screen and (max-width: 480px) {
    .title-1{font-size: 1.4em;}
    h1 {font: bold italic 1.9em/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;}
    .highlight {
        font-size: 1.0em;
        line-height: 1.5;
        color: #D22828;
    }
    .padd-cont{padding-left: 2%; padding-right: 2%; width: 90%; margin-left: auto; margin-right: auto;}
    .btn-margin{margin-bottom: 2%;}
}