/**************** 15-12-2016 *******************/
@import url(https://fonts.googleapis.com/css?family=Slabo+27px|Source+Sans+Pro:300,400,600,700,900);

/*
font-family: 'Source Sans Pro', sans-serif;
light 300
regular 400
semi-bold 600
bold 700
black 900

font-family: 'Slabo 27px', serif;
regular 400

*/

body{ padding:0; margin:0; font-size:12px; color:#000; font-family: 'Source Sans Pro', sans-serif;}
a {outline:none !important; text-decoration:none;
-webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; transition:all .6s ease-in-out;}
a:hover, a:focus, select:focus, button:focus { outline:none; text-decoration:none;}
* { margin:0; padding:0;}
img { border:none; vertical-align:middle; max-width:100%;}
li{ list-style:none;}
h1, h2, h3, h4, h5, h6{ outline:none !important; font-family: 'Slabo 27px', serif;}
input, select, textarea, button{ outline:none !important;}


.container{ width:96%; max-width:1170px; margin:0 auto; padding:0;}

/***********  Top Part  ************/
header{ width:100%; float:left; margin:0px; padding:0px;}

/*********** Top Part **********/
.top_part{ width:100%; float:left; padding:7px 0 0 0; margin:0; background:#ED1C24;}
.top_part ul{ padding:0; margin:0; text-align:right;}
.top_part ul li{ padding:0; margin:0 0 7px 20px; font-size:15px; color:#ffffff; display:inline-block; font-weight:600;}
.top_part ul li i{ width:27px; height:27px; padding:0; margin:0 10px 0 0; font-size:17px; line-height:27px; text-align:center; background:#107bdb; border-radius:50%;}
.top_part ul li i.fa-envelope{ font-size:13px;}
.top_part ul li a{ color:#ffffff;}
.top_part ul li a:hover{ color:#c9e5ff;}


/*********** Top Part **********/
.nav_sec{ width:100%; float:left; padding:15px 0; margin:0; position:relative; z-index:999; box-shadow:0 5px 5px rgba(0, 0, 0, 0.2); background:#fff; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; transition:all .6s ease-in-out;}
.nav_sec .navbar-default{ background:none; border:none; margin:0; min-height:inherit;}
.nav_sec .navbar-default .navbar-brand{ padding:0; height:auto;}
.nav_sec .navbar-nav{ float:right; margin:27px 0 0 0;}
.nav_sec .navbar-nav > li{ margin:0 0 0 40px;}
.nav_sec .navbar-default .navbar-nav > li > a{ padding:7px 0 7px 0; margin:0; font-size:16px; color:#5d5d5d; text-transform:uppercase; font-weight:600;}
.nav_sec .navbar-default .navbar-nav > li > a:hover, .nav_sec .navbar-default .navbar-nav > li > a:focus{ color:#ED1C24; background:none;}
.nav_sec .navbar-default .navbar-nav > .active > a, .nav_sec .navbar-default .navbar-nav > .active > a:hover, .nav_sec .navbar-default .navbar-nav > .active > a:focus{ color:#ED1C24; background:none;}
.nav_sec .navbar-default .navbar-nav > .open > a, .nav_sec .navbar-default .navbar-nav > .open > a:hover, .nav_sec .navbar-default .navbar-nav > .open > a:focus{ background:none; color:#ED1C24;}
.nav_sec .navbar-default .navbar-nav > li > a:after{ width:100%; -webkit-transition:all .5s; -o-transition:all .5s; height:1px; position:absolute; left:0; bottom:0; content:''; background-color:#ED1C24; transition:all .5s; -webkit-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0)}
.nav_sec .navbar-default .navbar-nav > li > a:hover:after, .nav_sec .navbar-default .navbar-nav > li > a:focus:after{ -webkit-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);}
.nav_sec .navbar-default .navbar-nav > .active > a:after, .nav_sec .navbar-default .navbar-nav > .active > a:hover:after, .nav_sec .navbar-default 
.navbar-nav > .active > a:focus:after{ -webkit-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);}
.nav_sec .navbar-default .navbar-nav > .open > a:after, .nav_sec .navbar-default .navbar-nav > .open > a:after:hover, .nav_sec .navbar-default .navbar-nav > .open > a:after:focus{ -webkit-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);}

.nav_sec .navbar-nav > li > .dropdown-menu{ padding:5px; background:#fff; /*background:rgba(255, 255, 255, 0.9);*/}
.nav_sec .dropdown-menu > li > a{ padding:6px 20px; color:#5d5d5d;}
.nav_sec .dropdown-menu > li > a:hover, .nav_sec .dropdown-menu > li > a:focus{ color:#fff; background:#ED1C24;}

.nav_sec.sticky{ position:fixed; left:0; right:0; padding:10px 0;}
/*.nav_sec.sticky .navbar-default .navbar-brand{ width:180px;}
.nav_sec.sticky .navbar-nav{ margin-top:20px;}*/

/***********  Section Part  ************/
section{ width:100%; float:left; margin:0px; padding:0px;}

/********** Slider ************/
.slider_sec{ width:100%; float:left; padding:0; margin:0; position:relative;}
.slider_sec .carousel-inner > .item > img, .slider_sec .carousel-inner > .item > a > img{ width:100%; float:left; padding:0; margin:0; position:relative;}
.slider_sec .slider_caption{ width:90%; float:left; position:absolute; top:0; left:5%; right:5%; margin-top:10%;} 
.slider_sec .slider_caption h2{ max-width:1000px; padding:0; margin:-34px; text-align:center; font-size:50px; color:#555555; text-transform:uppercase; font-weight:700; text-shadow:1px 1px 1px #fff; font-family: 'Source Sans Pro', sans-serif;} 
.slider_sec .carousel-control { margin:-23px 0 0 0; position:absolute; top:50%; width:45px; height:45px; font-size:36px; line-height:45px; color:#fff; text-shadow:0 0 0 rgba(0, 0, 0, 0); opacity:9; z-index:777; border-radius:50%;}
.slider_sec .carousel-control.left{ left:2%; background:rgba(0, 0, 0, 0.7);}
.slider_sec .carousel-control.right{ right:2%; background:rgba(0, 0, 0, 0.7);}

/********** Department Sec *********/
.department_sec{ width:100%; float:left; padding:0 0 100px 0; margin:0; text-align:center; background:#f0f4f7;}
.department_sec .inner_sec{ width:100%; float:left; padding:20px; margin:-148px 0 0 0; border-radius:10px; background:rgba(255, 255, 255, 0.4); box-shadow:0 0 65px rgba(0, 0, 0, 0.2); position:relative; z-index:88;}
.department_sec .block_info{ width:100%; float:left; padding:50px 15px 20px 15px; margin:0; background:#fff; border-radius:10px;}
.department_sec figure{ width:100%; float:left; padding:0; margin:0 0 25px 0;}
.department_sec p{ padding:0; margin:0 0 30px 0; font-size:20px; color:#000000; font-weight:600;}

/*********** Welcome Sec ***********/
.welcome_sec{ width:100%; float:left; padding:0 0 80px 0; margin:0; background:#f0f4f7;}
.global_title{ padding:0 0 5px 0; margin:10 0 30px 0; font-size:35px; color:#545454; background:url(../images/title_bg.png) no-repeat left bottom;}
.welcome_sec p{ padding:0; margin:0 0 25px 0; font-size:16px; color:#818181; line-height:28px;}
.more_link{ padding:0; margin:0; font-size:16px; color:#ED1C24; font-family: 'Slabo 27px', serif;}
.more_link i{ padding:0; margin:0 0 0 5px; position:relative; top:2px; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; transition:all .6s ease-in-out;}
.more_link:hover{ color:#6cd548;}
.more_link:hover i{ margin-left:8px;}
.welcome_sec figure{ width:100%; float:left; padding:20px; margin:0; box-shadow:0 0 65px rgba(0, 0, 0, 0.2); background:#fff;}
.welcome_sec figure img{ width:100%;}

/*********** Latest Product ***********/
.latest_prod{ width:100%; float:left; padding:70px 0; margin:0;}
.latest_prod .global_title{ text-align:center; background-position:center bottom;}
.latest_prod .info{ width:100%; max-width:960px; padding:0; margin:0 auto 50px auto; font-size:16px; color:#666867; line-height:28px; text-align:center; display:block;}
.latest_prod .block{ width:100%; float:left; padding:0; margin:0 0 30px 0; background:#fff; border:1px solid #dddddd; border-radius:6px; box-shadow:0 0 13px rgba(0, 0, 0, 0.1);}
.latest_prod .block figure{ width:100%; float:left; padding:0; margin:0; border-radius:6px 6px 0 0;}
.latest_prod .block figure img{ width:100%; border-radius:6px 6px 0 0;}
.latest_prod .block .detail{ width:100%; float:left; padding:20px; margin:0;}
.latest_prod .block .detail h3{ padding:0; margin:0 0 13px 0; font-size:22px; color:#555555; font-weight:600; font-family: 'Source Sans Pro', sans-serif;}
.latest_prod .block .detail h3 a{ color:#555555;}
.latest_prod .block .detail h3 a:hover{ color:#ED1C24;}
.latest_prod .block .detail p{ padding:0; margin:0 0 15px 0; font-size:15px; color:#747474; line-height:26px;}
.view_more{ width:100%; height:60px; max-width:270px; padding:0 15px; margin:30px auto 0 auto; display:block; text-align:center; line-height:60px; font-size:22px; color:#ED1C24; font-weight:600; border:2px solid #ED1C24;}
.view_more:hover{ color:#fff; background:#ED1C24;}

/********* Event Sec *********/
.event_sec{ width:100%; float:left; padding:70px 0; margin:0; background:#f0f4f7;}
.event_sec .global_title{ text-align:center; background-position:center bottom;}
.event_sec .block{ width:100%; float:left; padding:20px; margin:0 0 30px 0; background:#fff; border:1px solid #dfdfdf; box-shadow:0 0 13px rgba(0, 0, 0, 0.1);}
.event_sec .block figure{ width:100%; float:left; padding:0; margin:0 0 20px 0;}
.event_sec .block figure img{ width:100%;}
.event_sec .block .detail{ width:100%; float:left; padding:0; margin:0;}
.event_sec .block .left{ width:63px; float:left; padding:9px 3px; margin:0 15px 0 0; text-align:center; font-size:30px; line-height:23px; color:#ffffff; font-weight:700; background:#6cd548;}
.event_sec .block .left strong{ display:block; padding:0; margin:0; font-size:14px; color:#ffffff;}
.event_sec .block .right{ overflow:hidden;}
.event_sec .block .detail h3{ padding:0; margin:5px 0 13px 0; font-size:22px; color:#121212;}
.event_sec .block .detail h3 a{ color:#121212;}
.event_sec .block .detail h3 a:hover{ color:#6cd548;}
.event_sec .block .detail p{ padding:0; margin:0 0 15px 0; font-size:16px; color:#939191; line-height:24px;}
.event_sec .block .detail .more_link{ float:right;}
.event_sec .block .detail .more_link:hover i{ margin-left:5px;}

/*********** Team Sec *********/
.team_sec{ width:100%; float:left; padding:70px 0 40px 0; margin:0;}
.team_sec h3{ padding:0; margin:0 0 20px 0; font-size:28px; color:#6cd548; font-family: 'Source Sans Pro', sans-serif;}
.team_sec p{ padding:0; margin:0 0 30px 0; font-size:16px; color:#797979; line-height:25px;}
.team_sec .block{ width:100%; float:left; padding:0; margin:0 0 30px 0;}
.team_sec .block figure{ width:100%; float:left; padding:0; margin:0;}
.team_sec .block figure img{ width:100%;}
.team_sec .block .detail{ width:100%; float:left; padding:12px 10px; margin:0; text-align:center; background:#272936;}
.team_sec .block .detail h5{ padding:0; margin:0; font-size:20px; color:#ffffff; font-family: 'Source Sans Pro', sans-serif;}
.team_sec .block .detail p{ padding:0; margin:0; font-size:14px; color:#a4a5ab;}

/***********  Footer Part  ************/
footer{ width:100%; float:left; margin:0px; padding:0px;}
.footer_detail{ width:100%; float:left; padding:45px 0; margin:0; background:#333333;}
.footer_detail h3{ padding:0; margin:0 0 45px 0; font-size:30px; color:#d6d6d6; text-align:center; font-family: 'Source Sans Pro', sans-serif; font-weight:700;}
.footer_detail .add_info{ width:100%; float:left; padding:0 0 20px 0; margin:0 0 50px 0; border-bottom:1px solid #535353;}
.footer_detail .add_info .block{ width:100%; min-height:54px; float:left; padding:15px 0 0 70px; margin:0 0 30px 0; font-size:15px; color:#d6d6d6; font-weight:600; line-height:20px; position:relative;}
.footer_detail .add_info .block i{ width:54px; height:54px; float:left; padding:0; margin:0; font-size:28px; color:#ffffff; text-align:center; line-height:54px; position:absolute; left:0; top:0; background:#ED1C24;}
.footer_detail .add_info .block a{ color:#d6d6d6;}
.footer_detail .add_info .block a:hover{ color:#fff;}
.footer_detail .add_info .block.block_2{ padding-top:8px;}

.footer_detail ul.social_info{ width:100%; float:left; padding:0; margin:0 0 30px 0; text-align:center;}
.footer_detail ul.social_info li{ padding:0; margin:0 6px; display:inline-block;}
.footer_detail ul.social_info li a{ width:38px; height:38px; padding:0; margin:0; display:block; font-size:20px; color:#ffffff; text-align:center; line-height:34px; border:2px solid #fff; border-radius:50%;}
.footer_detail ul.social_info li a:hover{ color:#333333; background:#fff;}

.footer_detail ul.footer_link{ width:100%; float:left; padding:0; margin:0 0 15px 0; text-align:center;}
.footer_detail ul.footer_link li{ padding:0; margin:0; display:inline-block; font-size:15px; color:#d6d6d6;}
.footer_detail ul.footer_link li:after{ content:"|"; padding:0 10px;}
.footer_detail ul.footer_link li:last-child:after{ content:"";}
.footer_detail ul.footer_link li a{ color:#d6d6d6;}
.footer_detail ul.footer_link li a:hover{ color:#fff;}

.footer_detail .copyright{ width:100%; float:left; padding:0; margin:0; font-size:15px; color:#d6d6d6; text-align:center;}
.footer_detail .copyright a{ color:#fff;}
.footer_detail .copyright a:hover{ color:#6cd548;}


/************ inner Sec ************/
.inner_banner{ width:100%; float:left; padding:120px 0; margin:0; background:url(../images/inner_banner.jpg) no-repeat center center; background-size:cover;}
.inner_banner h2{ width:100%; float:left; padding:0; margin:0 0 10px 0; font-size:50px; color:#fff; text-transform:uppercase; font-weight:700; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.4); font-family: 'Source Sans Pro', sans-serif;} 
ul.breadcrumb_info{ width:100%; float:left; padding:0; margin:0;}
ul.breadcrumb_info li{ padding:0; margin:0; display:inline-block; font-size:15px; color:#bcffa5; font-weight:600;}
ul.breadcrumb_info li a{ color:#fff;}
ul.breadcrumb_info li a:after{ content: "\f105"; padding:0 10px; font-family: 'FontAwesome';}
ul.breadcrumb_info li a:hover{ opacity:0.8;}

.inner_team{ background:#f0f4f7;}

.inner_cms{ width:100%; float:left; padding:70px 0; margin:0;}
.inner_cms h1, .inner_cms h2, .inner_cms h3, .inner_cms h4, .inner_cms h5, .inner_cms h6 { margin:0 0 15px 0; color:#ED1C24; font-weight:700; line-height:normal;}
.inner_cms h1 { font-size:50px;}
.inner_cms h2 { font-size:40px;}
.inner_cms h3 { font-size:30px;}
.inner_cms h4 { font-size:25px;}
.inner_cms h5 { font-size:20px;}
.inner_cms h6 { font-size:17px;}

.inner_cms p { color:#818181; float:none; font-size:16px; line-height:28px; margin:0 0 25px 0; padding:0;}
.inner_cms p a { color: #6cd548;}
.inner_cms p a:hover{ color:#ED1C24;}
.inner_cms p i, .inner_cms em { font-style:italic; }
.inner_cms p strong{ color:#6cd548; font-weight:600;}
.inner_cms b, .inner_cms strong{ color:#6cd548;}

.inner_cms ul { margin:0 0 15px 0; padding:0; }
.inner_cms ul li { color:#818181; font-size:16px; margin:0 0 10px 0; padding:0 0 0 18px; position:relative; line-height:normal; list-style:none;}
.inner_cms ul li:before{ content:"\f10c"; color:#21a119; font-family: 'FontAwesome'; margin:0; font-size:11px; position:absolute; left:0; top:3px;}
.inner_cms ul li i { font-style:italic; }
.inner_cms ul li a { color:#6cd548; }
.inner_cms ul li a:hover { color:#ED1C24; }

.inner_cms ol { clear: both; margin:0 0 15px 25px; padding:0;}
.inner_cms ol li { color:#818181; font-size:16px; list-style:decimal; margin:0 0 10px 0; padding:0 0 0 5px; line-height:normal;}
.inner_cms ol li i { font-style:italic; }
.inner_cms ol li a { color: #6cd548; }
.inner_cms ol li a:hover { color:#ED1C24;}

.alignleft { float:left; margin:0 30px 20px 0; max-width:100%;}
.alignright { float:right; height:auto; margin:0 0 20px 30px; max-width:100%;}
.aligncenter { width:100%; margin:0 0 20px 0; text-align:center;}


/********** Contact Sec ************/
.info_contact{ width:100%; float:left; padding:70px 0 60px 0; margin:0;}
.info_contact h3{ padding:0; margin:0 0 30px 0; font-size:30px; color:#ED1C24; font-family: 'Source Sans Pro', sans-serif;}
.left_info{ width:100%; float:left; padding:30px; margin:0; background:#f5f5f5;}
.form_contact_block{ width:100%; float:left; padding:0; margin:0 0 20px 0; position:relative;}
.form_contact_block i{ width:47px; height:47px; padding:0; margin:0; font-size:20px; color:#fff; text-align:center; line-height:47px; position:absolute; left:0; top:0; background:#ED1C24;}
.info_contact .input_field{ width:100%; height:47px; float:left; padding:0 15px 0 65px; margin:0; font-size:15px; color:#5b5b5b; background:#fff; border:1px solid #dddddd;}
.info_contact .input_field_2{ width:100%; height:137px; float:left; padding:15px 15px 10px 65px; margin:0; font-size:15px; color:#5b5b5b; background:#fff; border:1px solid #dddddd;}
.info_contact .input_btn{ height:50px; float:right; padding:0 35px; margin:0; font-size:17px; color:#ffffff; text-transform:uppercase; font-weight:700; background:#ED1C24; border-radius:3px; border:none;}
.info_contact .input_btn:hover{ background:#6cd548;}
.info_contact .right_info{ width:100%; float:left; padding:0 0 0 30px; margin:0;}
.info_address{ width:100%; min-height:49px; float:left; padding:15px 0 0 70px; margin:0 0 20px 0; font-size:14px; color:#838383; position:relative; font-weight:600;}
.info_address:first-child{ padding-top:0;}
.info_address i{ width:49px; height:49px; padding:0; margin:0; font-size:24px; color:#fff; text-align:center; line-height:49px; position:absolute; left:0; top:0; background:#6cd548;}
.info_address a{ color:#838383;}
.info_address a:hover{ color:#ED1C24;}
.map_info{ width:100%; float:left; padding:0; margin:0; border-bottom:7px solid #ED1C24; line-height:1px;}
.map_info iframe{ width:100%; max-width:100%;}

/*********** Product Sec ***********/
.product_sec{ width:100%; float:left; padding:50px 0; margin:0;}
.product_sec .global_title{ text-align:center; background-position:center bottom;}
.product_sec .block{ width:100%; float:left; padding:0; margin:0 0 30px 0; background:#fff; border:1px solid #dddddd; border-radius:6px; box-shadow:0 0 13px rgba(0, 0, 0, 0.1);min-height: 460px;max-height: 460px;}
.goog-te-gadget img{display:none !important;}
.goog-te-gadget,.goog-logo-link{font-size:0px !important;}
.goog-te-gadget{position:relative; top:5px;}
.product_sec .block figure{ width:100%; float:left; padding:0; margin:0; border-radius:6px 6px 0 0;}
.product_sec .block figure img{ width:100%; border-radius:6px 6px 0 0;}
.product_sec .block .detail{ width:100%; float:left; padding:20px; margin:0;}
.product_sec .block .detail h3{ padding:0; margin:0 0 13px 0; font-size:18px; color:#555555; font-weight:600; font-family: 'Source Sans Pro', sans-serif;}
.product_sec .block .detail h3 a{ color:#555555;}
.product_sec .block .detail h3 a:hover{ color:#ED1C24;}
.product_sec .block .detail p{ padding:0; margin:0 0 15px 0; font-size:15px; color:#747474; line-height:26px;}
.product_sec .view_more{ width:100%; height:60px; max-width:270px; padding:0 15px; margin:30px auto 0 auto; display:block; text-align:center; line-height:60px; font-size:22px; color:#ED1C24; font-weight:600; border:2px solid #ED1C24;}
.product_sec .view_more:hover{ color:#fff; background:#ED1C24;}

ul.paging_list{ width:100%; float:left; padding:0; margin:20px 0 0 0; text-align:center;}
ul.paging_list li{ padding:0; margin:0; display:inline-block;}
ul.paging_list li a{ width:30px; height:30px; padding:0; margin:5px; display:block; font-size:15px; color:#646464; line-height:28px; background:#eff4f8; border:1px solid #dbdbdb; border-radius:50%;}
ul.paging_list li a:hover, ul.paging_list li a.active{ color:#fff; background:#6cd548; border:1px solid #52ba2f;}

/************ Product Detail ************/
.product_detail{ width:100%; float:left; padding:70px 0 50px 0; margin:0;}
.product_detail .prod_image{ width:100%; float:left; padding:10px; margin:0 0 30px 0; border:1px solid #dddddd;}
.product_detail .prod_image img{ width:100%;}
.product_detail h2{ padding:0; margin:0 0 20px 0; font-size:35px; color:#ED1C24;}
.product_detail p{ padding:0; margin:0 0 25px 0; font-size:16px; color:#747474; line-height:27px;}

/*********** Event Listing ***********/
.event_list{ width:100%; float:left; padding:50px 0; margin:0;}
.event_list .global_title{ text-align:center; background-position:center bottom;}
.event_list .block{ width:100%; float:left; padding:20px; margin:0 0 40px 0; background:#fff; border:1px solid #dfdfdf; box-shadow:0 0 13px rgba(0, 0, 0, 0.1);}
.event_list .block figure{ width:100%; float:left; padding:0; margin:0 0 20px 0;}
.event_list .block figure img{ width:100%;}
.event_list .block .detail{ width:100%; float:left; padding:0; margin:0;}
.event_list .block .left{ width:63px; float:left; padding:9px 3px; margin:0 15px 0 0; text-align:center; font-size:30px; line-height:23px; color:#ffffff; font-weight:700; background:#6cd548;}
.event_list .block .left strong{ display:block; padding:0; margin:0; font-size:14px; color:#ffffff;}
.event_list .block .right{ overflow:hidden;}
.event_list .block .detail h3{ padding:0; margin:5px 0 13px 0; font-size:22px; color:#121212;}
.event_list .block .detail h3 a{ color:#121212;}
.event_list .block .detail h3 a:hover{ color:#6cd548;}
.event_list .block .detail p{ padding:0; margin:0 0 15px 0; font-size:16px; color:#939191; line-height:24px;}
.event_list .block .detail .more_link{ float:right;}
.event_list .block .detail .more_link:hover i{ margin-left:5px;}
.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}