// -----------------------------------------------------------------------------
// This file contains all styles related to the modal component.
// -----------------------------------------------------------------------------

.modal.modal--cvs {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F6F6F3;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.2s, visibility 0s 0.2s;
    transition: opacity 0.2s, visibility 0s 0.2s;
}
.modal.modal--cvs .wrp {
    margin-bottom: 100px;
    padding: 56px 104px 32px;
    background-color: #F6F6F3;
    position: relative;
    top: 100px;
}

.modal.modal--cvs .row { margin-bottom: 0; }

.modal.modal--cvs .modal__close {
	color: #909090;
	font-size: 1.8em;
	font-weight: bold;
	position: fixed;
	top: 24px;
	cursor: pointer;
	z-index: 10;
	margin-left: 0px;
    text-align: center;
    font-weight: bold;
    color: white;
    left: 0px;
    margin: 0px;
    width: 100%;
    
    background-color: #215126!important;
    position: absolute;
    width: 100%;
    display: block;
    top: 0px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 10px 0px;
    top: -25px;
}

.modal.modal--cvs .modal__close [class^="icon--"],
.modal.modal--cvs .modal__close [class*=" icon--"] {
	vertical-align: sub;
}

.modal.modal--cvs .modal__content { height: 100%; }


.modal.modal--open {
	display: block;
	visibility: visible;
	opacity: 1;
	overflow-y: scroll;
}


.body--onmodal { overflow: hidden }

.body--onmodal .main { position: relative; }

.body--onmodal .modal--open {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}


.modal--prompt.modal--cvs  {
	background-color: rgba(0,0,0,0.7);
}
.modal--prompt.modal--cvs  .wrp {
	width: 1000px;
	top: 80px;
	border-radius: 16px;
}
.modal.modal--cvs  .text__title{
	color: #66b444;
}

.modal.modal--info.modal--cvs .modal__close {
	background: none !important;
	width: auto;
	right: 0;
	left: initial;
	padding: 20px;
	color: #000;
	top: 0;
}
	.modal.modal--info.modal--cvs .modal__close .icon--cross { vertical-align: top; }
	.modal.modal--info.modal--cvs .wrp {
		background-color: #fff;
		padding: 50px 50px;
	}
	.modal--info__icon {
		width: 20px;
		height: 20px;
		margin-right: 10px;
		vertical-align: text-bottom;
	}
	.modal--info__title {
		font-weight: 600;
		font-size: 2.2em;
		line-height: 1.45em;
		color: #215126;
	}
	.modal.modal--info .page__header__logo {
		position: static;
		margin-bottom: 40px;
	}

/* ==========================================================================
   $MEDIA-QUERIES
   ========================================================================== */

@media only screen and (min-width: 1024px) and (max-width: 1280px) {

	.modal,
	.modal--prompt.modal--cvs  {
		
	}
	.modal--prompt.modal--cvs  .wrp {
		width: 800px;
		margin: 0 auto;
		padding: 56px 56px 32px;
	}

}



/* > 1280px / 720p
----------------------------------------------- */
@media only screen and (min-width: 1280px) {



}




/* > TABLET + MOBILE
----------------------------------------------- */
@media only screen and (max-width: 1023px) {


}





/* TABLET LAYOUT
----------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1023px) {


	.modal,
	.modal--prompt.modal--cvs  {
	}
	.modal--prompt.modal--cvs  .wrp {
		margin: 0 32px 32px;
		padding: 32px 32px;
		width: 90%;
		margin: auto;
		box-sizing: border-box;
	}
	.modal.modal--cvs {
	}
	.modal.modal--cvs  .text__title,
	.modal.modal--cvs .text__maintitle { margin-top: 0; }
	

	.modal__close {
		position: absolute;
		top: -48px;
		right: 32px;
	}

}





/* MOBILE LAYOUT (PORTRAIT)
----------------------------------------------- */
@media only screen and (max-width: 767px) {


	.modal,
	.modal--prompt.modal--cvs  {
		height: 100%;
		top: 0;
	}
	.modal.modal--cvs .wrp,
	.modal--prompt.modal--cvs  .wrp {
		width: 100%;
		min-height: 100%;
		margin-bottom: 0;
		padding: 48px 20px 32px;
		border-radius: 0;
		top: 0;
		box-sizing: border-box;
	}
	.modal.modal--cvs .modal__close{
		color: white;
		background-color: #215126!important;
		border-radius: 0px!important;
	}

	.modal.modal--cvs .modal__close,
	.modal--prompt.modal--cvs  .modal__close {
/*
		top: 24px;
		left: 20px;
		//color: #000;
*/
		text-align: center;
		
		top: 0;
		left: 0;
		background-color: #f6f6f3;
		padding: 24px 20px;
		width: 100%;
		box-sizing: border-box;
	}
	.modal.modal--info.modal--cvs .modal__close {
		position: fixed;
		top: 20px;
		right: 20px;
	}
	.modal.modal--cvs .text.text--modal{
		padding-top: 30px;
	}
		.modal.modal--info.modal--cvs .text.text--modal { padding-top: 0; }
		
		.modal.modal--info.modal--cvs .wrp {
			width: 90%;
			padding: 50px 30px;
			top: 3%;
			min-height: initial;
			max-height: 94%;
			overflow: scroll;
			border-radius: 7px
		}
}





/* WIDE MOBILE LAYOUT
----------------------------------------------- */

@media only screen and (min-width: 320px) and (max-width: 767px) {


}





/* WIDE MOBILE LAYOUT (LANDSCAPE)
----------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {



}





/* ==========================================================================
   $RETINA@2X
   ========================================================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx) {



}





/* ==========================================================================
   $RETINA@3X
   ========================================================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 3),
	only screen and (   min--moz-device-pixel-ratio: 3),
	only screen and (     -o-min-device-pixel-ratio: 3/1),
	only screen and (        min-device-pixel-ratio: 3),
	only screen and (                min-resolution: 480dpi),
	only screen and (                min-resolution: 3dppx) {



}