/*! * Start Bootstrap - Full Slider HTML Template (http://startbootstrap.com) * Code licensed under the Apache License v2.0. * For details, see http://www.apache.org/licenses/LICENSE-2.0. */ html, body { height: 100%; } .carousel, .item, .active{ background-color: #000; overflow:hidden } .carousel{ box-shadow: 0 10px 10px #CCC } .carousel-inner { height: 100%; } .carousel-caption A{ text-decoration:none !important; } .carousel-caption{ padding:15px 30px; text-shadow:none; right:45%; left:19.3%; top:20%; bottom:20%; border-radius:0 } .slogan{ font-size: 3.2em; color:#FFF; padding-bottom:20px; line-height:1.0em; text-transform: uppercase; text-align: left } .slogan span{ color: #FFF; display: table; font-size: 0.60em } .text-caption{ font-size:1.0em; color:#FFF; line-height:1.5em; letter-spacing:1px; font-weight:400; padding: 0 5px; text-align: left } .text-caption a:link, .text-caption a:visited{ color:#FFF !important; font-weight:bold } .text-caption a:active, .text-caption a:hover{ color: #00b8de !important } .fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; opacity: 0.6 } .carousel-caption A:hover, .carousel-caption active { text-decoration:underline } .carousel-indicators .active { width:20px; height:20px; border-radius:10px } .carousel-indicators li{ width:15px; height:15px; background-color:#333; border-radius:7.5px; margin-bottom:-0.5px; border: 0px } .carousel-indicators{ bottom: 10px } .carousel-control{ opacity:1.0 !important; top:20%; z-index:1000 !important } .left{ left: -15px  } .carousel-control.left, .carousel-control.right{ background-image: none } .icon-prev, .icon-next{ font-size:7.5em !important; font-weight:bold !important; transition: all 300ms ease-out; height:80px !important; width:80px !important; margin:0 !important; top: 30% !important; line-height:20px; text-shadow:none; background-color: transparent; border: 1px solid transparent } .icon-prev{ left:30% !important; right:auto; padding-right:20px; z-index:1000 } .icon-next{ right:30% !important; left:auto; padding-right:7px } .carousel-control .icon-prev:before, .carousel-control .icon-next:before{  font-family: FontAwesome; font-size:0.3em; font-weight:100 !important; text-align:center; margin-left:10px } .carousel-control .icon-prev:before{ content: '\f053' !important } .carousel-control .icon-next:before{ content: '\f054' !important } @media only screen and (max-width: 560px) { .slogan{ margin-top: 0px !important; text-align:center; text-shadow:0px 3px 3px rgba(0,0,0,0.30); margin-bottom:0px } .carousel-caption{ top: 5% !important } .text-caption{ font-size: 0.90em !important; text-align: center } .label-caption-s{ padding: 20px 10px } .slogan span{ margin: 0 auto } } @media screen and (min-width: 561px) and (max-width:768px) { .icon-prev{ left:10% !important } .icon-next{ right:20% !important } .carousel-caption{ top:10% !important } .slogan span{ margin: 0 auto } } @media (max-width: 767px) { .slogan{ margin-top:20px; width:100% } .carousel-indicators { padding-bottom:0px !important; bottom:0px !important } .carousel-caption{ right:5%; left:5%; top:25%; bottom:0%; text-align:center } .icon-prev, .icon-next{ display: none !important } } @media (max-width: 992px) { .text-caption{ font-size:1.0em } .icon-prev, .icon-next{ height:45px !important; width:45px !important; border-radius:22.5px !important; line-height:10px !important; font-size:4.0em !important } .icon-prev{ padding-left:12px } .icon-next{ padding-right:15px } .carousel-control .icon-prev:before{ margin-left:0px } .carousel-control .icon-next:before{ margin-left:15px } .slogan{ font-size:1.6em !important } } @media screen and (min-width: 768px) and (max-width:1199px) { .carousel-caption{ right:15%; left:15%; top:10%; bottom:10%; text-align:center; border-top-left-radius: 7px; border-top-right-radius: 7px;  border-bottom-left-radius: 0px; border-bottom-right-radius: 0px } .icon-prev, .icon-next{ display: none !important } .slogan span{ margin: 0 auto } .text-caption{ font-size:1.0em } } @media screen and (min-width: 992px) and (max-width:1199px) { .carousel-caption{ top:15% !important } } @media only screen and (min-width: 992px){ .carousel-indicators{ text-align: center } }