/*------------------------------------------------------------------------------------------------------------------------------------------------------
 	IMPORTS
 ------------------------------------------------------------------------------------------------------------------------------------------------------*/

	@import url('https://fonts.googleapis.com/css?family=Muli');

/*------------------------------------------------------------------------------------------------------------------------------------------------------
 	RESET
 ------------------------------------------------------------------------------------------------------------------------------------------------------*/

	* {
		box-sizing: border-box;
		outline: none;
	}

	a { text-decoration: none; }
	img { pointer-events: none; }
	p { margin: 0; }
	textarea { resize: none; }
	ul li { list-style: none; }

/*------------------------------------------------------------------------------------------------------------------------------------------------------
 	FONTS
 ------------------------------------------------------------------------------------------------------------------------------------------------------*/

	@font-face {
		font-family: 'The Bold Font';
		src: url('../fonts/theboldfont.eot');
		src: local('☺'), url('../fonts/theboldfont.woff') format('woff'), url('../fonts/theboldfont.ttf') format('truetype'), url('../fonts/theboldfont.svg') format('svg');
		font-weight: normal;
		font-style: normal;
	}

/*------------------------------------------------------------------------------------------------------------------------------------------------------
 	HTML
 ------------------------------------------------------------------------------------------------------------------------------------------------------*/

	body {
		background: #FFF;
		color: #999999;
		font-family: 'Century Gothic', 'Muli', sans-serif;
		font-size: 16px;
		overflow-y: hidden;
	}

	h1, h2, h3, h4 {
		color: #525252;
		font-family: 'The Bold Font', sans-serif;
		font-size: 4rem;
		margin: 0;
	}

	h2 { font-size: 3rem; }
	h3 { font-size: 2rem; }
	h4 { font-size: 2.25rem; }
	
	header {
		background: #FFF;
		border-bottom: 1px solid #CD3B7D;
		left: 0;
		padding: 20px;
		top: 0;
		width: 100%;
		z-index: 999;
	}

	input, textarea {
		border: none;
		color: #858585;
		flex-grow: 1;
		padding: 2px 5px;
		}
	}

	input:focus, input:hover, textarea:focus, textarea:hover {}

	nav a {
		color: #999;
		font-size: 1.2rem;
		font-weight: bolder;
	}

	nav a:hover { color: #CD3B7D; }

/*------------------------------------------------------------------------------------------------------------------------------------------------------
 	ID'S
 ------------------------------------------------------------------------------------------------------------------------------------------------------*/

	#about-us { padding: 80px 0; }

	#cnt-preloader {
		align-items: center;
		background: #FFF;
		display: inline-flex;
		height: 100vh;
		justify-content: center;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9999;
	}

	#cnt-promo {
		border: 5px solid #FFF;
		flex-grow: 1;
		padding: 30px;
	}

	#contact { padding: 80px 0; }

	#copy {
		background: #222222;
		color: #FFF;
		padding: 15px 0;
	}

	#detail-1 {
		background: #EEE url('../img/angeladegutierrez.com_img_detalle-1.png') center center no-repeat;
		border-left: 0;
	}

	#detail-2 { background: #EEE url('../img/angeladegutierrez.com_img_detalle-2.png') center center no-repeat; }
	#detail-3 { background: #EEE url('../img/angeladegutierrez.com_img_detalle-3.png') center center no-repeat; }
	
	#detail-4 {
		background: #EEE url('../img/angeladegutierrez.com_img_detalle-4.png') center center no-repeat;
		border-right: 0;
	}

	#hero-image {
		background: #EEE url('../img/angeladegutierrez.com_img_hero-image.png') center center no-repeat;		
		background-size: cover;
		height: calc(100vh - 138px);
	}

	#img-prjc { background: #FFF url('../img/angeladegutierrez.com_img_proyectos.jpg') center center no-repeat; }

	#products {
		background: #EEEEEE;
		padding: 80px 0;
	}

	#projects { padding: 80px 0; }

	#provider {
		background: #FFF url('../img/angeladegutierrez.com_img_proveedor.png') center center no-repeat;
		height: 123px;
		width: 100%;
	}

	#services { padding: 80px 0; }

	#topbar {
		background: #F9F9F9;
		color: #444;
		padding: 10px;
	}

