/* CSS Document */

.create_your_blind{
    margin-left: 10px;
    width:1042px;
    height:586px;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.image_01, .image_02, .image_03, .image_04, .image_05, .image_06,
.image_07, .image_08, .image_09, .image_10, .image_11, .image_12,
.image_13, .image_14, .image_15{
    position:absolute;
    left:77px;
    top:15px;
    width:788px;
    height:433px;
    background-size: cover;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-duration: 12s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-name: animation_02;
}

.image_01{background-image:url(../images/home/01.jpg); animation-name: animation_03; animation-delay: 70s;}
.image_02{background-image:url(../images/home/02.jpg); animation-delay: 130s;}
.image_03{background-image:url(../images/home/03.jpg); animation-delay: 120s;}
.image_04{background-image:url(../images/home/04.jpg); animation-delay: 110s;}
.image_05{background-image:url(../images/home/05.jpg); animation-delay: 100s;}
.image_06{background-image:url(../images/home/06.jpg); animation-delay: 90s;}
.image_07{background-image:url(../images/home/07.jpg); animation-delay: 80s;}
.image_08{background-image:url(../images/home/08.jpg); animation-delay: 70s;}
.image_09{background-image:url(../images/home/09.jpg); animation-delay: 60s;}
.image_10{background-image:url(../images/home/10.jpg); animation-delay: 50s;}
.image_11{background-image:url(../images/home/11.jpg); animation-delay: 40s;}
.image_12{background-image:url(../images/home/12.jpg); animation-delay: 30s;}
.image_13{background-image:url(../images/home/13.jpg); animation-delay: 20s;}
.image_14{background-image:url(../images/home/14.jpg); animation-delay: 10s;}
.image_15{background-image:url(../images/home/15.jpg); animation-name: animation_01;}

@keyframes animation_01 {
    0% {opacity:0; width:788px; left: 77px;}
    35% {opacity:1; width:788px; left: 77px;}
    75% {opacity:1; width: 788px; left: 77px;}
    100% {opacity:0; width: 888px; left: 27px;}
}

@keyframes animation_02 {
    0% {opacity:0; width:788px; left: 77px;}
    15% {opacity:1;}
    75% {opacity:1;width:788px; left: 77px;}
    100% {opacity:0; width: 888px; left: 27px;}
}

@keyframes animation_03 {
    0% {opacity:0; width:788px; left: 77px;}
    25% {opacity:1; width:788px; left: 77px;}
    100% {opacity:1; width:788px; left: 77px;}
    
}

.multiply_layer, .cover{
    position:absolute;
    left:0px;
    top:0px;
    width:1024px;
    height:586px;
}

.multiply_layer{background-image:url(../images/home/multiply_layer.png);}
.cover{background-image:url(../images/home/cover.png);}

.create_your_blind .transparent_box{
	position:relative;
	width:720px;
	height:218px;
	top:165px;
	left:165px;
	background-color:#000;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
	border-radius: 25px;
}

.create_your_blind .search_box{
	color:#FFF;
	position:absolute;
	width:100%;
	text-align:center;
	top:180px;
	z-index:1;
}

.create_your_blind .search_box p{
	font-size:20px;
	margin-top:5px;
	margin-bottom:10px;
}

.create_your_blind .search_box h1{
	font-weight:100;
	font-size:60px;
	margin:0px;
}

.create_your_blind .search_box input{
	width:650px;
	font-size:36px;
}

#search{
	position:absolute;
	right:196px;
	height:51px;
}

#howtoorder{
	background-image:url(../images/howtoorder.jpg);
	background-size: cover;
}

#staff_picks{
	background-image:url(../images/staff_picks.jpg);
	background-size: cover;
}

#uploadyourphoto{
	background-image:url(../images/uploadyourphoto.jpg);
	background-size: cover;
	cursor:pointer;
}

#casestudies{
	background-image:url(../images/casestudies.jpg);
	background-size: cover;
}

#newsletter{
	background-image:url(../images/newsletter.jpg);
	background-size: cover;
}

#materials{
	background-image:url(../images/materials.jpg);
	background-size:contain;
        background-repeat:  no-repeat;
        background-position: center;
}

#install{
	background-image:url(../images/install.jpg);
	background-size: cover;
}

#cost{
	background-image:url(../images/cost.jpg);
	background-size: cover;
}

#design_service{
    	background-image:url(../images/design_service.jpg);
	background-size: cover;
}

#fileToUpload, #uploadImageSubmit{display:none;} /*Hide upload dialog*/

.recommended_images{
    padding: 8px 0px 2px 0px;
    height: 120px;
}

.recommended_images img{
    max-width: 95%;
    object-fit: cover;
    height: 110px;
}

.recommended_images_title{
    margin: 4px 0px 2px 0px;
    text-align: center;
    font-weight: 100;
}

.extra_text_p50{
    width: 512px;
    margin: 5px 5px;
    float: left;
    font-size: 14px;
}

.extra_text_p50 p{
    margin: 0px 16px;
}


.p25{
    width: 243px;
}

.p50{
    margin-bottom: 8px;
}

.p33 .title_black h2{
    font-size:20px;
    padding-top: 8px;
}

@media screen and (max-width: 1200px) {
	.create_your_blind{width:800px; height:493px;}
	.create_your_blind .transparent_box{top:105px;	left:45px;}
	.create_your_blind .search_box{top:120px;}
	#search{right:73px;}
        .extra_text_p50{width:390px;}
        .p25{width:186px;}
        .p33 .title_black h2{font-size:16px;}

@media screen and (max-width: 850px) {
	.create_your_blind{background: none; width:480px; height:200px;}
	.create_your_blind .transparent_box{display:none;}
	.create_your_blind .search_box{color:#3f3f40; position:relative; top:0px; width:480px;}
	.create_your_blind .search_box h1{font-size:40px;}
	.create_your_blind .search_box p{font-size:14px;}
	.create_your_blind .search_box input{width:460px; font-size:36px;}
	#search{right:3px;}
	.p33{width:100%; height:120px;}
	.p33 .title_black{height:40px;}
	.p33 .title_black h2{font-size:20px;}
	.p33 h3{top:35px;}
	.p33 p{top:65px; font-size:12px;}
	#materials{background:none;}
	#install{background:none;}
	#install.p33 p{top:50px;}
	#cost{background:none;}
        #casestudies{background:none;}
        .image_01, .image_02, .image_03, .image_04, .image_05, .image_06,
        .image_07, .image_08, .image_09, .image_10, .image_11, .image_12,
        .image_13, .image_14, .image_15, .multiply_layer, .cover{display:none;}
        .extra_text_p50{width:460px;}
        .p25{width:460px;}
        
}