﻿
#inSlider { height: 370px; }
    .carousel-inner .carousel .item, .carousel .item, #inSlider .header-back { height: 100%; }
    #inSlider .header-back { background-position: 51% -415px, 19px 0; }

.productLaunchingContainer { color: #757575; display: inline-block; width: 100%; height: auto; margin: 10px 0px 10px 0px; box-shadow: 0 0 20px rgba(0,0,0,0.6); }
    .productLaunchingContainer .productLauchInfo, .productLaunchingContainer .productLauchInfo > div { height: auto; }

.carousel-inner .carousel-caption.caption-center { top: 130px; }
.productLaunchingContainer .fa { color: #31708f; font-size: 30px; vertical-align: sub; margin-right: 10px; /*margin-left: 30px;*/ }
.launchingProducts, #slideshow { height: 250px; }
.verticalLine { border-left: 1px solid #2196F3; height: 80%; position: absolute; left: 0; margin-left: -3px; top: 10%; vertical-align: middle; }
.launchingProducts > div { margin: 10px 0px 10px 10px; }
#btnInterested { padding: 2px 20px; margin-top: 30px; font-size: 19px; font-weight: 500; }
#interestedRegisterModal { top: 20%; }
    #interestedRegisterModal .modal-dialog { width: 98%; max-width: 850px; }
    #interestedRegisterModal .icheckbox_square-green { margin-right: 10px; }
    #interestedRegisterModal .modal-dialog .modal-content .row, #interestedRegisterModal .chkInterestedAllDiv, #interestedRegisterModal .btnGetMeInformedDiv, #interestedRegisterModal .row .col-md-4 { margin-top: 10px; margin-bottom: 10px; }
    #interestedRegisterModal .modal-dialog .modal-content .modal-body { padding: 25px 25px 10px 25px; }
    #interestedRegisterModal .btnGetMeInformedDiv { display: inline-block; width: 100%; }
        #interestedRegisterModal .btnGetMeInformedDiv button { padding: 6px 20px; }
.productLauchInfo .title { margin-top: 5px; font-size: 1.7em; font-weight: bold; }
.productLauchInfo .description { margin-top: 10px; font-size: 1.1em; text-align: left; }
.productLauchInfo .list-items { padding: 0; font-size: 1.1em; list-style: none; text-align: left; display: inline-block; margin: auto; }
.productLauchInfo .title-only h2 { margin-top: 15px; }


#slideshow { margin: 0 auto; position: relative; padding: 0; /*padding: 1% 1% 56.25% 1%;*/ /*56.25 is for 16x9 resolution*/ border-radius: 5px; /*background: rgba(0,0,0,0.2);*/ box-sizing: border-box; }

    #slideshow > div { position: absolute; width: 100%; padding: 10px 10px; /*top: 10px; left: 10px; right: 10px; bottom: 10px;*/ }

    /*#slideshow > div > img { width: 100%; height: 100%; border-radius: 20px; }*/

    #slideshow:hover i, #slideshow:hover .slider-dots { opacity: 1; }

.productLaunchingContainer .slidebtn { display: none; z-index: 99; background: transparent; outline: none; border: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; padding: 0 10px 0 10px; }

.slidebtn:active,
.slidedtn:focus { outline: none; }

.productLaunchingContainer .slidebtn i { color: #4CAF50; font-size: 40px; opacity: 0.1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.productLaunchingContainer .slidebtn.playPausebtn { display: block; position: absolute; bottom: 5px; opacity: 0.8; right: 40%; }
.productLaunchingContainer .playPausebtn i { font-size: 20px; }

.prev { position: absolute; top: 10px; left: 10px; bottom: 10px; }

.next { position: absolute; top: 10px; right: 10px; bottom: 10px; }


.slider-dots { margin-bottom: 0; opacity: 0.2; list-style: none; display: inline-block; padding-left: 0; position: absolute; left: 50%; bottom: 0%; transform: translate(-50%, 0); z-index: 99; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }

    .slider-dots li { color: #9E9E9E; display: inline; font-size: 48px; margin-right: 5px; cursor: pointer; }

        .slider-dots li.active-dot { color: #4CAF50; }

/*
JQUERY SLIDER BY JohnRostislavovich - https://codepen.io/JohnRostislavovich
ALL YOU HAVE TO DO:
-copy the whole code html, css & js
-include jquery lib
-change the images
*/



/* For Small Screen Resolutions */

@media screen and (max-width: 768px),(min-width:768px) and (max-width:991px) {

    .launchingProducts, #slideshow, .productLaunchingContainer .productLauchInfo, .productLaunchingContainer .productLauchInfo .col-md-6 { height: auto; }
        #slideshow > div { position: relative; }
    .productLauchInfo .title-only { margin-top: 0; }
    #slideshow { padding: 5px 0 15px 0px; }
    .slider-dots { margin-bottom: -2%; }
    .launchingProducts > div { margin: 10px 0px 25px 10px; }
    .launchingProducts > h2 { margin-top: 30px; }
    .productLauchInfo .list-items { width: 100%; }
    .verticalLine { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */ transform: rotate(90deg); height: 100%; position: absolute; left: auto; margin-left: 0; vertical-align: middle; top: -55%; }
    .productLaunchingContainer .slidebtn.playPausebtn { margin-bottom: -2%; right: 20%; }
}
