@font-face {
    font-family: 'playfair_displaybold';
    src: url('fonts/playfairdisplay-bold-webfont.woff2') format('woff2'),
         url('fonts/playfairdisplay-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dosisbold';
    src: url('fonts/dosis-bold-webfont.woff2') format('woff2'),
         url('fonts/dosis-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dosissemibold';
    src: url('fonts/dosis-semibold-webfont.woff2') format('woff2'),
         url('fonts/dosis-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dosisextrabold';
    src: url('fonts/dosis-extrabold-webfont.woff2') format('woff2'),
         url('fonts/dosis-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dosisregular';
    src: url('fonts/dosis-regular-webfont.woff2') format('woff2'),
         url('fonts/dosis-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{
    padding: 0px;
    margin:0px;
    background-color: #fff;
    transition: background-color 0.6s ease-out;
}

a[href^=tel] {
   text-decoration:inherit;
   color: inherit;
}

#loader{
	z-index: 2000;
	position: fixed;
	background-color:rgba(255,255,255,.8);
	top:0px;
	left: 0px;
	width: 100%;
	height: 100vh;
	text-align: center;
	display: none;
}

#loaderGif{
	width: 40px;
	position: relative;
	top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: inline-block;
    height: 40px;

}

#cover{
	width: 100%;
	height: 100vh;
	background-color: #1761FF;
	z-index: 1;
	position: relative;
	overflow: none;
}

#logo{
	left: 136px;
	top: 30px;
	position: absolute;
}

#imgLogo{
	width: 172px;
}

#coverPhrase{
	width:auto;
	box-sizing: border-box;
	color:#fff;
	font-family: 'playfair_displaybold';
	font-size: 160px;
	text-decoration: none;
	position: relative;
	left: 136px;
	line-height: 160px;
	top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: inline-block;
    height: auto;
    z-index: 5;
}

#imgPrintMore{
	height: 35vh;
}

#downArrow{
	position: absolute;
	left: 136px;
	bottom: 15px;
	cursor: pointer;
}

#imgDownArrow{
	height: 39px;
}

#coverImage{
	position: absolute;
	bottom: 0px;
	right: 60px;
	display: inline-block;
	height: auto;
	font-size: 0px;
	z-index:1;
}

#imgCoverImage{
	height: 80vh;
}

#menuLines{
	position: absolute;
	top:30px;
	right: 24px;
	z-index: 10;
	display: none;
}

#menuMobile{
	padding-top: 90px;
	padding-bottom: 90px;
	position: fixed;
	z-index: 2000;
	top:0px;
	left: 0px;
	width: 100%;
	background-color: #fff;
	text-align: center;
	display: none;
}

#menu{
	position: absolute;
	top:30px;
	right: 151px;
	z-index: 2;
}

#snIcons{
	position: absolute;
	top:34px;
	right: 121px;
	z-index: 3;
}

.menu{
	color:#fff;
	font-size: 18px;
	font-family: 'dosisregular';
	text-decoration: none;
	margin-left: 10px;
	margin-right: 10px;
}

.menuMobile{
	color:#0061FF;
	font-size: 28px;
	font-family: 'dosisregular';
	text-decoration: none;
	margin-left: 10px;
	margin-right: 10px;
}

#closeMenu{
	position: absolute;
	right: 24px;
	top:30px;
	cursor: pointer;
}

.titles{
	color:#0061FF;
	font-family:'playfair_displaybold';
	font-size: 48px;
	text-decoration: none;
	margin:0px;
	padding-bottom: 20px;
}

#gallery{
	width: 100%;
	height: auto;
	background-color: #E6E7E8;
	padding-top: 100px;
	padding-bottom: 54px;
}

.divContent{
	width: 100%;
	padding-left: 136px;
	padding-right: 136px;
	box-sizing: border-box;
	position: relative;
	text-align: left;
	height: auto;
	display: inline-block;
	padding-bottom: 27px;
}

.gallery1{
	width: calc(40% - 27px);
	height: 320px;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: inline;
	float: left;
	margin-top: 120px;
	margin-right: 27px;
	margin-bottom: 54px;
}

.gallery2{
	width: calc(60% - 27px);
	height: 440px;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: inline;
	float: left;
	margin-left: 27px;
	margin-bottom: 54px;
}

.gallery4{
	width: calc(40% - 27px);
	height: 320px;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: inline;
	float: left;
	margin-top: 120px;
	margin-left: 27px;
	margin-bottom: 54px;
}

