/************************************************************/
.mobile-dev{display: none;}
/************************************************************/
.s-top{height: 100%;}
.b-top-text{position: relative; float: left; width: 45%; height: 100%; background-color: var(--color4);}
.b-top-img{position: relative; float: right; width: 55%; height: 100%; background-image: url('../img/img-top.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center right;}
.b-top-cont-text{position: absolute; left: 10%; bottom: 5%; width: 85%;}
.s-logo{display: block; width: 23%; background-image: url('../img/logo.png'); background-repeat: no-repeat; background-position: center; background-size: 110%; border: 0px solid var(--color4); border-radius: 50%;}
.s-logo-mob{display: none;}
.s-logo::after{content: ""; display: block; padding-bottom: 100%;}
.b-top-cont-text h1{color: var(--bg); font-size: 4vw; padding: 6% 0 4% 0;}
.b-top-cont-text h6{color: var(--bg); font-size: 2vw; padding-bottom: 6%;}
.a-top-cont{position: relative; display: inline-block; width: 30%; border: 1px solid var(--bg); border-radius: 25px; transition: 0.3s;}
.a-top-cont::after{content: ""; display: block; padding-bottom: 33%;}
.a-top-cont i{position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-48%); color: var(--bg); font-size: 1.4vw;}
.a-top-cont:hover{background-color: var(--bg);}
.a-top-cont:hover i{color: var(--color4);}
.b-top-soc{padding-top: 8%;}
.fa-soc{display: inline-block; width: 10%; background-repeat: no-repeat; background-position: center; background-size: cover; margin-right: 9px;}
.fa-soc::after{content: ""; display: block; padding-bottom: 100%;}
.fa-inst{background-image: url('../img/fa-inst.svg?v=0111');}
.fa-fb{background-image: url('../img/fa-fb.svg?v=01');}
.fa-utb{background-image: url('../img/fa-utb.svg?v=01');}
.btn-nav{position: absolute; right: 4.5%; top: 30px; width: 7%; background-color: var(--bg); background-repeat: no-repeat; background-position: center; background-size: 70%; background-image: url('../img/menu.svg'); border-radius: 50%;}
.btn-nav::after{content: ""; display: block; padding-bottom: 100%;}
/************************************************************/
/*************************** S1 *****************************/
.b-grid-3{display: grid; grid-template-columns: auto auto auto; grid-gap: 20px; padding-top: 30px;}
.b-grid-cont{position: relative; background-color: var(--bg2); border-radius: 14px;}
.b-grid-cont::after{content: ""; display: block; padding-bottom: 77.7%;}
.b-grid-contin{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10px; text-align: center;}
.sp-part-logo{display: inline-block; width: 40%; background-color: #FFFFFF; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: -15%;}
.sp-part-logo::after{content: ""; display: block; padding-bottom: 100%;}
.sp-patr-logo-sft{background-image: url('../img/logo-sft-300.png');}
.sp-patr-logo-ph{background-image: url('../img/logo-project-hayat.png');}
.b-video-player{position: relative; display: inline-block; width: 80%; height: auto; border-radius: 7px; margin-top: -15%;}
#video-1{width: 100%; height: auto; border-radius: 11px;}
.b-video-1-poster{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url('../img/poster-video-1.jpg'); border-radius: 10px;}
.b-video-1-poster::after{content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 28%; background-image: url('../img/play.svg');}
.p-contin{color: var(--txt); margin-top: 15px; font-size: 1.5vw;}
.a-contin{display: inline-block; font-size: 1.5vw; background-color: var(--color4); color: var(--bg); border-radius: 20px; padding: 10px 20px; margin-top: 20px;}
/************************************************************/
.section-name{width: 100%; color: var(--color4); text-align: center; font-family: BrandonBold; font-size: 2vw; text-transform: uppercase;}
.section-h6{width: 100%; color: var(--color4); text-align: center; font-size: 1.5vw;}
.p-h6{display: block; width: 100%; color: var(--color4); text-align: center; font-size: 2vw; font-family: BrandonBold; padding-top: 30px;}
/************************* Dog of the month *************************/
.b-dotm-grid-3{display: grid; grid-template-columns: auto auto auto; grid-gap: 40px; padding-top: 30px;}
.b-dotm-grid-3-text h6{font-size: 1.6vw; font-weight: bold; line-height: 1.7;}
.b-dotm-grid-3-text p{font-size: 1.6vw;}
.b-dotm-grid-3-text b{font-weight: bold;}
.b-dotm-grid-3-dogs{display: grid; grid-template-columns: auto auto auto; grid-gap: 20px; padding-top: 40px; padding-top: 30px;}
.b-dotm-dog{width: 100%; height: auto; background-color: var(--bg); border-radius: 14px; overflow: hidden;}
.b-dotm-for-img{float: left; width: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; height: 100%;}
.b-dotm-for-text{float: left; width: 50%; height: auto; padding: 10px;}
.b-dotm-for-text p{font-size: 1.4vw;}
.b-dotm-for-text .p-name{font-weight: bold;}
.b-dotm-for-text .p-txt{color: var(--color5); padding-top: 7px;}
.b-dotm-for-text .vote-now{color: var(--color4); margin-top: 10px; font-size: 1.4vw;}
.b-txt-dotm{text-align: center; padding-top: 10px;}
.b-txt-dotm p{font-size: 1.6vw; line-height: 1.4;}
.b-txt-dotm b{font-weight: bold;}
/************************* MEDIA 1 *************************/
.b-for-media-text{height: auto;}
.b-media{float: left; width: 66%; height: auto;}
#bvp2{margin-top: 0; display: block; width: 100%;}
#video-2{width: 100%; border-radius: 10px;}
.b-video-2-poster{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url('../media/film-beldi.jpg'); border-radius: 10px;}
.b-video-2-poster::after{content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 13%; background-image: url('../img/play.svg');}
.b-media-text{float: left; width: 34%; height: auto; padding-left: 20px;}
.p-media-text{font-size: 3vw; color: var(--color5);}
/************************* NEWS *************************/
.b-news{position: relative; width: 100%; margin-top: 30px;}
.b-news::after{content: ""; display: block; padding-bottom: 35%;}
.b-news-cont{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-top: 1px solid var(--txt); border-bottom: 1px solid var(--txt); }
.b-news-cont-1{position: relative; float: left; width: 55%; height: 100%; padding: 10px 10px 10px 0; overflow: hidden;}
.b-news-cont-1 .line{display: block; position: absolute; right: 0; width: 1px; height: calc(100% - 20px); top: 10px; background-color: #a7a7a7;}
.b-news-cont-2{position: relative; float: left; width: 45%; height: 50%; padding: 10px 0 10px 10px; overflow: hidden;}
.b-news-cont-2 .line{display: block; position: absolute; left: 10px; width: calc(100% - 20px); height: 1px; bottom: 0; background-color: #a7a7a7;}
.b-news-cont-3{float: left; width: 45%; height: 50%; padding: 10px 0 10px 10px; overflow: hidden;}
.b-news-cont-1 img{float: left; width: 35%; height: auto; margin: 0 10px 0 0;}
.b-news-cont-1 h6{font-size: 1.8vw; font-weight: bold; padding-bottom: 5px;}
.b-news-cont-1 p{font-size: 1.5vw; color: var(--color5);}
.b-news-cont-2 img, .b-news-cont-3 img{float: left; width: 25%; height: auto; margin: 0 10px 0 0;}
.b-news-cont-2 h6, .b-news-cont-3 h6{font-size: 1.4vw; font-weight: bold; padding-bottom: 5px;}
.b-news-cont-2 p, .b-news-cont-3 p{font-size: 1.2vw; color: var(--color5);}
.b-news-cont a{text-decoration: underline; color: var(--color4);}
/***************** Dogs ready to travel ****************/
.b-grid-4{display: grid; grid-template-columns: calc(25% - 15px) calc(25% - 15px) calc(25% - 15px) calc(25% - 15px); grid-gap: 20px; padding-top: 30px;}
.b-item{position: relative; height: auto; background-color: var(--bg); border-radius: 14px; padding: 10px;}
.b-item-img{float: left; width: 100%; background-color: var(--bg2); border-radius: 10px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.b-item-img::after{content: ""; display: block; padding-bottom: 100%;}
.b-item p{float: left; width: 100%;}
.p-item-1{padding-top: 7px; font-size: 1.3vw;}
.p-item-2{padding-top: 2px; font-size: 1vw; color: var(--color5); font-style: italic;}
.a-link-drtt{display: inline-block; font-size: 1.6vw; color: var(--color4); text-decoration: underline; padding-top: 20px;}
.b-txt-drtt{text-align: center; padding-top: 20px;}
.b-txt-drtt p{font-size: 1.6vw; line-height: 1.4;}
/***************** How your donations help ****************/
.b-hydh{margin-top: 10px; margin-bottom: 20px;}
.hydh-item{height: auto; border: 1px solid var(--color4); border-radius: 14px; padding: 14px; font-size: 1.3vw;}
.hydh-item span{font-weight: bold;}
.a-link-hydh-donate{display: inline-block; color: var(--bg); background-color: var(--color4); font-size: 18px; width: 140px; height: 50px; text-align: center; line-height: 50px; border-radius: 25px; transition: 0.3s;}
.a-link-hydh-donate:hover{background-color: var(--color3);}
/*slider*/
.b-slider{position: relative; width: 100%; height: auto; padding-top: 30px;}
.b-slider-img{position: relative; width: 100%;}
.b-slider-img::after{content: ""; display: block; padding-bottom: 33%;}
.img-slide{position: absolute; top: 0; width: calc(50% - 10px); height: 100%; background-color: var(--bg2); transition: 0.3s;}
.img-slide:nth-child(1){left: 0;}
.img-slide:nth-child(2){right: 0;}
.img-slide:nth-child(3){left: 0;}
.img-slide::after{content: attr(title); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-weight: bold; color: var(--txt); font-size: 3vw; text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg);}
.img-slide-before{float: left; width: 50%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; border-right: 1px solid var(--bg);}
.img-slide-after{float: left; width: 50%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;}
.b-slider-btn{position: relative; width: 100%; text-align: center; padding-top: 20px;}
.btn-view-all{font-size: 1.6vw; color: var(--color4); text-decoration: underline;}
/***************** How you can halp ****************/
.b-cont-hych{position: relative; background-color: var(--bg2); border-radius: 14px; background-repeat: no-repeat; background-size: cover;}
.b-cont-hych:nth-child(1){background-image: linear-gradient(rgba(109, 104, 117, 0.3), rgba(109, 104, 117, 0.3)), url('../img/bg-donate.jpg'); background-position: center bottom;}
.b-cont-hych:nth-child(2){background-image: linear-gradient(rgba(109, 104, 117, 0.3), rgba(109, 104, 117, 0.3)), url('../img/bg-sponsor.jpg'); background-position: center top;}
.b-cont-hych:nth-child(3){background-image: linear-gradient(rgba(109, 104, 117, 0.3), rgba(109, 104, 117, 0.3)), url('../img/bg-volunteer.jpg'); background-position: center;}
.b-cont-hych::before{content: ""; display: block; padding-bottom: 77.7%;}
.b-cont-hych::after{content: attr(area-label); position: absolute; bottom: 10%; left: 0; display: block; width: 100%; text-align: center; font-weight: bold; color: var(--txt); font-size: 2.7vw; text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg);}
.b-text-hych{padding-top: 30px; text-align: center;}
.b-text-hych p{line-height: 1.4; font-size: 1.6vw;}
/*********************************/
@media only screen and (max-width: 767px) {
    /*** for Mobile devices ***/
    .mobile-dev{display: initial;}
    /*********************************/
.b-top-text{width: 100%; height: 50%;}
.b-top-img{width: 100%; height: 50%;}
.s-logo{display: none;}
.s-logo-mob{display: block; position: absolute; left: 20px; top: 20px; width: 20%;}
.b-top-cont-text{left: 20px; top: 20px; height: calc(100% - 40px); bottom: initial; width: calc(100% - 40px);}
.b-top-cont-text h1{font-size: 9vw; padding: 0 0 10px 0; line-height: 1.2;}
.b-top-cont-text h6{font-size: 5vw; padding-bottom: 6%;}
.b-top-soc{position: absolute; right: 0; bottom: 0; width: 40%; text-align: right; padding-top: 15px;}
.fa-soc{width: 30%; margin-right: 0; margin-left: 9px;}
.a-top-cont{width: 45%; border-radius: 35px;}
.a-top-cont i{font-size: 5.2vw;}
.a-top-cont:hover i{color: var(--bg);}
.btn-nav{right: 20px; top: 20px; width: 10%;}
/************************************************************/
/*************************** S1 *****************************/
.b-grid-3{grid-template-columns: auto; grid-gap: 40px; padding-top: 0px; width: calc(100% - 60px);}
.b-grid-cont::after{content: ""; display: block; padding-bottom: 80%;}
.sp-part-logo{width: 40%; margin-top: -10%;}
.b-video-player{margin-top: -10%;}
.p-contin{margin-top: 10px; font-size: 4.4vw;}
.a-contin{font-size: 4.4vw; margin-top: 10px;}
/************************************************************/
.section-name{font-size: 7vw;}
.section-h6{font-size: 4.5vw; margin: 0 auto; width: calc(100% - 40px);}
.p-h6{font-size: 2vw; padding-top: 30px;}
/************************* MEDIA 1 *************************/
.b-media{width: 100%;}
#video-2{border-radius: 10px;}
.b-media-text{width: 100%; padding-left: 0px; padding-top: 10px; text-align: center;}
.p-media-text{font-size: 5.5vw;}
/************************* NEWS *************************/
.b-news{margin-top: 20px; height: auto;}
.b-news-cont{position: relative; width: 100%; height: auto; border-top: 1px solid #a7a7a7; border-bottom: 0; }
.b-news-cont-1{position: relative; float: left; width: 100%; height: auto; padding: 10px 10px 10px 0; border-bottom: 1px solid #a7a7a7;}
.b-news-cont-1 .line{display: none;}
.b-news-cont-2{position: relative; float: left; width: 100%; height: auto; padding: 10px 0 10px 0px; border-bottom: 1px solid #a7a7a7;}
.b-news-cont-2 .line{display: none;}
.b-news-cont-3{float: left; width: 100%; height: auto; padding: 10px 0 10px 0px; border-bottom: 1px solid #a7a7a7;}
.b-news-cont-1 img{margin: 0 5px 0 0;}
.b-news-cont-1 h6{font-size: 4vw; padding-bottom: 3px;}
.b-news-cont-1 p{font-size: 4vw;}
.b-news-cont-2 img, .b-news-cont-3 img{margin: 0 5px 0 0;}
.b-news-cont-2 h6, .b-news-cont-3 h6{font-size: 4vw; padding-bottom: 3px;}
.b-news-cont-2 p, .b-news-cont-3 p{font-size: 4vw;}
/***************** Dogs ready to travel ****************/
.b-grid-4{grid-template-columns: calc(50% - 5px) calc(50% - 5px); grid-gap: 10px; padding-top: 20px;}
.b-item{border-radius: 14px; padding: 5px;}
.b-item-img::after{content: ""; display: block; padding-bottom: 130%;}
.p-item-1{padding-top: 4px; font-size: 4.5vw;}
.p-item-2{padding-top: 1px; font-size: 4vw;}
.a-link-drtt{font-size: 4.5vw; padding-top: 20px;}
.b-txt-drtt{text-align: center; padding-top: 20px;}
.b-txt-drtt p{font-size: 4.5vw;}
/***************** How your donations help ****************/
.b-hydh{margin-top: 0px; margin-bottom: 20px;}
.hydh-item{padding: 10px; font-size: 4.5vw;}
.hydh-item span{font-weight: bold;}
.a-link-hydh-donate{font-size: 20px; width: 145px; border-radius: 30px;}
.a-link-hydh-donate:hover{background-color: var(--color3);}
/*slider*/
.b-slider-img::after{content: ""; display: block; padding-bottom: 64%;}
.img-slide{width: 100%;}
.img-slide:nth-child(1){left: 0; opacity: 0;}
.img-slide:nth-child(2){left: 0; opacity: 1; z-index: 2;}
.img-slide:nth-child(3){left: 0; opacity: 0;}
.img-slide::after{bottom: 10px; font-size: 6.5vw; text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);}
.btn-slide{position: relative; width: 10%; background-color: var(--color3); border: 0; border-radius: 50%; transition: 0.3s;}
.btn-slide::before{content: ""; display: block; padding-bottom: 100%;}
.btn-slide::after{content: attr(area-label); position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bg); font-size: 4vw;}
.btn-slide-mobile-dev-active{background-color: var(--color4);}
.btn-view-all{position: absolute; font-size: 4.5vw; margin-left: 20px; margin-top: 8px;}
/***************** How you can halp ****************/
.b-hych{padding-top: 20px;}
.b-cont-hych::after{font-size: 8.5vw;}
.b-text-hych p{line-height: 1.4; font-size: 4.5vw;}
}