@font-face {
    font-family: 'Oswald';
    src: url(fonts/oswald.regular.ttf);
}

.slides {     
width: 100%;
height: auto;
min-height: auto;
max-height: auto;
min-width: 100%;
max-width: 100%;
}

.swiper-slide {
width: 100%;
height: auto;
min-height: auto;
max-height: auto;
max-width: 100%;
min-width: auto;
margin-bottom: -4px;
}

@media (min-width: 320px) {

.swiper-title {
color: #ffffff;
font-size: 5vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 5vw;
}

.swiper-text {
color: #ffffff;
font-size: 3vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height:3vw;
}

.swiper-slide .text-container {
position: absolute;
background: rgba(0,0,0,0.8);
bottom: 5px;
left: 5px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
width: auto;
height: auto;
vertical-align: middle;
}

}

@media (min-width: 480px) {

.swiper-title {
color: #ffffff;
font-size: 5vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 5vw;
}

.swiper-text {
color: #ffffff;
font-size: 3vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 3vw;
}

.swiper-slide .text-container {
position: absolute;
background: rgba(0,0,0,0.8);
bottom: 5px;
left: 5px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
width: auto;
height: auto;
vertical-align: middle;
}

}

@media (min-width: 600px) {

.swiper-outer-container {
border: 1px solid #fff;
display: block;
margin-left: auto; 
margin-right: auto;
margin: 0 auto;
height: auto;
min-height: 100%;
max-width: 1002px;
}

.swiper-container {
width: 100%;
height: auto;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}

.swiper-slide {
width: 100%;
height: 100%;
min-width: 100%;
max-width: 100%;
min-height: 100%;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}

.swiper-slide .text-container {
position: absolute;
background: rgba(0,0,0,0.8);
bottom: 5px;
left: 5px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
width: auto;
height: auto;
}

.swiper-title {
color: #ffffff;
font-size: 5vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 5vw;
}

.swiper-text {
color: #ffffff;
font-size: 3vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 3vw;
}

.swiper-slide {
height: auto;
width: auto;
min-height: auto;
max-height: auto;
min-width: auto;
max-width: auto;
}

}

@media (min-width: 720px) {

.swiper-outer-container {
border: 1px solid #fff;
display: block;
margin-left: auto; 
margin-right: auto;
margin: 0 auto;
height: auto;
min-height: 100%;
max-width: 1002px;
}

.swiper-container {
width: 100%;
height: auto;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}

.swiper-slide {
width: 100%;
height: 100%;
min-width: 100%;
max-width: 100%;
min-height: 100%;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}

.swiper-slide .text-container {
position: absolute;
background: rgba(0,0,0,0.8);
bottom: 5px;
left: 5px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
width: auto;
height: auto;
}

.swiper-title {
color: #ffffff;
font-size: 5vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 5vw;
}

.swiper-text {
color: #ffffff;
font-size: 3vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 3vw;
}

.swiper-slide {
height: auto;
width: auto;
min-height: auto;
max-height: auto;
min-width: auto;
max-width: auto;
}

}

@media (min-width: 1024px) {

.swiper-outer-container {
border: 1px solid #fff;
display: block;
margin-left: auto; 
margin-right: auto;
margin: 0 auto;
height: auto;
min-height: 100%;
max-width: 1002px;
}

.swiper-container {
width: 100%;
height: auto;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}

.swiper-slide {
width: 100%;
height: 100%;
min-width: 100%;
max-width: 100%;
min-height: 100%;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}

.swiper-slide .text-container {
position: absolute;
background: rgba(0,0,0,0.8);
bottom: 5px;
left: 5px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
width: auto;
height: auto;
}

.swiper-title {
color: #ffffff;
font-size: 3vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 3vw;
}

.swiper-text {
color: #ffffff;
font-size: 2vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 2vw;
}

.swiper-slide {
height: auto;
width: auto;
min-height: auto;
max-height: auto;
min-width: auto;
max-width: auto;
}

}


@media (min-width: 1920px) {

.swiper-outer-container {
border: 1px solid #fff;
display: block;
margin-left: auto; 
margin-right: auto;
margin: 0 auto;
height: auto;
min-height: 100%;
max-width: 1002px;
}

.swiper-container {
width: 100%;
height: auto;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}

.swiper-slide {
width: 100%;
height: 100%;
min-width: 100%;
max-width: 100%;
min-height: 100%;
margin-bottom: 0px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}

.swiper-slide .text-container {
position: absolute;
background: rgba(0,0,0,0.8);
bottom: 5px;
left: 5px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
width: auto;
height: auto;
}

.swiper-title {
color: #ffffff;
font-size: 2vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 2vw;
}

.swiper-text {
color: #ffffff;
font-size: 1.1vw;
font-family: 'Oswald';
font-weight: 400;
text-align: left;
line-height: 1.1vw;
}

}