.gallery3{
	width: calc(60% - 27px);
	height: 440px;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: inline;
	float: left;
	margin-right: 27px;
	margin-bottom: 54px;
}

#papers{
	width: 100%;
	height: auto;
	background-color: #ffffff;
	padding-top: 100px;
	padding-bottom: 50px;
}

.divContentPapers{
	padding-left: 115px;
	padding-right: 115px;
	box-sizing: border-box;
	position: relative;
	text-align: left;
	height: auto;
	display: inline-block;
	padding-bottom: 27px;
}


.papel{
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('../images/paperIcon.png');
	width: 220px;
	height: 270px;
	display: inline;
	float: left;
	margin-right: 21px;
	margin-left: 21px;
	margin-bottom: 50px;
}

.paperContent{
	width: 90%;
	text-align: center;
	position: relative;
	top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.paperTitle{
	font-family: 'dosisbold';
	font-size: 35px;
	color:#0061FF;
	text-decoration: none;
}

.paperDescription{
	font-family: 'dosissemibold';
	font-size: 18px;
	color:#0061FF;
	text-decoration: none;
}

.paperBrand{
	font-family: 'dosisextrabold';
	font-size: 14px;
	color:#0061FF;
	text-decoration: none;
}

.paperSpace{
	height: 25px;
}


#quote{
	width: 100%;
	height: auto;
	background-color: #E6E7E8;
	padding-top: 100px;
	padding-bottom: 54px;
}

.quoteTitle{
	font-family: 'dosisextrabold';
	font-size: 18px;
	color:#0061FF;
	text-decoration: none;
}

.quoteList{
	font-family: 'dosisregular';
	font-size: 18px;
	color:#0061FF;
	text-decoration: none;
	background-color:#fff;
	border:0;
	padding: 5px;
	box-sizing: border-box;
	width: auto;
}

.quoteListElements{
	width: 100%;
	position: relative;
	height: auto;
	display: inline-block;
}

.printElement{
	height: auto;
	display: inline-block;
	padding-bottom: 10px;
}

.quote_1{
	width: auto;
	display: inline-block;
	float: left;
	display: inline;
	position: relative;
	padding-right: 40px;
	height: auto;
	width: 300px;
	box-sizing: border-box;
	padding-left: 95px;
}

.quote_21{
	width: auto;
	display: inline-block;
	float: left;
	display: inline;
	position: relative;
	padding-right: 40px;
	height: auto;
	width: 136px;
}

.quote_31{
	width: auto;
	display: inline-block;
	float: left;
	display: inline;
	position: relative;
	padding-right: 40px;
	height: auto;
	width: 236px;
}

.quote_41{
	width: auto;
	display: inline-block;
	float: left;
	display: inline;
	position: relative;
	padding-right: 40px;
	height: auto;
	width: 226px;
}

.quote_2{
	width: auto;
	display: inline-block;
	float: left;
	display: inline;
	position: relative;
	padding-right: 0px;
	height: auto;
}

.quoteSpacer{
	height: 10px;
}

.quoteSpacerTwo{
	height: 10px;
}

.quoteText{
	font-family: 'dosisregular';
	font-size: 18px;
	color:#0061FF;
	text-decoration: none;
}

.quoteNumber{
	font-family: 'dosisregular';
	font-size: 18px;
	color:#0061FF;
	text-decoration: none;
	background-color:#fff;
	border:0;
	padding: 5px;
	box-sizing: border-box;
	width: 90px;
}

#order{
	margin:0px;
	padding: 0px;
}


.control {
	font-family: 'dosisregular';
	display: inline;
	position: relative;
	padding-left: 27px;
	margin-bottom: 4px;
	padding-top: 3px;
	cursor: pointer;
	font-size: 18px;
	color:#0061FF;
	margin-right: 10px;
}
.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.control_indicator {
	position: absolute;
	top: 1px;
	left: 0;
	height: 20px;
	width: 20px;
	background: #ffffff;
	border: 0px solid transparent;
	border-radius: undefinedpx;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
	background: #ffffff;
}

.control input:checked ~ .control_indicator {
	background: #ffffff;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
	background: #ffffff;
}
.control input:disabled ~ .control_indicator {
	background: #e6e6e6;
	opacity: 0.6;
	pointer-events: none;
}
.control_indicator:after {
	box-sizing: unset;
	content: '';
	position: absolute;
	display: none;
}
.control input:checked ~ .control_indicator:after {
	display: block;
}
.control-radio .control_indicator {
	border-radius: 50%;
}

