/*GENERAL STYLES*/


.index-banner {height: 100vh;}
.first {background-image: url(../img/bg-img/digital_marketing1.jpg);background-size: cover;}
.second {background-image: url(../img/bg-img/business-email-hosting.jpg); background-size: cover;}
.carousel-caption {top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; opacity: 0;}
/*.col {text-align: left;}
.col:last-child {text-align: center;}*/
.title {font-size: 3rem; margin-top: 0;}
.carousel-indicators {margin-bottom: 0;}

/*FIRST SLIDE*/
.first .title, .first .desc {padding: 15px; background: rgba(128,128,128,0.7);}
.first .title {display: inline-block;}
.first .desc {font-size: 2rem;}
.first .list {list-style: none; padding: 0; margin: 30px 0;}
.first .list li {margin-bottom: 15px; }
.first .list li::before {content: '✔'; padding-right: 10px;}
.first img {display: block; margin: 0 auto;}
.first .pc-wrapper {position: relative; width: 250px; margin: 0 auto;}
.first .price {position: absolute; top: 90px; left: 40px; padding: 5px; background: #00ADE7; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.first button {margin-top: 40px;font-size: 1rem; }

/*SECOND SLIDE*/
.second .title {display: block; background: transparent;}
.second span {display: inline-block; padding: 15px; }
.second .cms {position: relative; display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; padding: 5px; margin: 50px auto 10px; background: #33b6cb; border-radius: 5px; }
.second .front {font-size: 8rem; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.second .info {width: 150px; font-size: 1.2rem; text-align: center; margin: 0 auto; opacity: 0; -webkit-transform: translateY(40px);color: #fff; transform: translateY(40px)}
.second .back {display: none; -webkit-transform: scale(0); transform: scale(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.second .back img {width: 100%;}
.second .source {font-style: italic; margin-top: 40px; opacity: 0; visibility: hidden;}
.second .source a {color: #fff;}

/*MSG*/
.msg {display: none; position: fixed; top: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 7px; border: 5px solid #fff000; text-align: center; color: #fff; background: rgba(0, 0, 0, .85);}

/*JS DISABLED*/
.no-js .carousel-inner > .carousel-item {display: block;}
.no-js .carousel-caption, .no-js .second .info, .no-js .second .source {opacity: 1;}
.no-js .second .info {-webkit-transform: none;transform: none;}
.no-js .second .source {visibility: visible;}
.no-js .carousel-indicators {display: none;}
.no-js .msg {display: block;}
.desktop{
width: 25%;
}
/*SOME BASIC STYLES FOR SMALL SCREENS*/
@media screen and (max-width: 767px) {

  .container {width: 100%;}
  .first p {display: none;}
  .first .pc-wrapper {width: 150px;}
  .first .price {top: 45px; left: 10px;}
  .first .pc {width: 150px; height: 150px;}
  .first .keyboard {width: 50px; height: 50px;}
  .second .cms {width: 100%; height: 80px;}
  .second .info {width: 100%;}
  
}
@media screen and (max-width: 480px) {

	.index-slider2{
		font-size: 19px;
	}
	
}