/*

Theme Name: SPELLSTRAP

Description: RESPONSIVE BOOTSTRAP WEBSITE

Author: Spellmann & Associates

Version:1.0

*/



/* Mobile First CSS - look at responsive.css for the media queries */



/* This adds padding to accommodate for the Spellmann Toolbar */

body { font-family: 'Open Sans', sans-serif; font-size:16px; line-height:24px; color:#000;  padding-bottom: 56px;}

#primaryNavigation {

    position: fixed;

    bottom: 0;

    width: 100%;

    margin: 0;

    z-index: 999;

    left: 0;

}



/* This puts the collapsable menus in the Primary Navigation to the Spellmann Toolbar */

#primaryNavigation .navbar-collapse, #socialDropup {

    position: absolute;

    bottom: 54px;

    width: 101%;

    background: #E2F5FC;

    -webkit-box-shadow: 0px -4px 12px -7px rgba(0,0,0,0.39);

    -moz-box-shadow: 0px -4px 12px -7px rgba(0,0,0,0.39);

    box-shadow: 0px -4px 12px -7px rgba(0,0,0,0.39);

    border: none;

    text-align: center;

}



#primaryNavigation .dropdown-menu {

    text-align: center;

}



#navBarsBtn {

    border: none;

    height: 54px;

    margin: 0;

    padding: 0 2em;

    line-height: 58px;

}



#navBarsBtn:hover, #navBarsBtn:focus {

    background: none;

}



#navBars {

    font-size: 1.3em;

}



#mobileIcons {

    height: 54px;

    line-height: 58px;

}



#mobileIcons a {

    display: inline-block;

    font-size: 1.3em;

    margin: 0 1.2em;

    color: #000;

}



#socialDropup a {

    font-size: 1.7em;

    color: #000;

}



#socialDropup a .fa {

    margin: 1em;

}





#mobileIcons a:hover, #mobileIcons a:focus {

    text-decoration: none;

    color: #000;

}



/* Blog Page Styling */

.post-categories {

    list-style-type: none;

    padding: 0;

    margin: 0;

    clear: both;

}



.post-categories li {

    display: inline-block;

    margin: 1em 1em 1em 0;

}



.post-categories li a {

    background: #ccc;

    padding: 0.7em 1.3em;

    color: #000;

    text-decoration: none;

}


/* Sharp Classes */

.pt10{ padding-top:10px;}
.pt20{ padding-top:20px;}
.pt30{ padding-top:30px;}
.pt40{ padding-top:40px;}
.pt50{ padding-top:50px;}
.pt60{ padding-top:60px;}
.pt70{ padding-top:70px;}
.pt80{ padding-top:80px;}
.pb10{ padding-bottom:10px;}
.pb20{ padding-bottom:20px;}
.pb30{ padding-bottom:30px;}
.pb40{ padding-bottom:40px;}
.pb50{ padding-bottom:50px;}
.pb60{ padding-bottom:60px;}
.pb70{ padding-bottom:70px;}
.pb80{ padding-bottom:80px;}

.pl130{ padding-left:130px;}
.pr50{ padding-right:50px;}
.pr20{ padding-right:20px;}

.pt0{ padding-top:0 !important;}


.textright1{ text-align:right;}
.rightimg1 img{ float:right;}

ul{ margin:0; padding:0; list-style:none;}
ul li{ margin:0 0 10px;}

