/* Example for media query: change number of items per row */

@media screen and (min-width: 1921px) {
.items li {
width: 20%; /* Fallback */
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 382px;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 11.8em 1em 8.3em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
font-size: 1.15em;
margin-bottom: 2.4em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite span.media-name {
font-size: 1.2em;
}


}

@media screen and (max-width: 1920px) {
.items li {
width: 20%; /* Fallback */
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 382px;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 11.8em 1em 8.3em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
font-size: 1.15em;
margin-bottom: 2.4em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite span.media-name {
font-size: 1.2em;
}


}


/******************************/
@media only screen and (max-width : 1880px) {

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 374px;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 11.8em 1em 8.1em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
font-size: 1.15em;
margin-bottom: 2.4em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite span.media-name {
font-size: 1.2em;
}

}

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

.container a header {
width: 41.5%;
height: 54.3em;
}

.container a header div.header-title h1 {
font-size: 3.6em;
}

.container a header div.header-title h2 {
font-size: 1.1em;
}

.container a header div.header-title p {
width: 55%;
}

.container .items li a div h3 {
font-size: 3.4em;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 318px;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 11.6em 1em 5.6em;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
line-height: 1.5em;
margin-bottom: 2em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite span.media-name {
font-size: 1.2em;
}

}


/*HP*/
@media only screen 
and (device-width: 1536px) 
and (device-height: 864px)  {

.container .items li a div h3 {
font-size: 2.7em;
}

}




@media screen and (max-width: 1440px) {
.items li {
width: 25%; /* Fallback */
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}

.container a header {
width: 44.5%;
height: 61.4em;
}

/*.container a header div.header-title h1 {
font-size: 4.8em;
}*/

.container a header div.header-title p {
font-size: 2.13em;
width: 56%;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 357px;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 10.7em 1em 4.9em;
}



div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
margin-bottom: 1.8em;
}



}



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

.container a header {
width: 46.4%;
height: 61em;
}

.container a header div.header-title h1 {
font-size: 3.35em;
}

.container a header div.header-title h2 {
font-size: 1.02em;
}

.container a header div.header-title p {
font-size: 2.05em;
width: 55%;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 338px;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 10.6em 1em 4.1em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
margin-bottom: 1.8em;
}

}

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

.container a header {
width: 45.1%;
height: 56em;
margin: 0em auto 9.8%;
}

.container a header div.header-title h1 {
font-size: 3.1em;
}

.container a header div.header-title h2 {
font-size: 1em;
letter-spacing: 0.45em;
}

.container a header div.header-title p {
font-size: 1.9em;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 317px;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
margin: 2.5em auto 0em auto;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 9.4em 1em 4.1em;
}

}

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

.container a header {
width: 47.1%;
height: 55em;
}

.container a header div.header-title h1 {
font-size: 3.1em;
}

.container a header div.header-title h2 {
font-size: 1em;
letter-spacing: 0.424em;
}

.container a header div.header-title p {
width: 57.3%;
font-size: 1.86em;
}

.container .items li a div h3 {
font-size: 3.2em;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 297px;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
    padding: 8.3em 1em 3.8em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
margin: 2.1em auto 0em auto;
}





}

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

.container a header {
width: 55.1%;
height: 54em;
}

.container a header div.header-title h1 {
font-size: 2.99em;
}

.container a header div.header-title h2 {
font-size: 1em;
letter-spacing: 0.4em;
}

.container a header div.header-title p {
width: 56.3%;
font-size: 1.83em;
}

/**/

.container .items li a div h3 span.title {
display: none;
}

.container .items li a div {
top: 19em;
opacity: 1;
}

.container .items li a div {
background: rgba(88, 200, 212, 0.5);	
}


.container .items li.rose-hover a div {
background: rgba(206, 51, 117, 0.5)
}

.container .items li.white-hover a div {
background: rgba(255, 255, 255, 0.9);
}

.container .items li a div h3 {
font-size: 2.3em;
padding: 0em 0.8em 0em 0.8em;
line-height: 1em;
}

.container .items li a div h3 span.title {
font-size: 0.7em;
line-height: 1.3em;
}

/**/


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 278px;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
font-size: 1.1em;
margin-bottom: 1.7em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
margin: 3em auto 0em auto;
font-size: 1em;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 8.6em 1em 4.1em;
}

}



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

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 276px;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 9.6em 1em 3.8em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
width: 95%;
margin: 2em auto 0em auto;
}

}


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

.container a header {
height: 53.33em;
}

.container a header div.header-title h1 {
font-size: 2.9em;
}

.container a header div.header-title h2 {
letter-spacing: 0.38em;
}

.container a header div.header-title p {
width: 56%;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
margin-bottom: 1.8em;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 277px;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
margin: 1.9em auto 0em auto;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 7.6em 1em 3.5em;
}

}



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

.items li {
width: 33.3333333%; /* Fallback */
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}

.container a header {
height: 51.5em;
}

.container .items li a div h3 {
font-size: 2.2em;
}

