
/* ==========================================================================
   downloads sections styles
   ========================================================================== */

#downloads {
    background: #f2f2f2;
}

#downloads .text-center {
    text-align:center;   
}

#downloads .yellow {
    color:#f0cf1e;
}

#downloads .xs-visible {
    display:none;
}

#downloads section {
    position:relative;   
}

#downloads .show-on-mobile,
#downloads .show-on-tablet {
        
    display:none;
}

#downloads section h1 {
    text-transform:uppercase;
    font-weight:300;
    letter-spacing:0.05em;
    font-size:1.8em;
}

#downloads section h1 {
    font-size:1.8em;   
    letter-spacing:0.2em;
    line-height:1.4;
}

#downloads section p {
    font-size:1.2em;
    line-height:1.8;
    letter-spacing:0.1em;
    font-weight:300;
}

#downloads section .wrapper {
    position:relative;   
}

#downloads section p.centered {
    font-size:1.2em;
    line-height: 1.8;
    max-width:700px;
    margin: 1.5em auto 0;
}

#downloads .item,
#downloads .item a,
#downloads .item a img {
    outline:none;   
}

#downloads {
    margin:0;
    padding:0;
}

 .cta {
    padding: 1.2em 3em;
    font-weight: 300;
    letter-spacing: 0.2em;
    display:inline-block;
    background:#000;
    color:#fff;
    margin:1em 0 0;
    transition: all 200ms ease;
    -webkit-transition: all 200ms ease;
}

form .form_cta {
    width: 550px !important;
    padding-left: 0;
    padding-right: 0;
    background: #1d1d1d;
    padding: 1.5em 0;
    border: 0;
    outline:none;
}

 .cta:hover {
    
    background:#333;
    color:#fff;
    
    transition: all 200ms ease;
    -webkit-transition: all 200ms ease;
}

/**/
/* HERO */
/**/

#downloads .hero {
    position: relative;
    width: 100%;
    background: url(http://cwsmgmt.corsair.com/responsive/img/downloads/header.png) center;
    background-size: 100% 100%;
    display: block;
    margin-top: 50px;
    padding: 5% 0;
}

#downloads .hero .wrapper {
    display:block;
    vertical-align:top;
    text-align:center;
    height:100%;
    color:#fff;
    position: relative;
    z-index:1;
        
    padding: 0;
}

#downloads .hero h1 {
    margin:0;
    letter-spacing:0.1em;
    text-transform:uppercase;
    font-weight:100;
    font-size:6em;
    z-index:1;
    position:relative;
    color:#fff;
    padding:4% 1em;
}

#downloads .hero #menu {
    padding:0;
}

#downloads .hero #menu li {
    display:inline-block;
    padding:0 4%;
    
}
#downloads .hero li a {
    font-size: 1em;
    letter-spacing: 0.2em;
    
    color:#999;
    display: block;
    font-weight: 300;
    margin: 0 auto;
    line-height: 2;
    transition: all 200ms ease;
    -webkit-transition: all 200ms ease;
}

#downloads .hero li a:hover,
#downloads .hero li a.active {
    color:#f0cf1e;
    transition: all 200ms ease;
    -webkit-transition: all 200ms ease;
}

#downloads .hero .cta {
    padding:1.5em 4em;
    font-weight:600;
    letter-spacing:0.1em;
    background:#fafafa;
    color:#000;
    display:inline-block !important;
    transition: all 200ms ease;
    -webkit-transition: all 200ms ease;
    
    margin-top:4em;
}

#downloads .hero .cta:hover {
    background:#fff;
    transition: all 200ms ease;
    -webkit-transition: all 200ms ease;
}

#downloads .hero h1,
#downloads .hero p,
#downloads .hero #logo-ces,
#downloads .hero .logo,
#downloads .hero .cta {
    display:none;   
}

#downloads .hero video {
    z-index:0;
    top: 0em;
    left: 0em;
    position:absolute;
    z-index:0;
    width: 100vw;
    
    display:none;
}

#downloads h1 {
    line-height:1.3;
    font-size:1.8em;
    letter-spacing:0.1em;
    color:#333;
    font-weight:100;
    margin-bottom:0.3em;
}


#downloads select {

    border: 1px solid #eee;
    border-radius: 0px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 1em 3.5em 1em 1em;
    font-weight:400;
    color:#999;
    letter-spacing:0.05em;

    margin: 0.5em;      
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    background-color: #fff; 
    
    background-image: url('http://cwsmgmt.corsair.com/responsive/img/downloads/icon-arrow-down.png');
    background-position: calc(100% - 12px) 13px;
    background-repeat: no-repeat;
    outline:none;
}

 select.gray,
 input.gray {
    background-color: #f7f8f9;
}


