@charset "UTF-8";

section.gallery { background-color : rgba(255, 255, 255, 1); }

section.gallery > div > h6 {
	position : relative;
	padding : 0 0 40px 0;
	margin : 0;
	text-align : center;
	}
	
section.gallery > div > h6::before {
	position : absolute;
	bottom : 12px;
	left : calc(50% - 20px);
	z-index : 10;
	width : 40px;
	height : 10px;
	background-color : rgba(225, 100, 40, 1);
	content : "";
	}

section.gallery > div,
section.gallery > div > div.swiper,
section.gallery > div > div.swiper > ul,
section.gallery > div > div.swiper > ul > li { position : relative; }
	
section.gallery > div > div.swiper {
	width : 100%;
	padding : 0;
	margin : 0;
	overflow : hidden;
	}

section.gallery > div > div.swiper > ul {
	display : flex;
	width : 2000em;
	padding : 0;
	margin : 0;
	list-style : none;
	}
	
section.gallery > div > div.swiper > ul > li > img {
	display : block;
	width : 100%;
	height : auto;
	}
	
section.gallery > div > div.swiper > ul > li > span {
	display : block;
	padding : 10px 15px;
	position : absolute;
	bottom : 20px;
	right : 20px;
	z-index : 10;
	background-color : rgba(255, 255, 255, 1);
	color : rgba(0, 0, 0, 1);
	font: normal 16px/20px "Regular", sans-serif;
	}
	
section.gallery > div > div.swiper > div.prev,
section.gallery > div > div.swiper > div.next {
	position : absolute;
	top : 0;
	z-index : 10;
	height : 100%;
	}
	
section.gallery > div > div.swiper > div.prev,
section.gallery > div > div.swiper > div.next > button { left : 0; }
section.gallery > div > div.swiper > div.next,
section.gallery > div > div.swiper > div.prev > button { right : 0; }

section.gallery > div > div.swiper > div.prev > button,
section.gallery > div > div.swiper > div.next > button {
	display : block;
	padding : 0;
	margin : 0;
	border : 0;
	position : absolute;
	z-index : 10;
	cursor : pointer;
	background-color : rgba(225, 100, 40, 1);
	background-image : url("../img/arrow.white.svg?03082018");
	background-size : 60% auto;
	background-position : 50% 50%;
	background-repeat : no-repeat;
	transition : all 0.25s ease;
	}
	
section.gallery > div > div.swiper > div.prev > button:hover,
section.gallery > div > div.swiper > div.next > button:hover { background-position : 65% 50%; }	
section.gallery > div > div.swiper > div.prev > button { transform : rotate(180deg); }

@media only screen and (min-width : 1441px) {
	section.gallery > div { padding : 60px 0; }
	section.gallery > div > h6 { font: normal 72px/72px "Headers", sans-serif; }
	section.gallery > div > div.swiper { margin-top : 30px; }
	section.gallery > div > div.swiper > ul > li { width : 50vw; }
	
	section.gallery > div > div.swiper > div.prev,
	section.gallery > div > div.swiper > div.next {
		width : 25vw;
		background-color : rgba(255, 255, 255, 0.75);
		}
		
	section.gallery > div > div.swiper > div.prev > button,
	section.gallery > div > div.swiper > div.next > button {
		top : calc(50% - 40px);
		width : 60px;
		height : 80px;
		}
	}
	
@media only screen and (min-width : 1281px) and (max-width : 1440px) {
	section.gallery > div { padding : 50px 0; }
	section.gallery > div > h6 { font: normal 63px/63px "Headers", sans-serif; }
	section.gallery > div > div.swiper { margin-top : 25px; }
	section.gallery > div > div.swiper > ul > li { width : 50vw; }
	
	section.gallery > div > div.swiper > div.prev,
	section.gallery > div > div.swiper > div.next {
		width : 25vw;
		background-color : rgba(255, 255, 255, 0.75);
		}
		
	section.gallery > div > div.swiper > div.prev > button,
	section.gallery > div > div.swiper > div.next > button {
		top : calc(50% - 40px);
		width : 60px;
		height : 80px;
		}
	}
	
@media only screen and (min-width : 961px) and (max-width : 1280px) {
	section.gallery > div { padding : 40px 0; }
	section.gallery > div > h6 { font: normal 54px/54px "Headers", sans-serif; }
	section.gallery > div > div.swiper { margin-top : 20px; }
	section.gallery > div > div.swiper > ul > li { width : 50vw; }
	
	section.gallery > div > div.swiper > div.prev,
	section.gallery > div > div.swiper > div.next {
		width : 25vw;
		background-color : rgba(255, 255, 255, 0.75);
		}
		
	section.gallery > div > div.swiper > div.prev > button,
	section.gallery > div > div.swiper > div.next > button {
		top : calc(50% - 40px);
		width : 60px;
		height : 80px;
		}
	}
	
@media only screen and (min-width : 481px) and (max-width : 960px) {
	section.gallery > div { padding : 30px 0 20px 0; }
	section.gallery > div > h6 { font : normal 45px/45px "Headers", Arial, sans-serif; }
	section.gallery > div > div.swiper { margin-top : 15px; }
	section.gallery > div > div.swiper > ul > li { width : 100vw; }
	
	section.gallery > div > div.swiper > div.prev,
	section.gallery > div > div.swiper > div.next {
		width : 40px;
		background-color : rgba(255, 255, 255, 0);
		}
		
	section.gallery > div > div.swiper > div.prev > button,
	section.gallery > div > div.swiper > div.next > button {
		top : calc(50% - 30px);
		width : 40px;
		height : 60px;
		}
	}
	
@media only screen and (max-width : 480px) {
	section.gallery > div { padding : 20px 0 0 0; }
	section.gallery > div > h6 { font : normal 36px/36px "Headers", Arial, sans-serif; }
	section.gallery > div > div.swiper { margin-top : 10px; }
	section.gallery > div > div.swiper > ul > li { width : 100vw; }
	
	section.gallery > div > div.swiper > div.prev,
	section.gallery > div > div.swiper > div.next {
		width : 40px;
		background-color : rgba(255, 255, 255, 0);
		}
		
	section.gallery > div > div.swiper > div.prev > button,
	section.gallery > div > div.swiper > div.next > button {
		top : calc(50% - 30px);
		width : 40px;
		height : 60px;
		}
	}