.control-radio .control_indicator:after {
	left: 5px;
	top: 5px;
	height: 10px;
	width: 10px;
	border-radius: 50%;
	background: #0061FF;
	transition: background 250ms;
}
.control-radio input:disabled ~ .control_indicator:after {
	background: #7b7b7b;
}

#addPaper{
	top:-49px;
	margin-bottom: 10px;
	position: relative;
	width: auto;
	display: inline-block;
}

#quoteButton{
	margin-top: 10px;
	margin-bottom: 10px;
	position: relative;
}

.blueButton{
	color:#fff;
	font-family: 'dosisbold';
	background-color: #0061FF;
	padding: 10px 15px 10px 15px;
	border:0px;
	border-radius: 20px;
	text-decoration: none;
}

.whiteButton{
	color:#0061FF;
	font-family: 'dosisbold';
	background-color: #fff;
	padding: 10px 15px 10px 15px;
	border:0px;
	border-radius: 20px;
	text-decoration: none;
}

.titlesDisapear{
	display: none;
}

#producto_0{
	display: inherit;
}

#contact{
	width: 100%;
	height: auto;
	background-color: #1761FF;
	padding-top: 100px;
	padding-bottom: 54px;
}

.contactTitle{
	color:#fff;
	font-family: 'dosisbold';
	font-size: 18px;
	text-decoration: none;
}

.contactContent{
	color:#fff;
	font-family: 'dosisregular';
	font-size: 18px;
	text-decoration: none;
}

.contactContent a{
	color: #fff;
	text-decoration: none;
}

.contactContent a:hover{
	color: #fff;
	text-decoration: underline;
}


#smile{
	position: absolute;
	right: 136px;
	top:0px;
}

#imgSmile{
	width: 37px;
}

#upArrow{
	position: absolute;
	right: 136px;
	bottom: 0px;
	cursor: pointer;
}

#imgUpArrow{
	width: 25px;
}

.normal_text{
	color:#1761FF;
	font-family: 'dosisregular';
	font-size: 18px;
	text-decoration: none;
}

.subtotal{
	color:#1761FF;
	font-family: 'dosisbold';
	font-size: 21px;
	text-decoration: none;
}

.subtotalCurrency{
	color:#1761FF;
	font-family: 'dosisbold';
	font-size: 12px;
	text-decoration: none;
}

#step2{
	width: 100%;
	height: auto;
	display: inline;
	position: relative;
}

#step3{
	width: 100%;
	height: auto;
	display: inline;
	position: relative;
	text-align: left;
	display: none;
}

#quoteOrderDescription{
	width: 50%;
	display: inline;
	float: left;
	position: relative;
	top:0px;
	box-sizing: border-box;
	padding-right: 30px;
}

#quoteOrderContentLeft{
	width: 50%;
	display: inline;
	float: left;
	position: relative;
	top:0px;
	box-sizing: border-box;
	padding-right: 30px;
}


#quoteOrderContent{
	width: 50%;
	display: inline;
	float: left;
	position: relative;
	top:0px;
	box-sizing: border-box;
	padding-left: 30px;
}

.quoteTable{
	width: 100%;
	padding: 0px;
	margin:0px;
}

.tdBig{
	width: 35%;
	text-align: left;
}

.tdBigRight{
	width: 35%;
	text-align: right;
}

.tdHalf{
	width: 50%;
	text-align: left;
	position: relative;
	float: left;
	display: inline;
}

.tdHalfRight{
	width: 50%;
	text-align:right;
	position: relative;
	float: right;
	display: inline;
}


.tdSmall{
	width: 15%;
	text-align: left;
}

.quoteDivisor{
	width: 100%;
	height: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color:#1761FF;
}

.productDivisor{
	width: 100%;
	height: 1px;
	margin-top: 10px;
	margin-bottom: 5px;
	background-color:#1761FF;
	display: none;
	position: relative;
}

/* LOW RESOLUTIONS/MOBILE */
@media screen and (max-width: 1400px) {
	
	#coverPhrase{
		font-size: 120px;
		line-height: 124px;
	}

	#imgCoverImage{
		/*height: 8;*/
	}

}