#search  {
    /* styling */
    border: 1px solid #eee;
    border-radius: 0px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 1.2em;
    font-weight:400;
    color:#999;
    letter-spacing:0.05em;

    /* reset */
    margin: 0.5em;      
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    outline:none;
}

.download_input {
    border: 1px solid #eee;
    border-radius: 0px;
    display: inline-block;
    font-size: .9em;
    line-height: 1.5em;
    padding: 1.5em 2em;
    font-weight: 400;
    color: #999;
    letter-spacing: 0.15em;
    margin: 0.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    background: #f8f8f8;
}

input.search {
    background-image: url('http://cwsmgmt.corsair.com/responsive/img/downloads/icon-search.png');
    background-position: calc(100% - 12px) 13px;
    background-repeat: no-repeat;
}

.white-popup-block .chosen-container-single .chosen-single span {
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.1em;
}

.white-popup-block .chosen-container,
#downloads .chosen-container {
    text-align: left;   
}

.white-popup-block .chosen-container-single,
#downloads .chosen-container-single {
    margin:0.5em;
}

.white-popup-block .chosen-container-single .chosen-single,
#downloads .chosen-container-single .chosen-single {

    position: relative;
    display: block;
    overflow: hidden;
    outline: none;
    padding:1.2em 3.5em 1.2em 1.5em;
    height: auto;
    border: 1px solid #eee;
    border-radius: 0;
    font-weight: 400;
    background-clip: none;
    box-shadow: none;
    color: #999;
    text-decoration: none;
    white-space: nowrap;
    line-height:normal;
  
    letter-spacing:0.05em;

    margin: 0;      
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    background-color: #f7f8f9; 
    
    background-image: url('http://cwsmgmt.corsair.com/responsive/img/downloads/icon-arrow-down.png');
    background-position: calc(100% - 12px) 13px;
    background-repeat: no-repeat;
    outline:none;
}

.white-popup-block .chosen-container-single .chosen-single div b,
#downloads .chosen-container-single .chosen-single div b{
    display:none;   
}

.white-popup-block .chosen-container .chosen-drop,
#downloads .chosen-container .chosen-drop {

    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    box-shadow: none;
    color: #999;
    text-decoration: none;
    white-space: nowrap;
  
    letter-spacing:0.05em;
  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    background-color: #fff; 
    margin:0;
    
    outline:none;
}

.white-popup-block .chosen-container .chosen-results li.active-result,
#downloads .chosen-container .chosen-results li.active-result {
    padding:10px 8px;
}

.white-popup-block .chosen-container .chosen-results li.highlighted,
#downloads .chosen-container .chosen-results li.highlighted {
    background-color:#999 !important;
    background-image:none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.white-popup-block .chosen-container-single .chosen-search input[type="text"],
#downloads .chosen-container-single .chosen-search input[type="text"] {
    padding: 1em !important;
    border: 1px solid #ddd !important;
     background-image: url('http://cwsmgmt.corsair.com/responsive/img/downloads/icon-search.png') !important;;
    background-position: calc(100% - 12px) 13px !important;;
    background-repeat: no-repeat !important;;
}

#downloads #search{
    width:35%;   
}

/* PANEL 2 */
#downloads #panel2 {
    
    background: #f2f2f2;
    color:#333;
    padding-top: 7em;
}

#downloads #panel2 .wrapper {
    overflow: visible;
    position:initial;
}

#downloads #panel2 h1 small {
    font-size:50%;
}

#downloads #panel2 p {
    font-weight:100;
}

#downloads #panel2 .content-left {
    text-align:Center;
    width:73%;
    padding-right:2%;
    display:inline-block;
    vertical-align:top;
}

#downloads #panel2 .content-right {
    width:25%;
    display:inline-block;
    vertical-align:top;
}

#downloads #panel2 .content-left .list-item {
    text-align:left;
}

#downloads #panel2 .content-right .tab-left {
     display:none;
}

.white-popup-block {
    background: #FFF;
    padding:0;
    text-align: left;
    max-width: 650px;
    margin: 40px auto;
    position: relative;
    text-align:center;
}

.white-popup-block h1 {
    font-weight: 300;
    letter-spacing: 0.15em;
    margin-top: 1em;
    margin-bottom: 0;
    font-size:1.8em;
}

.white-popup-block p {
    line-height: 1.5;
    letter-spacing: 0.08em;
    padding: 1em 2em 1em;
    color: #1d1d1d;
    max-width: 400px;
    margin: auto;
}

.white-popup-block li {
    display:block;
    width:100%;
    margin:0 auto;
}

.white-popup-block li input {
    width: 266px;
    max-width: 100%;
    margin: 1em 0;
}