/*------------------------------------------------------------------------------------------------------------------------------------------------------
 	GENERAL CLASSES
 ------------------------------------------------------------------------------------------------------------------------------------------------------*/

	.btn {
		background: none;
		border: none;
		cursor: pointer;
		font-size: 1.25rem;
		padding: 10px 20px;
		text-transform: uppercase;
	}

	.btn-crc {
		align-content: center;
		align-items: center;
		background: #5B9D2E;
		border-radius: 50%;
		color: #FFF;
		cursor: pointer;
		display: flex;
		height: 50px;
		justify-content: center;
		margin: 0 auto;
		width: 50px;
	}

	.btn-crc:hover {
		opacity: .5;
	}

	.btn-ln {
		border: 2px solid #FFF;
		border-radius: 30px;
		color: #FFF;
	}

	.btn-ln:hover { background: #F80; }
	.btn-pln { color: #999; }

	.btn-pln:hover {
		background: #5B9D2E;
		color: #FFF;
	}

	.btn-rds {
		background: #D42F25;
		border-radius: 30px;
		color: #FFF;
	}

	.btn-rds:hover { background: #F80; }
	.cnt-overlay:hover .overlay { opacity: .75; }

	.cnt-field {
		border: 1px solid #A9A9A9;
		margin: 10px;
		padding: 10px;
	}

	.detail {
		border: 2px solid #FFF;
		border-width: 4px 2px 4px 2px;
		color: #FFF;
		padding: 30px;
	}

	.hde-dsc {
		position: absolute;
		bottom: 16px;
	}

	.logo { max-width: 280px; }

	.msk-pdt {
		background: #FFF;
		display: none;
		height: 100%;
		left: 0;
		padding: 1em;
		position: absolute;
		top: 0;
		width: 100%;
		/*z-index: 99;*/
	}

	.overlay {
		background: #C73A7B;
		height: 100%;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.pdto {
		display: none;
		padding: 2.25px;
		position: relative;
	}

	.service {
		background: #555555;
		padding: 40px 15px;
	}

	.sm-fb {
		color: #4267B2;
		cursor: pointer;
	}

	.sm-ig {
		color: #D83074;
		cursor: pointer;
	}

	.title {
		color: #555;
		font-family: 'GeBody', sans-serif;
		font-size: 1.15rem;
	}

/*------------------------------------------------------------------------------------------------------------------------------------------------------
 	COLOR CLASSES
 ------------------------------------------------------------------------------------------------------------------------------------------------------*/

	.green-b { background: #5B9D2E; }
	.green-c { color: #5B9D2E; }
	.gray-dark-b { background: #525252; }
	.gray-dark-c { color: #525252; }
	.gray-light-b { background: #999; }
	.gray-light-c { color: #999; }
	.pink-b { background: #CD3B7D; }
	.pink-c { color: #CD3B7D; }
	.red-b { background: #F00; }
	.red-c { color: #F00; }
	.title-33-b { background: #D78687; }
	.title-33-c { color: #D78687; }
	.title-66-b { background: #C34C4A; }
	.title-66-c { color: #C34C4A; }
	.title-100-b { background: #8C3337; }
	.title-100-c { color: #8C3337; }
	.yellow-b { background: #F3C049; }
	.yellow-c { color: #F3C049; }
	.white-b { background: #FFF; }
	.white-c { color: #FFF; }

/*------------------------------------------------------------------------------------------------------------------------------------------------------
 	FLEXERIT! BY TIAN
 ------------------------------------------------------------------------------------------------------------------------------------------------------*/

	.animate-ease { transition: all 0.5s ease; }
	.bold { font-weight: bold; }
	.border { border: 1px solid #EEE; }
	.center { text-align: center; }
	.cursor { cursor: pointer; }
	.d-block { display: block; }
	.d-none { display: none; }
	.f-1_25x { font-size: 1.25rem; }
	.f-1_5x { font-size: 1.5rem; }	
	.f-1_75x { font-size: 1.75rem; }
	.f-2x { font-size: 2rem; }
	.f-2_5x { font-size: 2.5rem; }
	.f-3x { font-size: 3rem; }
	.f-3_5x { font-size: 3.5rem; }
	.f-5x { font-size: 5rem; }

	.flx {
		align-items: center;
		align-content: center;
		display: flex;
	}

	.flx-1 { flex: 1; }
	.flx-2 { flex: 2; }
	.flx-ai-str { align-items: stretch; }
	.flx-ai-flxstr { align-items: flex-start; }
	.flx-as-flxstr { align-self: flex-start; }
	.flx-fb-0 { flex-basis: 0; }
	.flx-fb-1 { flex-basis: 1; }
	.flx-dr-clm { flex-direction: column; }
	.flx-ds-inlflx { display: inline-flex; }
	.flx-fg-0 { flex-grow: 0; }
	.flx-fg-1 { flex-grow: 1; }
	.flx-jc-cnt { justify-content: center; }
	.flx-jc-flxstr { justify-content: flex-start; }
	.flx-jc-spcarn { justify-content: space-around; }
	.flx-jc-spcbtw { justify-content: space-between; }
	.flx-wr { flex-wrap: wrap; }
	.h-100 { height: 100%; }

	.hr-60-w {
		border: 1px solid #FFF;
		margin: .5em auto;
		width: 60%;
	}

	.hr-80-g {
		border: 1px solid #EEE;
		margin: .5em auto;
		width: 80%;
	}

	.horizontal-line {
		background: #EEE !important;
		height: 1px;
		width: 100%;
	}

	.italic { font-style: italic; }
	.justify { text-align: justify; }
	.line-heigh-sm { line-height: 75%; }
	.left { text-align: left; }
	.left-space-lg { margin-left: 45px !important; }
	.left-space-md { margin-left: 30px !important; }
	.left-space-sm { margin-left: 15px !important; }
	.left-space-xsm { margin-left: 10px !important; }
	.m-auto { margin: 0 auto; }
	.p-15x { padding: 15px; }
	.p-30x { padding: 30px; }
	.p-60x { padding: 60px; }
	.p-rel { position: relative; }
	.right { text-align: right; }
	.right-space-md { margin-right: 30px !important; }
	.right-space-sm { margin-right: 15px !important; }
	.right-space-xsm { margin-right: 10px !important; }

	.site-title {
		cursor: default;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: -9999;
	}

	.top-space-lg { margin-top: 45px; }
	.top-space-md { margin-top: 30px; }
	.top-space-sm { margin-top: 15px; }
	.top-space-xlg { margin-top: 60px; }
	.top-space-xsm { margin-top: 7.5px; }
	.uppercase { text-transform: uppercase; }
	.vertical-align { vertical-align: middle; }
	.w-30 { width: 30% !important; }
	.w-40 { width: 40% !important; }
	.w-45 { width: 45% !important; }
	.w-50 { width: 50% !important; }
	.w-60 { width: 60% !important; }
	.w-70 { width: 70% !important; }
	.w-80 { width: 80% !important; }
	.w-90 { width: 90% !important; }
	.w-100 { width: 100% !important; }
	.z-2 { z-index: 99; }