:root{
    --mypink: #E80A4D;
    --secpink: #E82E66;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

html{ min-height:100vh; }
body{ margin: 0; padding:0; min-height:100vh; line-height:20px; font-size:18px; color:#888888; font-weight: 300; font-family: 'Open Sans', sans-serif; }

h1,h2,h3,h4,h5,h6,p{ margin: 0; padding: 0; }
h1{ line-height: 50px; font-size: 40px; font-weight: 700; font-family: Poppins; color: var(--mypink); }
h2{ line-height: 42px; font-size: 32px; font-weight: 700; font-family: Poppins; color: var(--mypink); }
h3{ line-height: 32px; font-size: 24px; font-weight: 700; color: var(--mypink); }

header{ padding: 10px; height: 80px; line-height: 80px; }
header img{ max-height: 80px; }

.jumbotron{ display: flex; }
.jumbotron .art-l{ min-height: 320px; background: var(--secpink);; color: #FFFFFF; display: flex; justify-content: center; align-items: center; }
.jumbotron .art-l h1{ color: #FFFFFF; }
.jumbotron .art-l p{ margin-top: 20px; line-height: 30px; font-size: 20px; font-weight: 600; }
.jumbotron .art-l a{ margin: 10px 10px 10px 0; display: inline-block; }
.jumbotron .art-r{ height: calc(100vh - 100px); min-height: 320px; background: url(../images/jumbotron-bg.png) repeat-x center center #E3E7FC; display: flex; justify-content: center; align-items: flex-end; }
.jumbotron .art-r img { height: calc(100% - 20px); max-height: 538px; }

.bullets{ margin: 0 auto; width: 1200px; }
.bullets .bullet{ padding:80px 40px; width: calc(33.33% - 80px); text-align: center; }
.bullets .bullet img{ max-width: 200px; }

.banner{ height: 400px; width: 100%; background:url(../images/banner1.jpg) no-repeat center center; }

.categories{ padding: 40px 0; background: #F8F8F8; }
.categories h2{ padding-bottom: 20px; color: #1d1d1d; text-align: center; }
.categories h2 span{ color: var(--mypink); text-align: center; }
.categories .cat{ margin: 20px; background: white; border-radius: 5px; box-shadow: 2px 2px 5px 2px #DDDDDD; }
.categories .cat .photo{ padding: 20px 20px 10px 20px; }
.categories .cat .photo img{ max-width: 100%; max-height: 100%; }
.categories .cat .caption{ padding: 0 10px 10px 10px; height: 30px; line-height: 30px; font-size: 18px; font-weight: 500; color: #AAAAAA; }
.categories .catrow{ margin: 0 -20px; display: flex; }

.apptron{ padding-top: 40px; }
.apptron article{ margin: auto; width: 1200px; display: flex; align-items: center; }
.apptron article .photo img{ max-width: 422px; }
.apptron article .txt{ padding-left: 40px; }
.apptron article .txt h1{ line-height: 110px; font-size: 100px; font-family: poppins; }
.apptron article .txt h3{ color: #888888; }

footer{ line-height: 30px; color: #AAAAAA; background: #1d1d1d; }
footer h3{ color: #DDDDDD; }
footer a{ color: #AAAAAA; }
footer a:hover{ color: white; text-decoration: none; }
footer a.social{ margin-right: 10px; padding: 10px; width: 20px; height: 20px; line-height: 18px; text-align: center;border-radius: 20px; background: #888888; display: inline-block; }
footer a.social:hover{ background: var(--mypink); }
footer .copy{ border-top:1px solid #333333; line-height: 40px; text-align: center; }
footer .copy *{ padding: 0 20px; }
@media( max-width:768px )
{
}
@media( min-width:769px ) and ( max-width:991px )
{
.jumbotron .art-r { background: url(../images/jumbotron-bg.png) repeat-x center 50px #E3E7FC; }
.bullets{ width: auto; }
.bullets .bullet{ padding: 40px 20px; width: calc(33.33% - 40px); }
.banner{ height: 315px; background-size: 162%; }
}
@media( min-width:992px ) and ( max-width:1260px )
{
.bullets{ margin: 0 auto; width: auto; }
.bullets .bullet{ padding: 80px 40px 20px; }
.banner{ background-size: 160% auto; }
.categories{ padding: 20px 0; background: #F8F8F8; }
.categories .container{ width: calc(100% - 40px); }
.categories .cat .caption{ font-size: 14px; color: #AAAAAA; }
.apptron article{ width: auto; }
}