@media screen and (max-width: 1300px) {
	#quote{
		padding-top: 40px;
		padding-bottom: 20px;
	}

	.quote_1,.quote_21,.quote_31,.quote_41{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding-bottom: 20px;
		padding-left: 0px;
	}

	.paperContent{
		width: 95%;
	}

	#papers{
		padding-top: 40px;
		padding-bottom: 0px;
	}

	.divContentPapers{
		padding-left: 0px;
		padding-right: 0px;
		width: 450px;
	}

	.papel{
		width: 140px;
		height: 180px;
		display: inline;
		float: left;
		padding: 0px;
		margin-right: 5px;
		margin-left: 5px;
		margin-bottom: 10px;
	}

	.paperTitle{
		font-size: 22px;
	}

	.paperDescription{
		font-size: 11px;
	}

	.paperBrand{
		font-size: 11px;
	}

	.paperSpace{
		height: 5px;
	}

	
	.titlesDisapear{
		display: inherit;
	}

	#producto_0{
		display: none;
	}

	.printElement{
		height: auto;
		display: inline-block;
		padding-bottom: 20px;
	}

	#addPaper{
		top:0px;
	}

	.productDivisor{
		display: inherit;
	}
}


/* LOW RESOLUTIONS/MOBILE */
@media screen and (max-width: 800px) {

	.quoteTable{
		width: 100%;
		padding: 0px;
		margin:0px;
		margin-bottom: 20px;
	}

	.quoteDivisor{
		width: 100%;
		height: 1px;
		margin-top: 20px;
		margin-bottom: 30px;
		background-color:#1761FF;
	}


	#quoteOrderDescription{
		width: 100%;
		padding-right: 0px;
	}

	#quoteOrderContent{
		width: 100%;
		padding-left: 0px;
		padding-top: 0px;
	}

	#quoteOrderContentLeft{
		width: 100%;
		padding-left: 0px;
		padding-top: 40px;
	}


	.tdBig{
		display: block;
	}

	.tdBigRight{
		display: block;
		text-align: left;
		width: 100%;
	}

	.tdSmall{
		width: 100%;
		display: block;
	}

	.tdHalf{
		display: block;
		float: right;
		width: 100%;
		top: 30px;
	}

	.tdHalfRight{
		display: block;
		text-align:left;
		float:right; 
		width: 100%;
		top:-40px;
	}

	#menu{
		display: none;
	}

	#snIcons{
		top:31px;
		right: 81px;
	}


	#menuLines{
		display: inherit;
	}

  	#logo{
		left: 24px;
		top: 30px;
		position: absolute;
	}

	#coverPhrase{
		left: 24px;
		font-size: 40px;
		line-height: 40px;
		top:150px;
	}

	#imgPrintMore{
		height: 120px;
	}


	#downArrow{
		left: 24px;
		bottom: 10px;
	}

	#imgDownArrow{
		height: 39px;
	}

	#coverImage{
		right: 24px;
	}


	#imgCoverImage{
		height: 306px;
	}

	.titles{
		font-size: 36px;
	}

	#gallery{
		padding-top: 40px;
		padding-bottom: 30px;
	}

	.divContent{
		padding-left: 19px;
		padding-right: 19px;
	}

	.gallery1{
		width: 100%;
		height: 248px;
		margin-top: 0px;
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom: 10px;
	}

	.gallery2{
		width: 100%;
		height: 248px;
		margin-top: 0px;
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom: 10px;
	}

	.gallery4{
		width: 100%;
		height: 248px;
		margin-top: 0px;
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom: 10px;
	}

	.gallery3{
		width: 100%;
		height: 248px;
		margin-top: 0px;
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom: 10px;
	}

	

	#contact{
		padding-top: 40px;
		padding-bottom: 20px;
	}

	#smile{
		right: 24px;
	}

	#imgSmile{
		width: 28px;
	}

	#upArrow{
		right: 24px;
		bottom: 0px;
	}

	.quoteSpacerTwo{
		height: 0px;
		display: none;
	}

}

/* LOW RESOLUTIONS/MOBILE */
@media screen and (max-width: 450px) {

	.divContentPapers{
		padding-left: 0px;
		padding-right: 0px;
		width: 282px;
	}

	.papel{
		width: 131px;
		height: 180px;
		display: inline;
		float: left;
		padding: 0px;
		margin-right: 5px;
		margin-left: 5px;
		margin-bottom: 10px;
	}



}