/*styles for the template partial Hero and Hero type 1*/

section.panel-gallery-2{
    padding: 50px 0 0;
    position: relative;
}

section.panel-gallery-2 .icons{
    margin-bottom: 40px;
    padding-left:0;
}

section.panel-gallery-2 .panel-gallery-2-icon{
    width: 80px;
    height: 80px;
    border: none;
    display: flex;
    font-size: 35px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
}

section.panel-gallery-2 .color-box {
    position: absolute;
    z-index: 0;
    top: 80px;
}

section.panel-gallery-2 .panel-gallery-2-content {
    padding: 40px;
}

section.panel-gallery-2 .panel-gallery-2-content p{
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
}


section.panel-gallery-2 .row.gallery .box {
    border: solid transparent;
}

section.panel-gallery-2 .panel-gallery-2-photo-2 {
    margin-bottom: 30px;
}

section.panel-gallery-2 .gallery{
	position: relative;
	z-index: 0;
}

section.panel-gallery-2.left .gallery .row{
    flex-direction: row-reverse;
}

section.panel-gallery-2 .gallery .row .column {
    display: flex;
    flex-direction: column;
}

/***********************/
/* Responsive styles */
/***********************/
@media (max-width: 768px){

    section.panel-gallery-2 .panel-gallery-2-photo-1 {
        margin-bottom: 30px;
    }

}

@media (max-width: 992px){

    section.panel-gallery-2 .panel-gallery-2-icon{
        bottom:-40px;
    }

    section.panel-gallery-2.left .panel-gallery-2-icon{
        left: 75%;
    }

    section.panel-gallery-2.right .panel-gallery-2-icon{
        right: 75%;
    }

    section.panel-gallery-2 {
        display: flex;
        flex-direction: column-reverse;
    }

    section.panel-gallery-2 .color-box {
        top: 0px;
    }

    section.panel-gallery-2.right .color-box {
        right: 0;
    }

    section.panel-gallery-2.left .color-box {
        left: 0;
    }

}

@media (min-width: 992px){

    section.panel-gallery-2 .gallery .row .column {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    section.panel-gallery-2:not(.has-icons) .gallery{
        margin-top:100px;
    }

    section.panel-gallery-2 .panel-gallery-2-content p{
        margin:40px 100px;
    }

    section.panel-gallery-2.right .color-box, 
    section.panel-gallery-2.left .panel-gallery-2-content {
        left:0;
    }

    section.panel-gallery-2.left .color-box,
    section.panel-gallery-2.right .panel-gallery-2-content {
        right:0;
    }

    section.panel-gallery-2 .panel-gallery-2-content {
        padding: 80px 80px 40px;
        position: absolute;
        top:0;
        width: 50%;
        z-index: 1;
    }

	section.left .panel-gallery-2-content {
        padding: 80px 80px 40px 310px;
	}
	.panel-gallery-2-content ul
	{
		padding-left: 6%;
	}
	
    section.panel-gallery-2 .color-box {
        z-index: 0;
        top: 80px;
    }

    section.panel-gallery-2 .panel-gallery-2-icon{
        top:111px;
    }


    section.panel-gallery-2.left .panel-gallery-2-icon{
        right: -40px;
    }

    section.panel-gallery-2.right .panel-gallery-2-icon{
        left: -40px;
    }


}

@media (min-width: 1800px){

    section.panel-gallery-2 .section-title, 
    section.panel-gallery-2 .section-subtitle {
        max-width: 100%;
    }

}

@media (min-width: 1800px){


}


/* Some padding changes to the bottom of the whole component */

@media (min-width: 992px){
    section.panel-gallery-2{
    padding-bottom:30px;
    }
}


/* Changing the Text for the Perks + Other components that use the same styling. -j */ 


@media(min-width: 1600px){
	  section.panel-gallery-2 .panel-gallery-2-content p{
    	max-width: 800px;
    	max-height: 350px;
    }
	section.left .panel-gallery-2-content {
        padding: 5% 0px 0px 14%;
        max-height: 700px;
    }
    .panel-gallery-2-content ul
	{
		padding-left: 0px;
	}
}



@media (min-width: 1200px) and (max-width:1600px){	
    section.panel-gallery-2 .panel-gallery-2-content p{
    	max-width: 800px;
    	max-height: 350px;
    }
	section.left .panel-gallery-2-content {
        padding: 8% 0% 0% 12%;
        max-height: 700px;
    }
    .panel-gallery-2-content ul
	{
		padding-left: 6%;
	}

}

@media (min-width: 991px) and (max-width:1199px){	
     section.panel-gallery-2 .panel-gallery-2-content p{
    	max-width: 240px;
    	min-width: 265px;
    }
	section.left .panel-gallery-2-content {
      padding: 8.5% 0% 0% 9%;
        max-height: 700px;
    }
    .panel-gallery-2-content ul
	{
		padding-left: 6%;
	}
    
}