#downloads #panel2 .item {
    background:#fff;
    margin-bottom: 15px;
    color: #000;
    min-height: 144px;
    
    -webkit-box-shadow: 0px 2px 11px 0px rgba(166,166,166,0.66);
    -moz-box-shadow: 0px 2px 11px 0px rgba(166,166,166,0.66);
    box-shadow: 0px 2px 11px 0px rgba(166,166,166,0.66);
    
    border-radius:2px;
    display:none;
}

#downloads #panel2 .protip {
    background-color:#000;
    color:#eee;
    text-align:center;
    padding:2em;
    letter-spacing:0.1em;
    min-height:100px;
    margin-bottom:14px;
    
    position: relative;
}

#downloads #panel2 .protip .close-protip {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 1em;
    -webkit-filter: invert(100);
    filter: invert(100);
    cursor:pointer;
}


.mfp-close {
    position:absolute;
    top: 12px;
    right: 12px;
    width: 12px;
    height: 12px;
    -webkit-filter: invert(100);
    filter: invert(100)
}

#downloads #panel2 .content-left .protip {
    background-color: #333;
    color: #fff;
    text-align: left;
    min-height: 0;

    display:none;
}

#downloads #panel2 .content-left .protip .close-protip {
    top:1.5em;
    right:  1.5em;
}

#downloads #panel2 .item .details {
    width:81%;
}

#downloads #panel2 .item div {
    vertical-align: middle;
    display:inline-block;
}

#downloads #panel2 .item .thumb {
    width: 17%;
    max-width: 146px;
}

#downloads #panel2 .item .thumb img {
    width:100%;   
}

#downloads #panel2 .item .product_name {
    width:46%;
    color:#222;
    font-weight:500;
    padding:2%;
    font-size:1.1em;
    letter-spacing:0.1em;
}

#downloads #panel2 .item .download_name {
    width:33%;
    color:#222;
    font-weight:500;
    padding:2%;
    font-size:0.8em;
    letter-spacing:0.1em;
    
    color:#999;
}

#downloads #panel2 .item .download_name .name {
    font-size:1.4em;
    line-height: 1.4;
    margin-top:0;
}

#downloads #panel2 .item .download_url {
    width: 10%;
    text-align: right;
}

#downloads #panel2 .item .dl {
    -webkit-filter :invert(0%);
    filter :invert(0%);
    
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
}

#downloads #panel2 .item .dl:hover {
    -webkit-filter :invert(10%);
    filter :invert(10%);
    
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
}

/*PANEL 3*/
#downloads #panel3 {
    background:#f2f2f2;
    color:#333;
    padding-top:7em;
    padding-bottom:12em;
}

#downloads #panel3 .wrapper {
    text-align: center;
}

#downloads #panel3 h1 {
    font-weight:400;
    line-height:1.2;
    padding-bottom:2em;
}

#downloads #panel3 h1 small {
    font-size:60%;
    color:#999;
}

#downloads #panel3 ul {
    padding:0;    
}

#downloads #panel3 ul li {
    display:inline-block;
    width:23%;
    padding:1%;
    list-style-type: none;
    margin:0;
    text-align: left;
    position:relative;
    cursor:pointer;
    
    vertical-align: top;
}

#downloads #panel3 ul li img {
    max-width:100%;
}

#downloads #panel3 ul li h2 {
    font-size:1.1em;
    letter-spacing:0.1em;
    font-weight:500;
    padding-top:.8em;
    text-transform: uppercase;
}

#downloads #panel3 ul li p {
    font-size:1em;
    max-width:90%;
    color:#999;
}

#downloads #panel3 ul li .play-btn {
    
    position:absolute;
    left:0;
    right:0;
    margin:0 auto;
    top: 40%;
    height: 25%;
    opacity:0;  
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
}

#downloads #panel3 ul li:hover .play-btn {
    opacity:0.8;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
}

#downloads #panel3 ul {
    margin:0 -1%;
}

/*GALLERY*/
.homepage-grid {
    padding: 0em ;
    margin:0;
    background:#000;
    display:none;
}

.grid-item  {
    overflow:hidden;
}

.grid-item img {
    width:100%;
    position:absolute;
    top:0;
    left:0;
    
    cursor:pointer;
    
    transform:scale(1);   
    -webkit-transform:scale(1);   
    
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
}

.grid-item:hover img {
    transform:scale(1.08);   
    -webkit-transform:scale(1.08);   
    
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
}

.grid-item {
    color:#000;
}

.grid-item.horiz-one {
    width:18.75%;   
    height:20.6vw;
}

.grid-item.horiz-two {
    width:31.20%; 
    height:20.6vw;
}

.grid-item.horiz-three {
    width:50%;   
    height:41.2vw;
}