.container .items li a div {
top: 24em;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 8.1em 1em 3.7em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
margin: 2em auto 0em auto;
}

}

@media screen and (max-width: 800px) {
.container .items li a div {
    top: 18em;
}
}


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

.container a header {
width: 72%;
margin: 0em auto 14.8%;
height: 54.5em;
}

.container a header div.header-title h1 {
font-size: 3em;
}

.container a header div.header-title p {
width: 55%;
}

.container .items li a div {
top: 18em;
}

/**/

i.fa-lg {
font-size: 1.35em;
}

div.top nav.collapse-navbar div.menu-two div.share-social-media a {
margin-right: 0.8em;
}

div.top nav.collapse-navbar div.menu-two div.share-social-media a:nth-child(1) {
margin-right: 0em;
}

div.top nav.collapse-navbar div.menu-two button, div.top nav.collapse-navbar div.menu-one a.icon {
margin-left: 1.8em;
margin-right: 1.89em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
font-size: 1em;
line-height: 1.3em;
margin: 2.2em auto 0em auto;
width: 95%;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
font-size: 1.05em;
margin-bottom: 2.1em;
line-height: 1.5em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite span.media-name {
padding-bottom: 0.2em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 8.9em 0em 4em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 226px;
}

 
}



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

.container a header {

    width: 85.8%;
    height: 53.5em;
    margin: 10% auto 14.8%;

}

.container a header div.header-title h1 {

    font-size: 2.99em;

}

.items li {
width: 50%; /* Fallback */
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}

.container a header {
width: 85.8%;
height: 45.5em;
margin: 10% auto 14.8%;
}

.container a header div.header-title p {
width: 55%;
} 

.container .items li a div {
top: 25em;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 9.9em 0em 6.8em;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 229px;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
margin: 3.2em auto 0em auto;
}

}


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

.container a header {

    width: 61.8%;
    height: 56.5em;
    margin: 16% auto 14.8%;

}

.container a header {
width: 61.8%;
height: 53.5em;
margin: 16% auto 14.8%;
}

.container a header img {
width: 100%;
}

div.header-title h1 {

    font-size: 3.2em;

}

.container a header div.header-title h2 {
font-size: 1.1em;
letter-spacing: 0.37em;
}

.container a header div.header-title p {
font-size: 2em;
width: 85%;
}

.container .items li a div {
top: 20em;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
margin-bottom: 2.2em;
line-height: 1.5em;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
margin: 3.9em auto 0em auto;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 9.9em 0em 13.7em;
}


}


@media screen and (max-width: 516px) {
.container .items li a div {
    top: 18em;
}	
}



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

/*.items li {
width: 100%;
}*/

.container a header {

    width: 76.8%;
    height: 59.5em;
    margin: 22% auto 14.8%;

}

.container a header div.header-title h1 {

    font-size: 3.55em;

}

.container a header div.header-title h2 {
font-size: 1.19em;
letter-spacing: 0.4em;
}

.container a header div.header-title p {
font-size: 2.1em;
width: 100%;
}

.container .items li a div {
top: 16em;
}

.container .items li a div h3 {
font-size: 2.1em;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {

}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 10.1em 0em 13.4em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
width: 232px;
}

}



@media only screen and (max-width : 411px){
.container .items li a div {
top: 10em;
}
}


@media only screen and (max-width : 400px){
.container .items li a div {
top: 14em;
}
}


@media only screen and (max-width : 392px){
.container .items li a div {
top: 12em;
}
}



@media only screen and (max-width : 350px){
.container .items li a div {
top: 11.5em;
}
}


@media only screen and (max-width : 330px){
.container .items li a div {
top: 10em;
}
}




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

.container a header {

    width: 88.4%;
    height: 46em;
    position: relative;
    top: 5em;
    margin-bottom: 16em;

}

.container a header img {
width: 100%;
}

.container a header div.header-title h1 {

    font-size: 2.5em;

}
.container a header div.header-title h2 {
font-size: 1.1em;
letter-spacing: 0.18em;
}

.container a header div.header-title p {
font-size: 1.6em;
width: 100%;
}

/**/

.container .items li a div {
top: 10em;
opacity: 1;
}

.container .items li a div {
background: rgba(88, 200, 212, 0.9);	
}

.container .items li.white-hover a div {
background: rgba(255, 255, 255, 0.9);
}

.container .items li a div h3 {
font-size: 1.5em;
padding: 0em 0.8em 0em 0.8em;
}

.container .items li a div h3 span.title {
font-size: 0.7em;
line-height: 1.3em;
}

.container .items li a h6 {
font-size: 1.2em;
padding: 0.5em;
}

/**/

div.top nav.collapse-navbar div.menu-one a.logo {
margin-left: 1.3em;
}

div.top nav.collapse-navbar div.menu-two button.no-vertical-border {
font-size: 1.5em;
margin-left: 1.2em;
margin-right: 1.2em;
padding-top: 0.5em;
padding-bottom: 0em;
}

i.fa-lg {
font-size: 1.3em;
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
padding: 9em 0em 9.7em;
}



}