.card .cq-form-hidden-placeholder {
    width: calc(100% - 10px);
}

.card-edit {
  border: 1px solid #eaeaea;
  box-shadow: 0 3px 5px 0 rgba(50, 50, 50, 0.14);
}

.cards .cards-header-title {
    text-align: center;
    font-size: 22px;
    line-height: 26px;
}

.cards .cards-header-dash {
    background-color: #000;
    height: 3px;
    margin: 0 auto 25px;
    width: 20px;
}

.cards .container {
    width: 100%;
    max-width: 1035px;
	margin-left: auto;
	margin-right:auto;
	padding-bottom: 60px;
}

.cards .row-fluid {
	display: flex;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: center;
    justify-content: center;    
    margin-bottom: 60px;
    float: left;
    width: 100%;
    min-height: 200px;
}
.cards .card-container {
    width: 100%;
}

/* clear fix */
.cards .card-container:after {
  content: '';
  display: block;
  clear: both;
}

.card-item {
	position: relative;
    float: left;
    padding: 5px; 
	width: calc(33.33vw - 10px);
}

.card-sizer, .card-1-1 {
    max-width: 345px;
    max-height: 345px;
    width: calc(33.33vw - 10px);
    height: calc(33.33vw - 10px);
}

.card-2-1 {
    max-width: 690px;
    max-height: 345px;
    width: calc(66.66vw - 10px);
    height: calc(33.33vw - 10px);
}

.card-1-2 {
    max-width: 345px;
    max-height: 690px;
    width: calc(33.33vw - 10px);
    height: calc(66.66vw - 10px);
}

.card-2-2 {
    max-width: 690px;
    max-height: 690px;
    width: calc(66.66vw - 10px);
    height: calc(66.66vw - 10px);
}

.card-3-1 {
    max-width: 1035px;
    max-height: 345px;
    width: calc(99.99vw - 10px);
    height: calc(33.33vw - 10px);
}

.card-3-2 {
    max-width: 1035px;
    max-height: 690px;
    width: calc(99.99vw - 10px);
    height: calc(66.66vw - 10px);
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
  	border: 1px solid #eaeaea;
  	box-shadow: 0 3px 5px 0 rgba(50, 50, 50, 0.14);
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: auto auto;
}

.card-details {
    width: 100%;
	height: 100%;
	position: relative;
    text-align: left;
	z-index: 3;
}
.no-img .card-details .card-details-outer {
    position: absolute;
    width: 100%;
    top: 0;
    color: #000;
}
.img .card-details .card-details-outer {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: rgba(0,0,0,.6);
    color: #fff;
}

.img .card-details .card-details-inner {
    width: 100%;
    padding: 25px 15px;
}

.no-img .card-details .card-details-inner {
    width: 100%;
    padding: 25px 15px;
}

.card-details-inner h3.category, .card-details-inner h1.title, .card-details-inner h2.title, .card-details-inner div.description {
    margin-top: 0;
    margin-bottom: 0;
}

.card-details-inner h3.category {
    font-size: 1em;
    text-transform: uppercase;
}

.img .card-inner .card-details-inner div.description {
	max-height: 0;
	overflow: hidden;
	-moz-transition: max-height 0.8s;
    -ms-transition: max-height 0.8s;
    -o-transition: max-height 0.8s;
    -webkit-transition: max-height 0.8s;
    transition: max-height 0.8s;
}

.img .card-inner:hover .card-details-inner div.description {
	max-height: 1000px;
}

.card-inner .grad {
    position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0;
	-moz-transition: opacity 0.8s;
    -ms-transition: opacity 0.8s;
    -o-transition: opacity 0.8s;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
	z-index: 2;
}

.card-inner:hover .grad, .card-inner .grad.video-grad {
	opacity: .6;
}

.card-inner .grad.video-grad {
    background-image: url("../images/video-module-play-btn.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}

.card-inner:hover .card-details .card-details-outer, .card-inner .card-details .card-details-outer.video-grad {
   	background: rgba(0,0,0,0);
	color: #fff;
}

.card-inner .video {
    position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
    display: none;
}

.card-inner .video.active {
    display: block;
}

.card-item .video-close {
    display: none;
	position: absolute; 
	top: -4px;
    right: -4px;
    z-index: 100; 
}

.card-item .video-close.active {
    display: block;
}

.card-item .video-close img {
    width: 22px;
}

.card-inner .video .video-inner {
    position: relative;
	display: inline-flex;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.card-inner .video .video-inner object {
    width: 100% !important;
	height: 100% !important;
}

@media only screen and (min-width:0px) and (max-width:790px) {
    .card-inner {
        background-size: auto auto;
    }

    .card-inner.top-left {
        background-position: left top;
    }

    .card-inner.middle-center {
        background-position: center center;
    }

    .card-inner.bottom-right {
        background-position: right bottom;
    }
}

@media only screen and (min-width:0px) and (max-width:600px) {
    .card-sizer, .card-item, .card-1-1, .card-2-1, .card-1-2, .card-2-2, .card-3-1, .card-3-2 {
        max-width: 500px;
        max-height: 500px;
        width: calc(100vw - 10px);
        height: calc(100vw - 10px);
		margin-left: auto;
		margin-right: auto;
    }

	.cards .card-container {
    	width: 100%;
		left: -50%;
    }
	.cards .card-item {
    	right: -96%;
    }
}

@media only screen and (min-width:601px) and (max-width:800px) {
    .card-item, .card-sizer, .card-1-1 {
        max-width: 400px;
        max-height: 400px;
        width: calc(50vw - 10px);
        height: calc(50vw - 10px);
    }

    .card-2-1, .card-3-1 {
        max-width: 800px;
        max-height: 400px;
        width: calc(100vw - 10px);
        height: calc(50vw - 10px);
    }

    .card-2-2, .card-3-2 {
        max-width: 800px;
        max-height: 800px;
        width: calc(100vw - 10px);
        height: calc(100vw - 10px);
    }

    .card-1-2 {
        max-width: 400px;
        max-height: 800px;
        width: calc(50vw - 10px);
        height: calc(100vw - 10px);
    }
    .card-small {
        max-width: 400px;
        max-height: 400px;
        width: calc(50vw - 10px);
        height: calc(50vw - 10px);
    }
}