/*  HERO SECTION ELEMENT CSS*/
.uk-container {
   
    position: relative;
}
.element-design{
    position: absolute;
	width:60px;
	height:60px;
}
.element-top-left {
    top: 0px;
    left: -120px;
}

.element-top-right {
    top: 0px;
    right: -70px;
}

.element-star{
	position:absolute;
	left:22%;
	bottom:12%;

}
.element-blue-arrow{
	left:44%;
	bottom:12%;
	position:absolute;
}
section.title-header.title-header-grade{
	
	padding-top:0
}
/* RESOURCE SECTION ELEMENT CSS  */

.recource-orange-octo{
		left:44%;
	position:absolute;
}
.recource-3d-star{
	top:0%;
	right:30%;
	position:absolute;
}

.recource-orange-octo2{
	top:20%;
	left:95%;
	position:absolute;
}

.recource-pink-flawer{
	position:absolute;
	top:0;
	left:90%;

}

.recource-pink-flawer2{
	position:absolute;
	top:80%;
	left:70%;
}

/* BOOKS SECTION ELEMENT CSS */

.books-orange-octo{
	left:50%;
	position:absolute;
}


/* CATEGORY SECTION ELEMENT CSS */

.category-blue-arrow{
	right:0;
	position:absolute;
}

/* DISCOVER SECTION ELEMENT CSS */
.discover-orange-octo{
			left:-10%;
			top:15%;
			position:absolute;
}

.discover-pink-flawer{
			left:-10%;
			top:50%;
			position:absolute;
}


/* AUTHORS SECTION ELEMENT CSS */  

.outhors-orange-octo{
			top:0;
	        left:15%;
			position:absolute;
}

.outhors-pink-flawer-left{
			left:-10%;
			top:0%;
			position:absolute;
}

.outhors-pink-flawer-center{
			top:-10%;
			left:20%;
			position:absolute;
}


/* CONTACT SECTION ELEMENT CSS */

.contact-orange-octo{
	position:absolute;
	left:20%;
	top:70%;
}
.contact-3d-star{
	position:absolute;
	right:-5%;
	top:10%;
}
.contact-pink-flawer{
	position:absolute;
	right:-5%;
	top:70%;
}


/* DELIVERY SECTION ELEMETN CSS */
.delivery-orange-octo{
			position:absolute;
			right:0%;
			top:0%;
}

/* TITLE RIGHT SIDE ELEMENT CSS */

h2.title {
 
    position: relative;
}
h2.title::after {
    background-image: url(img/elements/title-star.svg);
    background-size: contain;
    margin-left: 8px;
    vertical-align: middle;
    z-index: 1000;
    content: "";
    height: 40px;
    width:42px;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

@media only screen and (min-width:1500px){
    section.title-header {
        background-position: bottom;
        background-size: cover;
        height: 350px;
        padding-top: 50px;
    }
      section.title-header.title-header-hero {
    
        background-size:100%;
         
    }

}

@media only screen and (max-width:1499px){
    section.title-header {
        background-position: bottom;
        background-size: cover;
        padding-bottomsection.title-header: 0;
    }


}
 @media only screen and (max-width:1024px){
    section.title-header.title-header-hero {
        min-height: 500px;
        background-size: cover;
        background-image: url('img/tb-home-header-bg.png')!important;
    }
}
 @media only screen and (max-width:900px){
    section.title-header.title-header-hero {
        min-height: 500px;
        background-size: cover;
        background-image: url('img/m-home-header-bg.png')!important;
    }
}
 @media only screen and (max-width:768px){
    section.title-header.title-header-hero {
        min-height: 500px;
        background-size: cover;
        background-image: url('img/m-home-header-bg.png')!important;
    }
}
@media only screen and (max-width:560px){
	
	
}
@media only screen and (max-width:480px){
    section.title-header.title-header-hero {
          background-image: url('img/s-home-header-bg.png')!important;
                 min-height: 400px;
    }
	.element-design{
		width:40px;
		height:40px;
	}

	.title-header-hero .title {
 
    font-size: 34px;
}
		
/*  HERO SECTION ELEMENT CSS*/	

.element-top-left {
    top: -50px;
    left: -0px;
}

.element-top-right {
    top: 0px;
    right: 20px;
}
	.element-star{
	position:absolute;
	left:62% !important;
	top:42% !important;
}
.element-blue-arrow{
	left:44%;
	bottom:-5%;
	position:absolute;
}

	/* RESOURCE SECTION ELEMENT CSS  */

.recource-orange-octo{
	left:44%;
	position:absolute;
}
.recource-3d-star{
	top:0%;
	right:25%;
	position:absolute;
}

.recource-orange-octo2{
	top:18% !important;
	left:85% !important;
	position:absolute;
}

.recource-pink-flawer{
	position:absolute;
	top:0;
	left:85%;

}

.recource-pink-flawer2{
	position:absolute;
	top:100%;
	right:0;
}

	/* BOOKS SECTION ELEMENT CSS */

.books-orange-octo{
	left:0%;
	position:absolute;
}
	
	/* CATEGORY SECTION ELEMENT CSS */

.category-blue-arrow{
	right:10px;
	position:absolute;
}
	
	/* AUTHORS SECTION ELEMENT CSS */  

.outhors-orange-octo{
			top:-50px;
	        left:5%;
			position:absolute;
}

.outhors-pink-flawer-left{
			left:10%;
			top:95%;
			position:absolute;
}

.outhors-pink-flawer-center{
			top:-10%;
			left:50%;
			position:absolute;
}

	/* CONTACT SECTION ELEMENT CSS */

.contact-orange-octo{
	position:absolute;
	
}
.contact-3d-star{
	position:absolute;
	right:5%;
	top:5%;	
}
.contact-pink-flawer{
	position:absolute;
	right:5%;
	top:100%;	
}
/* DELIVERY SECTION ELEMETN CSS */
.delivery-orange-octo{
			position:absolute;
			left:0%;
			top:0%;
}
}

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

/* TITLE RIGHT SIDE ELEMENT CSS */	
	h2.title {
 
    position: relative;
}
h2.title::after {
    background-image: url(img/elements/title-star.svg);
    background-size: contain;
    margin-left: 8px;
    vertical-align: middle;
    z-index: 1000;
    content: "";
    height: 40px;
    width:42px;
    display: inline-block;
    position: absolute;
    top: 10px;
    bottom: 0;
    margin: auto;
}
	
}




@media only screen and (max-width:1024px) {
 
	
.recource-orange-octo2{
	top:35%;
	left:90%;
	position:absolute;
}	
	
		/* CATEGORY SECTION ELEMENT CSS */
	.category-blue-arrow {
    right: 15px;
    position: absolute;
}
	
	/* AUTHORS SECTION ELEMENT CSS */  

.outhors-orange-octo{
			top:-8%;
			position:absolute;
}

.outhors-pink-flawer-left{
			left:10%;
			top:90%;
			position:absolute;
}

.outhors-pink-flawer-center{
			top:-15%;
			left:50%;
			position:absolute;
}
	
	/* CONTACT SECTION ELEMENT CSS */

.contact-orange-octo{
	position:absolute;
	left:50% !important;
	top:0%;
	
}
.contact-3d-star{
	position:absolute;
	right:5%;
	top:20%;
	
}
.contact-pink-flawer{
	position:absolute;
	right:5%;
	top:0%;
} */
}