.grid-item .overlay {
    position: absolute;
    width: 90%;
    padding: 20% 5% 1.5em;
    color: #eee;
    letter-spacing: 0.1em;
    bottom: 0;
    text-align: center;
    opacity: 0;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    
}

.grid-item:hover .overlay {
    opacity:1;
    
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
} 

.grid-item .overlay .cta {
    cursor: pointer !important;
    background:none !important;
    padding: 0em 3em 1em; !important;
    margin-top:0.5em !important;
}


.grid-item .overlay .product-name {
    font-size:1.4em;
    letter-spacing:0.2em;
}
/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1600px) {

}
@media only screen and (max-width: 1200px) {
    
    
    #downloads #panel2 {
        padding-top:4.5em;
    }
    
    #downloads #panel2 .content-left {   
        position: relative;
        width: 100%;
        padding-right: 0%;
    }
    
    #downloads #panel2 .content-right {
        position:absolute;
        right: -313px;
        width: 320px;
        background:#eaeaea;
        transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        
        background:#eaeaea;
    }
    #downloads #panel2 .content-right.active {
        right: 0px;
        
        transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
    }
    
   #downloads #panel2 .content-right .tab-left {
        display:block;
        height:100%;
        width:20px;
        margin-left:-20px;
        background:#eaeaea;
        position: absolute;
        padding-left: 10px;
        cursor:pointer
    }
    
    #downloads #panel2 .content-right .protip {
        display:none;
    }
    
    #downloads #panel2 .content-right .side-img.first {
        padding-top:20px;
    }
    
    #downloads #panel2 .content-right .side-img.last {
        padding-bottom:20px;
    }
    
    #downloads #panel2 .content-left .protip {
        display:block;
    }
}

@media only screen and (max-width: 992px) {

    
    #downloads .hide-on-mobile {
        display:none !important;
    }
    
    #downloads .show-on-tablet {
        
        display:block;
    }
    
    #downloads #panel2 .item .thumb {
        width: 30%;
        max-width: none;
    }

    #downloads #panel2 .item .details {
        width: 30%;
        max-width: none;
        padding: 1em 0;
    }
    
    #downloads #panel2 .item .details {
        width: 67%;
    }
    
    #downloads #panel2 .item .product_name {
        width: 96%;
        padding: 1em 2%;
    }

    #downloads #panel2 .item .download_name {
        width: 70%;
    }
    
    #downloads #panel2 .item .download_url {
        width: 20%;
    }

    
    #downloads #panel3 ul li {
        width: 46%;
        padding:2%;
        max-width: 300px;
    }
}

@media only screen and (max-width: 768px) {  
    #downloads .text-center {
        text-align: left;
    }
    
    #downloads .show-on-mobile {
        display:block;     
    }
    #downloads .hero .down-arrow {
        display:none;   
    }
    
    #downloads .hero h1 {
        font-size:4em;    
    }
    
    #downloads .hero p {
        font-size: 1.2em;
    }
    
    #downloads #cat_chosen,
    #downloads #search {
        width:100% !important;    
    }
    
    /*GALLERY*/
    #downloads .grid-item.horiz-one {
        width: 37.5%;
        height: 40.2vw;
    }
    
    #downloads .grid-item.horiz-two {
        width: 62.40%;
        height: 40.2vw;
    }
    
    #downloads .grid-item.horiz-three {
        width: 100%;
        height: 80.2vw;
    }

}

@media only screen and (max-width: 600px) {
    
    #downloads .hero h1 {
        font-size: 8.5vw;
    }
    
    #downloads #panel2 .item {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        
        margin-bottom: 10%;
    }  
    
    #downloads #panel2 .item .thumb {
        width: 100%;
    }
    
    #downloads #panel2 .item .details {
        width: 96%;
        padding:1em 2%;
    }
    
    #downloads #panel2 {
        padding-top: 10%;
    }
    
    #downloads #panel3 ul li {
        width: 96%;
        padding:2%;
        max-width: 300px;
    }
    
     #downloads #panel2 .content-right {
        display:none;    
    }
   
    .white-popup-block li {
        display: block !important;
        width: 100% !important;
        max-width: 450px !important;
    }
    
    .white-popup-block li input,
    form .cta {
        width: 100% !important;
    }
    
}

@media only screen and (max-width: 479px) {
    
    .xs-hide {
        display:none;   
    }
    
    #downloads .xs-visible {
        display:block;
    }
   
   .grid-item .overlay { 
        font-size: 60%;
    }
}


/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
	opacity: 0;

	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out; 



	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;

	-webkit-transform: scale(1); 
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 

	opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}


.mfp-bg {
    opacity: 0.92;
}

.mfp-close-btn-in .mfp-close {
    color: #ccc;
}

/**
 * Fade-move animation for second dialog
 */

/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;

	-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );

}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;

	-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0;

	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}