a{ color:#0e4394; text-decoration:none;}
a:hover{ color:#000; text-decoration:underline;}
a:focus{ outline:none !important;}

.btn-blue{ background:#027ec7; border-radius:20px; padding:7px 55px; font-size:12px; color:#fff; font-weight:700; text-transform:uppercase; 
text-decoration:none !important; transition:all ease 0.5s;}
.btn-blue:hover{ background:#016eae; color:#fff;}

.read-more{ font-size:12px; color:#0e4394; text-transform:uppercase; text-decoration:none !important; border-bottom:3px solid #0e4394;}
.read-more:hover{ border:none;}

h1, h2, h3, h4, h5, h6{ margin:0; padding:0;}
h1{ font-size:46px; margin-bottom:30px;}
h2{ font-size:32px;}
h3{ font-size:28px;}
h4{ font-size:24px; color:#4c4c4c; text-transform:uppercase;}
h5{ font-size:18px; text-transform:uppercase;}
h6{ font-size:14px;}

h5:after{ content:""; display:block; width:70px; margin:0 auto; background:#e5e5e5; height:3px; margin-top:10px;}
h4:after{ content:""; display:block; width:70px; margin:0 auto; background:#e5e5e5; height:3px; margin-top:10px;}

.linenone:after{display:none;}
.linenone{ margin-bottom:15px;}

.alignright{ float:right; margin:0 0 0 25px;}
.alignleft{ float:left; margin:0 25px 0 0;}
.aligncenter{ float:none display:block; margin:0 auto 20px;}

/*---Header---*/
#header{ background:url(images/header_bg.jpg) top center no-repeat; padding:20px 0 20px;}
.hidedesk{ display:none;}
.floatleft{ float:left;}
.topleftmenu{ width:40%;}
.toprightmenu{ width:40%;}
.logo{ width:20%;}

.topleftmenu, .toprightmenu{ padding-top:22px;}
.topleftmenu .widget{ padding-right:40px;}
.toprightmenu .widget{ padding-left:40px;}

.topleftmenu ul, .toprightmenu ul{ margin:0; padding:0; list-style:none;}
.topleftmenu ul li, .toprightmenu ul li{ float:left; width:33.3%; text-align:center;}
.topleftmenu ul li a, .toprightmenu ul li a{ font-size:16px; color:#0663b4; font-weight:700; text-transform:uppercase; text-decoration:none;}


/*-----
.topleftmenu ul li:nth-child(1), 
.topleftmenu ul li:nth-child(2), 
.topleftmenu ul li:nth-child(3), 
.toprightmenu ul li:nth-child(1), 
.toprightmenu ul li:nth-child(2), 
.toprightmenu ul li:nth-child(3){ padding-top:68px;}

.topleftmenu ul li:nth-child(1){ background:url(images/menu_icon_1.png) top center no-repeat;}
.topleftmenu ul li:nth-child(2){ background:url(images/menu_icon_2.png) top center no-repeat;}
.topleftmenu ul li:nth-child(3){ background:url(images/menu_icon_3.png) top center no-repeat;}
.toprightmenu ul li:nth-child(1){ background:url(images/menu_icon_4.png) top center no-repeat;}
.toprightmenu ul li:nth-child(2){ background:url(images/menu_icon_5.png) top center no-repeat;}
.toprightmenu ul li:nth-child(3){ background:url(images/menu_icon_6.png) top center no-repeat;}
----*/

.topleftmenu img, .toprightmenu img { display:block !important; margin:0 auto 8px; padding:0 !important;}

.topleftmenu .menu-item a img, .toprightmenu .menu-item a img{ transition:all ease 0.8s;}
.topleftmenu .menu-item a:hover img, .toprightmenu .menu-item a:hover img{ transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg);}


.logo img{ height:auto;}

/*---Banner---*/
.banner{ padding:40px 0 0;}
.banner p{ margin-bottom:30px;}
.banner .widget{ float:left; width:46%;}
.banner .widget:last-child{ width:54%;}
.banner .widget-title{ font-family: 'Lato', sans-serif; font-size:56px; line-height:62px; color:#075baf; font-weight:700;}

/*---Bottom Banner---*/
.bottombanner{ background:#e2f5fc; padding:0 0 15px; text-align:center;}
.bottombanner h2{ margin-bottom:30px;}
.bottombanner h2:before{ background:url(images/heading_before.png); content:""; display:inline-block; width:87px; height:46px; position:relative; top:18px;}
.bottombanner h2:after{ background:url(images/heading_after.png); content:""; display:inline-block; width:81px; height:61px; margin-left:20px; position:relative;
top:18px;}
.bottombanner h2 a, .bottombanner h2 a:hover{ color:#000; text-decoration:none;}

/*---Content---*/
#pageTemplate{ font-size:16px; line-height:28px; padding-bottom:40px;}
#pageTemplate p{ margin-bottom:25px;}

/*---Blog---*/
#blogTemplate{ padding:40px 0 0;}
#blogTemplate article{ background:#f1f1f1; border-radius:6px; padding:25px 25px 30px; margin:0 0 20px;}
#blogTemplate article p{ margin-bottom:22px;}
#blogTemplate h3{ margin-bottom:20px;}
#blogTemplate h3 a, #blogTemplate h3 a:hover{ color:#000; text-decoration:none !important;}
#blogTemplate h6 i{ margin-right:8px;}

#blogTemplate .blogmore{ background:#027ec7; border-radius:20px; padding:7px 40px; font-size:12px; color:#fff; font-weight:700; text-transform:uppercase; text-decoration:none;}

#blogTemplate aside{ background:#a3ddf3; border-radius:4px; padding:20px 20px 15px; margin:0 0 20px; font-size:14px; line-height:24px;}
#blogTemplate aside a{ color:#000;}
#blogTemplate aside a:hover{ text-decoration:none !important;}
#blogTemplate aside ul li{ border-bottom:1px solid #97cde1; padding:0 0 2px; transition:all ease 0.6s;}
#blogTemplate aside ul li:hover{ padding-left:8px;}

/*---Home Gallery---*/
.homegallery{ padding:30px 0 40px;}
.homegallery img{ margin:0 auto; display:block; width:100%;}
.homegallery .ftg-items{ width:100%; background:#f00;}
.homegallery h1 {left:0;  margin-bottom:0; margin:0 auto; position:absolute; right: 0;  top:46%; font-size:62px; font-weight:500; text-shadow:5px 10px 15px #333333;}

@media(min-width:1600px)
{
#envira-gallery-item-87{ right:0 !important; left:inherit !important;}
#envira-gallery-item-89{ left:264px !important;  width:527px !important;}
#envira-gallery-item-90{ left:0 !important;}
}


/*---Home Contact Form---*/
.homecontactform{ padding:40px 0 0;}
.homecontactform h4{ margin-bottom:60px;}
.homecontactform .form-control { border:none; box-shadow:none; border-radius:0; border-bottom:1px solid #ececec; margin-bottom:2px; height:40px; font-size:16px; font-style:italic;}
.homecontactform .wpcf7-form-control-wrap{ border-bottom:1px solid #ececec; display:block; margin-bottom:30px;}
.homecontactform input[type="submit"]{ background:#009ad8; border:1px solid #017cad; border-radius:22px; padding:6px 40px; margin:30px 0 0; font-size:16px; color:#fff; 
font-weight:600; text-transform:uppercase; transition:all ease 0.5s;}
.homecontactform input[type="submit"]:hover{ background:#0383b6;}


.form-all .form-textbox { height:40px !important;}


/*---Contact Page Form---*/
.removebr br{ display:none;}


/*---Footer---*/
#footer{ padding:40px 0;}
.footermenu{ padding-bottom:40px;}
.footermenu ul{ margin:0; padding:0; list-style:none; text-align:center;}
.footermenu ul li{ float:none; display:inline-block; border-right:1px solid #333333; padding:0 18px; font-size:18px;}
.footermenu ul li:last-child{ border:none;}
.footermenu ul li a{ color:#000; text-decoration:none;}
.copyright{ font-size:13px; text-align:right;}

@media (max-width: 991px) 
{
.pl130{ padding-left:0;}
.pr50{ padding-right:0;}
.topleftmenu .widget{ padding-right:20px;}
.toprightmenu .widget{ padding-left:20px;}
.topleftmenu ul li a, .toprightmenu ul li a{ font-size:14px;}
.banner .widget-title{ font-size:38px; line-height:52px;}
.copyright{ text-align:center;}


#envira-gallery-item-77{ right:auto !important; left:auto !important;}
#envira-gallery-item-79{ left:auto !important;  width:auto !important;}
#envira-gallery-item-80{ left:auto !important;}
 
}

@media (max-width: 768px) 
{
.pl130{ padding-left:0;}
.pr50{ padding-right:0;}
.pr20{ padding-right:0;}		
	
.topleftmenu, .toprightmenu{ display:none;}
.logo{ width:35%; margin:0 auto; float:none;}
.hidedesk{ display:block;}
.banner .widget{ float:left; width:100%; text-align:center;}
.banner .widget:last-child{ width:100%;}
.banner .widget-title{ font-size:32px; line-height:42px;}
.bottombanner{ padding:20px 0;}
.bottombanner h2:before, .bottombanner h2:after{ display:none;}
.bottombanner h2{ margin-bottom:20px;}
.textright1{ text-align:center;}
.rightimg1 img{ float:none; margin:0 auto; display:block;}
img{ display:block; margin: auto;}
.homegallery{ padding:10px 0 30px;}
.homecontactform h4{ margin-bottom:30px;}
.homecontactform input[type="submit"]{ margin:10px 0 0;}
#footer{ display:none;}

.navbar-collapse {background-color: #f1f1f1 !important;}
.navbar-nav li a{ transition:all ease 0.5s;}
.navbar-nav li a:hover{ background:#000 !important; color:#fff !important;}

}

@media (max-width: 480px) 
{
#header{ background-size:cover;}
 .logo{ width:45%;}
#mobileIcons a { margin-right:0;} 
}

@media (max-width: 360px) 
{
 .logo{ width:55%;} 
}